บทบาทของสีใน UX

เผยแพร่แล้ว: 2022-03-11

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

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

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

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

จิตวิทยาของสี

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

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

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

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

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

Zutano ใช้ชุดสีของเว็บไซต์สีเทาและสีแดง

P&N Bank ใช้จานสี UI สีแดงสด
ความแตกต่างเล็กน้อยในโทนสีของเว็บไซต์ส่งผลกระทบอย่างมากต่ออารมณ์ของเว็บไซต์ Zutano และ P&N Bank ต่างก็ใช้เฉดสีแดงและขาว แต่ไซต์ของพวกเขามีผลกระทบทางอารมณ์ที่แตกต่างกันโดยสิ้นเชิง

ความแตกต่างทางวัฒนธรรมในสี

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

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

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

จิตวิทยาสีแตกต่างกันไปทั่วโลก โดยขึ้นอยู่กับความสัมพันธ์ทางวัฒนธรรมเป็นหลัก
สีสามารถมีความหมายที่แตกต่างกันโดยสิ้นเชิงในวัฒนธรรมต่างๆ ทั่วโลก (ข้อมูลมีความสวยงาม)

ต้องการนักออกแบบ UX อิสระที่ทำงานเต็มเวลาในสหรัฐฯ

การจับคู่สี UX กับแบรนด์

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

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

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

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

  • สีแดง — สีแดงเป็นสีของอันตรายและความหลงใหล เช่นเดียวกับความตื่นเต้น เป็นสีที่เข้มมากและสามารถกระตุ้นปฏิกิริยาที่รุนแรงในผู้คน การทำให้สีสว่างขึ้นเป็นสีชมพูทำให้ดูเป็นผู้หญิงและโรแมนติกมากขึ้น ในขณะที่การทำให้เฉดสีแดงเข้มขึ้นเป็นสีแดงเข้มจะทำให้ดูอ่อนลงและเป็นแบบดั้งเดิมมากขึ้น
  • สีส้ม — สีส้มเป็นสีที่สร้างสรรค์มากซึ่งเกี่ยวข้องกับการผจญภัยและความเยาว์วัยด้วย มันมีพลังมากเช่นกัน เนื่องจากสีส้มมีความสัมพันธ์ที่แน่นแฟ้นกับสไตล์ยุค 70 จึงทำให้เกิดความรู้สึกย้อนยุคได้
  • สีเหลือง — สีเหลืองมีความสุข มองโลกในแง่ดี และร่าเริง เป็นที่นิยมในการออกแบบสำหรับเด็กและผู้ใหญ่ เฉดสีพาสเทลมากกว่ามักถูกใช้เป็นสีสำหรับทารกที่เป็นกลางทางเพศ ในขณะที่สีเหลืองที่สว่างกว่านั้นเป็นที่นิยมในการออกแบบที่สร้างสรรค์ เฉดสีเหลืองเข้มขึ้นกลายเป็นสีทองซึ่งสัมพันธ์กับความมั่งคั่งและความสำเร็จ
  • สีเขียว — สีเขียวมีความสัมพันธ์ที่หลากหลาย ในแง่หนึ่ง มันกระตุ้นความรู้สึกของความมั่งคั่งและประเพณี (โดยเฉพาะเฉดสีที่เข้มกว่า) ในขณะที่อีกด้านหนึ่ง มันมีความเกี่ยวข้องอย่างยิ่งกับสิ่งแวดล้อมและธรรมชาติ มะนาวเขียวมักเกี่ยวข้องกับการต่ออายุและการเติบโต
  • สีน้ำเงิน — สีน้ำเงินมักเกี่ยวข้องกับความภักดีและความไว้วางใจ บลูส์ที่สว่างกว่าสามารถเชื่อมโยงกับการสื่อสาร ในขณะที่บลูส์ที่มืดกว่าและเข้มกว่านั้นสามารถเชื่อมโยงกับความเศร้าและความซึมเศร้า สีฟ้าเป็นสีที่ทุกคนชื่นชอบมากที่สุดในโลก ซึ่งอาจอธิบายได้ว่าทำไมหลายบริษัทจึงเลือกใช้เฉดสีฟ้าเพื่อสร้างแบรนด์ของตน
  • ม่วง — ม่วงเป็นอีกเฉดสีหนึ่งที่มีความหมายหลากหลาย มีความเกี่ยวข้องกับราชวงศ์และความมั่งคั่งมานานแล้ว (เนื่องจากสีย้อมสีม่วงหายากในอารยธรรมโบราณหลายแห่ง จึงสงวนไว้สำหรับราชวงศ์) แต่ยังเกี่ยวข้องกับความลึกลับและจิตวิญญาณ สีม่วงยังสามารถทำให้เกิดความคิดสร้างสรรค์
  • สีดำ — สีดำแสดงถึงความซับซ้อนและความหรูหรา นอกจากนี้ยังสามารถเชื่อมโยงกับความเศร้าโศกและการปฏิเสธได้ ขึ้นอยู่กับสี UX อื่นๆ ที่ใช้ควบคู่ไปกับสีดำ มันสามารถให้ความรู้สึกสมัยใหม่หรือแบบดั้งเดิม เป็นทางการหรือไม่เป็นทางการ
  • สีขาว — สีขาวเชื่อมโยงกับความบริสุทธิ์ ความไร้เดียงสา และแง่บวก สีขาวยังเป็นที่นิยมอย่างมากในการออกแบบที่เรียบง่าย เนื่องจากมีความเป็นกลางและเรียบง่าย เช่นเดียวกับสีดำ สีขาวสามารถแสดงลักษณะเฉพาะของสีอื่นๆ ที่ใช้ได้อย่างง่ายดาย
  • สีเทา — สีเทามีความหมายที่หลากหลาย ขึ้นอยู่กับบริบท อาจเป็นแบบอนุรักษ์นิยมและซับซ้อนหรือสกปรกและน่าเบื่อ มันอาจจะไร้อารมณ์หรือเจ้าอารมณ์ นอกจากนี้ยังสามารถเชื่อมโยงกับความเศร้าโศกและความโศกเศร้า
  • สีน้ำตาล — สีน้ำตาล (ซึ่งจริงๆ แล้วเป็นสีส้มเข้ม) มีความเกี่ยวข้องกับการอยู่บนพื้นและพื้นดิน มันยังเกี่ยวข้องกับธรรมชาติและแม้กระทั่งความผาสุก และแน่นอน มันสามารถเชื่อมโยงกับความสกปรกหรือสกปรกได้

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

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

