สร้าง Persona ควรมีอะไรบ้าง

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

การสร้างภาพของลูกค้าได้ชัดที่สุด โดยการข้อมูลให้น้อยที่สุด ผมคิดว่าอย่างน้อยควรมีข้อมูล 7 ข้อนี้ครับ

รูปภาพ 

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

ภาพแบบเป็นทางการ และไม่เป็นทางการ

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

ชื่อ

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

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

อายุ

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

ที่อยู่

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

อาชีพ

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

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

ประวัติ

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

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

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

สร้างตัวแทนของผู้ใช้ระบบ (persona)

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

การทำ Persona มีอยู่สองแนวทาง (จากเว็บไซต์ joshuaseiden.com)

• แบบแรกคือ Marketing-targeted แนวทางนี้จะสร้างผู้ใช้ขึ้นมาเพื่อตามหาสิ่งกระตุ้นให้เกิดการซื้อ
• แบบที่สอง คือ Interactive personas ซึ่งจะสร้างผู้ใช้ขึ้นมาเพื่อตามหาพฤติกรรมการใช้งาน

ใครที่เคยเรียน Marketing น่าจะเคยสร้าง Personar ในแบบ Marketing-targeted กันแล้ว (ถ้าสนใจลองหาอ่านในหนังสือ Marketing ได้ทั่วไป) แต่สำหรับงาน UX เราน่าจะสนใจแบบ Interactive มากกว่า 

ภาพตัวอย่างการทำ Persona จากเว็บไซต์ wiki.fluidproject.org

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

ภาพแอบถ่ายการประชุมทีมของ yahoo

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

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

เราจะมาลงลึกแนวทางการทำ Persona กันในตอนต่อไปครับ

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 กันนะครับ :-)

BlackBerry จัดเรื่อง UX มาอย่างดี แต่สำหรับใคร

หลังจากได้เห็น UI ของ BlackBerry PlayBook ก็พบว่าเค้าคิดมาอย่างดีเลย เก็บทุกอย่างได้เรียบร้อย ต่อยอดจากทั้งของ iPhone และ Android มาได้อีกขั้น โดยแก้ปัญหาทั้งในเรื่อง multitask และแก้ปัญหาเรื่องหน้าจอ Widget vs Icon ไปในตัว แต่ใครล่ะที่จะชอบ

ความลื่นไหลของ UI บน BlackBerry PlayBook

iPad และ iPhone มีปัญหาในเรื่องการใช้งานแบบ Multitask ไม่ใช่ว่าระบบ Multitask ของ iOS มีปัญหา แต่ปัญหาคือผู้ใช้ไม่รู้ว่ามันสลับไปมาระหว่าง App ที่เปิดเอาไว้ได้ การใช้ double tab  บนปุ่ม Home ก็เป็นเรื่องที่เหมือนซ่อนเอาไว้ ส่วนการใช้ห้านิ้วลากบนหน้าจอเพื่อสลับ App ก็มีปัญหาว่า ผู้ใช้จำไม่ได้ว่า App อะไรอยู่ทางซ้ายหรือทางขวา ทำให้ต้องลากไปเรื่อยๆ

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

PlayBook นำส่วน Multitask และ Icon มาไว้ด้วยกัน

สำหรับผู้ใช้ที่มีพลังในการเรียนรู้น้อย เมื่อใช้ iOS สิ่งที่ต้องรู้คือ "เมื่อสนใจ App ไหนก็จิ้มไปบน App นั้น ถ้าจะออกมาหน้าเดิมก็กด Home" แต่บน PlayBook ผู้ใช้ต้องเรียนรู้มากมายตั้งแต่ครั้งแรกที่ใช้งาน

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

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

Firefox OS

การใช้ HTML เป็นฐานในการพัฒนาโปรแกรมบน Mobile Platform เป็นความหวังมาตั้งแต่สมัย iPhone ออกมาใหม่ๆ จน Android ออกมาก็ยังไม่ประสบความสำเร็จ โดยติดในหลายๆ เรื่อง เช่นเรื่องของการตอบสนองที่สู้ Native ไม่ได้ หรือในเรื่องของการควบคุมความสามารถต่างๆ ของ Hardward ที่ต้องตาม Native อยู่เสมอ

