[Webdesign Tips] 10 ข้อผิดพลาดที่เห็นบ่อย ๆ ในเว็บดีไซน์

designil

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

สำหรับบทความที่มีประโยชน์ หรือแจกของฟรีเกี่ยวกับเว็บดีไซน์ต่าง ๆ ถ้าไม่ได้เอาขึ้นหน้าเว็บผมจะเอาไปโพสใน บอร์ดเว็บดีไซน์ ทิป/เครื่องมือ/ของฟรี ครับ ส่วนสำหรับบทความที่รวมเว็บไซด์สวย ๆ หรือเทคนิค CSS เจ๋ง ๆ ผมจะเอาไปโพสไว้ใน บอร์ดเว็บดีไซน์ Showcase ครับ ลองไปเยี่ยมชมกันได้ครับ และถ้าใครมีคำถามเกี่ยวกับเว็บดีไซน์ก็เชิญที่ บอร์ดถาม/ตอบปัญหาเว็บดีไซน์ ได้เลยครับ!

* ตอนนี้บอร์ดได้ทำการลงใหม่แล้ว URL บอร์ดย่อยจะเปลี่ยนหมดครับ เข้าหน้าหลักบอร์ดได้ที่นี่ *

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

สำหรับบทความต้นฉบับภาษาอังกฤษ อ่านได้ที่เว็บต้นฉบับเลยครับ ผมไม่ได้นำภาพในบทความนั้นมานะครับ เพราะงั้นแนะนำให้คลิกดูภาพประกอบในบทความต้นฉบับครับ >> 10 Basic Visual Webdesign Mistakes – 1st Webdesigner


10 ข้อผิดพลาดที่เห็นบ่อย ๆ ในเว็บดีไซน์

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

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด

6 Responses

  1. ต้องค่อยๆ ปรับ แก้กันไป

    ผมว่า มาแลกลิงค์กันดีไหมครับ

    งั้นผม เอาไปใส่ให้นะครับ

  2. เพิ่งเข้ามาอ่านเพราะคุณเข้ามาเมนต์บล็อกผมนี่แหละ เขียนเนื้อหาได้น่าสนใจดีครับ

  3. ดีมากเลยครับ จะได้เอาให้น้องๆ ไปอ่านกัน

  4. ตอนนี้ทำแต่บล็อกอยากลองทำเวบบ้างครับ