เพิ่ม User experiences เพื่อแก้ปัญหาหน้าจอขนาดใหญ่ให้แอปพลิเคชั่นด้วย Dismiss animation และ Draggable / Interactive transition

User experience หรือประสบการณ์การใช้งานที่ดีนั้นไม่ใช่การทำแอปพลิเคชั่นให้ใช้งานง่าย แต่คือการมอบประสบการณ์ที่ดีให้กับผู้ใช้งาน

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

การมอบประสบการณ์ที่ดีให้กับผู้ใช้งานผ่านแอปพลิเคชั่นของเรานั้นสามารถทำได้หลายวิธี เช่น 1. การจัดวาง Interface ที่เหมาะสมแก่การใช้งานในแต่ละหน้าจอ, 2. การใช้ Animation เข้ามาเพิ่ม User experience, และ 3. Transition ช่วยในการแสดงผลของ Interface — โดยในบทความนี้จะมานำเสนอและสอนวิธีการเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้งานด้วย Animation และ Transition ก่อนอื่นเรามาทำความรู้จักกับเนื้อหาในบทความนี้กันก่อน

1. การจัดวาง Interface ที่เหมาะสมแก่การใช้งานในแต่ละหน้าจอ

ตั้งแต่ศาสดาจากเราไป เราก็เห็นได้ว่าขนาดหน้าจอของ iPhone นั้นใหญ่ขึ้นเรื่อยๆ จากเดิมที่มีขนาด 3.5" ซึ่งผู้ใช้งานสามารถใช้มือข้างเดียวในการใช้งานได้อย่างสบายๆ ก็พัฒนามาเป็น 4", 4.7", 5.5" และล่าสุดปี 2017 ฉลองครบรอบ 10 ปี iPhone ด้วยการเปิดตัว iPhone X ที่มีขนาดหน้าจอ 5.8" — ใหญ่ขนาดนี้สาวๆ เสียวซี๊ดกันเลยทีเดียว (เสียวทำมือถือร่วงเพราะถือไม่ถนัด และร้องซี๊ดเพราะค่าซ่อมจอแพงมาก) เรียกได้ว่ามือถือเดี๋ยวใหญ่เกินมือจะถือแล้ว ในอนาคตอาจจะต้องเรียกว่า สองมือถือ

พูดไปก็เปลืองน้ำลาย เราลองมาดูการใช้มือถือ (มือข้างเดียวถือ)ในการใช้งาน iPhone ในแต่ละขนาดหน้าจอกันดีกว่า

http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens

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

แต่การที่หน้าจอมีขนาดใหญ่ขึ้นก็ทำให้การใช้งานด้วยมือข้างเดียวนั้นลำบากมากยิ่งขึ้น ลองสุงเกตุจากรูปข้างบน จะพบว่ามีพื้นที่ที่นิ้วโป้งเอือมไปกดได้ยากลำบาก (พื้นที่สีแดง) ซึ่งก็ส่งผลกระทบให้กับสายเดฟอย่างพวกเราๆ ไม่ว่าจะเป็น iOS Developer, UI Designer, UX Designer ที่ต้องมาจัดการในส่วนนี้

ตัวอย่างแอปพลิเคชั่น Maps (Apple Map) ที่สามารถแก้ปัญหาหน้าจอขนาดใหญ่ได้ค่อนข้างดี โดยการวาง Interface ที่จำเป็นให้อยู่ในพื้นที่สีเขียว เช่น หน้าแรกผู้ใช้งานต้องการที่จะกด Search bar เพื่อทำการค้นหาที่ที่ต้องการจะไป หลังจากพิมพ์เสร็จก็จะเลือกพื้นที่ๆ ค้นหาเจอในหน้าถัดมา ซึ่ง Maps ก็ได้ทำการวางตำแหน่งให้อยู่ในตำแหน่งที่นิ้วโป้งสามารถกดได้ และหน้าสุดท้าย คือการกดปุ่ม Directions เพื่อนำทางผู้ใช้งานไปยังตำแหน่งนั้นๆ ในแผนที่

2. เพิ่ม User experience ด้วย Animation

แอนนิเมชั่นสามารถทำให้แอปพลิเคชั่นของเราดูสวยและแพงมากขึ้น และยังสามารถเพิ่มประสบการณ์การใช้งานที่ดีให้กับผู้ใช้งาน เช่น การบอกผู้ใช้งานให้รู้เมื่อปุ่มต่างๆ ถูกกด, บอกระบบกำลังทำงานประมวลผล, หรือการบอกแหล่งที่มาขอเนื้อหานั้นๆ

การใช้แอนิเมชั่นช่วยบอกที่มาว่าเนื้อหานั้นๆ ถูกเปิดมาจากส่วนไหน

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

3. เพิ่ม User experience ด้วย Page transition

