視覺層面的思考:6個為新手使用者設計的策略

發表於2016-01-03

之前的文章裡探討過介面的易操作性,提到的主要是視覺層面的思考,今天這篇想總結一下對於新手使用者,可以通過哪些設計策略來幫助他們進行操作。

主要有6個策略:

-引導頁

-覆蓋層和提示視窗

-模板

-輸入或操作區域提示

-嚮導

-幫助與反饋

1、引導頁

引導頁的使用在PC端常見於安裝軟體的過程中,在安裝時,可以在進度條的上方看見滾動播放的產品介紹,每一頁都會針對某一個產品的特性進行宣傳,讓使用者在使用產品前,對產品的功能有一個大致的瞭解。

如今移動端的設計,同樣運用了這個方式,但作用不僅限於產品的介紹,同時還涉及了品牌文化的宣傳、烘托氛圍以及鼓勵使用者開啟相關配置的作用。比如產品的介紹,設計這種引導頁時,因為導覽頁面的數量不能太多,挑選的特性應該是這個產品的核心特點。能使用圖片說明的情況下,優先使用圖片,因為圖片能夠涵蓋的資訊量是要比文字大很多的。

曾看過一位設計師總結這類引導頁的設計方法,方法還算通用,稱為3X3法,就是用三個頁面解釋三個問題:what、why以及how。

What —你的產品是幹什麼的?

Why —你的產品能帶給使用者什麼?

How —是怎麼來達到這個目標的?

3X3法,就是用三個頁面解釋三個問題:what、why以及how。

上圖中的例子就來自於這位設計師文中列舉的案例。

而烘托氛圍的比如airbnb的這個例子,讓使用者體會到溫馨的感覺,對於這個產品有了更多感性的認識。

airbnb的這個例子,讓使用者體會到溫馨的感覺,對於這個產品有了更多感性的認識。

 

最後一點鼓勵使用者開啟相關配置的作用,這個在工具類產品中使用比較多,因為對於很多工具類產品,是否獲得通知提醒或則定位的許可權對於這個產品的體驗有非常大的影響。比如之前看過一篇hopper設計師寫的思考,hopper是一款實時分析機票價格、告訴使用者何時購票最為划算的軟體。所以通知對於觀望功能極其重要,如果使用者不允許Hopper傳送通知,他們就無法在價格達到低價區間時收到購票建議資訊,觀望功能就會失去使用價值。因此設計師將引導頁設計成了如下的樣式,使用者開啟通知功能的機率大大增加。

hopper設計師將引導頁設計成了如上的樣式,使用者開啟通知功能的機率大大增加

 

如果想要查詢更多關於引導頁的設計,可以在dribble或則pinterest上搜walkthrough。

2、覆蓋層和提示視窗

覆蓋層式的設計是專門針對於移動端而產生的,如下圖

覆蓋層式的設計

移動端的螢幕空間十分寶貴,所以採用覆蓋層的方式可以節約空間,在使用者第一次使用某個介面時,通過覆蓋層展示關鍵的幾個工具的使用說明,幫助使用者快速的上手使用。

這種方式需要注意解釋的功能數量不能過多,以免使用者因為資訊過載而導致事半功倍。同時給予使用者隨時跳出的權利,一般的做法是點選任意位置即可跳出。

而提示視窗的使用其實和覆蓋層類似,當使用者第一次開啟了某個頁面或則某個功能時,彈出提示視窗,告訴使用者當前頁面的使用方法。比如enlight,這是一款非常強大的照片處理軟體,提供的功能很多,所以提供適當的幫助是十分重要的。如下圖所示,enlight在使用者第一次使用某個功能時會彈出提示視窗,通過gif圖片的形式告知使用者這個功能可以達成怎樣的效果。

enlight在使用者第一次使用某個功能時會彈出提示視窗,通過gif圖片的形式告知使用者這個功能可以達成怎樣的效果。

3、模板

模板就好比服裝店裡的塑膠模特們,店員們將精心搭配好的服裝穿在模特身上,展示給購物者看,不知道如何搭配的購物者,可以通過這些搭配的模板來選購。當然對於早已有著自己的搭配風格的購物者而言,這些模板是可以忽略的,這就好比高階使用者,他們早已知道如何使用你的產品,並且還能將產品的功能利用到很多不常見的地方。

模板的案例比如我們經常使用的word,新建一個文件時,word會提供很多模板。

word提供了很多模板

 

還有像clear這類效率類軟體,為了讓使用者更快的瞭解到產品可以做些什麼,在剛使用的時候也提供了很多例子,如下圖所示。

clear在剛使用的時候也提供了很多例子

4、輸入或操作區域提示

除了上面說的各種一次性的幫助方式以外,這一條的特點是具有持續性,伴隨著各種輸入和操作過程中。在PC端中,有一種形式十分常見,就是當滑鼠移動到相應的控制元件上時,懸停後會出現相關的解釋性文字,但在移動端由於互動方式的限制這種方式無法實現。所以採用的是靜止的文字提示,提示使用者操作當前區域需要注意的地方。比如上面的例子中的搜尋框以及評價框中的提示性文字,當輸入了文字以後,提示性文字就消失。

 

搜尋框以及評價框中的提示性文字,當輸入了文字以後,提示性文字就消失

操作區域的提示,典型的例子比如ios中的系統設定,如上圖,在每一個操作區域旁邊都用提示性文字解釋了這項操作將會導致什麼樣的結果,給不熟悉的使用者可以預知操作的後果。

IOS的設定裡在每一個操作區域旁邊都用提示性文字解釋了這項操作將會導致什麼樣的結果

5、嚮導

嚮導(wizard)是微軟發明的一個習慣用法,在PC端就十分的常見,通過一系列的對話方塊逐步引導使用者瞭解產品。移植到移動端,嚮導的使用變得更加有針對性,比如社交產品中,為了使用者與使用者之間更好的瞭解,引導使用者填寫完整個人資訊,如下圖。

社交產品中,為了使用者與使用者之間更好的瞭解,引導使用者填寫完整個人資訊

 

而像有的內容類產品中,為了針對於不同使用者的個性化需求,在第一次使用產品時會引導使用者關注不同型別的人物或則標籤。讓使用者可以更快的融入到產品中,發現更多好玩有趣的東西,而不會因為初次進入因為沒有內容源而失望離去。

為了針對於不同使用者的個性化需求,在第一次使用產品時會引導使用者關注不同型別的人物或則標籤

6、幫助與反饋

幫助與反饋在PC端的軟體中,往往都會提供一個幫助手冊,裡面詳細的介紹了相關的問題和解決方法,當然也可以通過搜尋的方式找到合適的解決辦法。而移動端的產品通常沒有PC端的那麼複雜,一般不會提供詳細的幫助手冊,但會提供一個反饋的通道,使用者可以通過反饋通道快速的反映相關的問題。比如知乎就做的比較深入,不僅提供文字反饋,而且可以通過搖一搖的方式,截圖傳送反饋,方便開發團隊更好的改進產品。如下圖。

知乎可以通過搖一搖的方式,截圖傳送反饋

相關文章