ทดสอบ UX ด้วยกระบวนการ A/B Testing

A/B testing หรือจะเรียกว่า split testing หรือ bucket testing ก็ได้ครับ แต่รวมๆ แล้วคือความพยายามที่จะทดสอบว่า UI แบบไหนที่ทำให้เว็บประสบความสำเร็จสูงสุด ตัวอย่างเช่น เรามี Title ของเว็บสองแบบ แล้วต้องการทดสอบว่าแบบไหนที่ทำให้คนกดปุ่ม "Sign up now" สูงสุด

ภาพแสดง UI แบบ A และ B ที่ต่างกันตรงข้อความ Title

UI แบบ A แสดง Title ว่า "Cloud-Base Awesome for your Business" ส่วนแบบ B เขียนว่า "Cloud-Base will solve your business problems"

หลังจากได้ UI A และ B แล้ว เราจะนำผู้ใช้จำนวนหนึ่ง สมติว่า 100 คน มาทดสอบเว็บ A ว่าใน 100 คนมีคนกด sign up Now กี่คน จากนั้นก็นำผู้ใช้อีก 100 คน ที่ไม่ใช่กลุ่มแรก มาทดสอบเว็บ B ว่าจะมีคนกด sign up Now กี่คน

ถ้าผลออกมาว่าคนกด A เป็น 10% ส่วนคนกด B เป็น 15% ก็แสดงว่าแบบ B ดีกว่า แต่เราต้องแน่ใจวางเป้าหมาย หรือจะเรียกว่า Landing page ไว้ชัดเจนนะครับ

วิธีการทดสอบแบบ A/B Testing ค่อนข้างตรงไปตรงมาและได้ผลชัดเจน แต่มีข้อเสียตรงที่จะเสียเวลามาก และยังทดสอบได้ทีละจุดทดสอบแบบภาพรวมไม่ได้ ดังนั้นจึงมักใช้วิธี AB Testing กับเว็บที่เสร็จแล้วและต้องการปรับเปลี่ยนเพียงเล็กน้อย แล้วทดสอบว่าดีหรือไม่ดี โดยใช้คนที่เข้ามาในเว็บอยู่แล้วเป็นคนทดสอบ

สิ่งที่เป็นพื้นฐานของการทำ A/B Testing หรือจะเรียกเป็นกฎเลยก็ได้ มีอยู่ 3 ข้อ

1. ต้องมีจำนวนคนทดสอบมากพอที่จะทำให้ผลลัพธ์มีความหมายในทางสถิติ
2. ต้องทดสอบแค่ 1 อย่างต่อการทดสอบเท่านั้น
3. ต้องมีความรู้ว่าจะเปลี่ยนอะไร และรู้ว่าสิ่งนั้นมีผลต่อผู้ใช้อย่างไร

ในตัวอย่างที่ยกขึ้นมา จะต้องมีผู้ใช้มากพอจึงเช่นตัวอย่างละ 100 คนต่อแบบทดสอบและเปลี่ยนแค่ Title ได้อย่างเดียวเท่านั้น เพราะต้องการวัดว่าข้อความทั้งสองแบบจะมีผลต่อผู้ใช้อย่างไร ถ้าเราเปลี่ยนสีด้วย เปลี่ยนข้อความที่อื่นด้วย จะทำให้ผลที่ออกมาคลาดเคลื่อนได้

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

มีอยู่สองที่ที่แนะนำให้ลองเข้าไปดูก่อน

1. conversion-rate-experts.com
2. abtests.com

ผมชอบที่ abtests.com ครับ เข้าใจง่ายดี และสามารถนำมาใช้ได้ในอนาคต ถ้าใครเคยทำ A/B Testing ลองมาแลกเปลี่ยนกันนะครับ

เป็นอะไรมั๊ยถ้าต้องการใช้ตัวหนังสือสีดำบนพื้นขาว

ผมมีความเชื่อว่าสีดำบนพื้นสีขาวเป็นสิ่งที่ทำลายสายตาอยู่แล้ว contrast ที่สูงขนาดนั้นไม่ได้ทำให้ตัวหนังสือชัดขึ้น ตรงข้ามมันกลับทำให้ตัวหนังสือดูเบลอได้ด้วย โดยเฉพาะตอนที่อ่านมันนานๆ ดังนั้นผมจึงคิดว่าการใช้ตัวหนังสือสีดำบนพื้นขาวจะสร้างปัญหาแน่นอน

ถึงแม้ว่า WCAG 1.0 หรือมาตรฐานในการออกแบบเนื้อหาเพื่อให้คนทุกกลุ่มเข้าถึงได้ จะบอกไว้ว่า

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

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

ผมอยากให้ลองใช้เครื่องมือตัวนี้ดูครับ

หน้าตาของเว็บ dasplankton.de/ContrastA/

เว็บนี้นอกจากแสดงตัวอย่างของ text ที่อยู่บนพื้น แบบสลับขาวดำให้แล้ว ยังช่วยให้ดูตัวหนังสือที่ขนาดต่างกันด้วย และที่สำคัญคือมันช่วยบอกว่าสีที่ใช้ผ่าน WCAG 2.0 แบบ AA หรือ AAA ด้วย

