picpost

Share |

ท่านใดที่นำบทความนี้ไปเผยแพร่ที่เว็บหรือบล็อกของท่านกรุณาทำลิงค์กลับมายังบทความต้นฉบับด้วยนะคะ ขอบคุณค่ะ

สิ่งที่ควรทำและไม่ควรทำในการออกแบบเว็บไซต์ Do and Don't of Effective Web Design



By : Admin

Date write : 2009-10-30 21:31:35   Date update : 2009-10-30 21:38:56





เมื่อเราสร้างเว็บไซต์(หรือจ้างให้คนอื่นทำ website หรือ Blog ให้)  สำหรับคนทั่วไปที่ต้องการทำ Website หรือ blog เพื่อธุรกิจนั้น ส่วนใหญ่ก็จะบอกว่า

ต้องการอะไร ชอบแบบนั้น แบบนี้ เช่น โลโก้สีฉูดฉาดใหญ่ๆ นะ  หรือตัวอักษรที่ใหญ่ๆ เห็นชัดๆ นั่นอาจจะเพื่อธุรกิจ แต่สำหรับ web designer นั้นต้องดู

ความเหมาะสมด้วย สิ่งที่ web designer ต้องคำนึงถึงนั่นก็คือ

DONT: Just place boxes everywhere
อย่าทำเว็บที่มีแต่กรอบบ็อกซ์ อย่ามากจนเกินไป เพราะมันจะทำให้ผู้เข้าชมเว็บไม่รู้ว่าอะไร อยู่ตรงใหน ทำให้ไม่มีจุดสนใจ

ตัวอย่าง

business web design

DO: Focus on what’s important
แสดงสิ่งที่สำคัญหรือสินค้าพิเศษในเว็บให้เห็นชัดเจน
ถ้ากำลังทำเว็บไซต์สำหรับธุรกิจ ที่ต้องการขายของล่ะก็ เราต้องหาพื้นที่ในหน้าเว็บ เพื่อแสดงสินค้าชิ้นพิเศษ  ที่ทำให้เห็นเด่นชัด เพื่อให้รู้ว่าเว็บนี้ขายอะไร และควรมีคำอธิบายด้วย และจะต้องไม่มากเกินไป

DONT: Place irrelevant ads across your page
อย่าวางโฆษณาที่ไม่เกี่ยวข้องกับเนื้อหาในหน้าเว็บ
ถ้ากำลังพยายามสร้างรายได้จาก Website หรือ Blog อย่าวางโฆษณาที่ไม่เกี่ยวข้องกับหน้าเว็บ และจะต้องอย่าให้มีโฆษณามากเกินไป สมมุติว่า โฆษณา 70% และเนื้อหา 30% แน่นอนว่าผู้เข้ามาชมเว็บจะต้องไม่ประทับใจ และไม่กลับมาอีก

DO: Choose the right color scheme
เลือกสีที่เหมาะสม การเลือกสีเว็บ จะต้องคำนึงถึงผู้เข้าชมเว็บ และเนื้อหาเว็บ ถ้าเว็บเราเป็นเว็บที่น่าเชื่อถือ ก็ไม่ควรที่จะใช้สีสันฉูดฉาดจนเกินไป เช่นเว็บเกี่ยวกับสุขภาพ โรง

พยาบาล ควรจะใช้สีที่ทำให้รู้สึกสบาย ๆ ถ้าเป็นเว็บวงดนตรีพังค์ (Punk bands) ดนตรีร็อค (Rock bands) ก็อาจจะใช้สี ชมพู เหลือง ดำ หรือสีน้ำเงินเป็นต้น

ตัวอย่าง

color web


DONT: Overdo it with 20 different colors
อย่าใช้สีมากเกินไป ควรเลือกสีที่ไม่ขัดกัน และไม่ใช้สีเยอะ ถ้าไม่รู้จะเลือกสีอะไร ขอแนะนำเว็บ http://th-th.colourlovers.com/ ใช้ในการเลือกสีเว็บไซต์
ซึ่งเว็บนี้จะมีสีที่นักออกแบบเลือกเอาไว้ แต่ละแบบจะมี 5 สีในเซต

