ออกแบบ UI ด้วย 5 เทคนิค พิชิต WEB DESIGN ให้ถูกใจผู้ใช้งาน

5 เทคนิก การออกแบบ UI สำหรับ WEB DESIGN

1. จัดวางเมนูให้มองง่าย สะอาดตา และเป็นมิตร

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

มี Case Study บางรายที่เชื่อว่าการนำเมนูบริการทั้งหมดมาวางเรียงรายไว้บนแถบเมนูด้านบน (Navigator Bar) จะช่วยให้ลูกค้ามองเห็นบริการได้ครบถ้วน และสร้างโอกาสในการเข้าถึงทุกบริการได้ง่าย แม้ว่าจะต้องยอมมองข้ามความยุ่งเหยิงที่ไม่เป็นระเบียบไป ซึ่งเรื่องนี้ไม่ใช่เรื่องดีแน่นอน ภาพลักษณ์ ก็เป็นสำคัญในการสนับสนุนการใช้งานเช่นกัน เพราะฉะนั้นหากเป็นไปได้ การเลือกซ่อนเมนูไว้ใน Hamburger Button หรือจัดการทำ Dropdowns ให้เป็นระเบียบเรียบน้อยนั้น จะส่งผลดีอย่างมากในเชิงของ Visual ในขณะที่คุณก็ยังคงนำเสนอบริการได้ครบถ้วน

2. จัดบาลานซ์การวางไอค่อน และตัวหนังสือ (ICON & TEXT ALIGNMENT)

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

3. เลือกที่เด่นขึ้นมา แต่ไม่ต้องถึงกับ CONTRAST สำหรับ CTA

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

4. FONT รูปแบบ > น้ำหนัก > ขนาด > ระยะห่าง

ฟอนต์ (Font) ตัวอักษรที่ใช้บนเว็บไซต์นั้น เรียกได้ว่าเป็นจุดที่ค่อนข้างเบสิค แต่เป็นจุดปราบเซียนในการออกแบบ UI หรือ Web Design เลยก็ว่าได้

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

5. ใช้ CAROUSEL เหมาะสมกับ CONTEXT

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

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

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

1. MOOD BOARD

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

2. PROTOTYPE

สำหรับการทำ Prototype นั้น เป็นการนำ Mood board มาลงรายละเอียดให้มากยิ่งขึ้นไปอีกระดับ ใส่ข้อความบางส่วนที่จะต้องใช้จริง ใส่ภาพที่จะต้องใช้จริง มีการวางเมนู ใส่สีตาม CI เลือกฟอนต์ และจัด Alignment ครบถ้วน

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

สามารถติดต่อเพื่อขอคำปรึกษาได้ที่ 081 116 1001
Line Id : 1001click
Email : info@1001click.com