Page transition คือแอนิเมชั่นที่ใช้การเปลี่ยนหน้าไปมาระหว่าง View หลัก ซึ่งเป็นสิ่งที่ผู้ใช้งาน iOS นั้นคุ้นเคยกันเป็นอย่างดี เพราะสามารถพบเห็นได้ตามแอปพลิเคชั่นทั่วไป ยกตัวอย่าง Page transition พื้นฐาน เช่น การ Push, Pop view ของ Navigation หรือการ Modal present เป็นต้น ซึ่งการจะใช้งานแต่ละแบบนั้นก็ขึ้นกับปริบทและเนื้อหาที่เราต้องการจะแสดง Page transition

ผู้อ่านสามารถศึกษาเรื่อง การใช้ Page transition ให้เหมาะสมกับแต่ละเนื้อหาได้ที่บทความต่อไปนี้

[UX Design] การออกแบบ Page Transition บน iOS 8

สำหรับการ Present view แบบ Modal นั้นเราสามารถเปลี่ยน Page transition animation ได้โดยกำหนดผ่านตัวแปรที่ชื่อว่า Modal transition style โดยจะมีให้เลือก CoverVertical, CrossDissolve, FlipHorizontal, และ PartialCurl

แต่ถ้าหากว่าเราต้องการทำ Dismiss image with animation ตามอย่าง Facebook หรือ LINE นั้นเราจำเป็นจะต้อง Custom animation ขึ้นมาเองซักเล็กน้อย

Example 1 — Dismiss image with animation

ตัวอย่างจากการใช้งาน Dismiss image animation จากแอปพลิเคชัน LINE, Pinterest, และ Facebook

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

Example 2 — Drag to dismiss transition

ในปัจจุบันจะเห็นได้ว่าหน้าจอของโทรศัพท์มือถือมีแนวโน้มที่จะขยายใหญ่ขึ้นเรื่อยๆ หลายแอปพลิเคชั่นได้ทำการเพิ่ม User experiences ให้ผู้ใช้งานสามารถกลับไปยังหน้าที่แล้ว ด้วยการ ปัดหน้าจอปัจจุบันทิ้ง (Drag to dismiss) เพื่อแก้ปัญหาการใช้มือข้างเดียวในการถือโทรศัพท์และเอื้อมมือไปกดปุ่มปิด (Dismiss)

สำหรับแอนิเมชั่นของการ Drag to dismiss (หรือ Drag to pop) นั้นจะมีลักษณะเหมือนกับ Transition animation พื้นฐานที่ทางแอปเปิ้ลเตรียมมาให้ เพียงแต่เราจะเพิ่ม User experience ให้กับผู้ใช้งานด้วยการทำให้ View เหล่านั้นสามารถปิด (Pop) จาก มุมไหน หรือ ส่วนไหนของหน้าจอก็ได้ ไม่จำเป็นต้องปัดจากขอบจออีกต่อไป หรือแม้แต่การ Present view แบบ modal เราก็สามารถทำการเพิ่ม User experience ด้วยการลากทิ้งได้เช่นกัน

Where to go from here?

หลังจากที่เข้าใจการใช้งาน Dismiss animation, และ Transition ไปแล้วในส่วนต่อไปเราจะมาเพิ่ม User experience ให้กับแอปพลิเคชั่นของเรา โดยเนื้อหาจะแบ่งออกเป็นทั้งหมด 3 ส่วน ได้แก่

Part I — Draggable / Interactive modal image view — การแสดงรูปภาพแบบเต็มหน้าจอ ซึ่งผู้ใช้งานสามารถทำการปิดรูปด้วยการ “ปัดทิ้ง” โดยการปัดส่วนใดส่วนหนึ่งของหน้าจอ ตัวอย่างเช่น Facebook และ LINE

Draggable / Interactive image view — เพิ่ม User experience ให้กับการปิดรูปด้วยการปัดทิ้ง

Part II — Draggable / Interactive pop transition— การปัดส่วนใดส่วนหนึ่งของหน้าจอไปทางขวา เพื่อทำการ Pop view และกลับไปยังเนื้อหาก่อนหน้านี้ การใช้งานลักษณะนี้จำเป็นต้องใช้งานควบคู่กับ Navigation controller ตัวอย่างที่มีการใช้งานลักษณะนี้คือ Facebook และ LINE

Interactive pop transition — Swipe to pop view controller ปัดหน้าจอเพื่อเรียก Pop view controller

Part III — Draggable / Interactive modal transition — การปัดส่วนใดส่วนหนึ่งของหน้าจอลง เพื่อทำการปิดเนื้อหานั้นๆ (Dismiss) และกลับไปยังเนื้อหาก่อนหน้า การใช้งานลักษณะนี้จะใช้งานได้เฉพาะการ Presentation view แบบ Modal เท่านั้น ตัวอย่างการใช้งานลักษณะนี้ เช่น Pinterest