關於尼爾森原則

「尼爾森十大原則」又稱爲「用戶界面設計的10種可用性啓發式」,是由雅各布·尼爾森(Jakob Nielsen)提出的10條交互設計一般原則。之所以將其定義爲“啓發式”,是因爲它們是廣泛的經驗法則,而不是特定的可用性準則。

在官方2019年的描述視頻中將原則定義爲「十大UX設計試探法」,運用這些原則有助於我們 試探設計的邊界,探索設計的可能性,千萬不要讓原則成爲束縛我們設計的枷鎖。

原則一:系統狀態可見性

“系統應始終讓用戶清楚當前的狀態以及發生了什麼,並且在合理的時間內通過合理的方式給予用戶反饋。”

通常來說用戶都希望 產品是可控的,狀態是可預測的, 給予用戶更多的信息反饋可以轉化爲更好的決策。這個原則不僅侷限於界面設計,生活中常見的交互場景都能適用。

適當的反饋

用戶界面設計的基本準則,每當用戶進行交互後,它們都需要知道交互是否成功。通過適當的反饋可以 讓用戶清晰的感知到當前的狀態,以便於他們進行下一步決策。

這個很好理解,比如最常見的按鈕點擊後的水波紋反饋,在Material Design的官方規範中,就明確了一個按鈕在不同情況下下需要通過不行的視覺反饋形式告知用戶當前狀態。

我們在淘寶選擇將某件商品加入購物車後,系統會通過短暫性的彈窗告知用戶添加成功,而當我們需要在微信中向別人轉賬的時候,系統會用彈窗讓你進行二次確認。微信中如果有未讀消息或者新的朋友圈一般會通過紅點的信息給予用戶反饋。

添加購物車作爲不會對用戶造成損害的操作,一般來說盡量不要打斷用戶的操作,只需要進行短暫的反饋,而轉賬等牽扯到用戶利益的操作就需要打斷用戶的當前操作,進行再次確認。這就是在不同的場景中我們需要考慮使用「適當的反饋」。

適時的反饋

除了適當的反饋形式外,不同的反饋需要搭配不同的時間場景來進行,並且需要保證 反饋的及時性, 否則容易造成用戶的混亂與不安。

常見的下拉刷新以及進行加載時的loading動畫,都是在用戶進行相應的加載操作後纔會出現,如果一個產品動不動就自動跳出loading,不僅會阻礙用戶操作,還會讓用戶迷惑是不是自己的網絡狀態較差。

值得一提的是IOS系統中的勿擾模式,用戶可以通過自己來開啓與關閉是否接收反饋,如果我們無法判斷用戶合適需要反饋,那就讓用戶自己決定吧,顯然這樣會極大滿足用戶的掌控感。

生活中的反饋場景

前面我們提到狀態可見性不僅只是運用在界面交互中,在很多生活場景中我們也能看到。

例如我們經常乘坐的地鐵,當地鐵即將進站以及離開的時候,隔離門以及指示燈會不停的閃爍燈光,並且發出“滴滴滴”的聲音,通過視覺以及聽覺給予用戶反饋,提示用戶準備上車或下車。而且由於地鐵停靠時間較短,聲音與燈光通常是短而急促的。

另一個生活中的常見場景就是公交車的掃碼乘車,當掃碼成功後機器會發出音效給予用戶反饋,根據不同的場景音效也會有所不同,比如一些車全程都是同樣的價格,掃碼後只會“滴”,有些車輛按距離收費,所以下車刷的時候會報出具體的價格,最近我所在在的城市週末免費乘車,所以刷了以後會語音播報“免費乘車”。

原則二:系統與現實世界之間的匹配

“系統應使用用戶熟悉的語言和概念,而不是技術性很強的術語。產品應遵循現實世界慣例來呈現信息。”

設計師或開發人員≠用戶,所以千萬不要將我們對產品的理解以及專業術語代入到用戶的使用場景中。用戶的認知一般來源於對周圍環境的感知以及個人因素,我們應該多觀察生活場景,尋找最貼切用戶的表述方式。

用戶熟悉的語言

官方的文獻中語言主要是針對“網站上使用的術語”,但是隨着設計的發展,這個語言也可以看作平時我們所說的設計語言,比如配色,整體風格等等。應該讓用戶能夠清晰的理解這種「語言」。

