編輯導(dǎo)讀：手風(fēng)琴菜單常常在多級目錄中使用，是系統(tǒng)設(shè)計(jì)中常見的設(shè)計(jì)之一。在實(shí)際應(yīng)用設(shè)計(jì)中，我們應(yīng)該使用哪個(gè)圖標(biāo)icon才能更好地示意手風(fēng)琴菜單可以展開更多內(nèi)容這個(gè)含義呢？本文作者對這個(gè)問題展開了分析探討，一起來看看~

01 什么是手風(fēng)琴Accordion？

在移動(dòng)設(shè)備上，手風(fēng)琴（Accordion）/折疊菜單是必不可少的工具，因?yàn)樗鼈兛梢哉郫B內(nèi)容并使頁面長度易于管理，即使在 PC 端的頁面上，它們也可以減輕視覺復(fù)雜性。

在我們的移動(dòng)用戶體驗(yàn)和 App 設(shè)計(jì)中經(jīng)常問到的一個(gè)問題是：我們應(yīng)該使用哪個(gè)圖標(biāo)icon來更好地示意此處可以展開更多內(nèi)容？

換句話說，手風(fēng)琴的最佳 icon是哪個(gè)？

我們決定對這個(gè)問題進(jìn)行調(diào)查，我們找到了幾種市面上正在使用的 icon 圖標(biāo)來表示手風(fēng)琴：

• 尖號（向下箭頭）
• 加號
• 右箭頭
• 空白

尖號（向下箭頭）

加號

箭頭

空白

我們決定嘗試進(jìn)行了一次調(diào)查，以找出這些 icon 中的哪一個(gè)最能示意想要表達(dá)的意思。

02 方法

1. 準(zhǔn)備工作

我們創(chuàng)建了 11 個(gè)移動(dòng)網(wǎng)站的原型，每個(gè)原型屬于不同的行業(yè)——包括了服裝電商，大型商超，汽車配件，金融，新聞，地方政府，高等教育， DIY 家庭項(xiàng)目，消費(fèi)品評論，醫(yī)療保健和旅行。

對于每個(gè)原型，我們創(chuàng)建了一個(gè)任務(wù)。例如，在消費(fèi)品評論網(wǎng)站的原型上，任務(wù)是“查看洗碗機(jī)評論”。

我們?yōu)槭诛L(fēng)琴 icon 創(chuàng)建了 5 個(gè)不同的樣式（如下圖），icon 將為所有項(xiàng)目的原型隨機(jī)分配，這意味著參與調(diào)研的用戶可以隨機(jī)看到。

或許已經(jīng)有人發(fā)現(xiàn)我們多了第 4 個(gè)箔icon（Foil，以下簡稱箔），是的，我們是想確認(rèn)一下，一個(gè)不那么相關(guān)的 icon 是否會(huì)影響到用戶的決策。

5 個(gè)不同的樣式的原型

我們將手風(fēng)琴 icon 放置在其相關(guān)菜單的最右側(cè)，靠近屏幕邊緣并且右對齊（最右側(cè)可規(guī)避由于菜單內(nèi)容的長度過長影響到用戶的觀看或點(diǎn)擊）。

2. 參與調(diào)研用戶

136 名參與調(diào)研的用戶，并確保所有參與者都看到了所有不同 icon 的實(shí)例（以不同的原型和不同的順序）。

將要調(diào)研的數(shù)據(jù)：

• 點(diǎn)擊位置：參與調(diào)研的用戶在頁面上點(diǎn)擊的位置（直接在菜單文本上點(diǎn)擊，在圖標(biāo)上點(diǎn)擊亦或在文本和圖標(biāo)之間的空白區(qū)域或在頁面上的其他任何地方）。
• 用戶預(yù)期的結(jié)果：對有關(guān)任務(wù)的期望值（直接進(jìn)入新頁面，在同一頁面上看到其他鏈接列表，或其他）。

3. 點(diǎn)擊的位置

當(dāng)有手風(fēng)琴 icon 時(shí)，用戶更傾向于點(diǎn)擊 icon 而不是文本內(nèi)容（對于所有其他 icon（如箭頭、加號），從統(tǒng)計(jì)上來看并沒有非常明顯的偏好）。

而當(dāng)沒有 icon 時(shí)，用戶的點(diǎn)擊呈現(xiàn)出了截然不同的結(jié)果。

當(dāng)沒有 icon時(shí)，用戶通常會(huì)點(diǎn)擊菜單文本處，當(dāng)有 icon 時(shí)，用戶更傾向于點(diǎn)擊 icon

這一發(fā)現(xiàn)一點(diǎn)都不令人感到驚訝，因?yàn)樵诓藛螞]有 icon 的場景下，“icon 區(qū)域”只是空白區(qū)域，用戶通常會(huì)選擇與有明顯指示符的位置進(jìn)行交互，如點(diǎn)擊菜單的文本區(qū)域。

4. 預(yù)期的結(jié)果

用戶對于頁面的預(yù)期，如留在當(dāng)前同一頁面還是轉(zhuǎn)到新頁面。

我們假定比率超過50％ 表示總體上人們期望進(jìn)入新頁面，但對于我們今天討論的手風(fēng)琴菜單場景下，我們想要傳達(dá)的是頁面不會(huì)改變，因此理想情況下，該比率應(yīng)低于50％。

對于箔 icon和無icon，用戶希望離開頁面

通過統(tǒng)計(jì)來看，對于標(biāo)準(zhǔn)指示器（尖號，加號），用戶并沒有強(qiáng)烈的期望離開當(dāng)前頁面。

而箭頭、箔紙可能并不太適用于做為手風(fēng)琴菜單的icon，用戶可能并不明白箔icon 代表著可折疊的意思。

03 結(jié)論

我們的假設(shè)是，沒有 icon 將會(huì)導(dǎo)致用戶期望點(diǎn)擊菜單會(huì)跳轉(zhuǎn)到新頁面，并且該假設(shè)在我們的數(shù)據(jù)中得到了驗(yàn)證。

同樣，假定箔icon對于用戶而言與手風(fēng)琴要表達(dá)的折疊菜單并沒有任何關(guān)聯(lián)，這也得到了驗(yàn)證。

• 用戶傾向于在 icon 上點(diǎn)擊，但仍有 29％ 的點(diǎn)擊落在菜單內(nèi)容上；
• 為手風(fēng)琴菜單創(chuàng)建新 icon 或根本不使用 icon 并不是一個(gè)好主意，因?yàn)樗鼈冞`反了用戶的預(yù)期（即將它們帶到新頁面）；
• 如果沒有 icon，則用戶傾向于點(diǎn)擊菜單文本，而不是該行中的空白（這表明用戶傾向于與有清晰指標(biāo)的內(nèi)容進(jìn)行交互）；

所以，根據(jù)以上調(diào)研結(jié)果，如果在移動(dòng)端菜單中使用手風(fēng)琴菜單，則使用尖號（向下箭頭） icon似乎是最安全的選擇；

請確定您的菜單操作是打開子菜單還是直接進(jìn)入類別頁面，如果您選擇使菜單項(xiàng)直接鏈接到登錄頁面，請不要使用右對齊的圖標(biāo)；

原文作者：Page Laubheimer、Raluca Budiu

原文鏈接：https://www.nngroup.com/articles/accordion-icons/

本文由@孟大偉 翻譯發(fā)于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。