เมื่อไม่กี่ปีที่ผ่านมา Design System กลายเป็นคำที่คุ้นหูกันในหมู่ UI Designer องค์กรต่างๆ เริ่มให้ความสำคัญกับการวางผัง Design System ของตัวเองให้เป็นระบบ เพื่อรองรับการขยายตัวของทีมและผลิตภัณฑ์

ในบทความนี้จะพูดถึงประสบการณ์การออกแบบ ทั้งก่อนและหลังมี Design System รวมไปถึงการประยุกต์ใช้ในพัฒนาผลิตภัณฑ์ต่างๆ

เมื่อปีที่แล้ว รัฐบาลเปลี่ยนรูปแบบการคัดเลือกนักเรียนเข้าศึกษาต่อในระดับมหาวิทยาลัยเป็นแบบใหม่ (อีกแล้ว🤔) ทำให้นักเรียนระดับชั้นม.ปลายทั่วประเทศประสบปัญหาด้านการรับมือกับการสอบแบบใหม่นี้

ในบทความนี้เราจะพาไปดู Design Process ของแอปที่ช่วยให้เด็กกว่า 100,000 คน เข้าถึงข้อมูลข่าวสารทางการศึกษาอย่างเท่าเทียมกันได้

แต่ก่อนอื่นเลย…

TCAS คืออะไร ?

TCAS ย่อมาจาก Thai University Center Admission System คือระบบการสอบคัดเลือกบุคคลเข้าศึกษาต่อในระดับมหาวิทยาลัยแบบใหม่ที่เริ่มใช้ในปีนี้ (พ.ศ. 2561) รูปแบบการรับนักศึกษาจะแบ่งออกเป็น 5 รอบ โดยแบ่งเป็น

• รอบ 1 การยื่น Portfolio
• รอบ 2 การยื่นโควตา
• รอบ 3 รับตรงร่วมกัน
• รอบ 4 Admission
• รอบ 5 รับตรงอิสระ

Empathize: Understanding Pain Points

ปัญหาด้านการเตรียมตัวสอบเข้ามหาวิทยาลัยของเด็ก ม.6
เนื่องจากการสอบ TCAS ถูกจัดขึ้นปีนี้เป็นปีแรก ทำให้รูปแบบการเตรียมตัวของน้องๆ นักเรียนนั้นเปลี่ยนไปจากเดิม อีกทั้งรูปแบบการสอบยังแบ่งออกเป็น 5 รอบ ทำให้การเตรียมตัวในแต่ละรอบนั้นแตกต่างกันตามเกณฑ์การรับสมัครของมหาวิทยาลัยและสาขาที่นักเรียนสนใจ

ในปี ค.ศ. 1570 หนังสือ The Four Books of Architecture ได้ถูกตีพิมพ์เป็นครั้งแรกในเมืองเวนิส ภายในหนังสือบรรจุด้วยองค์ความรู้ นิยามขอบเขตและกฎเกณฑ์ของการออกแบบ รวมไปถึงคำศัพท์ต่างๆ ที่ใช้ในงานสถาปัตยกรรม จุดประสงค์ก็เพื่อสร้างบรรทัดฐานในการสื่อสารระหว่างสถาปนิกเองและทีมก่อสร้าง อีกทั้งช่วยวางระบบการคิด ให้อยู่ในกรอบเดียวกันเพื่อเป็นประโยชน์ในการสร้าง ต่อเติมหรือซ่อมบำรุงอาคารในอนาคต

การออกแบบ Digital Product ก็ไม่ต่างกับงานสถาปัตยกรรม โครงสร้างที่ไม่รองรับการเปลี่ยนแปลงหรือการขยับขยาย อาจสร้างปัญหาต่อการพัฒนาสินค้าและบริการในอนาคตได้

ซึ่งในปัจจุบันบริษัทยักษ์ใหญ่ไม่ว่าจะเป็น Airbnb, Atlassian, IBM หรือ Google ได้ให้ความสำคัญกับ Design System ในการวางระบบการออกแบบ เพื่อรองรับการขยายตัวของสินค้าและบริการของตนในอนาคต

What is Design System?

Design System คือระบบการออกแบบที่เชื่อมโยงกัน สามารถใช้ร่วมกัน แล้วยังสร้างความสอดคล้องให้กับสินค้าและบริการนั้น ให้อยู่ภายใต้ Branding ขององค์กรใดองค์กรหนึ่ง

แล้วทำไมถึงต้องมี…

หลายๆ ครั้งที่เรา UX Designer มักจะได้ยินคำว่า Information Architecture (IA) หรือ ‘สถาปัตยกรรมข้อมูล’ แล้วมักมองข้ามเพราะเห็นว่าเป็นเรื่องไกลตัว เป็นเรื่องของ Developer มากกว่า หรือมักคิดว่ามันก็คล้ายๆ กับการวาง Wireframe ทำควบๆ กันไปก็ไม่น่ามีปัญหาอะไร

ในบทความนี้เราจะทำการขยายความรู้ ความเข้าใจเกี่ยวกับ IA โดยอิงจาก
Apple Music เพื่อให้เห็นว่า IA มีบทบาทสำคัญต่อการออกแบบประสบการณ์ให้
กับผู้ใช้อย่างไร

ก่อนอื่นเลย…What is Information Architecture ?

Information Architecture คือโครงสร้างข้อมูลทุกอย่างที่อยู่ภายในแอปหรือเว็บไซต์ การเข้าถึงข้อมูลสินค้าหรือบริการที่ง่าย มักเกิดจากการวาง IA อย่างเป็นระบบ การจัดการกลุ่มข้อมูลที่ยุ่งยากให้เป็นระเบียบ จึงเป็นงานของ UX Designer ซึ่งไม่ต่างอะไรจากการที่สถาปนิกวางแผนโครงสร้างในพิมพ์เขียว ก่อนที่จะส่งแบบต่อ ไปให้วิศวกรเพื่อลงมือสร้างจริง

เปรียบเทียบให้ชัดขึ้น ถ้าเรามอง Information Architecture เป็นโครงสร้างอาคาร ข้อมูลที่สำคัญๆ ต่างๆ ก็ไม่ต่างจากเสาหลักที่จะมาค้ำโครงสร้างอื่นๆ ไม่ว่าจะเป็น ฟีเจอร์แต่ละฟีเจอร์ การเข้าถึงหน้าในแต่ละหน้า คอนเทนต์ต่างๆ ที่จะวางอยู่ในหน้านั้นๆ หรือแม้กระทั่งกราฟิกที่จะเอามาใช้ในแต่ละหน้า ทั้งนี้ล้วนมาจากการวาง ข้อมูลแผนผังที่เป็นระบบ การที่เรามีโครงสร้างที่แข็งแรงแต่ตอนแรก จะทำให้การต่อเติมส่วนต่างๆ นั้นเป็นไปได้ง่ายขึ้น…

เมื่อก่อน การสร้าง Animation ลงใน iOS, Android และ React Native เป็นอะไรที่ยุ่งยากและกินเวลา ไหนจะต้องมาจัดการ Image File ที่เยอะและใหญ่ แล้วกว่า Developer จะปั้นงานของ Designer ให้ออกมาเป็นรูปเป็นร่างได้นั้น ใช้เวลาเป็นอย่างมาก

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

รู้จักกับ Lottie

จุดเริ่มต้นของ Lottie เกิดจากการที่ Design Lead ของ Airbnb พยายามทำ Prototype ผ่าน Adobe After Effect แล้วพบว่า Animation และ Transition ต่างๆ ที่ทีมของเขาออกแบบมา ไม่ได้ถูกรวมเข้าไปในแอปของ Airbnb เนื่องจากทีมพัฒนาทำไม่ทัน เขาจึงพยายามหาวิธีที่จะลดเวลาในการนำ Animation จาก After Effect ไปใส่ในแอปพลิเคชันบนมือถือ

เมื่อต้นปีที่ผ่านมา Airbnb ได้เปิดตัวเจ้า Lottie ซึ่งเป็น Library ที่ช่วยให้ Designer สามารถสร้าง Motion Graphic บน After Effect แล้วส่งต่องานเป็นไฟล์ JSON ให้กับทีมพัฒนาได้เลย โดยสามารถนำไปใช้ได้กับแอปพลิเคชันทั้งบน iOS, Android และ React…

การใส่ animation หรือ motion ต่างๆ ผสมผสานกับ flat design ที่เรียบง่าย เป็นแนวทางการออกแบบ UI ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน เพื่อช่วยให้ User ไม่รู้สึกเบื่อกับการใช้แอปพลิเคชันแบบเดิมๆ

ในบทความนี้ เราจะมาดูกันว่า Animation เหล่านั้นมีกี่ประเภทและประกอบไปด้วยองค์ประกอบอะไรบ้าง

1. Hero Animations