Don’t Make Me Think ออกแบบเว็บไซต์ให้เข้าใจง่ายๆ และไม่ต้องใช้สมอง

ตอนนี้ผมกำลังสนใจหาความรู้เรื่อง Usability เพิ่มเติม เลยจัดหนังสือ Classic ทางด้านนี้มาอ่าน ชื่อหนังสือ “Don’t Make Me Think: A Common Sense Approach to Web Usability” หรือชื่อภาษาไทยคือ  “ออกแบบเว็บไซต์ให้เข้าใจง่ายๆ และไม่ต้องใช้สมอง” เขียนโดย Steve Krug ผมขอสรุปไอเดียสั้นๆที่จับใจความได้ไว้ดังนี้

 

1. Don’t make me think! อย่าให้ชั้นคิดเยอะ กฎเหล็กข้อแรกของยูสบิลิตี้ (law of usability) ที่สำคัญที่สุด เราควรออกแบบเว็บให้ชัดเจนในตัวเองมากที่สุด (Self-evident) ยกตัวอย่างเช่น อะไรที่เราต้องการให้ผู้ใช้รู้ว่า click ได้ ก็น่าจะสื่อออกมาในรูปปุ่ม, การใช้คำ ควรใช้คำที่คนทั่วไปเข้าใจง่ายๆ แทนที่จะเป็นคำหรูๆที่เข้าใจยาก

2. จริงๆแล้วผู้คนใช้เว็บไซต์กันอย่างไร? แท้จริงแล้วพวกเขาก็แค่มองผ่านๆ อ่านข้ามๆ และเดาสุ่มไปเรื่อย ความจริง 3 ข้อ คือ

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

3. หลักสูตรบิลบอร์ดดีไซน์ 101: ออกแบบเพจเพื่อการสแกน ไม่ใช่การอ่าน มีเรื่องสำคัญอยู่ 5 อย่างที่คุณต้องทำเพื่อให้มั่นใจว่าผู้ใช้เว็บคุณ “เห็น” และ “เข้าใจ” เว็บไซต์ของคุณมากที่สุดเท่าที่จะเป็นไปได้

  • สร้างลำดับขั้นทางสายตา (Visual Hierarchy) ในแต่ละเพจ หมายถึงอะไรที่สำคัญเราต้องเน้นให้เด่นชัดสะดุดตามากกว่าส่วนที่สำคัญน้อยกว่า, เนื้อหาอะไรที่เกี่ยวข้องกันก็ควรจัดโครงสร้างให้เป็นสัดส่วนชัดเจน
  • ใช้ประโยชน์จาก Conventions ซึ่งก็คือ ความเข้าใจในสิ่งต่างๆที่คนทั้งโลกมีร่วมกัน เช่น ระบบแท๊บ ที่คนเข้าใจเทียบเคียงได้จากแท๊บในหนังสือ การนำมาใช้กับเว็บเลยเข้าใจได้ง่ายไปด้วย
  • แบ่งเพจออกเป็นส่วนๆ ที่สื่อความหมายชัดเจน
  • ออกแบบส่วนที่คลิกได้ให้มองเห็นและเข้าใจง่าย
  • ลดสิ่งรบกวนสายตา (noise)

4. ทันทีที่เราต้องเผชิญกับทางเลือก (เช่น จะพิพม์ค้นหาสินค้ายังไง ด้วยวิธีไหน) ซึ่งโดยมากแล้วเราต้องเจอกับมันอยู่ตลอดเวลาที่ใช้เว็บไซต์ การสร้างทางเลือกที่ชัดเจนไม่ต้องคิดมาก คือการทำให้เว็บไซต์ใช้งานง่ายที่สุดนั่นเอง กฎพื้นฐานคือ 3 คลิกที่เข้าใจง่าย มีค่าเท่ากับคลิกเดียวที่ต้องใช้สมอง

5. ตัดคำที่ไม่จำเป็น โดยการตัดคำฟุ่มเฟือยที่ไม่เคยมีใครใส่ใจอ่าน เพื่อเป็นการลดระดับสิ่งรบกวน รวมทั้งเน้นย้ำเนื้อหาที่สำคัญให้ดูโดดเด่นสะดุดตามากขึ้น

6. ทดสอบยูสบิลิตี้ 10 เซนต์ต่อวัน: ทำการทดสอบให้เรียบง่าย คุณจะได้ทดสอบได้มากพอ

ความจริงหลายประการเกี่ยวกับการทดสอบ

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

การทดสอบยูสบิลิตี้แบบลดกระหน่ำ (ประหยัดและได้ผลค้มการลงทุนมากๆ)

  • จำนวนผู้ทดสอบต่อครั้ง: 3-4 คน
  • แนวทางการเลือกคน: เลือกๆไปเหอะ ใครก็ได้ที่ใช้เว็บเป็น
  • สถานที่ทดสอบ: ออฟฟิศหรือห้องประชุมไหนก็ได้ซักแห่ง
  • ผู้ควบคุมการทดสอบ: ใครก็ได้ที่มีน้ำอดน้ำทนพอประมาณ
  • การเตรียมการล่วงหน้า: จะทดสอบเมื่อไหร่ก็ได้โดยวางกำหนดการล่วงหน้าเล็กน้อย
  • การเตรียมความพร้อม: แค่ตัดสินใจว่าคุณอยากนำเสนออะไรให้ผู้ทดสอบดู
  • ทดสอบอะไรก่อน/หลัง: ทดสอบทีละเล็กละน้อยอย่างต่อเนื่องตลอดเวลาการพัฒนา
  • ต้นทุน: 3,000 บาท หรือต่ำกว่านี้
  • ผลลัพธ์หลังทดสอบ: ทีมพัฒนา (และผู้เกี่ยวข้อง) ได้ซักข้อสรุปในช่วงพักกลางวันในวันทดสอบ

ไว้หลังจากผมทำการทดสอบแล้วผมมีเวลาจะมาแชร์ประสบการณ์เพิ่มครับ (จบ)

One thought on “Don’t Make Me Think ออกแบบเว็บไซต์ให้เข้าใจง่ายๆ และไม่ต้องใช้สมอง

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s