USER INTERFACE ออกแบบอย่างไรให้เว็บไซต์ใช้งานง่าย
Button (ปุ่มกด)ต่าง ๆ จะวางไว้ตรงไหน Logo จะจัดคอมโพสอย่างไร เนื้อหาจะมีมากหรือน้อยเพียงใด ลากยาวไปถึงสีสันและขนาดตัวอักษรจะต้องเลือกรูปแบบไหน ทุกอย่างคือขั้นตอนของการสร้าง User Interface หรือ UI กระบวนออกแบบเว็บไซต์ที่ทำออกมาให้สวยงามก็ดี แต่จะมีแค่ความสวยอย่างเดียวก็ไม่ได้ เพราะต้องใช้งานได้ง่ายด้วย ในบทความนี้ 1001 Click จะนำเทคนิคการสร้าง User Interface อย่างไร ให้ใช้งานง่ายมาแชร์กัน
USER INTERFACE ประกอบไปด้วยอะไรบ้าง
องค์ประกอบของ User interface หรือ UI ต่อไปนี้ เป็นเพียงส่วนหนึ่งเท่านั้นที่เป็นพื้นฐานที่ควรจะมีบนหน้าเว็บไซต์เพียงเท่านั้น
1. Input Controls
- Buttons ปุ่มกดที่จะพาเราลิงก์ไปยังหน้าต่าง ๆ
- Lead Form ฟอร์มสำหรับส่งข้อมูลต่าง ๆ ไปยังเว็บไซต์ อาทิ สมัครสมาชิก หรือ คำแนะนำ
- Checkboxes/ Radio Buttons จุดติ๊กเลือกใช้งานฟังก์ชั่นต่าง ๆ ของเว็บไซต์
- Dropdown List ตัวเลือกที่เมื่อคลิกจะมีตัวเลือกต่าง ๆ เป็นข้อ ๆ ลงมาให้เราเลือก
2. Navigational Components
- breadcrumb เครื่องมือนำทางภายในเว็บไซต์ ช่วยให้รู้ว่าเราอยู่หน้าไหนในเว็บไซต์ตอนนี้
- search bar ช่องสำหรับค้นหาข้อมูลต่าง ๆ ทันทีภายในเว็บไซต์
- pagination ส่วนล่างสุดที่มักจะใช้สำหรับเปลี่ยนเลื่อนหน้าเว็บเพจ มักจะมีลักษณะดังนี้ <1 2 3>
- tags สำหรับแยกหมวดหมู่ของเนื้อหาภายในเว็บไซต์
- icon เบื้องต้นมักจะนิยมใช้เป็นตัวไอค่อนที่ลิงก์ไปยังหน้าโซเชียลมีเดีย และตระกร้าสินค้า
3. Information Components
- tools tips จุดบอกเคล็ดลับต่าง ๆ ที่เกี่ยวกับธุรกิจภายในเว็บไซต์
- notifacations การตั้งค่าระบบแจ้งเตือน
- progress bar แถบความคืบหน้าในการเชื่อมต่อ หรือใช้ระบบต่าง ๆ ภายในเว็บไซต์
- message box ช่องกรอกคำแนะนำ เพื่อรับคำติชม และนำไปเป็นฟีดแบ็กในการทำเว็บไซต์
4. Container
- ส่วนของ Content ที่เปิดปิดเพื่อผ่านได้ มักจะมาในรูปแบบของ FAQs
และนี่ไม่ใช่ทั้งหมดขององค์ประกอบ User Interface โดยการทำ UI นั้น มีองค์ประกอบที่สามารถแต่งเติมได้มากมาย ขึ้นอยู่กับความคิดสร้างสรรค์ และความสามารถของผู้ออกแบบ ได้เวลาเข้าถึงเนื้อหาหลักของเรา
ออกแบบ USER INTERFACE อย่างไรให้ใช้งานง่าย
1. MINIMALIST STYLE เทรนด์มินิมอลสมัยใหม่ ที่คนส่วนใหญ่ชอบ
อาจจะไม่ใช่ทุกครั้งไป แต่โดยส่วนใหญ่แล้วการออกแบบเว็บไซต์ให้ดู Cozy & Minimalist style ก็เป็นที่นิยม ที่ถูกใจทั้งเจ้าของธุรกิจ และผู้ใช้งานกันไม่น้อย การเลือกโทรสีน้ำ ครีม ขาว และพยายามคุม element (องค์ประกอบ)ต่าง ๆ ภายในเว็บไซต์ให้ดูน้อยเข้าไว้ เป็นหนึ่งแนวทางที่ทำให้เว็บไซต์ใช้งานได้ง่าย และเข้าใจง่ายตั้งแต่แรกเห็น เพราะผู้คนมักจะสามารถกวาดสายตามองได้ครบตั้งแต่ 20 วินาทีแรกในหน้าเว็บไซต์ที่มีองค์ประกอบน้อย ๆ ว่ามีอะไรให้พวกเขาเล่น หรือใช้งานได้บ้างบนหน้าเว็บไซต์นั้น ๆ
2. COLOR SHADE สีเดียวกันแต่ไล่เฉดให้ดูง่าย
การกำหนด CI ให้เป็นสีที่เรียบ ๆ เข้าไว้ พร้อมทั้งใช่เฉดสีสันเพื่อแบ่งแยก Section ของเนื้อหาบนหน้าเว็บไซต์ ก็ช่วยให้เว็บไซต์ดูเป็นระเบียบเรียบร้อยโดยใช้ระดับของสีเป็นการตีกรอบ
3. BUTTONS จะต้องเห็นได้ชัด
การทำ Butons (ปุ่มกด) เพื่อเชื่อมลิงก์นั้น จุดประสงค์หลัก ๆ ของมันมักจะเป็นกระบวนการที่เรียกว่า Call to action หรือก็คือการกระตุ้นให้ผู้คนกดเพื่อหวังผลบางอย่าง อาจจะหวังผลให้เกิดการซื้อขาย หรือเข้าถึงชุดข้อมูลที่เราต้องการนำเสนอ การทำปุ่มให้อยู่ในตำแหน่ง ตรงกลาง เด่น และใช้สีที่คู่ตรงข้าม จะทำให้ปุ่มดูโดดเด่น และมองเห็นง่าย หรือการใช้สีเดียวกับพื้นหลังแต่ใช้เฉดที่หนักขึ้น เข้มขึ้น ก็ทำให้ปุ่มนั้นถูกกดมากขึ้นได้ด้วยเช่นกัน
4. TEXT SIZE ขนาดตัวอักษรนั้นสำคัญกับกลุ่มเป้าหมาย
การเลือกขนาดของตัวอักษรนั้น สิ่งที่ต้องคำนึงเป็นหลักนั้นคือกลุ่มเป้าหมายของคุณคือใคร อยู่ในช่วงวัยใด เพราะหากเป็นผลิตภัณฑ์เพื่อผู้สูงอายุ หรือเป็นบริการสำหรับกลุ่มวัยกลางคนไปถึงผู้สู้อายุ การทำใช้ขนาดตัวอักษรที่ค่อนข้างใหญ่ก็เป็นสิ่งสำคัญของการทำ User Interface เช่นกัน เพื่อให้กลุ่มเป้าหมายอ่านได้ง่ายที่สุด หรือหากกลุ่มเป้าหมายเป็นกลุ่มวัยรุ่น การเลือกขนาดให้เล็กลงก็เป็นเรื่องที่ทำได้ เพราะขนาดตัวอักษรที่ใหญ่ไปจะทำให้กลุ่มเป้าหมายเหล่านั้นรู้สึกว่าขนาดเว็บไซต์มันดูเทอะทะ และไม่น่าสนใจก็เป็นได้
5. SEARCH BAR ช่องการค้นหาสำคัญที่ขาดไม่ได้
ช่องค้นหาหรือ Search Bar นั้น เรียกได้ว่าเป็นเบสิคของการทำ User Interface เลยก็ว่าได้ เป็นองค์ประกอบที่ควรจะต้องมี เพราะมันช่วยสร้างความสะดวกสบาย ในการเข้าถึงสินค้า หรือบริการภายในเว็บไซต์ของเราให้กับผู้ใช้งานได้อย่างมาก
6. SYSTEM STATUS สถานะกำลังดำเนิน และเสร็จสิ้น
System Status เป็นเหมือนอีกหนึ่งเคล็ดลับของการทำ User interface เพราะผู้คนในยุคปัจจุบันนั้นมักจะไม่มีความอดทนกับการรออะไรที่ไม่มีจุดหมาย เพราะฉะนั้นการทำ System Status เพื่อบอกสถานะของฟังก์ชัน อาทิ การดาวน์โหลดเนื้อหา ดาวน์โหลดหน้าเว็บไซต์ ระยะเวลาในการสั่งสินค้า หรือระยะเวลาในการตอบกลับของแอดมิน ก็เป็นอีกหนึ่งระบบดี ๆ ที่คนทำ UI ควรศึกษา และสร้างสรรค์มันขึ้นมาบนเว็บไซต์นั้น ๆ
7. WARNING SYSTEM IS A MUST ระบบแจ้งเตือนจะไม่มีไม่ได้
ระบบแจ้งเตือนการใช้งาน ว่าผู้ใช้งานเว็บไซต์กำลังพลาด หรือตกหล่นในการ register ระบบต่าง ๆ ไปจะช่วยให้ User Interface ของคุณดูดีขึ้นมาก และยังแสดงออกถึงความเอาใจใส่ผู้ใช้งานอย่างมากอีกด้วย
8. SHOPPING CART ICON PIN ตะกร้าสินค้าตามติด
การพินตะกร้าสินค้าไว้ เป็นตัวอย่างของการทำ User Interface ที่ดี และได้รับความนิยมอย่างมาก เพราะมันจะช่วยสร้างความสะดวกสบายให้กับผู้ใช้งานได้ ไม่ต้องเลื่อนขึ้นไปหาตะกร้าสินค้าที่มักจะอยู่ที่ Sitebar ด้านบน
และทั้งหมดนี้ คือเทคนิคการทำ User Interface ที่เป็นที่นิยม และนักออกแบบเว็บไซต์ในปัจจุบันไม่ควรพลาดอย่างใดอย่างหนึ่งในนี้ไป อีกทั้งยังไม่ควรหยุดหาความรู้เพื่อนสรรสร้าง User Interface ที่ดีออกมาให้ผู้ใช้งานทั่วไปได้ใช้กันด้วย หวังว่าทุกท่านจะสามารถนำชุดข้อมูลด้านบนไปปรับใช้กันตามรูปแบบของเว็บไซต์ที่กำลังดูแลกันอยู่
1001 Click เราคือบริษัทรับสร้างเว็บไซต์ ที่รับสร้างเว๋บไซต์ตั้งแต่ศูนย์ เรามีทีมงานที่สามารถดูแลตั้งแต่ User interface (UI) และ User Experience (UX) เพื่อให้เว็บไซต์ของคุณของออกมาตรงตามความต้องการมากที่สุด พร้อมทั้งยังมีบริการดูแลหลังการขาย เพื่อติดตาม และอัปเดตเว็บไซต์ให้คุณอีกด้วย สนใจติดรายละเอียดบริการเพิ่มเติมได้ทางเว็บไซต์ 1001 Click
- สามารถติดต่อเพื่อขอคำปรึกษาได้ที่ 081 116 1001
- Line Id : 1001click
- Email : info@1001click.com