產品設計方法論:實戰用戶體驗五要素,“下拉菜單”不簡單!

2 評論 5260 瀏覽 25 收藏 14 分鐘

本文以 MAC 系統的下拉菜單來作為案例,看看我們在一個簡單的控件設計中看到了多少產品設計信息。

最近認識了一個做心理醫生的朋友,相聊甚歡甚至有一種相見恨晚的感覺,然后他問了我一個問題:“你知道為什么我們這么聊得來么?。”

我說:“這還不簡單,三觀一致唄。”

他的回答遠遠出乎我的意料:“并不是我和你的三觀真的一致,而是我讓你感覺我的三觀和你一致”。

這讓我一楞,他和我詳細解釋了一下。他有一種超能力,他可以在與人社交時不自覺的進行一種“黑客行為”:他可以讓對方的防御心理瞬間瓦解,讓對方突然之間產生一種熟悉感,完全處于不設防甚至擁抱的狀態。

這可太讓我好奇了,忍不住追問他到底是如何獲得這種能力的。抵擋不住我的軟磨硬泡,他告訴我這種能力并不是先天得到的,而是后天磨練出來的。中國人太重面子了,他們在面對心理醫生的時候總喜歡遮遮掩掩,不愿意說真話。但心理醫生一定要能讓病人敞開心扉,說出自己的真實情況。

基于這個原因,他只能訓練自己這項特殊能力,學會去通過穿著、行為、談吐等信息,去尋找每個人藏在內心中真正的東西。剛開始這的確很困難,但當他看了10個人、100個人、1000個人之后,他就擁有了這個超能力。

他的這番話,不禁讓我想起我剛進入產品經理這個行業的時候。我們都知道,產品經理是一個很神奇的職位,設計、運營、開發甚至剛畢業的任意專業的應屆生都可以擔任這個職位,這就意味著在產品經理的中低級職稱是沒有入職能力的門檻和標準的。一個沒有門檻和標準的職位能力要怎么提升?那就成了每個剛入行的產品經理急需解決的問題。

很多產品經理剛開始就喜歡去看文章、聽課程,不是說這樣不好,而是當我們在面對一篇文章或課程時,不同人捕捉到的信息和內容是不一樣的。你能捕捉到多少信息取決于你對文章里提到的場景的感知。如果沒有經歷過這種場景,你的產品認知就處于一種天然的粗糙狀態,對大量潛伏在這個場景中的微信息和隱藏信息都沒有任何感知。

所以,我認為作為產品經理剛開始應該要反復去體驗大廠的一些成熟產品(最好是競品),去摸索每個頁面、每個控件、每個元素中隱含的產品設計以此來塑造、激活、強化、優化我們產品能力的毛細血管,只有這樣,這些毛細血管般的能力才可能整整形成我們自己的競爭力。

今天我們就拿 MAC 系統的下拉菜單來作為案例,看看我們在一個簡單的控件設計中看到了多少產品設計信息。

為什么要挑選下拉菜單這個組件?相信大家都了解過用戶體驗五要素,而下拉菜單這個控件涉及了所有五個要素,拿它作為案例來說明可以更具有代表性。

戰略層&范圍層

戰略層講的是產品目標和用戶需求。首先,我們要弄明白為什么要選用下拉菜單這個控件。

從用戶需求上看,用戶并不會提出要使用一個下拉菜單,因為用戶可能根本不知道下拉菜單是個什么東西。用戶需求是能夠快速的找到或使用他需要的功能,而在這一點上產品目標其實和用戶需求是一致的。但作為產品我們還需要考慮公司自己本身的業務因素,所以我們進入到下一步范圍層的設計。

范圍層就是在明確我們需要做哪些功能、以及怎么做來滿足用戶的需求,要知道要讓用戶快速找到自己想要的功能是有很多種實現方式的。

我們舉一些例子:解讀用戶的腦電波直接打開相應的功能、給一個搜索框用戶直接搜索、平鋪所有的操作讓用戶遍歷…我們要想辦法綜合考慮成本與效率找到一種性價比最高的實現方式。而我們的解決方案是使用MAC自帶的下拉菜單,為什么?主要有以下幾個原因:

  • 下拉菜單控件能滿足用戶需求與產品目標;
  • 開發成本低,直接調用即可;
  • 針對這個場景,用戶習慣已經養成,學習成本低。

并且MAC的下拉控件設計的較為成熟,很多細分下的場景都有相應的功能可以滿足,比如:

  • 操作的快捷調用
  • 操作的禁用
  • 操作的級聯

整體而言,在沒有找到更合適的解決方案前,我們就擬定使用下拉菜單這個控件來解決用戶需求,那接下來我們進入結構層面。

結構層

在結構層主要定義的是我們的功能最終呈現給用戶的產品結構與信息架構,在這一步我們開始將用戶的需求具化為產品設計。我們回到戰略層的目標,快速的找到或使用他需要的功能。要知道下拉菜單的主要功能是:

