ผู้เขียน หัวข้อ: 10 ข้อผิดพลาดการออกแบบเว็บที่ส่งผลต่อผู้ใช้งาน  (อ่าน 1510 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
ลองมาดู 10 ข้อที่จะช่วยให้เวบของเรามี Usablility ที่ดีขึ้นครับ

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


2.ไม่ได้ลิงค์ Logo กับหน้า Hompage
10 usability crime from line25 height=240
เวบส่วนใหญ่ในปัจจุบันทำการลิ้งค์ โลโก้ ของเวบไปยัง หน้าหลัก(homepage) ซึ่งทำให้ผู้ใช้เคยชิน ถ้าเป็นไปได้วางโลโก้ไว้ ด้านซ้ายบนได้ก็ยิ่งดี


3. ไม่ได้ทำ Visited link State
10 usability crime from line25 height=240
Visited link state เป็นสิ่งที่หลายคนมาข้าม แต่ทำให้ผู้ใช้ ได้รู้ว่า ได้เข้า ลิ้งค์ ไหนไปแล้วบ้าง


4. ไม่ได้กำหนด Active state ใน form
10 usability crime from line25 height=240‘:focus’ selector สามารถนำไปใช้ได้ในหลาย element แต่ควรทำใช้ใน input, textareas field เพื่อให้ผู้ใช้รู้ว่านี้ input field นี้ active อยู่ จะ Highlighted Border หรือจะเปลี่ยน Background ก็ได้


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


6. ไม่มี Background color หลัง Background image
10 usability crime from line25 height=240หลาย คนใช้ ภาพ เป็นพื้นหลัง เพื่อแสดง ข้อความต่างๆ ให้ดูสวยขึ้น แต่อย่าลืมว่าถ้าผู้ใช้บางคนปิดการแสดงภาพ ควรจะมีสีพื้นที่โทนสีใกล้เคียงกับภาพเพื่อป้องกันไม่ให้ข้อความนั้นอ่านไม่ ออก


7. เนื้อหาติดต่อกันเยอะเกินไป
10 usability crime from line25 height=240
ไม่ควรเรียงเนื้อหาที่มีแต่ตัวหนังสือต่อกันจนเกินไป ควรแบ่งเนื้อด้วยภาพ หรือ ข้อหัวที่ชัดเจน เพราะจะทำให้ผู้ใช้ อ่านได้ง่ายขึ้น


8. มีเส้นใต้แต่ไม่ใช่ลิ้งค์
10 usability crime from line25 height=240
ทุกคนรู้ว่า ข้อคาวมที่มีเส้นใต้นั้นคือลิ้งค์ หากข้อความที่ขีดเส้นใต้นั้นทำเพื่อดึงความสนใจจากผู้ใช้ ควรใช้ emphasize tag แทน


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


10. justified text
10 usability crime from line25 height=240
justified text อาจทำให้ดูเรียงสวยงาม แต่ก็ทำให้บางคนอ่านได้ยากเนื่องจาก ช่องว่าง ระหว่างคำไม่เท่ากัน


ที่มา line25
credit: http://www.squashup.com/2010/04/10-usability-crimes-shouldnt-do/