วันนี้มาสานต่อจาก 26 เทคนิคการออกแบบเว็บไซต์ให้ดูดี [EP.1] หากใครยังไม่ได้อ่าน 10 ข้อแรกก็ลองย้อนไปอ่านดูนะ ส่วนใครที่อ่านแล้วหรือขี้เกียจย้อนไปอ่านก็ต่อกันตรงนี้เลย

11. มันต้องเด่น ลองเพิ่มความเข้มหรือความหนาของปุ่มหรือตัวอักษรที่เป็นการกระทำหลักๆดู เพื่อไม่ให้เว็บเราเรียบจริงๆ เรียบยังกะกระดาษ – -”

12. Made in Thailand แฟนๆจงเข้าใจว่าผลิตผลคนไทยเราใช้เองทำเอง ^ ^ ถ้าขายสินค้าก็ใส่ลงไปสิว่าทำที่ไหนเมดอินไทยแลน ไชน่า เจแปน เมียรม่า กัมพูชา ลาว ก็ว่ากันไป

13. อย่าเยอะ แบบฟอร์มจะถามอะไรมากมาย ยูเซอร์ พาสเวิร์ด ชื่อ ชื่อเล่น เบอร์โทร ที่อยู่ ชื่อพ่อ ชื่อแม่ ชื่อหมา ชื่อแมว ชื่อกระรอก – -” เอาแค่ยูเซอร์ กับพาสเวิร์ดพอที่เหลือไปแก้ไขเอาหลังจากสมัครแล้วไม่ก็อีเมลอีกสักช่อง ไม่ก็เอาอีเมลแหละเป็นยูเซอร์ไปเลย เดี๋ยวเค้าเพลียใจ จนกลับใจไม่สมัครเว็บเราก็เป็นได้นะ

14. ต้องยกออก แบบฟอร์มที่เป็น Dropdown มันดูซ่อนๆไปใช้ยากพอสมควร ถ้ารายการมันไม่เยอะจนเกินไป เอาออกมาเป็นปุ่มไม่ก็ Radio Button ก็ดีกว่านะ คลิกเดียวจอด

15. ยาวปายยาวปาย.. ไม่ต้องพยายามเอาเนื้อหามารวมกันที่หน้าเดียวโดยคนอ่านไม่ต้องเลื่อน Scroll Bar หรอก ปล่อยมันยาวๆไปแหละ แต่ออกแบบให้เค้ารู้สักหน่อยว่า มันยังมีอะไรให้อ่านอีกเยอะนะ เลื่องลงมาเถอะ

16. อย่าเยอะ (อีกครั้ง) จะเยอะไปไหนไอ้ลิงค์เนี่ย ลิงค์ ลิงค์ ลิงค์ ลิงค์ ลิงค์ ลิงค์ ลิงค์ แล้วคนอ่านมันจะคลิกตรงไหนล่ะเนี่ย อันไหนไม่สำคัญก็ซ่อนๆมันไว้ ^ ^

17. อัพเดทสถานะ บอกให้เค้ารู้บ้างว่าอะไรมีสถานะเป็นอะไร เช่น รายการใบเสร็จ อันไหนจ่ายแล้วก็บอกไปเลยว่าจ่ายแล้ว อันไหนยังไม่ได้จ่ายก็ทำลิงค์ไปหน้าจ่ายซะเลย ถ้าเปิดมาแล้วมีแต่ปุ่มให้จ่ายไม่ละอายบ้างก็ให้รู้กันไป ^ ^

18. Signup สมัครสมาชิก เห็นกันจนเบื่อ ลองหามุขอื่น คำอื่นมาใช้บ้างดีกว่า ถ้าคิดออกนะ บอกจุดประสงค์ของการสมัครสมาชิกไปเลย เช่น ถ้าจะให้เค้าสมัครสมาชิกมาเพื่อดูภาพลับ (ภาพที่เป็นความลับเฉพาะสมาชิก ไม่ได้หมายถึงภาพ…ลับ) ก็ใส่ลงไปเลยว่าดูภาพ อะไรก็ว่าไป แต่วงเล็บไม่ก็ทำตัวเล็กๆไว้ว่าสมัครสมาชิก #เสร็จฉัน

