พื้นฐาน UX Design ที่สำคัญ สรุปครบทุกหัวข้อจากคอร์สที่ออสเตรเลีย

UX Design ยังคงเป็นศาสตร์ที่น่าสนใจสำหรับคนที่ทำงานสาย Tech นะครับ โดยเมื่อวานแอดมินได้มีโอกาสไปนั่งเรียนคอร์สฟรีสั้น ๆ ในหัวข้อของ Introduction to UX ที่ทีม General Assembly จัดขึ้นมาครับ ซึ่งได้ประโยชน์มาก และเห็นว่าเป็นเรื่องที่คนที่อยากเป็นเว็บดีไซเนอร์ หรืออยากเป็นนักออกแบบสาย UX ควรจะต้องรู้ก่อนกระโดดเข้ามาในโลกสายเทคโนโลยีนี้ ก็เลยเอามาเขียนบทความแชร์กันครับ

เนื้อหาบางส่วน (หรือหลาย ๆ ส่วน) ค่อนข้างคล้ายกับ บทความ Intro to UX จากงานของพี่อิง แต่อันนี้จะมองในภาพกว้างกว่าครับ ซึ่งถ้าใครอยากได้แบบเจาะลึก UX แนะนำให้อ่านบทความจากงานพี่อิง (อดีต UX Designer จาก Amazon.com ที่อเมริกา) กันเลย แต่ถ้าคนที่อยากรู้ว่าตลาดงานสายดีไซเนอร์มีทางเลือกอะไรบ้าง แนะนำให้อ่านบทความนี้ครับ

UX (User Experience) Design คืออะไร?

ในคลาสนี้เค้าให้คำจำกัดความสั้น ๆ (เหรอ) ว่า:

User Experience Design เป็นกระบวนการออกแบบที่สร้างความเปลี่ยนแปลงเชิงบวกให้กับชีวิตของผู้ใช้ (User) ซึ่งดูแลในทุก ๆ ด้านของการปฏิสัมพันธ์ระหว่างผู้ใช้กับองค์กรและสินค้าหรือบริการขององค์กร

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

ซึ่งฟังดูก็จะเหมือนว่างานของ UX Designer ต้องทำหลายอย่างมากเลย ไม่ว่าจะเป็น:

• การออกแบบให้สวยงาม (Visual Design)
• การวางแผนดีไซน์ (Strategy & Planning)
• การวิเคราะห์ลูกค้า (User Research, Customer Journey, Persona)
• การทำให้เว็บไซต์เหมาะสมกับผู้พิการ (Accessility)
• การจัดเรียงข้อมูลให้เหมาะสม (Information Architecture)
• การเลือกใช้เนื้อหาที่เหมาะสม (Content Strategy, Copywriting)
• การทดสอบกับลูกค้าจริง (Usability Testing, Interview)
• ฯลฯ

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

3 หัวใจหลักของ UX Design: User Research, Interaction Design, และ Visual Design

ในการใช้ UX เพื่อออกแบบ Digital Product เราสามารถจับกลุ่มสิ่งที่ต้องทำออกมาได้เป็น 3 เรื่องใหญ่ ๆ ดังนี้ครับ:

1. User Research (UXR)

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

ผู้เชี่ยวชาญในสายนี้เรามักจะเรียกว่าทำงานเป็น UX Research ซึ่งในสายนี้เค้าบอกว่าคนที่ถนัดด้านจิตวิทยา (Psychology) เข้ามาทำงานในสาย Tech ส่วนนี้เยอะมาก

2. Interaction Design (ID)

งานส่วนนี้เป็นการนำไอเดียมาลองออกแบบจริงเพื่อทดสอบด้านความง่ายในการใช้งาน (Usability) ของสิ่งที่เราต้องการออกแบบ ซึ่งงานส่วนนี้ก็จะเน้นทำในส่วนของ Wireframe เพื่อลองวาง Element ต่าง ๆ แบบขาวดำลงบนพื้นที่หน้าจอที่มี และออกแบบ Flow การเชื่อมกันของส่วนต่าง ๆ ในเว็บให้ออกมาลื่นที่สุด

