ตัวอย่างผลสำเร็จในการทำ UX ของ IBM

ในหนังสือ A project guide to UX design แนะนำให้อ่าน pdf จากเว็บไซต์ hesketh.com เป็นบทความที่เกี่ยวกับการใช้ UX ในบริษัท ผมลองไปตามหาดูปรากฏว่ามันหายไปจากใน URL ที่หนังสือให้มาแล้ว แต่ยังมีเก็บไว้ที่ www.hesketh.com/sites/default/files/user_experience.pdf (เพื่อความแน่ใจผมเลยเก็บไว้บน dropbox อีกหนึ่งชุด)

ใน pdf เค้าเริ่มต้นด้วยการยกข้อความจากนิตยสาร The New York Times มาให้อ่านกัน โดยในบทความเล่าถึง IBM เว็บไซต์ในช่วงปี 1998 ซึ่งพยายามทำ e-business บนเว็บไซต์ของตัวเอง

แล้ว IBM ก็พบว่า feature ที่คนใช้มากที่สุดคือ search โดย Carol Moore ซึ่งเป็น vice president ในส่วนของ internet operations ให้เหตุผลที่มันได้รับความความนิยมสูงสุดว่า "เพราะคนใช้ คิดไม่ออกว่าจะไปยังที่ต่างๆ บนเว็บไซต์ได้อย่างไร" ส่วน feature ที่ได้รับความนิยมเป็นอันดับสองคือ help เพราะว่าเทคโนโลยีการ search ในตอนนั้นยังทำได้ไม่ดี

IBM จึงตัดสินใจลงทุนออกแบบเว็บไซต์ใหม่เป็นเวลา 10 สัปดาห์ โดยเว็บใหม่นั้นเสร็จในเดือนกุมภาพันธ์ 1999 หลังจากเปิดตัว ผลลัพธ์ในสัปดาห์แรกพบว่า ปุ่ม help มีการใช้งานลดลง 84% และยอดขายเพิ่มขึ้น 400%

ข้อความข้างต้นอยู่ในบทความ Good Web Site Design Can Lead to Healthy Sales

ในบทความของ hesketh.com ยังพูดถึงความหมายของ user experience และแนวทางที่จะใช้ในการชักชูงฝ่าย Marketing ให้หันมาลงทุนใน User Experience มากขึ้น ดังนั้นใครที่กำลังงัดข้อเรื่อง User Experience อยู่ น่าจะลอง download มาอ่านดูนะครับ

UX ที่ดีต้องเป็นนักเล่าเรื่อง

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

ที่นี้การบอกเล่าก็สามารถทำได้หลายแบบ ส่วนมากเรามักเอาง่ายๆ โดยนำเสนอเป็นข้อๆ เช่น เราต้องการบอกว่าผู้ใช้โปรแกรมเป็นใคร

• อายุ 24 ปี
• เรียนจบมา 1 ปีในสาขาคอมพิวเตอร์
• ทำงานส่งพัสดุ
• ชอบสีแดง
• ใช้รถสีเขียว

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

รูปแสดงการสนทนาแบบเล่าเรื่อง

การอธิบายด้วยการเล่าเรื่องจึงเป็นรูปแบบที่จะช่วยแก้ปัญหาได้ ตัวอย่างเช่น เราเล่าว่า 

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

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

ดังนั้นเมื่อคนทำ UX จะต้องสื่อสารกับคนจำนวนมาก ทักษะการเล่าเรื่องจึงจำเป็นอย่างยิ่งครับ

** ข้อควรระวัง **

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

UX ไม่เท่ากับ UCD

ในการจัด UX Workshop ครั้งล่าสุดกับทีมของ NECTEC มีผู้เข้าอบรมท่านหนึ่งจบมาทางด้าน User-Centered Design ทำให้เกิดความสงสัยว่าจริงๆ แล้ว UCD กับ UX นั้นต่างกันอย่างไร วันนี้ได้โอกาสเลยลองค้นดูครับ

