淺談“設置”場景:為永遠的新手用戶而設計

3周帶你玩轉Excel!在行第一行家手把手帶學+作業實戰+答疑輔導,升職加薪快人一步,了解一下>>

設置是產品中非常邊緣的一個???,但并不是可以不經思考就進行處置的?!安黃鷓邸鋇納柚帽澈笠燦幸惶咨杓坡嘸?,值得我們深入挖掘。

一、“設置(Settings)”是什么

在產品設計中,設置(Settings)可能是最容易被人忽視和輕視的一塊內容。無論是非常之低的使用頻次,還是次之又次的優先等級,都使“設置”看起來像一個“不需要設計”的角落。

然而,“設置”是幾乎所有產品都難以回避的一個???,它的應用范圍可能比我們想象的要廣泛得多。無論是操作系統、軟件、網站,甚至是各種硬件設備,都有著一個允許用戶自由定義產品的底層???,幫助產品更好地適應每個人不同的需求,這就是我們熟悉又陌生的“設置(Settings)”了。

生活中的“設置”

生活中的“設置”

為什么是熟悉又陌生的“設置”呢?

熟悉,在于“小齒輪”形狀的icon已經如此深入人心。而陌生,一方面是用戶很少使用設置功能、很難預知完成任務的操作方法(想一想,你能夠背出“更改手機時區”的操作路徑么?);另一方面,設計者對設置??櫚難芯坑肜斫庖簿J遣蛔愕?。

正因如此,我們生活中不乏各種各樣糟糕的“設置”設計——理論上能讓用戶實現隨心所欲、自由度極高的定制化操作,實際上卻仿佛把一架最新型號的戰斗機隨意丟給普通人一樣,自帶一種“看不懂就別亂動”的威嚴氣場。

糟糕的“設置”界面

糟糕的“設置”界面

怎樣的“設置”才是滿足用戶需要的呢?我們首先要從“設置”的用戶特點開始分析。

二、“設置”場景的用戶:永遠的新手用戶

眾所周知,判斷用戶操作系統的熟練程度和經驗(即判斷用戶是新手用戶還是高級用戶),是繪制用戶畫像(Persona)中的重要一環,同時也是進行實操設計的基石。對于新手用戶和高級用戶,產品往往要提供截然不同的交互方式。

一個典型的例子是網站代碼編輯器Dreamweaver,不僅為熟悉前端代碼的高級用戶提供了代碼編輯功能,同時也考慮到了編程小白的需求,提供了可視化的網頁制作功能。

Dreamweaver交互界面,兼顧新手與熟練用戶的需求

Dreamweaver交互界面,兼顧新手與熟練用戶的需求

那么,言歸正傳,“設置”??櫚撓沒Ь烤故切率鐘沒Щ故歉嘸隊沒??

我們很容易在這里走進一個誤區,認為會使用“自定義”、“個性化”這些復雜功能的,一定是高級用戶了。更何況,“設置”中通?;褂小案嘸渡柚謾閉庖桓齜擲?,顧名思義,肯定只有小部分專家級用戶才會用到這個功能了?

Chrome瀏覽器的設置,點擊“高級”可以展開更多設置項

的確,使用到“設置”這個功能的,有很大概率是這款產品的重度用戶了。然而,由于需要使用到“設置”的頻次非常之低,更改設置的周期也非常長,用戶很難向熟悉產品那樣,逐步習得完成任務的路徑與方法。從這層意義上來說,即使是對產品非常熟悉的用戶,對于“設置”這個??槎?,也依然是新手用戶,甚至永遠是新手用戶。

以我自己身上發生的事情為例——我用微信已經6年了,不僅能玩轉各種社交和支付功能,還用過各種各樣的小程序,可以說得上是典型的熟練用戶了。

一次,旁人告訴我,微信是可以自定義發現頁的內容的(我自己根本發現不了),于是我關閉了“漂流瓶”功能,因為我從來用不到它。然而過了半年左右,由于需要研究陌生人社交的一些交互方式,我想重新找回“漂流瓶”試一試,結果不難想象:我姑且是完成了任務,但此前的經驗派不上一點用場,探索的過程中伴隨著迷失和疑惑。

微信的“發現頁管理”路徑

微信的“發現頁管理”路徑

三、“設置”??檣杓頻囊?/h2>

在論證了“設置”??櫚撓沒в澇妒切率鐘沒е?,我們接下來看看“設置”??檣杓頻囊閿胱⒁饈孿?。這些小Tips是基于以下兩個事實而進行推導和提煉的:

第一,“設置”??櫚撓沒切率鐘沒?,新手用戶需要導航與交互方式更符合邏輯、任務步驟更循序漸進,而快捷與效率是其次的需要。

初學者更多地傾向于選項最少的結構性互動,這種互動通常有提示、限制、協助等幫助,形成特定的控制模式。熟練應用者則喜歡結構性、步驟性不是很強的互動,跳過一些特定的步驟和幫助,直接切入功能得到結果?!鍛ㄓ蒙杓品ㄔ頡?/p>

