Typography for Driving ออกแบบยังไงให้ถูกใจพี่ไรเดอร์
สรุป Session Typography in Product Design Different Writing Scripts, and The Power of System Fonts by คุณชู Head of UX/UI และคุณดาว Senior UX/UI Designer จาก LINE MAN Wongnai ในงาน UXTH2024
เริ่มต้นด้วยคุณชูแชร์ในหัวข้อ Basic Legibility of Font
- Size คือ ขนาดของตัวอักษรที่เหมาะสมกับการใช้งาน
- Contrast คือ ความแตกต่างระหว่างสีตัวอักษรและพื้นหลังตัวอักษร ต้องแตกต่างกันมากพอ หากใช้สีที่ใกล้เคียงกันจะทำให้อ่านยาก
- Line Height คือ ระยะห่างระหว่างตัวอักษรแต่ละบรรทัด ต้องไม่ซ้อนทับกันหรือติดกันจนเกินไป
คุณชูได้แนะนำว่า Base font size ปกติจะอยู่ที่ 14–16 แต่ไม่ได้ใช้ได้กับทุกฟอนต์ เนื่องจากแต่ละฟอนต์ทำมาขนาดไม่เท่ากัน และข้อควรระวัง คือ บางฟอนต์เราเห็นว่าต่างจาก base font size นิดหน่อย แต่เวลาใช้งานอาจจะมีความแตกต่างที่ส่งผลต่อการอ่านได้
และยิ่งไปกว่านั้น ถ้าหากเราใช้ Font ของ Branding แต่ใช้พวก Public design system เช่น Material design หรือ Ant design ทำให้ต้องคำนึงถึงสิ่งเหล่านี้
- X-height Difference ความสูงของตัวอักษร หากไม่เท่ากัน แก้ที่ file font เลย rescale ตัว x-height ใหม่ได้เลย
- Ascender / Descender แต่ละฟอนต์จะสั้นยาวไม่เท่ากัน ส่งผลต่อการจัด Vertical Alignment ของปุ่ม และส่งผลต่อระยะห่างของแต่ละบรรทัดด้วย
Tips : คุณชูแนะนำ Font Squirrel ที่สามารถปรับขนาดต่างๆได้ - Font Weight ความหนาบางระหว่าง Regular กับ Bold ที่ต่างกันในแต่ละฟอนต์ ส่งผลต่อการจัดการบรรทัด ทำให้อาจจะตกหล่น ขาดหายได้ หรือฟอนต์เดียวกันเอง หากแตกต่างกันน้อยเกินไป อาจจะทำให้ดูไม่แตกต่าง ไม่สามารถแยกความหนาบางได้
ทาง LMWNได้นำสิ่งต่างๆเหล่านี้มาใช้ ทำให้เปลี่ยนฟอนต์ทั้งแอปได้โดยที่ Layouts ไม่พัง
เรื่อง Different Writing Script
- ภาษาอังกฤษ ก็จะมีในส่วนของตัวหนังสือละติน ที่แต่ละฟอนต์ก็จะมี Ascender / Descender ไม่เท่ากัน
- ภาษาไทย ความพิเศษ คือ Tone-marks ที่มีถึง 2 level คือ สระและวรรณยุกต์ซ้อนกันเหนือชั้นไปอีกกกกกก ต้องระวังเรื่อง Line Height ดีๆไม่อย่างนั้น ตัวอักษร สระ วรรณยุกต์ทับกันอ่านยากแน่นอน
ส่วนของภาษาไทยก็จะมีแบบ Looped (มีหัว) และแบบ Loopless (ไม่มีหัว)
Looped จะให้ความรู้สึกแบบดั้งเดิม แต่อ่านง่าย
Loopless จะให้ความรู้สึกทันสมัย แต่เพราะไม่มีหัวทำให้บางตัวอักษรคล้ายกับภาษาอังกฤษ
ใน LMWN เองก็ใช้ทั้ง 2 แบบ โดยที่ใช้แบบ Loopless กับ product แบบ B2C เช่น LINE MAN app และใช้แบบ Looped กับ product สำหรับ B2B เช่น Rider app
ส่วนถัดมาคุณดาวแชร์เรื่อง Driving UX Typography
แอป LINE MAN Rider ที่มี active user ประมาณ 140,000 คน โดยพี่ๆไรเดอร์ทำงานเฉลี่ยอยู่ที่ 6–8 ชั่วโมงต่อวัน ใช้เวลา 70% อยู่บนท้องถนน และต้องทำงานบนจอมือถือไปด้วย เช่น บางครั้งดูแผนที่ รับสายรับงานใหม่ แถมยังมีอุปสรรคนอกจออีก เช่น ออเดอร์เค้กหรือน้ำที่ต้องระมัดวังเป็นพิเศษ หรือฟ้าฝนไม่เป็นใจ น้องหมาวิ่งไล่ต่างๆ เป็นต้น
โดยที่ปกติแล้วเราจะใช้งานมือถือห่างจากระยะสายตาประมาณ 20–30 เซนติเมตร
ในขณะที่พี่ไรเดอร์ใช้งานมือถือห่างจากระยะสายตาประมาณ 50–60 เซนติเมตร
ซึ่งห่างจากที่เราใช้ปกติมากถึง 2 เท่า
ด้วยลักษณะการใช้งานของพี่ไรเดอร์ จึงต้องเลือก Typeface ที่มี Reading accuracy คือ มองเห็นชัดเจน อ่านได้ถูกต้อง , Fast reading คือ อ่านได้ไว สบายตา และ Reflects brand personality
ทีม LMWN จึงทำการ research เพื่อหาฟอนต์ที่เหมาะสมสำหรับ LINE MAN Rider app โดยมี candidate 4 fonts ได้แก่ Noto sans Thai UI , Graphik TH , Sarabun และ Noto Sans Thai Looped
เริ่มจาก Round ที่ 1 : Typeface personality
ทำ Survey โดยมีพี่ๆไรเดอร์ 9,983 คน และ User 158 คน ซึ่งเป็นการสอบถามเกี่ยวกับความรู้สึกของตัว Typeface ต่างๆและให้คะแนนในแต่ละด้าน พบว่า
- ด้าน Modern - Traditional พบว่าฟอนต์แบบไม่มีหัวดู minimal กว่า และฟอนต์แบบมีหัว ดูเชย ดูกลมมนเรียบร้อย
- ด้าน Friendliness - Formality พบว่าฟอนต์แบบไม่มีหัว friendly มากกว่า เพราะมีความโค้งมน มีลูกเล่น ไม่ทางการไป แต่ฟอนต์แบบมีหัวเหมือนเอกสารราชการ เหมือนคัดลายมือ
- ด้าน Difficulties - Easiness พบว่าฟอนต์แบบมีหัวอ่านง่ายสุด มีความคุ้นเคย อ่านได้ชัดเจน แต่ฟอนต์แบบไม่มีหัวจะมีตัวหนังสือที่คล้ายๆกันอยู่ ไม่ชัดเจน
ถัดไป Round ที่ 2 : Fastest font to reading
ทำการ Interview และ Reading test กับ User 6 คน และพี่ๆไรเดอร์ 6 คน พบว่า Sarabun อ่านได้เร็วที่สุด
สุดท้าย Round ที่ 3 : Legibility
เนื่องจากฟอนต์แบบไม่มีหัว มีโอกาสที่จะอ่านผิดอาจพลาดได้ง่ายกว่า ซึ่งทำให้อาจเกิดข้อผิดพลาดในการทำงานได้
สุดท้ายเลือก Sarabun ✨ มาใช้ในแอป LINE MAN Rider เพราะให้ความสำคัญกับเรื่องการใช้งานก่อน ซึ่ง Sarabun ทำได้ดีด้าน reading accuracy และ Fast reading
“ NO THE BEST FONT , JUST THE BEST FIT “
แต่ทีมยังไปเจอปัญหาอีกว่า พี่ๆไรเดอร์ ซูมหน้าจอ ทำให้ Component ระเบิด คำหายบ้าง สุดท้ายก็ใช้งานไม่ดีอยู่ดี เลยตั้งข้อสงสัยว่า เอ้ะ ทำไมเขาถึงยังซูมกันนะ ? 🤔 แล้วก็พบว่า จริงๆแล้วพี่ๆไรเดอร์แค่ซูมบาง Flow เท่านั้น จึงได้หันมาดูเรื่อง Typography for driving
- Font size พี่ไรเดอร์ใช้โทรศัพท์ในระยะที่ไกลกว่าปกติ ทำให้เราขยายขนาด Font ให้ใหญ่ขึ้น แนะนำว่าควรเป็น 16 ขึ้นไป
Tips : คุณดาวแนะนำเว็บ sizecalc.com ที่ใช้หา scale ที่เหมาะสมของฟอนต์ - Weight ช่วยให้พี่ไรเดอร์ จดจำได้ว่าเค้าอ่านถึงไหนแล้ว เพราะเขาต้องมองจอสลับกับถนนด้วย
- Length แบ่ง space ดีๆ เคาะบรรทัดเพื่อให้สามารถกวาดสายตาอ่านครั้งเดียวก็อ่านจบได้เลย
- Bigger font size = Less space เนื่องจากฟอนต์ใหญ่ขึ้น พื้นที่อื่นๆก็น้อยลง แต่จะให้ Scrolling ลงมาเยอะๆก็ไม่สะดวก คุณดาวแนะนำให้ลองใช้ design element เช่น badge , color หรือ icon ก็ช่วยให้พี่ไรเดอร์เข้าใจข้อมูลไวมากขึ้น
ใช้สี แทน Service งาน ผลลัพธ์ที่ได้ คือ งาน Food พี่ๆไรเดอร์ เรียกว่างานเขียว หรืองาน Messenger ก็เรียกว่างานฟ้า หรือ งาน Mart ก็เรียกว่างานส้ม กลายเป็นชื่อเล่นไปเลย
- Color contrast โดยทั่วไปสำหรับการขับรถก็จะแนะนำอยู่ที่ 4.5:1 ขึ้นไปและควร Provide ทั้ง Dark mode & Light mode ด้วย ซึ่งใน LINE MAN Rider app จะออกแบบ light mode contrast อยู่ที่ 4.6 และ dark mode อยู่ที่ 8.3
คุณดาวได้ยกตัวอย่าง Google map ที่ตอนเราค้นหาจะเป็นตัวหนังสือขนาดปกติ เพราะเราถือมือถืออยู่ แต่ถ้าตอนกด Start เพื่อขับรถจะเป็น Driving view ทำให้ตัวหนังสือด้านบนใหญ่กว่าปกติ ใน Line Man Rider ก็นำมาปรับใช้เช่นกัน ไม่ใช่ว่าต้องตัวใหญ่ทั้งหมด บางส่วนที่เขาไม่ได้ใช้บนท้องถนนก็สามารถออกแบบให้เป็นขนาดปกติได้
ขอบคุณคุณชูและคุณดาวที่มาแชร์ Session ดีๆ ที่ทำให้เห็นถึงความสำคัญของ Typography ไม่ใช่แค่เพราะ Font Branding เป็นแบบนี้แล้วนำมาใช้เลย แต่ควรคำนึงถึงการใช้งานของผู้ใช้งานเป็นหลัก ตัวอย่างเช่น พี่ๆไรเดอร์ที่ไม่ใช่แค่ใช้งานได้ แต่ต้องง่ายต่อการใช้งานด้วย 💖
อ้างอิงเนื้อหาดีๆ จาก Session Typography in Product Design Different Writing Scripts, and The Power of System Fonts by คุณชู Head of UX/UI และคุณดาว Senior UX/UI Designer จาก LINE MAN Wongnai ในงาน UXTH2024