ภาพแสดงขั้นตอนการทำ UCD

หลังจากหาไปซักพักก็พอสรุปได้ว่า

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

UX คือ การที่ สินค้า บริการ หรือ โปรแกรม สามารถสร้างประสบการณ์ให้กับผู้ใช้ ในทิศทางที่ตรงตามเป้าหมายของมัน

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

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

User interview ทำให้เราไม่หลอกตัวเอง และเป็นการยืนยันสิ่งที่ Stakeholder บอกเราด้วย รวมทั้งเราอาจจะได้ปัญหาที่แท้จริงของผู้ใช้

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

Low-fidelity + Test เป็นการวาด Wireframe แบบคร่าวๆ แล้วเอาไปให้ผู้ใช้ทดสอบดู สามารถการเก็บความรู้สึกของผู้ใช้ระดับหนึ่ง การทำ Lo-fi นั้นมีจุดแข็งที่สามารถทำได้หลายๆ รอบ เพราะใช้พลังไม่มากนักในการสร้าง แต่ก็มีข้อเสียที่ผู้ใช้ส่วนมากจิตนาการไม่ออก

High-fidelity + Test เป็นการวาด Wireframe แบบเหมือนจริงมากๆ แล้วเอาให้ให้ผู้ใช้ทดสอบดู การทำขั้นตอนนี้มักจะต้องผ่านการทดสอบแบบ Lo-Fi มาก่อน เพราะเราจะต้องใช้พลังมากในการสร้างต้นแบบขึ้นมา

Dev + Test สุดท้ายก็เป็นการพัฒนาและทดสอบ แล้วก็วนทำไปเรื่อยๆ จนกว่าจะหมดเวลา

การ์ตูนขำๆ จาก rachelnabors.com

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

UX Design คืออะไร

ไปเจอวีดีโอที่อธิบายว่า UX Design คืออะไรได้ค่อนข้างดีครับ นอกจากเค้าจะบอกว่าคืออะไรแล้ว เค้ายังบอกด้วยว่าทำไมเราจึงควรรู้เรื่อง UX 

วีดีโอ What the .... is UX Design

บางที UX อาจจะไม่ได้มองเฉพาะผู้ใช้ แต่เป็นส่วนผสมตรงกลาง ระหว่างความต้องการของเจ้าของสินค้า และความต้องการของผู้ใช้ก็ได้ 

ส่วนหนึ่งของวีดีโอ

ส่วนสำคัญอีกส่วนคือ ทำไมเราจึงควรรู้เรื่อง UX ในวีดีโอให้เหตุผลมา 4 ข้อ

1. เพราะบางทีเราอาจจะทำ UX อยู่แล้วก็ได้ เพราะเราสนใจที่จะทำสินค้าให้ดีขึ้น เราคิดเรื่องนี้มาตลอดดังนั้นมันจึงเหมือนเราทำ UX อยู่แล้ว ทีนี้พอเรารู้จัก UX มากขึ้น รู้จัก Process ของมัน แนวคิดและวิธีการ เราจะทำมันได้ดีอย่างมีมีขีดจำกัด
2. การทำ User-centred เป็นการทำงานแบบมีขั้นมีตอน เพราะเราต้องมีการทดสอบมีการตั้งสมติฐานนั้นคือมันเป็นวิทยาศาสตร์ มันสามารถอธิบายให้เพื่อนร่วมงานฟังได้ โดยไม่ต้องอาศัยความเชื่อ หรือไม่ต้องอ้างว่าคนอื่นทำเราเลยควรทำด้วย
3. มันไม่ยาก การออกแบบ UX ไม่ต้องอาศัยความรู้ทางเทคนิคมากมาย ไม่ต้องเรียนมาโดยตรง ส่วนมากเป็นสิ่งที่เรารู้อยู่แล้ว 
4. มันสนุก การทำให้คนพึงพอใจกับงานของเรามันเป็นเรื่องสนุกและท้าทายอยู่แล้ว ยิ่งผลจากการทำจะทำให้เราได้ทั้งรายได้มากขึ้น คนใช้งานมากขึ้น ก็ยิ่งสนุกเข้าไปอีก

