Web Design 101

Web Design 101

ดีไซน์เว็บอย่างไรให้โดน

-- ฉบับผู้เริ่มต้น --

เว็บที่ดีไซน์สวยจะช่วยเพิ่มความน่าเชื่อถือ ดูมีความเชี่ยวชาญ และเพิ่มยอดขายได้มากขึ้น

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

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

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

ภาพจาก convertflow

เว็บที่ผ่านการดีไซน์ออกมาได้ดีนั้นจะถูกแบ่งออกมาเป็น 2 แกนด้วยกัน

  1. เว็บที่ดีไซน์สวย (User Interface) คุณจะเห็นได้เลยจากการเยี่ยมชมในเว็บไซต์นั้นๆ ว่าเค้าเก็บรายละเอียดในส่วนต่างๆได้อย่างดี ทุกองค์ประกอบผ่านการดีไซน์มา
  2. เว็บที่ใช้งานง่าย (User Experience) ประสบการณ์การใช้งานที่ดีนั้นจะถูกออกแบบโดยทีมดีไซน์เนอร์เช่นเดียวกัน แต่จะเป็นดีไซน์เนอร์ที่โฟกัสด้านนี้โดยเฉพาะ คุณจะรู้สึกได้เลยว่าเว็บนี้ใช้งานง่ายมาก โดยไม่จำเป็นต้องเรียนรู้อะไรเพิ่มเติมเลย

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

ทดสอบก่อนสร้างจริง

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

ให้ความสำคัญกับดีไซน์ในทุกๆจุด

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

Navigation

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

- มีแถบเฉพาะที่จำเป็นเท่านั้น ไม่จำเป็นต้องใส่ทุกอย่างลงไป อันไหนไม่สำคัญมากให้ลงไปใส่ด้านล่างตรง Footer แทน


- มีปุ่ม Call to action สำหรับให้กดเพื่อสร้างยอดที่ต้องการได้เลย เช่น ปุ่มติดต่อเราหรือสมัครสมาชิก โดยการดีไซน์ปุ่มต้องให้ชัดเจนว่ามันสามารถกดได้ 

ภาพจาก mixpanel

- Sticky Header ทำให้มันติดอยู่ด้านบนไม่ว่างจะเลื่อนลงมาแค่ไหน เพื่อให้ง่ายกับการใช้งานสำหรับเปลี่ยนหน้า หรือกดปุ่ม Call to action ได้ทันที

ภาพจาก studioac

- Craft for audiences ทำให้เหมาะกับผู้ใช้งานจริงๆ ยกตัวอย่าง เช่นเว็บไซต์ Zara แบรนด์ผู้นำด้านแฟชั่น รู้ว่ากลุ่มลูกค้าของเค้าคือผู้ใช้งาน Instagram เป็นหลัก จึงดีไซน์ให้คล้ายกับการใช้แอป Instagram เลยนั่นเอง

ภาพจาก zara

Typography

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

มาดูตัวอย่างเว็บที่แค่ใช้ฟอนต์ดีก็ทำให้เว็บดูโดดเด่นขึ้นมาได้

ภาพจาก sageculture
ภาพจาก louisansa

Color

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

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

นั่นทำให้ดูไม่มีความ Professional มากพอนั่นเอง

มาดูตัวอย่างเว็บที่ทำได้ดีกันครับ

ภาพจาก looker
ภาพจาก seedcamp

Mobile

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

นี่คือสิ่งจำเป็นที่เราต้องออกแบบประสบการณ์เว็บบนมือถือให้แตกต่างจากหน้าคอมพิวเตอร์


Think Like Users

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

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

ภาพจาก adobe

Maximize Great Content 

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

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

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

ภาพจาก Hubspot

Funnel

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

การสร้างให้ดีนั้นจะต้องเข้าใจพฤติกรรมของลูกค้าเราก่อนว่าเค้ามีวิธีการซื้อของบนออนไลน์อย่างไร? เพราะในแต่ละธุรกิจนั้นไม่เหมือนกัน

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

ภาพจาก crazyegg

Always Testing

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

เครื่องมือช่วยทดสอบเว็บดีไซน์ของคุณ

Google Optimize

ภาพจาก google

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

สรุปทั้งหมด

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

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

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


แล้วพบกันตอนต่อไปครับ

Happy Designing

W. JAMES

ดับบลิวเจมส์ Growth Master Certified โดย Growthhackers.com คนแรกของประเทศไทย ปัจจุบันเป็นเจ้าของบริษัท W JAMES เคยเป็นวิทยากรให้กับ SCG, มหาวิทยาลัยอัสสัมชัญ, Sharing Citizen, Getlinks และ Thailand Startup Week

นักเขียน