ถ้าใครยังอยากรู้ข้อห้ามอื่นในการใช้ตัวหนังสืออยากให้ลองอ่าน uxmovement.com

กรณีศึกษาโปรแกรม calculator ของ Apple

วันก่อนเราพูดถึงแนวทาง Skeuomorphism ของ Apple แล้วก็มีตัวอย่างของ Calculator ที่เทียบระหว่างของจริง กับของที่อยู่บน iPhone ทำให้เกิดความอยากรู้ว่า โปรแกรม calculator หน้าตาแบบนี้มันเริ่มมาตั้งแต่เหมื่อไหร

Apple II, Apple II Quark, Apple II GS

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

ก็คนเรามักจะมาผิดเอาตอนจบนี่ละ เลยทำเป็นปุ่มใหญ่ๆ ซะเลย :-D (ผมเดาน่ะนะ)

แต่ไหนๆ ค้นมาแล้ว เลยเอามาใส่ให้หมดเลย

Mac OS System 1.1, 3.0 และ 4.0

Mac OS System 7, 7.5, 8.0 และ 9.0

Mac OS X Developer Preview 1, 2

Mac OS X Developer Preview 3, 4

ผมประทับใจการเปลี่ยนจาก 3 ไปเป็น 4 มากๆ ครับ ตัว version 3 จะใช้ของเท่าที่มีซึ่งไม่เหมาะ และไม่สวย แต่พอมา version 4 เราจะเห็นว่าปุ่มที่เรียงติดกัน ไม่ควรจะเด่นเหมือกับปุ่ม OK, Cancel

Mac OS X 10.1

Mac OS X Jaguar และ Panther

Mac OS X Mountain Lion และ iOS

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

ที่มามีหลายที่มากๆ แต่หลักๆ เอามาจาก guidebookgallery.org

อย่าใช้สีดำ

"อย่าใช้สีดำ" ฟังดูแปลกนะครับ แต่ถือเป็นหนึ่งใน best practice ในโลกของงานออกแบบ และในโลกของ UX ด้วย เพราะสีดำสนิท #000000 เป็นสีหายากมากๆ ในธรรมชาติ เมื่อใดที่เราตัดสินใจใช้สีดำสนิท นั่นแสดงว่าเราต้องการทำให้ผู้ใช้รู้สึกไม่เป็นธรรมชาติ ต้องการให้รู้สึกแปลก ซึ่งปกติแล้วเราไม่น่าต้องการแบบนั้นกัน

เทียบ App ต่างๆ กับสีดำ #000000

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

ภาพแสดงสีเข้มของ App Facebook

ภาพทั้งสองผมเอามาจากบทความของ ianstormtaylor.com ถ้าเข้าไปตามอ่านในบทความจะมีตัวอย่างในชีวิตจริงเพิ่มเติม ซึ่งจะช่วยกระตุกเราเวลาที่คิดจะใช้สีดำครับ

สำหรับผม ที่ไม่ชอบสีดำเพราะมันทำให้ไม่สบายตา ผมชอบดำซัก 80% มากกว่า ส่วนจะเจือสีอื่นๆ ก็ขึ้นอยู่กับสีโดยรวมของโปรแกรม

ที่มา ianstormtaylor.com

ควรมี Logo สองแบบหรือเปล่า

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

ตัวอย่าง Logo สมติขึ้นมา

รูปด้านซ้ายมือเป็น Logo ตัวเต็มที่ใช้กันเป็นปกติ ส่วน Logo ทางขวาสุดเป็นแบบที่ถูกย่อขนาดลงมา เราจะเห็นว่า Logo ทั้งสองตัวหน้าตาดูไม่เหมือนกัน ทั้งๆ ที่มันเป็น Logo เดียวกัน

ส่วน Logo ที่อยู่ตรงกลางมันถูกทำให้มีจำนวนห่วงลดน้อยลงไม่เหมือน Logo เดิม แต่พอคนมองดูกลับให้ความรู้สึกว่ามันเหมือนมัน Logo ทางซ้ายมือ

นี่เป็นสาเหตุหนึ่งที่เราควรมี Logo แบบที่สอง เพื่อใช้ในงานที่ต่างกัน เช่น ขนาดต่างกัน เป็นต้น

Podcast: Do you need a second logo?

ที่มาของตัวอย่างมาจาก Video ข้างบนนี้ครับ เป็นนิตยสาร Before & After Magazine เค้าสอนหลายอย่างเกี่ยวกับการออกแบบ และแน่นอนมันสะท้อนถึงความใส่ใจใน User Experience ด้วย

เมื่อ Microsoft พูดถึงโลกใหม่ของ PC

คนที่พูดคือ Craig Mundie ซึ่งทำงานอยู่ที่ Microsoft's Chief Research and Strategy Officer เค้าได้พูดถึงการที่เทคโนโลยีในปัจจุบันเปิดโอกาศให้เราทำงานกับเทคโนโลยีได้อย่างเป็นธรรมชาติ และช่วยให้เราเชื่อมโยงกันมากขึ้น

วีดีโอ A New Age of Personal Computing

ดูไปก็สนุกๆ ดีครับ

Natural Mapping บนปุ่ม เพิ่ม-ลด เสียง

