พัฒนาตัวเองใน 1,000 วัน (วันที่ 142–164) UX UI Designer ควรรู้ Design Thinking!!

Krit Chainoi
3 min readFeb 7, 2019

--

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

Design Thinking กระบวนการสำคัญในการทำ User Experience

Design Thinking เป็นกระบวนการที่นิยมมากในการทำ User Experience เพราะทำให้เราเข้าใจผู้ใช้งาน ระบุปัญหา หาวิธีการแก้ไข สร้างตัวอย่าง และทดสอบกับผู้ใช้งานได้

โดยปกตินั้นเรามักจะมองแค่ออกแบบ User Interface เท่านั้น โดยก็ไม่รู้ ไม่แน่ใจเลยว่าสิ่งที่ผู้ใช้หรือธุรกิจต้องการคืออะไร จุดไหนคือปัญหาที่แท้จริงของเค้า โดยมักไปโฟกัสกัน ตอนทำ User Interface เป็น Website บ้าง Mobile บ้าง

ซึ่งความจริงการสร้าง User Interface จัดอยู่ในกระบวนการหนึ่งของ Design Thinking เท่านั้นคือ Prototype!

ดังนั้น หากต้องการที่จะทำ User Experience ให้ดี เราควรจะใช้ Design Thinking มาช่วยในการทำงานอย่างยิ่ง (UX/UI Designer ยิ่งต้องใช้!)

องค์ประกอบของ Design Thinking

  1. รู้จักผู้ใช้ (Understand)

การรู้จักผู้ใช้งานถือเป็นเรื่องสำคัญอย่างมากในการสำรวจและค้นหาความต้องการ หรือแก้ไขปัญหาของผู้ใช้

จึงมีคำพูดเกิดขึ้นมาว่า

Because I am NOT the user หรือ ฉันไม่ใช่ผู้ใช้ เราจึงต้องเข้าใจผู้ใช้ก่อน”

โดยวิธีทำความรู้จักผู้ใช้มีหลากหลายซึ่งจะเรียกว่า User research ซึ่งมักจะศึกษา 3 เรื่องเป็นหลัก พฤติกรรม (Behaviour), ความต้องการ (Needs), แรงกระตุ้นของผู้ใช้ (Motivations)

แต่ๆ โดยส่วนมากมักใช้วิธีการเขียน Persona เพื่อระบุพฤติกรรม ลักษณะของผู้ใช้ที่คล้ายๆ กัน เช่น นักเรียนมัธยมปลาย (สายวิทย์พิเศษ), นักวิ่งมาราธอน หรือ โปรแกรมเมอร์

โดย Persona จะแบ่งออกเป็นหลากหลายแบบ เช่น Marketing Persona (ข้อมูล Target Audience คราวๆ), Proto-Persona การจำลองข้อมูลจากที่เรามี โดยเขียนให้ครบองค์ประกอบ (พฤติกรรม, ความต้องการ, แรงกระตุ้นของผู้ใช้) หรือ Design Prosona ที่เราจะโฟกัสไปที่พฤติกรรม ความต้องการ และปมของผู้ใช้ โดนอ้างอิงจากผลลัพท์

ตัวอย่าง Persona

2. รู้ปัญหา หาไอเดีย (Create)

พอเราเขียน Persona เพื่อระบุลักษณะพฤติกรรม ความต้องการ และปมของผู้ใช้ได้แล้ว ที่นี้เราต้องมาระบุปัญหาของผู้ใช้ และหาไอเดียต่อ

โดยส่วนมากจะใช้การกำหนดปัญหาของผู้ใช้ (Problem Statement) ซึ่งจะระบุเป็น ประโยคสั้นๆ อธิบายปัญหา และจุดเริ่มของวิธีการแก้ปัญหาให้ทุกคนเข้าใจปัญหาตรงกัน

โดยจะมีสูตรดังนี้ (ฉัน = Persona ผู้ใช้)

“เมื่อ (บริบท) ฉันอยากจะ (ทำสิ่งนี้) ฉันจะได้ (สิ่งที่คาดว่าจะเกิดขึ้น)

เช่น เมื่อฉันนั่งนานๆ ฉันอยากจะได้เก้าอี้นวด ฉันจะได้ไม่ปวดหลังอีก

เมื่อฉันเดินทางด้วยเครื่องบิน ฉันอยากจะเข้าเกตโดยไม่ต้องใช้ตั๋วกระดาษ ฉันจะได้ไม่ต้องพิมพ์ตั๋วทุกครั้ง

ซึ่งใช้วิธีการง่ายๆ เพียงมีปากกา ดินสอ และกระดาษ (อาจจะเป็น Post it ก็ได้) เขียนไปเลย

แต่วิธีการที่ดีที่สุดควรจับเวลาด้วย เพื่อที่จะได้ไม่ฟุ้งเยอะเกินไป (5–15 นาทีกำลังดี)

พอทำการ Problem Statement เสร็จ

ก็มาสู่การรุมกันคิดวิธี (Brianstorming — Crazy eight)

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

เช่น ตั้งเวลาเลย 10 นาที วาดวิธีการแก้ไขปัญหาจากที่เราระบุกันใน Problem Statement วาดให้มากที่สุดเท่าที่จะปิ๊ง ไอเดียได้เลย

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

3. สร้างตัวอย่างและทดสอบ (Prototype & Test)

พอได้ไอเดียที่แต่ละคนโหวตกันมาแล้ว ก็อาจจะเลือกสัก 3–5 ไอเดีย เพื่อนำมาใช้งานในการสร้างตัวอย่าง (Prototype)

โดยวิธีการสร้าง Prototype มีหลากหลายแบบ ซึ่งมักจะเริ่มต้นจาก การสร้าง Wireframe ให้ภาพร่างหรือพิมพ์เขียนของโปรดักส์

โดย Wireframe นั้นก็มีอีกหลากหลายแบบ ได้แก่

  • Low-Fidelity Wireframe คือ ภาพร่างของโปรดักส์ที่ไม่เน้นรายละเอียดความสวยงาม แต่สามารถอธิบายการทำงานได้
  • Mid-Fidelity Wireframe คือ ภาพร่างของโปรดักส์ที่เริ่มเน้นรายละเอียด เพื่อความสมจริง และเข้าใจของหลากฝ่าย เช่น มีการใส่ตัวหนังสือ ภาพวาด หรือ ลงสีนิดหน่อย
  • High-Fidelity Wireframe คือ ภาพร่างของโปรดักส์ที่ค่อนข้างสมจริง จะมีการวางส่วนประกอบต่างๆ ไว้ทั้งหมด อาจจะขาดการลงสี (มักจะใช้สีดำ เทา ขาว เพื่อสื่อก่อน)

โดยเครื่องมือที่ใช้ในการสร้าง Wireframe มีหลากหลายมากๆ เช่น ปากกา+กระดาษ, Powerpoint, Sketch Apps, Adobe XD, Figma เป็นต้น

ส่วนเรื่องของการ Test ของเขียนในตอนต่อไป เนื่องจากเป็นเรื่องมีขั้นตอน เทคนิค และผู้มีส่วนร่วมมากมายๆ น่อ

สำหรับใครที่อ่านมาถึงสุดท้าย ผมขอนับถือใจเลย เพื่อนๆ จะเข้าใจเรื่อง Design Thinking มากขึ้น และ UX/UI Designer ก็จะทำโปรดักส์ได้อย่างดีขึ้นแน่นอน รับประกัน ><

--

--