熟悉的語言前提是針對不同的用戶羣體,比如上面這三個產品的目標用戶羣體就大不相同,B站更加傾向二次元羣體,頂部導航欄中的「追番」就是二次元用戶熟悉的語言。再比如金融類產品中的「自選」tab選項,以及面向工程師的產品分類。

充分模擬現實世界中的概念

用戶現實中的體驗會在不經意間帶入到數字世界中,所以使用模擬物理世界中的交互,利用人們的現有知識,可以幫助用戶輕鬆掌握界面的使用方式,最大程度的 降低用戶的學習成本。

早期數字產品界面使用的「擬物化」圖標就是通過描繪現實時間的產品,方便用戶對功能進行感知,不過隨着用戶被互聯網教育的越來越成熟,後面漸漸開始使用扁平化風格代替。雖然逐漸扁平化成爲主流,但一些成品中依然保留了擬物但特徵,比如IOS中的指南針錶盤。

網易雲音樂中最顯著的黑膠唱片特徵,不僅通過模仿現實世界的使用映射降低了學習成本,而且融入了情感,拉開了跟其他同類音樂唱品的差異性。

文化觀念隱喻

利用用戶對現實世界對感知,不僅視覺上帶有擬物化對相似性,不同對文化之間也有廣泛對隱喻,比如符號中的「+」代表增加,「-」代表減少,以及常用紅色代表禁止狀態,綠色標示成功,黃色標示警告。(不同的地區,宗教,教育等文化差異性會有所不同)。

原則三:用戶操作可控性

“用戶經常在使用時選擇了錯誤的操作,所以產品需要有一個非常明確的「緊急出口」,用於幫助用戶撤銷或重做。”

原則上來說,在用戶發生錯誤之前我們就應該給予阻止或者警示,但很多時候用戶發生主觀操作上的失誤不可避免, 當用戶發生錯誤的操作後,不要責備用戶做錯了什麼, 這時候需要幫助用戶儘可能的挽回,及時給予撤銷或者重做的功能。

Web端中的「麪包屑」導航形式是常見的保證用戶可控性的體現,他很直觀的告訴了用戶,我在哪,可以去哪以及可以回到哪裏去。

另外一個典型場景是web瀏覽器中的「返回」「前進」按鈕,點擊後我們可以回退或者前進頁面,爲了增加用戶的可操控性,長按後會列表展示出前面所有歷經過的歷史記錄,方便用戶快速回退或前進到指定的頁面。

微信中如果我們發送了覺得不合適的消息,可以及時通過長按撤回,且撤回後會用文案進行提示,可以再一次編輯發送。在IOS系統中如果你需要刪除男朋友照片時候系統並不會做過多的阻攔,讓你刪的痛快,當你過幾天氣消後,到「最近刪除」中就能選擇恢復了~(不用擔心,最近刪除給了用戶幾十天時間冷靜)。

原則四:一致性

“用戶不必疑惑是否使用了不同的設計語言、情況或不同的操作產生的結果實際上是同一件事。”

通俗的來說就是保持設計中相同場景的一致性(視覺語言/交互形式),讓用戶感到自己是在進行同一步驟或產品上進行操作。 保持一致性並遵守標準對於確保用戶界面可預測和可學習至關重要。

內部一致性

內部一致性就是指保持同個產品或產品系列中的一致性,讓用戶感知到自己是在同一個產品中進行操作。內部一致性有助於 傳達自身的品牌特徵。

百度網盤中主要的圖標都使用了切割的表現形式,且色系都比較統一,以此來保持產品的一致性以及傳達品牌特徵。

電商類產品是比較極端情況下的一致性運用場景之一,由於業務以及產品類型繁雜,很難約束產品展示內容,這種時候只能通過大的視覺風格和交互形式來確保產品的一致性。

在淘寶中使用同樣的底色以及卡片區分的形式來表現界面,邊距保持一致,且大卡片均使用了同樣大小的圓角,消息和購物車頁面都使用了大標題的展現形式。一些重要操作按鈕以及底部tab選中樣式都使用了品牌色。最大程度上保證了視覺上的統一。

外部一致性

外部一致性指整個行業類一些約定成熟的習慣,比如底部tab標籤欄是對頁面模塊大切換,點擊輸入框可以進行文字輸入等等,愛心圖表是指點贊或喜歡,這些 用戶已經習以爲常的操作可以保證用戶以最低的學習成本上手產品。

雖然上面是三種不同類型的產品,但是通過產品經驗用戶能夠很快速的感知到哪個是「掃碼」功能的入口。

