手機產品設計之使用者引導
在手機產品的設計過程中,由於手機介面的承載能力有限,產品功能的不斷膨脹,必須要在使用者開啟應用之後告知他某些新奇的功能,引導他完成某些主要任 務流程,讓使用者不至於迷失在陌生應用中不知所措。幫助使用者快速掌握應用的使用方法,體驗到應用的樂趣,新手引導成了一個必須考慮的設計環節。
使用者引導的直接目標是幫助使用者更好的使用產品,終極目標是提升使用者滿意度。雖然,大多數情況下,我們可以通過合理的設計,儘可能的簡化功能,讓使用者 無需引導和幫助,就可以完成必要的任務。但是實際上,手機產品的限制和對強大功能的追求,導致這個目標很難達到,因此越來越多的應用開始使用使用者引導來幫 助使用者快速熟悉產品。
一、文字說明類
第一類最簡單的使用者引導方式,就是文字說明類。用文字描述的方式,幫助使用者理解產品的功能和所需要執行的操作。文字說明類使用者引導如下圖的幾個例子:
從左到右依次是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小動畫的浮層告訴使用者,把收集放到耳朵旁可以從耳機收聽。
使用場景:
用來告知重要功能、不易識別的功能圖示、不易察覺的隱藏操作
缺點:
有時候需要提醒的太多了,往往無從下手。如果你的應用沒有清晰的重要功能,還是小心設計,慎用提醒的好。因為你提醒的可能不是使用者需要的,讓新手用 戶無所適從,老手使用者覺得你太過膚淺。不過還好這類提醒不會打斷使用者的操作,也不會強迫使用者一定看完,但是也正是因為這類提醒稍縱即逝,也很容易不小心錯 過,導致之後再也無法檢視,所以要謹慎的設定一個重複頻率,避免被漏看。
設計指南:
- 不要打斷正在進行的操作
- 判斷需要提醒的時機
- 持續3~5s自動消失
- 可以重複出現3次左右
- 用來提醒隱藏的操作或重要的功能
三、操作引導類
操作引導類的使用者引導方式被大量應用與遊戲和SNS產品中,如果是設定項很多的複雜產品,也必須有合理的操作引導。操作引導分為強制性的和非強制性 的。強制性的主要是註冊、驗證、啟用相關流程,不滿足條件無法滿足安全性;非強制性的則多是鼓勵填寫完善的資料或者鼓勵完成某個任務的,這類引導最好給予 一定的激勵,如積分、徽章、等級等等,至少要有一個“恭喜你,成功了”之類的心裡滿足暗示。具體案例見下圖:
從左到右依次是Albumphoto、Gowalla和With。
Albumphoto引導新使用者新建一個相簿;Gowalla引導新使用者建立一個簽到資訊並分享圖片給好友;With引導使用者繫結Twitter賬號用以分享照片。如果是複雜的任務流程,每一步都要給新使用者講清楚,這一步處於哪一個環節,該怎麼操作,有什麼作用。
操作引導需要一定的操作激發,在一定的時機出現,有一定的重複頻率,並定義一定的引導樣式。
使用場景:
引導使用者執行操作、引導使用者登入註冊繫結賬號、引導使用者完善資料、引導使用者匯入關係、引導使用者分享應用給好友等等
缺點:
有時候有點過於強勢的嫌疑,使用者不一定真的需要這種程度的引導,不如只有一個聚光燈聚焦在重要操作上來的直接,否則所有的App都像遊戲客戶端發展了。
設計指南:
- 可以引導使用者執行主要操作
- 不要強迫使用者執行操作
- 如果任務是多步驟要關注每一步的設計
- 主要功能可以在設計上區別於其他
四、操作示意型
操作示意型新手引導,往往是採用一段簡單的動畫,或是把功能顯示出來,然後在平滑的移動到螢幕外邊;或是把可點選的按鈕做一個點選後的效果動畫出 來,或是把某些使用者預期要執行的操作提前演示出來。我第一次見到不錯的操作示意型新手引導是在Nokia N900上,Maemo作業系統,用一個小亮點模擬手指點選在一個操作按鈕上的效果。
上圖從左到右依次是Naver、Bump和新浪微博。
Naver的搜尋型別切換是下拉搜尋框就會出現的,首次啟動的時候,搜尋框處於下拉狀態,提醒使用者下拉就可以看到這些功能,然後自動隱藏;Bump 則是在起始介面上,用動畫的形式告知使用者,碰一碰手機就可以傳輸資料了;而新浪微博在首次載入資料的時候,會給出一個手勢+下拉的引導,告知使用者下拉就可 以重新整理資料了。
這些示意,用輕鬆淺顯的手法,就傳達給使用者新鮮的功能好趣味的用法,比生硬的文字或者不合時宜的彈層都來得體貼,鼓勵設計師多多嘗試這種方式。
使用場景:
複雜或重要操作的動畫告知
劣勢:
設計實現麻煩,成本略高
設計指南:
- 注意動畫持續的時間和出現的時機
- 多用來說明隱藏操作或功能
- 不要影響主要任務流程
五、說明書類
不知道從什麼時候開始,說明書式的使用者引導用開始流行起來了,這種貌似比較傳統的手段,能更全面的展示產品的功能和使用方法,尤其是適用於產品的更 新說明,本次版本迭代了哪些功能,進行了哪些改進,讓使用者一進來就知曉,知道自己所耗費流量耗費時間更新應用是物有所值的。單頁的說明書類引導案例如下:
從左到右依次是Google客戶端、Pull Time和today
Google會在一頁內給出多個問號,點選問號檢視該區域所承載的操作及執行方法;Pull Time用更直觀的方法來表示這款互動出類拔萃的產品到底該怎樣使用;而Today則用一頁圖配文的說明來告知本版本更新了哪些內容。
顯而易見,一頁能承載的內容有限,重點也不是特別突出,為了更立體的講述產品,出現了一種演示型的新手引導,見下面一個案例:
Layar用一系列動畫+文字的方式,即交代了產品能做什麼,有交代了使用場景和使用方法。
為了每次更新版本都能對使用者有個更好的交代,很多應用開始採用多頁的更新說明或使用介紹,見下面一個案例:
Weico的這次改版所採用的新手引導方式,絕對是稱得上讓人驚豔級別的,用了6頁,詳細的介紹了虛擬形象功能,簡單的提到了微博晒心情、Gif直 接播放、圖片進度提醒等等次級功能。雖然從功能上來講,我並不一定認同虛擬形象,但是從引導上來講,實在是太有愛了,不愧是設計公司。
使用場景:
產品更新說明、複雜產品使用者教育
劣勢:
成本略高、具有強迫性
設計指南:
- 告訴使用者現在處於指南的哪個位置
- 每個頁面只講清楚一個功能
- 最好可以選擇性的跳過
- 只能出現一次
也許紛繁複雜的各種引導,在幫助新使用者快速熟悉應用的同時,也讓老使用者不厭其煩的反覆瞻仰一些已經耳熟能詳的功能,尤其是某些應用還在應用內教育用 戶怎樣使用系統級別的功能,就更顯得累贅。曾經電腦軟體的幫助文件也許是一個很好的思路,當你有不明確的地方的時候,點一下幫助,快速查閱遇到障礙的問 題,一切迎刃而解。iPhone裡也有預設的幫助圖示,可是被利用的情況不是很好。
當然,我更崇尚的,不是以上那些簡單直白的引導,而是一種更簡單更直白的引導,類似於深澤直人的無意識設計,讓使用者不知不覺間受到了某種操控,不自覺的產生某些行為。這就需要設計者懂一些心理學或營銷學的東西了。
一、數字引導
數字引導設計幾乎都是在利用和發掘使用者的心理影響使用者行為。在很多時候,這種數字的激勵方式確實對使用者產生好的引導,讓使用者按照設計的軌跡行動。但是數字引導並不是萬能的,在一些情景下這種引導設計如果不當的話,很可能會產生負面效果。
從左到右依次是街旁、淘寶和QQ郵箱Wap版
街旁用幾條未讀訊息、幾個好友請求來引導使用者去檢視新訊息;聚划算採用了一個非常有緊迫感的倒計時的設計,旁邊緊跟在一個參團按鈕,同時還刻意把價 格和折扣標紅,顯示出多少人已購買,這些數字共同營造了一種,時間緊迫、折扣低廉、多掙爭搶的假象,讓使用者快速抉擇去購買一個商品;QQ郵箱用很多紅色氣 泡的設計,一下子把焦點聚集在你有未讀訊息的模組上。
二、小祕書類
不知道源頭是哪裡,越來越多的應用開始增加小祕書、XX客服、XX產品團隊之類的官方賬號用於使用者引導了。這種方式有明顯的好處就是把冷冰冰的機械引導變成了有血有肉的擬人化引導。小祕書會在你開啟應用後第一時間告訴你,你可以做一些什麼,非常體貼。如下面這些應用:
從左到右依次是微信、米聊、TalkBox
這三個應用都屬於IM類的,在你的好友裡,多出一個系統賬號來,用來跟你溝通,教你使用應用。當然都還不夠智慧,淪為廣告發布渠道,而不是真的答疑解惑的小祕書。
三、內容教育
內容教育的意思是,在使用者使用應用之初,應用內可能沒有資料也沒有使用者,使用者不知道應用能帶給自己什麼好處。這時候,閱讀類的客戶端就會增加基本預 設的書籍,比如產品說明書;GTD類的客戶端就會增加幾個待辦事項,用待辦事項的方式告知你可以做什麼,怎麼做;社交類的就會給你預設幾個好友,你看著他 們都做了什麼,就知道自己該幹什麼了;搜尋類的可能會給出搜尋熱詞,你看到他們怎麼去搜索,自己就知道該輸入什麼樣的內容了。
四、文字口號
不要以為這種方式老土或者過時,這種方式是最行之有效的辦法。如果你告訴使用者“好的主廚最愛做的菜”,他就會選擇那個菜;如果你告訴使用者“優秀的人 都會管理自己的消費計劃”,他就會給自己制定消費計劃;如果你告訴使用者“優秀的相簿至少有10張照片”,那麼使用者就會湊夠十張照片上傳,他們渴望被承認, 你如果在他的潛意識裡植入這種優秀的意識,他會為此買單的。
五、激勵機制
好的引導是讓使用者自己探索發現,獲得樂趣。樂趣哪裡來呢?一方面是使用者發現了隱藏操作,自我成就感膨脹,一方面可能是,使用者完成了某項任務,系統贈與使用者某些獎勵。如Foursquare當初的積分、市長和徽章。
記得米聊有一個頁面做的特別的好,就是個人名片頁,當你資料填寫不完善的時候,它沒有強硬的引導你去填寫,而是在介面上放了一個進度條“完成度 10%”,並且告訴你,完成度越高,越容易找到更多朋友,於是在那個沮喪的10%面前,我不得不為了讓它好看一點,添加了更多的資料,直到它顯示100% 為止,就像完成了一項偉大的任務。