Kingkarn – UX/UI Designer

Emotions Tracking

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

Contribution
User Research
UI Design
Client

Duration

March 2023

Preview
Problem

โจทย์ของแบบทดสอบนี้คือ 

ปรับปรุง UI ของแอปพลิเคชันบันทึกความรู้สึกในแต่ละวัน ให้ผู้ใช้มีประสบการณ์ใช้งานที่ดีขึ้น

โดยให้พัฒนาจากภาพ UI ในด้านซ้ายมือ

Design Process
Step 1 - Research & Summary

เนื่องจากในโจทย์ไม่ได้เจาะจงกลุ่มผู้ใช้อย่างชัดเจน เลยสุ่มกลุ่มตัวอย่างที่เป็นคนใช้งานแอปบันทึกความรู้สึกอยู่แล้วมา 2-3 คนค่ะ โดยให้ user ลองดูขั้นตอนการใช้งานจากแอปที่เป็นโจทย์ แล้วให้ feedback ว่ารู้สึก หรือเจอปัญหาอะไรในการใช้งานบ้าง

ภาพประกอบในแต่ละหน้า

โดยได้สรุปข้อมูลจากกลุ่มผู้ใช้ได้ดังนี้ค่ะ

รูปที่หนึ่ง ปัญหาแรกคือผู้ใช้ไม่รู้ว่าระดับสีมีความหมายว่าอย่างไร ถ้าให้ใช้เดาได้แค่ว่าสีเขียวข้มดีสุด แดงเข้มมันแย่ ๆ สุด

รูปที่สอง 

1 – ในหน้านี้ไม่ได้มีบอกว่าก่อนหน้าผู้ใช้เลือกความรู้สึกระดับไหนไป เพราะตรงนี้มีการเปลี่ยนมาหน้าใหม่  

2 – ใน chip จะมีวงกลมสีๆ ทำให้ผู้ใช้เกิดข้อสงสัยว่าหมายถึงอะไร

รูปที่สาม ผู้ใช้งานส่วนใหญ่ยังไม่ได้ติดปัญหาอะไรใหม่ จะคล้ายหน้าที่สองคือ  ก่อนหน้าผู้ใช้เลือกความรู้สึกระดับไหน หรือกรอกข้อมูลอะไรไป

รูปที่สี่ ตอนที่พิมพ์เสร็จผู้ใช้มัวแต่ focus ที่แป้นพิมพ์เลยไม่ทันเห็นปุ่มติ๊กถูกข้างนอก เลยใช้เวลามองหาสักพัก

Step 2 - Ideate

นำข้อมูลปัญหาที่พบมาแก้ไขให้ตรงจุดค่ะ โดยข้อสรุปในการพัฒนา UI นี้ให้ดีขึ้นมีตามนี้ค่ะ

รูปที่หนึ่ง ปัญหาแรกคือผู้ใช้ไม่รู้ว่าระดับสีมีความหมายว่าอย่างไร ถ้าให้ใช้เดาได้แค่ว่าสีเขียวข้มดีสุด แดงเข้มมันแย่ ๆ สุด

แก้ไขปัญหาของรูปที่หนึ่ง – เพิ่มความหมายของสีเข้าไป โดยได้หาข้อมูลเพิ่มเติมเกี่ยวกับอารมณ์ของมนูษย์ว่าคนเรามีอารมณ์ความรู้สึกอะไรบ้าง และได้พบกับ Emotion Wheel เป็นสิ่งที่บ่งบอกว่าส่วนใหญ่แล้วมนูษย์มีความรู้สึกอะไรได้บ้างค่ะ จะเห็นได้ว่าในวงล้อมีอารมณ์ค่อนข้างเยอะ จึงเลือกเอาหมวดหมู่หลักๆมาใส่เพื่อที่จะไม่เป็นการยัดข้อมูลให้ผู้ใช้เยอะเกินไปค่ะ

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

รูปที่สอง 

1 – ในหน้านี้ไม่ได้มีบอกว่าก่อนหน้าผู้ใช้เลือกความรู้สึกระดับไหนไป เพราะตรงนี้มีการเปลี่ยนมาหน้าใหม่  

2 – ใน chip จะมีวงกลมสีๆ ทำให้ผู้ใช้เกิดข้อสงสัยว่าหมายถึงอะไร

แก้ไขปัญหาของรูปที่สอง

1 – นำความรู้สึกที่ผู้ใช้เลือกหน้าแรกมาแสดงในขั้นตอนที่สองด้วย 

2 – เอาวงกลมสีๆใน chip ออกเนื่องจากไม่ได้มีความสำคัญต่อการใช้งาน

รูปที่สาม ผู้ใช้งานส่วนใหญ่ยังไม่ได้ติดปัญหาอะไรใหม่ จะคล้ายหน้าที่สองคือ  ก่อนหน้าผู้ใช้เลือกความรู้สึกระดับไหน หรือกรอกข้อมูลอะไรไป

แก้ไขปัญหาของรูปที่สาม นำความรู้สึกที่ผู้ใช้เลือกหน้าแรก และสองมาแสดงในขั้นตอนที่สาม

รูปที่สี่ ตอนที่พิมพ์เสร็จผู้ใช้มัวแต่ focus ที่แป้นพิมพ์เลยไม่ทันเห็นปุ่มติ๊กถูกข้างนอก เลยใช้เวลามองหาสักพัก

แก้ไขปัญหาของรูปที่สี่ เพิ่มปุ่ม done ให้เห็นได้ชัดขึ้น โดยย้ายมาไว้ในช่องปุ่มกดเลย

ภาพประกอบเพื่อให้เข้าใจคำอธิบายมากขึ้น

Step 3 - Set Mood & Tone

เลือกใช้โทน dark เนื่องจากกลุ่มตัวอย่างผู้ใช้ที่เลือกมาในตอนต้นก็คือคนที่ใช้งานแอปพลิเคชัน x ค่อนข้างเยอะ แล้วในแอปพลิเคชันเคยมีโหวตว่าส่วนใหญ่ใช้ dark mode หรือ light mode เยอะกว่าและผลคือ dark mode ชนะขาด เลยเกิดเป็นไอเดียให้ออกแบบเป็นโทน dark

และวงล้อที่ให้ user เลือกความรู้สึก ก็ได้ไอเดียมาจาก Emotion Wheel มองครั้งแรกวงล้อนี้ค่อนข้างคล้ายดอกไม้เลยมาปรับใช้ในการออกแบบครั้งนี้

โดยสีของดอกไม้จะใช้ตามความหมายของ Emotion Wheel เลยค่ะ

Step 4 - Design Interface & Interactions

ตัวอย่างงานใน Figma

Project Summary​

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

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