เรามักจะได้ยินกันบ่อยๆ ว่าการออกแบบที่ดีคือการออกแบบที่ผู้ใช้ไม่ต้องคิดว่าจะต้องใช้มันอย่างไร ซึ่งมันพูดง่าย แต่ทำโคตรยากด้วยข้อจำกัดต่างๆ เช่น

• ข้อจำกัดทางกายภาพของผู้ใช้เอง เช่น ผู้ใช้ถนัดซ้าย ถนัดขวา
• ข้อจำกัดทางวัฒนธรรม เช่น สีเดียวกัน แต่วัฒนธรรมต่างกันก็ตีความมันต่างกัน

ทีนี้เวลาออกแบบคนออกแบบก็เลยจะต้องพยายามออกแบบโดยพยายามให้ผู้ใช้ใช้ความรู้ที่มีอยู่แล้วและสิ่งที่เกือบจะเป็นสัจจะนิรันดร์ที่คนเกือบทั้งหมดน่าจะเข้าใจได้ตรงกันมาเป็นฐานในการออกแบบ อันนี้หนังสือ Design of Everyday things เรียกว่าเป็น ความรู้ที่มีอยู่บนโลก คงเปรียบได้ประมาณ มันอยู่ตรงนั้นแหล่ะ เห็นก็เรียนรู้ได้แล้ว

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

พวงมาลัยรถ Mazda 3 รุ่นปี 2010

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

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

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

UX ใหม่ของ Android ผ่าน Sharp

ไม่ใช่ข่าวใหม่ครับ แต่ช่วงนี้ผมกลับมาศึกษา UX ของ Android มากขึ้น เลยลองไล่ดู Android รุ่นต่างๆ จนมาถึงของ Sharp

Video อธิบาย UX ของ Sharp เป็นภาษาอังกฤษ

ตัว UX ของ sharp น่าสนใจมากครับ แก้ปัญหาหลายอย่างของ Android ได้เลยครับ แม้ว่าพอมาถึง Android 4 จะต้องคิดกันใหม่ก็ตาม แต่สิ่งที่อยากจะให้ดูไม่ใช่ตัว UX ใหม่ครับ ผมอยากให้ลองดูตัว Video ที่ใช้นำเสนอของภาษาอังกฤษ เทียบกับภาษาญี่ปุ่น

Video อธิบาย UX ของ Sharp เป็นภาษาญี่ปุ่น

ผมยังไม่สามารถอธิบายได้ว่าเพราะอะไร แต่ Video ที่เป็นภาษาญี่ปุ่น ดูมีชีวิตมากกว่า ดูใช้ความคิดในการนำเสนอ ช่วยให้เราบริโภคได้ง่ายขึ้น ไม่ใช่แค่การเรียกร้องความสนใจ แต่เป็นการอธิบายที่ทำให้ผมอยากใช้ sharp ขึ้นมาทันที แม้ว่าจะฟังภาษาญี่ปุ่นไม่ออกก็ตาม

ถ้าใครพอนึกออกว่าประเด็นความต่างอยู่ตรงไหน ลองแลกเปลี่ยนกันดูนะครับ

เมื่อแนวทางออกแบบของ Apple ถูกท้าทาย

Apple ยึดแนวทางออกแบบ Application ให้เหมือนของจริงมาตั้งแต่ไหนแต่ไร แต่จะมาชัดมากๆ ก็ตอนที่ทำ iPhone iPad โดย Apple บอกในเอกสาร Human Interface Guideline ว่า

When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app. The classic example of a software metaphor is the folder: People put things in folders in the real world, so they immediately understand the idea of putting files into folders on a computer.

ดังนั้น App ต่างๆ ที่ Apple พัฒนาออกมาจึงมักจะทำให้เหมือนกับเอาของสิ่งนั้นนั้นมาใส่ไว้ใน iPhone, iPad เพื่อให้ผู้ใช้สามารถเดาได้ว่า App นั้นๆ ทำมาเพื่ออะไร และอาจจะได้ยาวไปถึงว่ามันทำงานอย่างไรด้วยเลย

โปรแกรม Calculator เลียนแบบทั้งสีและตำแหน่ง

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

ตัวอย่างเว็บที่ทำเหมือนของจริง

และมีอีกกลุ่มที่คิดว่าแนวทาง Skeuomorphism อาจจะถูก แต่แนวทางของ Apple มันสุดโต่งเกินไป หรือไม่ก็คิดว่าแนวทาง Skeuomorphism นั้นผิด กลุ่มนี้จะถูกเรียกว่า Anti-skeuomorphism ซึ่งมีมากขึ้นเรื่อยๆ โดยเฉพาะเมื่อ Microsoft กล้าฉีกตัวเองออกไปจากแนวทางนี้

ปุ่มใน Windows 7 และ Window 8

หลังจาก Windows 8 ออกมา Microsoft ก็ถือว่าเป็นผู้นำคนสำคัญของกลุ่ม Anti-skeuomorphism แม้ว่าตอนแรกจะบอกว่าตนเองเลียนแบบป้าย Metro มาก็ตาม แต่สุดท้ายก็ถือว่าเป็นการฉีกแนวทาง Skeuomorphism แบบ Apple ไปได้