DO: Make it easy to scan your pages
ควรสร้างเว็บให้ง่ายต่อการอ่าน โดยการใช้ ขนาดของตัวอักษรที่เหมาะสม เช่น หัวข้อ ก็ควรใช้ขนาดที่ใหญ่กว่าเนื้อหา โดยการใช้ H tags (H1,H2,H3..)

ตัวอย่าง

font


DONT: Write one paragraph per page that is 1,000+ words long
ในวรรคหนึ่งๆของเนื้อหา ไม่ควรใช้ตัวอักษรมากเกินไป เวลาที่คนอ่าน เข้ามาเจอตัวหนังสือเยอะๆ คงไม่อยากจะอ่านเท่าไหร่ ควรแบ่งเนื้อหาออกเป็นส่วนๆ อาจจะใช้รูปภาพเป็นตัวช่วยเสริมก็ได้

DO: Keep it simple stupid
ธรรมดาแล้วคนจะไม่ชอบทำอะไรที่ต้องใช้เวลานานๆ อย่างเช่นในฟอร์มสมัครสมาชิกที่ให้กรอกข้อมูลส่วนตัว ถ้าเราให้กรอกข้อมูลเยอะเกินไป อาจจะทำให้ผู้ใช้เว็บขี้เกียจที่จะกรอก และอาจจะยกเลิกการสมัครสมาชิกกับเว็บเราไปเลยก็ได้


DO: Focus on killer copywriting
ควรเลือกคำหรือประโยคที่ดึงดูดความสนใจของผู้อ่าน เพื่อเน้นในสิ่งที่เราต้องการให้ผู้อ่านทำตาม เช่นในการให้ผู้ใช้งานเว็บ เข้าไปเลือกแพคเกจสินค้า ก็ควรใช้คำพูดที่ดึงดูดความสนใจที่จะเข้าไปคลิกในแพคเกจที่เราต้องการขาย(สินค้าที่แพงที่สุด)

DONT: Stuff your pages full of keywords

ในการเขียนบทความ ไม่ควรใส่ Keyword มากไป เพราะ Google จะมองว่าเป็นการสแปมคีย์เวิร์ด ควรเขียนตามธรรมชาติ และเน้น Keyword แต่พอดี

DO: Set your navigation up properly
ในการทำปุ่ม หรือลิงค์เพื่อไปยังหน้าต่างๆ ของเว็บไซต์ ควรใช้สีเข้าช่วยเพื่อสร้างความแตกต่าง เช่นในการลงทะเบียน อาจจะใช้สีแดงเมื่อยังไม่ได้ลงทะเบียน หรือใช้สีเขียวแสดงถึงการลงทะเบียนเสร็จแล้ว

DONT: Make everything on your page an image
อย่าทำทุกอย่างในเว็บให้เป็นรูปภาพ และอย่าใช้รูปภาพที่ใหญ่เกินไปในการออกแบบเว็บ ถ้า Background มีขนาด 1MB (ใหญ่มาก) เมื่อคนเปิดเว็บเข้ามาจะ ต้องรอโหลดรูปภาพที่มีทั้งหมดในเว็บเสร็จก่อน ซึ่งจะทำให้เว็บเราโหลดช้ามาก คงไม่มีใครชอบรอใช่มั้ยคะ

DONT: Throw a bunch of crap together and think you’ll do well
Animated gif และการทำตัวอักษรเลื่อน (marquee scrolling) เป็นสิ่งที่เห็นกันใน My space ของเด็กอายุ 13 ขวบ หรือในเว็บสมัยเก่า ซึ่งมันคงไม่เข้ากันกับเว็บไซต์ในปัจจุบัน หรือเว็บไซต์เกี่ยวกับธุรกิจ (ยกเว้นเว็บส่วนตัวค่ะ)






" ความคิดเห็นใหม่อยู่ด้านบนค่ะ "

 

คอมเมนต์ แสดงความคิดเห็น

โดย*   Guest  [ Login | สมัครสมาชิกที่นี่]
รายละเอียด*
รหัสป้องกันสแปม*   ขอรหัสใหม่


กรอกตัวอักษรตามรูปด้านบน
   
 
 



แว่นตาแฟชั่น แว่นสายตาแฟชั่น แว่นตามิกกี้เมาส์ แว่นตาแบบ อั้ม พัชราภา แว่นตาแบบ ชมพู่ อารยา แว่นตาทรงกลม แว่นตาแฟชั่น
แว่นแฟชั่น