2023-6-1 博博
“系統應該在合理的時間內通過適當的反饋,始終讓用戶了解正在發生的事情” --尼爾森。
用戶都希望產品是可控的、狀態是可預測的,所以無論用戶在界面上做了什么,系統應該在合適的時間給予合理的反饋,始終保持界面的狀態可見、變化可見、內容可見,讓用戶對已經發生的、正在進行的、以及后續走向都有所了解,以避免在后續的轉化決策中出現錯誤。
界面不僅僅是為了把信息呈現給用戶,還需要引導用戶來操作,讓用戶清楚的知道當前在什么位置,以及操作時最想要知道的信息。
例如,訂單頁頂部的導航分欄,不僅將字體加大加粗、色彩加深,還添加了主題色的形狀,為的就是強化用戶當前所在位置。購買產品VIP時,按鈕中會顯示金額,也是為了讓用戶的視線停留在CTA按鈕上,避免用戶想要查看價格時將視線從CTA按鈕上移開。
對于同一操作,系統需要搭配不同的時間場景給予不同的反饋,確保反饋的及時性,避免讓用戶產生焦慮或不安。例如在跳轉頁面時,即時跳轉,用戶通??床坏饺魏翁D中的狀態,時間稍長會看到加載動效,若長時間沒有響應,則會提示其他問題,如網絡問題、跳轉失敗等。
用戶需要清晰感知到已經發生、正在發生以及即將發生的事情,以便于他們進行下一步決策。每當用戶進行交互后,系統應將當前狀態、位置、進度以及操作結果適當的反饋給用戶,以減少不確定性。如果用戶存在失誤,更應加以正確方向上的引導,避免用戶產生疑惑或重復操作。
例如在電商應用中,將商品收藏、添加到購物車等,這種操作行為不會造成任何損失,系統在反饋時盡量不要打斷用戶,使用類似toast簡短彈窗提示即可。但對于金額支付、內容刪除等,會涉及用戶利益或安全方面的操作,就需要通過彈窗打斷用戶當前操作,讓其二次確認后再作決策,以減少不必要的損失。
“系統應該說用戶的語言,用戶熟悉的單詞,短語和概念,而不是系統導向的術語。遵循現實世界的約定,使信息以自然和合乎邏輯的順序出現”--尼爾森。
設計師需要站在用戶的角度去做設計,但并不能就此代表用戶,不要將自己對產品的理解、行業中的專業術語代入用戶場景中,因為用戶的認知大多來源于多周圍環境的感知,我們需要使用最貼近目標用戶群體生活場景的表達方式,讓信息表現的自然,用戶能更容易理解。
對于環境貼切原則,直接點就是“說人話”,蘋果之父「喬布斯」和微信之父「張小龍」的產品核心理念便是如此,用最簡單直白的語言、用戶最熟悉的概念呈現信息,盡量貼近真實的世界,將產品做到傻瓜也能操作,才能保證與用戶溝通交流的順暢。
產品的設計語言需要針對不同的用戶群體以及不同的使用習慣,使用該群體所熟知的文字、圖形、版式、配色以及設計風格等,讓用戶覺得這個產品能解決自己的問題,不會有認知上的困難。
從大了講,例如微信的標準模式符合大多數常規用戶的操作,但又另外設計了一套關懷模式,將文字、按鈕變的更大,色彩變的更強,這就是為老年人的視覺障礙而準備的一套解決方案。還可以開啟聽文字消息,在會話框中只要點擊一下文字消息,系統就可以直接閱讀,將信息的傳達從視覺轉移至聽覺,更大程度的解決了視覺障礙問題。其實,不管是微信的標準模式、關懷模式,還是其他的鄉村模式、青少年模式、大學生模式等,都是為了迎合不同的用戶群體。
將范圍縮小至產品的某個功能,如高德地圖視覺障礙模式(色盲/色弱用戶的專屬配色)、首頁設置(搜索框位置的調整)等也是為了滿足不同用戶群體或同一用戶群體的不同使用習慣而設計。
將現實世界中的物體映射至產品設計中,能讓用戶通過對現實環境的認知感受到產品的真實易懂,很大程度上降低了學習成本,幫助用戶更快的理解并輕松掌握其使用方式。模擬現實世界的物體并不僅僅局限其外形,對于其動態效果、聲音以及其他屬性特征等都可以加以融合,打造更真實的用戶體驗。
iOS系統早期的桌面圖標就是如此,即便后來逐漸過渡到扁平化,但很多地方依然保留了擬物化的設計,如同步變化的動態時鐘表盤、接近于物品外觀的相機、計算器圖標等。網易云音樂播放頁面中,復古的黑膠唱片,不僅模仿了早期的留聲機,還融入的懷舊情感,與其他同類產品的差異性也即刻凸顯。
產品不僅可以使用人們對真實物體的視覺感知,還可以利用文化觀念進行隱喻。
例如,紅色意味著危險、禁止,綠色則代表安全、通過,而產品中的審核結果就可以用顏色醒目的圖標強化提示,紅色表示審核未通過、綠色表示審核通過。另外在現實生活中,“+、-”符號代表增加和減少,對于互聯網產品,同樣可以使用“+、-”來表示內容的增加與減少,常見的有購買商品數量調整、自定義內容布局等。
“用戶通常會錯誤地選擇了系統的某個功能,并且需要一個明確標記的「緊急出口」來離開不想要的狀態,而不必進行擴展對話。支持撤消和重做”--尼爾森。
用戶需要擁有控制系統和來去自由的權利,且產品要在用戶可能犯錯誤之前及時警示并給予正確的引導,但總有些特殊場景,用戶發生主觀上的失誤不可避免,為了不讓用戶進入到錯誤的場景,這時系統應該提供一個“緊急出口”,便于用戶撤銷和重做。
在使用產品的過程中,系統檢測到用戶有可能出現操作失誤的情況,應給予明確的提示和指引,關閉/返回就是最為常見的“緊急出口”,即便大部分用戶知道向右側滑返回,但“緊急出口”依然要明確顯示。
另外,在刪除某些信息時,系統給予的確認彈窗也是為了減少用戶操作失誤,以免造成不必要的損失。
用戶的失誤行為已不可避免的發生,應當提供撤銷、取消或重做等相關功能。
在社交類應用中,短時間內發出的消息可撤回重新編輯,便是給了用戶可以反悔的權利,辦公類產品中的回收站亦是如此。
“不應該讓用戶懷疑不同的話語、場景或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例,保持一致性”--尼爾森。
對用戶來說,同一產品需要統一的設計規范,其視覺樣式、交互形式都應該遵循基本的用戶習慣,保持功能、操作的一致性為確保用戶對界面的學習使用至關重要。
設計規范就是為保持產品內部的一致性而生,不管是色彩間距、還是組件模塊,保持一致性不僅能讓用戶感覺使用的是同一個產品,還有助于品牌傳播,給用戶留下一定的印象。
對于業務非常復雜的大型產品,雖然各元素組件樣式繁多,但會從視覺風格和交互形式上來確保產品的一致性,這都可以減少用戶的思考負擔和學習成本。
雖然很多產品都在呼吁創新、去同質化,但差異化較大的設計雖然達到了去同質化的目的,卻給用戶增加了更多的學習及思考成本。這里意思請大家不要誤解,并不是說不去創新,而是除非你的產品有足夠的影響力,對于較大的變動,企業能承擔起試錯成本、以及增加了額外學習成本可能造成的用戶流失,否則只能進行一些小的改動,循序漸進的跟隨主流。
對于同類型的產品,我們依然需要參考競品的一些設計形式,如下圖是音樂APP的播放頁面,其主要功能的優先級排列、頁面布局基本相同,即便是創新也是從設計風格、氛圍以及微動效等方面做出差異化。
先舉個例子,之前有不少產品引用費茨定律“任意一點移動到目標中位置距離越短,所花費的時間就越少”這一原則,于是將左上角的返回按鈕搬到了左下角(側滑返回操作沒有影響),沒錯,對于現在的大屏手機來說,返回效率確實提升了,但卻違背了用戶的使用習慣,增加了誤操作的可能性。
返回按鈕放置左上角,與絕大多數產品保持一致的使用習慣,這意味著用戶只需付出更少的學習成本甚至無需學習即可快速上手。
“系統要么消除容易出錯的情況,要么檢查它們,并在用戶采取行動之前向用戶提供確認選項”--尼爾森。
用戶的很多操作都是比較隨意、無意識性的,也因此造成了一些不可挽回的錯誤。系統應該在用戶出錯之前采取一定的措施,這并沒有多么復雜,或許只是一個走心的設計,如使用引導用戶、溫馨提示、有效控制等方式以減少錯誤的發生。
主動引導的目的就是為了給用戶提供明確的路徑,減少錯誤操作。很多APP首次下載或更新迭代之后就會提供新手引導,還有表單的占位符提供的格式規范、內容描述也是如此。
在用戶操作時,系統對用戶錄入的已有信息進行預判并提供相匹配的內容讓用戶選擇,也是一種常用的防錯方式。如搜索聯想詞、商品錯誤文字自動修正等。
對于一些較為敏感、可能存在危險或不可逆轉的操作時,系統需要提供二次確認引起用戶注意,以起到警示作用。例如注銷賬號、刪除某些內容或中途退出流程,都會有彈窗提醒用戶,避免誤操作帶來不必要的損失。
從表面來看,限制用戶似乎并不友好,但為了避免用戶錯誤理解,利用明確的限制阻止用戶犯錯也是一個不錯的選擇。例如無效內容置灰、未達到操作條件的限制,都能很好的防止用戶無效操作。
筆者曾使用過一個產品,在選擇出生年齡時,往前的年份能滑到清朝時期(一百多歲玩不動智能手機了),往后面能滑到今年之后的幾十年(我還沒出生呢),這并不是在質疑設計的合理性,而是無效或過于冷門的選項越多,用戶可能會有選擇性困難「綜合癥」、也可能會提高隨意性以及選擇錯誤的幾率,這對后期用戶數據分析的精準度有很大影響。
適當的限制操作范圍,對產品來說也是一個很好的防錯策略。例如:美團定酒店的日歷限制在半年以內、在手機號碼表項中限制輸入11位數字等,都可以降低用戶出錯的概率。
對于隨意性較強的用戶,通常都是「做多錯多」,所以在部分場景下,如果對用戶的操作需求明確可控,可根據實際場景提供符合目標的默認值,以減少用戶操作成本。
添加銀行卡時,輸入卡號后會自動匹配對應的銀行、購物下單時系統也會自動選擇一個默認收貨地址,這些默認值的存在都或多或少的減少了用戶操作步驟,即便不是用戶所需,也不會造成什么負擔,這本該就是用戶完成任務的必要流程。
在數字信息輸入場景中,可以利用一些特定格式,不僅能減少出錯,還能有效避免將錯誤信息帶入下一步流程。
例如,輸入手機號、銀行卡號、身份證號等,可以將幾個數字分為一組,以此類推,這樣更有利于用戶自查。
“通過使用對象、動作和選項的可視化表達,最大限度地減輕用戶的記憶負擔”--尼爾森。
在產品設計的時候,需保證組件、按鈕以及選項的可見性,用戶不需要去動腦筋,產品應該把用戶當傻瓜對待,盡可協助其記憶。在特殊情況下,用戶離開當前頁面,產品可提供關鍵信息讓其確認,而不是讓用戶去回憶,徒增記憶負荷。
產品能做決定的就不要讓用戶去選擇、能讓用戶選擇的就不要讓他們自己輸入。其實選擇和輸入的操作成本相差巨大,很多用戶都不愿意在輸入上面花費過多時間。
問個比較現實的問題,如果你申請信用卡的意愿不是很明確、在辦與不辦之間猶豫徘徊時,有多少人是被幾頁超長表單勸退的?需要用戶提供的信息我們無權刪減,但可以利用設計手段降低操作成本,如果將部分輸入框變成選擇框,讓任務變的更容易完成,用戶的抵觸心理自然也會降低。例如:微信添加銀行卡時,手機號、銀行卡號都能從相應的接口獲取,減少了很多操作。
與其讓用戶逐步完成任務,不如讓用戶只進行一步簡單操作,產品就智能化的將信息提取出來、自動拆分并送到用戶手中,不僅節省了大量的交互步驟和瀏覽時間,也降低了用戶因自行輸入信息可能出錯而帶來的不可控感,大大提高了產品的易用性。
新建收貨地址時,將地址信息粘貼至輸入框,產品即可自動拆分省/市/區、詳細地址及個人信息;綁定信用卡時,只需掃描卡片就能自動提取卡號、開戶行、有效期等信息。
特別是一些隱藏的交互操作,一定要使用用戶最熟悉的方式,避免浪費時間去回憶或手動試錯,要保證用戶在最短的時間內有效識別、理解。
例如,左滑列表中的某個內容可進行刪除操作、屏幕邊緣右滑返回上一頁、雙擊短視頻點贊等。
眾所周知,文字表意明確,也是最能讓用戶理解的方式,不過它的信息傳達效率遠遠不如圖形,所以在眾多UI設計中,有圖標的出現,就會搶占信息組中的主視覺,但這并不代表可以完全替代文字,很多時候,我們應該讓文字成為輔助的存在,以加深用戶的理解。圖標+文字組合表意更加明確,能迎合更廣泛的用戶群體,避免少數用戶產生疑惑。
這里要說明一點,圖標并非不能單獨出現,而是要慎用。就如搜索圖標,全球99%都在用這個放大鏡造型,無可厚非?;ò闍PP底部標簽欄也使用了純圖標形式,因為它所面對的用戶絕大多數都是設計師,而設計師對圖標的識別和理解自然沒什么難度。
針對一些需要用戶記住或對用戶來說較為重要的信息,即便已進入下一步流程,產品有必要二次呈現用給用戶確認,避免用戶回憶(想不起來就會離開)。
在購物下單頁面,會提供商品的關鍵信息給用戶確認;部分產品的表單任務完成后,點擊提交,也會彈出之前輸入的內容給用戶自查。
系統應該提供用戶最近的訪問項,幫助他們提供未完成或想要重復完成的任務,即便是跨系統、設備,再次使用也不用來回調整,歷史記錄功能便是這個需求的最佳體現。
例如騰訊視頻的觀看歷史模塊,按照時間排序,提供了看過的內容以及進度,點進去之后會從上次退出時的位置節點接著播放,視頻、音樂、閱讀類應用都是如此。
“好的產品需要同時兼顧新用戶和資深用戶的需求,對新用戶來說,需要功能明確、清晰,對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶,把不必要的信息占據重要部分”--尼爾森。
靈活高效原則旨在滿足多樣化的使用群體,通過對他們的使用場景、任務流程進行深挖,讓其在最短的路徑以最快的速度完成目標需求。
系統要同時照顧新老用戶的使用體驗,對于新手用戶,要盡量降低學習成本,能讓其快速上手是留住他們的必要手段。而對老用戶來說,對產品的信任度有一定的基礎,能快捷高效、心情愉悅的使用至關重要。
沒有什么能比提供快捷操作更能節省時間成本了,但凡使用過手機、電腦辦公的用戶都用該知道Ctrl+C、Ctrl+V、Ctrl+S這三組合的神奇之處,提升的效率真的不是一星半點兒。
在UI設計中,很多快捷的入口、操作方式都相對降低了用戶使用門檻,例如快捷登錄(QQ、微信、手機號一鍵登錄)減少操作步驟,節省用戶很多時間;另外,在一些產品截圖后就會彈出分享、反饋入口,這也是通過行為預判為用戶提供便捷操作的體現。
一些頻繁使用的功能,可在不同的頁面重復顯示,當用戶有使用需求時,能隨時通過就近的操作入口進入。微信的掃一掃在會話列表、通訊錄、個人信息等頁面都有操作入口,非常方便;支付寶首頁的花唄、借唄、芝麻信用等功能在我的頁面幾乎都重復了一遍,觸手可及,對產品轉化也有很大的幫助。
「功能自定義」意味著用戶可以對自己常用或喜歡的功能進行隨意排列、增減,兼顧了不同用戶對不同功能的使用需求,提高產品的靈活性。
支付寶讓用戶根據自己的喜好選擇13個常用功能放在首頁,操作起來更加方便,滿足了用戶的自定義需求。網易云音樂則更個性化,不僅能對功能模塊、底部導航自定義,系統還提供了3種不同的版式風格,對于這種靈活的調整,不管是“蘿卜”還是“青菜”,總有一款是你的最愛。
提供默認選項上述有提到過,通過減少多余操作,不僅對防止用戶出錯有極大的幫助,對于提升任務完成效率也尤為明顯。
不同的用戶就有不同的需求、不同的喜好、不同的使用習慣,產品需要做到千人千面,以最大化的程度滿足多種用戶群體。
這種類似的案例非常之多,且不說各大電商通過背后隱藏的算法為各種用戶匹配不同的內容,就說明面上能看到的如關愛模式、鄉村模式、青少年模式等,還有高德地圖搜索框上/下位置調整、京東商品頁的宮格樣式/列表樣式等,都在為滿足絕大多數的用戶的使用需求而付出了最大努力。
“不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性”--尼爾森。
在設計頁面時,需要注意信噪比(有效信息與無效信息的比例),處理好信息層級,方便用戶能快速捕捉到自己想要知道、或產品想讓用戶知道的信息。因為用戶的注意力有限,任何低頻次或不相關的信息都將成為視覺“噪音”,導致原本重要的信息被用戶忽略。
不管是模塊與模塊之間、還是單個模塊內的各個類容,都有其一定的等級權重,劃分好信息層級能集中用戶注意力,更好的引導用戶操作,避免用戶分不清重點而徒增使用成本。需知什么內容都想突出,其結果必定是什么也突出不了。
產品的視覺效果需要和諧統一,富有設計感、獨具一格的效果能給人眼前一亮個感覺。這就是為什么很多小而美產品能頻頻登上App Store的榜單的原因。例如,躺平(已下線)、即刻、小宇宙等應用獲得了用戶的一致好評。
不管一個頁面中信息量的多少,但是一定要有“主角”,很多時候,我們會通過添加次要信息或背景裝飾來襯托這個“主角”的存在。設計之前一定要權衡視覺重點,應弱化或去除頁面中的無關信息,減少信息“噪音”的干擾,使用體驗能得到良好的提升。
所有的設計都應該遵循產品設計四大原則,即親密、對齊、重復、對比。很多時候,頁面設計不夠精致,總感覺差點意思,但又找不出真正的原因,就是基礎原則沒有掌握好,或許只是間距、字號、大小的一個微調,即可達到意想不到的視覺效果。關于設計四原則,暫不多做贅述,后續會單獨出具詳細的文章。
“錯誤的信息應該用通俗易懂的語言表達,較準確的指出問題,并且提出解決方案。避免通過代碼等用戶難以理解的形式”--尼爾森。
筆者相信有很多人見過這樣的問題,在遇到網絡問題時過了幾分鐘后的頁面還是一片白板、很多錯誤反饋就顯示什么錯誤404/505/321之類的代碼,真心搞不懂,很讓人抓狂。
用戶在使用過程中,有時候出錯不可避免,系統應該通過明確的提示性文字或插圖來提醒用戶,并附上解決方案,而不是給一堆看不懂的代碼草草了事,需要幫助用戶從識別、診斷、并從錯誤中恢復過來。
用戶在操作前(預判)、操作中、操作后都可能出錯,系統可通過前端驗證(優先使用)和后端驗證明確告知出錯的原因以及解決方法。
例如手機號碼表單項都是限制在11位數,如果用戶手滑少輸了一位數字,在離開輸入框時,系統應及時通過前端驗證告知用戶。這里要吐槽一點,一些產品是等用戶完成所有表單內容并提交后才統一反饋,這并不太友好。還有產品在用戶未達到表單要求的情況下,始終將下一步按鈕處于置灰狀態,期間并沒有任何提示,這就需要用戶反復查看每個表單項的內容是否達標,無故浪費大量的時間成本,實則不可取。
當網絡出現問題或長時間無響應,系統會給出明確的提示,并提供重新加載、刷新、設置網絡等操作入口,讓用戶知道問題出現的原因以及如何解決。
當錯誤已經發生,系統應盡可能的幫助用戶從錯誤中恢復,將損失降到最低。
發布微信朋友圈,如果內容有問題刪除后,系統會提供“重新編輯”入口,并保留了原先所有內容,能很輕松的、以最小的操作成本就完成了二次編輯。iPhone相冊中的回收站會保留30天內所刪除的內容,方便隨時恢復,這都用戶犯錯后能及時止損的最佳體現。
“如果系統能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索,且專注于用戶的目標任務,并列出具體的步驟來告知用戶”--尼爾森。
雖然很多時候,用戶并不需要幫助或稍加摸索便能上手,但要考慮到意外情況的發生,系統有必要提供一份幫助文檔,方便用戶有需要時能隨時了解,以便接下來專注于完成任務。
能進行清晰直觀、符合用戶習慣的設計再好不過了,無需任何幫助,用戶也能順暢的完成任務。如組件庫的打造,就是為了讓設計更簡單、用戶更容易理解與使用。
對于那些用戶只需花費少量的時間就能熟練使用的功能,產品為了實現快速轉化或給少數的特定人群提供幫助,會提供一次性幫助。如首次進入App的新手引導、迭代后的部分新功能指引等。
對于較為復雜的操作流程或存在必須要用戶注意的問題,產品會在必要的位置提供說明,方便用戶在需要時能及時獲得幫助。
例如粵通卡ETC激活流程,對于這種冷門卻又必須要用的功能,即便使用過的老用戶也未必能記住所有步驟,所以每次進入激活功能,首先看到的便是操作指引。其他如綁定信用卡時,輸入簽約手機號、安全碼,對應位置都有固定的幫助入口。
對于一些常見的使用問題,系統會提供一個「幫助中心」功能入口,將所有問題集合在一起,方便用戶隨時查看。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。