สีส่งผลต่อ UX และพฤติกรรมผู้ใช้อย่างไร
เผยแพร่แล้ว: 2016-12-24สี: เมื่อการออกแบบทำให้ถูกต้อง คุณมักจะไม่สังเกตเห็น แต่เมื่อมันผิด ไม่สำคัญว่าจะเป็นพื้นหลังที่สว่างเกินไป สะดุดตา หรือข้อความสีดำบนพื้นหลังสีเทาเข้ม การ เลือกสีที่ต่ำกว่ามาตรฐานอาจทำลาย แม้กระทั่งแอปที่ใช้งานได้ดีที่สุด เช่นเดียวกับแง่มุมอื่นๆ ของการออกแบบ สีไม่ได้มีไว้สำหรับเติมแต่งแอปเท่านั้น สีสามารถเป็นเครื่องมือเช่นเดียวกับคุณสมบัติอื่นๆ ของประสบการณ์ผู้ใช้
ปรัชญาการออกแบบกราฟิกใช้ในการออกแบบแอป ตั้งแต่ขนาดของแต่ละองค์ประกอบ ไปจนถึงการเลื่อนผ่าน UI ไปจนถึงใช่ สี ส่งผลต่อพฤติกรรมของผู้ใช้ มีเหตุผลที่ดีว่าทำไมนักออกแบบมักใช้เวลาในช่วงเดือนแรก ๆ ของโครงการที่ต้องทนทุกข์ทรมานกับจานสีและไม่ใช่โครงลวด
การเลือกจานสีที่สมบูรณ์แบบอาจสร้างความแตกต่างระหว่างการออกแบบแอปการทำสมาธิที่ช่วยให้ผู้ใช้ผ่อนคลายได้จริงกับแอปที่ทำให้พวกเขาต้องการโยนโทรศัพท์ไว้ที่ผนัง เป็นความแตกต่างระหว่างแอปธนาคารที่ทำให้คุณกังวลใจเกี่ยวกับการตรวจสอบยอดเงินคงเหลือและแอปที่ช่วยคลายความกังวลว่าเงินรางวัลงวดหน้าจะมาถึงเมื่อใด
ดังนั้นคุณจะทำให้ถูกต้องได้อย่างไร และคุณสามารถทำอะไรเพื่อให้เชี่ยวชาญด้านสีในการออกแบบของคุณ
ปรัชญาการออกแบบกราฟิก: ทฤษฎีสี
ก่อนที่จะเจาะลึกปรัชญาการออกแบบกราฟิก (และจิตวิทยา!) สิ่งสำคัญคือต้องเข้าใจหลักการพื้นฐานของสีและการออกแบบ แม้ว่าสีอาจดูไม่ซับซ้อนนัก แต่ก็มีเหตุผลที่ดีว่าทำไมทุกชั้นเรียนศิลปะไม่เพียงเริ่มต้นด้วยบทเรียนเกี่ยวกับวิธีใช้สีเท่านั้น แต่ยังรวมถึงวิธี สร้าง สีด้วย
พื้นฐาน — ตามที่อธิบายโดยวงล้อสี — นั้นเรียบง่าย: สามารถผสมสีหลัก (สีแดง สีเหลือง และสีน้ำเงิน) เพื่อสร้างสีรอง (สีเขียว สีม่วง และสีส้ม) ในทำนองเดียวกัน คุณสามารถเพิ่มเศษส่วนของสีขาวต่างๆ ลงในสีเพื่อสร้างสีอ่อน และสามารถเพิ่มสีดำเพื่อสร้างเฉดสีได้
สีที่อยู่ตรงข้ามกัน (เช่น สีแดงและสีเขียว หรือสีน้ำเงินและสีส้ม) ถือเป็นสีที่เสริมกัน สีเหล่านี้ตัดกันอย่างมาก ทำให้โดดเด่นเมื่ออยู่ติดกัน (หรืออยู่ด้านบน) ซึ่งกันและกัน
สีที่อยู่ติดกันถือว่าเป็นสีที่คล้ายคลึงกัน สีเหล่านี้มีความเปรียบต่างต่ำกว่ามาก ซึ่งหมายความว่าสีเหล่านี้มักจะไม่โดดเด่นมากนักเมื่ออยู่ใกล้กัน
ไม่มีอะไรโดยเนื้อแท้ "ถูก" หรือ "ผิด" เกี่ยวกับสีที่มีความเปรียบต่างสูงหรือต่ำ บางครั้งแอปพลิเคชันจะเรียกร้องให้ใช้สีที่สว่างซึ่งตัดกันอย่างสิ้นเชิง บางครั้งคุณอาจต้องการสิ่งที่อ่อนโยนกว่าเล็กน้อย โดยทั่วไป ยิ่งคุณต้องการให้บางสิ่งโดดเด่นมากเท่าใด คุณก็ยิ่งควรใช้สีที่ตัดกันมากขึ้นเท่านั้น
วิธีที่ดีที่สุดในการทำความเข้าใจว่าสีต่างๆ เข้ากันได้อย่างไร (และไม่เข้ากัน) ก็คือการเล่นกับสีเหล่านั้น แม้ว่าคุณจะไม่ได้ทำงานในโครงการในขณะนี้ การหมุนวงล้อสีของ Adobe อย่างรวดเร็วอาจทำให้คุณคิดเกี่ยวกับสีในรูปแบบใหม่
Swatches Of Emotion: สีและจิตวิทยา
เมื่อคุณสร้างความแข็งแกร่งให้กับปรัชญาการออกแบบกราฟิกที่อยู่เบื้องหลังแอปของคุณ คุณไม่สามารถคิดแค่ว่าสิ่งต่าง ๆ ออกมาเป็นอย่างไร แต่คุณต้องคิดด้วยว่าพวกมันรู้สึกอย่างไร เราไม่ได้พูดถึงการตอบสนองแบบสัมผัสเช่นกัน นับตั้งแต่ที่โยฮันน์ โวล์ฟกัง เกอเธ่ศึกษาผลกระทบทางสรีรวิทยาของสี เราก็หมกมุ่นอยู่กับการใช้สีเพื่อสร้างผลกระทบทางร่างกายและอารมณ์
แม้กระทั่งทุกวันนี้ สีก็ยังเป็นศูนย์กลางในปรัชญาการออกแบบของหลายแบรนด์ การดูแลสุขภาพ ธุรกิจ และรัฐบาล มักใช้สีน้ำเงิน เนื่องจากให้ความรู้สึกไว้วางใจและความเป็นมืออาชีพ สีเขียวถูกมองว่าเป็นสีที่ดูอ่อนเยาว์ที่เปี่ยมไปด้วยพลัง และแน่นอนว่าสะท้อนถึงสิ่งแวดล้อมและความใกล้ชิดกับธรรมชาติ สีแดงให้ความรู้สึกกระปรี้กระเปร่าและหุนหันพลันแล่น ให้ความรู้สึกถึงความเร็ว ประสิทธิภาพ และพลัง ทุกสีที่เราเห็น (และแน่นอนทุกสีที่เราเชื่อมโยงกับแบรนด์บางแบรนด์โดยแท้จริง) บ่งบอกถึงบางสิ่งบางอย่าง ไม่ว่าโดยตรงหรือโดยอ้อม ที่ช่วยผลักดันการรับรู้ของเราในแต่ละแบรนด์
นึกถึงแบรนด์และสัญลักษณ์ที่คุณรู้จักว่าเป็นสีที่เน้นสีเป็นหลัก Apple, Wikipedia และ The New York Times ทั้งหมดมีเฉดสีเทา ซึ่งแสดงถึงความน่าเชื่อถืออันเงียบสงบ แบรนด์เหล่านี้ถูกมองว่ามีความสมดุลและเชื่อถือได้ Whole Foods, John Deere และ Starbucks ทั้งหมดมีเฉดสีเขียวในโลโก้ของพวกเขา ซึ่งเชื่อมโยงธรรมชาติและความสมบูรณ์เข้ากับแบรนด์และผลิตภัณฑ์ของพวกเขา
บางสียังเหนือกว่าแบรนด์ของตน โดยกำหนดอุตสาหกรรมทั้งหมด ลองนึกถึงจำนวนร้านอาหารฟาสต์ฟู้ดหรือร้านอาหารที่ใช้สีแดงหรือสีเหลือง เป็นต้น สีเหล่านี้ช่วยกระตุ้นจิตใจเรา ทำให้เราอยู่ในสถานที่ทางจิตวิทยาที่ทำให้เราต้องซื้อผลิตภัณฑ์บางประเภท
แม้ว่าสิ่งนี้จะเป็นสิ่งที่นักการตลาดคิดมานานแล้ว แต่วิทยาศาสตร์ก็พิสูจน์ให้เห็นถึงความรู้สึกร่วมกันมากมายของเราเกี่ยวกับสี ตัวอย่างเช่น พบว่าสีแดงทำให้บางคนตอบสนองต่อสิ่งเร้าบางอย่างได้เร็วขึ้นและมีพลังมากขึ้น นอกจากนี้ยังสามารถข่มขู่: นักวิจัยพบว่าเมื่อผู้ทดสอบเห็นสีแดง คะแนนของพวกเขาแย่ลง
แม้แต่คนแปลกหน้า? สีของยาเม็ดมีผลเล็กน้อยต่อวิธีการทำงาน ยาเม็ดสีน้ำเงินทำงานได้ดีที่สุดในฐานะยากล่อมประสาท สีเหลืองทำงานได้ดีที่สุดในฐานะยากล่อมประสาท และในทุกกรณี สีสดใสทำงานได้ดีที่สุด แม้ว่านี่จะเป็นเพียงผลของยาหลอกที่กระตุ้นการตอบสนองของเราต่อยาออกฤทธิ์ แต่ผลกระทบก็แข็งแกร่งเพียงพอสำหรับบริษัทต่างๆ ที่จะต้องพิจารณาเมื่อทำการผลิตยาชนิดใหม่
ตอนนี้ เราไม่ได้บอกว่าการใช้โทนสีที่เป็นสีเหลืองในแอปติดตามอารมณ์ของคุณจะทำให้มันมีประสิทธิภาพในการเป็นยากล่อมประสาท แต่จานสีที่คุณเลือกอาจมีผลกระทบต่ออารมณ์ของผู้ใช้อย่างสมเหตุสมผล ดังนั้น ควรเลือกอย่างชาญฉลาด
แนะนำสำหรับคุณ:
Metaverse จะพลิกโฉมอุตสาหกรรมยานยนต์อินเดียได้อย่างไร
บทบัญญัติต่อต้านการแสวงหากำไรสำหรับสตาร์ทอัพในอินเดียมีความหมายอย่างไร?
Edtech Startups ช่วยให้แรงงานอินเดียเพิ่มพูนทักษะและเตรียมพร้อมสู่อนาคตได้อย่างไร...
หุ้นเทคโนโลยียุคใหม่ในสัปดาห์นี้: ปัญหาของ Zomato ยังคงดำเนินต่อไป, EaseMyTrip Posts Stro...
สตาร์ทอัพอินเดียใช้ทางลัดในการไล่ล่าหาทุน
แพลตฟอร์มการตลาดดิจิทัล Logicserve ระดมทุน INR 80 Cr รีแบรนด์เป็น LS Dig...
สีและการใช้งาน
การออกแบบไม่ใช่แค่รูปลักษณ์ที่สวยงามเท่านั้น แต่ยังเกี่ยวกับการทำงานและการใช้งาน ซึ่งเป็นหลักการสองประการที่สำคัญที่สุดสำหรับนักออกแบบ UX หาก UX ไม่ราบรื่น ไม่สำคัญหรอกว่าจานสีที่คุณเลือกจะสวยงามแค่ไหน หรือ UI ของคุณน่าทึ่งแค่ไหน หากผู้ใช้ไม่สามารถเลื่อนดูได้อย่างมีประสิทธิภาพ ก็จะไม่มีพลังเหลืออยู่
แต่สีเกี่ยวข้องอะไรกับสิ่งเหล่านี้ทั้งหมด?
เรียบง่าย: สีเป็นเครื่องมือที่ช่วยนำทางสายตา หากคุณสามารถใช้สีได้อย่างมีประสิทธิภาพ คุณสามารถแนะนำผู้ใช้ใหม่ผ่านแอปของคุณได้โดยไม่ต้องมีบทช่วยสอนที่ยาวเหยียด วิดีโอที่ซับซ้อนหลายชุด หรือแม้แต่คำเดียว UI ที่ใช้งานง่ายใช้สีเพื่อชี้นำความสนใจของผู้ใช้ไม่เพียงเท่านั้น แต่ยังรวมถึงการโต้ตอบกับประสบการณ์ทั้งหมดด้วย
ลองนึกภาพสักครู่ว่าคุณกำลังพัฒนาแอปสำหรับบริษัทจัดเลี้ยงที่ช่วยให้องค์กรขนาดใหญ่ปรับแต่งคำสั่งซื้ออาหารได้อย่างง่ายดาย ผู้มีโอกาสเป็นลูกค้าดาวน์โหลดแอปของคุณเป็นครั้งแรกและเปิดขึ้นมา พวกเขาเห็นอะไร?
ในแอพ รายการเมนูส่วนใหญ่ ซึ่งรวมถึงพื้นหลังและกล่องข้อมูลใดๆ จะถูกระบายสีในจานสีโทนสีเทาที่ปิดเสียงและทึบ ข้อยกเว้นประการหนึ่งคือกล่องสีส้มแดงที่ระบุว่า "สั่งซื้อ" ในฐานะนักออกแบบ คุณทราบดีว่าสิ่งแรกที่ผู้ใช้ต้องการทำเมื่อใช้แอปของคุณคือการตั้งค่าการสั่งอาหารอย่างไม่ลำบากใจ แทนที่จะซ่อนคุณลักษณะนี้ไว้ลึกลงไปในแอป หรือต้องการให้พวกเขาเลื่อนลงทีละหน้าเพื่อไปที่มัน คุณกำลังวางไว้ด้านหน้าและตรงกลาง ไม่เพียงแค่นั้น แต่คุณกำลังดึงดูดสายตาของพวกเขาไปที่มันทันที สีช่วยให้มองเห็นได้ชัดเจน และแสดงให้ผู้ใช้ใหม่เห็นอย่างชัดเจนว่าพวกเขาต้องไปที่ไหน
ในทำนองเดียวกัน เราโต้ตอบกับสีในรูปแบบต่างๆ ทุกวัน และสร้างความสัมพันธ์ทางสังคมบางอย่างในใจของเรา ใช้ไฟหยุด ตัวอย่างเช่น สีเขียวหมายถึงไป สีแดงหมายถึงหยุด และสีเหลืองหมายถึงการชะลอตัว (หรือเตือนเราถึงสิ่งที่อยู่ข้างหน้า) โดยการใส่คำเตือนที่สำคัญเป็นสีเหลืองหรือโดยการใช้สีแดงเพื่อเน้นบางสิ่ง คุณสามารถถ่ายทอดข้อความที่ให้ความสำคัญกับผู้ใช้สำหรับการป้อนข้อมูลได้อย่างมีประสิทธิภาพ
ตรรกะเดียวกันนั้นสามารถใช้ได้มากกว่าแค่หน้าจอเตือน การเปลี่ยนสีของปุ่มในแอปที่นำไปสู่การซื้อในแอปอาจส่งผลกระทบอย่างมากต่ออัตราการแปลง
แม้ว่าจะไม่ได้อยู่ในแอป แต่ HubSpot พบว่าสามารถเพิ่มอัตรา Conversion ได้ถึง 21% เพียงแค่ทำให้ปุ่มเป็นสีแดงแทนที่จะเป็นสีเขียว ไม่ได้หมายความว่าคุณควรเปลี่ยนปุ่มการซื้อในแอปให้เป็นสีแดงเข้ม แต่มีข้อโต้แย้งที่ต้องทำที่นี่ว่าสีไม่สามารถเป็นส่วนหนึ่งของปรัชญาการออกแบบของคุณได้ แต่ต้องเป็นศูนย์กลางของ ปรัชญาการพัฒนาแอปทั้งหมดของคุณ
การใช้สีอย่างชาญฉลาด: ปรัชญาของการออกแบบและการเข้าถึง
ที่ Proto.io การช่วยสำหรับการเข้าถึงเป็นสิ่งสำคัญในแนวหน้าของปรัชญาการออกแบบของเราเสมอ พูดตรงๆ ก็คือ การช่วยสำหรับการเข้าถึงเป็นสิ่งที่ต้องผสานเข้ากับดีไซน์ที่ดี ถ้าไม่มี แสดงว่าการออกแบบไม่ค่อยดีนัก
ผู้ชายประมาณ 8% และผู้หญิง .5% มีอาการตาบอดสีบางรูปแบบ ตรงกันข้ามกับความคิดที่นิยม ไม่มีอาการตาบอดสีแบบเอกพจน์ แต่ตาบอดสีสีแดง/เขียวมักพบบ่อยที่สุด ผู้ที่เป็นโรคตาบอดสีรูปแบบนี้มักจะมีปัญหาในการมองการเปลี่ยนแปลงของสีแดงและสีเขียว แม้ว่าความรุนแรงของอาการตาบอดสีรูปแบบนี้จะแตกต่างกันไปเล็กน้อย แม้แต่การตาบอดสีแดง/เขียวที่ไม่รุนแรงก็ทำให้การใช้แอปหลายๆ แอปแทบจะเป็นไปไม่ได้เลย
นอกเหนือจากอาการตาบอดสีแล้ว ผู้ใช้ที่สายตาสั้นมักจะมีปัญหาในการอ่านข้อความที่มีคอนทราสต์ต่ำ เว้นแต่พวกเขาจะขยับหน้าจอไปใกล้ใบหน้าของพวกเขา ซึ่งอาจทำลายความสามารถในการใช้งานของแอพจำนวนมาก
วิธีแก้ปัญหาทั้งสองนี้ค่อนข้างง่าย: หลีกเลี่ยงการใช้สีที่ไม่ตัดกันเมื่อคุณแสดงข้อความบนพื้นหลัง แม้ว่าคุณจะไม่สามารถรับประกันได้ว่าทุกคนจะสามารถเห็นแอปของคุณในแบบที่คุณตั้งใจไว้ แต่ถ้าคุณใช้สีที่ตัดกัน อย่างน้อย คุณก็จะให้แอปแก่ผู้คนที่ใช้งานได้ ในทำนองเดียวกัน การใช้สีที่มีคอนทราสต์สูงจะทำให้ทุกคนอ่านข้อความได้ง่ายขึ้น แม้ว่าจะไม่มีปัญหาด้านการมองเห็นก็ตาม
อีกทางเลือกหนึ่งในการเพิ่มการเข้าถึงคือการนำเสนอจานสีที่สลับได้ในแอปของคุณ แม้ว่านี่จะไม่ใช่ตัวเลือกสำหรับทุกคน แต่ก็ช่วยเพิ่มการเข้าถึงแอปของคุณได้อย่างมาก คุณยังสามารถอนุญาตให้ผู้ใช้เปลี่ยนสีของคุณสมบัติเฉพาะได้ ตัวอย่างเช่น คุณอาจมีตัวเลือกที่จะเปลี่ยนสีเฉพาะจุดของแอป หรือสีของข้อความตลอดทั้งแอป แม้ว่าตัวเลือกทั้งสองนี้อาจทำให้คุณไม่สามารถควบคุมได้ แต่จะช่วยให้มั่นใจได้ว่าแอปของคุณจะเข้าถึงผู้ชมได้กว้างขึ้น
หากคุณยังคงพยายามหาวิธีผสมผสานสีเข้ากับปรัชญาการออกแบบของคุณในลักษณะที่ไม่เป็นอันตรายต่อการเข้าถึงแอปของคุณ เราขอแนะนำให้ตรวจสอบไลบรารีดีไซน์ Material ของ Google
การเลือกจานสีที่สมบูรณ์แบบ: เสริมสร้างปรัชญาการออกแบบของคุณ
แม้ว่าจะต้องชัดเจนว่ามีกฎเกณฑ์บางอย่างที่ต้องปฏิบัติตามเมื่อพูดถึงสี แต่ก็ไม่จำเป็นต้องเป็นวิทยาศาสตร์เช่นกัน สีมักจะเกี่ยวกับสิ่งที่เป็นนามธรรมมากกว่า เช่น ความรู้สึก แม้ว่าแอปของคุณไม่ได้พยายามแสดงอารมณ์บางอย่างในผู้ใช้ แต่ก็ไม่ได้หมายความว่าจะไม่แสดงออกมา แม้ว่าการค้นหาจานสีที่สมบูรณ์แบบจะไม่ใช่งานขาวดำ เราขอแนะนำให้คุณเริ่มด้วยเฉดสีเทา
สร้างต้นแบบแบบเรียบของแอปของคุณด้วยการไล่ระดับสีเทาและใช้เป็นพื้นฐานของคุณ จดบันทึกรูปลักษณ์และความรู้สึก: ส่งต่อให้ทีม QA ของคุณ และดูว่าพวกเขาจะพูดอะไร กระบวนการปฐมนิเทศของคุณมืดมนโดยไม่มีสีหรือไม่? คุณดึงดูดความสนใจไปยังส่วนที่ไม่ถูกต้องของแอปของคุณหรือไม่? ด้วยข้อเสนอแนะนี้ ให้ออกแบบต้นแบบเพิ่มเติมอีกสองสามตัว คราวนี้นำสีเข้ามา อย่าพึ่งพาจานสีเดียว ให้ใช้คำแนะนำจากเว็บไซต์ดีไซน์ Material ของ Google และลองใช้ตัวอย่างบางส่วนแทน
ส่งการแก้ไขเหล่านี้ไปยัง QA ด้วย อย่ากลัวที่จะทดสอบ A/B ระหว่างกัน (และเทียบกับเวอร์ชันสีเทาดั้งเดิม) ตรวจสอบให้แน่ใจว่าคุณกำลังถามคำถามหนัก ๆ เกี่ยวกับสีที่คุณกำลังนำเข้ามาในการต่อสู้ คุณใช้สีเพื่อชี้นำสายตาของผู้ใช้ในแอปหรือไม่? คุณเพียงแค่โยนสีลงบนหน้าจอเพื่อเพิ่มประกายไฟหรือไม่? สีเบี่ยงเบนความสนใจของผู้ใช้จากการไปยังที่ที่พวกเขาต้องการไปหรือไม่?
อย่าลืมเกี่ยวกับจิตวิทยาของผู้ใช้หรือการเข้าถึง หากคุณกำลังสร้างแอปท่องเที่ยว คุณต้องการให้ทุกอย่างเป็นสีแดงสดหรือไม่? หากคุณกำลังสร้างแอปด้านการดูแลสุขภาพ พื้นหลังของคุณควรเป็นสีเขียวจริงหรือ สีของคุณมีความคมชัดเพียงพอสำหรับข้อความที่อ่านง่ายหรือไม่?
การออกแบบ UX ที่ดีนำคำถามเหล่านี้มาพิจารณาด้วย เพราะสีมีผลต่อพฤติกรรมและความเพลิดเพลินของผู้ใช้อย่างชัดเจน หากปรัชญาการออกแบบของคุณไม่คำนึงถึงเรื่องนี้ คุณสามารถสร้างแอปที่ไม่สามารถเข้าถึงได้หรือใช้งานได้อย่างที่คุณคิด ตรวจสอบให้แน่ใจว่าคุณกำลังสร้างต้นแบบการออกแบบของคุณในทุกขั้นตอน และอย่ายึดติดกับสีหนึ่งหรือสองสีมากเกินไป
ทดลอง เลือกสีอื่น และแก้ไขต่อไปจนกว่าคุณจะได้จานสีที่เหมาะกับคุณที่สุด