第二,“設置”是對產品進行相對底層的控制,是有一定使用門檻的。如果產品是一輛車,那么“設置”就是車的底盤,許多老司機也沒有親自檢修過。

“設置”之于產品,相當于底盤之于汽車

“設置”之于產品,相當于底盤之于汽車

在這種情況下,對“設置”進行化繁為簡的優化是有一定限度的。簡約四策略中的刪除、組織、隱藏、轉移,幾乎可以說只?!白櫓焙汀耙亍蹦芄皇視?。

在承認以上兩個前提條件的基礎上,我總結了下面幾個“設置”??檣杓頻囊悖?/p>

1. 根據信息體量規劃信息架構

在處理任何更細致的交互問題之前,我們必須對“設置”??檎宓男畔⒓芄褂幸桓齪俠淼墓婊?,這一點即包括“設置”應當位于整體產品的哪一個層級(用戶如何觸達“設置”???,也包括“設置”內部的導航設計與信息結構?!吧柚謾鋇男畔⒓芄鼓J?,主要是由“設置”在產品中的重要程度,以及“設置”內部的信息體量決定的。

當“設置”的重要程度不高、體量相對輕時,下拉框導航+彈窗的形式就可以解決承載所有的信息。這種交互方式的優勢在于減少頁面跳轉,減輕層級深度。

百度搜索的設置

百度搜索的設置

但當“設置”的信息非常復雜、體量很大的時候,就不應該吝惜頁面跳轉了,“設置”可以被視作擁有獨立場景的獨立??椋ㄉ踔聊持忠庖逕系淖硬罰├瓷杓?。

例如,Google Calendar在進入設置??楹?,只在頂欄留了返回產品主界面的鏈接,而一級側邊導航則是完全獨立于日歷功能、僅為“設置”這個特殊場景服務的。

Google Calendar的設置

Google Calendar的設置

而Gmail在處理“設置”時,可能是為了減少頁面跳轉的感覺、力求信息更加扁平,僅在“郵件展示區”替換了“設置”的內容,保留郵件應用的頂導、側導、快捷功能,但實際效果非常不盡如人意。設置信息的分類只能利用視覺上很弱的三級導航(tab導航)來梳理,而 tab作為導航時,對于入口個數、標題名長度都是有要求和限制的,其實非常不適合Gmail設置的場景。

Gmail的設置

Gmail的設置

Gmail的案例再一次證明了,缺乏分析地減少層級、將信息架構“拍扁”,是無法讓信息更清晰的。

“設置”內部的信息架構設計同樣值得思考,其重點在于導航的規劃,我們需要在信息的深度和廣度之間做好平衡。

導航的深度與廣度

導航的深度與廣度

在很多情況下,需要設置的內容經常是零散的、彼此之間關聯不強的,對這些內容進行分類整理從來不是一件易事。而設計師很容易陷入的一個誤區是把所有“不知道怎么歸類”的信息,一股腦丟到“通用”、“常規”或“高級”里。

Gmail的設置再次貢獻了一個反例——由于“常規”欄目下沒有更詳細的分類,整個頁面的信息量非常冗雜,用戶完全無法快速找到自己需要的內容?!氨嗉始┟筆且桓魷嗟背S玫墓δ?,然而在Gmail中,用戶需要在“設置-常規”欄目下,滾動到至少第三屏才能找到它的位置。

Gmail的常規設置

Gmail的常規設置

改善這個問題的方案其實并不復雜。139郵箱的設置??櫓?,在“常規設置”下還有更詳細的二級導航,盡管頁面很長,但導航提供了一個很好的“概覽”功能。在這個場景下,擴展性強的側邊導航優勢非常明顯。

139郵箱的設置

139郵箱的設置

另一個可行的方案是善用信息的“折疊”與“展開”、例如新浪微博的消息設置中,“@我的”、“評論”、“贊”、“私信”等不同的消息類型都是折疊起來的,僅外顯標題,只有當用戶點擊“編輯”時,才會展開相應的區域。

新浪微博的設置

新浪微博的設置

但這種方式也有使用的限制條件,只有當設置項比較容易理解、用戶對需要編輯的內容比較熟悉的時候,大面積隱藏信息才是適用的。

2. 適當的說明與提示

“界面設計中是否需要提供足夠的說明與提示”——這個問題經常是富有爭議的。

一方面,人們常常說起,“好的產品不需要說明書”、“好的導航能夠自我解釋”、“設計需要不言自明”;另一方面,著名的尼爾森10項可用性原則又指出,“幫助及使用文檔是必要的”。

尼爾森10項可用性原則

尼爾森10項可用性原則

那么,在“設置”中應當如何平衡這個問題呢?

考慮到我們上文已經提到的,“設置”的用戶是永遠的新手用戶,且設置的內容對于用戶是有一定難度的,我們可以認為,在“設置”??櫓?,說明與提示出現的概率要更高,遠遠高于產品的主體功能??椋茨切┯沒Э梢栽諤剿髦謝竦美秩?、在反復使用中漸漸熟悉的功能)。

