หนังสือ 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 คนไหนอยากเสียเวลามานั่งคิดว่าเว็บไซต์ของเราทำงานยังไง

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

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

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

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

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

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

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

อย่าใช้คำเยิ่นเย้อ ใส่ของไม่จำเป็นในเว็บ อย่าทำให้ 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 คิด

• References
• “Don’t make me think”, Steve Krug

---