ผมถือว่า Apple เป็นพวก Skeuomorphism แบบสุดโต่ง คือเป็นพวกที่เอาของจริงมาใช้อย่างเต็มที่และมีวิวัฒนาการมาอย่างยาวนาน ดังนั้นจึงไม่ได้ทำแค่ลอกเฉยๆ แต่มีรูปแบบการคิดแล้วว่าควรลอกอย่างไร ทำให้มีสาวกเอาตามมากมาย

สำหรับ Microsoft คิดว่ายังต้องไปอีกไกลมาก กว่าจะพิสูจน์ตัวเองได้ เพราะเมื่อพยายามฉีกตัวออกไปจากแนวทางการเลียนแบบของจริงก็ต้องมีอะไรมาทดแทนสิ่งที่เสียไป ซึ่งยังไม่เห็นสิ่งนั้นอย่างเป็นตัวเป็นตน และที่สำคัญยังต้องระวังคู่แข่งแนววิวัฒนาการอย่าง Android คือทดลองมันหมดทุกอย่างอะไรไม่ดีก็ตายไปเอง

หน้าจอโปรแกรม Note ของทั้ง 3 platform

ทั้งสามแนวยังต้องไปกันอีกไกล ดังนั้นสำหรับคนที่ทำด้าน UX สิ่งสำคัญที่เราต้องไม่ลืมคือเราทำงานอยู่บน Platform อะไร ถ้าไม่ต้องการให้ ผู้ใช้ตกใจก็ควรศึกษาแนวทางของ Platform ให้ดีครับ

ถ้าสนใจเรื่องนี้อ่านเพิ่มเติมได้ที่

• medialoot.com
• fastcodesign.com
• webdesign.tutsplus.com
• usabilitycounts.com

คนทำ Sushi ก็เหมือนคนทำ UX

เรื่องราวของคนทำซูชิ ที่บ้าพอที่จะทำซูชิที่ดีที่สุดในโลก อยากให้ลองอ่านลองดูครับ Jiro Dreams of Sushi

Trailler: 

มีประโยคหนึ่งที่โดนใจมากๆ

We're not trying to be exclusive or elite. The techniques we use are no big secret. It's just about making an effort and repeating the same thing every day.

ผมลองแปลได้ประมาณนี้

เราไม่ได้พยายามจะทำให้พิเศษหรือทำให้ยอดเยี่ยม เทคนิคที่เราใช้ก็ไม่มีเคล็ดลับที่ยิ่งใหญ่อะไร มันก็แค่เราทำอย่างตั้งใจและทำแบบเดิมซ้ำทุกวัน

อยากให้คนที่กำลังตั้งใจทำอะไรซักอย่างอยู่ ได้ลองดึงพลังจากผู้ชายคนนี้ครับ

ที่มา: konigi.com

ความแตกต่างของหน้า Edit ระหว่าง iOS และ Android

หน้าจอ Edit มักเป็นหน้าที่ถูกลืมตอนที่ออกแบบ User Interface เพราะมักเป็นหน้าจอที่ไม่สร้างคุณค่าให้กับโปรแกรม เราจึงใช้เวลาส่วนมากในการออกแบบส่วนที่สร้างคุณค่าและทิ้งหน้าจอ Edit ให้โปรแกรมเมอร์คิดเอาเอง โดยคาดหวังว่าโปรแกรมเมอร์ทำตามโปรแกรมอื่นๆ หรือทำตามที่ Guideline บอกไว้

สำหรับบน iPhone คนออกแบบ User Interface อาจจะพอคิดแบบนั้นได้ เพราะมันมีรูปแบบที่เป็นที่นิยมของหน้า Edit อยู่

Apple Guideline

ในรูปด้านบนเป็นโครงสร้างหน้าจอ Edit ที่นิยมบน iPhone เราจะเห็น Title ที่อยู่ตรงกลางเพื่อบอกว่าหน้านี้คืออะไร และมีปุ่ม Cancel Done อยู่ด้านซ้ายและขวา ส่วนปุ่ม Delete จะอยู่ล่างสุด หากหน้าจอ Edit ยาวกว่าหนึ่งหน้าจอ ปุ่ม Edit จะถูกดันจนมองไม่เห็นในหน้าแรก

สำหรับ App บน iPhone เรายังพอจะบอกให้ Programmer ทำตามที่เค้านิยมกันได้ครับ แต่สำหรับบน Android เราต้องบอกให้ชัดเจนมากขึ้น เพราะยังไม่มีรูปแบบที่มาตรฐานหรือเป็นที่นิยมจริงๆ

Android Ice Scream Sandwich (Edit contact)

บน Android Ice Scream Sandwich รูปแบบข้างต้นน่าจะเป็นรูปแบบที่เป็นมาตรฐานต่อไปในอนาคต โดยปุ่ม Done อยู่ทางมุมบนขวา ส่วน Delete และ Discard จะขึ้นมาเมื่อกดปุ่ม Menu (ปุ่มที่เรียงเป็นแนวตั้งสามปุ่ม) หรือถ้าผู้ใช้กด System Back ก็จะได้ผลเหมือน Done