สำหรับท่านที่สนใจศึกษาเรื่อง Wireframe เพิ่มเติม และหาเครื่องมือสำหรับทำ Wireframe สามารถอ่านได้ในบทความ Wireframe คืออะไร? ทำไมดีไซเนอร์ต้องรู้ พร้อม Tool + วิธีทำ เลยครับ

3. Visual & Interface Design (VsD)

งานส่วนนี้จะเป็นงานที่คนนึกออกบ่อยที่สุดเวลาพูดถึงการออกแบบ นั่นก็คือเรื่องของความสวยงาม (Look & Feel) ไม่ว่าจะเป็นการลงสี, ใส่ตัวหนังสือ, อนิเมชั่น, โครงเว็บไซต์, กราฟฟิกประกอบต่าง ๆ เพื่อให้เข้ากับแบรนด์ หรือที่เราเรียกกันว่า UI (User Interface) Design นั่นเอง

ป.ล. แอดมินคิดว่าที่ General Assembly เค้ามอง UX & UI เป็นโปรเซสใหญ่ ๆ เดียวกันไปเลยครับ เลยอธิบายออกมาเป็นแบบนี้ ซึ่งบางแห่งก็มอง UX กับ UI เป็นงานท่ีแยกกันครับ อันนี้ก็ไม่มีแบบผิดนะครับ สุดท้ายมันก็คืองานที่ต้องทำต่อกันอยู่ดีครับ

UX Design คือการทำงานเป็นขั้นตอน ไม่ใช่ศิลปะ

ผู้สอนในคลาสนี้บอกไว้ว่า:

UX Design is a Process, not Art

ซึ่งการทำ UX Design จนจบกระบวนการ เราสามารถแบ่งได้เป็น 5 ขั้นตอน ดังนี้:

1. Research and Planning

ขั้นแรกเราต้องออกแบบ User Persona (ลักษณะนิสัยของลูกค้า) ขึ้นมาก่อน โดยเค้าทำการสัมภาษณ์ลูกค้าหลาย ๆ คน แล้วลองจับกลุ่มคนที่สัมภาษณ์ดูว่าแบ่งได้อย่างไรบ้าง ใช้การแบ่งตามอายุ, นิสัย, พื้นฐานทางบ้าน, อาชีพ ฯลฯ

2. Sketching

ออกแบบ Flow – พอได้ Persona มาแล้ว ก็ได้เวลาออกแบบ Flow (หรือ User Journey) ว่าสิ่งที่เราต้องการออกแบบจะมีหน้าไหน เชื่อมกันอย่างไรบ้าง เช่น เมื่อ User ใหม่เปิดแอพมาก็จะเจอกับ Splash Screen > Create Account > Product Tour เป็นต้น ซึ่งพอเราลองวาด Flow ออกมาแล้วก็จะเห็นได้ง่ายขึ้นว่าเราขาดอะไรมั้ย หรือมีส่วนไหนที่เกินความจำเป็นมั้ย

ออกแบบ Wireframe – พอได้ Flow เราก็เอามาวาดเป็น Wireframe ขาว-ดำกันต่อ โดยเค้าแนะนำว่าสิ่งที่ควรทำ คือ

• โฟกัสที่สิ่งที่ผู้่ใช้ต้องการทำในขณะนั้น
• ออกแบบให้ช่วยผู้ใช้ตัดสินใจ
• ใช้ Pattern การออกแบบที่ใช้กันเป็นสากล
• ทำส่วนที่ง่ายที่สุดก่อน ส่วนที่ยากไว้ท้ายสุด

ขั้นตอนนี้เราสามารถวาดในกระดาษก่อนได้เลย หรือถ้าอยากได้เครื่องมือง่าย ๆ เค้าก็แนะนำ Balsamiq กับ Omnigraffle

3. Prototyping

