hand tlhand crfog b
08Oct, 2021
Language blog :
Thai
Share blog : 
08 October, 2021
Thai

UX/UI Design Secret - EP 1 (Error state-Emty State-Checkbox)

By

1 mins read
UX/UI Design Secret - EP 1 (Error state-Emty State-Checkbox)

คุณเคยสงสัยไหม? ทําไมการออกแบบของคุณถึงดูไม่เหมือนการออกแบบสากลที่ทําโดย UX/UI Design Freelancers ชั้นนําของโลก มีรายละเอียดเล็ก ๆ น้อย ๆ ที่แยกนักออกแบบทั่วไปออกจากนักออกแบบที่ดี ด้วยเคล็ดลับเหล่านี้ ผมจะแบ่งปันความลับที่ผมได้เรียนรู้มาในช่วงทศวรรษที่ผ่านมาของการออกแบบ UX/UI ให้คุณนําหน้าคู่แข่งของคุณอย่างน้อยหนึ่งก้าว

เนื้อหาในบทความ EP 1 เราจะมาพูดถึง

  • Icon for error state
  • The bluish-grey tone
  • Indeterminate state for checkboxes
  • Highlight matching words
  • Illustration with an empty state

 

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

เรามาดูแนวคิดของ UX/UI ระดับสากลกัน 🔥!

Icon for error state

Icon for error state

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

เพื่อให้แน่ใจว่าการออกแบบของคุณเป็นไปตาม guidelines หรือไม่ เราแนะนำปลั๊กอิน Stark (ทำงานร่วมกับ Figma, Sketch, and Adobe XD) ซึ่งจะช่วยคุณตรวจสอบ UI สําหรับอาการตาบอดสี อย่างที่คุณเห็นในขณะที่สีแดงดูเหมือนจะเป็นสีที่แจ้งเตือนได้อย่างแข็งแรงแล้ว แต่สําหรับในบางกรณีอาจไม่เพียงพอถึงกลุ่มผู้ใช้ทั้งหมด

 

The bluish-grey tone

The bluish-grey tone

ภาพด้านซ้ายมีสีเทาเพียว ๆ หรือสีเทาบริสุทธิ์ HSB (211, 0, 95) ส่วนภาพที่อยู่ด้านขวามีโทนสีเทาอมฟ้าผสมอยู่ HSB (211, 6, 95) การที่สีเทาอมฟ้าเป็นโทนที่ถนอมต่อสายตาเรามากกว่า เพราะว่าสีเทาบริสุทธิ์นั้นยากที่จะพบเจอในธรรมชาติ สีเทาของคุณในการใช้ชีวิตจะเย็นลงหรืออุ่นขึ้นเล็กน้อย แต่ไม่เคยเป็นกลาง ด้วยเหตุนี้การนำโทนสีที่จากธรรมชาติไปใช้จะช่วยให้การออกแบบของคุณดูดีขึ้น!

ข้อเท็จจริงที่น่าสนใจคือ ในขณะที่ผมแชร์ความลับนี้กับเพื่อน ๆ เหล่า Designer พบว่าประมาณ 80% เห็นพ้องกันว่าสีกลางควรเย็นลงหรืออุ่นขึ้น อย่างไรก็ตาม ยังมีประมาณ 20% ที่มีความคิดเห็นว่าสีเทา 100% นั้นดีกว่าด้วยซ้ำ แล้วความคิดเห็นของคุณหละคืออะไร?

 

Indeterminate state for checkboxes

Indeterminate state for checkboxes

ถ้าคุณมีกลุ่ม ​​checkbox lists การใช้ icon คุมเคลือทำให้ User สับสนในการใช้งานว่าตอนนี้เลือกทั้งหมด หรือเลือกบางรายการ ให้ใช้ icon ที่ต่างออกไปถ้าไม่ได้เลือกรายการย่อยทุกรายการ

เมื่อคุณเลือกช่องทําเครื่องหมายจาก ​​checkbox lists ออกทั้งหมดแต่หัวข้อกลุ่มยังคงเครื่องหมายไว้​ User จะคิดว่าตัวเลือกทั้งหมดภายในถูกเลือกอยู่

 

Highlight matching words

Highlight matching words

ธรรมชาติของ User ชอบการค้นหาและพวกเขาต้องการทำให้การค้นหาง่ายที่สุดและรวดเร็วที่สุด เมื่อคำแนะนำการค้นหาเน้นคําที่ User พิมพ์ในกล่องข้อความ User สามารถจดจําส่วนที่เหลือของคําแนะนําได้อย่างรวดเร็ว

หากคุณจะทิ้งคําที่ User พิมพ์ไว้เหมือนเดิม User จะใช้ความพยายามมากขึ้นในการจดจําตําแหน่งของคำที่แนะนํา

 

Illustration with an empty state

Illustration with an empty state

Empty state ไม่จําเป็นต้องว่างเปล่าเสมอไป! เมื่อคุณเพิ่มองค์ประกอบที่ดูเป็นมิตร เช่น illustration งานจะรู้สึก friendly มากขึ้นสําหรับผู้ใช้ เราแนะนำ Source สำหรับการหา illustration สำหรับ empty state เหล่าสาวก Figma ง่ายเลยเข้าไปหาใน community แล้วถูกใจอันไหนเลือกดาวน์โหลดมาใช้ได้ Community - Empty State แต่สำหรับสาวกที่ไม่คุ้นเคยกับ Figma เราแนะนำ Website illustration อย่าง Undraw

หากคุณต้องการทําให้ Empty state ของคุณดียิ่งขึ้น คุณอาจแนะนําขั้นตอนต่อไปที่ User ควรทําใน Feature นี้ เพื่อแนะนําให้ User ทำตาม Goal ที่มีอยู่ในใจได้สำเร็จเร็วขึ้น

Conclusion

นี่เป็นเพียง 5 เคล็ดลับการออกแบบ UX/UI จากมากมายที่จะมาถึง เคล็ดลับการออกแบบ UX/UI เหล่านี้จะช่วยให้คุณพัฒนาทักษะของคุณไปอีกระดับ คุณจะออกแบบด้วยความมั่นใจที่มากขึ้นและ ใช้เวลาน้อยลงในการพยายามหาจุดเล็ก ๆ น้อย ๆ ที่ดีกว่า

 

"I adore you, and your concept of living. Maybe we can work together."

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

10
October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
10 October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
10
October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
10 October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
10
October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
10 October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.