รูปแบบนี้จะอันตรายต่อผู้ใช้มือใหม่ เพราะปุ่ม Discard ไม่ได้แสดงให้เห็นบนหน้าจอตั้งแต่ครั้งแรก อาจจะทำให้ผู้ใช้หลายคนคิดว่าปุ่ม System Back จะมีค่าเท่ากับ Discard ได้ครับ แต่ก็มีข้อดีที่ความเรียบร้อย เพราะมีปุ่ม Done บนหน้าจอเพียงปุ่มเดียว

Android Gingerbread (Edit contact)

อีกรูปแบบนึงจะมีปุ่ม Cancel และ Save ติดอยู่ด้านล่าง อันนี้เป็นหน้าจอ Edit สมัย Android Gingerbread ซึ่งผู้ใช้ที่ยังเป็นรุ่นนี้อยู่จะเคยชินกับปุ่มแบบนี้ ถ้าให้ดีเราควรตรวจสอบว่าผู้ใช้ นั้นใช้ระบบอะไรอยู่และแสดงหน้าจอ Edit ในแบบที่เค้าคุ้นเคยครับ อาจจะเป็นงานหนักแต่ถ้าใครใส่ใจต่อ User Experience ของคนที่ใช้ระบบเก่า ก็ควรทำครับ

Android Tasks (Edit task)

แบบสุดท้ายเป็นตัวอย่างของโปรแกรม Tasks บน Android โปรแกรมนี้สร้างรูปแบบของหน้า Edit ขึ้นมาเอง แม้ว่าจะทำตาม Guideline ของ Android แต่ก็ไม่เหมือนหน้า Edit ของโปรแกรมที่ Google ทำขึ้นมา

ในหน้าจอนี้ผู้ใช้สามารถบอกให้โปรแกรม Save ได้สามที่ จุดที่แรกคือกดเครื่องหมาย < มุมบนซ้าย ข้างๆ โลโก้  จุดที่สองคือเครื่องหมายถูกที่มุมบนขวา จุดที่สามคือกดที่ปุ่ม system back

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

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

สำหรับใครก็ตามที่กำลังออกแบบ User Interface อย่าลืมวาดหน้า Edit ให้ Programmer ด้วยนะครับ

อ่านเพิ่มเติมได้ที่ androiduipatterns.com

UX ของระบบค้นหาหนังสือในร้าน Kinokuniya

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

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

มีหลายอย่างที่สังเกตแล้วน่าสนใจ ก็เลยลองวาดหน้าจอมาร้อยกัน ได้แบบนี้

รูปแสดงหน้าจอการค้นหาหนังสือ

หน้า A - เมนู

เมนูหน้าแรก

หนัาแรกน่าสนใจมากที่ Kinokuniya เปิดทางให้ผู้ใช้เลือกภาษาของหนังสือตั้งแต่หน้าแรกสิ่งที่สะดุดในใจคือ ทำไมต้องแยกภาษาของหนังสือออกจากกัน? ถ้าสาเหตุของการแยกภาษาของหนังสือออกจากกันเหตุผลที่พอจะนึกออกคือการแยกไว้สำหรับลูกค้าที่สนในหนังสือในแต่ละภาษา โดยอนุมานว่าคนญี่ปุ่นคงสนใจหนังสือภาษาญี่ปุ่น คนที่รู้ภาษาอังกฤษคงสนใจหนังสือภาษาอังกฤษ

แต่สิ่งที่น่าสงสัยคือถ้าอนุมานว่าคนญี่ปุ่นจะสนใจหนังสือภาษาญี่ปุ่นแล้ว ทำไมหมวดหนังสือภาษาญี่ปุ่น จึงใช้ปุ่มเป็นภาษาอังกฤษว่า "Japanese Books"?

หน้า B - ค้นหาหนังสือ

เมนูหน้าค้นหาหนังสือ

 หลังจากกดปุ่มเลือกภาษาของหนังสือที่เราจะค้นหามาระบบก็จะส่งผู้ใช้มายังหน้าค้นหาหนังสือ หน้านี้จะโผล่มาตอนกดเลือกหนังสือภาษาอังกฤษ ไม่แน่ใจว่าภาษาอื่นๆ จะเป็นแบบไหน แต่เข้าใจว่าคงคล้ายๆ กัน

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

กรณีนี้ผมคิดว่าอาจจะเป็นการเรียนรู้ต่อเนื่องมาจากหน้าแรกที่ Kinokuniya พยายามจะส่งต่อความเข้าใจในการปฏิสัมพันธ์กับ ปุ่มสีเหลือง เพื่อให้เกิด action อะไรบางอย่างก็เป็นได้

การใช้สีกับปุ่มก็เป็นสิ่งที่น่าสนใจเช่นกัน กรณีนี้ก็เห็นได้ชัดว่าสีของปุ่มเพื่อกรอกข้อมูลกับค้นหานั้นแตกต่างกันชัดเจน

หน้า C - หน้าแป้นพิมพ์

แป้นพิมพ์แบบ A - Z แสดงเป็นแป้มพิมพ์ปริยาย

แป้นพิมพ์แบบ QWERTY

