0
SHARE

ทำไมการออกแบบเว็บไซต์ที่เรียบง่ายจึงให้ผลลัพธ์ที่ดีกว่า

Array
Linda

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

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

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

 

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

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

ทำไมต้องออกแบบเว็บไซต์ให้ง่าย?

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

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

เว็บไซต์ที่เรียบง่ายมักจะมี User Experience (UX) ที่ง่ายหรือคอยส่งมอบประสบการณ์ที่ดีให้กับลูกค้า ผู้เข้าชม และผู้ใช้งาน บนหลักการพื้นฐาน 3 ข้อต่อไปนี้

1. เข้าใจง่าย

เว็บไซต์ที่เรียบง่าย มักจะมีเนื้อหาไม่เยอะ เพราะถูกออกแบบมาโดยพื้นฐานของความต้องการของลูกค้า

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

2. เข้าถึงง่าย

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

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

40% ของคน จะออกจากเว็บไซต์นั้นไปเลยหากว่าต้องรอให้เว็บไซต์โหลดนานกว่า 3 วินาที

3. ตัดสินใจง่าย

กฏเรื่อง The Paradox of Choice นั้นบอกว่า

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

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

5 แนวทางการออกแบบเว็บไซต์ให้ออกมาเรียบง่ายและมีประสบการณ์การใช้งาน (UX) ที่ดี

1. One Thing at a Time

“Multitasking is unproductive, your complicated website too.”

ในเว็บไซต์แต่ละหน้า เราควรจะกำหนดเป้าหมายหลักเพียง 1 ข้อเท่านั้น

  • เป้าหมายของผู้ชมเมื่อเข้ามาถึงหน้า Services คือ เข้าใจว่าธุรกิจให้บริการอะไร อย่างไร
  • เป้าหมายของเว็บไซต์ เมื่อผู้ชมเข้ามาหน้า Services คือ การให้คนติดต่อเข้ามา

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

ลองดูไม่เสียหาย

ลองเปิดหน้าเว็บไซต์ของคุณหรือคู่แข่งขึ้นมา แล้ววิเคราะห์ว่า 1. กลุ่มเป้าหมายของหน้านี้คือใคร? 2. มีความต้องการอะไรถึงต้องมาเจอหน้านี้ 3. ตอบโจทย์ไหม? 4. จะปรับปรุงแก้ไขอย่างไร?

2. White Space is Your Best Friend

คำว่า “มันดูโล่งๆ” คือกับดักอันดับต้นๆ ที่เรามักจะได้ยินกัน และเผลอไปแก้ปัญหานี้กันโดยไม่รู้ตัว

จริงๆ แล้ว “ที่ว่าง” เป็นองค์ประกอบอย่างหนึ่งที่สำคัญมากในการออกแบบ ลองสังเกตดูว่าเว็บไซต์ที่เรียบง่ายทั้งหลาย ล้วนใช้ “ที่ว่าง” ในการออกแบบได้อย่างชาญฉลาด

ประโยชน์ของพื้นที่ว่างหรือ White space ได้แก่

  • ช่วยแบ่งแยกข้อมูลแต่ละส่วนให้แยกออกจากกัน
  • ทำให้ข้อมูลต่างๆ อ่านได้ง่ายขึ้น
  • ทำให้มีที่พักสายตา และผู้อ่านรู้สึกล้าได้ช้าลง

ลองดูไม่เสียหาย

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

3. Reduce Choices (Max 5 Things)

กฏ Hick’s law บอกเอาไว้ว่า

“With every additional choice increases the time required to take a decision.”

แปลว่า ยิ่งเราเพิ่มตัวเลือกเท่าไหร่ เวลาที่ใช้ในการตัดสินใจก็จะเพิ่มขึ้นเท่านั้น

hickslaw-making-decision
กราฟ Hick’s Law เทียบจำนวนตัวเลือกกับเวลาที่ใช้ตัดสินใจ

 

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

จำนวนตัวเลือกที่นักจิตวิทยาแนะนำ อยู่ที่ระหว่าง 3 – 5 ตัวเลือก หากมากกว่านั้น คนจะเริ่มตัดสินใจยากและรู้สึกว่ามันมากเกินไปกว่าจะที่จะเลือกได้

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

แบบฟอร์ม ก็เป็นอีกที่หนึ่งที่ควรจะลดจำนวนช่องกรอกข้อมูลให้เหลือเพียงช่องข้อมูลที่จำเป็นจริงๆ เท่านั้น มีผลการทดลองหลายๆ ที่บอกว่า จำนวนช่องกรอกข้อมูลที่เมื่อเทียบกับ Conversion rate แล้วออกมาสมเหตุสมผล คือ 3 – 5 ช่อง หากมากกว่านี้ Conversion rate จะตกลงอย่างมีนัยยะสำคัญ

treehouse-simplest-form
ตัวอย่างหน้าแบบฟอร์ม Free Trial ของ treehouse.com ที่มีการขอข้อมูลเท่าที่จำเป็น เพื่อให้คนเริ่มต้นทดลองใช้งานให้ได้เร็วที่สุด

 

