หน้ากีฬาออนไลน์มีโจทย์ต่างจากหน้าทั่วไปพอสมควร เพราะข้อมูลไม่ได้อยู่นิ่งตลอดวัน
บางรายการยังไม่เริ่ม บางคู่กำลังดำเนินอยู่ บางการแข่งขันสิ้นสุดแล้ว และอีกหลายรายการอาจถูกเลื่อนเวลา ดังนั้นสิ่งที่ทำให้หน้าใช้งานง่ายไม่ใช่การแสดงข้อมูลให้เยอะที่สุด แต่คือการจัดให้คนอ่านเข้าใจลำดับเวลาได้ทันที
ผู้ใช้ที่เข้ามาช่วงเช้าอาจสนใจตารางของทั้งวัน ขณะที่คนที่เปิดเข้ามาระหว่างการแข่งขันอาจต้องการดูเฉพาะรายการที่กำลังเกิดขึ้นในตอนนั้น
ความต้องการสองแบบนี้ใช้หน้าเดียวกันได้ หาก Information Architecture ถูกวางมาดีพอ
ถ้ายังไม่แน่ใจว่าจะเริ่มจากหมวดใด สามารถย้อนกลับไปยัง ศูนย์รวมข้อมูลของ chang222 เพื่อเลือกเส้นทางใหม่ตามสิ่งที่ต้องการได้เสมอ
หน้ากีฬามักมีข้อมูลหลายชั้นอยู่พร้อมกัน เช่น
ถ้าเอาทุกอย่างมาแสดงพร้อมกันโดยไม่มีลำดับ หน้าเว็บจะกลายเป็นตารางขนาดใหญ่ที่ต้องใช้เวลาสแกนนาน
วิธีที่เป็นธรรมชาติกว่าคือแยก Intent ของคนใช้ก่อน
บางคนรู้ชื่อทีมอยู่แล้ว
บางคนจำได้เพียงชื่อรายการ
บางคนอยากดูเฉพาะวันนี้
บางคนต้องการดูเฉพาะสิ่งที่กำลังเกิดขึ้น
ดังนั้น ระบบค้นหาและตัวกรองควรช่วยให้แต่ละคนลดข้อมูลที่ไม่เกี่ยวข้องออกไปได้ โดยไม่ต้องเลื่อนผ่านทุกการแข่งขัน
ในหน้าที่ผูกกับเวลา ข้อมูลประเภทนี้มีความสำคัญมากกว่าภาพประกอบเสียอีก
ตัวอย่างสถานะที่ควรเข้าใจได้ทันที เช่น
กำลังจะเริ่ม
กำลังดำเนินอยู่
จบแล้ว
เลื่อนเวลา
ยกเลิก
การใช้คำที่ตรงไปตรงมาช่วยลดความคลุมเครือ โดยเฉพาะเมื่อการแข่งขันมีการเปลี่ยนแปลงจากกำหนดเดิม
ถ้ามีเพียงสีแต่ไม่มีข้อความ คนที่มีข้อจำกัดในการมองเห็นสีอาจแยกสถานะได้ยาก ดังนั้นข้อความกับสีควรทำงานร่วมกัน ไม่ใช่ใช้สีแทนความหมายทั้งหมด
เรื่อง timezone หรือเขตเวลามีผลมากกว่าที่หลายคนคิด
หากข้อมูลมาจากแหล่งที่ใช้เขตเวลาอื่น แล้วเว็บไซต์ไม่แปลงเวลาให้เหมาะกับผู้ใช้ คนอ่านอาจเข้าใจผิดได้ง่ายว่ารายการเริ่มกี่โมง
หน้ากีฬาที่ดีควรบอกให้ชัดว่าเวลาที่แสดงอ้างอิงจากอะไร และถ้าระบบรองรับการแปลงเป็นเวลาท้องถิ่นได้ก็ควรทำโดยอัตโนมัติ
รายละเอียดเล็ก ๆ แบบนี้ช่วยลดข้อผิดพลาดได้มากกว่าการเพิ่มคำอธิบายยาว ๆ อีกหลายย่อหน้า
อีกโจทย์หนึ่งของหน้ากีฬาคือรายการที่มีจำนวนมาก
ฟุตบอลหนึ่งวันอาจมีหลายลีก ขณะที่กีฬาอีกประเภทก็มีตารางของตัวเอง ถ้า navigation ใช้เพียงรายการยาว ๆ อย่างเดียว การหาสิ่งที่ต้องการจะช้าลงมาก
ตัวกรองที่ช่วยได้อาจมีลักษณะเช่น
ตามกีฬา — ฟุตบอล บาสเกตบอล เทนนิส และอื่น ๆ
ตามวันที่ — วันนี้ พรุ่งนี้ หรือวันอื่น
ตามรายการ — เลือกลีกหรือทัวร์นาเมนต์
ตามสถานะ — กำลังแข่งขันหรือยังไม่เริ่ม
รายการโปรด — เก็บเฉพาะสิ่งที่อยากติดตาม
สิ่งสำคัญคือไม่จำเป็นต้องเปิดตัวกรองทั้งหมดพร้อมกันตั้งแต่แรก
ควรแสดงตัวเลือกที่ใช้บ่อยก่อน แล้วค่อยเปิดรายละเอียดเพิ่มเมื่อต้องการ เพื่อไม่ให้แถบควบคุมกลายเป็นสิ่งที่ซับซ้อนกว่าข้อมูลกีฬาเอง
คำว่า LIVE หรือ “สด” ดูเด่นและดึงสายตาได้ แต่สิ่งที่สำคัญกว่าคือข้อมูลภายใต้ป้ายนั้นมีความสดแค่ไหน
ในระบบที่มีการอัปเดตตามเวลา ควรมีวิธีให้ผู้ใช้เข้าใจว่า
ถ้าสถานะค้าง การใช้ป้าย “สด” ต่อไปโดยไม่มีคำอธิบายอาจทำให้เกิดความเข้าใจผิดได้
การบอกว่า “อัปเดตล่าสุดเมื่อ 30 วินาทีที่แล้ว” บางครั้งมีประโยชน์กว่าคำว่า LIVE ตัวใหญ่เสียอีก
พฤติกรรมของคนที่ดูข้อมูลกีฬาบนมือถือค่อนข้างต่างจากการนั่งอ่านบทความ
หลายคนอาจเปิดระหว่างเดินทาง หรือหยิบโทรศัพท์ขึ้นมาเช็กข้อมูลเพียงไม่กี่วินาที
ดังนั้น UI ควรตอบสนองต่อการใช้งานแบบเร็ว
ชื่อทีมต้องไม่ถูกตัดจนจำไม่ได้
เวลาแข่งขันควรอยู่ตำแหน่งเดิมในแต่ละรายการ
ปุ่มกรองต้องกดได้ง่าย
ตารางไม่ควรกว้างจนต้องลากซ้ายขวาตลอด
ข้อความสำคัญต้องอ่านได้โดยไม่ซูม
การทำ responsive ในหน้ากีฬาไม่ได้หมายถึงเพียงย่อทุกอย่างลง แต่ควรพิจารณาว่าข้อมูลใดสามารถซ่อนได้และข้อมูลใดต้องอยู่บนหน้าจอเสมอ
State Persistence เป็นอีกเรื่องที่ช่วยให้ใช้งานต่อเนื่องขึ้น
สมมติว่าผู้ใช้เลือกดูเฉพาะฟุตบอลและกรองรายการของวันนี้ไว้แล้ว หากรีเฟรชหน้าแล้วตัวกรองทั้งหมดกลับค่าเริ่มต้น ผู้ใช้ต้องตั้งค่าใหม่ซ้ำทุกครั้ง
ถ้าเป็นไปได้ ระบบควรจำตัวกรองบางอย่างในช่วงเซสชัน เช่น
กีฬาที่กำลังดู
วันที่เลือก
รายการโปรด
รูปแบบการเรียง
การจำบริบทแบบนี้ช่วยให้คนรู้สึกว่าเว็บไซต์ “เข้าใจสิ่งที่กำลังทำ” มากกว่าบังคับให้เริ่มใหม่ทุกครั้ง
ช่วงก่อนเริ่ม คนอ่านอาจสนใจวัน เวลา ทีม หรือข้อมูลพื้นฐาน
แต่เมื่อการแข่งขันเริ่มแล้ว ความสำคัญของข้อมูลเปลี่ยนทันที
สถานะสดอาจขึ้นมาอยู่ด้านบน
รายละเอียดที่ไม่จำเป็นสามารถย้ายลงด้านล่าง
ข้อมูลย้อนหลังอาจกลายเป็นรอง
การเปลี่ยนแปลงล่าสุดควรเห็นง่ายขึ้น
การออกแบบที่ปรับตาม state ทำให้หน้าเดียวสามารถรองรับหลายช่วงเวลาได้ โดยไม่ต้องใช้ layout เดียวตลอดทั้งวัน
หากสนใจหมวดข้อมูลที่มีลักษณะผูกกับ “รอบ” และ “เวลาออกผล” ในอีกแบบหนึ่ง สามารถอ่าน หน้าข้อมูลตัวเลขและรอบผล เพิ่มเติม ซึ่งมีพฤติกรรมการอ่านต่างจากหน้ากีฬาอย่างชัดเจน
ปัญหาที่เกิดขึ้นบ่อยกับหน้าตารางคือพยายามย่อทุกอย่างเพื่อให้เห็นข้อมูลหลายคอลัมน์ในหน้าจอเดียว
ผลคืออ่านยาก โดยเฉพาะบนมือถือ
ทางเลือกที่เหมาะกว่าคือจัดลำดับข้อมูล
แสดงสิ่งที่ใช้บ่อยในแถวหลัก เช่น ชื่อทีม เวลา และสถานะ จากนั้นให้ข้อมูลรองเปิดได้เมื่อกดรายการนั้น
วิธีนี้ช่วยให้ข้อความยังมีขนาดอ่านง่าย และลด visual noise โดยไม่ต้องตัดข้อมูลทิ้งจริง ๆ
หากการแข่งขันถูกเลื่อนหรือยกเลิก นั่นเป็นข้อมูลที่คนติดตามควรรู้
แต่ถ้าเว็บไซต์ใช้ notification กับทุกการเปลี่ยนแปลงเล็ก ๆ ผู้ใช้จะเริ่มรู้สึกว่าถูกขัดจังหวะ
ดังนั้นควรแยกระดับความสำคัญ
การเลื่อนเวลา → ควรแจ้งชัด
การแข่งขันยกเลิก → ควรแจ้งชัด
ข้อมูลคำอธิบายเปลี่ยนเล็กน้อย → อาจไม่ต้องแจ้งเตือน
อัปเดตทั่วไป → แสดงในหน้าได้โดยไม่ต้องเด้งป๊อปอัป
นี่ช่วยให้ notification ยังมีความหมายเมื่อมันปรากฏขึ้นจริง
เมื่อคนเปิดหน้ากีฬา ส่วนใหญ่มี Intent ค่อนข้างชัด คืออยากดูตาราง รายการแข่งขัน หรือสถานะ
ถ้าเนื้อหาหลักถูกแทรกด้วยแบนเนอร์ขนาดใหญ่หลายชั้น ความเร็วในการค้นหาจะลดลง
ข้อมูลกิจกรรมสามารถนำเสนอได้ แต่ควรมีพื้นที่ของตัวเอง เช่น หน้ารวมโปรโมชั่นของ chang222 มากกว่านำมาแทรกทุกช่วงของตารางการแข่งขัน
แนวทางนี้ช่วยให้ผู้ใช้รู้ว่าแต่ละหน้ามีหน้าที่อะไร และยังช่วยลดความรู้สึกว่าหน้าเว็บพยายามดึงความสนใจไปหลายทางพร้อมกัน
ข้อมูลกีฬาอาจประกอบจากระบบหลายส่วน
จึงมีโอกาสที่ชื่อทีม รูปแบบเวลา หรือการสะกดชื่อรายการจะแตกต่างกัน
Content Governance จึงมีความสำคัญ
ตัวอย่างเช่น ถ้าหนึ่งหน้าใช้ชื่อเต็ม แต่อีกหน้าใช้ตัวย่อโดยไม่มีเหตุผล คนอ่านอาจไม่แน่ใจว่าเป็นรายการเดียวกันหรือไม่
มาตรฐานการเรียกชื่อ การจัดรูปวันที่ และการใช้ศัพท์ควรถูกกำหนดให้เหมือนกันทั้งเว็บไซต์
หากต้องการรู้ว่าข้อมูลในเว็บไซต์ถูกวางโครงสร้างอย่างไรในภาพรวม สามารถดู เกี่ยวกับ chang222 เพิ่มเติมได้
หน้ากีฬาไม่ควรเอานโยบายยาว ๆ มาแทรกกลางตาราง เพราะจะทำให้ Intent ของหน้าขาดช่วง
แต่เมื่อมีฟังก์ชันที่เกี่ยวข้องกับบัญชี การบันทึกรายการโปรด หรือข้อมูลเฉพาะผู้ใช้ ก็ควรมีทางไปยัง นโยบายความเป็นส่วนตัว ที่หาได้ง่าย
คนควรรู้ว่าอะไรถูกบันทึกและใช้เพื่อวัตถุประสงค์ใด โดยไม่ต้องค้นหาข้อมูลนั้นจากภายนอกเว็บไซต์
เนื้อหาที่อัปเดตเร็วสามารถสร้างความรู้สึกว่าต้องรีบทำอะไรทันที
แต่การมี countdown หรือสถานะกำลังดำเนินอยู่ ไม่ได้หมายความว่าผู้ใช้จำเป็นต้องตอบสนองทุกครั้ง
เว็บไซต์ที่วาง UX อย่างรับผิดชอบควรให้คนสามารถออกจากหน้า ปิดการแจ้งเตือน หรือพักจากการติดตามได้โดยไม่มีแรงกดดัน
หากอยากกำหนดกรอบเวลาในการใช้งานให้ชัดขึ้น สามารถอ่าน แนวทางการใช้งานอย่างมีความรับผิดชอบ ซึ่งรวบรวมแนวคิดเรื่องการตั้งเวลาและการหยุดพักไว้แยกต่างหาก
กีฬามีรายละเอียดเยอะโดยธรรมชาติ
หลายประเภท หลายการแข่งขัน หลายเวลา และสถานะที่เปลี่ยนตลอดทั้งวัน เว็บไซต์จึงไม่จำเป็นต้องพยายามทำให้ข้อมูลน้อยลงเสมอไป
สิ่งที่ควรทำคือทำให้ความซับซ้อนนั้นจัดการได้
คนที่รู้ว่าจะหาอะไรควรค้นเจอเร็ว
คนที่ยังไม่รู้ควรมีหมวดช่วยนำทาง
ข้อมูลสดควรมี timestamp
สถานะเปลี่ยนควรอธิบายได้
และมือถือควรอ่านข้อมูลหลักได้โดยไม่ต้องต่อสู้กับตารางขนาดใหญ่
เมื่อสิ่งเหล่านี้ทำงานร่วมกัน หน้ากีฬาจะดูเรียบง่าย แม้เบื้องหลังจะมีข้อมูลจำนวนมากก็ตาม
โดยหลักควรมีประเภทกีฬา รายการแข่งขัน วันและเวลา ทีมที่เกี่ยวข้อง และสถานะปัจจุบัน รวมถึงรายละเอียดเพิ่มเติมเมื่อเปิดดูแต่ละรายการ
ใช้ตัวกรองตามกีฬา วันที่ ลีก หรือสถานะ หากจำชื่อทีมได้ก็สามารถใช้ช่องค้นหาเพื่อจำกัดรายการที่ต้องเลื่อนดูลงได้อีก
ไม่จำเป็นครับ ระบบข้อมูลสามารถมีระยะเวลาหน่วงได้ตามแหล่งข้อมูลและการเชื่อมต่อ จึงควรดูเวลาที่อัปเดตล่าสุดประกอบกับสถานะสดด้วย
หน้าที่อัปเดตตามเวลาควรแก้สถานะและเวลาให้สอดคล้องกับข้อมูลล่าสุด พร้อมระบุว่าเป็นการเลื่อนหรือเปลี่ยนแปลง เพื่อไม่ให้คนอ่านเข้าใจว่าเป็นเวลาเดิม
การออกแบบที่เหมาะกับมือถือควรลดความจำเป็นในการลากตารางแนวนอน โดยแสดงข้อมูลหลักก่อน และย้ายรายละเอียดรองไปยังส่วนที่เปิดเพิ่มเติมได้
สามารถเปิด ข้อตกลงและเงื่อนไข เพื่อดูรายละเอียดที่เกี่ยวข้องกับการใช้งานเว็บไซต์ และย้อนกลับมายังหน้ากีฬาเมื่ออ่านเรียบร้อยแล้วครับ