การใช้จิตวิทยาสีที่เป็นที่ยอมรับเป็นวิธีที่แข็งแกร่งในการเสริมสร้าง UX
แนวคิดของแอปสำหรับรดน้ำต้นไม้นี้ใช้เฉดสีเขียวที่สวยงามเป็นสีหลัก โดยมีการใช้สีน้ำเงิน สีเหลือง และสีแดงในลักษณะที่ผู้ใช้เข้าใจได้ (โดยเอมี่ฮอลลีย์เฮิร์ส)

การใช้สี UX ที่แปลกใหม่

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

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

โครงร่างสีของเว็บไซต์ที่ไม่คาดคิด
Hogan Lovells สร้างการออกแบบที่ทันสมัยด้วยจานสีที่สดมาก

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

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

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

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

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

กฎ 60-30-10

กฎ 60-30-10 เป็นทฤษฎีง่ายๆ ในการสร้างจานสีที่มีความสมดุลและน่าสนใจ แนวคิดก็คือว่าสีเดียว—โดยทั่วไปเป็นสิ่งที่ค่อนข้างเป็นกลาง (ไม่ว่าจะตามตัวอักษรหรือทางจิตวิทยา)—ประกอบขึ้นเป็น 60% ของจานสี สีเสริมอื่นคิดเป็น 30% ของจานสี จากนั้นใช้สีที่สามเป็นตัวเน้นสำหรับส่วนที่เหลืออีก 10% ของการออกแบบ

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

ตัวอย่างที่ดีของกฎ 60-30-10 ในทฤษฎีสีของการออกแบบเว็บ
เว็บไซต์ของ Clarity Stress Management นำเสนอกฎ 60-30-10 อย่างดี โดยมีสีม่วง 60% สีขาว 30% และสีม่วงแดง 10% ในส่วนหัวและส่วนท้าย

บทสรุป

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

  • จิตวิทยาการออกแบบและประสาทวิทยาศาสตร์ของ Awesome UX
  • UI ที่มืด ความดีและความชั่ว สิ่งที่ควรทำและไม่ควรทำ
  • การสร้างแบรนด์ตามอารมณ์เพื่อการออกแบบผลิตภัณฑ์อย่างยั่งยืน
  • ใช้แรงบันดาลใจของคุณ – A Guide to Mood Boards
  • การออกแบบที่โน้มน้าวใจ: การใช้จิตวิทยาขั้นสูงอย่างมีประสิทธิภาพ