กว่าจะมาเป็น “ทำนายผลเลือกตั้ง 2562”
หลายๆคนอาจได้ลองเล่น simulator จัดตั้งรัฐบาล 🗳 จาก ELECT.in.th ไม่ว่าจะมาจาก ELECT Live ระหว่างติดตามผลการเลือกตั้งสดๆ หรือเห็นตามลิงค์ที่แชร์กันในโซเชียลมีเดีย
สิ่งที่คนส่วนใหญ่อาจไม่รู้คือการทำงานแบบนี้ชิ้นหนึ่งออกมา มันมีรายละเอียดและความใส่ใจที่ทีมงานได้ใส่ลงไปมากมาย 🤯 ปรับแล้วปรับอีกกว่าจะออกมาเป็นแบบที่ทุกคนเห็น ดังนั้นบทความนี้ก็จะมาเล่าให้ฟังว่ากว่าจะออกมาเป็นเวอร์ชั่นปัจจุบันนั้น เกิดอะไรขึ้นหลังฉากบ้าง
เริ่มต้นมาจากไหน?
ช่วงหนึ่งเดือนก่อนเลือกตั้ง มีการพูดคุยถึงสูตรจัดตั้งรัฐบาลกันมากมาย บ้างก็บอกว่าต้องพรรคนี้รวมกับพรรคนั้น ไม่ก็พรรคนั้นรวมกับพรรคนี้ ซึ่งข่าวก็ออกมาในรูปบทความ บทสัมภาษณ์หรือแผนภาพนิ่งๆ
เลยเกิดความคิดว่าในเมื่อไม่มีใครรู้อนาคตแน่นอน จะให้โอกาสคนทั่วไปปรับสูตรไปมาสนุกๆ 🎰 แล้วดูว่าผลจะออกมาเป็นอย่างไรได้บ้างไหมนะ ประกอบกับกติกาการเลือกตั้งในครั้งนี้มีการนำส.ว.มาร่วมเลือกนายกฯด้วย เราก็อยากจะให้ความรู้กับคนทั่วไปในการคำนึงถึงตัวแปรใหม่นี้ในการตั้งรัฐบาลด้วย จึงเป็นแรงบันดาลใจให้ทำ simulator ขึ้นมา
บทที่ 1 — ทดลองแบบลวกๆ
1.1 อยากรู้ต้องลงมือ
วิธีทดสอบไอเดียที่ดีที่สุดก็คือลองทำมันขึ้นมา เวอร์ชั่นแรกใช้เวลาเขียนแบบสุกเอาเผากิน 1 คืน ได้ออกมาหน้าตาแบบนี้
เสร็จแล้วก็ลองเอาไปให้สมาชิกที่ทำโปรเจค Social Listening ด้วยกันลองเล่นดู
1.2 เพิ่มเติมรายละเอียด
ความเห็นหลักๆที่ได้จากคนที่ลองเล่นก็คือชอบใจไอเดีย คิดว่าน่าสนใจดี แต่ต้องให้ความรู้คนเล่นไปด้วย เพราะไม่แน่ใจว่าได้เสียงมาแล้วยังไงต่อ
จึงเป็นที่มาของการเพิ่มคำอธิบาย กำหนด flow เป็นขั้นตอน และมีการสรุปผลเป็นประโยคให้ตอนจบ นอกจากนี้ก็เพิ่มให้กำหนดจำนวนส.ส.ได้ด้วย จากที่ตอนแรกใส่เลขมั่วๆไว้ให้แล้วแก้ไม่ได้ และลองปรับขนาดของ visualization ให้แคบลงดูว่าถ้าเปิดบนมือถือจะยังพอใช้งานได้ไหม
ถึงจุดนี้ทาง The Matter ก็เห็นด้วยว่าน่าทำจริงจังละ
บทที่ 2 — เริ่มทำจริงจัง
2.1 ย้ายบ้าน
พอตัดสินใจทำจริงจัง ก็คือต้องย้ายโค้ดข้างบน ที่เรียกได้ว่าเหมือนเวอร์ชั่นสนามเด็กเล่นไปแปลงเป็นโค้ดสำหรับสนามจริงที่มีรายละเอียดอื่นๆให้คำนึงถึง ตรงนี้ต้องเปลี่ยนหมวกจากดีไซน์มาเป็นวิศวกรเป็นหลัก วางสถาปัตยกรรมของโค้ดและติดตั้งเครื่องมือหลายๆอย่าง (webpack, eslint, etc.)ให้สามารถแก้ไขต่อได้ง่าย การลงแรงตรงนี้ผมเชื่อเสมอว่าเหนื่อยก่อนสบายทีหลัง เพราะถ้าเราวางรากฐานไว้ดี ตอนหลังถึงต้องปรับรูปแบบไปมาก็ทำได้สบายๆ และจะไม่เดินสะดุดขยะที่ตัวเองวางไว้
ในขั้นนี้รายละเอียดเช่นตัวอักษร, layout และ user interface ต่างๆ ก็เริ่มมีการใส่ใจมากขึ้นและปรับเปลี่ยนรูปแบบ เช่น ใช้ตัวอักษรให้ตรงกับสไตล์ของ ELECT, slider ใช้งานยากก็เปลี่ยนซะ
2.2 เพิ่ม preset
คนลองเล่นก็ยังติดปัญหาว่าไม่รู้จะกำหนดตัวเลขส.ส.ของแต่ละพรรคเป็นเท่าไหร่ดี (แม้ว่าจะเนิร์ดมากๆก็ยังต้องถอย 🏳️) เดายากมากถ้าไม่ได้โปรจริงๆ จึงเพิ่ม preset ให้เลือกจาก dropdown โดยเดิมทีตั้งใจว่าจะขอตัวเลขจากนักวิชาการมา แล้วเราก็เลือกเชื่อตามนักวิชาการ หรือปรับเองก็ยังได้
ออกมาก็ได้หน้าตารวมๆเป็นแบบนี้
บทที่ 3 — User Flow ไหนถึงโอเค Layout ไหนที่ใช่
ถึงตอนนี้ก็เริ่มทดลองดีไซน์หลายๆแบบด้วยความที่ยังมีอะไรติดใจอยู่หลายๆอย่าง
- Layout ข้างบนยังไม่ค่อยดีสำหรับใช้งานบนมือถือ เพราะเป็นการออกแบบเพื่อ desktop ก่อนแล้วค่อยปรับให้พอทนๆใช้ได้บนมือถือ แทนที่จะเป็น mobile-first ซึ่งผู้ชมเกินครึ่งน่าจะมาจากมือถือ
- จะนำเสนอเรื่องราวอย่างไร มีการออกไอเดียว่าจะทำออกมาให้คนมาทายผลการเลือกตั้ง(เหมือนทายผลบอล) แล้วก็ให้แชร์ แต่สุดท้ายก็คิดว่าการแชร์ไม่ควรเป็นจุดมุ่งหมายหลักของคนเข้ามาหน้านี้ การได้เปลี่ยนค่าต่างๆแล้วดูว่าผลจะออกมาเป็นอย่างไรต่างหากที่เป็นจุดขาย
- ยังรู้สึกใช้ยากไป กลัวคนใช้ไม่เป็น มีการลองดีไซน์เป็น wizard แนะนำทีละขั้นให้ทำตามไปเรื่อยๆ แต่กลายเป็นว่ามันทำให้ดู one-way มากขึ้นและไม่สนับสนุนให้คนย้อนกลับมาลองปรับค่าต่างๆมากนัก
- ขั้นตอนหนึ่งที่คนงงกันเยอะก็คือเดาจำนวนส.ส.ที่แต่ละพรรคจะได้ เลยลองให้เลือกว่าจะเชื่อตัวเลขของโพลหรือนักวิชาการคนไหนก็พอ (สุดท้ายไม่ได้ขอตัวเลขจากนักวิชาการนะครับ มีแต่ตัวเลขจากโพล) ถ้าเลือกแล้วก็ไปขั้นต่อไปได้เลย หรือถ้ายังไม่พอใจค่อยกดแก้ไข แทนที่จะแสดงฟอร์มแก้ไขตัวเลขตั้งแต่แรก ซึ่ง user หลายคนติดแหงกอยู่ตรงฟอร์มแก้ไขในเวอร์ชั่นที่แล้ว
- มีการทดลองแบบให้คิดน้อยกว่านี้อีก คือเลือกแค่ชื่อนักวิชาการแล้วดูผลที่นักวิชาการคนนั้นคิดหมดเลย ตั้งแต่ส.ส.ได้เท่าไหร่ จนพรรคร่วมรัฐบาลมีใครบ้าง แล้วค่อยให้ลองทำของตัวเองทีหลัง แต่ก็ติดปัญหาเดิมคือพอทำของตัวเองแล้วต้องคิดทุกอย่างเองหมดมันยากเกินไป
หลังจากลองผิดลองถูกไปเยอะแล้วก็ต้องหาทางเอาไอเดียต่างๆที่ไปทางเดียวกันบ้าง คนละทางบ้างเหล่านี้มารวมกัน
- Layout แบบ mobile-first น่าจะเหมาะกว่า
- ตัว visualization จะปรับเป็น circular layout ให้ล้อกับแปลนสภา
- Wizard แบบหลายขั้นตอนมากดูจะยืดไปแล้วทำให้ความอยากปรับค่าต่างๆลดลง เลยเอาขั้นตอนน้อยๆ ออกแบบ control ให้ดูเรียบง่ายที่สุด แล้วปรับค่าอะไรไปก็เห็น feedback สดๆทันที
- ทีนี้เวลาปรับค่าบนมือถือจะทำอย่างไรให้เห็นผลลัพธ์ทันที เพราะพื้นที่ไม่เพียงพอแสดง control และ visualization ในหน้าเดียวกัน มีอะไรง่ายๆที่แสดงได้บ้างว่าตั้งรัฐบาลได้แล้วนะ จึงดึงเอาตัวเลขใหญ่ๆที่แสดงจำนวนส.ส. + ส.ว. และ จำนวนส.ส.เฉยๆมาใช้ และเพิ่มคำบรรยายว่าจำนวนนี้ถึงเกณฑ์เลือกนายกฯ หรือได้เสียงข้างมากในสภาฯหรือไม่
- Navigation ด้านล่างทำให้ดูเด่นชัด อยู่ที่เดิมเสมอ และรู้สึกว่าเปลี่ยน step กลับไปมาได้ตลอดเวลา
หลังจากปรับดีไซน์ตาม sketch ในกระดาษด้านบน ก็ออกมาเป็น mobile version ที่แทบจะเหมือนกับเวอร์ชั่นสุดท้ายละ
แต่ก็ยังมีรายละเอียดเพิ่มเติมที่ต้องตามแก้อีก เช่น
- ย้าย control สำหรับกำหนดจำนวนส.ว. ขึ้นมาข้างบน เพราะมองไม่เห็นเวลาจอสั้นเกินไป
- เพิ่ม transition เวลาส.ว.ย้ายข้าง
- Legend ที่บอกว่าวงกลมคืออะไร กากบาทคืออะไร
- ทำให้ url เก็บค่าต่างๆที่เลือกไว้ พอ copy url แล้วส่งให้คนอื่น คนอื่นจะเปิดมาแล้วเห็นผลที่เราเลือกไว้ เทคนิคการเก็บข้อมูลใน url นี้ทำให้หน้า ELECT Live สามารถส่งจำนวนส.ส.ล่าสุดมายัง simulator ได้ทันที
บทที่ 4 — จอเล็กก็ใช้ได้ จอใหญ่ก็ใช้ดี
พอปรับ layout เอาใจมือถือเป็นหลักแล้วกลายเป็นว่าบน desktop กลับใช้พื้นที่จอได้ไม่เต็มประสิทธิภาพ เพราะแสดงผลเหมือนมือถือแล้วเว้นที่ว่างรอบๆไว้เปล่าๆ
เลยต้องออกแบบดีไซน์สำหรับ desktop ใหม่เพื่อให้ใช้พื้นที่ได้เต็มที่ โดยดัดแปลงจากดีไซน์ของมือถือให้รวมทุกหน้าย่อยๆเป็นหน้าใหญ่หน้าเดียว ก็ได้ออกมาเป็น
ส่งท้าย
จริงๆแล้วยังมีรายละเอียดยิบย่อยให้เล่าได้อีก แต่คิดว่าถ้ายาวกว่านี้คงจะไม่มีใครอ่านแล้ว 55 เลยคัดมาแต่ส่วนที่พอเป็นชิ้นเป็นอัน สิ่งที่อยากจะบอกกับคุณผู้อ่านก็คือ การออกแบบ user interface และ data visualizationในช่วงเริ่มต้นโปรเจคอาจจะสร้างอะไรได้เร็ว 🚀 แต่พอลงรายละเอียดในช่วงท้ายๆแล้ว สิ่งที่ดูเหมือนอีกนิดเดียวก็จะเสร็จ กลับใช้เวลามากมายกว่าที่คิดเสมอ แต่ความใส่ใจในตอนท้ายนี้แหละ ที่จะทำให้งานของคุณแตกต่างจากงานของคนอื่น ✨
The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.
— Tom Cargill, Bell Labs
หวังว่าอ่านแล้วคงจะเป็นประโยชน์บ้างไม่มากก็น้อยนะครับ สุดท้ายนี้ขอขอบคุณ 🙏 ทีมงาน ELECT โดยเฉพาะ กุ๊งกิ๊ง จาก The Matter, น้ำใส และ พี่โจ้ x2 จาก Boonmee Lab, เติ้ล, ต้า Skooldio, พี่ต่าย และทีมงานทั้งหลายที่เข้ามาช่วยทดสอบ หรือให้ความช่วยเหลือหลายๆอย่างในระหว่างการพัฒนาครับ หลายๆคนไม่เคยเจอหน้ากันจริงๆด้วยซ้ำ คุยกันแต่ใน Slack แถมอยู่คนละเวลาอีก
หมายเหตุ: ตัวเลขจำนวนส.ส.หรือการรวมพรรคที่เห็นใน design ข้างบนนี้เป็นสิ่งที่ผู้พัฒนากำหนดขึ้นมาเองแบบสุ่มๆ 🎲 เพียงเพื่อประโยชน์ในการออกแบบเท่านั้น