當頁面上的操作命令過多時,用此組件可以收納操作元素。點擊或移入觸點,會出現一個下拉菜單??稍诹斜碇羞M行選擇,并執行相應的命令。

如果我們只是將所有的操作隨意的丟在一個下拉菜單里,這肯定是完全無法達到戰略層的要求的,那我們怎么辦?

首先,我們要先將這些操作自身的特性進行合理歸類。

為什么要這么做?因為我們人類尋找信息的方式是樹狀的,我們會先去找到大的品類(樹中最粗的枝干),以此順延不斷細分(最粗枝干上的小枝干),直到定位到自己需要的信息。我們來看一個案例:

從這個案例中我們可以看到,你看到了至少幾個層級?我看到的是至少3.5個,我們以“編輯”為例:

  • 第1層級:編輯等操作;
  • 第2層級:撤銷等操作;
  • 第2.5層級:撤銷與重做(頁面上做了區分但是交互上并沒有進入下一層級);
  • 第3層層級:搜索后續的延伸操作;
  • 更多層級:搜索后續的延伸操作的后續操作(可能不存在)。

當我們將操作分類完成之后,我們的產品結構設計就結束了嗎?

答案是否定的,雖然我們進行了合理的歸類,但是針對新用戶甚至一些老用戶,他們如果不能根據自己的認知找到相應的操作,那我們的設計也是失敗的。所以我們還需要引入一套信息加工系統,建立用戶能夠認知的索引,通過這套系統我們可以盡可能的縮小用戶對產品路徑的認知差。

舉個現實中的案例,以前我出遠門時總會忘記點東西,要么是身份證、要么是鑰匙。但自從我記住了’身手鑰錢’四字真言后,雖然我的記憶力并沒有提高,但我再出門的時候就沒有忘記過這最重要的四樣東西。

在下拉菜單中的索引就是我們針對于每一個層級分類的命名,比如’編輯’、’查看’等等,針對每一個命名我們都需要深思熟慮,明確它們能成為用戶使用產品的風向標。

框架層

完成了結構層的設計后,用戶能夠通過索引用最少的操作步驟就找到相應的操作,我們的產品設計到這里就結束了嘛?大家想一下,雖然你的產品結構的很清晰、索引命名很合理,但用戶可能也要遍歷過你每一層的結構后才知道如何進入下一層。

以下圖為例,用戶希望找一個“幫助”下一級的操作,可能就需要遍歷“文件”、“編輯”、“查看”等等。

類似的問題怎么解決?再次回到我們的戰略目標(大家一定不能忘記產品設計的初衷),快速的找到或使用他需要的功能。如果我們能盡可能的讓用戶減少遍歷的次數,降低用戶的使用成本,就可以無限貼近于我們的戰略目標。這時候,我們就進入了框架層的設計。

框架層是用于優化頁面設計布局的,我們要明確哪些元件該放在什么位置。熟悉網頁視覺設計的朋友可能知道,我們瀏覽信息的習慣是從左上往右下。我們將最高頻的功能放至左上,將最低頻的功能放至右下,就可以有效的減少用戶遍歷的次數。

這里的案例我們就不再枚舉,我放兩張圖上來大家可以從框架層設計上來解讀下,為何快捷鍵的說明要放到文字后,而圖標卻要放在文字前。

表現層

從戰略到框架,很多產品經理認為自己的工作已經完成了,至于表現層,那應該是設計師們應該考慮的東西。但我們要知道離用戶最近的其實就是表現層,這包含著視覺、聽覺、觸覺的體驗設計。一個好的表現層設計,能夠進一步的幫助我們達成戰略目標。就像蘋果前 CEO 喬布斯對 iphone 的設計挑剔到了不可思議的程度,只有這樣精益求精的人才能做出一款改變世界的產品。

當然作為非設計出身的產品經理,我這里只能拋磚引玉來簡單說一個關于下拉菜單的表現層設計。

當用戶點擊或 hover “服務”時,用戶的場景已經比較明確(拋開誤操作的可能性),用戶將聚焦于服務下一層級的操作進行展開,這時通過將“服務偏好設置”對話框適當覆蓋“服務”對話框的邊緣并添加相應的陰影,這可以讓兩個對話框有層次遞進感,使’服務偏好設置’的顯示優先級更高,減少用戶在“服務”對話框的注意力損耗。

今天的分享就到這里,希望能對大家有所幫助。

#專欄作家#

Pirate,人人都是產品經理專欄作家。關注前沿科技與教育行業,擅長產品設計與數據分析。

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

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. “如果沒有經歷過這種場景,你的產品認知就處于一種天然的粗糙狀態,對大量潛伏在這個場景中的微信息和隱藏信息都沒有任何感知。”

    深有體會 ??

    來自浙江 回復
  2. ??

    回復