Half Screen Design
โจทย์คือการออกแบบหน้าแบบสอบถามที่มีวิดีโอเป็นส่วนประกอบสำคัญ จินตนาการการวัดประสิทธิภาพของพนักงานในการใช้โปรแกรมไมโครซอฟต์เอ็กเซล
พนักงานทำแบบทดสอบในคอมพิวเตอร์ มีโปรแกรมแคปเจอร์หน้าจอมาเป็นวิดีโอ นำมาแสดงผลบนเวปบราวเซอร์ หัวหน้าทีมคอยให้คะแนนตามเกณฑ์ที่กำหนดไว้
เหมือนจะง่ายแต่ไม่ง่าย ฮ่าๆ … แนวคิดหลักข้อแรกในการออกแบบครั้งนี้ของผมคือการให้ความสำคัญกับวิดีโอ ลองมาดูความพยายามของผมและทีมงานกันครับ
ใช้ 12 คอลัมน์เต็ม วิดีโออยู่ข้างบน แบบสอบถามอยู่ข้างล่าง
จัดไป ให้ความสำคัญกับวิดีโอมากใช่มั้ย เอาไปเต็มๆหน้าจอ ปัญหาคือมันเต็มเจงๆๆ เนื้อที่สำหรับแบบสอบถามแทบไม่เหลือ … งานเข้าซิเพราะมันมีสกอร์บาร์แล้ว
เลื่อนไปหน่อยเดียววิดีโอที่ว่าสำคัญนักหนาก็หายไปจากหน้าจอ จบ ความพยายามครั้งแรก ไม่ผ่านนะ
แบ่ง 6 คอลัมน์สองครั้ง วิดีโอวางซ้าย แบบสอบถามวางขวา
จากเต็มจอเหลือจึ๋งเดียว … วิดีโอเล็กมาก เล็กเกินไปครับ ความพยายามครั้งที่สอง ไม่ผ่าน
แบ่งเป็น 7 คอลัมน์กับ 5 คอลัมน์ วิดีโออยู่ซ้าย แบบสอบถามอยู่ขวา
วิดีโอใหญ่ขึ้น (ใหญ่ที่สุดเท่าที่ทำได้แล้ว) แต่มันมีความท้าทายอื่นๆตามมาไม่ว่าจะเป็นการที่มีข้อมูลมากมายถูกโชว์ขึ้นมาในพื้นที่ของแบบสอบถาม ประเด็นคือมากไปก็ไม่ดี ผมอยากให้คนให้คะแนนมีโฟกัสกับคำถามแต่ละข้อให้มากที่สุด แถมด้วยถ้าเจอคำถามยาวๆมันก็ตกบรรทัด การจัดระเบียบของการเรียงคำถาม-ตัวเลือกก็จะยากขึ้น
บวกกับ อืมมมม วิดีโอยังเลื่อนหายไปอยู่ดี ความพยายามครั้งที่สามก็ยังเป็นความล้มเหลวอย่างต่อเนื่อง
ฟิกซ์ตำแหน่งวิดีโอและแบบสอบถาม เปลี่ยนตัวเลือกเป็นแนวตั้ง
อืมม แบบนี้ทำให้ดูเรียบร้อยขึ้น ข้อมูลไม่รกระเกะระกะ การฟิกซ์ตำแหน่งช่วยให้วิดีโอไม่เลื่อนหายไปแล้ว แต่ …
มันทำให้เกิดปัญหาใหม่ขึ้นมาคือสกอร์บาร์ยาวมากกกกก ยาวโคตรๆ ผมต้องลองเล่นโปรโตไทป์จริงๆถึงจะรู้ว่านี่ไม่เวิร์คหวะ เลื่อนเม้าส์วีลจนเมื่อยนิ้วกว่าจะตอบคำถามครบทุกข้อ … ไม่ผ่าน!!!
แสดงผลคำถามทีละข้อ รันไปเรื่อยๆจนครบ
ความพยายามครั้งนี้เกิดจากการเปลี่ยนแนวคิดการแสดงผลไปเลย … ทำเป็นคล้ายๆหน้าวิซาร์ด (Wizard) ที่โหลดและแสดงคำถามทีละข้อตามลำดับครับ
ข้อดีของมันมีหลายอยู่นะ
- วิดีโอและแบบสอบถามอยู่กับที่
- ได้เนื้อที่บนล่างเพิ่มมาใช้ทำประโยชน์อื่นๆได้
- การแสดงผลทีละคำถามทำให้คนให้คะแนนไม่สับสน
- มีโอกาสให้เราใส่ข้อมูลที่เป็นประโยชน์เพิ่มเติมลงไปได้ เช่น หัวข้อของคำถาม, คำอธิบายหรือคำแนะนำต่างๆ, การแจ้งผลการทำแบบสอบถามที่หน้าสุดท้าย
- เพิ่มลูกเล่นอีกนิดนึงตรงที่เมื่อคลิ๊กตัวเลือกใดแล้วระบบจะเซฟคำตอบและโหลดคำถามข้อใหม่ขึ้นมาแสดงทันทีโดยไม่ต้องคลิ๊ก “ถัดไป” (เลียนแบบเฟสบุ๊กครับ ถ้าใครเคยเห็น ฮ่าๆ) … แนวคิดนี้ได้มาจากที่นี่
สรุปว่าความพยายามครั้งสุดท้ายนี้เองที่ถูกเลือกมาอิมพลิเม้นต์ในโปรดักท์ตัวจริงครับ หลังจากลองผิดลองถูกหลายครั้งมาก บอกได้เลยว่าอิทเทอเรทมากกว่า 10 รอบ บอกได้เลยว่าเหนื่อยกันทุกคนแต่ผลลัพธ์ที่ได้ออกมาถือว่าน่าพอใจ “ในตอนนี้”
แต่ความท้าทายมันยังไม่หยุดแค่นี้หนะซิ ผมคิดว่ามันมีทางเลือกอื่นๆที่ปรับปรุงการออกแบบครั้งนี้ให้ดีขึ้นไปอีกระดับได้
เอาไว้รอบหน้า ถ้าลองทำจริงแล้วมันเวิร์คจะเอามาเล่าให้ฟังใหม่ :)
ป.ล. ทีมผมสุดยอดดดดดดดดด
คิดและเขียนคือสิ่งที่ผมชอบ แบ่งปันคือสิ่งที่ผมรัก เพราะแบบนี้ทุกวันผมเขียนเพื่อถ่ายทอดเรื่องราวจากชีวิตจริง จากประสบการณ์ จากแนวคิด จากอนาคตที่ดีผมมองเห็น และทุกอย่างที่ผมประยุกต์ใช้เพื่อสร้างให้อินเท็นติกเป็นบ้านที่น่าอยู่ บ้านที่เป็นจุดเริ่มต้นของการเปลี่ยนแปลงเล็กๆที่สร้างความแตกต่างในสังคมได้ — มันน่าภูมิใจที่ผมรู้ว่า … ไม่ใช่มีแค่ผมคนเดียวที่อยากเห็นการพัฒนา :)
Inthentic On Facebook | Inthentic On Twitter | Inthentic On Instagram
