สรุปย่อหนังสือ Don’t make me think (by Steve Krug) – หนังสือที่ UX Designer ควรอ่าน

สรุปย่อหนังสือ Don’t make me think (by Steve Krug) – หนังสือที่ UX Designer ควรอ่าน

Share:

1+

หนังสือ Don’t make me think เขียนโดย Steve Krug (ชื่อภาษาไทย “แค่ต้องคิดก็ผิดแล้ว ออกแบบเว็บไซต์ให้เข้าใจง่ายง่าย และไม่ต้องใช้สมอง”) เป็นหนังสือเกี่ยวกับ Usability ที่ขายดีที่สุดในโลกติดกัน 13 ปีซ้อน (2001 – 2013) และถูกแนะนำให้คนที่อยากศึกษาเรื่อง UX อ่านมากที่สุดเล่มหนึ่ง หนังสือเล่มนี้จึงถือได้ว่าเป็นหนังสือคลาสสิกขึ้นหิ้งอีกเล่มสำหรับ UX/UI Designer

เนื้อหาในหนังสือจะเกี่ยวข้องกับ Web Usability โดยเฉพาะ ในหนังสือจะยกตัวอย่างให้เราเข้าใจถึงการออกแบบเว็บให้ “ใช้งานได้ดีขึ้น” ไม่ใช่การออกแบบให้ “สวยขึ้น” อย่างเดียว

Key Learning Points

Don’t Make Me (or Anyone) Think

Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.

กฏพื้นฐานของการออกแบบเว็บ คือ “อย่าทำให้ User คิด” UI ทุกอย่างที่แสดงบนหน้าเว็บจะต้องชัดเจน User เห็นแล้วรู้ว่า UI ทำงานได้ยังไงโดยไม่ต้องเดา ไม่มี User คนไหนอยากเสียเวลามานั่งคิดว่าเว็บไซต์ของเราทำงานยังไง

Don’t Make Me (or Anyone) Think ทุกครั้งที่เราทำให้ User คิด แปลว่าเรากำลังทำให้ User เสียเวลา
ทุกครั้งที่เราทำให้ User คิด แปลว่าเรากำลังทำให้ User เสียเวลา

User ไม่ควรมีคำถามพวกนี้ตอนใช้งานเว็บ:

  • ตอนนี้อยู่ที่ไหนของหน้าเว็บ?
  • ควรคลิกตรงไหนก่อน?
  • ทำไมต้องมี ___?
  • ตกลงแล้วเว็บเกี่ยวกับอะไร?
  • ทำไมต้องตั้งชื่อแบบนี้?

ใช้ UI ที่คนส่วนใหญ่ใช้ (Convention UI)

อย่าพยายามคิด UI ใหม่ขึ้นมาเอง User จะชอบอะไรเดิม ๆ ถ้ามันเวิร์กอยู่แล้วก็จะไม่อยากเปลี่ยน User ไม่ค่อยเสียเวลามองหาหรืออยากเรียนรู้วิธีใหม่ ๆ (ถ้ามันไม่คุ้มที่ทำ) ตอนเราออกแบบหน้าเว็บ เราไม่ควรทำให้มันแตกต่างจากเว็บทั่ว ๆ ไป พยายามใช้ UI ที่คนส่วนใหญ่ใช้ เช่น ถ้าปกติเมนูอยู่ด้านบนของเว็บก็ไม่ควรย้ายเมนูไปด้านล่าง

คนไม่อ่าน แต่จะ Scan หน้าเว็บแทน

เว็บไซต์ควรออกแบบให้ User อ่านแบบผ่าน ๆ ได้ และเข้าใจภาพรวมโดยไม่จำเป็นต้องไล่อ่านทุกอย่างบนหน้าเว็บ

  • สร้าง Visual Hierarchy: สิ่งที่สำคัญต้องเด่นที่สุดในหน้าเว็บ ข้อมูลที่เกี่ยวข้องกันควรอยู่กลุ่มเดียวกัน
  • แบ่งหน้าและ section ให้ชัดเจน
  • ทำให้ชัดเจนว่าอะไรคลิกได้
ตัวอย่างการสร้าง visual hierarchies
ตัวอย่างการสร้าง Visual Hierarchy

อย่าใช้คำเยิ่นเย้อ ใส่ของไม่จำเป็นในเว็บ อย่าทำให้ User เสียเวลา

User ต้องการเข้าเว็บไซต์ของเราเพื่อเป้าหมายบางอย่าง ทุกอย่างที่แสดงในเว็บควรช่วย User ให้ไปที่เป้าหมายได้เร็วขึ้น อะไรที่ไม่เกี่ยวและไปกวนใจ User ควรตัดออกให้หมด

  • พยายามใช้ content เท่าที่จำเป็น อะไรไม่สำคัญให้ตัดออก
  • อย่าใช้ ‘happy talk’:  happy talk คือ เหตุการณ์ที่เราอ่านอะไรซักอย่าง แล้วมีคำว่า Bla bla bla.. อยู่ในหัว
  • เอา instructions ออก:  ไม่มีใครอยากอ่านอะไรยาว ๆ จนกว่าจะถึงเวลาที่อยากได้ตัวช่วยจริง ๆ

เว็บต้องย้อนกลับได้ง่าย ๆ เพราะคนไม่ได้คิดอะไรเยอะตอนเล่นเว็บ

