UX / UI Design

User Experiene   สิ่งที่เกิดขึ้นเมื่อลูกค้า ได้สัมผัส ได้ยิน ได้... กับสิ่งที่เราทำ บริการ หรือสินค้า

User Experiene มีอยู่ในหลายบริบทมาก ทุกบริการ แต่เราจะออกแบบอย่างไรให้ลูกค้า พึงพอใจแล้ว

กลับมาใช้บริการ หรือประทับใจในบริการของเรา จึงต้องมี UX design การออกแบบประสบการณ์

โดย UX จะอยู่ระหว่าง  User Needs กับ Business Goal

สายงานอาชีพที่ไปต่อได้

———————————————————

- UX writer  -> ใช้ข้อความให้เหมาะสมกับกลุ่มลูกค้า

- Project Design -> ออกแบบดูแลโปรเจค

- Visual Design 

- UI Design

- Interaction Designer ให้รู้สึก มีกิมมิค เหมือนประสบการณ์ ทำให้รู้สึกเหมือนการใช้ชีวิตจริง

- Service Design ออกแบบบริการ การใช้งานจริง

มี 3 ทีม

1.Customer Experience (CX)  สิ่งที่ลูกค้ารับ สัมผัสจากบริการ ( CX ใหญ่กว่า SD)

2.Service Design (SD) ความเข้าใจเกี่ยวกับบริการ เพื่อออกแบบ ตามวัตถุประสงค์ของ Service แก่ลูกค้า เช่น ออกแบบป้ายให้เข้าใจง่าย  ออกแบบให้ไม่เคร่งเครียด

3.UX Design กระบวนการทำความเข้าใจและแก้ปัญหา รวมถึง Digital interface solution พัฒนาให้ดียิ่งขึ้น

UX Designer ไม่ใช่ให้ไปนั่งออกแบบ UI ส่วนติดต่อผู้ใช้ แต่สิ่งที่ต้องทำคือ  "USER Research"

การเข้าใจและรู้ถึงความรู้สึกและ need ของผู้ใช้ เพื่อจะได้หา Solution เพื่อแก้ไขให้ถูกจุด นั่นเอง

หลักในการออกแบบ

User-Centered Design Process

ให้ความสำคัญของ User มี user มามีส่วนร่วมในการออกแบบและประเมินผล

DesignThinking วิธีคิดในการออกแบบ 

-----------------------------------------------------------------------------------

Empathize - เข้าใจคนใช้งานเรา เข้าไปสำรวจจริงๆ ในบริบทของเรา

Define ->  interview แล้วเอามา จัดกลุ่ม รวบรวม เป็น Persona

               -   User Jouney

               -  painpoint

Ideate  ->ให้เยอะสุดแบบสร้างสรรค์ -> Super Vote แล้วเลือกที่ดีที่สุด

             - Design  เป็น Wire Frame ไปคุยกับทีม

             - Data Flow ใช้ Figmaให้เห็นภาพกระบวนการ

             - สร้าง Prototype  (Low Mid Hi)

Deliver -ส่งให้ผู้ใช้ให้ดูแล้วมีอะไร เก็บ feed back ที่ต้องปรับปรุง ทำ Usability Testing  กับ Target  ไม่มี Bias

หรือ

ที่นิยมใช้  "Double​ Diamond" 

   - Discover       เข้าไปคุยกับผู้ใช้ (Diverse) 

   - Define          ระบุปัญหา (Converse) 

   - Develop        หา Solution ในการแก้ปัญหา  (Diverse) 

   - Deliver         เลือก Solution ที่ดีที่สุด (Converse) 

เช่น ReDesign ภายใน 3 เดือน เอาไปเป็น Template 

โดยแต่ละขั้นมีขั้นตอนอย่างไร อย่างเหตุผลอย่างไร สามารถใช้โน้มน้าวผู้บริหาร พิจารณา รวมถึง Budget ในแต่ละขั้นได้