ถึงแม้เราจะไม่ใช่ Designer แต่เราก็สามารถทำงาน UX ได้ เพราะงานศิลปะเป็นเพียงส่วนหนึ่งของ UX เท่านั้น มันยังมีส่วนของ Information Architecture, Visual Design, User Interface, Usability ที่ยังไม่ถึงขั้นตอนที่ต้องใช้ศิลปะมากนัก ยังต้องการคนที่มีความคิดเป็นวิทยาศาตร์เข้ามาช่วยด้วย

รู้อย่างนี้แล้วมาศึกษา UX กันนะครับ :-)

ทำไม NEXUS ถึงไม่มีช่องให้ใส่ SD

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

หน้าตาของ NEXUS7

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

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

แต่พื้นที่มันมีจำกัดนี่นา ถ้าไม่มี SD แล้วจะเก็บข้อมูลไว้ที่ไหน คำตอบก็ไม่ยากครับ บริการ Cloud ไงละ บริการมากมายทั้ง ของ Google ของ Amazon ของ Box หรือที่อื่นๆ สามารถเก็บภาพได้แนบเนียนกว่า SD มากๆ ยิ่งเป็นของ Google+ ผู้ใช้แทบไม่ต้องรู้จักเรื่อง File หรือ Folder เลย อย่างมากก็คือภาพนี้อยู่บน Internet แล้ว หรืออาจมองข้ามไปว่า "รูปอยู่ในอัลมับครอบครัว บน Google แล้ว"

การที่ NEXUS 7 ไม่มีช่องใส่ SD แสดงให้เห็นกลายๆ ว่าอาณาจักรของ Android เริ่มขยับออกจากการขาย Feature มาเป็นการขาย User eXperience แล้ว

ทำไมต้องใส่ใจในรายละเอียด

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

ภาพท้องฟ้าที่เปลี่ยนไปตามเวลา บน google mobile เวลาค้นหา

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

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

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

รายละเอียดเล็กๆ น้อยๆ บน Finder

Finder เป็นเครื่องมือตัวนึงที่มีการเก็บรายละเอียดเยอะมากๆ หลายครั้งรายละเอียดเหล่านั้นทำให้การพัฒนา Application อื่นๆ ง่ายไปด้วย

โปรแกรม Finder

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

ถ้าขนาดของ column ยาวเหลือเฟือ มันจะแสดงวันที่ในรูปแบบที่อ่านได้ง่ายที่สุด ไม่มีตัวย่อ

ถ้าขนาดของ column ย่อลงมาจนแสดงได้ไม่เต็ม Finder จะลดรูปของเดือนให้เหลือเป็นแค่ตัวย่อ

ถ้าย่อลงอีกมันจะแปลงเดือนให้เป็นตัวเลขแทน

ถ้าย่อมากๆ มันจะเลือกไม่แสดงผลเวลา เพื่อให้ยังคงอ่านได้อยู่

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

สุดท้ายถ้าแปลงไม่ได้แล้ว มันจะเลือกตัดตัวอักษรตรงกลางออกก่อน เพื่อให้เรายังเห็นภาพรวมทั้งหมดอยู่ ทีนี้ เมื่อ Finder สามารถทำได้ตารางใน Application อื่นๆ บน Platform นี้เลยสามารถทำได้ไปด้วยเลย

