手機產品設計中的用戶引導和新手引導
在手機產品的設計過程中,由于手機界面的承載能力有限,產品功能的不斷膨脹,必須要在用戶打開應用之后告知他某些新奇的功能,引導他完成某些主要任務流程,讓用戶不至于不知所措。
幫助用戶快速掌握應用的使用方法,體驗到應用的樂趣,新手引導成了一個必須考慮的設計環節。
用戶引導的直接目標是幫助用戶更好的使用產品,終極目標是提升用戶滿意度。雖然,大多數情況下,我們可以通過合理的設計,盡可能的簡化功能,讓用戶無需引導和幫助,就可以完成必要的任務。但是實際上,手機產品的限制和對強大功能的追求,導致這個目標很難達到,因此越來越多的應用開始使用用戶引導來幫助用戶快速熟悉產品。
一、文字說明類
第一類最簡單的用戶引導方式,就是文字說明類。用文字描述的方式,幫助用戶理解產品的功能和所需要執行的操作。文字說明類用戶引導如下圖的幾個例子:
從左到右依次是Memento、Instapaper和Jamie Oliver Menento是一個日記程序,當你沒有給日記增加tag的時候,這里就會有文字說明,告訴你tag是用來瀏覽和搜索的,可以在創建和編輯日記的時候創建。告訴你可以把好友加為tag,可以把地理位置加為tag,可以把事件加為tag,可以創建自定義tag;Instapaper是一個閱讀工具,當你首次打開應用,沒有文章的時候,這個頁面會有文字說明,告訴你你可以通過朋友、作者、瀏覽器找到可閱讀的文章。當你通過瀏覽器書簽或者Email發送的方式增加文章到Instapaper后,文章會顯示在這里;Jamie Oliver是一個美食工具,如果你沒有創建美食購物清單的時候,這個頁面會文字提醒你改如何增加Shopping list。 適用情況: 聰明如你,肯定已經發現了,這里提到的例子都是出現在無數據的時候。無數據的時候,是文字說明一個很重要的出現場景。很多設計師會忽略無數據時的界面設計,產品人員也會忽略無數據的時候,該怎樣引導用戶使用產品,導致用戶看到空空的面板,拂塵而去。 其實,文字說明也可以用在超過5s的啟動界面(Splash Screens)上 ,也可以用在某個操作按鈕的下面,也可以用在某段數據加載的彈出框中。它可以用在你能想到的任何地方,只要是合情合理的設計需求。 缺點: 當然,文字說明的劣勢也顯而易見,長篇累牘的贅述功能,很少有人能耐心的看完,何況枯燥的說明書一向是Apple產品所反感的東西,所以文字說明要慎重,不要濫用。 設計指南: 二、功能提醒類 因為某些功能設計成ICON不利于識別,某些功能隱藏在手勢操作之后不易察覺,某些功能是產品主打功能需要用戶知曉,在這種情況下,越來越多的應用采用功能提醒類的浮層做用戶引導,如:
從做到右依次是Tweetbot、QQ通訊錄和Talkbox Tweet用帶箭頭的小浮層告知用戶,點擊navigation bar可以切換關注列表;QQ通訊錄用帶用動效的小浮層提醒用戶,向左滑動可以展現右側隱藏的屏幕內容;Talkbox用帶Gif小動畫的浮層告訴用戶,把收集放到耳朵旁可以從耳機收聽。 使用場景: 用來告知重要功能、不易識別的功能圖標、不易察覺的隱藏操作 缺點: 有時候需要提醒的太多了,往往無從下手。如果你的應用沒有清晰的重要功能,還是小心設計,慎用提醒的好。因為你提醒的可能不是用戶需要的,讓新手用戶無所適從,老手用戶覺得你太過膚淺。不過還好這類提醒不會打斷用戶的操作,也不會強迫用戶一定看完,但是也正是因為這類提醒稍縱即逝,也很容易不小心錯過,導致之后再也無法查看,所以要謹慎的設置一個重復頻率,避免被漏看。 設計指南: 三、操作引導類 操作引導類的用戶引導方式被大量應用與游戲和SNS產品中,如果是設置項很多的復雜產品,也必須有合理的操作引導。操作引導分為強制性的和非強制性的。強制性的主要是注冊、驗證、激活相關流程,不滿足條件無法滿足安全性;非強制性的則多是鼓勵填寫完善的資料或者鼓勵完成某個任務的,這類引導最好給予一定的激勵,如積分、徽章、等級等等,至少要有一個“恭喜你,成功了”之類的心里滿足暗示。具體案例見下圖:
從左到右依次是Albumphoto、Gowalla和With。 Albumphoto引導新用戶新建一個相冊;Gowalla引導新用戶創建一個簽到信息并分享圖片給好友;With引導用戶綁定Twitter賬號用以分享照片。如果是復雜的任務流程,每一步都要給新用戶講清楚,這一步處于哪一個環節,該怎么操作,有什么作用。 操作引導需要一定的操作激發,在一定的時機出現,有一定的重復頻率,并定義一定的引導樣式。
使用場景: 引導用戶執行操作、引導用戶登錄注冊綁定賬號、引導用戶完善資料、引導用戶導入關系、引導用戶分享應用給好友等等 缺點: 有時候有點過于強勢的嫌疑,用戶不一定真的需要這種程度的引導,不如只有一個聚光燈聚焦在重要操作上來的直接,否則所有的App都像游戲客戶端發展了。 設計指南: 四、操作示意型 操作示意型新手引導,往往是采用一段簡單的動畫,或是把功能顯示出來,然后在平滑的移動到屏幕外邊;或是把可點擊的按鈕做一個點擊后的效果動畫出來,或是把某些用戶預期要執行的操作提前演示出來。我第一次見到不錯的操作示意型新手引導是在Nokia N900上,Maemo操作系統,用一個小亮點模擬手指點擊在一個操作按鈕上的效果。
上圖從左到右依次是Naver、Bump和新浪微博。 Naver的搜索類型切換是下拉搜索框就會出現的,首次啟動的時候,搜索框處于下拉狀態,提醒用戶下拉就可以看到這些功能,然后自動隱藏;Bump則是在起始界面上,用動畫的形式告知用戶,碰一碰手機就可以傳輸數據了;而新浪微博在首次加載數據的時候,會給出一個手勢+下拉的引導,告知用戶下拉就可以刷新數據了。 這些示意,用輕松淺顯的手法,就傳達給用戶新鮮的功能好趣味的用法,比生硬的文字或者不合時宜的彈層都來得體貼,鼓勵設計師多多嘗試這種方式。 使用場景: 復雜或重要操作的動畫告知 劣勢: 設計實現麻煩,成本略高 設計指南: via:互聯網分析沙龍
- 目前還沒評論,等你發揮!