หรือ

Design Cycle

-Discover

-Explore

-Test

-Listen

การบวนการ Research Data จาก User

เครื่องมือที่ใช้

       - Qualitative  แบบเชิงคุณภาพ

       - Quantitative  แบบเชิงปริมาณ

Qualitative  แบบเชิงคุณภาพ

- User interview. เก็บข้อมูลผู้ใช้ เพื่อให้ได้หลากหลายรูปแบบ

   --> Background.       ประวัติส่วนตัว การศึกษา  ครอบครัว  สังคมครอบครัว

   --> Tech knowledge  ใช้มือถือรุ่นไหน ใช้ social media อะไรบ้าง

   --> Product to use     ใช้ product อะไรในชีวิต

   --> Need                  อยากให้มีอะไรในชีวิต แล้วชีวิตจะดีขึ้น สะดวกสบายขึ้น

   --> Motivation           แรงจูงใจอะไร ที่ทำให้ต้องการสิ่งนี้ สิ่งนั้น

   --> Frustration          เจอปัญหาที่เจอ ชีวิตติดขัด ไม่สะดวกเพราะอะไร

ก่อนจะไปทำต้องเตรียมอะไรบ้าง

• Determine Research Goal.       // อยากรู้อะไร เพื่ออะไร
• Know Target audience            // กลุ่มที่จะสัมภาษณ์
• Write interview question        // ข้อคำถาม
• Prepare Script                      // ควรจะมี template เดียวกัน ไม่ปรับเปลี่ยนใหม่ 
• Concern private issue           // PDPA เช่นพวกอัดวีดีโอ คุยกัน เซ็นกัน
• Prepare equipment to recording // เตรียมอุปกรณ์ อัดเสียง speaker phone หรือ หาคนจดไปด้วย

เทคนิคการถาม

• ให้คำถามสั้นและง่าย  //ไม่ยาก ไม่ใช้ศัพท์เทคนิคเกิน
• ถามคำถามปลายเปิด // มากกว่าใช่หรือไม่  เช่นประสบการณ์ที่ใช้
• ถามคำถามติดตามผล //ประสบการณ์ ดีหรือไม่ ดีอย่างไร 
• อยากตีกรอบความคิด //ดูพฤติกรรมการใช้ อย่าบอกว่าคำตอบถูกหรือไม่ถูก

  ฝึก Empathize (เอาเราไปเป็นตัวเขาเลยว่า เป็นเราจะรู้สึกอย่างไร) ให้เป็น

Prepare Script. แบ่งเป็น 3 ส่วน คือ

1. Introduction. ทักทาย บอกว่า เราจะมาทำอะไร ผู้ใช้ทำอะไรบ้าง ไม่มีถูกไม่มีผิด ไม่ลงโซเชียล บอกเรื่อง data privacy
2. Main Part. อธิบายโปรดักว่าทำอะไรคร่าวๆ แล้วสัมภาษณ์กว้างๆ อาจไม่จำเป็นต้องเกี่ยวกับ Product
3. Closing ให้ user บอกว่า เราทำ interview  เครียดไปรึป่าว ขอ contact ขอบคุณ

จะไปสัมภาษณ์ต้องดู Timeline ของงาน และ user ว่าง บอกว่า เราขออนุญาต เป็นข้อมูลส่วนตัว ไม่เผยแผ่ข้อมูลสู่สาธารณะ

-Data recording ตัวอย่าง Research ที่มา

-Data storage มีการจัดเก็บข้อมูลอย่างปลอดภัย

-Data retention  ระยะเวลาจัดเก็บนานแค่ไหน

เครื่องมือ

• De-identification
• Non-disclosure agreement (NDA) สัญญาคุ้มครองทางกฎหมายและการขโมย idea ของเรา

ปัญหา Insight

