iUXUI Journey VII — Basic UX Design
ก่อนหน้านี้ บทความในซีรี่ย์นี้จะเป็น UI ซะเยอะ มาเริ่มฝั่ง UX กันบ้าง (ใครสับสนว่า UX คืออะไร UI คืออะไร บทความนี้ขอข้ามไปนะครับ)
UX Design Main Key
I. User Research (UXR)
คือการทำวิจัยเกี่ยวกับผู้ใช้งานของผลิตภัณฑ์ของ (สังเกตว่าใช้คำว่า ผลิตภัณฑ์ เพราะมันไม่ได้จำกัดแค่การพัฒนาซอฟแวร์) ว่าผู้ใช้ต้องการอะไร เขามีปัญหาอะไรอยู่และเราจะช่วยแก้ปัญหาอย่างไรได้บ้าง
มองกลับมาที่งานองค์กรของเรา ส่วนใหญ่จะเป็นการแปลง Work Instruction ที่พนักงานทำกันอยู่ หรือแบบฟอร์มที่ใช้งานกันอยู่มาเป็นโปรแกรมหรือระบบ ก็เลยไม่ค่อยจะสนใจประเด็นนี้กันเท่าไร บางระบบก็นั่งเทียนนึกกันเอาว่าผู้ใช้ควรจะต้องทำ 1 2 3 ไม่เคยไปถาม หรือใช้กระบวนการที่เรียกว่า การเก็บ requirement แล้วก็เอามาออกแบบ
แต่ส่วนตัวมองว่ามันยังไม่พอ เพราะประโยคอมตะของงาน design ของ เฮนรี่ ฟอร์ด คือ หากคุณไปถามผู้ใช้งานว่าต้องการอะไร เขาก็จะตอบว่าต้องการม้าที่วิ่งเร็วขึ้น (เพราะผู้ใช้ไม่เคยเห็นรถมาก่อน) ซึ่งกระบวนการในการทำ UXR มันจะเป็นการเข้าไปสวมวิญญาณผู้ใช้ และดึง need ที่ตัวเขาไม่รู้ออกมา เราใช้คำว่า Empathy (ความเข้าอกเข้าใจ) มันต้องอาศัยจิตวิทยาเข้าช่วย
ซึ่งปัจจุบันทีมอาจจะยังไม่ค่อยเชี่ยวส่วนนี้มากนัก แต่เราจะเน้นคุยให้มาก ถามว่ากระบวนการนี้ทำไปเพื่ออะไร ข้อมูลนี้ใช้อะไร ที่ทำอยู่เปลี่ยนได้ไหม มีวิธีการที่ดีกว่านี้ไหม บางครั้งก็ต้องหารือกับทางผู้บริหารเพิ่มเติม เพราะต้องยึดตาม policy และไม่เปิดช่องเรื่องความปลอดภัย
II. Interaction Design (ID)
ส่วนนี้จะเป็นการออกแบบหน้าจอการทำงาน หลังจากที่ไป research มา ก็ทำแบบง่ายๆ เลย ด้วย Wireframe (ศัพท์ไม่คุ้น 😁) ซึ่งก็คือตัวอย่างหน้าจอง่ายๆ จะวาดด้วยดินสอก็ได้ หรือจะใช้เครื่องมือก็ได้ (สนใจตัวนี้ เดี๋ยวค่อยไปดูเพิ่ม Pencil Project)
จุดประสงค์คือให้ทีมเห็นภาพว่าหน้าจอจะมีอะไร flow การทำงานเป็นแบบไหน เพื่อให้มองเห็น user journey ภายในระบบเรา
ตรงนี้ทีมมีทำบ้าง โดยใช้ whiteboard นี่แหละ ง่ายๆ เอาไว้ถกกัน แต่ก็ทำกับบางหน้าจอเท่านั้น ไม่ full scale ทั้งระบบ ถามว่าจำเป็นต้องทำไหม เขาให้หลักการว่า โปรเจ็คขนาดกลางถึงใหญ่ควรจะทำ (พอถึงตรงนี้นึก tool ในการทำ wireframe ที่ว่าจะลองก่อนหน้านี้ได้อีกหนึ่งละ plantUML ชิมไปบ้าง แต่ยังไม่ได้เอามาลองอย่างจริงจัง) ก็ต้องพิจารณาเอาว่าควรทำไหม ส่วนตัวพยายามจะเพิ่มเข้าไปในกระบวนการเพื่อให้มีประสิทธิภาพมากขึ้น
III. Visual & Interface Design (VsD)
ส่วนนี้จะเป็นการเน้นเรื่องความสวยงาม ความรู้สึกของผู้ใช้ จะเป็นเรื่องของการวาง layout การใช้สี ใช้ฟอนต์ หรือที่เรียกกันว่า UI (User Interface) Design นั่นแหละ
ตรงส่วนนี้ทีมจะใช้พวก material ui ในการคุมโทน ส่วน layout เราจะนำระบบที่ผู้ใช้คุ้นเคยหรือระบบดังๆ แข็งแรงๆ มาปรับ (เน้นว่าที่มันใช้งานได้ดี แบบที่มันควรจะเป็นนะ ไม่ใช่สักแต่ว่าเขาใช้เราก็ใช้) เพราะหนึ่งคือผู้ใช้ไม่ต้องเรียนรู้ flow มาก และสองคือมันเป็นมาตราฐานที่ผ่านร้อนผ่านหนาวมาพอควรด้าน UX (ย้ำ ลอกเพื่อเรียนนะ ไม่ใช่ ลอกเลียน)
เนื่องจากเราเป็นทีม develop ไม่มีทีม UI ทำให้ต้องด้นสดกันด้วย code เลย ปรับ css กันอย่างเมามันส์ 😆
UX Design is a Process, not Art
1. Research and Planning
วิจัยหาสิ่งที่เรียกว่า customer persona หาให้ได้ว่าลูกค้าในจินตนาการของเราเป็นแบบไหน มีรสนิยมยังไง โดยใช้การสัมภาษณ์เยอะๆ จากคนหลากหลายกลุ่ม จากนั้นก็จัดกลุ่ม โดยแบ่งตาม เพศ อายุ อาชีพ พื้นเพทางบ้าน ฯลฯ เพื่อให้เห็นหน้าตาของลูกค้าเรา
2. Sketching
ออกแบบ flow หรือ user journey ว่าเวลาลูกค้ามีปฏิสัมพันธ์ กับตัวผลิตภัณฑ์ ลำดับจะเป็นอย่างไร 1 2 3 โดยสิ่งที่ควรทำ คือ
- โฟกัสในสิ่งที่ผู้ใช้ต้องการทำในขณะนั้น
- ออกแบบให้ช่วยผู้ใช้ตัดสินใจ
- ใช้ Pattern การออกแบบที่ใช้กันเป็นสากล
- ทำส่วนที่ง่ายที่สุดก่อน ส่วนที่ยากไว้ท้ายสุด
ขั้นตอนนี้ก็จะทำให้เราได้ wireframe ออกมา
3. Prototyping
จากนั้นก็มาทำ prototype ต่อ สิ่งที่แตกต่างระหว่าง prototype กับ wireframe ก็คือ wireframe เป็นแค่ภาพร่าง ส่วน prototype เป็นสิ่งที่ผู้ใช้สามารถจับต้องได้ เพื่อที่เราจะให้ผู้ใช้ทดสอบในขั้นตอนถัดไป
อีกเรื่องที่ต้องย้ำก็คือ สิ่งที่ควรจะเป็นคือไม่ควรลง code ในส่วนนี้ ให้หาเครื่องมือ ง่ายๆ มาลอง อย่างที่ทีมเริ่มใช้ตอนนี้ก็คือ Adobe XD (บังเอิญว่าที่ทำงานมีให้ลอง มิได้เจตนาขายของนะ 😆)
4. Testing and Refining
นี่เป็นขั้นตอนที่พยายามให้ทีมเพิ่มเข้าไปให้มาก อย่าเน้นออกแบบทั้งระบบจนเสร็จ แต่มีการส่งมอบให้ผู้ใช้ได้ทดลองชิมบ่อยๆ แล้วก็รับฟังความเห็น แต่เราก็ต้องให้ผู้ใช้กลุ่มเป้าหมายของเราทดสอบนะ ไม่งั้น feedback จะพาหลงทางได้
5. Launching
สุดท้าย เมื่อได้ข้อสรุปสำหรับฟีเจอร์นั้นแล้วก็ ให้ทีม dev มาลง code ต่อ
กระบวนการก็ประมาณนี้ มองดูมันก็คือ agile + design thinking นั่นแหละ ทำความเข้าใจ ทำต้นแบบ ทดสอบสมมุติฐาน สรุปผลลัพธ์ แล้วก็วนกลับไปลูปเดิมใหม่ วนไป จนกว่าจะได้ผลิตภัณฑ์ที่แก้ปัญหาของผู้ใช้ได้จริง