เว็บไซต์ธุรกิจเล็กควรใช้กี่สี และจัดสัดส่วนอย่างไรให้น่าเชื่อถือ
เว็บไซต์ร้านเล็กใช้สีหลัก 1 สี สีรอง 1 สี และสีเน้น 1 สี รวมกับพื้นขาวหรือเทาอ่อนก็เพียงพอ สัดส่วนที่ใช้กันบ่อยคือพื้นและสีกลางราว 60 สีหลัก 30 และสีเน้นสำหรับปุ่มหรือจุดที่ต้องการให้กดราว 10 ตรวจความคมชัดของตัวอักษรกับพื้นก่อนเสมอ ส่วนสีมงคลตามความเชื่อให้ใช้เป็นสีหลักหรือสีเน้นได้ถ้าเข้ากับแบรนด์ แต่ไม่ควรเอาความเชื่อมาแลกกับความอ่านง่าย
ร้านขนมออนไลน์รายหนึ่งทำเว็บเองด้วยเครื่องมือสำเร็จรูป เลือกสีชมพูเพราะชอบ เพิ่มเหลืองเพราะเป็นสีมงคลวันเกิด เติมเขียวให้ดูสดและฟ้าเพราะเทมเพลตมาแบบนั้น ผลคือหน้าแรกมีห้าสี ไม่มีสีไหนเด่น และลูกค้าหาปุ่มสั่งซื้อไม่เจอ
ปัญหานี้ไม่ได้อยู่ที่สีใดสีหนึ่ง แต่อยู่ที่ไม่มีใครกำหนดว่าสีแต่ละสีทำหน้าที่อะไร เมื่อกำหนดบทบาทได้ จำนวนสีก็เหลือน้อยลงเอง
จำนวนสีที่พอดีกับเว็บร้านเล็ก
สำหรับร้านที่มีสินค้าไม่กี่สิบชิ้น สีตามหน้าที่ 4 กลุ่มพอดีแล้ว ได้แก่ สีหลักของแบรนด์ สีรองที่เสริมสีหลัก สีเน้นสำหรับปุ่มและป้ายพิเศษ และสีกลางสำหรับพื้นกับตัวอักษร
ภาพสินค้าเองก็นำสีเข้ามาในหน้าอยู่แล้ว ถ้าสินค้ามีสีสดมาก ให้ลดสีของหน้าเว็บลง เพื่อไม่ให้แย่งกัน ร้านที่ขายผ้าสีจัดจึงเหมาะกับเว็บพื้นขาว ตัวอักษรเทาเข้ม สีหลักเดียว
สัดส่วน 60-30-10 ใช้อย่างไรกับหน้าเว็บ
ส่วนใหญ่เริ่มจากกฎ 60-30-10 ซึ่งเป็นแนวปฏิบัติของนักออกแบบที่ใช้กันมานาน ไม่ใช่มาตรฐานตายตัว
| สัดส่วน | บทบาท | ตัวอย่างบนเว็บ |
|---|---|---|
| ประมาณ 60 | สีกลางหรือสีพื้น | พื้นหลัง ช่องว่าง กล่องข้อความ |
| ประมาณ 30 | สีหลัก/สีรอง | แถบเมนู หัวข้อ ส่วนท้าย |
| ประมาณ 10 | สีเน้น | ปุ่มสั่งซื้อ ป้ายลดราคา ลิงก์สำคัญ |
ตัวเลขเป็นแค่จุดเริ่มต้น หน้าเว็บของร้านอาหารอาจใช้สีหลักมากกว่านี้เพราะต้องการอารมณ์อบอุ่น ขณะที่เว็บคลินิกอาจลดสีหลักเหลือน้อยเพื่อให้ดูสะอาด
ลำดับเลือกสีทีละขั้น
- เริ่มจากสีหลักของโลโก้หรือสินค้าหลัก ถ้ายังไม่มีโลโก้ ให้เลือกจากสีของสินค้าที่ขายดีที่สุด
- เลือกสีกลางสองสี คือขาวหรือครีมสำหรับพื้น และเทาเข้มหรือกรมเข้มสำหรับตัวอักษร ตัวอักษรสีดำสนิทอ่านได้แต่ดูแข็ง
- เลือกสีรองจากสีใกล้เคียงสีหลักหรือเฉดอ่อนกว่า ไม่ต้องหาสีใหม่
- เลือกสีเน้นที่ตัดกับสีหลัก ใช้เฉพาะปุ่มและจุดที่ต้องการให้กด
- ทดสอบบนมือถือจริงกลางแสงปกติ ไม่ใช่แค่บนจอคอมพิวเตอร์
เวลาเลือกสี การร่างลงกระดาษก่อนช่วยให้เห็นสัดส่วนเร็วกว่าเปิดโปรแกรม สมุดสเก็ตช์ด้านล่างเป็นสมุดกระดาษหนา หลายแผ่น เหมาะกับการระบายสีตัวอย่างหลายแบบแล้วเทียบกัน ข้อจำกัดคือสีที่ระบายบนกระดาษจะไม่เหมือนสีบนจอเสมอ จึงต้องเทียบกับจอจริงอีกครั้ง
ความอ่านง่ายต้องมาก่อนความเชื่อ
หลักที่ตรวจได้คือความต่างระหว่างสีตัวอักษรกับสีพื้น W3C แนะนำอัตราความต่างอย่างน้อย 4.5 ต่อ 1 สำหรับตัวอักษรปกติ ซึ่งมีเครื่องมือตรวจฟรีหลายตัว ใส่สีสองสีลงไปแล้วจะบอกผ่านหรือไม่ผ่าน
ตัวอย่างที่เจอบ่อยคือตัวอักษรเหลืองบนพื้นขาว เหลืองเป็นสีมงคลของวันอาทิตย์ในสายโหราศาสตร์ไทยหลายตำรา แต่บนพื้นขาวอ่านแทบไม่ออก ทางออกคือใช้เหลืองเป็นพื้นหลังปุ่มแล้วใส่ตัวอักษรสีเข้ม หรือใช้เป็นเส้นตกแต่ง
สีมงคลเอามาใช้ตรงไหนได้บ้าง
ถ้าต้องการให้สีตามความเชื่อมีที่ยืนในเว็บ แนวทางที่ทำได้จริงคือใช้เป็นสีเน้นหรือสีหลักที่เข้ากับสินค้า ความเชื่อไทยเรื่องสีประจำวันและความเชื่อจีนเรื่องสีแดงกับทองเป็นเรื่องของวัฒนธรรม ส่วนผลต่อยอดขายไม่มีงานวิจัยที่ใช้ยืนยันได้
ข้อดีของการใช้สีที่เจ้าของสบายใจคือจะสม่ำเสมอกับป้าย บัตรนามบัตร และบรรจุภัณฑ์ได้ง่าย เมื่อทุกอย่างสีเดียวกัน ลูกค้าจำได้เร็ว ซึ่งช่วยเรื่องความน่าเชื่อถือจริง ไม่เกี่ยวกับตัวสีเอง เรื่องสีโลโก้และพาเลตสำหรับธุรกิจมีเล่าละเอียดอยู่ใน สีมงคลสำหรับธุรกิจ และ สีโปรไฟล์ธุรกิจบนเว็บและโซเชียล
จุดพลาดที่พบบ่อยในเว็บร้านเล็ก
สิ่งที่ทำให้หน้าไม่น่าเชื่อถือมักเป็นเรื่องเล็ก ใช้เฉดสีน้ำเงินสามเฉดที่ใกล้กันแต่ไม่เท่ากัน ปุ่มคนละสีทุกหน้า ลิงก์สีเดียวกับตัวอักษรจนแยกไม่ออก พื้นหลังมีลวดลายทับตัวอักษร
ถ้าอยากไล่ตรวจเป็นข้อ ๆ ใช้รายการนี้ได้
- สีหลักไม่เกิน 1 สี สีรองไม่เกิน 1 สี
- ปุ่มสั่งซื้อใช้สีเดียวกันทุกหน้า
- ตัวอักษรผ่านเกณฑ์ความต่างสีบนพื้นทุกส่วน
- ลิงก์ต่างจากข้อความปกติทั้งสีและการขีดเส้น
- เปิดดูบนมือถือแล้วหาปุ่มสั่งซื้อได้ภายในสามวินาที
ข้อผิดพลาดอื่นที่เกี่ยวกับพาเลตมีรวบรวมใน ข้อผิดพลาดการเลือกพาเลตสีธุรกิจ
สรุป
เริ่มจากกำหนดสีหลักหนึ่งสี สีรองหนึ่งสี สีเน้นหนึ่งสี แล้วเติมสีกลางสำหรับพื้นและตัวอักษร ตรวจความต่างสีก่อนเปิดเว็บ ถ้าเจ้าของอยากใช้สีมงคลตามวันเกิด ให้ลองใส่ในบทบาทสีเน้นก่อน ถ้าอ่านไม่ชัดหรือขัดกับสินค้า ให้ยอมเปลี่ยนเฉดมากกว่าฝืนใช้ เพราะลูกค้าอ่านหน้าไม่ออกย่อมเสียมากกว่าสีไม่ตรงความเชื่อ