• ไรเดอร์น้อย มาส่งช้า
• บางร้านไม่มีรูปให้ดู
• โดนร้าน cancel
• เสิร์ช แล้วมีบอกข้อมูลไม่ต้อง เข้าไปอีก

ข้อแนะนำ

  - มีแนะนำให้เลย

แบ่งมา 3 Tier  เช่น ใช้บ่อย ใช้ครั้งนานที ไม่ค่อยได้ใช้  โดย สัมภาษณ์ 3-5 คน ต่อ Tier  ลองถามด้วยว่า ถ้าไม่ใช้ เหตุผลที่เขาไม่ใช้

ตัวอย่าง ต้องลองเคยทำจริง และเอาไปใส่ใน portfollio ขั้นตอนการทำงานต่างๆ

หา Target คัดคนมา interview  อายุ เพศ กี่คนจะได้ข้อมูลที่ใกล้เคียงกับประเด็นที่เราต้องการ

Personas

ตัวแทน ของ user ใน background ,career ,paint point ต่างๆที่เจอ ในกลุ่มต่างๆ

เพื่อนำข้อมูลมาวิเคราะห์หา Need

User Journey ของการใช้งานของ User 

ระบุเป็นเคส เป็น Step ว่า เกิดอะไรขึ้น ตั้งแต่แรก จนจบ 

ในแต่ละกระบวนการเกิดไรขึ้น 

• Stage
• Usergoal
• Actions
• Touchpoint
• Emotions
• PainPoints
• Improvements 

ทำเป็นตาราง และการแก้ไขตรง improvement 

หลักๆ ACTION ,TASK LIST ,FEELING OBJective,improvement opportunities 

เช่น ตั้งแต่ดาวน์โหลด App ลงโปรแกรม ติดตั้งสำเร็จ  ผู้ใช้รู้สึกอย่างไร

PRIORITIZE Problem เรียงลำดับปัญหา

แบ่งเป็น 4 ช่อง 2 แกน  คือ เกิดขึ้นบ่อย , มี impactกับธุรกิจ ทำให้เขาไม่ใช้บริการเรา

ยกตัวอย่าง

1.Frequency +  / Impact + 

ไม่มีโต๊ะนั่ง, คนเยอะ

2.Frequency +  / Impact -

      จองแล้วไม่มา,จองมาไม่ครบ,คิดตังยาก

3.Frequency -  / Impact +

     โดนแบ่งโต๊ะ ไม่รู้วิธีการจอง อาหารหมด  ไม่ได้ตำแหน่งโต๊ะที่ต้องการ ไม่มีช่องทางการติดต่อ

4.Frequency -  / Impact +

  ไปช้า ไปไม่ทัน บริการไม่ดี  ร้านไม่รับสาย

PRIORITIZE Problem ปัญหาไหนสำคัญสุด มาเอาเป็นจุดขาย แล้วที่เหลือมาทำ  Feature ย่อยๆ แล้ว IA 

Information Architecture

การจัดโครงสร้าง ข้อมูลของหน้าเว็บ หรือ Application ว่ามีเมนู ลำดับชั้นข้อมูลอย่างไร

Mental Model  รูปแบบความเข้าใจที่คนมีต่อสิ่งต่างๆ ซึ่งก่อตัวขึ้นมาจากความรู้ หรือประสบการณ์ และความเชื่อ แต่ละคน

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

ดังนั้น การแบ่งหมวดหมู่จึงต้องเข้าใจง่าย กับผู้ใช้ ไม่สับสน 

CARD SORTING

- วางแผนวางโครงสร้าง เข้าใจ Mental model

-Open ให้ user เลือกหัวข้อเอง ควรอยู่แบบไหน เช่น แบ่งยี่ห้อรถตามอะไร

-​ Close มีให้เขาเลือก

Tree Testing  สร้างมาแล้วแบบ Tree ใส่กระดาษให้แก้

