ความหมายของ UI Density และวิธีออกแบบ
(matthewstrom.com)ความหนาแน่นของอินเทอร์เฟซกำลังลดลง
- เมื่อเปรียบเทียบเว็บไซต์และแอปพลิเคชันในปัจจุบันกับยุค 2000 จะมองข้ามแนวโน้มที่ซอฟต์แวร์มีการกระจายตัวมากขึ้นได้ยาก
- UI Density คืออะไร?
- UI Density ไม่ใช่รูปลักษณ์ของอินเทอร์เฟซ ณ ช่วงเวลาใดช่วงเวลาหนึ่ง
- แต่เกี่ยวข้องกับปริมาณข้อมูลที่อินเทอร์เฟซมอบให้ตลอดหลายช่วงเวลา
- เป็นเรื่องของการที่การตัดสินใจด้านการออกแบบเชื่อมโยงช่วงเวลาเหล่านั้นเข้าด้วยกันอย่างไร และเชื่อมโยงกับคุณค่าที่ซอฟต์แวร์มอบให้อย่างไร
ความหนาแน่นเชิงภาพ (Visual density)
- เมื่อพูดถึงความหนาแน่น เรามักคิดถึงสิ่งที่มองเห็นก่อน
- ความหนาแน่นเชิงภาพหมายถึงเราสามารถมองเห็นสิ่งต่าง ๆ ได้มากแค่ไหนภายในพื้นที่ที่กำหนด
- อินเทอร์เฟซซอฟต์แวร์ที่มีความหนาแน่นเชิงภาพสูงจะแสดงองค์ประกอบจำนวนมากบนหน้าจอ
- อินเทอร์เฟซที่มีความหนาแน่นเชิงภาพต่ำจะแสดงองค์ประกอบบนหน้าจอน้อยกว่า
- ตัวอย่าง: Bloomberg Terminal
- Bloomberg Terminal เป็นตัวอย่างตัวแทนของความหนาแน่นเชิงภาพ
- หน้าจอเดียวแสดงทั้งสปาร์กไลน์ของดัชนีตลาดหลัก การกระจายปริมาณการซื้อขายอย่างละเอียด ตารางที่มีหลายสิบแถวและคอลัมน์ พาดหัวข่าวล่าสุด คีย์ลัดบนคีย์บอร์ด และป้ายบอกทางของ UI สำหรับการทำงานด่วน
- ตัวอย่าง: Craigslist และ McMaster-Carr
- Craigslist มีความหนาแน่นเชิงภาพสูงจากลิงก์แบบเรียบง่ายหลายร้อยรายการ พร้อมอินเทอร์เฟซสำหรับค้นหาและกรอง
- เว็บไซต์ McMaster-Carr ก็มีองค์ประกอบการออกแบบคล้ายกัน โดยแสดงรายละเอียดของตัวแปรสินค้าจำนวนมากในพื้นที่ขนาดเล็ก
- การตัดสินความหนาแน่นจากสัญชาตญาณ
- ผู้คนมักสร้างความเห็นเกี่ยวกับความหนาแน่นของเว็บไซต์เหล่านี้ได้ภายในเวลาไม่กี่วินาที
- การตัดสินเหล่านี้เกิดขึ้นอย่างรวดเร็วและเป็นสัญชาตญาณในระดับจิตใต้สำนึก
- แต่การตัดสินอย่างรวดเร็วเช่นนี้อาจมีอคติและไม่น่าเชื่อถือ
- ภาพตัวอย่างของความหนาแน่นเชิงภาพ
- ตัวอย่างสี่เหลี่ยมผืนผ้าสองภาพ:
- ซ้าย: จุดจำนวนมากกระจายแบบสุ่ม
- ขวา: จุดจำนวนเท่ากันถูกจัดเรียงเป็นแถวและคอลัมน์อย่างเป็นระเบียบ
- คนส่วนใหญ่มักรู้สึกว่าภาพด้านขวามีความหนาแน่นมากกว่า
- ภาพตัวอย่างอีกชุดหนึ่ง:
- ซ้าย: จุดจำนวนมากจัดเรียงเป็นแถวและคอลัมน์อย่างเป็นระเบียบ
- ขวา: จุดจำนวนเท่ากันถูกจัดเป็นสองกลุ่มอย่างเป็นระเบียบ
- แม้จำนวนจุดจะเท่ากัน แต่เมื่อแบ่งเป็นกลุ่ม การรับรู้ของเราต่อความหนาแน่นก็เปลี่ยนไป
- ตัวอย่างสี่เหลี่ยมผืนผ้าสองภาพ:
- ความไม่แน่นอนของความหนาแน่นเชิงภาพ
- ในงานออกแบบ เราไม่สามารถทำให้เรื่องนี้เป็นวัตถุวิสัยได้อย่างสมบูรณ์
- แต่หากต้องการพูดคุยเรื่องความหนาแน่น ก็ควรมุ่งไปที่คำจำกัดความที่สม่ำเสมอ มีความหมาย และใช้งานได้จริง
ความหนาแน่นของข้อมูล (Information density)
- Edward Tufte กล่าวถึงการออกแบบแผนภูมิและกราฟในหนังสือ The Visual Display of Quantitative Information
หมึกทุกหยดในกราฟิกต้องมีเหตุผล และเหตุผลนั้นต้องเป็นการให้ข้อมูลใหม่
- Data-ink
- Data-ink หมายถึงส่วนที่มีประโยชน์ในภาพข้อมูลที่กำหนด
- องค์ประกอบภาพที่ไม่ใช่ข้อมูลควรถูกตัดออก
- Data-ink แตกต่างจากพื้นที่ที่กราฟใช้ไป เพราะมันเกี่ยวกับความหนาแน่นของข้อมูล
- การคำนวณความหนาแน่นของข้อมูล
- ความหนาแน่นของข้อมูลสามารถคำนวณได้จากการนำปริมาณ data-ink ในกราฟหารด้วยปริมาณหมึกทั้งหมดที่ใช้พิมพ์กราฟนั้น
- แม้นิยามของ data-ink อาจมีความเป็นอัตวิสัย แต่ประเด็นสำคัญคือการทำให้อัตราส่วนนี้เข้าใกล้ 1 ให้มากที่สุด
- วิธีเพิ่มอัตราส่วน:
- เพิ่ม data-ink: ใส่ข้อมูลที่มีประโยชน์เพิ่มเติม
- ลด non-data ink: ลบส่วนกราฟิกที่ไม่ได้ช่วยถ่ายทอดข้อมูล
- ตัวอย่าง
- มีตัวอย่างกราฟิกที่ใช้หมึกเกินความจำเป็นมาก และตัวอย่างที่ปรับปรุงแล้วซึ่งใช้หมึกน้อยแต่ส่งข้อมูลได้มาก
- ความหนาแน่นของข้อมูลมีขีดจำกัดบน เพราะเราสามารถลบหมึกออกมากเกินไปหรือเพิ่มข้อมูลมากเกินไปได้
- กลุ่มผู้ชมก็สำคัญเช่นกัน: ผู้ใช้ระดับสูงอาจชอบความหนาแน่นสูง ขณะที่เด็กประถมอาจชอบความหนาแน่นต่ำ
- ความสัมพันธ์ระหว่างความหนาแน่นของข้อมูลกับความหนาแน่นเชิงภาพ
- ยิ่งความหนาแน่นของข้อมูลสูง ก็ยิ่งมีแนวโน้มที่จะดูหนาแน่นทางสายตา
- ตัวอย่าง: ภาพตารางเวลาเดินรถไฟของ E.J. Marey ในปี 1885 ซึ่งแสดงเวลาออกและเวลาถึงในพื้นที่เล็กและหนาแน่น
- Tufte สนับสนุนการเพิ่มความหนาแน่นของข้อมูลและเพิ่มข้อมูลอย่างสมเหตุสมผลให้มากที่สุด
- Shrink Principle
- กราฟิกสามารถย่อให้เล็กลงได้มาก
- ความหนาแน่นของข้อมูลมีประโยชน์กับแผนภูมิและกราฟ
- แล้วจะนำไปใช้กับอินเทอร์เฟซได้หรือไม่?
- การประยุกต์ความหนาแน่นของข้อมูลกับอินเทอร์เฟซ
- ข้อมูลสามารถนำมาปรับใช้กับหน้าจอได้
- แต่ละส่วนของอินเทอร์เฟซควรแสดงข้อมูลให้มากที่สุดเท่าที่จะทำได้
- แม้จะนึกถึงหมึกในฐานะพิกเซลได้ง่าย แต่อินเทอร์เฟซยังต้องมีเส้นแบ่ง องค์ประกอบเชิงโครงสร้าง และป้ายบอกทางที่ช่วยให้เข้าใจความสัมพันธ์ระหว่างองค์ประกอบต่าง ๆ
- มีแรงดึงดูดให้ทำตาม Shrink Principle ด้วยการลบพื้นที่ว่างทั้งหมดออก
- แต่พื้นที่ว่างบางส่วนก็มีความหมายสำคัญพอ ๆ กับองค์ประกอบที่มองเห็นได้ รวมถึงบทบาทของเงา ไล่สี และการเน้นด้วยสี
- ความหนาแน่นของข้อมูลเป็นแนวคิดที่มีประโยชน์ แต่เป็นเพียงส่วนหนึ่งของภาพรวมทั้งหมด
- เราควรมองหาวิธีทำความเข้าใจการตัดสินใจด้านการออกแบบทั้งหมดของอินเทอร์เฟซให้มีความเป็นวัตถุวิสัยและวัดเชิงปริมาณได้มากขึ้น
ความหนาแน่นของการออกแบบ (Design Density)
- ความท้าทายแรกของการนิยามความหนาแน่นจากมุมมองของการตัดสินใจด้านการออกแบบ คือการแยกให้ออกว่าอะไรนับเป็นการตัดสินใจ
- การทำความเข้าใจการตัดสินใจด้านการออกแบบ
- ในงาน UI, UX และ Product Design เราตัดสินใจจำนวนมากทั้งโดยรู้ตัวและไม่รู้ตัวเพื่อสื่อสารข้อมูล
- จึงต้องตั้งคำถามว่าทำไมตัวเลือกบางอย่างจึงสื่อความหมาย ตัวเลือกใดเป็นเพียงความงาม และตัวเลือกใดสำคัญจริง ๆ
- หลักการ Gestalt
- เป็นการศึกษาของนักจิตวิทยาชาวเยอรมันในศตวรรษที่ 20 เกี่ยวกับวิธีที่มนุษย์เข้าใจรูปทรงและรูปแบบ
- คำว่า Gestalt หมายถึง “รูปทรง”
- งานวิจัยนี้ค้นพบกฎพื้นฐานของการออกแบบหลายข้อ:
- Proximity: สิ่งที่อยู่ใกล้กันจะถูกรับรู้ว่าเป็นกลุ่มเดียวกัน
- Similarity: วัตถุที่คล้ายกันในด้านรูปทรง ขนาด สี ฯลฯ จะดูเหมือนมีความเกี่ยวข้องกัน
- Closure: เราเติมช่องว่างในงานออกแบบเพื่อรับรู้เป็นรูปทรงที่สมบูรณ์
- Symmetry: รูปทรงที่สมมาตรถูกรับรู้ว่าเป็นกลุ่มรอบจุดศูนย์กลาง
- Common Fate: วัตถุที่เคลื่อนไหวในลักษณะเดียวกันจะถูกรับรู้ว่าอยู่กลุ่มเดียวกัน
- Continuity: วัตถุที่ซ้อนทับกันจะถูกรับรู้ว่าเป็นสิ่งแยกจากกัน
- Past Experience: เรารับรู้รูปทรงและรูปแบบที่คุ้นเคยได้แม้อยู่ในสถานการณ์ที่ไม่คุ้นเคย
- Figure-Ground Relationship: เราแยกองค์ประกอบส่วนหน้าและพื้นหลังออกจากกันในภาพ 2D
- ผลของหลักการ Gestalt ต่อการออกแบบ UI
- ด้วยหลัก Similarity ข้อความที่มีขนาด ฟอนต์ และสีเหมือนกันจึงสื่อถึงวัตถุประสงค์เดียวกัน
- หลัก Proximity ทำให้เมื่อแผนภูมิอยู่ใกล้กับพาดหัว ก็สื่อว่าพาดหัวนั้นอธิบายแผนภูมิ
- ด้วย Past Experience และ Figure-Ground ผู้ใช้จึงเข้าใจได้ทันทีว่าสวิตช์แบบ toggle ทำงานอย่างไร
- แนวคิดเรื่องความหนาแน่นของการออกแบบ
- แทนที่จะโฟกัสที่พิกเซล เราควรคิดถึงการตัดสินใจด้านการออกแบบที่ตั้งใจใช้หลัก Gestalt เพื่อสื่อความหมาย
- เช่นเดียวกับที่อัตราส่วน data-ink ของ Tufte เปรียบเทียบหมึกที่จำเป็นต่อกราฟกับหมึกทั้งหมด ความหนาแน่นของการออกแบบก็เปรียบเทียบการตัดสินใจด้านการออกแบบที่จำเป็นกับการตัดสินใจทั้งหมด
- แม้จะมีความเป็นอัตวิสัย แต่ในส่วนติดต่อผู้ใช้ การนับการตัดสินใจด้านการออกแบบอาจมีประโยชน์มากกว่าการนับปริมาณข้อมูลหรือหมึก
- ข้อจำกัดของความหนาแน่นของการออกแบบ
- ส่วนติดต่อผู้ใช้มีไว้เพื่อการทำงาน ความเพลิดเพลิน การฆ่าเวลา การสร้างความเข้าใจ และการส่งเสริมความเชื่อมโยงส่วนบุคคล
- จึงต้องรวมการกระทำทั้งหมดที่ผู้ใช้ทำระหว่างเส้นทางการใช้งาน
- ความหนาแน่นต้องมองไกลกว่าองค์ประกอบ เลย์เอาต์ หรือหน้าจอ ไปสู่การกระทำทั้งหมดที่ผู้ใช้ทำในมิติของพื้นที่และเวลา
ความหนาแน่นเชิงเวลา
- ปริมาณงานที่ผู้ใช้สามารถทำได้ภายในเวลาที่กำหนดเป็นตัวกำหนดความหนาแน่นเชิงเวลา
- เวลาโหลดคือปัจจัยที่ใหญ่ที่สุดของความหนาแน่นเชิงเวลา ยิ่งอินเทอร์เฟซตอบสนองเร็วและโหลดหน้าหรือหน้าจอใหม่ได้ไวเท่าไร UI ก็ยิ่งหนาแน่นมากขึ้นเท่านั้น
- Bloomberg Terminal โหลดข้อมูลได้แทบจะทันที จึงมีความหนาแน่นเชิงเวลาสูงมาก
- วิธีเพิ่มความหนาแน่นเชิงเวลา
- เราสามารถเพิ่มความหนาแน่นเชิงเวลาได้ด้วยการลดเวลาโหลดให้มากที่สุด
- แต่ไม่ใช่ทุกเวลาโหลดที่จะลดได้ เช่น เราไม่สามารถเปลี่ยนความเร็วอินเทอร์เน็ตของผู้ใช้หรือความเร็ว CPU ได้
- งานบางอย่าง เช่น การอัปโหลดไฟล์ การรอการตอบกลับจากฝ่ายสนับสนุนลูกค้า หรือการประมวลผลการชำระเงิน เกี่ยวข้องกับระบบที่ซับซ้อนและตัวแปรที่คาดเดาไม่ได้
- วิธีเปลี่ยนการรับรู้เรื่องเวลา
- ภายใน 100 มิลลิวินาที: หากเวลาระหว่างสองการกระทำไม่เกิน 100 มิลลิวินาที ผู้ใช้จะรู้สึกเหมือนเกิดขึ้นพร้อมกัน ในกรณีนี้แอนิเมชันอาจยิ่งทำให้แอปรู้สึกช้าลง
- ระหว่าง 100 มิลลิวินาทีถึง 1 วินาที: ความเชื่อมโยงระหว่างสองการกระทำเริ่มขาดช่วง แอนิเมชันและทรานซิชันสามารถช่วยเติมช่องว่างเชิงการรับรู้นี้ได้
- ระหว่าง 1 ถึง 10 วินาที: แอนิเมชันเพียงอย่างเดียวไม่พอ ผู้ใช้มีแนวโน้มจะออกจากหน้าเมื่อใกล้ 10 วินาที ในกรณีนี้ควรใช้ตัวบ่งชี้การโหลดแบบไม่กำหนดระยะเพื่อบอกว่าระบบยังทำงานปกติอยู่
- ระหว่าง 10 วินาทีถึง 1 นาที: ตัวบ่งชี้การโหลดแบบไม่กำหนดระยะจะเริ่มให้ความรู้สึกนิ่งเมื่อยาวเกิน 10 วินาที ในกรณีนี้ควรใช้ตัวบ่งชี้การโหลดที่ชัดเจน เช่น progress bar เพื่อแสดงเวลาที่เหลืออย่างชัดเจน
- มากกว่า 1 นาที: ควรเปิดโอกาสให้ผู้ใช้ออกจากหน้านั้นหรือไปทำอย่างอื่นได้ หากต้องไม่ทำอะไรเกิน 1 นาที ผู้ใช้อาจรู้สึกหงุดหงิด และกระบวนการที่ยาวนานก็มีโอกาสเกิดข้อผิดพลาดสูงขึ้นด้วย
- ความหนาแน่นของเวลาและพื้นที่
- ความหนาแน่นของ UI เป็นเพียงวิธีการเท่านั้น คุณค่าของ UI ไม่ได้อยู่ที่รูปลักษณ์ แต่อยู่ที่ผลลัพธ์ที่ทำได้
- ความหนาแน่นคือการมอบคุณค่าให้มากที่สุดด้วยเวลา พื้นที่ พิกเซล และหมึกให้น้อยที่สุด
ความหนาแน่นของคุณค่า (Density in Value)
- ความหนาแน่นของคุณค่าเกี่ยวข้องกับคุณค่าของผลลัพธ์ที่ผู้ใช้ได้รับ
- ตัวอย่าง: การแบ่งฟอร์มยาวออกเป็นชิ้นเล็ก ๆ และจัดเป็นอินเทอร์เฟซแบบวิซาร์ดเป็นแนวทางที่ดี เพราะฟอร์มที่กรอกค้างไว้บางส่วนยังไม่มีคุณค่า
- การใส่ทุกคำถามไว้ในหน้าเดียวอาจดูหนาแน่นทางสายตา แต่ถ้าใช้เวลานานในการกรอก ผู้ใช้จำนวนมากก็จะไม่ส่งฟอร์ม
- ตัวอย่างฟอร์ม
- ฟอร์มที่แบ่งเป็นหลายส่วน พร้อมแสดงข้อผิดพลาดและวิธีแก้ไขอย่างชัดเจน
- การลดข้อผิดพลาดและทำให้ผู้ใช้กรอกฟอร์มจนจบ อาจต้องใช้พื้นที่และเวลามากขึ้นในการออกแบบ
- แต่หากการแลกกับความหนาแน่นเชิงภาพและเชิงเวลานี้ทำให้ผลลัพธ์มีคุณค่ามากขึ้น ความหนาแน่นของคุณค่าโดยรวมก็จะเพิ่มขึ้น
- การเพิ่มความหนาแน่นของคุณค่า
- เราสามารถเพิ่มความหนาแน่นเชิงภาพและเชิงเวลาได้ด้วยการทำให้ฟอร์มเล็กลง โหลดเร็วขึ้น และลดข้อผิดพลาด
- หากไม่ลดทอนคุณค่าที่ผู้ใช้ได้รับหรือคุณค่าทางธุรกิจ ความหนาแน่นโดยรวมก็จะเพิ่มขึ้น
- ตามแนวทางของ Tufte เราควรพยายามเพิ่มความหนาแน่นของคุณค่าให้สูงที่สุดเท่าที่ทำได้
- ปัญหาการเพิ่มประสิทธิภาพ
- เมื่อแก้ปัญหาการเพิ่มประสิทธิภาพ อาจเกิดผลลัพธ์ที่ดูขัดแย้งได้
- ในยุคแรกของอินเทอร์เน็ต บริษัทอย่าง Craigslist เพิ่มความหนาแน่นของคุณค่าด้วยการรวบรวมข้อมูลและแสดงเป็นลิงก์ของหน้าเว็บ
- Yahoo และ Altavista ทำให้ค้นหาข้อมูลได้ แต่ก็ยังให้ความสำคัญกับการรวบรวมข้อมูล
- Google ใช้แนวทางที่ต่างออกไป โดยนำข้อมูลที่ได้จากห่วงโซ่ลิงก์บนอินเทอร์เน็ตมาใช้กับช่องค้นหา
- ข้อมูลถูกรวบรวมด้วยตัวเองอยู่แล้ว และสิ่งที่ผู้ใช้ต้องการคือการเข้าถึงทั้งเว็บผ่านช่องป้อนข้อความเพียงช่องเดียว
- แนวทางของ Google และ Yahoo
- เมื่อเปรียบเทียบหน้าจอแรกของ Google ในปี 2001 กับหน้าจอในปี 2024 จะเห็นว่าความหนาแน่นเชิงภาพต่ำลง แต่ความหนาแน่นของคุณค่าสูงมาก
- ผลลัพธ์คือ มูลค่าของ Google เพิ่มจาก $23B ในปี 2004 เป็นมากกว่า $2T ในปัจจุบัน ขณะที่ Yahoo ลดลงจาก $125B ในปี 2000 เหลือ $4.8B ในปัจจุบัน
- หลายครั้งความหนาแน่นของคุณค่าสำคัญกว่าความหนาแน่นเชิงภาพ
- การเพิ่มประสิทธิภาพด้านการออกแบบและฟังก์ชันเพื่อเพิ่มคุณค่าสูงสุดที่ผู้ใช้ได้รับเป็นสิ่งสำคัญ
บทสรุป
- การออกแบบโดยคำนึงถึง UI Density ต้องก้าวข้ามมิติด้านภาพของอินเทอร์เฟซ
- มันรวมถึงการตัดสินใจด้านการออกแบบทั้งหมดที่เราทำ ทั้งที่ชัดแจ้งและโดยนัย รวมถึงข้อมูลทุกอย่างที่เราแสดงบนหน้าจอ
- และต้องรวมถึงทุกการกระทำและเวลาที่ผู้ใช้ใช้เพื่อให้ได้คุณค่าจากซอฟต์แวร์
- นิยามที่ชัดเจนของ UI Density
- UI Density = คุณค่าที่ผู้ใช้ได้รับจากอินเทอร์เฟซ / เวลาและพื้นที่ที่อินเทอร์เฟซใช้ไป
- องค์ประกอบสำคัญ
- ความเร็ว
- การใช้งานง่าย
- ความสม่ำเสมอ
- ความคาดเดาได้
- ความอุดมสมบูรณ์ของข้อมูล
- ฟังก์ชันการใช้งาน
- เหตุผลที่อินเทอร์เฟซที่ประสบความสำเร็จประสบความสำเร็จ: เมื่อพิจารณาองค์ประกอบทั้งหมดเหล่านี้ เราจะเข้าใจได้ว่าทำไมบางอินเทอร์เฟซจึงประสบความสำเร็จและบางอินเทอร์เฟซจึงล้มเหลว
- เป้าหมายของการออกแบบ
- เราควรออกแบบโดยคำนึงถึงความหนาแน่น เพื่อให้ผู้คนได้รับคุณค่าจากซอฟต์แวร์ที่เราสร้างมากขึ้น
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
สรุปความคิดเห็นจาก Hacker News
เหตุใดรูปแบบทางกายภาพของเมนูร้านอาหารจึงดีกว่าเมนูบนเว็บไซต์มือถือ
ความสำคัญของข้อมูลที่ให้ความสำคัญกับการใช้งานมากกว่ารูปแบบ
แนวคิดเรื่องความหนาแน่นเชิงเวลา
เหตุผลที่อินเทอร์เฟซบนมือถือดูโปร่ง
คำวิจารณ์ต่อการเพิ่มความโปร่งของ UI
ปัญหาของ UI ที่ซับซ้อนและกระแสเทรนด์
ข้อดีของ UI แบบดั้งเดิม
ความไม่สมดุลของความหนาแน่นข้อมูล
ปัญหาของ UI บนมือถือ
ตัวอย่างของ UI ที่มีความหนาแน่นไม่เพียงพอ