產(chǎn)品設(shè)計(jì)方法論:實(shí)戰(zhàn)用戶體驗(yàn)五要素,“下拉菜單”不簡單!
本文以 MAC 系統(tǒng)的下拉菜單來作為案例,看看我們在一個(gè)簡單的控件設(shè)計(jì)中看到了多少產(chǎn)品設(shè)計(jì)信息。
最近認(rèn)識(shí)了一個(gè)做心理醫(yī)生的朋友,相聊甚歡甚至有一種相見恨晚的感覺,然后他問了我一個(gè)問題:“你知道為什么我們這么聊得來么??!?/p>
我說:“這還不簡單,三觀一致唄?!?/p>
他的回答遠(yuǎn)遠(yuǎn)出乎我的意料:“并不是我和你的三觀真的一致,而是我讓你感覺我的三觀和你一致”。
這讓我一楞,他和我詳細(xì)解釋了一下。他有一種超能力,他可以在與人社交時(shí)不自覺的進(jìn)行一種“黑客行為”:他可以讓對(duì)方的防御心理瞬間瓦解,讓對(duì)方突然之間產(chǎn)生一種熟悉感,完全處于不設(shè)防甚至擁抱的狀態(tài)。
這可太讓我好奇了,忍不住追問他到底是如何獲得這種能力的。抵擋不住我的軟磨硬泡,他告訴我這種能力并不是先天得到的,而是后天磨練出來的。中國人太重面子了,他們在面對(duì)心理醫(yī)生的時(shí)候總喜歡遮遮掩掩,不愿意說真話。但心理醫(yī)生一定要能讓病人敞開心扉,說出自己的真實(shí)情況。
基于這個(gè)原因,他只能訓(xùn)練自己這項(xiàng)特殊能力,學(xué)會(huì)去通過穿著、行為、談吐等信息,去尋找每個(gè)人藏在內(nèi)心中真正的東西。剛開始這的確很困難,但當(dāng)他看了10個(gè)人、100個(gè)人、1000個(gè)人之后,他就擁有了這個(gè)超能力。
他的這番話,不禁讓我想起我剛進(jìn)入產(chǎn)品經(jīng)理這個(gè)行業(yè)的時(shí)候。我們都知道,產(chǎn)品經(jīng)理是一個(gè)很神奇的職位,設(shè)計(jì)、運(yùn)營、開發(fā)甚至剛畢業(yè)的任意專業(yè)的應(yīng)屆生都可以擔(dān)任這個(gè)職位,這就意味著在產(chǎn)品經(jīng)理的中低級(jí)職稱是沒有入職能力的門檻和標(biāo)準(zhǔn)的。一個(gè)沒有門檻和標(biāo)準(zhǔn)的職位能力要怎么提升?那就成了每個(gè)剛?cè)胄械漠a(chǎn)品經(jīng)理急需解決的問題。
很多產(chǎn)品經(jīng)理剛開始就喜歡去看文章、聽課程,不是說這樣不好,而是當(dāng)我們在面對(duì)一篇文章或課程時(shí),不同人捕捉到的信息和內(nèi)容是不一樣的。你能捕捉到多少信息取決于你對(duì)文章里提到的場景的感知。如果沒有經(jīng)歷過這種場景,你的產(chǎn)品認(rèn)知就處于一種天然的粗糙狀態(tài),對(duì)大量潛伏在這個(gè)場景中的微信息和隱藏信息都沒有任何感知。
所以,我認(rèn)為作為產(chǎn)品經(jīng)理剛開始應(yīng)該要反復(fù)去體驗(yàn)大廠的一些成熟產(chǎn)品(最好是競品),去摸索每個(gè)頁面、每個(gè)控件、每個(gè)元素中隱含的產(chǎn)品設(shè)計(jì)以此來塑造、激活、強(qiáng)化、優(yōu)化我們產(chǎn)品能力的毛細(xì)血管,只有這樣,這些毛細(xì)血管般的能力才可能整整形成我們自己的競爭力。
今天我們就拿 MAC 系統(tǒng)的下拉菜單來作為案例,看看我們在一個(gè)簡單的控件設(shè)計(jì)中看到了多少產(chǎn)品設(shè)計(jì)信息。
為什么要挑選下拉菜單這個(gè)組件?相信大家都了解過用戶體驗(yàn)五要素,而下拉菜單這個(gè)控件涉及了所有五個(gè)要素,拿它作為案例來說明可以更具有代表性。
戰(zhàn)略層&范圍層
戰(zhàn)略層講的是產(chǎn)品目標(biāo)和用戶需求。首先,我們要弄明白為什么要選用下拉菜單這個(gè)控件。
從用戶需求上看,用戶并不會(huì)提出要使用一個(gè)下拉菜單,因?yàn)橛脩艨赡芨静恢老吕藛问莻€(gè)什么東西。用戶需求是能夠快速的找到或使用他需要的功能,而在這一點(diǎn)上產(chǎn)品目標(biāo)其實(shí)和用戶需求是一致的。但作為產(chǎn)品我們還需要考慮公司自己本身的業(yè)務(wù)因素,所以我們進(jìn)入到下一步范圍層的設(shè)計(jì)。
范圍層就是在明確我們需要做哪些功能、以及怎么做來滿足用戶的需求,要知道要讓用戶快速找到自己想要的功能是有很多種實(shí)現(xiàn)方式的。
我們舉一些例子:解讀用戶的腦電波直接打開相應(yīng)的功能、給一個(gè)搜索框用戶直接搜索、平鋪所有的操作讓用戶遍歷…我們要想辦法綜合考慮成本與效率找到一種性價(jià)比最高的實(shí)現(xiàn)方式。而我們的解決方案是使用MAC自帶的下拉菜單,為什么?主要有以下幾個(gè)原因:
- 下拉菜單控件能滿足用戶需求與產(chǎn)品目標(biāo);
- 開發(fā)成本低,直接調(diào)用即可;
- 針對(duì)這個(gè)場景,用戶習(xí)慣已經(jīng)養(yǎng)成,學(xué)習(xí)成本低。
并且MAC的下拉控件設(shè)計(jì)的較為成熟,很多細(xì)分下的場景都有相應(yīng)的功能可以滿足,比如:
- 操作的快捷調(diào)用
- 操作的禁用
- 操作的級(jí)聯(lián)
- …
整體而言,在沒有找到更合適的解決方案前,我們就擬定使用下拉菜單這個(gè)控件來解決用戶需求,那接下來我們進(jìn)入結(jié)構(gòu)層面。
結(jié)構(gòu)層
在結(jié)構(gòu)層主要定義的是我們的功能最終呈現(xiàn)給用戶的產(chǎn)品結(jié)構(gòu)與信息架構(gòu),在這一步我們開始將用戶的需求具化為產(chǎn)品設(shè)計(jì)。我們回到戰(zhàn)略層的目標(biāo),快速的找到或使用他需要的功能。要知道下拉菜單的主要功能是:
當(dāng)頁面上的操作命令過多時(shí),用此組件可以收納操作元素。點(diǎn)擊或移入觸點(diǎn),會(huì)出現(xiàn)一個(gè)下拉菜單??稍诹斜碇羞M(jìn)行選擇,并執(zhí)行相應(yīng)的命令。
如果我們只是將所有的操作隨意的丟在一個(gè)下拉菜單里,這肯定是完全無法達(dá)到戰(zhàn)略層的要求的,那我們怎么辦?
首先,我們要先將這些操作自身的特性進(jìn)行合理歸類。
為什么要這么做?因?yàn)槲覀內(nèi)祟悓ふ倚畔⒌姆绞绞菢錉畹?,我們?huì)先去找到大的品類(樹中最粗的枝干),以此順延不斷細(xì)分(最粗枝干上的小枝干),直到定位到自己需要的信息。我們來看一個(gè)案例:
從這個(gè)案例中我們可以看到,你看到了至少幾個(gè)層級(jí)?我看到的是至少3.5個(gè),我們以“編輯”為例:
- 第1層級(jí):編輯等操作;
- 第2層級(jí):撤銷等操作;
- 第2.5層級(jí):撤銷與重做(頁面上做了區(qū)分但是交互上并沒有進(jìn)入下一層級(jí));
- 第3層層級(jí):搜索后續(xù)的延伸操作;
- 更多層級(jí):搜索后續(xù)的延伸操作的后續(xù)操作(可能不存在)。
當(dāng)我們將操作分類完成之后,我們的產(chǎn)品結(jié)構(gòu)設(shè)計(jì)就結(jié)束了嗎?
答案是否定的,雖然我們進(jìn)行了合理的歸類,但是針對(duì)新用戶甚至一些老用戶,他們?nèi)绻荒芨鶕?jù)自己的認(rèn)知找到相應(yīng)的操作,那我們的設(shè)計(jì)也是失敗的。所以我們還需要引入一套信息加工系統(tǒng),建立用戶能夠認(rèn)知的索引,通過這套系統(tǒng)我們可以盡可能的縮小用戶對(duì)產(chǎn)品路徑的認(rèn)知差。
舉個(gè)現(xiàn)實(shí)中的案例,以前我出遠(yuǎn)門時(shí)總會(huì)忘記點(diǎn)東西,要么是身份證、要么是鑰匙。但自從我記住了’身手鑰錢’四字真言后,雖然我的記憶力并沒有提高,但我再出門的時(shí)候就沒有忘記過這最重要的四樣?xùn)|西。
在下拉菜單中的索引就是我們針對(duì)于每一個(gè)層級(jí)分類的命名,比如’編輯’、’查看’等等,針對(duì)每一個(gè)命名我們都需要深思熟慮,明確它們能成為用戶使用產(chǎn)品的風(fēng)向標(biāo)。
框架層
完成了結(jié)構(gòu)層的設(shè)計(jì)后,用戶能夠通過索引用最少的操作步驟就找到相應(yīng)的操作,我們的產(chǎn)品設(shè)計(jì)到這里就結(jié)束了嘛?大家想一下,雖然你的產(chǎn)品結(jié)構(gòu)的很清晰、索引命名很合理,但用戶可能也要遍歷過你每一層的結(jié)構(gòu)后才知道如何進(jìn)入下一層。
以下圖為例,用戶希望找一個(gè)“幫助”下一級(jí)的操作,可能就需要遍歷“文件”、“編輯”、“查看”等等。
類似的問題怎么解決?再次回到我們的戰(zhàn)略目標(biāo)(大家一定不能忘記產(chǎn)品設(shè)計(jì)的初衷),快速的找到或使用他需要的功能。如果我們能盡可能的讓用戶減少遍歷的次數(shù),降低用戶的使用成本,就可以無限貼近于我們的戰(zhàn)略目標(biāo)。這時(shí)候,我們就進(jìn)入了框架層的設(shè)計(jì)。
框架層是用于優(yōu)化頁面設(shè)計(jì)布局的,我們要明確哪些元件該放在什么位置。熟悉網(wǎng)頁視覺設(shè)計(jì)的朋友可能知道,我們?yōu)g覽信息的習(xí)慣是從左上往右下。我們將最高頻的功能放至左上,將最低頻的功能放至右下,就可以有效的減少用戶遍歷的次數(shù)。
這里的案例我們就不再枚舉,我放兩張圖上來大家可以從框架層設(shè)計(jì)上來解讀下,為何快捷鍵的說明要放到文字后,而圖標(biāo)卻要放在文字前。
表現(xiàn)層
從戰(zhàn)略到框架,很多產(chǎn)品經(jīng)理認(rèn)為自己的工作已經(jīng)完成了,至于表現(xiàn)層,那應(yīng)該是設(shè)計(jì)師們應(yīng)該考慮的東西。但我們要知道離用戶最近的其實(shí)就是表現(xiàn)層,這包含著視覺、聽覺、觸覺的體驗(yàn)設(shè)計(jì)。一個(gè)好的表現(xiàn)層設(shè)計(jì),能夠進(jìn)一步的幫助我們達(dá)成戰(zhàn)略目標(biāo)。就像蘋果前 CEO 喬布斯對(duì) iphone 的設(shè)計(jì)挑剔到了不可思議的程度,只有這樣精益求精的人才能做出一款改變世界的產(chǎn)品。
當(dāng)然作為非設(shè)計(jì)出身的產(chǎn)品經(jīng)理,我這里只能拋磚引玉來簡單說一個(gè)關(guān)于下拉菜單的表現(xiàn)層設(shè)計(jì)。
當(dāng)用戶點(diǎn)擊或 hover “服務(wù)”時(shí),用戶的場景已經(jīng)比較明確(拋開誤操作的可能性),用戶將聚焦于服務(wù)下一層級(jí)的操作進(jìn)行展開,這時(shí)通過將“服務(wù)偏好設(shè)置”對(duì)話框適當(dāng)覆蓋“服務(wù)”對(duì)話框的邊緣并添加相應(yīng)的陰影,這可以讓兩個(gè)對(duì)話框有層次遞進(jìn)感,使’服務(wù)偏好設(shè)置’的顯示優(yōu)先級(jí)更高,減少用戶在“服務(wù)”對(duì)話框的注意力損耗。
今天的分享就到這里,希望能對(duì)大家有所幫助。
#專欄作家#
Pirate,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注前沿科技與教育行業(yè),擅長產(chǎn)品設(shè)計(jì)與數(shù)據(jù)分析。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
“如果沒有經(jīng)歷過這種場景,你的產(chǎn)品認(rèn)知就處于一種天然的粗糙狀態(tài),對(duì)大量潛伏在這個(gè)場景中的微信息和隱藏信息都沒有任何感知?!?/p>
深有體會(huì) ??
??