5 เทคนิค ออกแบบเว็บไซต์ให้ดีขึ้น ด้วยหลัก Simplicity

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

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

หลักการความ ‘ง่าย’ ที่คนออกแบบเว็บไซต์ควรรู้

Keep it simple, But significant.

—Don Draper

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 เทคนิคการออกแบบเว็บไซต์ดีขึ้น ด้วยหลักความเรียบง่าย

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 (อย่าให้เกิน 5 สิ่ง)

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

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

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

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

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

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

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

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

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

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

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

4. Always Design with a System in Mind

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

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

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

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

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

ตัวอย่างหน้า Landing Page ของ invisionapp.com ที่มีปุ่ม Call-to-Action ที่ชัดเจน

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

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

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

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

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

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

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

ในความเป็นจริง การออกแบบเว็บไซต์ให้ออกมา “เข้าใจง่าย เข้าถึงง่าย ตัดสินใจง่าย” –นั้นมันไม่ง่าย

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

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

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

ตอนนี้โบกำลังเปิดบริษัทที่รับสร้างเว็บไซต์สำหรับธุรกิจ B2B Professional Service โดยเฉพาะ หากคุณสนใจสามารถดูรายละเอียดได้ที่ Basicmagic – Bangkok Web Design Agency for B2B Business

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Privacy Preferences

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

Allow All
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

Save