19. เมนูเฉพาะรายการ ข้อนี้ไปไม่ถูกเลยว่าจะอธิบายยังไง ก็เหมือนกับตอนที่เรามีข้อมูลเป็นตารางๆ แล้วเวลาจะลบต้องคลิกที่รายการๆนึงก่อน แล้วไปกดปุ่ม Delete ที่อยู่อีกที่ แล้วทำไมเราไม่ทำปุ่ม Delete ไว้ทุกแถวหลังรายการนั้นเลยล่ะ คลิกเดียวพอ

20. เร็ว อันนี้สืบเนื่องมาจากข้อ 13 ที่ว่าใช้ฟอร์มน้อยๆ หน้าไหนที่จะทำลิงค์เพื่อมายังหน้าสมัครสมาชิก มันดูคลิกเยอะจนเกินไป ก็ยกฟอร์มมาไว้ในหน้านั้นทั้งหมดเลย ไม่ต้องเปิดหน้าไหนให้เปลือง Traffic เล่น #ไหนๆก็มีน้อยอยู่แล้ว

21. ปาดปรื๊ดๆถ่างหุบๆ ใส่ Transition ให้เว็บดูบ้าง ไม่ใช่ขึ้นมาลอย อยู่ดีๆก็ทิ่มขึ้นมา แต่ใส่แต่พอดีนะ อย่าเยอะอีกเช่นกัน ไม่งั้นจะลายตาจนเกินงาม ซ้ำร้ายอาจจะทำให้ Web Browser ของคนอ่านเดี้ยงไปเลย เครื่องค้าง สุดท้ายจนที่ Reset หุๆๆ

22. เรียงลำดับใหม่ ลองสลับลำดับในการสมัครสมาชิกใหม่ดู หาอะไรบ้างอย่างให้เค้าทำและจบด้วยการสมัครสมาชิก ถ้าเค้าไม่สมัครที่เค้าทำไว้เมื่อสักครู่ก็จะมลายหายไป #ชั่วร้าย

23. อย่าเยอะ (อีกละ) กรอบอ่ะ จะเยอะไปไหน ไม่มีเลยยิ่งดี จะออกแบบให้โล่งๆ เคลียร์ๆ หรือรกเหมือนรังหนู ก็ลองหาวิธีอื่นที่ไม่เอากรอบมากั้นจะดูดีกว่ากันเยอะ

24. อย่าอวด ไม่ต้องอวดหรอกว่าเรามีฟีเจอร์อะไรให้ใช้บ้าง แต่บอกเค้าดีกว่าว่าเค้าจะได้อะไรจากการใช้งานสินค้าและบริการของเรา

25. จัดการกับปัญหาไม่มีข้อมูล ถ้าเค้าไม่มีข้อมูลใดๆเลย ลองทำระบบเสนอแนะว่าเค้าควรทำอย่างไรถึงจะมีข้อมูล ไม่ใช่บอกแค่ว่า ไม่มีข้อมูล

26. ดีมั้ยหรือไม่ดี ลองผสมคำในฟอร์มให้ดูเหมือนว่าเค้ากำลังคุยกับคนไม่ใช่กับคอม เช่น ถ้าเราถามว่า รับจดหมายข่าว แล้วมี Checkbox ให้ติ๊ก แล้วถ้าเราไม่ติ๊กล่ะ จะแปลว่าเราไม่รับจดหมายรึเปล่า ใส่ไปเลยว่า “ฉัน oต้องการ oไม่ต้องการ รับจดหมายข่าว” ให้มันรู้แจ้งเห็นจริงกันไปเลย

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

ปล.เช่นเคยครับ ผมก็ไม่ได้แปล ว่ากันไปตามที่ผมเข้าใจ งานนี้ตรงประเด็นบ้าง หลงประเด็นบ้างก็ปล่อยๆผมไปเถอะนะครับ ฮ่าๆๆ ~_~

ขอบคุณ : http://goodui.org

About The Author

นายนภดล แข็งการนา

นักวิชาการคอมพิวเตอร์ - กลุ่มงานพัฒนาระบบสารสนเทศ
สำนักวิทยบริการและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยราชภัฏนครสวรรค์

Leave Comment