12 หัวข้อเบื้องต้นที่ควรเรียนรู้สำหรับสายงาน UX/UI
เรื่องราวของการเรียนรู้สำหรับสายงาน UX/UI เราเคยเขียนเล่าใน Blog ก่อนหน้านี้แล้ว สามารถตามอ่านได้ที่ เริ่มต้นสายงาน UX/UI ยังไงดีนะ ? เลยมีคำถามต่อมาอีกว่าแล้วควรเรียนรู้เรื่องอะไรบ้าง
วันนี้เราเลยอยากจะมาลิสต์สิ่งที่เราคิดว่าควรเรียนรู้ถ้าอยากลองเข้ามาในสายงาน UX/UI เป็นหัวข้อพื้นฐานสำหรับงาน UX/UI (ตอนเรากำลังจะย้ายสายมา ก็ศึกษาเรื่องพวกนี้และนำบางอย่างไปใช้เขียนใน Portfolio เหมือนกัน)
ความตั้งใจของ Blog นี้ของเราคือทุกคนสามารถเอาหัวข้อที่เรา List ไว้ไป Search เพื่ออ่านและเรียนต่อกันเองได้ โดยที่เรามีลง Link เบื้องต้นไว้ให้
Disclaimer: อันนี้เป็นความเห็นส่วนตัว มีเรื่องอื่นที่ควรรู้อีกเยอะมาก แต่ถ้าให้ลิสต์ทั้งหมดน่าจะไม่ไหว เลยขอเลือกอันที่เราคิดว่าเป็นพื้นฐานเพื่อให้ได้ไอเดียแล้วเอาไปต่อยอดในหัวข้ออื่นๆ อีกที
TL;DR
12 หัวข้อสำหรับเอาไปอ่านต่อ
- Design Thinking
- Design Principle
- 10 Usability Heuristics
- Information Architecture
- Laws of UX
- Research
- User Interview
- User Journey
- User Flows
- Wireframing
- Prototyping
- Usability testing
1. Design Thinking
Design thinking is an iterative, non-linear process which focuses on a collaboration between designers and users. It brings innovative solutions to life based on how real users think, feel and behave. — Interaction Design Foundation
Design Thinking เป็นกระบวนการสำหรับการออกแบบอย่างหนึ่งที่ใช้กันบ่อยมากๆ บางสถาบันจะมี 4 ขั้นตอน บางสถาบันจะมี 5 ขั้นตอน ถ้าเป็น 5 ขั้นตอนก็จะมี
- Empathize
- Define
- Ideate
- Prototype
- Test
Design Thinking จะไม่ใช่กระบวนการที่เป็นเส้นตรงทำแบบจบแล้วจบเลย มันเป็นการทำซ้ำเดี๋ยววนมาขั้นตอนนี้ เดี๋ยวไปขั้นตอนนั้น เรื่องลึกๆ ของแต่ละหัวข้อมีอีกเยอะ ซึ่งสามารถไปอ่านเพิ่มเติมได้
Reference:
- https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process
- https://www.nngroup.com/articles/design-thinking-study-guide/
- https://voltagecontrol.com/blog/5-steps-of-the-design-thinking-process-a-step-by-step-guide/
- Design Thinking คืออะไร?
- Design Thinking : 5 กระบวนการคิดที่ UX Designer ควรมี
2. Design Principle
Design Principle หรือหลักการในการออกแบบ เราว่าเป็นสิ่งที่ Graphic Designer จะได้เปรียบกว่าคนที่มาจากสายอื่น เพราะเราใช้มันในการออกแบบจากงานสายเดิมอยู่แล้ว จริงๆ มันมีหลักการหลายข้อเลยอย่างเช่น Contast, Balance, Unity, Repetition, etc. แต่หลักๆ เบื้องต้นที่เราคิดว่าควรจำเพื่อนำมาปรับใช้กับงานฝั่งนี้คือ C.R.A.P.
C = Contrast (ความแตกต่าง)
R = Repetition (การทำซ้ำ)
A = Alignment (การจัดวาง)
P = Proximity (การจัดของที่ควรอยู่ด้วยกันให้อยู่ใกล้กัน)
หลักการ C.R.A.P. จะช่วยให้งานออกแบบของเราดูดีขึ้น ไม่สะเปะสะปะหรือดูเข้าใจยาก ซึ่งสามารถลองไปหาอ่านเพิ่มเติมกันได้ตาม Ref ที่เราแปะไว้ให้
Reference:
- https://www.interaction-design.org/literature/topics/design-principles
- https://vwo.com/blog/crap-design-principles/
- Design principle ในงาน UI
- https://www.youtube.com/watch?v=Ox1iQ05FZ00
Tips: ตอนทำ Portfolio ถ้าเราอยากลอง Redesign แอปที่ไม่สวยให้สวยขึ้นอย่างมีเหตุผล ลอง Audit และ Redesign แอปนั้นด้วย Design Principle อาจจะช่วยให้ Portfolio ดูน่าสนใจขึ้น
3. 10 Usability Heuristics
10 Usability Heuristics คือแนวทางการออกแบบงาน UX/UI Design ของเรา ที่จะทำให้งานออกแบบของเราใช้งานได้และมีความสมเหตุสมผล คิดค้นโดยตัวพ่อในวงการอย่าง Jakob Nielsen จะมีด้วยกัน 10 ข้อคือ
- Visibility of System Status
- Match Between the System and the Real World
- User Control and Freedom
- 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
เราคิดว่าเรื่องนี้คือความต่างระหว่างงาน Graphic Design และงาน UX/UI Design เลย เพราะงาน Graphic Design บางทีเราออกแบบสวยตาม Design Principle ตอนเราเป็น Graphic Designer ไม่เคยรู้จักหลัก 10 Usability Heuristics เลยก็วาง Layout ทำโปสเตอร์ออกมาได้ แต่งาน UX/UI มันจะแค่ออกแบบสวยอย่างเดียวไม่ได้ มันต้องใช้งานได้ด้วย
แนะนำว่าให้ปริ้นต์แปะฝาบ้านไว้เลย มีหลายๆ ที่ทำออกมาเป็น Poster ด้วย สามารถหาดาวน์โหลดกันได้
Reference:
- https://www.nngroup.com/articles/ten-usability-heuristics/
- https://bootcamp.uxdesign.cc/simplified-jakob-nielsens-10-usability-heuristics-36a860c2ac9c
- https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53
- 10 ข้อควรรู้!! ไว้ออกแบบ UX/UI ให้เริศเวอร์.. (10 Usability Heuristic for UX/UI Design)
- https://www.borntodev.com/2022/12/08/usability-heuristic/
10 Usability Heuristic Posters:
- https://sidigital.co/blog/10-usability-heuristics-posters
- https://www.nngroup.com/articles/ten-usability-heuristics/
Tips: ใน Portfolio เราสามารถใช้ 10 Usability Heuristicsในการ Audit แอปเก่าที่เราอยากทำใหม่ หรือเอามาเป็นรากฐานการออกแบบ Project ใหม่ของเราได้
4. Information Architecture
Information Architecture (IA) มันคือโครงสร้างของข้อมูลภายในแอปหรือเว็บของเรา ซึ่งเป้าหมายหลักของการทำ IA คือการทำให้หาของที่ต้องการให้เจอ ถ้าเปรียบเทียบงาน UX/UI ของเราเป็นร่างกายมนุษย์ UI เปรียบเสมือนเนื้อหนังของเรา และ Information Architecture ก็คือโครงกระดูกนั่นเอง
ตัวอย่างที่เราได้จากตอนเรียน Bootcamp มาก็คือ “เครื่องชั่งน้ำหนัก” จากในเว็บ Shopping Online ของต่างประเทศ คนไทยอย่างเราๆ อาจจะคิดว่ามันน่าจะอยู่ในหมวดอุปกรณ์อิเล็กทรอนิกส์ หรือหมวดของเบ็ดเตล็ด ซึ่ง User คนไทยหามันไม่เจอเพราะในเว็บ Shopping online อันนี้จัดเครื่องชั่งน้ำหนักไว้ในหมวดของในห้องน้ำ ซึ่งมาค้นพบว่ามันเป็นเพราะ Behaviour ของคนในแต่ละพื้นที่ไม่เหมือนกัน เพราะคนต่างชาติอาจจะนิยมชั่งน้ำหนักในห้องน้ำ ซึ่งมันอาจจะไม่ตรงกับ Behaviour ของกลุ่ม User ของบ้านเรา
วิธีการทำ IA แบบที่เห็นกันบ่อยๆ คือการทำ Card Sorting ซึ่งก็มีทั้งการทำ Close Cart sorting, Open Card Sorting และ Hybrid Cart Sorting นอกจากนี้ก็ยังมีวิธีอื่นๆ อีกที่เกี่ยวข้องกับเรื่อง IA อีก ลองตามอ่านกันต่อได้เลย
Reference:
- https://www.nngroup.com/topic/information-architecture/
- https://www.interaction-design.org/literature/topics/information-architecture
- รู้จัก Information Architecture องค์ประกอบสำคัญในการทำ UX/UI Design
- https://www.optimalworkshop.com/learn/card-sorting-101-introduction-to-card-sorting/
- Information Architecture — เรื่องที่ UX Designer ไม่ควรมองข้าม
5. Laws of UX
Laws of UX is a collection of best practices that designers can consider when building user interfaces. — lawsofux
Laws of UX เหมือนเป็น Best practices สำหรับ UX/Ui Design ซึ่งเอามาทำให้ ประสบการณ์การใช้งานมันดีขึ้น มันเกิดการคินค้นขึ้นมาจากหลายๆ คน บางกฎมีการคำนวณเป็นตัวเลขออกมาเลย ตัวอย่างเช่น
- Fitt’s Law: เวลาในการเข้าถึงเป้าหมายนั้นขึ้นอยู่กับระยะทางและขนาดของเป้าหมาย เอามาปรับใช้กับขนาดของปุ่มและตำแหน่งของปุ่ม
- Hick’s Law: เวลาที่ใช้ในการตัดสินใจจะเพิ่มขึ้นตามจำนวนและความซับซ้อนของตัวเลือก เอามาปรับใช้กับการมีจำนวนตัวเลือกให้ User
- Miller’s Law: มนุษย์สามารถจดจำของต่างๆ ได้เพียง 7 อย่าง(บวกลบ 2) เอามาปรับใช้กับการทำ Task ในหน้านั้นๆไม่ควร 7 (บวกลบ 2) Task
- etc.
อาจจะไม่ต้องจำให้ได้หมดทุกข้อในเบื้องต้น แต่ควรรู้ไว้นิดหน่อย (เราเองก็จำได้ไม่หมดเหมือนกัน แฮะๆ)
Reference:
6. Research
การทำ UX Research ก็มีอยู่หลายวิธี และประเภทของการ Research ก็มีทั้งแบบ Quantitative (เชิงปริมาณ) เช่นการทำ Survey และ Quanlitative (เชิงคุณภาพ) เช่น User Interview
วิธีการทำ UX Research แบบเบื้องต้นที่เราฝึกในช่วงย้ายมาสายนี้เช่น
- User Interview
- Survey
- Competitive Analysis
- Cart Sorting
- Usability Testing
- etc.
ที่สำคัญเลยคือการเลือกวิธี Research ให้เหมาะสมกับสถานการณ์และข้อมูลที่เราอยากรู้ แต่ของแบบนี้ต้องค่อยๆ ฝึก อย่างน้อยก็พอรู้คอนเซ็ปต์และวิธีการ
Reference:
- https://www.nngroup.com/articles/guide-ux-research-methods/
- https://www.nngroup.com/articles/ux-research-cheat-sheet/
- https://www.interaction-design.org/literature/topics/ux-research
- https://maze.co/guides/ux-research/ux-research-methods/
- https://www.uxdesigninstitute.com/blog/user-research-vs-ux-research/
7. User Interview
สำหรับมือใหม่ที่จะทำ Portfolio เราคิดว่า User Interview เป็นพาร์ทที่สำคัญที่ควรใส่ลงไป เพราะนั่นแปลว่าโปรเจกต์ที่เราทำมันมีการพูดคุยกับ User นะ ไม่ได้เอาตัวเองเป็นที่ตั้งของโปรเจกต์
แต่การทำ User Interview ไม่ใช่การถามลมฟ้าอากาศหรือถามว่าชอบไม่ชอบ คำถามที่ควรถามควรจะเป็นคำถามปลายเปิด หรือเราอาจจะเจอเทคนิคอย่าง 5 Whys คือถามทำไมไปเรื่อยๆ แล้วอาจจะได้เจอ Insight จริงของ User ก็เป็นได้
นอกจากเรื่องคำถามแล้ว การหา User มา Interview ก็สำคัญ ไม่ใช่เราจะเอาใครมา Interview ก็ได้ เช่นเราอยากแก้ปัญหาเรื่องการออเดอร์กาแฟสำหรับคนที่กินกาแฟเป็นประจำ เราก็ควรหา User ที่เป็นคนกินกาแฟมาสัมภาษณ์ ไม่ใช่เอาคนที่ไม่กินกาแฟมาถาม มันจะกลายเป็นว่าเราไม่ได้คำตอบ เพราะเราไปถามผิดคนนั่นเอง
Reference:
8. User Journey
User Journey คือ เส้นทางที่ User มาจนเจอ Products หรือ Service ของเรา เป็นส่วนสำคัญที่จะทำให้เรารู้ว่า User เข้ามายังไง, มี Experience ยังไง, เจอปัญหาอะไรและเราควรเข้าไปช่วยเหลือเค้าในตอนไหน ตรงไหนเป็นจุดที่น่าพัฒนาเพื่อให้ User Experience ดีขึ้น ซึ่งการทำ User Journey จะทำให้เราเห็นภาพได้ชัดขึ้น
มันจะมี Tool อยู่คือ User Journey Mapping ซึ่งเอามาใช้ดูแต่ละจุดของ Experience ที่ User เจอ ซึ่งไม่ได้มีรูปแบบตายตัว ซึ่งอาจจะมีหัวข้อหลักๆ เช่น Action, Task, Emotion, Touchpoint
Reference:
9. User Flows
User Flow คือ การทำ Diagram หรือ Chart แสดงเส้นทางภายในแอปหรือเว็บของเราตั้งแต่จุดเริ่มต้นไปจนจบ Task อาจจะมีคนสับสนบ่อยๆกับ User Journey แต่ User Journey ดู Painpoint และ Emotion ของ User หรือคนที่จะมาเป็น User ของเรา ส่วน User Flow จะเป็นส่วนที่อยู่ในระบบของเราจากหน้าหนึ่งไปอีกหน้าหนึ่ง โดยที่ไม่ได้มีเรื่องของ Emotion เข้ามาเกี่ยวข้อง
Reference:
10. Wireframing
Wireframe มีอยู่ 3 แบบคือ
- Low-fidelity Wireframes
- Mid-fidelity Wireframe
- High-fidelity Wireframe
ช่วงแรกของการหัดร่าง Wireframe ใหม่ๆ เราอาจจะวาด Wireframe บนกระดาษได้ ซึ่งก็เป็นวิธีหนึ่งในการทำ Lo-fi Wireframe เราอาจจะดราฟท์เร็วๆ ลงกระดาษก่อนที่จะไปขึ้นในคอมอีกที ซึ่งข้อดีคือ ในบางครั้งที่เราต้องคุยงานหรือคิดงานอะไรแบบเร็วๆ จะทำให้เห็นภาพร่างได้เร็วขึ้น และยังประหยัดด้วย
หลังจากหัดทำลงกระดาษมาแล้ว ก็สามารถฝึกการทำ Wireframe ในโปรแกรมได้โดยจะขยับมาทำ Mid-Fi ไปจนถึง High-Fi ก็ทำได้
Reference:
- https://wearebrain.com/blog/wireframing-101-the-whats-the-types-and-the-tools
- https://balsamiq.com/learn/articles/what-are-wireframes/
- https://www.experienceux.co.uk/faqs/what-is-wireframing/
- https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/
Tips: เราเคยสมัครที่นึงโดยมีการวาด Wireframe ลงกระดาษในตอนที่ทำ Lo-Fi Wireframe ซึ่งตอนที่เราได้เข้าไปทำงาน หัวหน้าเราบอกว่า เราได้คะแนนในการพิจารณามากขึ้นจากการวาด Lo-Fi Wireframe ลงกระดาษ :)
11. Prototyping
A prototype is a simulation of a final product which product teams use for testing before committing resources to building the actual thing. — UXPIN
Prototype จริงๆ มันคือของจำลองที่เราทำออกมาเพื่อเอาไปทดลองใช้กับ User ก่อนเพื่อดูว่าดูใช้ได้จริงมั้ยหรือดู Feedback ก่อนที่จะเอาไปขึ้น Production
ตอนที่เรา Design มาเป็น Screen เราอาจจะยังเห็นภาพไม่ชัดว่า เอ๊ะ กดแล้วมันต้องไปยังไงต่อนะ เราเลยจำเป็นต้องทำ Prototype ขึ้นมาเพื่อดูว่ามันไปหน้าไหนต่อหรือดู interaction เช่น กรอกข้อมูลแล้วกดปุ่ม CTA แล้วไปต่อที่หน้าไหน
แล้วเราก็สามารถทดลองกดเล่นดูว่ามันใช่อย่างที่เราตั้งใจจะ Design มั้ยแล้วก็เอาไปทำ Test กับ User เพื่อดูว่าประสบการณ์ในส่วนนั้นของ User เป็นยังไง
Reference:
- https://www.interaction-design.org/literature/topics/prototyping
- https://www.figma.com/resource-library/what-is-prototyping/
- https://www.twi-global.com/technical-knowledge/faqs/what-is-prototyping
- https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/
- https://www.nngroup.com/topic/prototyping/
12. Usability Testing
เรื่องที่เราเขียนมาทั้งหมดทั้งวิธีการต่างๆ จนไปถึงการทำ Prototype เราจะรู้ได้ยังไงว่า Logic หรือวิธีการที่เราคิดและทำออกมามันใช้งานได้กับ User จริงๆ? Usability Testing คือคำตอบในเรื่องนี้
อย่าคิดเอาเองว่าของที่ตัวเองคิดมันถูกต้องที่สุดหรือดีที่สุด ถ้ายังไม่ได้ทำ Usability Testing เพราะ YOU ≠ USER คนที่จะตอบเราได้คือ User ของเรา
เล่าแบบคร่าวๆ การทำ Usability Testing คือการที่เราเอา Prototype ของเราไปให้ User ได้ลองเล่น ซึ่งเราอาจจะให้ User ลองเล่นผ่าน Task หรือ Scenario ที่เราตั้งไว้ เช่น อยากให้ลองสั่งกาแฟให้ดูหน่อย หรือ ลองสมัครสมาชิกให้ดูหน่อย เป็นต้น ซึ่งผลของการทำ Usability Testing จะเอามาวัดผล (Evaluate) ว่าสมมติฐานที่เราดีไซน์ออกมานั้นใช้ได้หรือไม่ได้
Usability Testing เป็นสิ่งสำคัญมากๆ เราอยากให้คนที่กำลังอยากลองเข้ามาทำในสายงานนี้เข้าใจว่าการทำขั้นตอนนี้สำคัญ แนะนำให้ไปศึกษาหาอ่านกันต่อ
Reference:
- https://www.nngroup.com/articles/usability-testing-101/
- https://maze.co/guides/usability-testing/
- https://www.interaction-design.org/literature/topics/usability-testing
- https://www.hotjar.com/usability-testing/
- Usability Testing (การทดสอบคุณภาพการใช้งาน) คืออะไร?
Tips: ตอนทำ Portfolio ลองทำมาถึงขั้นตอน Usability testing แล้วเอาผลที่ได้มาสรุปว่าได้ผลยังไงแล้ว Next step ของเราจะทำอะไร และอาจเขียนว่าได้เรียนรู้อะไรจากขั้นตอนทั้งหมดที่ทำมาจนถึงได้ผล Usabitity testing ครั้งนี้ จะทำให้ Portfolio ดูน่าสนใจขึ้น
12 หัวข้อนี้เป็นเบสิกของจักรวาล UX อย่างน้อยถ้าเราพอเข้าใจเรื่องตรงนี้และทำลงใน Portfolio ของเราโดยใช้ความเข้าใจในทฤษฎีและสกิลตามนี้ Portfolio ของเราก็จะดูมีอะไรมากขึ้น ยังมีเรื่องอื่นที่เราสามารถไปศึกษาเพิ่มเติมได้อีกเช่น Empathy map, Affinity mapping, Service blueprint, Mental model, etc.
หวังว่าจะเป็นประโยชน์ให้กับคนที่ยังไม่แน่ใจว่าต้องศึกษาเรื่องไหนก่อนดี ก็นำเรื่องใน Blog เราไปต่อยอดได้เลยนะ ถ้าอยากให้เล่าเรื่องอะไรหรือคิดว่ามีหัวข้อไหนที่ควรเรียนรู้เพิ่มเติมสามารถคอมเม้นต์มาคุยกันได้เลย แล้วเจอกันใหม่ Blog หน้าค่าาา