การเก็บรายละเอียดแบบนี้ จะไม่คุ้มเลยถ้า Framework Cocoa ไม่ได้ช่วยเอื้อให้การส่ง Event Message  ของการเปลี่ยนแปลงทำได้อย่างเป็นธรรมชาติ เพราะมันจะทำให้สิ้นเปลือง CPU ในการคำนวนและสิ้นเปลืองแรงในการพัฒนามาก ดังนั้นสิ่งที่เราเห็นตรงนี้จึงเหมือนวงดนตรีที่เล่นประสานกันอย่างดี ทั้งคนที่พัฒนา Framework คนที่พัฒนาโปรแกรม คนวาง Guideline คนออกแบบ และ คนที่ควบคุมคุณภาพงาน ทำให้เกิด UI ที่เป็นธรรมชาติ จนผู้ใช้ไม่รู้สึกสะดุดในการใช้งาน

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

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

UX ของป้ายเวลาทำการ

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

ภาพต้นเหตุ

สมติว่าเหตุการนี้ไม่ได้เกิดขึ้นโดยบังเอิญ แต่เจ้าของป้ายได้ผ่านการลองผิดลองถูกมาแล้ว กว่าจะมาเป็นป้ายนี้ เราอาจจะลองย้อนเหตุการดู

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

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

เจ้าหน้าที่จึงย้ายวันจันทร์-วันอาทิตย์มาไว้เป็นบรรทัดที่สอง แล้วเติม เวลาลงไป เพราะมันห่างจากคำว่า "เวลาทำการ" มาหนึ่งบรรทัดแล้ว จึงต้องมีคำว่าเวลาใหม่อีกครั้ง

สุดท้ายแล้วเจ้าของอาจจะคิดว่ามันเกิดความซ้ำซ้อน จึงตัดคำว่า "เวลา" ออก ทำให้ขนาดของ "7:00-21:00 น." ใหญ่และเห็นชัดมากขึ้น

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

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

ถ้าคนหัวเหลี่ยมต้องการออกแบบบ้าง

หลายๆ คนที่ตามอ่าน ux.in.th เป็น programmer ที่ไม่ค่อยถนัดเรื่องงานออกแบบ แต่สนใจ UX (ผมก็คนนึง) วีดีโออันนี้อยู่ในงาน Google I/O 2012 ครับ เค้าพูดถึงงานออกแบบในภาษาที่คนหัวเหลี่ยมเข้าใจได้

session Advanced Design for Engineers ที่งาน Google I/O

เขาพยายามย้ำว่างานออกแบบไม่ใช้เรื่องมหัศจรรย์ แต่เป็นเรื่องที่ทุกคนสามารถเรียนรู้ได้ ในงาน Designer จาก Google จะเล่าถึงการทำ interactive และ visual design ซึ่งมีหัวข้อหลักๆ ในเรื่อง mental models, natural mappings, metaphors, mode errors, visual hierachies, typography และ gestalt principles

ถ้ามีโอกาศอยากให้ลองดูครับ น่าจะช่วยให้คุณภาพของงานที่เราทำอยู่ดีขึ้นมากทีเดียว

UX และ UI ก็เหมือนไก่กับไข่ มันเกิดพร้อมกัน

วีดีโอขำๆ เกี่ยวกับความสัมพันธ์ของ UX และ UI ครับ

โปรแกรมควรมีเครื่องมือใช้ง่าย หรือแค่เท่ก็พอ

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

ตัวอย่างหน้าจอโปรแกรม SketchBook และ Paper

เราลองเทียบโปรแกรมวาดรูปสองตัวอันหนึ่งเป็นตัวแทนความครบถ้วน อีกอันเป็นตัวแทนความเท่

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

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

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

ประสบการณ์ของผู้ใช้ควบคุมได้ครับ :-D

อยากให้ผู้ใช้รู้สึกแบบไหน "ง่ายดี" หรือ "เท่ดี"

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

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

หน้าจอโปรแกรม Wunderlist และ Clear

กรณีศึกษาของความง่าย และความเท่ ผ่านโปรแกรม Todo list สองตัวคือ Wunderlist และ Clear 

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

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

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

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

