設計思考:如何傳達APP中的隱藏手勢?
手勢本是能夠幫助用戶更好的使用產品,但手勢交互常被隱藏起來,因此用戶如果沒有發現隱藏手勢,便失去了設計這些隱藏手勢的功能作用。那么到底該如何向用戶傳達APP中的隱藏手勢呢?看看這篇文章,或許你就知曉。
手勢是用戶用自己的食指和拇指,與app交互的那些小動作。 觸屏可以讓用戶使用生活中的手勢,例如點擊(tap),滑動(swipe)和捏合(pinch)來完成操作,但是與其他的人機界面控制不同,手勢交互通常被隱藏,因此用戶沒有意識去嘗試手勢,除非他們有使用手勢的經驗和習慣。
如何讓用戶知道有隱藏手勢?我們可以使用一些視覺和交互設計技巧,讓用戶意識到這些手勢。
引導頁中的指南和演示
APP傳達手勢相當普遍的做法是引導頁和小貼士。 在許多情況下,在你應用程序中包含教程,意味著向用戶顯示一些說明來解釋界面。 然而,這些教程不是解釋APP核心功能的最優雅的方式。 這種方法有以下兩個問題:
- 如果你為你的app設計引導頁,那么這不是與用戶溝通的最好方式,因為用戶不會在使用app之前細讀引導頁或小貼士。
- 教程的另一個問題,用戶一旦使用app,必須學習并記住app的所有新操作手勢。
舉個例子,在瀏覽一個強制性的app7頁的引導頁開始,用戶必須耐心地閱讀所有的信息,并嘗試記住。 這是糟糕的設計,因為它強迫用戶在使用APP之前學習。
Clear的引導頁
我們需要避免強制性的引導頁,并試圖在操作的前后教育用戶使用手勢(當用戶真的需要時候)。幾次迭代后,教程引出了更進一步的發現:
專注于一個手勢交互,而不是試圖為用戶解釋界面中的每一個可能的動作。
以Android手機版YouTube應用程式的這個手勢教育畫面為例:
Youtube安卓APP
該APP有手勢的交互,但不使用教程去教育用戶。 相反,它在每次啟動時為新用戶顯示的提示, 每次僅一個該app部分功能得提示。
如何在情景中教育用戶
在情景中教育用戶有些技巧,幫助用戶快速理解那些他們沒有見過的元素或界面。這種技巧通常包括不起眼的視覺提示和微妙的動畫。
純文本提示
這個技巧是簡單好用的純文本提示,提示用戶執行手勢,并且以簡短明了的文案描述交互的結果。
注意:多使用短文本提示——文本越少,用戶越有可能會讀,然后實際上遵循提示 。
Material Design
運動提示
運動提示(或動畫視覺提示)顯示一個預覽,預覽如何在執行操作時與元素進行交互。 例如,布丁怪物(Pudding Monster)的游戲操作僅有手勢,但這個游戲告訴用戶需要做什么,而不用多費腦猜測。 動畫傳達操作的信息—— 一個動畫展示的場景,直觀的告訴用戶需要做什么。
運動提示預覽如何與元素交互。 布丁怪物(Pudding Monster)
關聯暗示
關聯暗示是展示例子,暗示了可能性的視覺線索。 下面的示例演示了卡片的暗示—— 它只是顯示其他卡片存在于當前卡片的后面,這清楚地表明可以滑動。
瀏覽導航 by Barthelemy Chalvet
結論
歸根結底,如何在移動app中為用戶引入手勢,沒有一個萬金油的解決方案。 但當你教育用戶使用你的UI,我建議主要通過一些趣味的調侃,循序漸進的引導,再加上微妙的動畫。 引導頁或小貼士只應作為最后的手段。
作者:Nick Babich
原文地址:https://uxplanet.org/how-to-communicate-hidden-gestures-in-mobile-app-e55397f4006b#.v63u1ae0t
譯者:neven
來源:微信公眾號:歪設計
本文由 @TereChen 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
我自己的體會,半個圖標,用戶自然知道拖動了 ??