iUXUI Journey I — Edmund slide & color emotion
ช่วงนี้เริ่มมาดู UX UI เพราะเริ่มใช้ Adobe XD ในการทำ prototype ให้กับทีม และในตอนประชุมทีมเพื่อสรุปฟีเจอร์ของระบบ บางครั้งก็ต้องสวมหมวกของผู้ใช้ ว่าหน้าจอระบบที่จะได้ มันต้องให้เขาเข้าใจง่าย ใช้งานง่าย ก็เลยต้องหาความรู้เพิ่ม
ซีรีย์บล็อคชุดนี้เลยเป็นการสรุปสิ่งที่ส่วนตัวได้เรียนรู้ จากการอ่านบทความหรือเนื้อหาจาก vdo เพื่อรวบรวมไว้ ว่าการเดินทางในเส้นทาง UX UI ของเรานั้น มันมีหน้าตาเป็นแบบไหน และหากเป็นประโยชน์กับคนอื่นก็ยินดีครับ
#1 Edmund Arnold
ส่วนตัวได้ slide ชุดนี้มาจากน้องที่ทำงานอีกคน เลยหาแหล่งอ้างอิงไม่เจอ ต้องขออภัยเจ้าของ มา ณ ที่นี้ด้วยครับ รายละเอียดที่สรุปจากการทำความเข้าใจ ดังนี้
- Gutenberg Principle
- การเรียง element บนหน้าจอผู้ใช้ ให้ไล่การทำงานจาก ซ้ายไปขวา และบนลงล่าง
- action หรือการทำงานต่างๆ ควรไว้ไม่ไกลกัน เพื่อผู้ใช้ไม่ต้องเสียเวลาลากเมาส์ จากที่หนึ่งไปยังอีกที่หนึ่ง
2. การเน้น content ที่ active อยู่
- ทำให้เห็นว่า active อยู่ แต่ไม่ใช่เข้มเกิน จนทำให้ดึงดูดความสนใจมากไป
- แสดงสถานะให้ชัดไปเลยว่า active อยู่
3. ข้อความที่ใช้กับปุ่ม หรือ action ต่างๆ ต้องสื่อ ไม่ยาวเกินไป เข้าใจได้ทันทีว่า ต้องทำอะไรเพื่อได้อะไร
4. ปุ่มหรือ action ที่อันตราย ไม่ควรทำให้เด่น เพราะโดยธรรมชาติมนุษย์จะชอบคลิกก่อนอ่าน
5. ลำดับของปุ่ม
- อันที่สำคัญอยู่ล่าง
- ใช้สี และความหนาของข้อความในปุ่ม ตามความสำคัญ สำคัญมากสีเข้มสุด ตัวหนาสุด
6. ว่าด้วยเรื่องของปุ่ม อีกหน่อย
- สำคัญมาก ใหญ่สุด
- ยิ่งปุ่มใหญ่ ช่องไฟต้องแคบลง
- เมื่อขนาดใหญ่ขึ้น ถ้าเป็นไอคอนให้ไอคอนขยายตาม แต่ถ้าเป็นข้อความให้คงขนาดเดิมไว้ ขยาย padding ของปุ่มแทน
- ปุ่มไอคอน ให้สีพื้นตัดกับสีไอคอนพอประมาณ และรูปไอคอนใหญ่เห็นได้ชัด
- การวางปุ่มใน mobile ต้องไม่ชิดกันเกินไป เพื่อป้องกันผู้ใช้สับสนว่ากดโดนปุ่มไหนกันแน่
7. การออกแบบ step
- บอกกระบวนการทั้งหมดว่ามีกี่ step และตอนนี้ทำถึงขั้นไหนแล้ว
- บอกว่าตอนนี้ทำอะไรอยู่ และต่อไปเป็นอะไร
8. input field
- active กับ inactive มันต้องต่างกัน เช่นการใช้ border color กับ input ที่ active
- การทำช่องข้อความให้อิงที่เราใช้กัน ไม่ใช่เพื่อเก็บข้อมูลได้ง่าย เช่น ที่อยู่ เก็บเป็นช่องเดียว ไม่แยกจังหวัด อำเภอ เพราะประเทศอื่น อาจจะไม่มีฟิลด์ดังกล่าวก็ได้
- ใช้ autocomplete สำหรับข้อมูลที่รู้ว่าจะกรอกอะไร เช่นชื่อจังหวัด
- ช่องชื่อ-สกุล ควรรวมกัน เพราะบางประเทศไม่มีวิธีแยกแบบนี้
- ข้อมูลที่มี format การกรอก ให้ทำ text split ตาม format เพื่อผู้ใช้จะได้ไม่สับสนและกรอกผิด
- ขนาดของช่อง input ต้องสัมพันธ์กับขนาดของ text ด้านในช่องด้วย
- ข้อความ error เมื่อกรอกข้อมูลผิด (form validate) ควรแสดงด้านข้างของช่อง ผู้ใช้ชอบแบบนี้มากกว่า
- ปุ่ม info ที่อธิบายว่าต้องกรอกอะไร ควรทำให้เห็นได้ชัดและคลิกได้ง่าย
9. การใช้สี backgroud & foreground
- อันไหนที่สำคัญควรทำให้เด่น ด้วยสีพื้น และสีตัวอักษร
- ข้อความอย่าให้มันตัดกับพื้นหลังมาก ดูแล้วปวดตา เพราะคนต้องจ้องเพื่ออ่าน
10. พื้นที่การวางปุ่มบนหน้าจอมือถือ ควรใช้อยู่ในบริเวณที่นิ้วจะเอื้อมถึง
11. spinner | progress bar
- spinner ใช้กับที่ต้องรอไม่เกิน 4 วิ
- อันไหนเกิน 4 วิ ให้ใช้ progress bar แทน
12. ข้อความตรง footer
- แบ่ง category ของลิงค์ให้ชัดเจน
13. กรอปรูป profile ต้องเป็นวงกลม
มันต้องมีรูปประกอบนะ จะได้เห็นภาพ แต่จะนำมาอัพก็กะไรอยู่นิ ^^
#2 Color Emotion
สีที่เห็นมีพลังแฝงในการกำหนดอารมณ์ของเราโดยไม่รู้ตัว
- เหลือง : มุมมองในแง่ดี (optimism), ความชัดเจน (clarity), ความอบอุ่น (warmth)
- ส้ม : ความเป็นกันเอง (friendly), รู้สึกสดชื่น (cheerful), ความมั่นใจ (confidence)
- แดง : ความตื่นเต้น (excitement), ความไร้เดียงสา (youthful), ความห้าว (bold)
- ม่วง : ความสร้างสรรค์ (creative), จินตนาการ (imaginitive), ปัญญา (wise)
- น้ำเงิน : ความเชื่อใจ (trust), พึ่งพาได้ (dependable), พลัง (strength)
- เขียว : ความสงบ (peaceful), การเติบโต (growth), สุขภาพ (health)
- เทา : ความสมดุล (balance), ควมเป็นกลาง (neutral), ความสงบ (calm)
เฉดไหนไปดูกันเพิ่มได้ที่อ้างอิงด้านล่างนะ
Ref:
- designil.com color emotion
