通過12種狀態學會交互設計

文章類型:課堂筆記
授課老師:美團外賣高級產品經理程婧

前言:
交互設計體驗是產品經理必修課,若能得到系統學習,是一件很幸福的事情,感謝智享推出的免費公開課。

在正式展開筆記之前,需要了解一下交互設計的概念,那什么是交互設計呢?
交互設計:Interaction Design,通過行為動作,體現在人與人之間、人與物之間。比如,路飛搶走了喬巴的棉花糖,那喬巴一定會做出反應,生氣、暴怒、緊張···等等,反應程度取決于喬巴對棉花糖的鐘愛程度??;又比如說,我打開iPad,預期是打開或者是輸入指紋識別,這都是正常的,如果說,我按下Home鍵,沒反應,那就是非期望的交互行為咯。

1052D5B9-43FC-4E28-9755-0A79AC0C1301.png

Q:為什么要需要交互設計
此處只給出我個人理解,如果你和別人打招呼,別人不予理睬,你覺得這樣好嗎?這是現實生活中很普遍的例子。在移動端開發過程中,經常會出現很多彈框,提示用戶如何,很少有不必要的信息提示,不管是沒有還是過多,都是不友好的用戶體驗和交互設計哦。介樣,就進入正文吧。

正文:

交互可以通過各種狀態總結出來!

BB3AF016-E957-4551-A33A-7D5689BCC79B.png

人物設定:小明

A60FE80D-9268-4081-AA77-B397183C26A2.png

小明打開App,映入眼簾的首先不是初始化,而是等待。盡管數據是要初始化的,但我們在談交互喲。

782C0805-9B97-48CD-874C-3EFC8D8C26BD.png

大家看上邊這張圖,小明打開App,啟動頁面的展示。無線端產品要載入很多數據啦(巴拉巴拉···),對于用戶來說,打開App,等待···等待會讓用戶很焦躁,這張圖放在這里并不會減少用戶等待時間,但卻可以降低用戶等待時間的敏感性。不過很多時候,對于一些特殊的App,沒有辦法在短時間內加載出界面,沒有辦法降低用戶對時間的敏感性,腫么辦呢?那就要寄予期望咯。根據調查顯示,如果三秒內不能讓用戶順暢使用App,一般就會流失百分之七十五的用戶??

28909C09-67DC-48C3-ACC4-1EA3C8AB509D.png

大家可以看到,上圖有個進度條,看著簡單,給出了三個信息:第一個是我正在動;第二個我動了多少了,上邊有個百分數;第三個信息是吸引用戶的注意力,降低用戶對時間的敏感性。

13BB8B14-AB4B-41C7-AA6C-82D24A38E276.png

用貓影電影舉個例子,如上圖。喵一直在轉動,并有提示信息,用來吸引用戶注意力,防呆滯的狀況。其實在早期,Iphone設計中,也是存在防呆滯的控件,顯示出來是一朵菊花再轉,不過大家喜歡樣式新穎的東西,現在很少使用系統自帶控件咯。

00B325C1-7FA4-4A4C-AA83-A6248C8719AE.png

OK,當小明打開App后,經過等待后,就進入到了主界面,也就是我們所說的初始狀態。初始狀態應該做什么呢?看圖:

1B07EF81-0D94-4EB7-BCEA-B5FAC696EDC9.png

說白了,就是了解用戶需求,給用戶想要的東西,那用戶自然就開森咯。上圖右側是豆瓣的初始界面,收集用戶需求,可以是主動,也可以是被動的,上圖就是主動的,那被動的是什么情況呢?

2FEFFACB-D4A2-40E7-88D7-90A899F076E8.png

上圖是網易云音樂的初始界面,網易云音樂并沒有去問用戶喜歡什么,數據可以是之前留下來的,也可以是熱門的,給用戶一種”哎喲,你懂我“的趕腳。通過歷史數據分析用戶喜好,并不一定適用所有場景,不要喧賓奪主,盡量給出一定的交互,在用戶掌控之內。比如說,不要通過歷史數據查詢到用戶喜歡某一首歌,一上來用戶還沒操作,就自動播放了,用戶可能不是來聽歌的,或者他這次沒想聽這首歌,不管怎樣,App的主動權還是在放在用戶的手里,我們只是提供更好的服務。當然啦,這種錯誤,一般都不會犯啦。

等待過后,初始狀態,一切都是為了給用戶留下好的印象,留下好印象也是為了用戶帶著愉悅的心情使用App,闊以提高效率。

小明進入貓眼電影主界面了,現在呢,他要通過輸入,來進行搜索操作了。

DBDDAD49-DA10-451B-B860-BD1086DDB11C.png