因此,在設計“設置”??櫚男畔⑹?,需要格外考慮說明與提示的信息是否充足,而不要輕易以為“用戶能夠理解這些”。

例如,Google賬號的設置??櫓?,不僅出現了大量的介紹說明文案,還給出了生動的配圖,加深用戶對信息的理解。

Google 賬戶的設置

Google 賬戶的設置

另外,在進行解釋說明時,圖片傳遞信息的能力往往比文字更強。下圖為華為榮耀電視盒子的“播放設置”界面,“音視頻輸出方式”對于大多數用戶都是難以理解的,但通過配圖,我們可以理解到,它與硬件線路的鏈接方式有關。

榮耀盒子的播放設置

榮耀盒子的播放設置

圖像提示的衍生物就是“預覽”功能。用戶穿梭在一系列設置表單之間,只能看到各種各樣的下拉菜單、Radio(單?。┯隒heckBox(多?。?,但變更選項后,真正生效的位置卻非常遙遠。在這種背景下,以可視化的方式告訴用戶,你到底更改了什么,就非常有意義了。

在QQ中,用戶可以自定義聊天區域的視覺樣式,當更改對話氣泡的顏色時,預覽區域會立刻展示新的效果。

QQ的設置

QQ的設置

3. 聰明的默認值

設置中的選項將對整個產品、平臺與系統產生影響,并且對于絕大多數用戶來說,初始狀態的默認選項將會一直沿用下去。因此,選擇聰明的默認值就是至關重要的了。要做到這一點,設計師一方面需要對用戶的使用習慣非常了解,另一方面需要業務需求,即怎樣的設置對業務有利。

例如,幾乎所有電商平臺都會在消息設置中默認打開全部類型的消息推送,以增加產品的曝光率。

淘寶的消息設置

淘寶的消息設置

4. 交互方式的抉擇:表單提交與即時生效

“設置”??榛臼怯梢幌盜斜淼プ楹隙傻?,那么勢必就存在一個問題:在設置中更改選項時,是即時生效比較好,還是提交表單時統一生效比較好?

這一點我們可以從業務需要和用戶認知這兩個層面來進行考慮:

首先,業務需要是必須最優先考慮的?!吧柚謾弊魑刂葡低車牡撞悴僮?,很有可能牽一發而動全身。一些設置項的變更可能會帶來試錯成本,甚至產生嚴重的后果。對于這種設置項,我們要慎用“實時生效”。多點一次“提交”,甚至要求二次確認,都能更高地防止出錯。

其次,由于表單提交和即時生效這兩種交互方式都非常常見,用戶在面臨設置項時,就天然地存在一種認知壓力(疑惑是即時生效還是需要提交表單)。于是,我們需要通過設計,明白準確地將這個信息傳達給用戶,消解這種壓力。

我們可以對比幾個案例:

a.在網易云音樂的設置頁,用戶點擊控件切換選項后,新的選擇立即生效,頁面底部沒有“提交”或“重置”按鈕。但是,由于切換選項時頁面沒有任何反饋,使用者很容易產生困惑,會想要到頁面底部確認一下。

網易云音樂的設置

網易云音樂的設置

b.Mac系統的設置,在每個子欄目下,設置項都控制在了一屏以內,且對話框底部沒有統一提交的按鈕。盡管調整部分選項后,什么也沒有發生,用戶依然能夠感知到,這些選項已經生效了。

Mac系統的設置-通用

Mac系統的設置-通用

c.在QQ郵箱中,設置頁的內容量大、頁面較長,底部有一個明顯的懸浮低欄,提示用戶需要保存更改。

QQ郵箱的設置

QQ郵箱的設置

不難看出,當表單信息在一屏以內時,無論是即時生效,還是需要多一個“提交”的步驟,用戶都是能夠理解。但當表單內容超出一屏時,疑惑就隨之產生了,比較好的方案是讓“提交”或“保存”按鈕以懸浮的方式常駐于頁面底部,而不是需要滾動到頁面最下方才看到。

最后,還有一點細節問題值得討論:交互控件本身也有“即時生效”與“提交后生效”兩種傾向,這種分類是與控件隱喻的實物原型相關的。

例如,按鈕(Button)、開關(Switch)、滑塊(Slider)就有很強的“即時生效”隱喻;而當人們看到下拉框(Select)、文本輸入框(Input),就會下意識地尋找“提交”按鈕。

“即時生效”的控件

“即時生效”的控件

四、結語

設置是產品中非常邊緣的一個???,但并不是可以不經思考就進行處置的?!安黃鷓邸鋇納柚帽澈笠燦幸惶咨杓坡嘸?,值得我們深入挖掘。

 

本文由 @?leadwhite 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
1人打賞
評論
歡迎留言討論~!
  1. 謝謝分享

    回復
  2. 深受啟發啦

    回復
  3. 寫得真棒

    回復