SquashUp

Usability เป็นอะไรที่หลายคนมองข้าม แต่จำเป็นเหมือนกันในการทำเว็บไซต์ ลองมาดู 10 ข้อที่จะช่วยให้เวบของเรามี Usablility ที่ดีขึ้นครับ

1. label กับ input field ไม่ได้สอดคล้องกัน

การใช้  attribute “for” ใน label tag ช่วยให้ผู้ใช้สามารถ คลิ้ก ที่ label แล้วจะทำให้เห็น input ที่เกี่ยวข้องอยู่ active โดยเฉพาะกับ checkboxes และ radio button ซึ่งทำให้ คลิ้กได้ง่ายขึ้น

2.ไม่ได้ลิงค์ Logo กับหน้า Hompage

เวบส่วนใหญ่ในปัจจุบันทำการลิ้งค์ โลโก้ ของเวบไปยัง หน้าหลัก(homepage) ซึ่งทำให้ผู้ใช้เคยชิน ถ้าเป็นไปได้วางโลโก้ไว้ ด้านซ้ายบนได้ก็ยิ่งดี

3. ไม่ได้ทำ Visited link State

Visited link state เป็นสิ่งที่หลายคนมาข้าม แต่ทำให้ผู้ใช้ ได้รู้ว่า ได้เข้า ลิ้งค์ ไหนไปแล้วบ้าง

4. ไม่ได้กำหนด Active state ใน form

‘:focus’ selector สามารถนำไปใช้ได้ในหลาย element แต่ควรทำใช้ใน input, textareas field เพื่อให้ผู้ใช้รู้ว่านี้ input field นี้ active อยู่ จะ Highlighted Border หรือจะเปลี่ยน Background ก็ได้

5. รูปภาพที่ไม่มี Alt description

Alt description เป็นเรื่องของ Accessibility แต่ในด้าน Usablility ก็จำเป้นเหมือนกัน ทุกภาพควรมี alt แต่ภาพไหนใช้เพื่อตกแต่งควรใส่ว่างไว้(alt”") และเมื่อใดที่ใช้รูปภาพเป็นลิ้งค์ควรใส่ alt ว่า ลิ้งค์นี้เชื่อมไปที่ไหน

6. ไม่มี Background color หลัง Background image

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

7. เนื้อหาติดต่อกันเยอะเกินไป

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

8. มีเส้นใต้แต่ไม่ใช่ลิ้งค์

ทุกคนรู้ว่า ข้อคาวมที่มีเส้นใต้นั้นคือลิ้งค์ หากข้อความที่ขีดเส้นใต้นั้นทำเพื่อดึงความสนใจจากผู้ใช้ ควรใช้ emphasize tag แทน

9. Click here กดตรงนี้

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

10. justified text

justified text อาจทำให้ดูเรียงสวยงาม แต่ก็ทำให้บางคนอ่านได้ยากเนื่องจาก ช่องว่าง ระหว่างคำไม่เท่ากัน

ที่มา line25

Related posts:

1. พื้นฐานที่ไม่ควรมองข้ามในการปรับแต่ง wordpress ให้เร็วขึ้น
2. หาชุดสีสำหรับออกแบบเว็บด้วย Kuler