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

การทำงานของนักออกแบบ UX/UI เป็นการนำแนวคิดมาวิเคราะห์ถึงความต้องการของลูกค้า แล้วออกแบบมาอย่างสวยงาม เข้าถึงผู้ใช้งานได้ง่าย

บทความนี้จะขอแนะนำ องค์ประกอบ UI ที่พบบ่อยที่สุดสำหรับนักออกแบบ UX/UI ระดับเริ่มต้นที่อาจจะยังไม่รู้จักชื่อเป็นอย่างดี

1. Bottom navigation bars (Bottom bars) หรือเรียกว่าแถบด้านล่าง

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

 

•  Modal (ป๊อปอัพแสดงเนื้อหา)

Modal มีลักษณะคล้ายกับ ป๊อปอัพแสดงหัวข้อเนื้อหาอื่นๆ ทั้งหมดในหน้าปัจจุบันที่เรากำลังใช้งาน ซึ่งจะเป็นอีกฟังก์ชันที่นิยม จุดประสงค์ของ Modal คือการแจ้งให้ผู้ใช้งานทราบถึงบางสิ่งบางอย่างในแอพลิเคชัน Modal ที่เราเห็นบ่อยในชีวิตประจำวัน เช่น แอพลิเคชัน Facebook จะมีแถบบนขวาสุดเมื่อเราคลิกหรือกดที่ไอคอน จะพบหัวข้อเนื้อหาอื่นๆเพิ่มเติม คือ โปรไฟล์ที่จะนำไปสู่หน้า Facebookของผู้ใช้ ,  Settings Privacy , Help Support , Display Accessibility , Give feedback และ Log outModal สร้างขึ้นเพื่อใช้ดึงดูดความสนใจ สำหรับผู้ที่ต้องการข้อมูลเพิ่มเติม Modal ไม่ควรจะออกแบบให้พอดีไม่ใหญ่หรือเล็กจนเกินไป หาก Modal ยาวเกินไปก็จะต้องเลื่อนเพื่อดูข้อมูล หากเป็นเช่นนั้นก็ควรจะสร้างหน้าเพจใหม่แทนการใช้ Modal

 

• Slider — Carousel (ปลั๊กอิน)

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

การนำเสนอแบบ Carousel ซึ่ง Carousel เป็นปลั๊กอิน ที่เปลี่ยนองค์ประกอบต่างๆ ให้เป็นภาพเคลื่อนไหว

 

 

• การแบ่งหน้า

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

 

 

 

• เครื่องมือหรือเมนูที่ใช้นำทางในเว็บไซต์

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

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

 

• แถบด้านข้าง

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

 

• ฟังก์ชันตัวโหลด

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

 

• การแสดงข้อความแจ้งเตือน

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

 

• ปุ่มตัวเลือกและกล่องตัวเลือก

กล่องหรือปุ่มตัวเลือกเป็นองค์ประกอบในการคัดเลือกในสิ่งที่ต้องการ

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

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

 

• กล่องข้อความ

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

 

สรุป

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

---

ที่มา : https://bootcamp.uxdesign.cc/most-common-ui-elements-beginner-ui-ux-designers-dont-know-the-name-af02d971cf1f