[DESIGN] 10 Useful Usability Findings and Guidelines

แปลมาจาก ตรงนี้ ผ่านทางความขี้เกียจของคุณ Mk ตรงนี้

10 เรื่องควรรู้ ในการออกแบบ website ที่ผ่านการศึกษามาแล้ว

1. label ของ field ควรอยู่ด้านบนของ field นั้นๆ เป็นเรื่องจริงที่คนส่วนใหญ่ จะมองจากด้านบนลงด้านล่าง และจากประสพการณ์ส่วนตัว ผู้ใช้งานชอบที่จะ input ข้อมูลลง field จากด้านบนลงด้านล่างด้วย แม้ว่า field นั้นจะมี 2 คอลัมเรียงกันก็ตาม

ภาพจาก wordpress.com

2. คนส่วนใหญ่ จะ focus ไปที่ภาพหน้าคนก่อนเสมอ จากนั้นจึง focus ไปที่จุดที่ภาพนั้นมองอยู่ ดังนั้น ถ้าเราต้องการให้อะไรมันเด่นขึ้นมา ก็ควรจะมีรูปหน้าคนมองมันอยู่น่ะ

ภาพจาก usableworld.com.au

3. ไม่ว่าของที่เราต้องการนำเสนอนั้นจะดูธรรมดาสักแค่ไหน ถ้าเราออกแบบหน้าตาการนำเสนอให้ดี ของสิ่งนั้นก็จะดูดีไปเอง

ภาพจาก feedafever

4. คนส่วนใหญ่ ไม่ชอบเลื่อนหน้าจอดูเนื้อหาส่วนที่ถูกซ่อนอยู่ ดังนั้น ถ้าต้องการจะ present อะไร ก็จงจับให้มันอยู่ในส่วนหัวของหน้าจอแรกซะ

ภาพจาก basecamphq

5. สีฟ้า เป็นสีที่ดีที่สุดที่จะใช้เป็นสีของ link เพราะมันเป็นค่ามาตรฐานมาตั้งแต่ browser ยุคแรก และคนส่วนใหญ่รู้จักดี หรือถ้าต้องการความแตกต่าง สีของ link ก็ควรเป็นสีที่ตัดกับสีของพื้นหลัง และไม่อยู่ในเฉดสีเดียวกับข้อความทั่วไป

ภาพจาก google

6. ความกว้างของช่องค้นหาที่ดีควรกว้าง 27 ตัวอักษร เพราะมีการศึกษามาแล้วว่า ตัวอักษร 27 ตัว เป็นจำนวนที่เหมาะสมที่สุด และสามารถค้นหาสิ่งที่ต้องการได้ถึง 90% แต่จงจำไว้ว่า ควรใช้ em ในการกำหนดความกว้างแทน pixel เพราะ 1 em เท่ากับความกว้างของตัวอักษร "M" 1 ตัว

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

ภาพจาก thenetsetter

8. ไม่จำเป็นต้องใช้คนเป็นร้อยเป็นพัน ในการทดสอบการใช้งานเลย คนแค่ไม่กี่คนก็ค้นพบปัญหาได้เกือบทั้งหมดแล้ว

ภาพจาก useit

9. หน้าแสดงข้อมูลของสินค้าที่ละเอียดครบถ้วน จะช่วยเพิ่มยอดขายของเราให้ได้มากมาย เคยไหมที่ต้องการซื้ออะไรซักอย่าง แต่พอเข้าไปดูที่ website ผู้ผลิตแล้ว กลับไม่มีข้อมูลอะไรที่มีประโยชน์ มีแค่รูป 2 รูป กับคำอธิบาย 2 บรรทัด มันทำให้เราตัดสินใจได้ง่ายมากว่า "กุไม่ซื้อก็ได้ว่ะ"

ภาพจาก apple

10. ผู้ใช้ส่วนใหญ่ "ตาบอด" กับโฆษณา ต้องใช้คำว่าตาบอด เพราะเมื่อใดก็ตามที่ผู้ใช้มองเห็นอะไรที่ดูเหมือนโฆษณา ผู้ใช้จะไม่สนใจมันในทันที แม้ว่าสิ่งนั้นจะไม่ใช่โฆษณาเลยก็ตาม ดังนั้น จงระวังอย่าทำอะไรให้มันดูเหมือนโฆษณา

แถมท้าย ข้อมูลการออกแบบจากกรณีศึกษา ที่คนส่วนใหญ่ใช้กัน แยกตามประเภท

typography design

• ความสูงของบรรทัด หาร ความสูงของตัวอักษร จะมีค่าประมาณ 1.5
• ความยาวของบรรทัด หาร ความสูงของบรรทัด จะมีค่าประมาณ 28
• ความสูงของช่องว่างระหว่างย่อหน้า หาร ความสูงของบรรทัด จะมีค่าประมาณ 0.8
• จำนวนตัวอักษรใน 1 บรรทัด จะมีค่าประมาณ 80 ตัวอักษร

blog design

• โครงสร้างส่วนใหญ่ เป็นแบบ fix width และจัดตำแหน่งแบบกึ่งกลาง โดยมีความกว้างประมาณ 975 พิกเซล
• หน้าแรกของ website จะแสดงเนื้อหาประมาณ 15 บทความ
• กว่าครึ่งของ layout ทั้งหมด ใช้ในการแสดงเนื้อหาหลัก

web form design

• ปุ่ม "ลงทะเบียน" ส่วนใหญ่ ใช้คำว่า "sign up" และติดอยู่บริเวณมุมขวาบน
• แบบฟอร์มลงทะเบียนมี layout แบบง่ายๆ เพื่อป้องกันความสับสนของผู้ใช้
• label ของ input field เป็นตัวหนา และ field มีการเรียงลำดับในแนวตั้งมากกว่าแนวนอน
• ค่านิยมของนักออกแบบส่วนใหญ่ มักจะออกแบบให้มี field แบบบังคับให้ใส่ข้อมูลอยู่ 2-3 field และแบบใส่ก็ได้ไม่ใส่ก็ได้อีก 2-3 field
• ส่วนใหญ่จะไม่มีการตรวจสอบความถูกต้องของ email แต่การตรวจสอบความถูกต้องของ password นั้นจะมีกันเกือบทั้งหมด
• ปุ่ม "submit" นั้น ส่วนใหญ่จะมีการจัดตำแหน่งแบบ ชิดซ้าย หรือไม่ก็ กึ่งกลาง

portfolio design

• layout ส่วนใหญ่ จะจัดตำแหน่งแบบกึ่งกลาง และมี navigation menu แนวนอนขนาดใหญ่
• เกือบครึ่งใช้ website แบบ dynamic page ที่เหลือเป็น static page
• มากกว่าครึ่ง มีหน้าแสดงรายล่ะเอียดของแต่ล่ะ project ซึ่งรวมถึง กรณีศึกษา, ความเห็นจากผู้ใช้, รูปตัวอย่าง และแบบร่าง
• หน้าข้อมูลสำหรับการติดต่อมักจะมี แผนที่, หมายเลขโทรศัพท์, email, ที่อยู่, นามบัตร และ contact form