Skip to main content
0
UX/UI

แนะนำ 7 UI STATE ที่แต่ละเว็บควรมี !

หลายคนเวลาออกแบบมักคิดถึง Full System แต่ละส่วน แต่ละปุ่มในหน้าเว็บไซต์จะออกแบบอย่างไรและกดแล้วจะไปไหนต่อ Flow การทำงานของเว็บเป็นอย่างไรจนบางครั้งอาจจะลืมจุดเล็ก ๆ แต่ส่งผลสำคัญต่อความเข้าใจของผู้ใช้มากอย่าง State อื่น ๆ ของเว็บไซต์ ในบทความนี้เราจะมาทำความรู้จักกับ UI State หรือ User Interface State ที่ควรมีอยู่ในหน้าเว็บกันค่ะ

เขียนโดย
Nattawanee Srikoseat – Internship @ borntoDev

1.Ideal State

ก่อนอื่นพื้นฐานที่ทุกคนจะต้องออกแบบเป็นอย่างแรกกันอยู่แล้วคือ State ของการ
แสดงสถานะที่ครบถ้วนและพร้อมแสดงผล

 

Image from Grab

โดย State นี้จะเป็นหน้าพื้นฐานในการออกแบบ State อื่น ๆ อีกแต่ในหน้านี้เองก็ต้องการการออกแบบที่ครบถ้วนเช่นกัน อย่างเช่น เจาะลงไปใน Text แต่ละบรรทัด ออกแบบในกรณีถ้าหากมีความยาวเกินกรอบที่กำหนดไว้จะทำอย่างไร ให้เคาะบรรทัดใหม่หรือตัดออกไม่แสดง เป็นต้น

 

2.Empty State

 

Image from HoYoLab

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

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

 

3.Loading State

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

 


Loading State ไม่จำเป็นต้องทำเป็นทั้งหน้าก็ได้ หากเป็นการโหลด Action แค่ไม่ถึงวินาทีก็สามารถใช้เป็นการเปลี่ยน State เฉพาะบางส่วนที่เกิดการทำงานแทนก็ได้เช่นกัน วิธีการนี้เรียกว่า Micro Loading

Image from Dialogflow

 

4.Over State

หน้าแสดง ข้อมูลที่มีจำนวนมากกว่าปกติ เอาไว้แสดงผลเวลามีข้อมูลจำนวนมากเกินจนมันไม่ควรจะอยู่ที่หน้า Ideal State แล้ว เช่นเวลาค้นหาสินค้าแล้วเจออยู่สัก 100 สินค้าถ้าจะเอามาใส่ไว้ในรูปแบบเดิมก็คงจะไม่ไหว ซึ่งก็สามารถทำได้หลายรูปแบบตั้งแต่การเปลี่ยนหน้าให้แสดงผลเฉพาะผลลัพท์ ไปจนถึงการเปลี่ยนรูปแบบการแสดงผลเช่น ย่อขนาดลงหรือนำรูปภาพออก เป็นต้น

 

Image from Lazada

 

5.Partial State

หน้าแสดงว่า ข้อมูลยังไม่สมบูรณ์ ใช้ในการแสดงผลว่าข้อมูลที่แสดงอยู่ในตอนนี้เป็นเพียงส่วนหนึ่งของข้อมูลทั้งหมดเท่านั้น มักจะพบเห็นได้ในรูปแบบของเมนูเพื่อให้ผู้ใช้รู้ว่ายังมีหน้าเมนูอื่นอยู่อีก หรือหากเป็น Form จะอยู่ในรูปแบบของ Progress Bar

 

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

 

6.Error State

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

 

Image from Devlab borntoDev

 

7.Success State

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

 

Image from Devlab borntoDev

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

 

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

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

 

อ้างอิงจาก

  1. Hanii. User Interface State ทุกแอปพลิเคชั่นควรมี, สืบค้นเมื่อ 20 มกราคม 2565 จาก: https://medium.com/20scoops-cnx/user-interface-state-ทุกแอปพลิเคชั่นควรมี-69afe4b5b09
  2. Shane Doyle. Designing for different states in the UI, สืบค้นเมื่อ 20 มกราคม 2565 จาก: https://uxdesign.cc/designing-for-different-ui-states-87d60130f85f
  3. Leke Ojo. Designing UI states, สืบค้นเมื่อ 20 มกราคม 2565 จาก: https://bootcamp.uxdesign.cc/designing-u-i-states-b4847695d23d

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า