คนเล่นเว็บแบบไม่คิดมาก ลองกด ๆ ไปเรื่อย ๆ เพราะถึงจะคลิกผิดก็ไม่ได้เป็นเรื่องร้ายแรงอะไร คนใช้เว็บเลยไม่จำเป็นต้องคิดเยอะ ไม่จำเป็นต้องแน่ใจว่าปุ่มที่คลิกตอนนี้ถูกต้องรึเปล่า คลิกเยอะไม่ใช่เรื่องผิด จำนวนคลิกในเว็บไม่สำคัญเท่ากับ User หาทางไปยัง Step ถัดไปได้รึเปล่า หน้าเว็บต้องมีปุ่ม Home, Back หรือ Undo พอ User ทำอะไรผิดก็ย้อนกลับไปได้ง่าย ๆ

เว็บต้อง navigate ง่าย

ตอนเราเล่นเว็บเหมือนกับตอนที่เราเดินหาของในห้าง เราต้องทำให้คนรู้ว่าอะไรอยู่ตรงไหน ตอนที่คนหาของที่ต้องการไม่เจอ คนจะออกจากห้าง (ปิดเว็บเราทิ้ง)

  • ควรใช้ navigation ที่คนทั่วไปใช้ ทุกหน้าต้องเป็น pattern เดียวกัน
  • ใช้ Breadcrumbs ที่สื่อความหมาย
  • โครงสร้างเว็บหลัก ๆ เป็นยังไงบ้าง
  • บอกว่า User กำลังอยู่ที่ไหนในหน้าเว็บ แล้วไปไหนต่อได้บ้าง
  • จะ Search ยังไง: User บางคนชอบใช้ Search ควรมีฟังก์ชัน Search ในเว็บ เพราะมี User บางกลุ่มที่ต้องการใช้ Search เพื่อค้นหาสิ่งที่ต้องการใช้เว็บตอนหลงทาง

Homepage ต้องเคลียร์

Homepage เป็นหน้าหลักที่ช่วยให้เห็นภาพรวมของเว็บไซต์ ต้องบอกได้ว่าเว็บเกี่ยวกับอะไร มีอะไรในเว็บบ้าง คนทำอะไรในเว็บได้บ้าง ทำไมคนถึงต้องมาใช้เว็บนี้ และจะเริ่มใช้เว็บจากตรงไหน

สร้างความรู้สึกดี ๆ ให้ User (Goodwill)

ตอนใช้งานเว็บ user จะมีค่าความพึงพอใจอยู่ ซึ่งเพิ่มลดได้จากประสบการณ์ระหว่างใช้งานเว็บ

สิ่งที่ทำให้ User รู้สึกแย่:

  • ไม่มีข้อมูลที่อยากได้ (customer support phone number, shipping rates, prices).
  • ลงโทษ User ถ้าไม่ใช้ UI ในแบบในเว็บอยากให้ใช้ เช่น ต้องกรอกเบอร์โทรใหม่ถ้าไม่ใส่ “-”
  • ขอข้อมูลที่ไม่จำเป็นต้องใช้
  • ใช้คำพูดไม่จริงใจ เช่น “Your call is important to us”
  • มีสิ่งกีดขวางระหว่างทางเยอะไป เช่น โฆษณา
  • เว็บดูก๊องแก๊ง (Amateurish-like) ไม่เป็น professional

สิ่งที่ทำให้ User รู้สึกดี (goodwill):

  • รู้ว่า User อยากรู้อะไร หรืออยากทำอะไรบนเว็บไซต์
  • ทำให้ User ไม่ต้องใช้พลังงานมากตอนใช้เว็บ
  • รู้ว่าต้องทำอะไรตอนมี error
  • ขอโทษถ้าทำสิ่งที่ User ต้อองการไม่ได้ เช่น มีหน้า 404 ตอนที่ user พิมพ์ url ผิด

อย่าเถียงกันว่า UI จะเป็นยังไง ให้ทดสอบ – ทำ Usability testing

ตอนที่เราทำเว็บไปซักพัก เราจะเริ่มคุ้นเคยกับฟังก์ชันต่าง ๆ ทำให้เรารู้ว่าทุกอย่างใช้งานยังไง ถ้าเราไม่ทดสอบเว็บกับ User จริง ๆ เราไม่มีทางรู้ได้เลยว่าคนที่ไม่เคยเห็นเว็บนี้มาก่อนจะเข้าใจอย่างที่เราเข้าใจรึเปล่า (โดยที่ไม่ต้องมีใครมาอธิบาย)

ทดสอบเว็บกับ User บ่อย ๆ และให้ผลการทดสอบเป็นตัวตัดสินว่าแนวทางของเว็บจะเป็นยังไง อย่าคิดกันเอาเองว่าเว็บควรจะเป็นแบบไหน Usability Test ทำง่ายได้ผลมาก แต่ละครั้งไม่จำเป็นต้องใช้คนทดสอบเยอะ แค่ 3-5 คนก็เพียงพอจะได้ผลลัพธ์ที่เอาไปใช้ต่อได้

อยากได้หนังสือ ซื้อที่ไหน?

ต้นฉบับ (ภาษาอังกฤษ) @Amazon: https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321

ภาษาไทย:
@Readery.co
@Maxincube

Takeaway

  • Don’t Make Me Think เป็นหนังสือที่ทำให้เราเข้าใจไอเดียเรื่อง usability ซึ่งเป็นพื้นฐานสำคัญของ UX หลักการสำคัญการออกแบบเว็บที่ดีคือ อย่าทำให้ User คิด

ไม่พลาดบทความใหม่ๆ จาก BetterUXUI.com

1. กด Like Facebook page BetterUXUI

2. สมัครและอ่านบทความทางอีเมล

1+

Share:
Back to Top