ความทรงจำและความลืมเลือน ตอนที่ 2

มาถึงตอนที่เราจะได้ใช้สิ่งที่เราได้เรียนรู้ไปในตอนที่แล้ว ตื่นเต้นๆ จัง

จำที่ผมให้ท่องได้ใช่ไหมครับ

UI ต้องสนับสนุนหน่วยความจำระยะสั้น (recognition) มากกว่า หน่วยความจำระยะยาว (recall)

ตัวอย่างแรกที่ผมอยากนำเสนอก็คือ UI search box ของ Google ครับ

ตัวอย่างนี้เป็นการค้นหาเบอร์โทรของร้าน True Love Cafe (Cafe ที่ให้เราได้เล่นกับน้องหมาไซบีเรียน) เมื่อผมเริ่มกรอกคำค้นหาด้วยคีย์เวิร์ด ‘true love cafe เบอร์’ ก็คลิกหาเบอร์จากลิงค์อันแรก แล้วโทรไปจองโต๊ะกับทางร้าน  หลังจากไปมาแล้ว ก็เลยอยากจะแนะนำคนอื่นต่อ จะดูเบอร์บนมือถือก็จำไม่ได้ว่าโทรไปช่วงไหน (อย่างที่ผมบอกไป ความจำระยะสั้นเรามีพื้นที่จำกัดครับ) ก็เลยทำการค้นหาใน Google ใหม่ แต่ก็จำไม่ได้ว่าวันนั้นใช้คีย์เวิร์ดอะไรค้นหาถึงเจอเบอร์อย่างรวดเร็ว จำได้แต่ว่าพิมพ์ชื่อร้านไป ผมเลยเริ่มพิมพ์ true แค่นั้นแหละครับ

ทุกอย่างก็ไขกระจ่าง เพราะ Google เค้าเก็บประวัติคำค้นหาของเราไว้ พอผมเห็นคำว่า ‘true love cafe เบอร์’ ก็นึกขึ้นมาได้ทันทีว่า เราเคยใช้คำนี้ค้นหานี่นา (ข้อสอบมีตัวเลือกไง จำได้ไหมครับ ง่ายกว่าข้อสอบเติมคำ) ถึงแม้ว่าจะไม่มีตัวเลือกประวัตินี้ ผมก็อาจค้นหาเบอร์เจอ แต่เวลาที่ใช้ในการค้นหาต่างกันเลยนะครับ พอจับจุดได้แล้วใช่ไหมครับว่าจะเอาความรู้นี้ไปใช้ทำอะไรได้อีก

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

ส่วนเว็บ ebay.com ก็จะมีฟังก์ชันให้เราเพิ่มสินค้าเข้าไปในรายการ สินค้าที่จับตามอง/อยากได้ (watch list หรือ wish list สำหรับเว็บทั่วไป) เพื่อทำหน้าที่เหมือนหน้ากระดาษให้เราจดโน้ตสินค้าที่เราต้องตาต้องใจ แต่ต้องเข้าสู่ระบบก่อนเพื่อใช้งาน

ส่วนเว็บ Ikea.com ก็ปรับให้ wish list มีปุ่มพิมพ์รายการสินค้าออกมา หรือจะอีเมลหาตัวเองก็ได้ หรือจะบันทึกไว้ที่เว็บแต่ต้องเข้าสู่ระบบก่อน

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

ตัวอย่างข้างต้นทั้งหมดเป็นการนำเสนอฟังกชันและ interface ที่มาช่วยในการจดจำให้กับผู้ใช้งาน แต่มีอีกสิ่งหนึ่งที่จะช่วยในเรื่องการจดจำของยูสเซอร์ แม้ดูเหมือนว่าเป็นเรื่องง่าย แต่เป็นสิ่งที่ทำได้ค่อนข้างยาก  ผมกำลังกล่าวถึงเรื่องความสอดคล้องกันในการออกแบบ (consistency)

คิดว่าหลายคนคงคุ้นๆ กับคำนี้พอสมควร ในกระบวนออกแบบ UI ก็คือ การพยายามใช้ theme, สี, สไตล์, หรือตำแหน่งการวาง เพื่อออกแบบ element ต่างๆ ภายในเว็บให้เหมือนๆ กัน