แต่เมื่อ WebOS ออกมาโดยใช้ HTML+JS เป็นหลัก สามารถทำงานได้อย่างรวดเร็วน่าประทับใจ และยังมี Usability ที่ดีและสวยมาก มันจึงเป็นตัวที่บอกว่าความหวังนั้นยังไม่หายไป ถึงแม้ว่าตอนหลัง WebOS จะไม่สำเร็จในอ้อมอก Palm และ HP แต่ก็มี Firefox OS เข้ามาเป็นความหวังใหม่ครับ

ถ้า WebOS เป็น Apple เจ้า Firefox OS ก็เป็น Android ในโลกของ HTML+JS ครับ

หน้าตา Firefox OS (May 9, 2012)

ข้อเสียของความเป็นเว็บคือต้องเสียเวลา Render HTML ซึ่งใช้พลังมากกว่า Native ทำให้มีโอกาสที่จะทำงานช้าสูงมาก แต่ก็แลกมาด้วยข้อดีว่ามันความยืดหยุ่นในการปรับแต่งสู. และมีความซับซ้อนน้อยกว่าสำหรับนักพัฒนา ผมอยากให้ดู video อีกอันเพื่อเปรียบเทียบว่า เพียงไม่กี่เดือนหน้าตาของ Firefox OS นั้นเปลี่ยนไปขนาดไหน

หน้าตา Firefox OS (Oct 18, 2012)

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

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

ที่วางแก้วบนเครื่องบิน

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

ที่วางแก้ว (จริงๆ น่าจะเรียกว่าที่แขวนแก้วมากกว่า) บนเครื่องบินก็เปลี่ยนใหม่ ปกติจะต้องกางถาดวางอาหารออกมาแล้วจะเจอหลุดวางแก้ว แต่ในเก้าอี้รุ่นใหม่มีที่แขวนแก้วให้ไว้ข้างนอกด้วย เราจึงมีที่วาง/แขวนแก้วโดยไม่ต้องกางถาดอาหารออกมา

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

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


เกือบดีแล้วครับการบินไทย ถ้าเซาะร่องไว้หน่อยก็ดีครับ

การจัดการกับภาพที่ถูกจำกัดรูปทรง

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

ตัวอย่างงานออกแบบส่วนหัวของเว็บ

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

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

ตัวอย่างงานออกแบบหัวเว็บที่ปรับแล้ว

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

อีกตัวอย่างหนึ่งคือ Banner ของ Coca-Cola

ตัวอย่าง banner ของ Coca-cola และ ข้อความที่ส่งออกไป

ในตัวอย่างจะเห็นว่าข้อความสำคัญคือทรงของขวด หยดน้ำ และคำว่า Coca-Cola ยังคงเอาไว้ครบใน Banner โดยไม่จำเป็นต้องตัดภาพทั้งขวดมาลง

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

สำหรับใครที่ต้องการรายละเอียด สามารถดูได้จาก video นี้ครับ

Video ของ Before & After เรื่อง Extreme photo cropping

เรื่องของ Graphic Design ก็ถือว่าเป็นเรื่องสำคัญมากๆ ในการทำ 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 แล้ว

เกลือ หรือ พริกไทย

กลับมาแล้วกับการสังเกตของใช้ในชีวิตประจำวัน

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

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

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

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

ตอนเขียนบล็อกนี้ก็เลยลองนึกๆ แบบอื่นๆ ที่เคยเจอมา จำได้สามแบบ

แบบที่ 1 นี่เป็นแบบที่มักจะเจอบ่อยๆ กว่าจะตัดสินใจได้ต้องเหยาะออกมาสักจึ๊กนึงก่อนถึงจะรู้
แบบที่ 2 นี่พยายามจะสร้างสรรค์ มีใครรู้ไหมว่าทำไมรูของพริกไทยกับเกลือมันเป็นแบบนั้น?
แบบที่ 3 นี่ชอบที่สุด ใช้ colour-coded แบ่งแยกพริกไทยเป็นสีดำ และ เกลือเป็นสีขาว กรณีพริกไทยจริงๆ เป็นสีอื่นๆ ก็ไม่น่าต้องคิดมากเท่าไร เพราะ mapping สีของเกลือเราเป็นสีขาวอยู่แล้ว เคยเห็นเกลือหิมาลายาบูเก้เป็นสีชมพู แต่นั่นคงเป็น mapping ที่ไม่แข็งแรงเท่ากับเกลือสีขาว?

สนุกดีครับ

ออกแบบ Icon สำหรับ OSX

วันนี้น้องใน office เกือบได้วาด icon สำหรับ OSX เลยได้รื้อฟื้นเอกสารเก่าที่เคยอ่านมา ว่าการออกแบบ icon บน OSX นั้น ไม่ใช่ออกแบบกันตามใจชอบนะ แต่มันมีหลักในการออกแบบอยู่

