ผลต่างระหว่างรุ่นของ "UX Desing : Ratika"
Ratika (คุย | มีส่วนร่วม) |
Ratika (คุย | มีส่วนร่วม) |
||
แถว 1: | แถว 1: | ||
− | + | UX เป็นการออกแบบส่วนติดต่อกับผู้ใช้ ซึ่งควรมีลักษณะ ใช้ง่าย รวดเร็ว ไม่สับซ้อน | |
+ | UI จะเป็นส่วนประกอบของ UX คือ UI จะเป็นการสัมพัสกดปุ่มหรือรับค่า ส่วน UX จะเป็นการประมวลผล เก็บข้อมูล | ||
+ | UXD (User Experience Desing) คือ UX จะเกี่ยวข้องกับความพึ่งพอใจของผู้ใช้, ความรู้สึก, บริการ | ||
+ | '''การวัดคุณภาพของ UX ที่ดี''' | ||
- การที่คนมาดาวน์โหลดแอพเรามากน้อยแค่ไหน | - การที่คนมาดาวน์โหลดแอพเรามากน้อยแค่ไหน | ||
- การที่มีผู้ใช้กลับมาใชงานแอพเราอยู่เรื่อยๆ | - การที่มีผู้ใช้กลับมาใชงานแอพเราอยู่เรื่อยๆ | ||
แถว 7: | แถว 10: | ||
- ค่าใช้จ่ายในการดูแลลูกค้าลดน้อยลง | - ค่าใช้จ่ายในการดูแลลูกค้าลดน้อยลง | ||
- คะแนนและคอมเมนต์แย่ๆลดลง | - คะแนนและคอมเมนต์แย่ๆลดลง | ||
− | + | '''ขั้นตอนการพัฒนาผลิตภัณฑ์ของ UX''' | |
1. การวางแผนกลยุธ | 1. การวางแผนกลยุธ | ||
2.การออกแบบโคร้งสร้างและสถาปัตกรรมของเนื้อหา | 2.การออกแบบโคร้งสร้างและสถาปัตกรรมของเนื้อหา | ||
แถว 14: | แถว 17: | ||
5.การทดสอบและการปรับแต่ง | 5.การทดสอบและการปรับแต่ง | ||
− | ''' | + | '''ปัญใจการ Desing มี 4 ปัจจัย''' |
− | 1. Branding สร้างแบรนด์ให้มีความเกี่ยวข้องกับเนื้อหา รูปภาพประกอบ | + | 1. Branding สร้างแบรนด์ให้มีความเกี่ยวข้องกับเนื้อหา รูปภาพประกอบ<br /> |
− | - เว็บให้อะไรที่ผู้ใช้ที่ทำให้ผู้ใช้จดจำได้ | + | - เว็บให้อะไรที่ผู้ใช้ที่ทำให้ผู้ใช้จดจำได้<br /> |
− | - สิ่งที่ผู้ใช้มองเห็นสัมพันธ์กับแบรนอย่างไร | + | - สิ่งที่ผู้ใช้มองเห็นสัมพันธ์กับแบรนอย่างไร<br /> |
− | - สื่อ Multi media สามารถเพิ่มประสบการณ์ผู้ใช้ได้ | + | - สื่อ Multi media สามารถเพิ่มประสบการณ์ผู้ใช้ได้<br /> |
− | - เว็ปไซต์นั้นเพิ่มมูลค่าให้กับแบรนด์ หรือแค่มูลค่าเท่าเดิม | + | - เว็ปไซต์นั้นเพิ่มมูลค่าให้กับแบรนด์ หรือแค่มูลค่าเท่าเดิม<br /> |
− | 2. Functionnality เทคนิคต่างๆในการส่งเสริมการใช้งาน | + | 2. Functionnality เทคนิคต่างๆในการส่งเสริมการใช้งาน<br /> |
− | 3. Usability การทำให้ผู้ใช้รู้สึกถึงความง่ายในการใช้ โดยใช้ประสบการณ์ของผู้ใช้เป็นหลัก | + | 3. Usability การทำให้ผู้ใช้รู้สึกถึงความง่ายในการใช้ โดยใช้ประสบการณ์ของผู้ใช้เป็นหลัก<br /> |
− | 4. Content การวัดทางโครงสร้างข้อมูล | + | 4. Content การวัดทางโครงสร้างข้อมูล<br /> |
− | - ปริมาณข้อมูลที่เพื่องพอ มีเมนูเพื่อไปยังเนื้อหาอื่นๆได้อย่างสดวก | + | - ปริมาณข้อมูลที่เพื่องพอ มีเมนูเพื่อไปยังเนื้อหาอื่นๆได้อย่างสดวก<br /> |
− | - จัดการโครงสร้างเนื้อหาอย่างเป็นระเบียบ | + | - จัดการโครงสร้างเนื้อหาอย่างเป็นระเบียบ<br /> |
− | - เนื้อหาต้องถูกต้องแม่นยำทันสมัย | + | - เนื้อหาต้องถูกต้องแม่นยำทันสมัย<br /> |
− | - ศัพย์ที่ใช้ต้องอธิบายอย่างชัดเจน ไม่ลึกไม่กว้าง | + | - ศัพย์ที่ใช้ต้องอธิบายอย่างชัดเจน ไม่ลึกไม่กว้าง<br /> |
+ | |||
+ | '''ส่วนสำคัญอีกส่วนคือ ทำไมเราจึงควรรู้เรื่อง UX ในวีดีโอให้เหตุผลมา 4 ข้อ''' | ||
+ | 1. เพราะบางทีเราอาจจะทำ UX อยู่แล้วก็ได้ เพราะ เราสนใจที่จะทำสินค้าให้ดีขึ้น เราคิดเรื่องนี้มาตลอดดังนั้นมันจึงเหมือนเราทำ UX อยู่แล้ว ทีนี้พอเรารู้จัก UX มากขึ้น รู้จัก Process ของมัน แนวคิดและวิธีการ เราจะทำมันได้ดีอย่างมีมีขีดจำกัด | ||
+ | 2. การทำ User-centred เป็นการทำงานแบบมีขั้นมีตอน เพราะ เราต้องมีการทดสอบมีการตั้งสมติฐานนั้นคือมันเป็นวิทยาศาสตร์ มันสามารถอธิบายให้เพื่อนร่วมงานฟังได้ โดยไม่ต้องอาศัยความเชื่อ หรือไม่ต้องอ้างว่าคนอื่นทำเราเลยควรทำด้วย | ||
+ | 3. มันไม่ยาก การออกแบบ UX ไม่ต้องอาศัยความรู้ทางเทคนิคมากมาย ไม่ต้องเรียนมาโดยตรง ส่วนมากเป็นสิ่งที่เรารู้อยู่แล้ว | ||
+ | 4. มันสนุก การทำให้คนพึงพอใจกับงานของเรามันเป็นเรื่องสนุกและท้าทายอยู่แล้ว ยิ่งผลจากการทำจะทำให้เราได้ทั้งรายได้มากขึ้น คนใช้งานมากขึ้น ก็ยิ่งสนุกเข้าไปอีก | ||
'''การเป็น UX จะต้องรู้เรื่องของ''' | '''การเป็น UX จะต้องรู้เรื่องของ''' | ||
แถว 33: | แถว 42: | ||
Usability Testing คือการทดสอบว่าดีไหม อะไรแบบไหน หลังจากนั้นส่งมาที wireframes คือเป็นหน้าต่างของ prototype หลังจากนั้นจะให้ UI จัดการออกแบบ Layout ควรจะจัดวาง Layout แบบไหนในหน้าวินโดว์ ออกแบบภาพ visual desing และออกแบบ branding ให้เข้ากับ udd หรือเว็ปไซด์ | Usability Testing คือการทดสอบว่าดีไหม อะไรแบบไหน หลังจากนั้นส่งมาที wireframes คือเป็นหน้าต่างของ prototype หลังจากนั้นจะให้ UI จัดการออกแบบ Layout ควรจะจัดวาง Layout แบบไหนในหน้าวินโดว์ ออกแบบภาพ visual desing และออกแบบ branding ให้เข้ากับ udd หรือเว็ปไซด์ | ||
− | + | '''การออกแบบ User Experience (UX)''' | |
1. เข้าใจว่าเราออกแบบให้ใครเป็นผู้ใช้งาน | 1. เข้าใจว่าเราออกแบบให้ใครเป็นผู้ใช้งาน | ||
นักออกแบบต้องพยายามทำความเข้าใจในมุมของผู้ใช้ ใครคือกลุ่มเป้าหมาย? พวกเขามีพฤติกรรมอย่างไร? นักออกแบบ UX ส่วนใหญ่ใช้เวลามากในโลกออกไลน์และพวกเขาสามารถรับรู้ที่ดี (หรือไม่ดี)ประสบการณ์ของผู้ใช้เมื่อพวกเขาเห็นมัน | นักออกแบบต้องพยายามทำความเข้าใจในมุมของผู้ใช้ ใครคือกลุ่มเป้าหมาย? พวกเขามีพฤติกรรมอย่างไร? นักออกแบบ UX ส่วนใหญ่ใช้เวลามากในโลกออกไลน์และพวกเขาสามารถรับรู้ที่ดี (หรือไม่ดี)ประสบการณ์ของผู้ใช้เมื่อพวกเขาเห็นมัน | ||
แถว 48: | แถว 57: | ||
โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.” ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้ | โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.” ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้ | ||
− | + | '''Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง''' | |
-ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม | -ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม | ||
-บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล มนุษย์เราย่อมมีความแตกต่างกัน | -บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล มนุษย์เราย่อมมีความแตกต่างกัน | ||
แถว 57: | แถว 66: | ||
-การออกแบบสำหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความสนใจสูง | -การออกแบบสำหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความสนใจสูง | ||
-การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของระบบ | -การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของระบบ | ||
− | + | ข้อคำนึงดังกล่าวจะเห็นได้ว่า การออกแบบส่วนต่อประสานควรที่จะคำนึงถึงแทบทุกเรื่องไม่ว่าจะเป็นเพศ อายุ เชื้อชาติ ศาสนา ก็นำมาเป็นส่วนประกอบในการพิจารณาได้ทั้งสิ้นเช่น ในบางศาสนามีข้อต้องห้ามสำหรับการแสดงภาพสัตว์ สิ่งของบางชนิด, ผู้ใช้งานที่เป็นเด็กจะนิยมภาพที่มีสีสันฉูดฉาดมากกว่าผู้ใหญ่ สภาพแวดล้อมต่าง ๆ ในการใช้งานก็เป็นส่วนหนึ่งเช่น เมื่อเราจะออกแบบตู้โฆษณากลางแจ้งมีแสงมาก แต่เราออกแบบให้มีสีที่มีการตัดกัน(Contrast) น้อย จะทำให้ผู้ใช้งานมองเห็นข้อความที่เราสื่อไม่ชัดเจน แม้กระทั่งความแตกต่างเฉพาะบุคคลเช่นบางคนชอบอ่านมากกว่าฟัง บางคนชอบภาพเคลื่อนไหว มากกว่าภาพนิ่ง สิ่งเหล่านี้ล้วนเป็นตัวแปรในการออกแบบส่วนต่อประสานทั้งสิ้น | |
− | + | Principle หลักการในการออกแบบส่วนต่อประสาน | |
+ | ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก | ||
+ | แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง | ||
+ | เลือกแบบการมีปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้ (เม้าส์, พ้อยเตอร์) | ||
+ | Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก | ||
+ | Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก | ||
+ | Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง | ||
+ | Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้ | ||
+ | '''กฎ 8 ข้อสำหรับการออกแบบหน้าจอ''' | ||
+ | Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ เป็นรูปแบบเดียวกัน ไม่ว่าจะเป็นสัญลักษณ์ สี ขนาดที่ใช้ควรจะเป็นชุดเดียวกัน | ||
+ | Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้ เราอาจต้องหาข้อมูลผู้ใช้งานมาให้ครอบคลุมทั้งหมด แล้วเลือกการออกแบบที่ผู้ใช้งานส่วนใหญ่พอใจ | ||
+ | Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์ ข้อมูลป้อนกลับจะเป็นตัวเร้าที่ดีสำหรับผู้ใช้งาน ให้มีความรู้สึกว่ากำลังได้ควบคุมและโต้ตอบกับระบบอยู่ | ||
+ | Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และจุดสุดท้าย | ||
+ | Prevent error มีการป้องกันความผิดพลาดจากผู้ใช้งาน เช่น เมื่อมีการคลิกเม้าส์ผิดที่ หรือป้อนข้อมูลผิด ระบบจะมีข้อความเตือนว่าผู้ใช้งานป้อนข้อมูลผิดพลาด จะช่วยลดความผิดพลาดของข้อมูลได้มาก | ||
+ | Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขหากเกิดข้อผิดพลาด | ||
+ | Support internal locus of control ระบบมีการจัดการการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไปให้มีความสัมพันธ์กัน | ||
+ | Reduce short-term memory load ลดความยาวของเวลาที่นำเสนอเนื้อหาเพื่อง่ายในการจดจำในความจำระยะสั้น | ||
+ | |||
นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้ | นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้ | ||
Visibility of system status | Visibility of system status |
รุ่นแก้ไขเมื่อ 09:14, 24 มิถุนายน 2559
UX เป็นการออกแบบส่วนติดต่อกับผู้ใช้ ซึ่งควรมีลักษณะ ใช้ง่าย รวดเร็ว ไม่สับซ้อน UI จะเป็นส่วนประกอบของ UX คือ UI จะเป็นการสัมพัสกดปุ่มหรือรับค่า ส่วน UX จะเป็นการประมวลผล เก็บข้อมูล UXD (User Experience Desing) คือ UX จะเกี่ยวข้องกับความพึ่งพอใจของผู้ใช้, ความรู้สึก, บริการ
การวัดคุณภาพของ UX ที่ดี - การที่คนมาดาวน์โหลดแอพเรามากน้อยแค่ไหน - การที่มีผู้ใช้กลับมาใชงานแอพเราอยู่เรื่อยๆ - การที่ผู้ใช้ไม่ลบแอพขอเราทิ้ง - การขายแอพหรือไอเท็มภายในแอพเพิ่มขึ้น - ความผิดผลาดที่เกิดจากผ็ใช้ลดน้อยลง - ค่าใช้จ่ายในการดูแลลูกค้าลดน้อยลง - คะแนนและคอมเมนต์แย่ๆลดลง ขั้นตอนการพัฒนาผลิตภัณฑ์ของ UX 1. การวางแผนกลยุธ 2.การออกแบบโคร้งสร้างและสถาปัตกรรมของเนื้อหา 3.การสร้างแบบจำลองด้วย Mockup และ Wire frame 4.การสร้าง Flowcharts 5.การทดสอบและการปรับแต่ง
ปัญใจการ Desing มี 4 ปัจจัย
1. Branding สร้างแบรนด์ให้มีความเกี่ยวข้องกับเนื้อหา รูปภาพประกอบ
- เว็บให้อะไรที่ผู้ใช้ที่ทำให้ผู้ใช้จดจำได้
- สิ่งที่ผู้ใช้มองเห็นสัมพันธ์กับแบรนอย่างไร
- สื่อ Multi media สามารถเพิ่มประสบการณ์ผู้ใช้ได้
- เว็ปไซต์นั้นเพิ่มมูลค่าให้กับแบรนด์ หรือแค่มูลค่าเท่าเดิม
2. Functionnality เทคนิคต่างๆในการส่งเสริมการใช้งาน
3. Usability การทำให้ผู้ใช้รู้สึกถึงความง่ายในการใช้ โดยใช้ประสบการณ์ของผู้ใช้เป็นหลัก
4. Content การวัดทางโครงสร้างข้อมูล
- ปริมาณข้อมูลที่เพื่องพอ มีเมนูเพื่อไปยังเนื้อหาอื่นๆได้อย่างสดวก
- จัดการโครงสร้างเนื้อหาอย่างเป็นระเบียบ
- เนื้อหาต้องถูกต้องแม่นยำทันสมัย
- ศัพย์ที่ใช้ต้องอธิบายอย่างชัดเจน ไม่ลึกไม่กว้าง
ส่วนสำคัญอีกส่วนคือ ทำไมเราจึงควรรู้เรื่อง UX ในวีดีโอให้เหตุผลมา 4 ข้อ 1. เพราะบางทีเราอาจจะทำ UX อยู่แล้วก็ได้ เพราะ เราสนใจที่จะทำสินค้าให้ดีขึ้น เราคิดเรื่องนี้มาตลอดดังนั้นมันจึงเหมือนเราทำ UX อยู่แล้ว ทีนี้พอเรารู้จัก UX มากขึ้น รู้จัก Process ของมัน แนวคิดและวิธีการ เราจะทำมันได้ดีอย่างมีมีขีดจำกัด 2. การทำ User-centred เป็นการทำงานแบบมีขั้นมีตอน เพราะ เราต้องมีการทดสอบมีการตั้งสมติฐานนั้นคือมันเป็นวิทยาศาสตร์ มันสามารถอธิบายให้เพื่อนร่วมงานฟังได้ โดยไม่ต้องอาศัยความเชื่อ หรือไม่ต้องอ้างว่าคนอื่นทำเราเลยควรทำด้วย 3. มันไม่ยาก การออกแบบ UX ไม่ต้องอาศัยความรู้ทางเทคนิคมากมาย ไม่ต้องเรียนมาโดยตรง ส่วนมากเป็นสิ่งที่เรารู้อยู่แล้ว 4. มันสนุก การทำให้คนพึงพอใจกับงานของเรามันเป็นเรื่องสนุกและท้าทายอยู่แล้ว ยิ่งผลจากการทำจะทำให้เราได้ทั้งรายได้มากขึ้น คนใช้งานมากขึ้น ก็ยิ่งสนุกเข้าไปอีก
การเป็น UX จะต้องรู้เรื่องของ Presomas รู้เรื่องส่วนตัวของการใช้งานในแต่ละบุคคล User Reseanch ต้องวิจัยเป็น คือการวิจัยพฤติกรรมของแต่ละบุคคล Usability Testing คือการทดสอบว่าดีไหม อะไรแบบไหน หลังจากนั้นส่งมาที wireframes คือเป็นหน้าต่างของ prototype หลังจากนั้นจะให้ UI จัดการออกแบบ Layout ควรจะจัดวาง Layout แบบไหนในหน้าวินโดว์ ออกแบบภาพ visual desing และออกแบบ branding ให้เข้ากับ udd หรือเว็ปไซด์
การออกแบบ User Experience (UX)
1. เข้าใจว่าเราออกแบบให้ใครเป็นผู้ใช้งาน นักออกแบบต้องพยายามทำความเข้าใจในมุมของผู้ใช้ ใครคือกลุ่มเป้าหมาย? พวกเขามีพฤติกรรมอย่างไร? นักออกแบบ UX ส่วนใหญ่ใช้เวลามากในโลกออกไลน์และพวกเขาสามารถรับรู้ที่ดี (หรือไม่ดี)ประสบการณ์ของผู้ใช้เมื่อพวกเขาเห็นมัน ลองดูว่า สินค้าของคุณ ถ้าคุณเป็นผู้ใช้ จุดไหนคือประสบการณ์ที่ดี จุดไหนคือประสบการณ์ที่ไม่ดี ถ้ามีโอกาสคุณควรพูดคุย สัมภาษณ์กับผู้ใช้ว่ารู้สึกอย่างไรกับมันบ้าง เป็นต้น 2. ต้องออกแบบให้รองรับหน้าจอทุกขนาด (Screen Sizes) ในยุคที่การใช้งานอินเทอร์เน็ตบนมือถือพุ่ง สูงขึ้นมาก และนี่เป็นสิ่งสำคัญมากในการออกแบบเพื่อรองรับขนาดหน้าจอที่หลากหลาย โดยเราต้องเข้าใจก่อนว่า ข้อจำกัดของอุปกรณ์มือถือ และแท็บเล็ต จะมีผลต่อวิธีการที่คุณออกแบบการแสดงผล การเข้าถึงในเว็บไซต์ของคุณ ด้วยวิธีรูปแบบและลำดับชั้นของภาพที่แตกต่างกัน การออกแบบด้วยวิธีการไหนที่ยังคงให้ประสบการณ์การใช้งานที่ง่ายสำหรับผู้ ใช้? 3. ต้องสอดคล้อง ความสอดคล้อง เป็นหลักการสำคัญในการออกแบบ เราต้องพยายามสร้างความสอดคล้องกับพฤติกรรมของผู้ใช้ ในแต่ละพื้นที่ของการทำงานบนเว็บไซต์ของคุณนั้น ผู้ใช้ของคุณไม่จำเป็นต้องเริ่มต้นเรียนรู้วิธีการใหม่ในแต่ละหน้าที่ เปลี่ยนไป หากแต่ละหน้าสร้างประสบการณ์ที่ไม่ปะติดปะต่อกับผู้ใช้งาน จะสร้างความไม่สบายใจในการรับข้อมูลที่พวกเขากำลังมองหาอยู่ 4. การให้ลูกค้ามาเป็นอันดับแรก การสำรวจตรวจสอบผู้ใช้เป็นสิ่งแรกที่ สำคัณมากที่สุด และคุ้มค่าที่จะทำซ้ำๆ เพราะนั่นคือข้อมูลเชิงลึกที่มีคุณค่ามากเกี่ยวกับความต้องการของผู้ใช้และ ต้องใช้การสังเกตอยู่เสมอ การพูดคุยเกี่ยวกับผลิตภัณฑ์ของคุณ วิธีการวิจัย รวมถึงการสำรวจกลุ่มตัวอย่างทดสอบA / B การศึกษาการใช้งาน และการศึกษาในภาคสนามด้วย การออกแบบ UX ที่ไม่ดีสามารถทำให้สินค้าที่ดีและทันสมัยดูแย่ได้ ทุกอย่างเกิดจากรูปแบบการใช้ขนาดตัวอักษร ไปจนถึงสีของปุ่ม ซึ่งสามารถนำไปสู่ประสบการณ์การใช้งานที่จะสร้างความเข้าใจอย่างทั่วถึงของ ผู้ใช้งานและสิ่งที่พวกเขาต้องการ คุณจึงต้องสามารถสร้างมุมมองที่ดีในการมีส่วนร่วม หรือสร้างประสบการณ์การใช้งานทำให้เป็นมิตรและน่าจดจำได้ง่าย
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.” ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้
Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
-ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม -บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล มนุษย์เราย่อมมีความแตกต่างกัน -ความแตกต่างของสติปัญญาและความสามารถในการรับรู้ -ความหลากหลายทางเชื้อชาติและวัฒนธรรม -ผู้ใช้งานที่ไร้ความสามารถหรือพิการ -อายุของผู้ใช้งาน -การออกแบบสำหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความสนใจสูง -การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของระบบ
ข้อคำนึงดังกล่าวจะเห็นได้ว่า การออกแบบส่วนต่อประสานควรที่จะคำนึงถึงแทบทุกเรื่องไม่ว่าจะเป็นเพศ อายุ เชื้อชาติ ศาสนา ก็นำมาเป็นส่วนประกอบในการพิจารณาได้ทั้งสิ้นเช่น ในบางศาสนามีข้อต้องห้ามสำหรับการแสดงภาพสัตว์ สิ่งของบางชนิด, ผู้ใช้งานที่เป็นเด็กจะนิยมภาพที่มีสีสันฉูดฉาดมากกว่าผู้ใหญ่ สภาพแวดล้อมต่าง ๆ ในการใช้งานก็เป็นส่วนหนึ่งเช่น เมื่อเราจะออกแบบตู้โฆษณากลางแจ้งมีแสงมาก แต่เราออกแบบให้มีสีที่มีการตัดกัน(Contrast) น้อย จะทำให้ผู้ใช้งานมองเห็นข้อความที่เราสื่อไม่ชัดเจน แม้กระทั่งความแตกต่างเฉพาะบุคคลเช่นบางคนชอบอ่านมากกว่าฟัง บางคนชอบภาพเคลื่อนไหว มากกว่าภาพนิ่ง สิ่งเหล่านี้ล้วนเป็นตัวแปรในการออกแบบส่วนต่อประสานทั้งสิ้น
Principle หลักการในการออกแบบส่วนต่อประสาน
ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง เลือกแบบการมีปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้ (เม้าส์, พ้อยเตอร์)
Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
กฎ 8 ข้อสำหรับการออกแบบหน้าจอ Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ เป็นรูปแบบเดียวกัน ไม่ว่าจะเป็นสัญลักษณ์ สี ขนาดที่ใช้ควรจะเป็นชุดเดียวกัน Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้ เราอาจต้องหาข้อมูลผู้ใช้งานมาให้ครอบคลุมทั้งหมด แล้วเลือกการออกแบบที่ผู้ใช้งานส่วนใหญ่พอใจ Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์ ข้อมูลป้อนกลับจะเป็นตัวเร้าที่ดีสำหรับผู้ใช้งาน ให้มีความรู้สึกว่ากำลังได้ควบคุมและโต้ตอบกับระบบอยู่ Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และจุดสุดท้าย Prevent error มีการป้องกันความผิดพลาดจากผู้ใช้งาน เช่น เมื่อมีการคลิกเม้าส์ผิดที่ หรือป้อนข้อมูลผิด ระบบจะมีข้อความเตือนว่าผู้ใช้งานป้อนข้อมูลผิดพลาด จะช่วยลดความผิดพลาดของข้อมูลได้มาก Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขหากเกิดข้อผิดพลาด Support internal locus of control ระบบมีการจัดการการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไปให้มีความสัมพันธ์กัน Reduce short-term memory load ลดความยาวของเวลาที่นำเสนอเนื้อหาเพื่อง่ายในการจดจำในความจำระยะสั้น
นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้ Visibility of system status ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม Match between system and the real world ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่แปลกไปจากปรกติ User control and freedom ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ เมื่อผู้ใช้งานทำผิด สนับสนุนการ Undo และ Redo Consistency and standards มีความสม่ำเสมอและเป็นมาตรฐานไปทุก ๆ หน้าจอของการออกแบบ ผู้ใช้งานต้องไม่สับสนในเรื่องการจัดวางหรือขนาดของตัวหนังสือ ตัวระบบเองก็ควรจะมีชุดป้อนคำสั่งต่าง ๆที่เป็นมาตรฐาน Error prevention ระบบควรจัดให้มีคำเตือนให้ระวังความผิดพลาดซึ่งเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ระบบควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้ เช่น ท่านต้องการแก้ไขหรือไม่ ให้ตอบ แก้ไข หรือ ไม่แก้ไข Recognition rather than recall พยายามทำให้ผู้ใช้งานต้องใช้ความจำในการจดจำคำสั่งต่างๆในระบบให้น้อยที่สุดโดยการทำให้ส่วนประกอบหน้าจอ การออกคำสั่งปฏิบัติและส่วนตัวเลือกมีความชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย Flexibility and efficiency of use มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผลในการทำงาน Aesthetic and minimalist design การนำเสนอเนื้อหาต้องไม่รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้อย่างน้อยๆ เพื่อจะได้เน้นเนื้อหาที่เราต้องการสื่อสารอย่างเต็มที่ Help users recognize, diagnose, and recover from errors ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ดโปรแกรมที่เข้าใจยาก ระบุปัญหาและบอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เองHelp and documentation ถึงแม้จะคาดหวังไว้ว่าระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่อย่างไรก็ตามคู่มือก็ยังมีความจำเป็น ในคู่มือต้องมีการแบ่งสารบัญข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับอย่างเป็นระบบ และไม่หนาจนเกินไป