UX / UI Design


เมื่อวันที่ 26 – 27 พฤศจิกายน พ.ศ. 2562 ผู้เขียนได้มีโอกาสเข้าร่วมอบรมเชิงปฏิบัติการเครือข่ายผู้ดูแลเว็บไซต์ มหาวิทยาลัยมหิดล ครั้งที่ 1/2563 หลักสูตร “UX / UI Design” จัดขึ้นโดยกองเทคโนโลยีสารสนเทศ สำนักงานอธิการบดี มหาวิทยาลัยมหิดล ณ ห้อง 101 ประชาสังคมอุดมพัฒน์ สถาบันวิจัยประชากรและสังคม มหาวิทยาลัยมหิดล ศาลายา

วิทยากรการอบรมเชิงปฏิบัติการในครั้งนี้คือคุณกฤษฎา เฉลิมสุข ผู้เชี่ยวชาญ ISP ด้านขั้นตอนและกระบวนการพัฒนา Software, นวัตกรรมสำหรับ Startup การอบรมในครั้งนี้เน้นพัฒนากระบวนการการคิด จากการลงมือทำ เพื่อมาประยุกต์ใช้งานด้านการพัฒนาเว็บไซต์ได้อย่างมืออาชีพ ผู้เขียนขอแชร์หัวข้อที่น่าสนใจ ดังต่อไปนี้

ความหมายของ UX / UI

User Experience (UX) คือ ประสบการณ์ที่ผู้ใช้ได้รับจากผลิตภัณฑ์

ที่มา : A Wide Perspective for Designing User Experience (Ecem Keskin, 2015)


User Interface (UI) คือ สื่อกลางที่ผู้ใช้ตอบโต้ผ่านระบบผ่านประสาทสัมผัสทั้ง 5 (รูป รส กลิ่น เสียง สัมผัส)

ที่มา : https://www.sparksinteractive.co.nz/services

กระบวนการ 5 ขั้นตอนในการออกแบบผลิตภัณฑ์ที่มีคุณภาพตามหลักการพัฒนา UX/UI

ที่มา : User Experience for Product Designers (Paul Hershey, 2015)

สำหรับกระบวนการ 5 ขั้นตอนในการออกแบบผลิตภัณฑ์ที่มีคุณภาพตามหลักการพัฒนา UX / UI ประกอบไปด้วยขั้นตอนดังต่อไปนี้

1. Preplanning

ขั้นตอนแรกคือ การวางแผน เป็นขั้นตอนที่ผู้ออกแบบจะระบุว่าผู้ใช้คือใครและวิเคราะห์ปัญหาที่ผู้ใช้อาจเผชิญ เพื่อนำมาแก้ไขหรือออกแบบแอพพลิเคชั่นใหม่ให้โดนใจผู้ใช้มากที่สุด แบ่งออกเป็นสามส่วน ได้แก่ การวิเคราะห์ข้อมูล (data analysis), การเขียนความต้องการของผู้ใช้ (user stories), และศึกษาพฤติกรรมของผู้ใช้ (user flows)

2. Exploration

ขั้นตอนที่สองคือ การเริ่มสำรวจว่าผู้ใช้จะโต้ตอบกับแอพอย่างไร โดยการร่างภาพ (sketching), การวาดรายละเอียด (wireframing), ใส่ข้อมูลสถาปัตยกรรม (information architecture), และการสร้างต้นแบบ (prototyping) ขั้นตอนนี้จะช่วยให้ผู้ออกแบบเข้าใจว่าแต่ละฟีเจอร์จะตอบสนองอย่างไรเมื่อผู้ใช้โต้ตอบกับแอพ

3. Design

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

4. Quality Assurance (QA)

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

5. Feedback

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

Process ของการ Design App

ที่มา : What Is the Difference Between Wireframe, Mockup and Prototype? (matt warcholinski)

ความแตกต่างของกระบวนการออกแบบแอพพิลเคชั่น ของแต่ละขั้นตอน sketch, wireframe, mockup, และ prototype มีรายละเอียดดังต่อไปนี้

Sketch

วาดด้วยมือ ไม่ได้เป็นงานที่เรียบร้อย เป็นการจดไอเดียเพื่อใช้ในอนาคต

Wireframe

ภาพร่างที่บอกว่าหน้าตาของโปรดักส์จะเป็น “ประมาณ” ไหน “พิมพ์เขียว” ของโปรดักส์

Mockup

เน้น “Style” , “Color”, “Right Content” Click ไม่ได้ ช่วยให้เห็น Visual ทั้งหมด และสามารถนำไปทดสอบ เพื่อกลับมาปรับแก้

Prototype

คล้ายๆ Mockup แต่ทำเพื่อใช้ในการนำเสนอผู้ใช้งาน เพื่อให้เหมือนเป็น Product จริงมากที่สุด เหมือนเป็น Final Product แต่ก็ไม่ใช่ Final Product


Mahidol University Library and Knowledge Center @ 2019