หน้านี้เป็นหน้าที่ตอนแรกเกลียดมาก แต่พอพิจารณาแล้วก็พบว่า Kinokuniya คิดไว้ค่อนข้างเยอะมาก

ตอนเข้ามาหน้าแป้นพิมพ์ Kinokuniya เลือกให้แป้นพิมพ์แบบปริยายเป็นแบบ A - Z ซึ่งสำหรับคนที่เคยชินกับคอมพิวเตอร์มาแล้วจะเป็นเรื่องที่น่าหงุดหงิดมาก แต่ว่าก็ยังมีทางเลือกให้เลือก PC Keyboard Mode ที่แป้นพิมพ์จะเรียงเป็น QWERTY

สาเหตุที่เรียงแป้นพิมพ์แบบ A - Z ไว้เป็นแป้มพิมพ์ปริยายคงเป็นเพราะผู้ใช้โดยมากไม่ใช่ผู้ใช้ที่คุ้นชินกับการเรียงแป้นแบบ QWERTY อนุมานว่าคนอ่านหนังสือจะไม่ใช่คนที่ถนัดใช้คอมพิวเตอร์มากนัก การเรียงแป้นพิมพ์แบบ A - Z น่าจะเหมาะสมกว่ากับผู้ใช้หมู่มาก

หน้า D - ผลการค้นหา

หน้าแสดงผลการค้นหา

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

หน้า E - รายละเอียดหนังสือ

หน้าแสดงรายละเอียดหนังสือ

หน้านี้จะเป็นรายละเอียดเชิงเทคนิคของหนังสือซะเยอะ เช่น ISBN, ผู้แต่ง, สารบัญ ของหนังสือ สิ่งที่น่าสนใจคือมีปุ่ม Print Map สำหรับพิมพ์แผนที่ที่ตั้งชั้นหนังสือในร้านสาขานั้น แต่ยังคงมีปัญหาคือหน้านี้ส่งเสริมให้ผู้ใช้พิมพ์แผนที่ ซึ่งจริงๆ แล้วอาจจะบอกเป็นตำแหน่งของชั้นหนังสือบนหน้าจอไว้ก็ได้ ซึ่งการไม่แสดงแผนที่บนหน้าจอ ก็จะเป็นการจูงใจให้ผู้ใช้กดปุ่ม Print Map และในกรณีที่ไม่มีหนังสืออยู่ในสาขานั้น การ Print Map ออกมาเราก็จะได้กระดาษมาแผ่นหนึ่งบอกว่าไม่มีหนังสือเล่มนี้อยู่ในร้าน ซึ่งดูแล้วไม่ค่อยสมเหตุสมผลสักเท่าไร

ภาพรวมของระบบค้นหาหนังสือของ Kinokuniya ดูแล้วก็สมเหตุสมผลดี นอกจากนั้นในการกดปุ่มแต่ละปุ่มระบบยังมีเสียงตุ๊งๆ เพื่อบอกว่ามี action เกิดขึ้น ซึ่งก็น่ารำคาญและดูเป็นประโยชน์กับคนแก่ในเวลาเดียวกัน

ควรใช้คำว่า My Account หรือ Your Account

การเลือกใช้คำว่า My หรือ Your เท่าที่ผมลองค้นหาดู คำตอบไม่ค่อยไปในทางเดียวกันเท่าไหร่ บางที่ก็บอกใช้ให้ใช้ My บางที่ก็บอกให้ใช้ Your บางที่ก็ขึ้นอยู่กับบริบท เช่น เมื่อมีบุคคลที่สามและต้องการแยกของตัวเองออกจากคนอื่นถึงจะใช้ Your

ตัวอย่าง UI ที่บางครั้งใช้ My บางครั้งใช้ Your

ถ้าดูตาม User Experience Guideline : style and tone ของ Microsoft จะบอกเรื่องบุคคลไว้ว่า ให้ใช้สรรพนามบุรุษที่สอง (you, your) เมื่อต้องการบอกผู้ใช้ว่าจะต้องทำอะไร หรือกรณีที่ละบุคคลที่สองไว้ เช่น

• Choose the pictures you want to print.
• Choose an account. (implied)

ใช้สรรพนามบุรุษที่หนึ่ง (I, me, my) เมื่อต้องการให้ผู้ใช้บอกว่าโปรแกรมต้องทำอะไร เช่น

• Print the photos on my camera.

ปัญหาของ MS Guideline คือบางกรณีจะมีทั้ง My และ Your อยู่ในหน้าเดียวกัน เช่น ในหน้าดูรายการรูป มี Label ว่า "Your photo" และมีปุ่มด้านล่างเขียนว่า "Publish my photo" ทำให้งงๆ ว่าตกลงมันเป็นของฉันหรือของคุณกันแน่ (ใครยังใช้ XP หรือ 95 อยู่ ลองสังเกตดูหน่อยครับ ว่าเค้าทำตาม Guideline นี้หรือเปล่า)