圖中爲三種視頻播放類產品界面,雖然三者爲不同品牌的產品,但是在視頻播放窗口都能通過手指雙擊的交互形式進行視頻播放或暫停。遵循了外部一致性,滿足了用戶的的操作習慣。

求同存異

在遵循一致性的原則上,不少產品通過小一些小心思來體現與其他產品的差異性,突出自己的品牌特徵。 注意:必須是在遵循整體一致性的原則之上。

在移動端產品中下拉刷新是最常見的交互形式,用戶早已習以爲常。上圖三個產品都是通過下拉進行刷新交互,但是通過不同的loading形象來突出自己的品牌特徵以及與其他產品的差異性。

原則五:預防錯誤

“用戶通常會分心於手頭上的任務,因此可以通過提供建議、利用約束和保持靈活性來防止無意識的錯誤。通過精心的設計防止用戶發生問題,比出現錯誤信息提示更好。”

解決用戶錯誤的方法不是責問用戶,而是應該重視自身產品的設計,儘量減少錯誤的發生。回憶一下以前用win電腦時候,程序用的好好的突然“登”的一聲崩潰了,然後給我一個彈窗反饋,問題是彈窗上動不動就講什麼數據庫損壞的,咱也不懂阿。

習慣性錯誤

官方將這種錯誤稱爲“滑倒”,爲了更好理解我把它歸位習慣性錯誤,其實就是指當用戶非常熟悉自己想要實現的目標以及實現該目標的過程時候,偶然性的發生錯誤。 一般來說我們在操作熟悉的產品流程時候,並不會那麼集中注意力。

一般來說以輕柔的引導方式或者提供所需的精確來協助是最合適的。在IOS中設定就寢時間的時候,滑動錶盤經過每一小格的時候都會有輕微的震動反饋,且每一格單位爲5分鐘,通過觸感反饋最大程度的協助用戶操作。

另一個場景就是我們經常在一邊刷劇或者綜藝時候一邊回覆消息,現在很多輸入法都可以自動將一些稍錯的拼寫進行自動的調整,比如上面我輸入“wan sh hui jia chi f”,最終也能回覆“晚上回家喫飯”。

有效的約束

雖然限制用戶並不是一個很好的體驗,但是如果在有明確的規則定義之下,通過限制條件來阻止用戶犯錯是個很好的選擇。

最常見的場景就是類似airbnb這種選擇房屋居住日期的時候,通過限制可以控制用戶只能選擇能夠入住的時間。另一個常用的約束就是電商類產品,通過置灰限制沒有存活不可購買的物品,不過現在除了置灰也會使用一些更加委婉的表達方式,比如“到貨通知”。

提供建議

在用戶發生操作之前提供合理的建議,是一種防錯的常用方式。

在搜索引擎中,當你輸入搜索內容的時候系統會聯繫上下文來提供建議,如果有自己相匹配的搜索記錄也會前置出現。而且即使輸錯了單詞或詞語,也會輔助進行正確的匹配。

設置默認值

當用戶需要執行重複操作,或者對操作精度有特殊需求的場景下,可以 結合實際場景首先提供可能符合其目標的合理默認值。

比如滴滴打車,一般會通過定位給一個默認的起點位置,而且如果周圍正好有常用的打車點,會默認定位到常用的地點,有效的防止了用戶地理定位上發生的錯誤。還有銀行類產品如果是近期經常轉賬的對象,會有小氣泡進行提示,可以進行快速點擊填充信息。而且在進行轉賬的時候,輸入卡號後會自動識別對方所屬銀行。

使用格式化信息

有些時候需要用戶輸入一些非常特定格式信息的時候,可以利用格式優化幫助用戶輸入並且協助檢查。

在一些數字類信息的輸入場景中比較常見,比如輸入銀行卡號或手機號會根據位數進行分割,滴滴輸入驗證碼時候會使用格子劃分位數協助輸入,電商類的產品新增地址通常也會明確劃分出城市,區域,街道等因素來幫助用戶快速輸入以及檢查是否出錯。

寫在最後

很多情況下原則以及融入了我們的設計直覺之中,即使說不出來但是做的時候也會遵循。但是瞭解原則的原理對於向別人闡述自己的設計會有很大的幫助。

原則的使用因人而異,正如開頭所說的原則可以輔助我們設計,保證設計不犯一些顯然易見的錯誤。很多場景下也會出現多原則交叉使用的情況。

Powered by Froala Editor

相關文章