ทำความเข้าใจกับ Microinteractions ในการออกแบบแอพมือถือ

การใช้งานเป็นหนึ่งในองค์ประกอบสำคัญของ การออกแบบ UI มือถือ. การใช้งานที่ดีมักเกี่ยวข้องกับ microinteractions ซึ่งก็คือ การตอบสนองและพฤติกรรมเล็กน้อยจากอินเทอร์เฟซ บอกวิธีการใช้งาน UI การโต้ตอบขนาดเล็กเหล่านี้กำหนดพฤติกรรมกระตุ้นการมีส่วนร่วมและช่วยให้ผู้ใช้เห็นภาพว่าอินเทอร์เฟซควรทำงานอย่างไร.

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

ในคู่มือนี้ฉันจะเจาะลึกลงไปอีก microinteractions สำหรับแอพมือถือ. ปฏิสัมพันธ์ขนาดเล็กอาจดูเหมือนเล็กน้อย แต่พวกเขาสามารถมี ผลกระทบอันยิ่งใหญ่ เกี่ยวกับคุณภาพของประสบการณ์ของผู้ใช้ เมื่อดำเนินการอย่างถูกต้องไมโครอินเทอร์แอกทีฟจะรู้สึกเหมือนเป็นส่วนหนึ่งของประสบการณ์การใช้งานอุปกรณ์พกพาที่แท้จริง.

พลังของ Microinteractions

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

การโต้ตอบขนาดเล็กมีพลังเพราะพวกมัน สร้างประสบการณ์ลวงตา. แถบเลื่อนเปิด / ปิดไม่ได้เคลื่อนไหวเหมือนสวิตช์จริง ๆ แต่พวกมันสามารถเคลื่อนไหวได้ด้วยภาพเคลื่อนไหว.

ฉันพบคำพูดที่เหลือเชื่อในโพสต์นี้ซึ่งกล่าวถึงคุณค่าอันยิ่งใหญ่ของไมโครอินเทอร์แอคทีฟสำหรับแอพมือถือ:

“ผลิตภัณฑ์ที่ดีที่สุดทำสองสิ่งได้ดี: คุณสมบัติและรายละเอียด คุณสมบัติคือสิ่งที่ดึงดูดผู้คนสู่ผลิตภัณฑ์ของคุณ รายละเอียดเป็นสิ่งที่ทำให้พวกเขามี และรายละเอียดคือสิ่งที่ทำให้แอพของเราโดดเด่นจากการแข่งขันของเรา.”

รายละเอียดเล็ก ๆ อาจดูเหมือนไม่มีนัยสำคัญจากมุมมองการพัฒนา แต่จากมุมมองประสบการณ์ผู้ใช้ที่แท้จริง สร้างความแตกต่าง ระหว่างแอพ OK และ UI แอพพิเศษ.

ไมโครอินเทอร์แอกทีฟที่ยอดเยี่ยมทำให้ผู้ใช้ รู้สึกได้รับรางวัล สำหรับการดำเนินการ การกระทำเหล่านี้สามารถ ซ้ำแล้วซ้ำอีก และ ฝังอยู่ในพฤติกรรมของผู้ใช้. พวกเขาสามารถเรียนรู้วิธีการใช้แอปพลิเคชันโดยอิงจากการโต้ตอบขนาดเล็กเหล่านี้ เมื่อผู้ใช้ทำงานพฤติกรรมการโต้ตอบขนาดเล็กเหล่านี้จะส่งสัญญาณว่า "ใช่คุณสามารถโต้ตอบกับฉันได้!"

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

นี่ การใช้งานทั่วไปของภาพเคลื่อนไหวและการเคลื่อนไหว ในการออกแบบ UI / UX บนมือถือ:

• แนะนำผู้ใช้ระหว่างหน้าต่างๆ
• แนะนำผู้ใช้ผ่านอินเทอร์เฟซเพื่อสอนพฤติกรรมบางอย่าง
• แนะนำการกระทำ / พฤติกรรมที่สามารถใช้กับหน้าใดก็ตาม

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

Microinteractions ทำงานอย่างไร

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

Blink UX ทำการโพสต์ที่ยอดเยี่ยมเพื่อหารือเกี่ยวกับรายละเอียดเล็ก ๆ ของ microinteractions ภาพเคลื่อนไหวขนาดเล็กเหล่านี้ควรเป็นไปตาม กระบวนการที่คาดการณ์ได้ ที่ผู้ใช้สามารถเรียนรู้ สำหรับทุกการโต้ตอบในแอปพลิเคชัน.

Microinteractions จะแนะนำผู้ใช้ผ่านทางอินเตอร์เฟสโดย เสนอการตอบสนองต่อพฤติกรรม. เมื่อผู้ใช้รู้ว่าตัวเลื่อนเปิด / ปิดสามารถเคลื่อนที่ได้พวกเขารู้ว่ามันเป็นแบบโต้ตอบ จากการตอบกลับพวกเขาจะทราบด้วยว่าการตั้งค่านั้นเปิดหรือปิด เมื่อปุ่มดูเหมือนว่ามันสามารถคลิกที่ผู้ใช้ สัญชาตญาณรู้ พวกเขาสามารถโต้ตอบกับมัน.