สำหรับผมตัวอย่างที่เห็นชัดๆ อีกอันคือมือถือ iOS, Android หรือ Window Phone ลองวิเคราะห์กันสนุกๆ ว่าเค้ายอมแลกอะไรเพื่อความเท่บ้างหรือเปล่า

Twitter หน้าตาใหม่บน ipad ได้อะไรแลกกับอะไร

ทีม UX ของ Twitter นับว่าเป็นทีมที่เก่งมากๆ งานออกแบบครั้งที่แล้วได้สร้างรูปแบบใหม่ในการใช้งานโปรแกรมบน iPad ขึ้นมา และที่เท่มากคือมันเป็นของใหม่ที่ผู้ใช้ยังรู้สึกว่าเป็น App ของ Platform นี้อยู่

มาครั้งนี้มีการ Update ใหม่อีกครั้ง คราวนี้ Twitter ทำตัวเองให้เรียบง่ายมากขึ้น และเน้นเรื่อง Branding อย่างชัดเจน

ภาพหน้า List

Twitter ใหม่ จะย้าย Tab Message, Tab List ปุ่ม Setting ไปไว้ใน Profile และ Tab Search ไปไว้บน Title Bar ทำให้ Tab ด้านข้างเหลือแค่ 4 ปุ่ม ทำให้ง่ายสำหรับผู้เข้ามาใหม่ แลกมาด้วยความยากสำหรับคนที่รู้อยู่แล้วว่าต้องการอะไร

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

แถบสีฟ้าที่เพิ่มเข้ามาเป็นการสร้าง Brand ของ Twitter ให้ชัด แทนที่จะซ่อน Logo ไว้ที่แถบด้านซ้ายมือ

ภาพหน้ารายละเอียดของ Tweet

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

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

อีกอย่างก็คือเสียความเก๋ที่แผ่นตรงกลางสามารถเลื่อนไปมาได้ แต่ tweeter ก็เลือกที่จะเปลี่ยน

ภาพแสดงหน้าจอ Tweet

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

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

ตอนนี้ Wow factor หายไปหลายที่ แต่ตอนนี้ Tweeter ไม่ต้องการแล้ว ดังนั้นของใหม่จึงเข้ามาตอบโจทย์เรื่องความเรียบง่ายและ Branding แทน

UX บน Kinect

Minority Report เป็นหนัง Sci-fi ที่น่าตื่นตาตื่นใจมาก โดยเฉพาะในส่วนของ UI ที่ Tom Cruise ใช้ในเรื่อง ซึ่งในปัจจับันนี้ Kinect ได้ทำให้ UI แบบนั้นเป็นความจริงขึ้นมาได้

Kinect นั้นมีความสามารถที่จะให้ ผู้ใช้สามารถร่างกายการแสดงท่าทางต่างๆและเสียงอย่างเป็น "ธรรมชาติ" ในการติดต่อหรือบังคับคอมพิวเตอร์  และมีการเรียก UI ในลักษณะนี้ว่า Natural User Interface (NUI) 

การที่เราสามารถออกท่าทางต่างๆเวลาเล่นเกม ทำให้เราสนุกมากขึ้นกว่าการกดปุ่มธรรมดาๆ มี experience ที่ดีขึ้น เชื่อว่าหลายๆคนคงรู้สึก :) 

แต่.........ก็ไม่เสมอไปเน๊อะ ทุกอย่างมีข้อยกเว้น

เมื่อก่อนเคยนั่งจินตนาการว่าถ้าเราต้องทำงานสักอย่างนึงกับคอมพิวเตอร์ แต่ต้องมายกมือยกไม้แกว่งไปมา แถมต้องค้างๆไว้อีกแบบที่ Tom Cruise ทำ Minority Report มันจะต้องเมื่อยแน่ๆเลย - - 

บังเอิญช่วงนี้กำลังต้องทำงานเกี่ยวกับ Kinect บวกกับมีโอกาสไปเดินเล่นแถวๆพารากอน แล้วก็ได้ไปลองเล่น app ที่ใช้ Kinect ในการพัฒนา ที่ shop โทรศัพท์มือถือยี่ห้อหนึ่งได้เอามาตั้งไว้เก๋ๆ  

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

