UI Pattern

เอียง เขย่า กวน บิด

0

featured-mobile-tilt

การปฏิสัมพันธ์ (Interaction) กับหน้าจอมือถือแบบรองรับการสัมผัส (Touch-screen mobiles)  นอกเหนือจากการใช้นิ้วกดหรือเลื่อนหน้าจอแล้ว อย่าลืมว่ายังมี action ที่นิ้วมือของเราไม่จำเป็นต้องแตะหน้าจอเลยและเคยเป็นฟีเจอร์เด่นตอนเปิดตัว iPhone แรกๆ เลยนะ

ให้ลองเข้าเว็บ warbyparker ผ่าน iPhone ดูนะครับ (สำหรับ Safari บน iOS เท่านั้นนะ, Android อด T_T)

mobile-tilt-01

จากนั้นเลือนไปจนถึง slide สุดท้าย จะเจอสาวผิวสีสวมแว่นดำยิ้มแป้น จากนั้นให้เราลองเอียงมือถือของเราดูครับ

mobile-tilt-02

ถ้าเอียงมือถือไปทางซ้าย เธอก็จะหันหน้าไปทางซ้าย

mobile-tilt-03

เอียงไปทางขวานิด เธอก็จะหันหน้าไปทางขวานิดพอแลดูงาม

แต่ถ้าเอียงขึ้น-ลง เธอไม่ยอมเงย-ก้มนะ เพราะจะโชว์แว่นขายของ ไม่ได้ขายหน้าตาจ้ะ ^^

– เพิ่มเติมครับว่า ระบบตรวจจับความเร็วและระดับความลาดเอียงของมือถือผ่านทางอุปกรณ์พวก accelerometer ที่ติดตั้งในมือถือ ปกติทำได้สำหรับ app บน iOS และ Android อยู่แล้ว ไม่ใช่อะไรที่ใหม่หรอกครับ แต่ถ้าสำหรับเว็บแล้วจะทำได้แค่บน Safari เท่านั้นนะ และไม่ค่อยเห็นใครใช้เท่าไร ส่วน browser บน Android ติดปัญหาเรื่องการเรียกใช้งาน class Javascript ของระบบพวกนี้น่ะ

อันที่จริงยังมีอีกหลายการกระทำ (gesture) ที่นิ้วของเราไม่จำเป็นต้องสัมผัสกับหน้าจอมือถือ แต่สามารถมีปฏิสัมพันธ์ (interaction) กับเว็บหรือ app ได้ เช่น

การเขย่าสั่น (Shake)

shake-02
การกวน (Stir)

stir-01


การงอ (Squeeze)
– อันนี้ดูรุนแรงไปนิส ต้องรอให้หน้าจอแบบโค้งงอออกมาอย่างเป็นทางการก่อนนะ ไม่ใช่งอจากอุบัติเหตุเหมือน iPhone 6plus

squeeze-01

แน่นอนครับว่าแต่ละท่าทาง คีย์หลักคือเราจะต้องเลือกผูกให้ถูกกับเหตุการณ์เพื่อสร้างประสบการณ์ที่ไม่อาจลืมเลือน (UX design)

shake-01

อย่าง Line คือให้เราเขย่ามือถือเพื่อ add friend เป็นการแสดงออกให้เห็นว่า เรากำลังทำกิจกรรมร่วมกันกับคนที่กำลังเป็นเพื่อนเรา อีกทั้งยังช่วยสร้างความสนุกและความกลมเกลียวกันด้วยล่ะ (emotional design)

3668_140930152137A3ส่วน app Sumarai ของธนาคารกรุงศรี ก็ให้เราทำให้หมีซามูไรพันดาบให้มากที่สุด โดยการเขย่าให้ถี่มากที่สุด เคยเล่นแล้ว เหนื่อยเหมือนกันแฮะ -_-!

การกวน ทางผู้ออกแบบแนะนำว่า ใช้กับเหตุการณ์เช่น ผสมรายการเพลงหลายๆ เพลง จากนั้นก็ให้เล่นแบบสุ่ม  และการงอใช้กับเหตุการณ์ที่ต้องการโอนย้ายหรือแชร์ไฟล์ให้กับอุปกรณ์ในระยะใกล้เคียง นี่เป็นแค่ตัวอย่างการใช้งานเล็กๆ น้อยๆ เองนะครับ ซึ่งยังมีอีกหลายๆ เหตุการณ์ที่เราสามารถจับคู่กับท่าทาง (gesture) ต่างๆ ด้านบน ได้อีกเป็นหลายรูปแบบไม่จำกัด

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

แอบน่ากลัวเหมือนกันเนอะ

ภาพ: http://www.coroflot.com/yingwei/bravo-mobile-video-design

 

 

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

7 สคริปต์ Photoshop มีไว้ใช้ให้ฟินเวอร์

Previous article

รีวิว app Rush Bike ตอนที่ 1

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern