สร้าง 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