ThaiSEOBoard.com

(http://i83.photobucket.com/albums/j295/woratana/d18-basic-webdesign-mistakes.jpg)

บทความที่เอามาให้อ่านกันในวันนี้เกี่ยวกับ ข้อผิดพลาดในการดีไซน์ที่เห็นได้บ่อย ๆ ซึ่งบางข้อก็เป็นเรื่องธรรมดามาก ๆ แต่บางคนก็มองข้ามไปครับ ลองอ่านกันดูครับ ชอบไม่ชอบยังไงก็บอกกันได้ครับ

สำหรับบทความต้นฉบับภาษาอังกฤษ อ่านได้ที่เว็บต้นฉบับเลยครับ ผมไม่ได้นำภาพในบทความนั้นมานะครับ เพราะงั้นแนะนำให้คลิกดูภาพประกอบในบทความต้นฉบับครับ
http://www.1stwebdesigner.com/design/basic-visual-web-design-mistakes/

1. เลือกใช้ฟ้อนต์แปลก ๆ

คุณเคยเข้าไปเจอเว็บไซด์ที่ใช้ตัวหนังสืออ่านยาก ๆ มั้ยครับ การเลือกใช้ฟ้อนต์สวย ๆ งาม ๆ ในเว็บเป็นเรื่องที่ทำได้ แต่ต้องไม่ใช้ในส่วนที่เป็นข้อมูลที่ผู้ใช้ต้องอ่านเอาเนื้อหาครับ และสำหรับส่วนเนื้อหาก็ไม่ควรใช้ฟ้อนต์อื่นที่นอกเหนือจาก Web-Safe Fonts ครับ เพราะถ้าเครื่องคนอ่านไม่มีฟ้อนต์นั้น ๆ จะทำให้บางทีกลายเป็นตัวอักษรตัวเล็ก ๆ ของฟ้อนต์อื่นแทนครับ

2. ทั้งเว็บมีแต่ตัวหนังสือ

เว็บไซด์ไม่ใช่สมุดโน้ตส่วนตัวของเราครับ ไม่ควรใส่แต่ตัวอักษรติด ๆ กัน ไม่มีรูปประกอบอะไรเลย อันนี้เป็นเหตุผลที่บางคนไม่ค่อยชอบอ่าน Wikipedia กันครับ (ชอบ Copy-paste กันมากกว่า จริงมะ) หรือต่อให้คุณไม่รู้จะใส่รูปอะไรไปในบทความนั้น ๆ ก็ควรจะหารูปที่ใกล้เคียงกับหัวข้อเอามาใส่บ้างครับ ไม่งั้นคนอ่านเว็บไซด์คุณหนีกันแน่นอน

3. ไม่คิดจะแบ่งย่อหน้า

นอกเหนือจากการใส่รูปภาพประกอบบทความแล้ว ก็มีควรแบ่งย่อหน้าให้อ่านง่ายด้วยครับ ลองนึกภาพการอ่านบทความยาวมาก ๆ ติดกันในย่อหน้าเดียว มันจะอ่านลำบากมาก ๆ ใช่มั้ยครับ? เพราะไม่มีจุดให้พักสายตาเลย ต้องอ่านติดต่อกันไม่งั้นจำไม่ได้ว่าอ่านถึงไหนแล้ว อย่าลืมใส่ย่อหน้ากันนะครับ

4. ตัวอักษรเล็กจนต้องใช้แว่นขยาย

คุณเคยเจอเว็บที่ตัวอักษรเล็กมาก ๆ จนต้องใช้แว่นขยายส่องมั้ย? สำหรับขนาดตัวอักษรในเว็บไม่ควรเล็กกว่า 12pt ครับ (แล้วแต่ฟ้อนต์ด้วยนะ) ถ้าคุณคิดว่าทำเว็บมาให้วัยรุ่นสายตาดีอ่านอย่างเดียวก็ว่าไปอย่าง แต่อย่าลืมว่าวัยรุ่นสมัยนี้ดูจอคอมมาก สายตาก็เริ่มสั้นกันแล้วนะครับ ถ้าใช้ฟ้อนต์เล็กมากเพราะที่ไม่พอจริง ๆ ก็ควรจะมีฟังก์ชั่นในการเพิ่มขนาดตัวอักษรเป็นปุ่ม Javascript ให้คนอ่านกดใช้ด้วยครับ แต่ถ้าหลีกเลี่ยงได้ก็หันไปใช้ขนาดฟ้อนต์ที่พอเหมาะจะดีที่สุดครับ

5. ใช้แฟลชเยอะเกินไป

Flash มันสวย มีลูกเล่น และดูดีครับ แต่มันทำให้เว็บไซด์ของคุณเปิดช้าลง และกินแรมเครื่องคนเปิดอย่างมหาศาลครับ อาจทำให้คนที่เครื่องไม่แรงจริง ๆ หรือมีการเปิดโปรแกรมอื่นพร้อมกันไปด้วย เปิดเว็บไซด์คุณแล้วค้างได้ครับ นอกจากนั้นพวกบอทของ Search Engine ต่าง ๆ (เช่น Google) ตามลิงค์ในแฟลชได้ไม่ดีมากครับ ทำให้เข้าไปเก็บข้อมูลในเว็บเราได้ไม่ทั่วถึง

และอีกอย่างคือมีกระแสของ Apple ที่ผลิตภัณฑ์ต่าง ๆ เช่น iPhone กับ iPad ที่บราวเซอร์ไม่สนับสนุน Flash ครับ (Steve Jobs ประกาศจุดยืนว่าจะไม่ซัพพอร์ท Flash) ทำให้ไม่ควรใช้แฟลชในเว็บไซด์มากเกินไป โดยเฉพาะส่วนสำคัญของเว็บ เช่น Navigator ครับ

6. เนื้อหาบนรูปพื้นหลังสีสด ๆ

เว็บไซด์ที่ดีส่วนใหญ่จะวางตัวหนังสือลงบนพื้นหลังสีเรียบ ๆ ที่อ่านง่ายครับ ถ้าคุณคิดว่าถ้าใส่รูปภาพสวย ๆ เข้าไปเป็นพื้นหลังตัวอักษรแล้วจะทำให้เว็บไซด์คุณดีขึ้น คุณคิดผิดแล้วครับ เพราะถ้ารูปสวยก็จริงแต่ทำให้ตัวหนังสืออ่านยากขึ้น ผู้ใช้ก็จะเบื่อที่จะอ่านเว็บไซด์ของคุณจนปิดทิ้งไปในที่สุดครับ ลองเอารูปสวย ๆ ของคุณไปวางไว้ที่อื่นที่ไม่มีตัวอักษรจะดีกว่า

7. โฆษณาเยอะเกินไป

อย่าลืมว่าในการออกแบบเว็บไซด์นั้น Content is King ครับ เนื้อหาของเว็บไซด์สำคัญกว่าทุก ๆ อย่างเลยครับ อย่าให้เรื่องเงินมายั่วจนคุณไปเผลอวางโฆษณาในจุดที่รกตาคนอ่านเว็บไซด์ครับ เพราะมีแต่จะทำให้คนอ่านรู้สึกไม่ดีกับเว็บไซด์ของคุณมากขึ้น เว็บไซด์ที่ดีจะวางโฆษณาแยกจากเนื้อหาไปเลย เช่น วางใน Sidebar หรือ Footer แล้วคนที่ชอบเว็บไซด์เราจะช่วยคลิกโฆษณาให้เองครับ

8. ป็อปอัพในเว็บไซด์

ไม่ว่าใครก็ไม่ชอบ Pop-up บนเว็บไซด์ครับ โดยเฉพาะ Pop-up โฆษณาหลอกลวงทั้งหลาย เพราะงั้นทางที่ดีอย่าให้เว็บไซด์ของคุณมี Pop-up เลยครับ มันเป็นสิ่งที่น่ารำคาญมาก ๆ ถ้าอยากสร้างอะไรที่เด้งขึ้นมาแนะนำให้ลองใช้พวกสคริปต์ Lightbox ครับ มันจะไม่เปิดบราวเซอร์หน้าใหม่ แต่จะเด้งขึ้นมาบนหน้าเว็บแทน

9. เนื้อหายาวเกินไป

ต่อให้เป็นบทความที่ดียังไง ถ้าบทความนั้นยาวเกินไปคนก็ขี้เกียจอ่านกันครับ เพราะงั้นถ้าจะเขียนอะไรยาว ๆ แนะนำให้เตรียมภาพประกอบไว้คั่นเนื้อหาตลอด และแบ่งบทความเป็นหลายหน้าเว็บ หลายตอน คนอ่านจะได้ไม่เบื่อกันก่อน และสามารถอ่านทีละตอน ไม่จำเป็นต้องอ่านทีเดียวหมดครับ

10. สีของลิงค์เหมือนสีเนื้อหา

ควรใช้ CSS ให้เป็นประโยชน์ในการกำหนดสีของลิงค์ให้ต่างจากเนื้อหาครับ เพื่อให้คนอ่านแยกแยะออกว่าอันไหนคลิกได้ อันไหนคลิกไม่ได้ และควรจะแยกสีระหว่างลิงค์ที่เคยคลิกแล้ว กับลิงค์ที่ยังไม่เคยคลิกด้วย (แต่ก็ไม่จำเป็นนะอันนี้) คนอ่านจะได้รู้ว่าหน้าไหนเคยเข้าไปอ่านแล้ว หน้าไหนยังไม่เคยเข้าไปอ่าน

บทความแปล เรียบเรียง และเพิ่มเติมโดย @designil
สนใจอ่านบทความเกี่ยวกับเว็บดีไซน์เพิ่มเติม เชิญที่ http://www.designil.com/ ครับผม  :wanwan017:

ขอบคุณสำหรับบทความดีๆ ครับ

ขอบคุณครับ ได้นำไปพิจรณา ปรับปรุงดู ครับ

ขอบคุณครับ จะเอาไปปรับปรุงดูนะคับ

ข้อ 1 เราสามารถตั้ง font เป็นชุดสำรองไว้ได้ priority ขึ้นอยู่กับลำดับ

เรื่องกร๊าฟฟิกที่จะทำให้เว็บโหลดนานขึ้น ถ้าเป็นเว็บที่เป็น static website อย่างพวกเว็บขององค์กร หรือเว็บที่เป็น portfolio กร๊าฟฟิกน่าจะเป็นทางเลือกที่ดีในการนำเสนอ แต่ถ้าเว็บที่เป็น dynamic เต็มที่เลย ใช้เยอะก็ไม่ค่อยจะถูก สรุปคือแล้วแต่รูปแบบของเว็บมากกว่า

ที่เหลือเห็นด้วยหมด จะลองเอาไปปรับปรุงครับ แต้งหลายๆ

ขอเพิ่มเติมตรงเรื่องของ Font สำรองครับ

ตัวอย่าง เช่น ...

body {
   font-family:"tahoma", san serif, ms san serif;
}

จากตัวอย่างจะทำให้ tahoma เป็น Font หลักครับผม หากเครื่องลูกข่ายมาเปิดเว็บไซต์ของเรา

แล้วไม่มี Font tahoma เค้าก็จะเห็น Font san serif หรือ ms san serif แทนครับ



ปล. จากทั้งหมด 10 ข้อ ผมไม่ติดนิสัยไหนเลย แต่ผมติดข้อที่ 11(ลืมตรวจงานก่อนอัพโหลด) และ 12 (ลืมสำรองไฟล์งาน)  :wanwan004:

ข้อ 11 นี่ถ้าเป็นดีไซน์ยังพอไหวครับ แต่ถ้าเป็นงานโปรแกรมมิ่งนี่เสียว ๆ อยู่ เดี๋ยวเผลอไปทำฐานข้อมูลพังก็ซวยเลย  :P

ส่วนข้อ 12 เป็นเหมือนกันเลย  :wanwan004:

แต่ละข้อ - -"