ทางที่ดีเราพยายามอย่าใช้คำว่า My หรือ Your ไปซะเลยครับ ในหน้า page นั้นๆ เราถือโดยปริยายว่า เราจะพูดกับผู้เปิดเว็บอยู่แล้ว ดังนั้นถ้าเราเขียนคำว่า Account ก็จะหมายถึง Account ของผู้อ่าน หรือถ้าเราเขียนว่า Photo ก็จะมีความหมายถึง Photo ของผู้อ่านอยู่แล้ว จะยกเว้นในกรณีที่เราต้องการแยกเนื้อหาของผู้อ่านออกจากเนื้อหาของผู้อื่น ในกรณีนั้นก็ต้องพยายามเลือกใช้คำว่า My และ Your ให้เหมือนกันทั้งหน้า หรือเลี่ยงไปใช้ชื่อไปเลยครับ เช่น Bob's photo  เป็นต้น

ถ้าให้สวย หัวข้อต่างๆ ในเว็บของเราควรเป็นหัวข้อที่สั้น กระชับ ขึ้นต้นด้วยคำที่สื่อความหมายตรงไปตรงมา เช่น Document หรือ Photos น่าจะทำให้ผู้ใช้กวาดตามองได้อย่างรวดเร็วกว่า ดังนั้นคนทำ UX ต้องคอยชั่งน้ำหนักระหว่างความยาวของคำที่เพิ่มขึ้นเทียบกันความหมายที่เพิ่มขึ้นมา บางทีคำอย่าง My หรือ Your หรือ View หรือ Manage แทนที่จะช่วยให้เข้าใจชัดขึ้น กลับสร้างประสบการณ์ที่ยากลำบากให้ผู้ใช้แทนนะครับ

ดังนั้นสำหรับการเลือก My Account หรือ Your Account ผมเสนอใช้ใช้แค่ Account และถ้ามันไปอยู่ข้่างๆ กับ Account คนอื่นผมเสนอให้ใช้ชื่อไปเลย เช่น Bob's Account เป็นต้น ครับ

เพิ่มเติม: msdn และ yahoo

จับเข่าคุยกันครั้งแรกของ ux.in.th

เนื่องในโอกาศที่ facebook.com/groups/uxinth มีจำนวนสมาชิกเกิน 100 คน เราเลยคิดกันเองว่าน่าจะมาจับกลุ่มคุยกันซักที เผื่อจะได้มุมมองใหม่ๆ และเวลาคุยกันผ่านเว็บจะได้นึกหน้ากันออก

บรรยากาศใน The sync

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

หน้าเว็บเพื่อจองที่เข้าร่วมงาน

ผมคาดว่าน่าจะมีที่พอสำหรับ 20 คน ถ้ามากเกินกว่านี้ผมจะเดาสถานการณ์ไม่ออกต้องขออภัยด้วยครับ สำหรับคนที่สนใจมาคุยกันสามารถลงชื่อได้ที่ uxinth.eventbrite.com นะครับ ค่าขนมและเครื่องเขียนคิดรวมเป็น 200 บาท บวกกับค่า Fee จาก Evenbrite 34 บาท รวมเป็นเงิน 234 บาท จะจ่ายผ่านเว็บ หรือเอามาจ่ายที่งานก็ได้ครับ คิดเท่ากันที่ 234 บาทจะได้เท่าเทียม :-D

งานจัดวัน พุธ ที่ 5 กันยายน เวลา 6 โมงเย็นถึง 4 ทุ่ม สถานที่คือ The sync ใกล้รถไฟฟ้าใต้ดินลาดพร้าวนะครับ

บอกได้เต็มปากว่าคนตาบอดสามารถใช้ Apple TV ได้ครับ

ผมรู้มาว่า Apple ใส่ใจในเรื่อง Accessibility มากๆ ซึ่งผมตีความว่าเค้าคำนึงถึง UX สำหรับคนทุกคน ไม่ว่าจะเป็นเด็ก คนแก่ คนปัญญาอ่อน คนหูหนวก หรือแม้แต่คนตาบอด โดยเราจะเห็นได้จาก Session ใน งาน WWDC ทุกปีจะมีเรื่อง Accessibility อยู่หลาย Session  โดยเฉพาะในช่วงที่ OS X ออกมาใหม่ๆ 

ผมได้ทดลองใช้ Accessibility บน iPhone และ Desktop มาแล้ว ตอนนี้ได้ Apple TV มา เลยลองเอามาทดสอบเรื่องนี้บ้าง ได้ผลเป็นตาม Video นี้ครับ

Video ทดสอบการใช้งาน Apple TV แบบปิดตา

การทดสอบนี้ออกจะขี้โกงนิดหน่อยเพราะผมจำตำแหน่งต่างๆ บนหน้าจอได้บ้าง แต่ก็นับว่าเสียงช่วยนำทางให้ผมไปได้ทุกที่ ผมคิดว่าต่อไปถ้าผมตาไม่ค่อยดี ผมอาจจะเปิด Voice Over ทิ้งเอาไว้เลย จะได้ให้มันอ่านให้ฟังแทนที่จะต้องหาแว่นมาใส่

โดยเฉพาะตอนที่มันอ่าน Review ให้ฟังจะช่วยได้มากทีเดียว เพราะการอ่านหนังสือบนจอทีวีมันลำบากกว่าการอ่านบนจอคอมพิวเตอร์มาก อาจเป็นเพราะทีวีอยู่ไกล ทำให้เราเพ่งลำบาก

