ทำหน้าเว็บข้อมูลเชิงเทคนิคให้คนทั่วไปเข้าใจโดยไม่ลดความลึก: 5 บทเรียนจากการออกแบบ Cloudflare Radar ใหม่

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

ปัญหาของหน้าเดิม: ทุกอย่างสำคัญเท่ากัน

หน้าแรกเดิมของ Radar จัดเนื้อหาเป็นกล่องหลายขนาดเรียงกันแบบกล่องข้าวเบนโตะ (bento layout) ซึ่งโชว์ได้ดีว่ามีข้อมูลกว้างแค่ไหน แต่ทุกกล่องมีน้ำหนักทางสายตาใกล้กัน ผู้อ่านจึงไม่รู้ว่าควรเริ่มดูตรงไหน การ์ดแนวตั้งยังทำให้สายตาต้องกระโดดไปมาแทนที่จะอ่านไหลจากบนลงล่าง และหน้าตาไม่เข้ากับแบรนด์ส่วนอื่นของ Cloudflare เสียงสะท้อนที่ทีมยกมาคือผู้ใช้รายหนึ่งบอกว่าเรื่องที่หงุดหงิดที่สุดคือหยิบ Radar ไปอธิบายให้นักศึกษาฟังได้ยาก

บทเรียนที่ 1: เริ่มจากสิ่งที่ทุกคนคุ้นเคย

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

บทเรียนที่ 2: เปิดด้วยตัวเลขที่จับต้องได้ที่สุด

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

บทเรียนที่ 3: เปิดเผยข้อมูลทีละชั้น

แทนที่จะวางกราฟทุกตัวบนหน้าเดียว หน้าใหม่ใช้แท็บแยกหัวข้อ แต่ละแท็บมีตัวเลขสรุปสั้น ๆ และปุ่มพาไปดูข้อมูลเต็ม วิธีนี้เรียกว่า progressive disclosure คือให้เห็นเฉพาะสิ่งที่จำเป็นก่อน แล้วค่อยเปิดรายละเอียดเมื่อผู้ใช้ต้องการ ผู้ใช้ใหม่ไม่ถูกข้อมูลท่วม ส่วนผู้เชี่ยวชาญก็ยังคลิกลงไปถึงข้อมูลดิบได้เหมือนเดิม แท็บยังทำหน้าที่เป็นสารบัญที่บอกว่า Radar มีข้อมูลด้านใดบ้าง

บทเรียนที่ 4: หาจุดกลางระหว่างข้อมูลแน่นกับหน้าโฆษณา

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

บทเรียนที่ 5: ใช้ระบบคอมโพเนนต์ชุดเดียวกับผลิตภัณฑ์

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

เช็กลิสต์ก่อนออกแบบหน้าข้อมูลสำหรับผู้ใช้กลุ่มใหม่

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

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