UI ที่มืด ความดีและความชั่ว สิ่งที่ควรทำและไม่ควรทำ

Dark UI นั้นน่าทึ่ง มีสไตล์ และสง่างาม อย่างไรก็ตาม นักออกแบบควรก้าวอย่างระมัดระวังหากพวกเขาเลือกที่จะเดินบน “ด้านมืด”

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

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

การศึกษาส่วนใหญ่พบว่าข้อความสีเข้มบนพื้นหลังสีอ่อนนั้นดีกว่าข้อความสีอ่อนบนพื้นหลังสีเข้ม กล่าวคือ อ่านง่ายกว่า ในการศึกษาที่มีชื่อเสียงเรื่องหนึ่ง "ความล้าทางสายตา" นั้นยิ่งใหญ่กว่าอย่างเห็นได้ชัดเมื่อผู้ทดลองอ่านตัวอักษรสีสว่างบนพื้นหลังสีเข้ม เทียบกับตัวอักษรสีเข้มบนพื้นหลังสีอ่อน (Bauer, D., Bonacker, M. และ Cavonius, CR 1983)

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

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

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

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

มีหลายสิ่งเช่น Computer Vision Syndrome (CVS) และ "ไม่สบายตา" จากการศึกษาพบว่า กว่า 83 เปอร์เซ็นต์ของชาวอเมริกันใช้อุปกรณ์ดิจิทัลมากกว่าสองชั่วโมงต่อวัน โดย 60.5% รายงานว่าพวกเขามีอาการตาล้าทางดิจิทัล (ตาสว่างเกินไป: ภาวะที่กลืนไม่เข้าคายไม่ออกของอุปกรณ์ดิจิทัล)

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

นักพัฒนาส่วนใหญ่ใช้หน้าจอสีดำที่มีรูปแบบรหัสสีเพื่อลดอาการปวดตา ตามที่ Kevin Bloch ผู้พัฒนา Toptal กล่าวไว้ว่า: “พื้นหลังสีดำช่วยลดอาการปวดตาและทำให้การอ่านรหัสสีอัตโนมัติง่ายขึ้น ซึ่งทำให้รหัสเข้าใจได้เร็วยิ่งขึ้นเมื่อเหลือบมอง”

นักพัฒนา Toptal Amin Shah Gilani กล่าวเสริมว่า: "โดยส่วนตัวแล้วฉันใช้ธีมมืด Solarized สำหรับโปรแกรมแก้ไขโค้ดของฉัน ฉันชอบธีมสีเข้มเพราะว่าพื้นหลังสีเข้มจะทำให้ดวงตาดูสบายตา โดยเฉพาะอย่างยิ่งเมื่อฉันชอบทำให้แสงสลัวหรือทำงานในตอนกลางคืน”

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

เมื่อ Dark UI ทำงานได้ดี

UI ที่เกี่ยวข้องกับความบันเทิงส่วนใหญ่ (สมาร์ททีวี คอนโซลเกม และแอปทีวีและภาพยนตร์) มักจะมีการออกแบบ UI ที่มีธีมสีเข้ม ด้วยเหตุผลที่ดี กิจกรรมที่เกี่ยวข้องกับความบันเทิงส่วนใหญ่เกิดขึ้นในตอนเย็น โดยจะดูจากระยะไกล 6-10 ฟุต และรับชมในห้องที่มีแสงสลัว กล่าวคือ หน้าจอจะเข้ากับสภาพแวดล้อม นอกจากนี้ เนื้อหาที่มีสีสัน (เช่น ภาพหน้าปกและโปรโมชัน) มีความโดดเด่นอย่างมากใน UI ที่มีธีมสีเข้ม

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

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

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

ควรใช้ Dark UI เฉพาะกับข้อมูลที่เบาบาง ข้อความน้อยที่สุด และ "เป็นก้อน" โดยเน้นที่ภาพอย่างมาก—เน้นที่ข้อความ หากใช้ข้อความ ควรมีความเปรียบต่างสูงกับพื้นหลังสีเข้ม โดยควรเป็นสีขาวล้วนหรือสีอื่นที่เข้มกว่า (ไม่ใช่สีเทาเข้ม) บนพื้นหลังสีดำ

เมื่อ Dark UI ใช้งานไม่ได้

ตามที่ระบุไว้ก่อนหน้าในบทความ UI ที่มีธีมสีเข้มเป็นตัวเลือกที่ไม่ดีสำหรับเนื้อหาที่มีข้อความจำนวนมากและมีข้อมูลจำนวนมาก หรือเมื่อใช้เนื้อหาประเภทต่างๆ (ข้อความ รูปภาพ วิดีโอ ตารางข้อมูล รายการดรอปดาวน์ ฟิลด์ ฯลฯ ). ฉันทามติทั่วไปในชุมชนการออกแบบคือ UI ที่มืดเป็นความท้าทายอย่างมากในการออกแบบ เว้นแต่ว่าคุณกำลังจัดการกับเนื้อหาที่เรียบง่ายและเพียงแค่โรยข้อความที่นี่และที่นั่น

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

ต่อไปนี้คือตัวอย่างในโลกแห่งความเป็นจริงเมื่อ ไม่ ควรใช้ UI ธีมมืด: ฉันเกี่ยวข้องกับโครงการ B2B SaaS ซึ่ง CEO ยืนกรานว่า "แตกต่าง" เขาต้องการใช้ธีมมืด UI—ซึ่งตรงกับตราสินค้าของบริษัท… สำหรับทั้งแพลตฟอร์ม สำหรับทุกอย่าง. หลังจากการประชุมหลายครั้ง และด้วยการรวบรวมทีมออกแบบและผู้จัดการผลิตภัณฑ์เบื้องหลังสาเหตุ เราสามารถพูดถึงเขาจากการตัดสินใจที่อาจก่อให้เกิดหายนะได้

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

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

สิ่งที่ควรทำและไม่ควรทำของการใช้ Dark UIs

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

เมื่อสามารถใช้ UI ที่มืดได้:

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

เมื่อใดควรหลีกเลี่ยง UI ที่มืดมิด:

• เมื่อมีข้อความเยอะ (อ่านบนพื้นหลังสีเข้มยาก)
• เมื่อมีเนื้อหาปะปนมากมายบนหน้าจอ
• ในกรณีของแอปพลิเคชัน B2B ที่มีรูปแบบ ส่วนประกอบ และวิดเจ็ตจำนวนมาก
• เมื่อการออกแบบต้องการสีสันที่หลากหลาย

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

• • •

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

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