30 ก.ย. 2021 เวลา 13:06 • ศิลปะ & ออกแบบ
ในยุคที่ UX/UI ถูกพูดถึงและเป็นที่ต้องการเป็นอย่างมาก หลายๆ คนพยายามที่จะเรียนรู้และทำความรู้จักเครื่องมือและหลักการต่างๆ เพื่อผันตัวมาเปลี่ยนสายงานมาเป็น UX/UI Designer กันมากขึ้น บางคนอาจจะเคยได้ยินคำศัพท์บางคำมาแล้วบ้าง วันนี้ Skooldio จะพาทุกคนไปทำความรู้จักกับศัพท์ที่ใช้บ่อยในวงการ UX/UI designer ให้มากยิ่งขึ้น
คือกระบวนการในการคิดวิเคราะห์ เพื่อเข้าใจปัญหา (pain point) ของลูกค้า รวมไปถึงการคิดแก้ไขปัญหาและพัฒนาผลิตภัณฑ์ เพื่อตอบสนองความต้องการของผู้ใช้งานให้ตรงจุดมากที่สุด ซึ่งมีองค์ประกอบหลัก 5 ขั้นตอน โดยเริ่มจาก “Empathize” คือการเข้าใจผู้ใช้งาน อะไรคือปัญหาที่มีอยู่ อาจจะใช้วิธีการสัมภาษณ์ เพื่อเก็บ insight ของผู้ใช้งาน
หลังจากนั้นจะเข้าสู่กระบวนการ “Define” โดยคัดกรองวิเคราะห์ปัญหาทั้งหมด เพื่อให้ได้ปัญหาที่ชัดเจนยิ่งขึ้น เพื่อนำไปใช้ในขั้นตอน “Ideate” หรือระดมความคิด หาวิธีการแก้ไขปัญหาให้ได้มากที่สุด หลังจากที่เราได้แนวทางในการแก้ไขปัญหาแล้ว ขั้นตอนต่อไปคือการทำ “Prototype” และ “Test” ในขั้นตอนนี้จะทำแนวทางการแก้ไข มาทำเป็นผลิตภัณฑ์จำลอง เพื่อใช้ในการทดสอบกับผู้ใช้งานจริง และนำข้อเสนอแนะและข้อบกพร่อง ต่างๆมาปรับเปลี่ยน เพื่อให้ได้ผลิตภัณฑ์ที่ตอบโจทย์ผู้ใช้งานให้ได้มากที่สุด
.
เรียกได้ว่า Design Thinking หรือ Human Centered Design นั้นเกี่ยวข้องกับการทำงาน UX, UI โดยตรง
Product Market Fit ในนิยามของ Marc Andreessen คือจุดที่เรามีผลิตภัณฑ์ที่ดีมากๆ อยู่ในตลาดที่ใหญ่มากพอ ซึ่งจะแบ่งเป็น 2 พาร์ทหลักๆ ได้แก่ Market และ Product ในส่วนของ Market หรือ Problem space คือการกำหนดกลุ่มเป้าหมายของลูกค้า การเข้าใจลูกค้าและ pain point ต่างๆ เพื่อจะได้รู้ความต้องการของลูกค้าที่ยังไม่ถูกเติมเต็ม (Unmet need)
.
อีกส่วนหนึ่งคือ Product หรือ เรียกว่า Solution space คือการเข้าใจตัวเองหรือบริษัท ทั้งเรื่องเป้าหมาย จุดแข็งและความถนัด (Value proposition) แล้วจึงสะท้อนกลับมาว่าเราสามารถตอบโจทย์ลูกค้าได้ด้วยอะไรบ้าง ซึ่ง Product Market Fit คือการนำ 2 ส่วนนี้มาเชื่อมเข้าหากันนั่นเอง
หลายๆคนอาจเคยเข้าใจผิดว่า Usability กับ User experience คือสิ่งๆเดียวกัน แต่จริงๆแล้ว Usability เป็นส่วนหนึ่งของ User experience นั่นเอง โดย Usability เป็นตัวบ่งชี้ว่าผลิตภัณฑ์นั้นๆ มีความสะดวก และใช้งานง่ายมากน้อยแค่ไหน โดยส่งผลตรงกับความรู้สึกของผู้ใช้งานต่อผลิตภัณฑ์ รวมไปถึงการตัดสินใจว่าจะกลับมาใช้ผลิตภัณฑ์นี้อีกครั้งหรือไม่
.
โดยการที่จะมี Usability ที่ดี ต้องมี 5 องค์ประกอบหลัก ได้แก่
- Effectiveness : ความสามารถในการรู้ว่าควรใช้งานอย่างไรและมีความแม่นยำ
- Efficiency : มีการใช้งานง่ายและรวดเร็ว
- Engagement : ผู้ใช้งานมีประสบการณ์ทีดีต่อหน้าเว็บไซต์
- Error Tolerance : มีข้อผิดพลาด หรือ error ให้น้อยที่สุด หรือถ้าหากผู้ใช้งานเจอข้อผิดพลาด ก็สามารถแก้ไขเองได้ง่ายและรวดเร็ว
- Easy to learn : ทำให้เกิดการเรียนรู้ได้ง่าย และง่ายยิ่งขึ้นเมื่อผู้ใช้งานได้กลับมาใช้อีกครั้งในอนาคต
Front-end หรือที่นิยมเรียกกันว่า “หน้าบ้าน” เป็นส่วนที่ติดต่อกับผู้ใช้งานเป็นหลัก เช่น หน้าเว็บไซต์ รวมไปถึง เนื้อหาต่างๆ รูปภาพ ลิงก์ และทุกส่วนที่ผู้ใช้งานสามารถเห็นได้ โดย front-end มีความสำคัญในการดึงดูดผู้ใช้งาน หลักๆจะดูแลทั้งความสวยงาม และการทำให้ผู้ใช้งานเข้าใจง่าย คนที่ทำงานเกี่ยวข้องด้านนี้ ได้แก่ Graphic Designer, UI Designer, Web Designer, Web Developer
Back-end หรือที่รู้จักกันในอีกชื่อว่า “หลังบ้าน” โดยมีหน้าที่หลักๆคือ การดูระบบหลังบ้านของเว็บไซต์ เช่น การเขียนโค้ด โครงสร้างเว็บไซต์ และ การจัดการ database การเก็บข้อมูลต่างๆ ของเว็บไซต์ทั้งหมด เป็นส่วนที่ต้องให้ความสำคัญมากในการรักษาความปลอดภัยของข้อมูลต่างๆ ที่เกียวข้อง เช่น username password ซึ่ง Back-end กับ Front-end จะทำงานร่วมกัน หาก Front-end มีปัญหา เช่น เกิดการแสดงผลช้าหรือผิดพลาด Back-end จะเข้ามาช่วยแก้ปัญหาให้นั่นเอง
คือภาพร่างของหน้าตาเว็บไซต์และแอปพลิเคชันที่สร้างขึ้น เพื่อใช้ในการอธิบายองค์ประกอบ และรายละเอียดในแต่ละหน้านั้นๆ เช่น รูปภาพ ไอคอน ระยะห่างของปุ่มต่างๆ ขนาดของหน้าเว็บไซต์ เป็นต้น โดยการทำ Wireframe จะถูกใช้ในการมองภาพรวมและองค์ประกอบทุกอย่าง ก่อนเข้าสู่กระบวนการต่อไป หากมีข้อบกพร่องหรือมีการเปลี่ยนแปลง ก็สามารถแก้ไขได้อย่างรวดเร็ว โดยการทำ Wireframe สามารถ ร่างได้ทั้งบนกระดาษ หรือออกแบบบนคอมพิวเตอร์
โดยหลักๆ จะแบ่งออกเป็น 3 ประเภท
.
- Low-fidelity wireframes คือ การออกแบบให้เห็นภาพรวมคร่าวๆ มีองค์ประกอบต่างๆ โดยเน้นการกำหนดลำดับการใช้ของผู้ใช้งาน (the user flow) โดยยังไม่ต้องคำนึกถึง ขนาดหรือสเกลแบบละเอียด
- Mid-fidelity wireframes คือ การลงรายละเอียดที่มากขึ้น มีการวาง layout ที่ชัดเจน ฟ้อนและองค์ประกอบละเอียดขึ้น เพื่อบ่งบอก feature ต่างๆในหน้าแอปพลิเคชันหรือเว็บไซต์
- High-fidelity wireframes คือ การใส่รายละเอียดทุกอย่างที่มี รวมไปถึงการใช้รูปภาพ ข้อความ และสีสัน ให้ใกล้เคียงกับของจริงมากที่สุด
ก่อนที่จะให้ developer เขียนโปรแกรมหรือโค้ดในการทำเว็บไซต์และแอปพลิเคชัน ส่วนมากจะมีการทำแบบจำลองการใช้งานหน้าเว็บไซต์และแอปพลิเคชัน หรือการทำ Prototype ขึ้นมา เพื่อทดสอบการใช้งานโดยให้ผู้ใช้งานลองใช้จริงๆ (Usability Testing) และนำ feedback และปัญหาที่พบมาแก้ไขและปรับปรุง ก่อนจะเข้าสู่กระบวนการต่อไป โดย Prototype ที่ใช้ในการทดสอบนี้ ควรมีฟังชั่นการใช้งานที่เหมือนจริงมากที่สุด เช่น สามารถคลิ๊กเพื่อเชื่อมจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้
เป็นหนึ่งในกระบวนการทดสอบผลิตภัณฑ์หรือแม้กระทั่งการกระทำต่างๆ บนเว็บไซต์ เช่น ทดสอบการเรียงลำดับเนื้อหา, ทดสอบการใช้คำบนหน้าเว็บไซต์, ทดสอบ feature ต่างๆ เป็นต้น โดยจะทำการสร้างผลิตภัณฑ์หรือหน้าตาเว็บไซต์ขึ้นมา 2 แบบขึ้นไป แล้วทดลองให้กลุ่มคนที่มีความชอบคล้ายกัน ได้ทดลองใช้ทั้ง 2 แบบ เพื่อดูผลตอบรับว่าแบบไหนที่ผู้ใช้งานชอบมากที่สุด หรือเพื่อดูว่าแบบไหนช่วยให้เกิด conversion สูงที่สุด ซึ่งแบบที่มีประสิทธิภาพดีกว่าจะนำไปพัฒนาต่อ ส่วนอีกแบบจะหยุดการใช้งานทันที การทำ A/B Testing ยังช่วยให้ประหยัดเวลาและช่วยให้บริษัทได้ใช้งบประมาณได้อย่างมีประสิทธิภาพมากขึ้น
Grid system คือการทำเส้นแนวตั้งและแนวนอนมารวมกันเป็นโครงสร้าง โดยถูกใช้ในการจัดองค์ประกอบงานออกแบบ รวมไปถึงการดีไซน์เว็ปไซต์และแอปพลิเคชัน ให้มีความสมดุลของ layout (Balance) และช่วยให้ User interface มีความเป็นระบบระเบียบต่อเนื่องกัน (Consistency) นอกจากนี้ยังช่วยในการจัดลำดับความสำคัญขององค์ประกอบของเว็ปไซต์และแอปพลิเคชัน เช่นการปรับขนาดตามความสำคัญ
เป็นหนึ่งในเครื่องมือที่ช่วยให้เราออกแบบและวางแผนระบบโครงสร้างของเว็บไซต์ได้ดียิ่งขึ้น โดยให้ผู้ใช้งาน เรียงการ์ด ซึ่งจะประกอบด้วยคำที่เราแสดงในระบบเว็บไซต์หรือแอปพลิเคชัน แล้วดูว่าผู้ใช้งานจัดเรียงได้เหมือนกับที่เราคาดคิดไว้หรือไม่ คำที่เขียนไว้เข้าใจยากสำหรับผู้ใช้งานไหม และการเรียงระบบซับซ้อนเกินไปหรือเปล่า โดยวิธีการนี้ จะช่วยให้เราวางแผนระบบ และพัฒนา User Experience ให้ดียิ่งขึ้น
เป็นหนึ่งเครื่องมือในการทำ User Research ที่เป็นการกำหนดบุคคลสมมติซึ่งเป็นผู้ใช้ที่คนในทีมและองค์กรเห็นภาพตรงกัน โดยประกอบด้วยข้อมูลพื้นฐาน เช่น ชื่อ, อายุ, รายได้, อาชีพ, ความต้องการ, เป้าหมาย ที่เกี่ยวข้องกับ product เรา ซึ่งสามารถทำได้ด้วยการเก็บข้อมูล การสัมภาษณ์ เพื่อที่จะเข้าใจปัญหาและความต้องการของผู้ใช้งาน
มีแค่ผลิตภัณฑ์ที่ดี อาจไม่เพียงพอในยุคปัจจุบัน ดังนั้นต้องมีการบริการที่ดีด้วยเพื่อเพิ่มประสบการณ์ที่ดีให้แก่ลูกค้า โดยใช้กระบวนการออกแบบบริการ หรือที่รู้จักกันดีในชื่อ Service Design ซึ่งคือการออกแบบโดยคำนึกถึงประสบการณ์ของผู้ใช้บริการ ผู้ให้บริการ และทุกคนที่เกี่ยวข้องกับบริการนั้นๆ โดยมีแนวคิดในการออกแบบมาจาก Design Thinking นั่นเอง ซึ่งมีเป้าหมายเพื่อสร้างระบบการทำงานที่มีประสิทธิภาพ และมีความต่อเนื่องในกระบวนการทำงานให้ได้มากที่สุด
หลายคนอาจเคยเข้าเว็บไซต์ในมือถือ แต่ต้องคอยต้องซูมเข้าซูมออก เลื่อนซ้ายเลื่อนขวา เพราะขนาดความกว้างของเว็บไซต์นั้นใหญ่เกินไป นั้นเป็นเพราะว่าเว็บไซต์นั้นไม่ใช่ “Responsive Web Design” นั่นเอง ซึ่งคือเทคนิคในการออกแบบเว็บไซต์แบบใหม่ โดยจะมีการปรับเปลี่ยนขนาดของเว็บไซต์ ให้เหมาะสบกับการแสดงผลบนหน้าจอขนาดต่างๆ และความละเอียดของหน้าจอในอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้น เพื่อให้การแสดงผลบนหน้าจอที่แตกต่างกันมีประสิทธิภาพมากขึ้น
คือการช่วยกระตุ้นความรู้สึกและการตัดสินใจให้ผู้ที่เข้ามาในเว็บไซต์ได้ take action บางอย่าง โดยส่วนมากจะอยู่ในรูปของ ปุ่มต่างๆ กล่องข้อความ banner หรือการกรอกฟอร์ม เช่น สั่งซื้อเลย ดาวน์โหลดเลย ลงทะเบียนเข้าร่วม กดเพื่อดูรายละเอียด เป็นต้น โดยมีเป้าหมายในการปิดการขาย เพิ่ม engagement เก็บ lead รวมไปถึงเพิ่มการ subscription และจุดประสงค์อื่นๆ ขึ้นอยู่กับประเภทของเว็บไซต์
🔥พบกับ UX UI Bootcamp รุ่น 2! ก้าวแรกพร้อมสู่สายอาชีพ UX/UI Designer อาชีพที่ร้อนแรงมากในปัจจุบัน
.
เปิดรับสมัครแล้ววันนี้ 👉 https://to.skooldio.com/dHJxfAViYjb
.
ในหลักสูตร 6 สัปดาห์สุดเข้มข้น ที่จะทำให้คุณเข้าใจการทำ User Experience และ User Interface แบบครบทุกหัวข้อที่สำคัญกับผู้เชี่ยวชาญระดับประเทศ
.
🧐 ไม่ว่าคุณจะเป็น
- ผู้ที่กำลังสนใจ พัฒนาทักษะ หรือเปลี่ยนสายงานมาเป็น UX UI
- หรือองค์กรที่กำลังให้ความสำคัญ เพิ่มประสิทธิภาพของงานด้านนี้
หลักสูตรนี้จะทำให้คุณเข้าใจครบทุกด้าน UX UI พร้อมก้าวสู่การเป็น UX/UI Designer
.
✍️คุณจะได้เรียนรู้กว่า 40 หัวข้อและเครื่องมือด้าน UX UI
🔸 User & Business: เริ่มต้นด้วยการเข้าใจปัญหาที่แท้จริงของ User และ Business
🔸 Reframe the Problems: เจาะลึกหา Pain point ด้วยเครื่องมือต่างๆ
🔸 Ideation to Solutions: สร้างสรรค์ Solution ให้ตรงใจ User และตอบโจทย์ธุรกิจ
🔸 UI Interaction Design: เริ่มทำ User Interface Design ด้วยหลักการออกแบบที่เหมาะสม
🔸 Prototyping & Design System: สร้างชิ้นงานต้นแบบเสมือนจริงและทำ Design System
🔸 Practical Design: เรียนรู้ภาพรวมสุดท้าย ของการปั้นชิ้นงานให้ออกมาสมบูรณ์พร้อมส่งต่อให้กับทีม Developer และพร้อมออกไปให้ผู้ใช้งาน
.
เรียนรู้แบบติดสปีด พร้อมสู่การเป็น UX/UI Designer
✅ เข้มข้นอัดแน่นกว่า 60 ชั่วโมง กว่า 40 หัวข้อและเครื่องมือการทำ UX UI
✅ ลงมือทำ Project ตั้งแต่ต้นจนจบ
✅ ดูแลพร้อมคำแนะนำจากผู้สอนและทีมงานตลอดระยะเวลาหลักสูตร
✅ เรียนรูปแบบออนไลน์ อยู่ที่ไหนก็เรียนได้พร้อมกัน
.
ดูรายละเอียดเพิ่มเติมได้ที่ 👉 https://to.skooldio.com/dHJxfAViYjb
โฆษณา