แต่ว่าตัวอย่างที่เรายกขึ้นมาก็เป็นเพียงแค่ use case เดียวเท่านั้น สำหรับเรา เรายังคงคิดว่ามี use case อื่นๆที่การเลือกใช้ Kinect เป็นวิธีการที่เหมาะสม 

สรุปได้ว่า user และ use case เป็นสิ่งสำคัญในการเลือกและออกแบบ interaction และ interface เพราะฉะนั้นระวังกันให้ดีๆนะคะ

ปล. ที่ต้องเอา Minority Report ภาษาฝรั่งเศสมา เพราะว่าหาภาษาอังกฤษไม่ได้ เขาเอาออกหมดเลย

5 ความเชื่อที่บั่นทอนพลังของ UX

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

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

ผมลองยกตัวอย่างความเชื่อที่ขัดกับแนวทาง UX มาซัก 5 อย่างครับ

เลือกเข้าตลาดก่อนแทนที่จะทำสินค้าให้ดี

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

เลือกเก็บเงินไว้แทนที่จะลงทุนในเรื่องประสิทธิภาพ

ผมมองว่าประสิทธิภาพนั้นเงินซื้อไม่ได้ ดังนั้นถ้ามีโอกาสที่จะเอาเงินแลกประสิทธิภาพได้ ก็อย่าปล่อยโอกาสนั้นไป

ใช้แนวทาง Six Sigma ในการสร้างนวัตกรรม

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

พยายามตามเก็บ feature ให้ทันคู่แข่ง แทนที่จะพยายามสร้างประสบการณ์ผู้ใช้ที่แตกต่าง

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

ออกแบบโดยแน้นหน้าตาที่สวยงาม โดยยึดติดกับการตลาดและสิ่งที่จะใช้โฆษณา

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

ที่มา : หนังสือ Effective UI

UX ของใบสั่งอาหาร (1)

อันนี้เป็นเรื่องแปลกและน่าสนใจสำหรับผมครับ ดูลักษณะแล้วจะยาว แบ่งเป็นตอนๆ ละกัน

ช่วงนี้มีเหตุให้ต้องอยู่เชียงใหม่บ่อยๆ นานๆ สังเกตอย่างหนึ่งว่าร้านอาหารในเชียงใหม่หลายๆ ร้านที่ผมไปกิน จะมีวิธีการให้ลูกค้าสั่งอาหารลักษณะที่น่าสนใจคล้ายๆ กันอยู่

วิธีการสั่งอาหารเวลาที่ผมจะคุ้นอยู่บ่อยๆ คือ มีคนมาจดรายการอาหารหรือเราจดรายการอาหาร รูปแบบการจดก็เป็นแบบ

[ชื่ออาหาร][คุณสมบัติ] [จำนวน]

ยกตัวอย่างเช่น

[สำตำปูปลาร้า][เผ็ดน้อย พริกเม็ดเดียว] [1]

ซึ่งรูปแบบนี้ก็เข้าใจง่ายดี มีข้อดี

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

แต่แบบจดลงกระดาษก็มีข้อเสียคือ

• คนทำอาหารอาจจะอ่านลายมือไม่ออก
• รายการอาหารนั้นๆ อาจจะไม่มีเพราะคนสั่งสร้างเมนูขึ้นมาเอง อาจจะนำไปสู่การอารมณ์เสียของคนทำอาหาร ซึ่งเป็นปัจจัยทำให้อาหารไม่อร่อยได้ง่าย

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

ใบสั่งอาหารของร้านป้าเล็กส้มตำ

ใบสั่งอาหารของร้านอะไรสักอย่างแถวๆ หลัง มช. ด้านซ้ายเป็นใบสั่งก๋วยเตี๋ยว ด้านขวาเป็นใบสั่งอาหารว่าง

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

