ออกแบบทีเดียวใช้ทั้ง iOS และ Android ได้หรือเปล่า
ความท้าทายในการทำ Web Design System คือต้องทำให้ UI ออกมาเหมือนกันทุก Platform
ความท้าทายในการทำ Mobile Design System คือต้องทำให้ UI ออกมาเหมือน Platform ที่มันไปอยู่
ต้องเตือนตัวเองและหัวหน้าให้ดี เพราะบ่อยครั้งที่เราทำสำเร็จกับระบบใดระบบหนึ่ง เราก็จะยกแนวทางการทำงานนั้นไปใช้กับบริบทอื่นๆ ด้วย
ทั้งนี้การนำไปขยายผลเป็นทั้งเรื่องที่ดี!! โดยเฉพาะเมื่อเราเข้าใจว่าเรากำลังนำไปใช้กับบริบทอื่นอยู่นะ และเราเข้าใจว่าบริบทมันต่างกันอย่างไร มันอาจจะต้องเปลี่ยนแนวทาง และเมื่อรู้ก็ต้องเปลี่ยนให้เร็ว
Desktop Web
ในกรณีของ Desktop Web ผู้ใช้มีโอกาสที่จะใช้สอง Browser โดยเปลี่ยน Browser ไปๆ มาๆ สูงมาก ผมจะเห็นเพื่อนหลายคนที่ใช้ Default Browser อย่าง Safari สำหรับงานทั่วไป และสลับไปใช้ Chrome เมื่อจะทำงานจริงจัง และสุดท้ายกลายเป็นว่าเปิดเว็บเดียวกันบนทั้งสอง Browser
ดังนั้นการออกแบบเว็บจึงต้องทดสอบบนหลาย Browser และทดสอบด้วยว่ามันออกแบบมาได้เหมือนกันแล้ว เวลาผู้ใช้สลับ Browser เค้าจะได้ไม่รู้สึกอะไร และถ้าให้ดีน่าจะต้องดูด้วยว่าแต่ละ Platform (Mac, Windows และ Linux) ออกมาเหมือนกัน แต่ก็ไม่ค่อยต้องห่วงเรื่อง Platform เท่าไหร เพราะมันมักจะเหมือนกันบน Browser เดียวกันครับ
Mobile App
ในกรณีของ Mobile App (ไม่ว่าจะเป็น Native หรือ Hybrid) เราต้องเข้าใจว่าผู้ใช้ไม่ได้เปลี่ยนเครื่องมือถือกันบ่อยๆ (~3 ปี from 9to5Mac) ดังนั้นผู้ใช้จะคุ้นเคยกับหน้าจอของ Application ที่เค้าใช้ประจำอย่างเช่น Phone, Calendar, Contact, Photo, Camera, Messages และอีกหลายโปรแกรม โดยเฉพาะโปรแกรมที่ Platform นั้นๆ เตรียมไว้ให้
เมื่อผู้ใช้เปิดโปรแกรมใหม่ๆ ก็คาดหวังว่าจะใช้สิ่งที่ตัวเองเรียนไปแล้วกับโปรแกรมใหม่ที่พึ่งโหลด และความคาดหวังนั้นก็มักจะก็สำเร็จด้วย เพราะโปรแกรมต่างๆ ก็พยายามปรับตัวเองไปตาม Platform (iOS, Android) ความรู้สึกว่าฉันไม่ต้องเรียนรู้ก็ใช้เป็นมันเลยฝังแน่นขึ้นเรื่อยๆ ถ้าโปรแกรมไหนที่ต้องเรียนรู้ใหม่ผู้ใช้ก็จะรู้สึกไม่ดีกับโปรแกรมนั้น
ลองดูตัวอย่างจากภาพด้านบน จะเห็นว่าแม้แต่ Youtube ที่เป็นของ Google ก็ไม่ได้มี Design ที่เหมือนกันทั้งบน iOS และ Android จะเห็นว่าส่วนของ Padding, Line และขนาดของ Font มันไม่เท่ากัน
แม้แต่ Netflix ที่หน้าตาของ iOS และ Android คล้ายกันมาก ก็ยังไม่เหมือนกัน ถ้าลองสังเกต UI ของทั้ง Youtube และ Netflix สิ่งที่ต่างกันมากๆ บนทั้งสอง Platform จะเป็นเรื่องของ Font และเรื่องของ Padding ต่างๆ
ที่มาของความแตกต่างก็มาได้จากหลายสาเหตุครับ เรื่องความเคยชินของผู้ใช้ที่บอกไปข้างต้นก็ใช่ โดยเฉพาะเรื่องขนาดของตัวอักษรที่เราจะคุ้นชินได้ง่ายมาก แต่อยากจะบอกว่าสาเหตุที่สำคัญไม่แพ้กันคือเรื่อง Accessibility ที่ Platform เตรียมไว้ให้
พวกเราต่างมีขนาดของ Font ที่ดูได้ถนัดไม่เหมือนกัน บางคนอาจจะมองไม่ชัดเมื่อ Font มีขนาดเล็ก บางคนถ้า Font ใหญ่ก็จะอ่านได้ไม่คล่อง ดังนั้นทั้ง iOS แและ Android จึงทำการบ้านเรื่องนี้อย่างหนัก (จริงๆ ไม่ใช่แค่ Font ครับ อยากให้ลองอ่าน WCAG ของ W3C) เมื่อเค้าทำการบ้านมาแล้ว ถ้าให้ Developer ของเรามานั่งทำเรื่องนี้อีกก็ดูไม่คุ้ม สู้เอาของเค้ามาใช้แล้วเอาเวลาไปทำ Solution ของเราให้ดี จะดีกว่า 😅
ดังนั้นคนที่ออกแบบ Design System ของ Mobile จึงต้องศึกษาเรื่องนี้ เข้าไปคุยกับ Developer ว่า Platform เค้าเตรียมอะไรมาให้ใช้บ้าง และไปเข้าใจว่าแต่ละ Platform เตรียมของมาไม่เหมือนกันอย่างไร เมื่อเราออกแบบโดยมีความเข้าใจเรื่องนี้เราจะได้ออกแบบให้ App ของเราใช้ความสามารถนี้ตั้งแต่แรกโดยไม่ต้องเสียเวลาพัฒนามันขึ้นมาเอง
อย่าลืมว่าเรามีคนเก่งจำกัด ต้องใช้ให้คุ้ม
ในหลายกรณีผมจะเห็นตัว Design System ไม่ได้คิดถึงเรื่องนี้ แล้วไปกำหนด font และ padding แบบไม่ยืดหยุ่น แถมคนที่เป็นคนตรวจก็ไม่เข้าใจ พยายามจะให้มันตรงตาม ที่ออกแบบไว้เป๊ะๆ หรือพยายามทำให้ iOS และ Android หน้าตาเหมือนกัน ซึ่งส่งผลให้ทำให้ Developer ต้องเข้าไปแก้สิ่งที่ระบบเตรียมไว้ให้ (ทีมมักเรียกว่า Hard code) หรือเลวร้ายกว่านั้นคือ Developer ตัดสินใจสร้างขึ้นมาใหม่เลย ทำให้โปรแกรมเสียความสามารถในการปรับตัวตามผู้ใช้ไป… น่าเสียดายยิ่งนัก 😭
Design System
ถึงแม้ในกรณีของ Web เราออกแบบมาทีเดียวจะสามารถนำไปใช้ได้ในทุก Platform เราก็ควรจะคิดถึงเรื่อง Accessibility อยู่ดี ไม่ว่าจะเป็นเรื่องสี หรือตอนที่ผู้ใช้ขยายขนาดของ Font แต่คงไม่ต้องห่วงเท่าไหร่ว่าแต่ละ Browser จะต้องแสดงผลต่างกันหรือเปล่า โดยปกติเราพยายามให้เหมือนกันในกรณีของ Web
สำหรับ Mobile เราก็ไม่จำเป็นต้องออกแบบทุกหน้าเป็น 2 platform แค่แสดงส่วนหลักๆ ว่าแต่ละ Platform จะต่างกันอย่างไรก็พอ แล้วหน้าที่เหลือก็ออกแบบแค่ platform เดียวก็พอ สิ่งที่สำคัญคือต้องไปคุยกับ Developer ให้ดีว่ามันต่างกันอย่างไร และถ้าให้ดีต้องไปคุยก่อนออกแบบด้วยว่ามีอะไรที่สามารถใช้ได้เลยบ้าง (Out of the shelf) เราจะได้ใช้ของพวกนั้นเลย ไม่ต้องทำขึ้นมาใหม่
ไม่ต้องห่วงว่าใช้ของที่มีไว้ให้แล้วจะเสีย Branding ของพวกนี้เค้าจะคิดเรื่องการใส่ Branding ไว้ให้เราแล้ว เราต้องไปศึกษาว่าเค้าแนะนำให้ใส่ตรงไหนบ้าง จุดไหนที่ใส่แล้วทำให้เสีย Accessibility ครับ
เมื่อเราเข้าใจเราจะช่วยให้ของออกสู่ตลาดได้เร็วขึ้นหลายเท่า เพราะมันไปลดงานของ Developer ที่ต้องพัฒนา (มันมีมาแล้วก็ไม่ต้องพัฒนา), ลดงาน QA ที่ต้องตรวจ (Code น้อย Bug น้อย), BA ที่ต้องแก้ปัญหา (ตอนที่ลูกค้าบอกว่าตัวอักษรตัวเล็ก หรืออ่านไม่ออก) และที่สำคัญคือลดงานของผู้ใช้ ที่ต้องมาทำความเข้าใจระบบเรา ทำให้เค้ามีเวลาไปเข้าใจ Solution ของเราได้มากขึ้น ว่ามันแก้ปัญหาให้เค้าได้จริงหรือเปล่า
สุดท้าย ถ้าคนเป็น UX หรือ UI อ่านมาถึงตอนนี้ คงเห็นได้ชัดแล้วว่าเราศึกษาแค่จุดที่เราสนใจไม่ได้ ถ้าจะออกแบบของให้ดีเราต้องออกไปเข้าใจว่า Developer เค้าทำงานกันอย่างไร เครื่องมือมันช่วยอะไรได้บ้าง Library ต่างๆ มีคุณสมบัติอะไรให้เราใช้บ้าง
ถ้าทำได้เราจะไม่ได้สร้างแค่ของที่ผู้ใช้รัก แต่จะทำของที่ทีมงานรักด้วยครับ 🥰
ปล. ทีมไหนยังไม่ได้ทำก็ยังไม่ต้องรีบไปรื้อทำใหม่นะครับ ค่อยๆ ปรับกันไป 👍
