中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

尖號（向下箭頭）

加號

箭頭

空白

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

02 方法

1. 準(zhǔn)備工作

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

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

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

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

5 個不同的樣式的原型

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

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

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

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

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

3. 點擊的位置

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

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

當(dāng)沒有 icon時，用戶通常會點擊菜單文本處，當(dāng)有 icon 時，用戶更傾向于點擊 icon

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

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

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

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

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

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

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

03 結(jié)論

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

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

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

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

請確定您的菜單操作是打開子菜單還是直接進(jìn)入類別頁面，如果您選擇使菜單項直接鏈接到登錄頁面，請不要使用右對齊的圖標(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é)議。