การทำใบสั่งอาหารแบบนี้มีข้อดีข้อเสียที่คิดได้ประมาณนี้คือ

ข้อดีคือ

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

ข้อเสียคือ

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

 ยังมีใบสั่งอาหารลักษณะคล้ายๆ กันอีกหลายแบบ เดี๋ยวมาต่อตอน 2 จ้ะ :D

คุ้มหรือเปล่าที่จะทำ UX

มีเพื่อนบน facebook.com/groups/ux.in.th ท่านหนึ่ง พูดถึงมุมมองของบริษัทต่อ UX ว่า

พี่ท่านนึงที่จบป.โท ด้าน Human-Computer interaction มาโดยตรงเคยคุยให้ฟังว่า UX ถูกมองว่า เป็นการลงทุนที่สิ้นเปลือง ทำให้ตลาดงานยังค่อนข้างแคบ

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

บางกลุ่มมองว่า UX เป็นงานของทีม Graphic Design หรือไม่ก็ทีมเก็บ Requirement ซึ่งสองตำแหน่งนี้ก็คิดถึง User อยู่แล้วทำไมต้องมาทำ UX อีก

บางกลุ่มมองว่าการทำให้ User ได้รับประสบการณ์ที่ดี ไม่ได้ทำให้บริษัทได้เงินเพิ่มขึ้น หรือทำให้ต้องลงทุนมากไป จนไม่คุ้ม

คนที่คำนึงถึงลูกค้า และคนที่ศึกษา UX จะรู้ว่าการคำนึงถึงลูกค้าตลอดเวลา มันมีค่ามากขนาดไหน ผมเคยดู Video อันหนึ่งที่พูดถึง Return of Investment (ROI) ของงาน UX ครับ

Video ของ HFI Animate

วีดีโอนี้ได้ทดลองคำนวนต้นทุน และผลกำไรที่ได้จากการทำ UX ออกมาอย่างชัดเจน ดังนั้นถ้าใครมีปัญหากับหัวหน้า ว่าทำไมต้องทำ UX ลองเอาวีดีโอนี้ให้ดูนะครับ

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

UX คืออะไร

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

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

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

 

ภาพแสดงองค์ประกอบของ UX

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

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

UX คือผลรวมของ Science Art และ Craftsmanship

การจะได้ UX ที่ดีนั้นต้องรู้จักการตั้งสมติฐานและการหาคำตอบ (Science) เพื่อใช้คาดการที่มาที่ไปของสิ่งต่างๆ (สามารถหาข้อมูลเพิ่มเติมได้ในเรื่อง Usability และ Information Architecture)

แต่ความรู้ด่านเทคนิคก็ไม่สามารถเป็น UX ที่ได้ได้ เรายังต้องการศิลปะ (Art) เพื่อใช้อธิบายสิ่งที่จับต้องไม่ได้ทั้งหลาย เช่น ความสวยงาม หรือ องค์ประกอบศิลป์ เป็นต้น

ทั้ง Science และ Art ต่างเป็นองค์ความรู้สำคัญที่ทำให้ได้งานที่ดี แต่ถ้าขาดความเชี่ยวชาญ ประสบการณ์ และความตั้งใจ งานที่มี UX ดีก็จะไม่เกิดขึ้น ความเร็วในการตอบสนองของโปรแกรม ความต่อเนื่องของแต่ละหน้าจอ สิ่งเหล่านี้เรียกว่าเป็นงานหัตถศิลป์ (Craftsmanship) ได้เลยทีเดียว

สรุปก็คือการที่จะทำ UX ให้ได้ดีนั้น ต้องประกอบด้วยความรู้ด้านวิทยาศาสตร์ ความรู้สึกในศิลปะ และฝีมือครับ 

ส่วนรายละเอียดในองค์ความรู้แต่ละตัวจะค่อยๆ เฉลยไว้ใน ux.in.th นะครับ

ทดสอบ 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