講到輸入呢,其實呢,輸入是一件操作成本很高的事情,特別是現在快節奏的生活,相對于,語音輸入,滑動等等操作,很少有人愿意去輸入。微信的語音受到大家的追捧,因為極大的節省了使用者的輸入成本。當然很多時候,不可避免要輸入,怎么辦呢?把類型或者熱門搜索列出來,這樣子如果正好有用戶需要的,用戶直接點擊,那么這樣的用戶體驗就會比輸入一大堆字要快捷和舒服很多啦。

4D395CFC-2A6B-48C3-A9B7-40B8EC458B73.png

生活中,經常會遇到輸入卡號和密碼的情況,介樣子我們的技術人員可以通過代碼將卡號記住,介樣子用戶就只輸入密碼就好了,如果我們把密碼也記住了,那客戶會不會覺得信息泄露了呢?那是必然,好嘛。記住卡號(或賬號)就闊以減少用戶的輸入成本。

8240DD42-6EFD-4B35-8A05-480FB4CF09DC.png

那,我們真的沒有辦法去記錄用戶的密碼嗎?其實是可以的,只是分在什么情境下使用,因為不同的情景,用戶的接受程度是不一樣的,比如在App Store下載App,15分鐘內免密,大家是不是覺得體驗很贊呢?喬幫主是最棒的產品經理??

F9AB8EB8-3F17-4B1A-9682-6C361C2CD81E.png

很多時候,我們沒有辦法省略密碼的操作,怎么辦呢?我們闊以幫助他,怎么幫?第一個,滑動解鎖;第二個,指紋識別;第三個,聲音解鎖(微信功能),等等。為什么交互方式普及的快呢?因為大家喜歡啊!為什么大家喜歡呢?因為方便呀!

CD7D2629-EEC5-4275-A4B3-06697D87EA8C.png

這么多減少輸入成本的方法,夠了嗎?具體問題具體分析,大家看上圖,我們要直接搜索自己喜歡的東西,比如我想搜索”精靈王座“,如何簡化搜索成本呢?對,”提示“,我輸入精靈,就會有相應關鍵字的電影出現,并且在輸入法里,也會”智能“提示,這一切都是為了減少輸入成本,提高用戶體驗。到此,輸入告一段落啦。

742F0C02-42E2-46AB-910E-C1A6E04390BD.png

小明輸入關鍵字,但是神馬都沒有搜到,這個交互狀態就叫做”空“!

157E5B65-A3B0-4691-B9DD-FBC5FB4B4C86.png

最典型的例子就是上圖的狀態,輸入“啥圖”搜不到任何東西,于用戶而言,空是一件壞事情,怎么解決呢?提升你產品的硬實力,讓其包羅萬象,就像BaiDu or Google,搜什么都闊以搜到東西。

當然很多時候,產品不會強大到如此地步,那怎么辦呢?找替代方案,比如說,我饞了,我想吃甜食,鐘愛提拉米蘇,但是,網上最快送過來的也得等一天,我現在就想吃,立刻,馬上,附近味多美有草莓格格是不是闊以替代一下?或許客戶就愿意呢,草莓格格也不錯啦,超愛吃···跑題了,繼續···

EE91EF12-4D17-4B67-AE5A-A39C9A39A4DF.png

上圖呢,是貓眼電影的搜索結果,輸入的關鍵字并沒有搜索結果,但是呢,它做的比較好的一點就是給出了替補方案,當然,這些方案闊以是包含關鍵字中的字,也闊以是熱門電影等等。

當然,如果是一個UGC的產品,內容本身來自用戶共享,如果搜索為空,我們就要去想為什么是空呢?空不就意味著沒有貢獻嘛,那我們是不是就要引導用戶去貢獻呢?讓用戶從一個索取者變成貢獻者,這是一種交互設計,也是用戶體驗,增加與用戶的互動,也闊以讓用戶有一定的成就感,何樂而不為呢?如下圖,百度貼吧的例子:

7B25C08F-42C1-415A-9138-6290B6AD33CB.png

Go on,小明繼續使用App,搜索熱門電影,這次有數據了,那么有數據了,該如何處理呢?

0318159B-57C6-4759-B439-1A9E97B74A2F.png

講到這里,大家是不是覺得,一切都是很簡單了呢?是不是想著有數據了,顯示就OK了,哪兒還有辣么多問題呢?可否聽過一句話,叫做能力越大,責任越大。這里有數據了,就是說你有優勢了,那么你或許會想把效率提升到極致,這時候,你的責任就越大咯。

怎么提升到極致呢?就是引導用戶的下一步操作。大家看下圖,我輸入精靈,是想查找精靈王座。

E7AD7627-FD1D-4016-93DA-D3CA5C7F6575.png

現在呢,數據都出現了,數據很多,數據之間的排序就成了很大的問題,通過排序去減少用戶的挑選成本。比如把最新的電影放在前邊,把比較冷門的放在后邊,并不是說冷門無人查詢,而是為了把整體效率提升到最大化,而這樣做的。