ผมยกตัวอย่างเช่น เว็บ booking.com จะใช้ปุ่มสีฟ้าเหมือนกันหมดตลอดทั่วทั้งเว็บสำหรับปุ่มที่เป็น action หลักๆ ของตัวเว็บ รวมถึงสีของลิงค์ การทำเช่นนี้เพื่อให้ยูสเซอร์ไม่จำเป็นต้องเรียนรู้สิ่งใหม่ๆ ตลอดเวลา ยูสเซอร์เพียงเข้ามาใช้งานเว็บเพียงช่วงระยะเวลาหนึ่งก็จะคุ้นเคยกับธีมของเว็บ รู้ว่าถ้าสีของตัวอักษรเป็นสีฟ้า นั่นคือข้อความที่คลิกได้

Consistency ยังรวมไปถึงตำแหน่งการวางปุ่มหรือฟังก์ชันให้เหมือนๆ กันทุกหน้าด้วย เช่น

เว็บ sanook.com เมนูเข้าสู่ระบบหรือสมัครสมาชิกจะอยู่ตำแหน่งมุมขวาบนตลอดทั่วทั้งเว็บ และเพราะฟังก์ชันนี้ ในหลายๆ เว็บไซต์มักจะวางไว้ที่ตำแหน่งนี้ด้วย ทำให้ยูสเซอร์ไม่จำเป็นต้องไปจำว่าเมนูประเภทนี้อยู่ที่ไหน เท่ากับว่า sanook.com ทำให้ยูสเซอร์จำน้อยลง ด้วยการมี

1. ตำแหน่งการวางที่เหมือนกันทั้งเว็บ (มี consistency)
2. ตำแหน่งที่ใช้กันทั่วไป (มี convention)

มีอีกเรื่องที่ผมอยากจะเตือนในการออกแบบฟอร์ม มาดู pattern เทียบกันสองแบบตามรูปด้านล่างนี้กันครับ

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

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

และถ้ายิ่งช่องกรอกข้อความนั้นมีเงื่อนไขในการกรอก เราควรวางเงื่อนไขนั้นนอกช่องกรอกข้อความนะครับ

ถ้าวางไว้ในช่องกรอกขอ้ความ พอเราเริ่มกรอก เงื่อนไขนี้ก็จะหายไปใช่ไหมครับ เกือบทั้งหมดผมว่าน่าจะลืมเงื่อนไขที่ได้บอกไว้แน่ๆ

สิ่งที่เราควรทำจึงควรเป็นตามแบบด้านล่างครับ

ด้วย interface นี้จะคอยเตือนยูสเซอร์ได้ตลอดเวลาว่ารหัสผ่านต้องเป็นอย่างไร เงื่อนไขหรือข้อมูลอะไรที่สำคัญควรแสดงให้เห็นตลอดเวลาครับ อย่าไปซ่อนหรือบังคับให้ยูสเซอร์จำนะครับ ไม่ดีๆ

สรุปเรื่องสรุปราว

การจะช่วยลดภาระในการจดจำให้กับยูสเซอร์ เราควร

• จัดหาฟังก์ชันที่คล้ายกระดาษโน้ตให้กับยูสเซอร์ เช่น ‘save to favorie’, ‘add to wish list’, ‘สินค้าที่พึ่งดูไปล่าสุด’
• ทำ interface ให้สอดคล้องกันหมดทั้งเว็บ
• ใช้ interface, ตำแหน่งการวางที่เว็บส่วนใหญ่ใช้กัน
• แสดงข้อความหรือเงื่อนไขสำคัญๆ ตลอดเวลา ในการที่จะให้ยูสเซอร์ทำอะไรสักอย่าง

เท่านี้เราก็ช่วยยูสเซอร์ประหยัดหน่วยความจำไปได้แยะแล้ว อย่าไปเบียดเบียนหน่วยความจำตรงนี้ของยูสเซอร์เลย รู้กันแล้วนะ ^^

ข้อมูล: http://www.nngroup.com/articles/form-design-placeholders/