หลังจากเราได้ Wireframe ขาวดำมาแล้ว เราก็สามารถนำมาลงสี (Visual Design) ได้เลยครับ โดยโปรแกรมที่เค้าแนะนำก็คือ Sketch นั่นเอง (สำหรับคนที่อยากรู้จัก Sketch มากขึ้น หรือใช้อยู่แล้วอยากคุยกับคนที่ใช้อยู่ มาร่วมกลุ่ม Facebook – Sketch Users Thailand กันเลยครับ) เค้าบอกว่าข้อดี คือ เราสามารถส่งงานต่อให้โปรแกรมเมอร์ที่ไม่ได้ใช้แมคผ่านโปรแกรมที่คู่กับ Sketch ชื่อ Zeplin ได้ง่ายมาก

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

ในคลาสเค้าก็มีแจกไฟล์ดีไซน์แต่ละหน้ามาให้เราลองลากไปวางใน Invision เพื่อสร้าง Prototype เองด้วยครับ สามารถใช้งานได้ง่ายมาก ๆ สำหรับคนที่อยากทดลองใช้ สามารถสมัคร Account ฟรีเพื่อใช้ได้ 1 โปรเจคครับ

4. Testing and Refining

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

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

ส่วนนี้ในคลาสไม่ได้พูดถึงมาก เนื่องจากเวลาหมดแล้วพอจบ Invision Workshop

5. Launching

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

สรุปจากคอร์ส Intro to UX ของ General Assembly

ในการออกแบบ Digital Product จะมีงานด้านดีไซน์ 3 ส่วนดังนี้

1. User Research
2. Interaction Design
3. Visual Design

ลองดูว่าเราอยากทำงานด้านไหนมากกว่ากันครับ ปกติเบอร์ 1 กับ 2 จะพ่วงมาในตำแหน่งที่เรียกว่า UX Designer อยู่แล้ว ส่วนเบอร์ 3 จะอยู่ในตำแหน่งที่เรียกว่า UI Designer ครับ

ซึ่งขั้นตอนในการออกแบบ UX ตั้งแต่ต้นจนจบ มี 5 ขั้นตอนดังนี้

1. Research & Planning
2. Sketching
3. Prototyping
4. Testing & Refining
5. Launching

ส่วนที่แอดมินชอบที่สุดในคอร์สสั้น 2 ชั่วโมงอันนี้ก็คือส่วนของ Invision Workshop ครับ ซึ่ง Invision เป็นเครื่องมือที่แอดมินใช้มานานแล้ว (แต่ใช้ในฝั่งคนคอมเม้นท์มากกว่าคนทำ Prototype) วันนี้ได้มาลองใช้จริงในฝั่งคนทำ Prototype บ้าง ก็พบว่าเครื่องมือเค้าเตรียมไว้ดีมาก ๆ ครับ แถมทำตัวสอนใช้ครั้งแรกได้ดีมาก เรียกได้ว่าคนที่ไม่เคยใช้เข้าไปครั้งแรกก็ใช้เป็นแน่นอน อยากให้ทุกคนได้เข้าไปลองดูกันครับ

ในอนาคตถ้าได้ไปงานที่น่าสนใจแบบนี้อีกจะเอามาเล่าให้ฟังกันอีกครับ :) บางทีเนื้อหาไม่ยาวมากแอดมินก็จะเขียนแชร์ไว้ใน Facebook Page ของ Designil ครับผม เชิญมาติดตาม และพูดคุยแลกเปลี่ยนความรู้กันได้นะครับ

สำหรับใครที่ชื่นชอบบทความทางด้าน UX ผมขอแนะนำบทความใหม่ด้านล่างนี้นะครับ

เรียน UX จากบทความ

สอน UX Design สรุปครบทุกหัวข้อจากคอร์สระยะยาวที่ออสเตรเลีย Day1
สอน UX Design สรุปครบทุกหัวข้อจากคอร์สระยะยาวที่ออสเตรเลีย Day2
7 ข้อที่ไม่ควรทำ สำหรับ UX Designer
Card Sorting คือ ? สอนใช้เครื่องมือทำ UX ยอดนิยม
4 หัวข้อต้องเตรียมพร้อม ก่อนยกทีมออกไปทำ UX user interview