ลองดูไม่เสียหาย

ลองเปิดเว็บของคุณขึ้นมาดูว่าจำนวนเมนูหลักมีเกิน 5 หรือไม่? ถ้าเกิน ลองคิดดูว่าจะลดอะไรออกได้บ้าง การลดเมนูหลักไม่ได้แปลว่าให้ตัดเนื้อหาส่วนนั้นออกไป แต่เป็นการลดระดับความสำคัญของเมนูนั้น โดยอาจจะนำไปไว้ที่เมนูส่วนล่างแทน (Footer menu)

4. Always Design with a System in Mind

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

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

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

องค์ประกอบที่ควรต้องกำหนดวิธีการใช้งานบนเว็บไซต์ ได้แก่

  • ตัวอักษร ฟอนต์ที่ใช้บนเว็บมีฟอนต์ไหนบ้าง (ไม่ควรเกิน 2 – 3 ฟอนต์) รูปแบบของตัวหัวข้อเป็นแบบไหน ตัวอักษรสำหรับอ่าน ฯลฯ
  • สี สีอะไรคือสีที่กำหนดให้ใช้ สีอะไรที่ไม่ให้ใช้ สีเน้นคือสีไหน สีลิงก์คือสีไหน ฯลฯ
  • Style ต่างๆ เช่น ปุ่ม มีกี่แบบ แต่ละแบบใช้สำหรับเป้าหมายอะไร แตกต่างกันอย่างไร องค์ประกอบที่ใช้ประกอบการออกแบบต่างๆ ลักษณะของรูปภาพ ฯลฯ
design-system-สำหรับการออกแบบเว็บไซต์
ตัวอย่างการทำ Design System ให้กับเว็บไซต์

 

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

ลองดูไม่เสียหาย

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

5. Know When to Create Call-to-Action (and Make it Obvious)

สำหรับนักธุรกิจ นักการตลาด เรามักจะอยากพูดสิ่งที่เราพูด ทุก Message สำคัญ และอยากจะเน้นไปเสียหมด

แต่หากเราเน้นทุกอย่าง มันก็แปลว่าไม่มีอะไรที่ถูกเน้นซักอย่าง

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

สิ่งที่ควรทำก็คือ ให้ย้อนกลับไปยังเป้าหมาย 1 อย่างที่คุณเขียนไว้ในข้อ 1. One Thing at a Time เมื่อรู้แล้วว่า Call-to-Action (ที่สำคัญจริงๆ) คืออะไร ถึงจะมาเน้นเป้าหมายหรือ CTA นั้นให้เห็นชัด

invisionapp-cta-ออกแบบหน้าเว็บไซต์-landing-page
ตัวอย่างหน้า Landing Page ของ invisionapp.com ที่มีปุ่ม Call-to-Action ที่ชัดเจน

 

ลองดูไม่เสียหาย

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

เพราะเว็บไซต์ที่เรียบง่าย ไม่ได้ออกแบบได้ง่ายๆ

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

ความเรียบง่าย (เหมือนจะ) ทำง่าย ดูแล้วน่าจะใช้เวลาไม่ถึงชั่วโมง #ทำไมแพงจัง

ความเรียบง่าย (เหมือนจะ) คิดง่าย ดูแล้วคิดง่ายมากๆ ไม่พิศดาร #ทำไมแพงจัง

ความเรียบง่ายมันดูเหมือนงานไม่เสร็จ ดูแล้วมันโล่งๆ เคยเห็นคนอื่นให้เยอะกว่านี้อะ #ทำไมแพงจัง

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

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

เราเชื่อว่า ความเรียบง่ายนี้ล่ะ คือ อนาคต แม้ว่าเว็บไซต์จะเปลี่ยนรูปแบบไปเป็นอย่างไร หัวใจหลักของการออกแบบบนพื้นฐานความเรียบง่าย การเข้าใจมนุษย์ก็จะยังคงอยู่ต่อไปอย่างแน่นอน

หากคุณ เชื่อในเรื่องของการออกแบบเว็บไซต์ที่เน้นความเรียบง่าย ตรงประเด็น และตอบโจทย์ธุรกิจ ลองอ่านรายละเอียดบริการทำเว็บไซต์จาก Magnetolabs ได้ที่ Web Design Service

Author

Linda Kraivanich

Managing Partner และ Design Director ของ Magnetolabs เชื่อว่าการออกแบบคือการแก้ปัญหาอะไร และมีส่วนสำคัญกับทุกๆ สิ่งในชีวิต เวลาว่างชอบอ่านหนังสือ ฟัง Audiobook กำลังเห่อ CrossFit มีเป้าหมายในการพิชิต Full Marathon ในปีนี้
Managing Partner และ Design Director ของ Magnetolabs เชื่อว่าการออกแบบคือการแก้ปัญหาอะไร และมีส่วนสำคัญกับทุกๆ สิ่งในชีวิต เวลาว่างชอบอ่านหนังสือ ฟัง Audiobook กำลังเห่อ CrossFit มีเป้าหมายในการพิชิต Full Marathon ในปีนี้

Related Blog

Leave Your Comment