จากข้อมูลของ UXPin microinteraction พื้นฐานทุกตัวสามารถแบ่งออกเป็นสี่ขั้นตอน แต่ฉันได้สรุปกระบวนการ สามขั้นตอน.

1. การกระทำ - ผู้ใช้ทำบางสิ่งบางอย่าง เช่นปัดปัดแตะค้างไว้หรือโต้ตอบอื่น ๆ.
2. ปฏิกิริยา - อินเตอร์เฟสตอบกลับ ขึ้นอยู่กับสิ่งที่ต้องเกิดขึ้น การปัดหน้าจออาจย้อนกลับไปในประวัติศาสตร์ของเบราว์เซอร์หรือการแตะแถบเลื่อนเปิด / ปิดอาจปิดการตั้งค่า.
3. ผลตอบรับ - นี่คือสิ่งที่ ผู้ใช้เห็นจริง เป็นผลมาจากการมีปฏิสัมพันธ์ เมื่อผู้ใช้เลื่อนกลับไปที่เบราว์เซอร์มือถือผู้ใช้อาจลอยหน้าก่อนหน้าขึ้นเพื่อให้ปรากฏ "ด้านบน" ของหน้าจอ แถบเลื่อนเปิด / ปิดอาจเหินอย่างราบรื่นหรือใหญ่ขึ้นเมื่อความดันถูกนำไปใช้กับหน้าจอ.

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

มองหารายละเอียด

เมื่อดูที่การออกแบบที่มีขนาดเล็กลงคุณจะเข้าใจว่าแอปควรตอบสนองต่อพฤติกรรมที่เฉพาะเจาะจงอย่างไร.

ดึงเพื่อรีเฟรช เป็นตัวอย่างที่ดีของ microinteraction ที่นิยมกันมาก มันไม่ได้เป็นส่วนหนึ่งของ iOS เมื่อเปิดตัวครั้งแรก แต่หลาย ๆ แอพใช้แนวคิดนี้และเริ่มเคลื่อนไหวไปกับมัน ตอนนี้การดึงเพื่อรีเฟรชเป็นพฤติกรรมที่รู้จักกันดีซึ่งผู้ใช้ส่วนใหญ่เพิ่งรู้ที่จะใช้เมื่อเรียกดู UI ฟีด เช่นเดียวกันกับเมนูแฮมเบอร์เกอร์มือถือที่ได้รับความนิยมอย่างมาก.

ทำทุกขั้นตอน สมจริงและเรียบง่าย. อย่าทำภาพเคลื่อนไหวมากเกินไปเพราะทำได้ น่าเบื่อ หากรายละเอียดเกินไปและใช้บ่อย ผู้ใช้ไม่ต้องการประกายไฟให้ปรากฏทุกครั้งที่แตะไอคอนเมนู. สร้างสมดุล ด้วยคุณค่าของแท้ที่สื่อสาร อินเตอร์เฟสควรทำงานอย่างไร โดยไม่ต้องลงน้ำ.

ดูตัวอย่างบางส่วน

ฉันคิดว่าวิธีที่ดีที่สุดในการเรียนรู้บางสิ่งก็คือการทำมันและวิธีที่ดีที่สุดที่สองคือการศึกษางานของผู้อื่น ฉันรวบรวมของเล็กน้อย ภาพเคลื่อนไหวการอินเทอร์แอคทีฟไมโครอินเทอร์ UI / UX จากผู้ใช้ Dribbble ที่มีความสามารถเพื่อแสดงให้คุณเห็นว่าสิ่งเหล่านี้ดูเป็นจริงหรือไม่.

ทุกแอปพลิเคชันจะแตกต่างกันและมีความต้องการที่แตกต่างกันตามสิ่งที่แอพทำ ในที่สุดผู้ใช้ส่วนใหญ่ต้องการสิ่งเดียวกัน: แอปที่ ที่ใช้งานง่าย และ มอบประสบการณ์ผู้ใช้ที่มีคุณภาพ กับ microinteractions สัมพันธ์กับพฤติกรรมของผู้ใช้.

1. แอพเคลื่อนไหวกิจกรรม UI

ตัวอย่างแรกคือคุณสมบัติภาพเคลื่อนไหวการ์ดที่สร้างขึ้นโดย Ivan Martynenko คุณจะสังเกตเห็น microinteractions จำนวนหนึ่ง ในการออกแบบนี้สะดุดตาการ์ดรูดและเคลื่อนผ่านรายละเอียด.

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

2. หน้าจอแบบฝึกหัดแบบโต้ตอบ

แอนิเมชั่นการออกกำลังกายมือถือสร้างสรรค์นี้มาจากนักออกแบบ Vitaly Rubtsov มันสาธิตให้ผู้ใช้บันทึกการออกกำลังกายสำหรับ squats หนึ่งชุด.