นอกจากส่วนของ Voice Over แล้ว ตัว Remote Control ก็ออกแบบมาให้สามารถใช้ได้ โดยไม่ต้องมองเช่นกัน

รูปแบบของ Remote

ตัวปุ่มวงกลมจะมีลักษณะนูนออกมาทำให้รู้ว่าจะต้องกดตรงไหน เนื่องจากผมไม่สามารถวาดออกมาเป็นสามมิติได้ ถ้าใครได้ไป Apple Store ลองขอเค้ามาจับเล่นดูนะครับ จะทำให้รู้ว่าเราสามารถเดาตำแหน่ง ขึ้น ลง ซ้าย ขวา ได้ง่ายมาก

อีกจุดหนึ่งคือตำแหน่งของปุ่ม Menu และ ปุ่ม Play จะมีความนูนไม่เหมือนกัน ปุ่ม Menu จะยุบลงไปส่วน Play จะเรียบๆ ไม่รู้ว่าผมคิดไปคนเดียวหรือเปล่า แต่การจำ Menu ว่ามันอยู่ด้านซ้าย กับจำว่า Menu คือปุ่มที่ยุบลงไป แบบยุบลงไปจะจำง่ายกว่า

แต่จุดหนึ่งที่ผมคิดว่า คนตาบอดจะใช้ลำบากคือตัว visual keyboard ครับ เรากดทางขวาไปเรื่อยๆ เพื่อเปลี่ยนตัวอักษรไม่ได้ ซึ่งทำให้การเดาตำแหน่งของตัวอักษรทำได้ยาก เพราะจำไม่ได้ว่ามันสิ้นสุดบรรทัดที่ตัวไหน

ผมหวังว่ามันจะพัฒนาในส่วนนี้ขึ้นไปอีก โดยเฉพาะในเรื่องของ Text to Speech ตอนนี้ภาษาไทยใช้งานได้ดีแล้ว แต่มีปัญหาตรงที่ถ้าเราเลือกภาษาไทยแล้ว พอไปเจอภาษาอังกฤษจะมันจะอ่านเพียนๆ ไป แต่โดยรวมแล้วใช้งานได้เลยครับ อยากให้ทุกคนได้ลอง

หาอ่านเพิ่มเติมได้ที่ : AccessWorld

เรียน UX จากถังขยะ

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

ใช้ตัวหนังสือใหญ่ๆ เพื่อสื่อ

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

ใช้ตัวหนังสือเล็กๆ เพื่อสื่อ

เมื่อเปรียบเทียบกับถังขยะชุดที่สองที่ใช้ตัวหนังสือเล็กๆ แถมมีตัวหนังสือสีขาวอยู่บนพื้นสีเหลืองสว่างอีกต่างหาก สิ่งที่มองเห็นได้ชัดกลับเป็นคำว่า XN และ Logo ซึ่งทำให้ผมพยายามมองอยู่พักนึงว่ามันคืออะไร นอกจากนั้นผมคิดว่าถังขยะนี้ตั้งในเมืองไทยน่าจะทำให้ตัวหนังสือภาษาไทยใหญ่กว่านี้ ยกเว้นว่ามันจะตั้งอยู่ในสถานที่ที่ฝรั่งเยอะเลยทำให้ภาษาอังกฤษใหญกว่า แต่โดยรวมแล้วมันทำให้ถังขยะชุดแรกดูดีขึ้นมากเลยครับ

มีตัวหนังสือขนาดใหญ่อยู่บนถังขยะ

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

ใช้ สีและทรงของช่องใส่ขยะ พร้อมรูปภาพประกอบ

ถังชุดที่ 4 ถือว่าคิดมากกว่าสามแบบแรก คือใช้รูปภาพเพื่อให้มองได้ง่าย ใครเคยรู้แล้วก็จะแยกได้เร็วขึ้นไปอีก ใครอ่านหนังสือไม่ออกก็พอจะเดาได้ นอกจากนั้น ช่องใส่ขยะถังกลางยังใช้รูปทรงทรงกลมแทนความหมายว่าเอาไว้ใส่กระป๋อง ช่วยให้คนอยากใส่มากขึ้น แม้ว่าจะใส่ได้ยากแต่คนมีแนวโน้มจะใส่ของเข้าไปในรูอยู่แล้ว ส่วนสีแดงด้านซ้ายก็ช่วยบอกว่าเป็นช่องอันตราย คือขยะที่ไม่ใช่กระป๋องและขวด จะมารวมช่องนี้หมด ผมว่าแบบนี้น่าใส่กว่าสามแบบแรกนะ

ใช้รูปทรงเพื่อสื่อ

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

งานออกแบบที่คำนึงถึง UX บางทีเราจะยอมลดเรื่องการสื่อสาร (Information Architech) หรือเรื่องความง่าย (Usability) เพื่อแลกกับ UX ที่เจ้าของงานคาดหวังไว้ ถ้าเจ้าของงานเป็นร้านศิลปะ อาจจะชอบถังขยะแบบที่ห้า แต่ถ้าเจ้าของงานเป็นสวนสาธารณะ อาจจะต้องให้ความสำคัญกับ Usability มากกว่านี้ เพื่อให้ได้ UX ที่เหมาะสม 

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