เช่นการแบ่งหมวดหมู่ตามระบบงาน หรือ แบ่งตามห้อง

User flow

จากหน้าหลัก —> action ——> สั่งอาหาร

                                ——> ค้นหา

Paper Wireframe

วาดแต่ละหน้า (อ้างอิงจาก IA) มี Idea ในการออกแบบยังไงบ้างที่ตอบโจทย์ NEED

- มีการจัดลำดับ  หรือมี option ให้เลือก 

• ระบุรายละเอียดให้ชัดเจนด้วย  ใส่ความสำคัญ ไปด้วย 

-เมื่อเลือกได้แล้วมาวาดขยายให้ใหญ่ในภายหลัง

• เคลื่อนย้ายง่าย สลับตำแหน่ง แล้วถ่ายรูปเป็น flow งานไปลง figma

Low Fi-> แบบลงในคอมเป็นโครง สี การจัดวางโครงสร้างต้อง  OK แล้ว

Hi Fi-> แบบลงสี ใส่รูปต.ย. เตรียม hand off แล้ว

Figma -> ออกแบบ UI

FigJam -> Ux meeting  workshop

การออกแบบ UI

-Section แบ่งหน้าได้ 

-Grid System

-Space หน้าจอ ห่างซ้ายเท่าไหร่

นิยม ใช้ แบบ 4 point grid  และ 8 point grid

-เรื่อง space ที่ 4 ,8,16,... แทนที่จะเป็น 13,15,…..

TESTING

ดูว่าตอบโจทย์หรือป่าว 

Usability Testing 

-Moderated usability มีคนช่วยคุมในการ Test ไม่ให้ผิดประเด็น และสำรวจเมื่อเจอปัญหา

• มีอคตินิดๆ เผื่อเกรงใจ
• สร้างความสัมพันธ์ทีดี
• มีปัญหาช่วยติดขัดตอบข้อสงสัยได้
• แต่ ต้องจัดหาพท.
• มีการติดตามสด Record ได้

-UnModerated usability ให้ทำเอง แล้วรอผลมา Record โดยไม่มีผู้ควบคุม

  - ไม่มีอคติ

  - ไม่มีการควบคุมสิ่งแวดล้อม

  - ถามแบบเจาะลึกไม่ได้

ต้องมีการวางแผนก่อนไป ถามแต่ละคนให้เหมือนกัน

KPI ->  single each question รูปแบบการให้คะแนน

• ทำ Login ให้กี่คะแนน

  -   ถามต่อได้ เก็บ  insight ชอบไม่ชอบ ในกรณีที่ไม่ชอบหรือชอบ

  -  ทำ Debrief สรุปความรู้สึกในการให้  Review คนสัมภาษณ์  เอาตามความเป็นจริง

A/B Testing

 - ทดสอบเรื่อง Design

-  ออกมา 2 แบบ  ไม่ลงตัว ว่า แบบไหนดีที่สุด เลยปล่อย 2 Design เลย แล้วเอาไปเทสว่า

User ใช้แบบใดมากกว่ากัน แล้วจึงเลือกแบบที่ดีที่สุด หรือ เอาข้อดีของ 2 แบบมารวมกันตามที่สำรวจแล้วปล่อย c ไป

Hand off ไปยังแผนกอื่น

• มีระเบียบ
• เรียงflow เป็น Step
• การตั้งชื่อ frame
• เก็บเคสให้ครบ

เช่น การเขียนflow UI ตอน Validation ต้องดูว่ามี action อะไรเกิดขึ้นบ้าง  แล้ว จะมีหน้าตา App อย่างไร เมื่อมีเหตุการณ์นั้นเกิด เช่น มี popup โผล่ หรืออย่างไร

การทำ Design System

 Design System -> ออกแบบระบบ (principal , structure, language)

  - Principle -> Why ที่ ผู้ใช้ทอดทิ้ง Application