สังเกตว่าแต่ละภาพเคลื่อนไหวมีเหมือนกัน ผลเด้งยืดหยุ่น เมื่อเมนูเปิดและปิดอย่างรวดเร็ว สิ่งนี้ก็เป็นจริงเช่นกันเมื่อกิจกรรมถูกทำเครื่องหมายเป็น "เสร็จสิ้น". ความมั่นคง เป็นกุญแจสำคัญกับ microinteractions เพราะทุกคนควรรู้สึก เชื่อมต่อกับอินเทอร์เฟซเดียวกัน.

3. ค้นหาแอป Microinteractions

สั้นหวานและตรงประเด็น ฉันคิดว่านี่เป็นการอธิบายไมโครอินเทอร์แอปการค้นหาที่ออกแบบโดย Lukas Horak ได้ดีที่สุด ทุกอนิเมชั่นคือ อย่างรวดเร็ว แต่ก็ยังเห็นได้ชัดเจน.

นี่คือวิธีที่คุณควรออกแบบไมโครอินเทอร์แอคทีฟ หลีกเลี่ยงความซับซ้อนมากเกินไป. หากอินเทอร์เฟซจะโหลดเร็วขึ้นโดยไม่มีภาพเคลื่อนไหวทำไมต้องเพิ่มเข้าไป? แอนิเมชั่นด่วน ทำให้ผู้ใช้เคลื่อนที่ผ่านได้โดยไม่ทำให้ประสบการณ์แย่ลง.

4. ฟิตเนสเป้าหมาย Microinteraction

ฉันคิดว่า Jakub AntalÃÂ ?? Ã'Â-k จริงๆตีหนึ่งนี้ออกจากสวนด้วย microinteraction เป้าหมายการออกกำลังกายของเขา หน้าจอทั้งหมดมีความรู้สึกของ jiggly jell-o เพราะ รูปร่างเคลื่อนไหวได้อย่างลื่นไหล.

แต่อินเตอร์เฟสก็รู้สึกเช่นกัน แข็งและใช้ได้. มันแสดงให้เห็นว่า microinteractions ที่สร้างขึ้นโดยมีวัตถุประสงค์ยังคงเป็นเรื่องสนุกและสนุกสนาน แต่ยังใช้งานได้และสามารถใช้งานได้จริง.

5. ดึงเพื่อรีเฟรชนิเมชั่น

นี่เป็นหนึ่งในแอนิเมชั่นการดึงเพื่อรีเฟรชที่ฉันชอบที่สุดที่สร้างขึ้นโดยทีมที่ Ramotion สิ่งนี้ไม่เพียง เลียนแบบของเหลว กับการกระทำดึง แต่ภาพเคลื่อนไหวการตอบสนอง เชื่อมต่อได้อย่างราบรื่น จากสาดของเหลวในวงโหลด.

นี้ ใส่ใจในรายละเอียดมาก คือสิ่งที่นำเสนอความงามที่แท้จริงในไมโครแอพมือถือ.

6. แท็บ Microinteraction

วิดเจ็ตแบบแท็บ ค่อนข้างทั่วไปสำหรับแอปมือถือเนื่องจากหน้าจอขนาดเล็ก ฉันชอบ microinteraction ที่สร้างโดย John Noussis ถึงแม้ว่าฉันคิดว่ามันจะมีประสิทธิภาพมากขึ้นด้วยความเร็วที่เร็วขึ้น.

ลูกศรยึดแท็บจะเลื่อนไปทางขวาเหมือนกับเนื้อหาใหม่ที่ตีกลับจากด้านขวา มันให้ภาพลวงตาของ ทั้งหน้าจอเคลื่อนไหวทางร่างกาย ไปทางขวา. อนิเมชั่นนั้นยอดเยี่ยม แต่เนื่องจากมันช้ามากฉันคิดว่าผู้ใช้ส่วนใหญ่จะรู้สึกรำคาญหลังจากไม่กี่วัน.

7. ภาพเคลื่อนไหวที่มีการโหลดล่วงหน้า

ฉันไม่ได้พูดอะไรมาก แถบโหลด ในโพสต์นี้ แต่พวกเขาก็มีค่าเท่ากับประสบการณ์โดยรวม ผู้ใช้ส่วนใหญ่ไม่ต้องการรอให้โหลดข้อมูล แต่พวกเขาไม่ต้องการจ้องหน้าจอที่ว่างเปล่าในขณะที่โหลด.

Bret Kurtz ทำหน้าจอการโหลดล่วงหน้าที่น่าทึ่งซึ่งสนุกและให้ข้อมูล ผู้ใช้สามารถเป็นจริงได้ ความบันเทิง ดูภาพเคลื่อนไหวเล็ก ๆ น้อย ๆ นี้ซ้ำ พวกเขายังสามารถ มั่นใจ ว่าแอปพลิเคชั่นคืออะไร ยังคงโหลดข้อมูล และไม่ผิดพลาด.

ห่อ

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

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