Pass Pro-Version คือ แอปพลิเคชันสำหรับคัดกรองการได้ยินในเด็กปฐมวัย ที่เน้นการใช้งานหลักโดยหน่วยงานประเภทโรงพยาบาล และโรงเรียนที่ให้ความร่วมมือกับ Nectec ในเรื่องของการตรวจสุขภาพของผู้ป่วย และเด็กนักเรียนควบคู่ไปกับการออกแบบให้ผู้ใช้ทั่วไปสามารถทำการทดสอบการได้ยินเองได้เช่นกัน โดยที่ไม่ได้จำกัดเพศหรือช่วงอายุของผู้ใช้
Nectec
2019
เริ่มต้นโปรเจกต์โดยการนำ requirement ที่มาในรูป wireframe คร่าว ๆ จากลูกค้ามาพัฒนาต่อให้เกิด wireframe เวอร์ชันสุดท้ายก่อนจะถูกนำไปออกแบบ UI ในขั้นตอนถัดไป โดยได้ออกแบบในส่วนของ ux ในบางอย่างเพิ่มเติมเข้าไปเพื่อให้แอปพลิเคชันมีฟังก์ชันการใช้งานที่ครบถ้วนมากขึ้น ได้แก่ ฟังก์ชันสำการเข้าสู่ระบบ ออกจากระบบ การตั้งค่าหูฟังสำหรับการทดสอบ นอกจากนั้นยังปรับการจัดวางปุ่มในตำแหน่งต่าง ๆ ใหม่โดยอ้างอิงจากการใช้งานของแอปพลิเคชันทั่วไปที่คาดว่า user จะเคยชินกับตำแหน่งนั้น ๆ
Original (ซ้าย) Wireframe (ขวา)
ตั้งแต่เริ่มจัดทำ wireframe และ user flow ก็ได้มีการ discuss กับลูกค้าอยู่หลายครั้ง ในเรื่องของการออกแบบยังไงเพื่อให้ตอบโจทย์ทั้งด้านความต้องการของลูกค้า และประสบการณ์ใช้งานที่ดีสำหรับผู้ใช้ทุกกลุ่ม
ในโปรเจกต์นี้ได้รับหน้าที่การออกแบบในส่วนของ UI เป็นหลัก ตั้งแต่การกำหนดธีมสีของแอปพลิเคชัน จนถึงรูปแบบทั้งหมดของแอปพลิเคชัน โดยทางลูกค้าขอมาว่าให้เน้นการแสดงผลใน Talet จะได้เห็นชัด ๆ ตอนที่หน่วยงานเข้าไปทดสอบเด็ก ๆ โจทย์ของโปรเจกต์นี้ คือ แอปพลิเคชันสำหรับเด็ก และออกแบบได้ตามใจชอบค่ะ
จึงเลือกออกแบบ UI โดยใช้สีโทนสดใส เนื่องจากมองว่าเป็นสีที่สามารถดึงดูดความสนใจของเด็กได้ดีกว่าโทนสีเรียบ ๆ หลังจากนั้นได้นำไปทดสอบกับกลุ่มตัวอย่างเด็กในวัยใกล้เคียง โดยให้เลือกการ์ดที่สนใจอยากเล่นมากที่สุด ใบที่ 1 และ 2 จะออกโทนพาสเทล ส่วนใบที่ 3 สีจะสดมากที่สุด ผลปรากฏว่าเด็กๆเลือกการ์ดที่ใช้สีสดใสมากที่สุด เลยได้โทนสีตาม template ด้านล่างมาค่ะ
Theme Color
design guide for test
Font
เลือกใช้ฟอนต์ไอติมเพราะดูมีความน่ารักค่ะ ดูเข้ากับช่วงวัยของกลุ่มผู้ใช้หลักและไม่เป็นทางการเกินไป คาดว่าจะส่งผลให้ผู้ใช้รู้สึกไม่จริงจังเกินไปในเวลาที่ต้องทดสอบการได้ยิน
ออกแบบ UI ให้คล้องจอง Wireframe และ flow ที่ได้สรุปกับทีม และลูกค้า
ตัวอย่างงานใน XD
ในเครั้งนี้ได้เลือกใช้ Adobe XD ในช่วงแรกเพราะต้องการเรียนรู้วิธีการใช้งาน และเพื่อเปรียบเทียบกับเครื่องมืออีกตัวหนึ่งว่าฉันชอบและถนัดใช้งานเครื่องมือไหนมากกว่ากัน ก่อนหน้านี้เคยมีประสบการณ์การใช้งาน Figma ซึ่งเป็นคู่แข่งของ Adobe XD มาบ้างแล้ว
ในส่วนนี้ขอแบ่งปันภาพของแอปพลิเคชัน เพื่อให้ได้เห็นภาพผลงานการออกแบบได้มากขึ้น
สามารถใช้งานสามารถโดยดาวน์โหลดได้ทั้งระบบ Android และ iOS
สิ่งที่รู้สึกได้ว่าหลังจากที่ได้พัฒนาโปรเจกต์นี้เสร็จสิ้น คือ ทักษะในการออกแบบ UI โดยปกติแล้วฉันจะออกแบบเป็นแนว clean design ถือว่าเป็นการท้าทายตัวเองในรูปแบบใหม่
สิ่งที่ยังรู้สึกค่อนข้างเสียดาย คือ ในระหว่างที่ออกแบบโปรเจกต์ได้ทำการทดสอบการใช้งานจากกลุ่มผู้ใช้ที่เป็นคนใกล้ ๆ ตัวเท่านั้นค่ะ ก็จะได้รู้ feedback จากสิ่งที่เราทำได้น้อยมาก ๆ
แต่ไม่ได้รับข้อมูลหรือ feedback การใช้งานจริงจาก UI ที่ออกแบบไปมากเท่าไหร่ หลังจากที่ส่งมอบให้ลูกค้าจะเป็นคนที่ดูแลแอปพลิเคชันทั้งหมด และไม่ได้มีการส่งข้อมูลเรื่องนี้กลับมาเท่าที่ควร