• การเอาไปใช้ 52%
• Maintenance 42%
• Staffing 42%
• Lack for an executive

กระบวนการ

- Run Workshop ให้ผู้บริหารมาทำ Workshop แสดงให้เห็น value ของงานว่าเกิดผลดีอย่างไรกับองค์กร 

เข้าไปนั่งคุย สัมภาษณ์ กับคนในมหาวิทยาลัย

Data ——> Analysis หรือ Synthesis 

WORK SHOP

1. เป้าหมาย ของการ Design System    2. สิ่งที่เราไม่ต้องการในระบบ (ตรงกันข้าม)    3. เปลี่ยนคำให้เป็น KEY กระชับ ที่จะนำไปใช้

       - เช่น อยากให้ทุกคนเข้าถึง เช่นคำพื้นๆ

       - ความสม่ำเสมอของรูปแบบ

       - เอามา Reuse ได้

       - ทำให้เป็นในทิศทางเดียวกัน

2. แบ่งหน้าที่ในทีมรับผิดชอบ 3 คน ทำหน้าที่อะไร
คุยกับ Design manager -> Developer  -> UX/UI

3.หน้าที่ Design System
- Design Component
- Developer
- Release Note มีไรออกใหม่บ้าง
- Ideate new components

• Code component
• Audit existing interface
• Design component
• Audit codebase
• Audit new designs
• Document component
• Set stylistic standards
• Design proof of concept
• Write release notes
• Evangelize the system
• Build/maintain library
• Hold component design
• Accept components into
• Hold experitise on
• critiques
• system
• platform best practices
• Set accessibility
• Measure success of
• Educate others around
• standards
• design system
• the design system
• Run design QA against
• Set process for
• Onboard new users to
• design system
• component review
• the design sysstem
• Ensure executives accept Sell design system to
• Generate tickets for new
• component into system
• senior stakeholders/
• components
• executives

1. Governance
   - In house
   - Partner ช่วยขาย ผู้บริหาร
   - Exernal ภายนอก
2. Language ภาษาในการสื่อสาร ให้เข้าใจทั้งองค์กร จะได้เรียกได้เหมือนกัน ทำ WORKSHOP ให้ทุกคนเรียกชื่อเข้าใจตรงกันหรือจะทำยังโดย card sorting มาช่วย ให้การสื่อสารตรงกันได้
3. Design System
4.  Typography System
5. Form Component

------------------------------------------------------------
ตัวอย่าง  Designsystem สวยๆ

- designsystemrepo.com

- The New Design Frontier

------------------------------------------------------------

โปรแกรมที่ใช้

Adobe XD ,Sketch

ทดสอบวางสีปุ่ม.  https://leonardocolor.io

------------------------------------------------------------

รูปแบบสีที่ใช้

HSL HSB -> นานแล้ว

RGB  -> แสดงหน้าจอสว่าง เกิน contrast ไม่ได้

LEC LAB LCS -> พอได้

CAM02 ดีสุด  แม่นยำ (Hue Chroma Lightness)

------------------------------------------------------------

-ลิงค์สำหรับทำ portfollio

notion.so

-ใช้ url bit.ly ย่อ url

ทำ Portfolio เขียนให้ครบทุกขั้นตอนเราทำอะไรได้บ้าง ผลเป็นอย่างไร

------------------------------------------------------------

การสมัครงาน

ตอบให้ตรงคำถาม ตรงประเด็น อย่าเวิ่นเว้อ 

คำถาม

• คุณรู้จัก UX / UI จากไหน + Story  ให้เล่า passion ด้วย 
• จุดย้าย Career path ต้อง  improve skill  ต้องเกิดจาก passion
• UX คืออะไร 
• Presentation Connect the dot 
• Problem คนกดส่วนลด
• ทำให้เข้า สตั้น ให้ได้ ทำให้เห็น skill การจัดวางให้มัน ทำให้ปัง 
• Energy ต้องน่าฟัง