ภาพตัวอย่าง icon บน OSX

เราจะสังเกตเห็นว่าถึงแม้ Icon จะมาจาก Apple เอง ก็ยังมีความแตกต่างที่ไม่เข้าพวกกัน ในที่นี้อยากให้ลองสังเกตเงาและองศาในการมองครับ

มุมในการวาด Icon ของ Application

ตาม Guideline ของ Apple ระบุว่า ถ้ากำลังวาดภาพ Icon ของ Application ให้วาดในมุมกด เสมือน Icon นั้นวางไว้บนโต๊ะแล้วฉายกล้องกดลงไปได้ภาพวัตถุมุมเอียง ส่วนเงาก็จะพาดลงไปบนโต๊ะเพราะแสงส่องมาจากด้านบน

มุมในการวาด Icon ของ Utility

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

มุมในการวาด Icon ของ Utility ที่เป็น 3D

บาง Icon ถึงจะเป็น Utility แต่คนออกแบบจงใจวาดเป็นวัตถุ ก็จะได้รับการยกเว้นไม่ต้องไปแขวนอยู่บนผนังให้วางไว้บนพื้นได้ แต่มุมในการถ่ายยังเป็นมุมตั้งฉากกับผนังอยู่ดี

มุมในการวาด Icon บน Toolbar

มุมในการวาด Icon สำหรับ Toolbar โดยหลักๆ จะเหมือนกับ Utility แต่มันจะมีรายละเอียดมากกว่า อยากให้ลองไปอ่านเพิ่มเติมที่ Designing Toolbar Icons ครับ

เทียบภาพ Icon สำหรับ Utitlity และ Application

จากภาพ Icon ของ System Preference และ Icon ของ Contact จะเห็นว่าผลลัพธ์ที่ออกมามีลักษณะไม่เหมือนกันตามหลักการออกแบบด้านบน ซึ่งผมเชื่อว่าถึงแม้ผู้ใช้จะไม่ทันสังเกตแต่เค้าสามารถรู้สึกได้ครับ ยิ่งถ้าทุก Application, Utility มันทำมาแนวเดียวกันหมด ผู้ใช้ก็จะได้รับการสอนโดยอัตโนมัติ และช่วยลดเวลาในการจำแนก Application ได้ ช่วยสร้างประสบการณ์ที่ดีให้กับผู้ใช้ครับ :-)

อ้างอิง - OSX HIG

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

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

ภาพท้องฟ้าที่เปลี่ยนไปตามเวลา บน 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 ที่คาดหวังไว้ 

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

ใส่ใจกับความเท่าเทียมกัน

OS ที่ใส่ใจเรื่องความเท่าเทียมกัน จะมาพร้อมกับความสามารถด้าน Accessibility ทั้งงานด้านเทคนิค และงานออกแบบ ตัว Control ที่ออกมาจะต้องได้รับการทดสอบว่ายังสามารถทำงานได้ดีใน Accessibility Mode ด้วย เราลองมาดูตัวอย่างของ iOS กันก่อน

ตัวอย่างการกลับภาพ ขาวเป็นดำ ของ iOS

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

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

เช่นเดียวกัน scroll bar ผู้ใช้จะรู้ได้ทันทีว่าด้านที่เป็น value อยู่ด้านซ้ายหรือขวา โดยดูจากสีเข้ม/สว่าง ทั้งแบบที่ธรรมดาและแบบกลับขาวเป็นดำ

ตัวอย่างการกลับขาวเป็นดำของ Android

สำหรับ Android ตัว UI ก็ได้รับการออกแบบให้รองรับแล้วเช่นกัน เราจะเห็นว่าสีที่เป็น ON จะแตกต่างจากสีอื่นๆ แม้ว่าตัวหนังสือ ON/OFF จะอ่านไม่ค่อยชัด แต่ก็ถือว่าอ่านออกครับ

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

 

ตัวอย่าง control ที่สร้างเอง

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

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

สุดท้ายที่อยากฝากไว้คือการทำ Accessibilty ที่ดีไม่ใช่การทำตาม Guideline เพราะ Accesibility ไม่ใช่เรื่องของ Guideline แต่มันเป็นเรื่องของคน ถ้าเราใส่ใจในความเท่าเทียมกันของคน เราจะได้ Accessibility ที่ดีมากเองครับ

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

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

ภาพต้นเหตุ

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

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

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

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

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

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

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