Next.js · Mobile first · ผู้อ่านอายุ 60

ทริปเชียงใหม่
หน้าแผนเที่ยวที่ออกแบบโดยตั้งสายตาพ่อแม่เป็นข้อจำกัดตั้งต้น

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

Next.js OKLCH Tokens Vertical Timeline WCAG AA localStorage Reduced Motion
Empathize · Define

ผู้อ่านจริงไม่ใช่คนทำ และนั่นเปลี่ยนเกือบทุกการตัดสินใจ

คนออกแบบเป็นนักออกแบบอายุสามสิบกว่า ส่วนคนที่ต้องอ่านจริงคือพ่อกับแม่วัยหกสิบ ที่จะเปิดดูบนมือถือตอนหัวค่ำ

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

— ข้อจำกัดที่เขียนไว้ตั้งแต่ก่อนเปิดไฟล์แรก

ค่าเริ่มต้นของเว็บสมัยใหม่ อ่านยากสำหรับสายตาวัย 60

ขนาดตัวอักษรพื้นฐาน ระยะบรรทัดที่แน่น และตัวหนังสือสีเทาอ่อน คือชุดค่านิยมที่ออกแบบมาเพื่อสายตาคนทำงาน ไม่ใช่สำหรับคนที่เริ่มต้องเลื่อนมือถือออกห่าง

การ์ดเรียงกันรัว ๆ ไม่ได้บอกลำดับของทริป

ทริปคือเรื่องที่มีลำดับวันชัดเจน แต่โครงแบบตารางการ์ดทำให้ทุกวันดูเท่ากันหมด คนอ่านต้องประกอบลำดับเองในหัวว่าอะไรมาก่อนหลัง

หน้าตาสำเร็จรูปของหมวดท่องเที่ยว

ฟ้า เทอร์ควอยซ์ ส้มพระอาทิตย์ตก และตัวเลขใหญ่ ๆ บนพื้นไล่สี — เป็นชุดสีที่สมองจับคู่กับคำว่าเว็บทัวร์ทันที และทำให้หน้าที่ลูกทำให้พ่อแม่ดูเหมือนโฆษณาแพ็กเกจทัวร์

ยังมีเรื่องที่ต้องให้พ่อแม่ตัดสินใจ

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


Ideate · Define

ตัดสินใจเรื่องสีจากบริบทที่ใช้จริง ไม่ใช่จากหมวดของเนื้อหา

ฉากที่จินตนาการไว้คือพ่อกับแม่นั่งบนโซฟาตอนหัวค่ำ แสงไฟในบ้านอุ่น เปิดมือถือดูแผนที่ลูกทำให้ — ทั้งชุดสีถูกเลือกจากฉากนั้น

เขียวสนกับดินเผา แทนที่จะเป็นฟ้าเทอร์ควอยซ์

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

ตัวหนังสือใหญ่และคอนทราสต์สูงเป็นค่าเริ่มต้น

ตั้งขนาดพื้นฐานใหญ่กว่าที่นิยมกัน ระยะบรรทัดสบาย และใช้ตัวอักษรเข้มบนพื้นกระดาษอุ่น ไม่ใช่เทาอ่อนบนขาวจัด

ไทม์ไลน์แนวตั้งเป็นโครงหลัก

โครงเรื่องคือลำดับห้าวัน ไม่ใช่ตารางการ์ด มีเส้นเชื่อมและหมุดเลขวัน เพื่อให้เห็นทันทีว่าอะไรมาก่อนหลัง โดยไม่ต้องอ่านหัวข้อ

ให้วันที่เป็นไฮไลต์เด่นกว่าวันอื่นจริง ๆ

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


Prototype

สิ่งที่ทำให้มันเป็นเครื่องมือ ไม่ใช่แค่หน้าอ่าน

ถ้าอ่านอย่างเดียว ส่งเป็นข้อความก็พอ สิ่งที่ทำให้ต้องเป็นหน้าเว็บคือสามอย่างนี้

01

ไทม์ไลน์ห้าวันพร้อมเส้นทางและที่พัก

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

02

เช็กลิสต์ของที่ต้องเตรียม ที่ติ๊กแล้วจำค่าไว้

ปิดหน้าไปแล้วกลับมาเปิดใหม่ ของที่ติ๊กไปแล้วยังติ๊กอยู่ เก็บไว้ในเครื่องของแต่ละคน ไม่ต้องมีบัญชีและไม่มีข้อมูลออกไปไหน

03

โซนที่บอกตรง ๆ ว่าตรงไหนยังรอความเห็น

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


Define

รายการสิ่งต้องห้ามของงานชิ้นนี้

เขียนไว้ก่อนออกแบบ ใช้เป็นเกณฑ์ตัดสินเวลาลังเลว่าจะใส่ลูกเล่นอะไรเพิ่มดี

1
หน้าเดียวจบ อ่านครบบนมือถือ
5
วันในไทม์ไลน์ พร้อมที่พักและเส้นทางแต่ละคืน
3
ความกว้างที่ออกแบบไล่จากเล็กไปใหญ่
0
บัญชีที่ต้องสมัคร และข้อมูลที่ออกจากเครื่อง

Level Up · Reflect

สิ่งที่ได้จากการมีผู้ใช้จริงแค่สองคน

ผู้ใช้น้อยแต่ชัดเจน ให้ข้อมูลที่ตรงกว่าการเดาผู้ใช้จำนวนมากที่ไม่มีตัวตน

ทริปเชียงใหม่

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

Next.js TypeScript OKLCH Design Tokens localStorage WCAG AA Vercel
Projects