050DF867-55A0-4402-95B5-8BFCB6FC4ED5.png

有數據是好的,總比空好,但是太多就不好了,過猶不及,太多數據不是用戶想要的。比如下圖,如果GPS出現了問題,我需要手動定位,如果一下子出現中國所有城市,用戶估計會淚崩~下圖呢,給出了熱門城市,就是很好的交互設計,但如果用戶要選擇一個冷門城市呢?闊以通過右側點擊字母,嗖下的就過去了。

AC25A1B1-E777-4C02-97C1-BA5737F894DB.png

但有的時候,數據實在太多了,比如淘寶搜索提拉米蘇(原諒偶介個吃貨),那提拉米蘇口味辣么多辣么多,咋整?篩選!比如下圖的,考慮一下用戶最在乎的維度,價格優先?銷量優先?等等。過多數據,給用戶最有可能在乎的,如果不夠就給用戶入口,如果入口不能滿足,就要篩選啦。

F10AE2D5-D9E3-429E-88B0-D83152B2248F.png

小明終于完成了選擇,現在呢,他點開了電影,打算看,現在是一個怎樣的狀態呢?關注狀態!什么叫做關注呢?就是用戶不操作(但也不呆滯)但是在具體界面,注意看某個東西。

BB53009E-63ED-4DF7-86E9-249FFC510961.png

打一個比方,用戶正在看電影,我們能做什么?
對的,我們要不鎖屏,讓用戶一直關注下去。然后呢,如果說用戶受到干擾,短信或者微信等信息的插入,那么這種情況下,用戶可以做什么?一種是等待推送自動消失,另外一種就是手動上滑。那如果說被強制干擾,不得不離開當前界面,我們要怎么做?保持現場。就像我們在B站上看海賊王,有人打電話進來了,用戶接了,電話結束后,返回到B站,會發現,提示用戶看到哪兒了,是不是需要繼續啊···

DFC906C7-CBF8-4EA6-B388-CF59735D6DD2.png

小明把預告片看完了,感覺“哎喲,不錯呢”,他打算買票了。

2E7C81E6-11E3-4089-931A-2AD538EB6639.png

這里要講正確態,正確態就是用戶操作正確,提示信息讓用戶感覺到“我對了”,而不是提示說你做對了,??,是不是覺得好繞啊。如下圖。這在很多電商類和O2O產品中,做的都挺不錯的,很少再出現說,沒完事呢,先說謝謝的事,這個年代,一手交錢一手交貨。比如用戶在淘寶購買商品,在你支付成功的時候會提示支付成功,給你個?,而不會說提交成功就給你一個?。就是介意思。

82A8FC34-A6B9-4557-84AF-BBB9351D9343.png

但是,如果我們假設,小明沒有找到合適的電影或預告片,這就是一種錯誤態,錯誤態,如何交互呢?

9EEE3965-2C65-4E9A-8E1B-5E4BA5FA238B.png

大家看圖吧,寶寶表示,寶寶廢話有點多~??(__) 嘻嘻……,下圖:

B04BB173-B7F7-4C18-84F5-4D2BD18FD94A.png

如果用戶覺得,我這賬號也輸入不對,算了,我三方賬號綁定吧。三方賬號綁定就有一種狀態,需要考慮,就是待確認。

5BFD0D49-8086-4FD8-A747-E5F9DCAA4E12.png

使用三方賬號登錄,需要獲取用戶三方賬號信息,那就需要用戶確認,是答應還是不答應,除了這種情況,還有哪兒些情況需要用戶確認呢?如下圖:

698E7B0B-5AE7-4EF5-A9A1-9582E6954789.png

如果小明操作正常,看了預告片,覺得不錯,打算下單,選擇微信支付了,然后呢?然后就結束了,??結束態。

51947D90-A9A1-46E6-9DF6-38C91F388EBB.png

結束,是不是意味著你可以關了我了?其實不然,作為PM,我們希望用戶留在我們App的時間越長越好,這樣我們才能有機會進一步轉化,比如說,支付成功之后,給出分享鏈接,但是很多用戶就不會主動地去點擊分享,怎么辦呢?闊以像滴滴那樣,分享后提供券,有利可圖,效果會好一些。

7A1CFC6B-9DFD-40E0-AD80-93A5707EE117.png

好了,寶寶真是廢話了很多,最后一個狀態了:

5B42989B-433F-4EAE-9DD5-D8C750FE5C5D.png

那崩潰了,是什么情況,要怎么做?

7725254C-E0C4-45E7-BA06-3FEC256C6FB9.png

這十二種狀態,基本涵蓋了所有的交互,雖然偶的廢話比較多,只是想把內容串起來,以后看起來方便,希望幫助需要的朋友,希望大家看完有所得。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容