你不在意的那些交互細(xì)節(jié),正是能力提升的煉金石(一)
用戶體驗(yàn)設(shè)計(jì)中,需要注意哪些交互細(xì)節(jié)呢?本文筆者將與大家分享自己在交互設(shè)計(jì)工作中對遇到的一些交互細(xì)節(jié)的思考和總結(jié)。
之前一直想寫些學(xué)習(xí)和從事用戶體驗(yàn)工作的收獲和心得,一方面是對自己快三年工作的總結(jié),另一方面也希望提出一些觀點(diǎn),供大家一起探討學(xué)習(xí),筆者是工業(yè)設(shè)計(jì)專業(yè)的一名小碩,目前就職于南京S開頭的互聯(lián)網(wǎng)公司,從事交互設(shè)計(jì)。
剛開始做交互工作的時候總是把大部分時間花在頁面的架構(gòu)是否完整、串聯(lián)每個頁面邏輯、熟悉并掌握各個端口的設(shè)計(jì)規(guī)范和設(shè)計(jì)語言(包括并不限于APP和PC、還包括一些無人店的終端等)。
隨著經(jīng)驗(yàn)的積累,漸漸發(fā)現(xiàn)交互的細(xì)節(jié)同樣是需要花功夫去研究和積累的。
以下是在從事用戶體驗(yàn)工作后,對遇到的一些交互細(xì)節(jié)的思考和總結(jié)。
閉環(huán)交互
以前經(jīng)常聽前公司的交互領(lǐng)導(dǎo)說過一句話,交互設(shè)計(jì)首先要做到“從哪兒來,到哪兒去”。剛開始也是一知半解,只當(dāng)是整個交互鏈路的完整性。隨著自己工作經(jīng)驗(yàn)的積累,和最近負(fù)責(zé)的一個公司店員使用的開單APP的走查工作的思考,慢慢體會到這句話的含義。
閉環(huán)交互,并不是僅指整個交互流程的閉環(huán),更重要的是細(xì)化到每個頁面的的跳轉(zhuǎn)流程。
其實(shí),所謂的閉環(huán)交互,并不僅僅指“從哪兒來,到哪兒去”這么簡單。細(xì)化到每個用戶使用場景時,每個頁面的跳轉(zhuǎn)都值得思考,頁面跳轉(zhuǎn)具體場景要綜合考慮商業(yè)可行性和用戶需求。
一個頁面的返回按鈕或關(guān)閉按鈕,大多數(shù)情況會跳轉(zhuǎn)到父頁面合適,但一些特殊場景,反而跳到其他頁面更合適,比如:很多電商支付成功的頁面,點(diǎn)擊返回或關(guān)閉,并不會返回到購物車或下單詳情頁,而會返回到電商首頁,方便再來一單的引導(dǎo),以促進(jìn)商業(yè)價值最大化。
場景
場景主要包括:用戶的使用場景和業(yè)務(wù)場景兩部分,交互設(shè)計(jì)師應(yīng)當(dāng)帶著場景去思考交互細(xì)則。
大多數(shù)交互設(shè)計(jì)師在日常工作中經(jīng)??紤]的是用戶的使用場景,如:我們會考慮用戶在操作終端時是在地鐵上、商場還是家里、網(wǎng)絡(luò)情況是否穩(wěn)定、大部分人操作的習(xí)慣會是怎樣、點(diǎn)擊區(qū)域的位置在哪里更符合用戶的使用習(xí)慣等等。從而,根據(jù)目標(biāo)用戶的畫像,對交互細(xì)節(jié)進(jìn)行推敲,以滿足絕大多數(shù)用戶的使用場景。
但往往我們?nèi)菀缀雎缘臉I(yè)務(wù)場景對產(chǎn)品才更至關(guān)重要,交互設(shè)計(jì)師不僅僅需要有同理心,站在用戶的角度思考問題,同時也應(yīng)該保證把我們設(shè)計(jì)的產(chǎn)品很好的傳達(dá)給用戶,更符合產(chǎn)品的業(yè)務(wù)場景。
交互是產(chǎn)品和用戶通過終端的互動行為,兩者需要兼得。
設(shè)計(jì)過程要帶著業(yè)務(wù)去思考具體的使用場景是否恰當(dāng),而不是一味模仿優(yōu)秀的競品產(chǎn)品。
舉個栗子:今日頭條和微博都是內(nèi)容為導(dǎo)向的APP,但是在列表頁圖片展示的篇幅上卻不一樣——頭條的圖片展示為一條新聞列表最多顯示三張圖片,而微博可以顯示最多九張圖片。
我認(rèn)為,究其原因還是兩個APP的業(yè)務(wù)定位所造成的差異——頭條整體偏新聞類,所以整體列表頁展示以吸引人的標(biāo)題和一行圖片吸引用戶注意就夠了,感興趣的話點(diǎn)擊進(jìn)去看新聞詳細(xì)內(nèi)容即可;而微博的定位類似于貼吧,是為了聚集一類相同話題的用戶的互動行為,而話題很重要的組成部分就是圖片,需要在刷微博列表是就有足夠的篇幅去展示圖片。
文案
交互設(shè)計(jì)師需要對文案信息負(fù)責(zé)嗎?
答案是非??隙ǖ?。文字是最能描述信息的載體,不推敲文案的交互設(shè)計(jì)師不算是好的用戶體驗(yàn)師。
好的文案信息可以推動產(chǎn)品的體驗(yàn)感,減少產(chǎn)品與用戶溝通的時間成本;而不好的文案信息會使用戶在閱讀信息時不僅“腦殼疼”,而且會產(chǎn)生憤懣感,很大程度影響了產(chǎn)品的易用性。
在交互設(shè)計(jì)的流程中,我們經(jīng)常會遇到輸入框暗語、toast提示語、彈窗描述文字、狀態(tài)提醒等,需要絞盡腦汁推敲文案的場景。
在我們斟酌的所有文案信息中,簡明扼要是最大的指導(dǎo)原則,盡可能用親和的語言直述想要傳達(dá)給用戶的信息是至關(guān)重要的,如:在設(shè)計(jì)輸入框提示文字的時候,可以不用加上“請輸入”的字樣,而直接提示需要輸入的內(nèi)容:“手機(jī)號/微信號”,因?yàn)槿绻挥靡粋€輸入框還好,如果是多表單的填寫,會很大篇幅的增加用戶的閱讀負(fù)擔(dān)。
另外,對于資料申請、賬號審批、面試相關(guān)等狀態(tài)流轉(zhuǎn)時,應(yīng)當(dāng)除提醒“成功”、“失敗”、“通過”、“不通過”等外,試著適當(dāng)委婉描述No一面的信息。同時,可通過輔助文案敘述出用戶下一步可以進(jìn)行的動作,并適當(dāng)用一些親和的語言,如常用的“哦”、“呢”、“吧”等語氣詞。
鍵盤
交互設(shè)計(jì)工作中,經(jīng)常會遇到調(diào)用鍵盤的場景,并不是每個項(xiàng)目都有足夠的時間設(shè)計(jì)非常符合場景的鍵盤,所以需要調(diào)用系統(tǒng)鍵盤,iOS和Android 系統(tǒng)都為不同類型的信息輸入準(zhǔn)備了相應(yīng)的鍵盤。
所以,在交互工作中合理調(diào)用鍵盤,是有利于提升用戶的輸入效率的。
因此,相應(yīng)的用戶體驗(yàn)也會提升不少。但往往在我們的日常工作中,調(diào)用鍵盤是容易忽略的一件事,覺得是開發(fā)的事,但往往交互不把關(guān),提出來對應(yīng)的鍵盤使用情況,開發(fā)人員是不明確調(diào)用哪個鍵盤體驗(yàn)好的。
有關(guān)調(diào)用系統(tǒng)鍵盤總結(jié)如下:
- 有關(guān)長數(shù)字,請調(diào)用輸入數(shù)字鍵盤,如:身份證、銀行卡、手機(jī)號、、驗(yàn)證碼、金額等常用場景;
- 有關(guān)文字輸入請調(diào)用普通文字輸入鍵盤,如:聊天對話、評論信息、姓名、公司名稱等常用場景。
此外,如果需要在有鍵盤的場景下增加其他操作,請盡量不要在鍵盤上區(qū)域增加,因?yàn)殚_發(fā)一個鍵盤往往是一件耗時耗力的事情,可以在鍵盤上方新增操作區(qū),如:微信、微博、BOSS直聘等都有這樣的交互方式,筆者自己定義為鍵盤+式交互形式。
微信和微博添加了輸入框、語音消息和鍵盤之間的切換、添加表情以及發(fā)送圖片等功能。
BOSS直聘除了添加輸入框、表情等,還加了常用語按鈕。
還原度測試
一般交互設(shè)計(jì)師的工作流程為:
1.需求分析:從產(chǎn)品經(jīng)理手中接過需求,分析需求文檔、了解項(xiàng)目背景和用戶等;。
2.設(shè)計(jì)規(guī)劃:開始頁面構(gòu)造階段,從總到分整理需求的邏輯,將需求文檔轉(zhuǎn)化成頁面。
3.設(shè)計(jì)細(xì)化:畫高保真原型圖,寫交互備注。
4.設(shè)計(jì)評審:通過組內(nèi)(交互、視覺和設(shè)計(jì)領(lǐng)導(dǎo)等)、組外(開發(fā)、測試、產(chǎn)品和業(yè)務(wù)等)評審,推敲設(shè)計(jì)的合理性,并進(jìn)行調(diào)整。
5.項(xiàng)目跟進(jìn):跟進(jìn)視覺,確保高保真沒有遺漏場景,并參與高保真評審。跟進(jìn)開發(fā)保障設(shè)計(jì)效果的實(shí)現(xiàn)。
在項(xiàng)目跟進(jìn)階段很重要的工作是還原度測試,還原度情況經(jīng)常被很多設(shè)計(jì)師忽略。然而,開發(fā)的還原度情況其實(shí)是非常影響整體的用戶體驗(yàn)。
還原度測試通常需要交互設(shè)計(jì)師和視覺設(shè)計(jì)師共同參與,一方面測開發(fā)對于高保真的還原度情況、對交互流程的跳轉(zhuǎn)、點(diǎn)擊等是否滿足所有實(shí)際使用場景;另一方面也是上線前對產(chǎn)品最后一次整體評估和調(diào)整的機(jī)會。
在這個階段我們可以反復(fù)推敲正常流程和異常流程是否流暢,最大程度保障產(chǎn)品0問題上線。通常還原度評估在95%以上,經(jīng)過交互設(shè)計(jì)師簽還原度單,產(chǎn)品才可上線。
以上是鄙人的一點(diǎn)薄見,全當(dāng)拋磚引玉。打算不定期更新這個系列,歡迎大家一起討論。
本文由@交互小帥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash, 基于CC0協(xié)議
學(xué)習(xí)了,持續(xù)關(guān)注,謝謝
?? 我堅(jiān)持更新
學(xué)到了,謝謝
可以了,啥時候進(jìn)蘇寧跟帥哥混哈哈哈
歡迎歡迎
學(xué)習(xí)了,感謝
奶思,贊一個!
謝謝 ??