三級(jí)菜單頁(yè)面布局

重點(diǎn) (Top highlight)

When users navigate an interface, there’s a need for speed. The faster it is for them to find what they’re looking for, the more time they’ll save on their task.

用戶導(dǎo)航界面時(shí)，需要提高速度。 他們找到所需內(nèi)容的速度越快，他們將在工作上節(jié)省的時(shí)間就越多。

Speed is essential for menus that contain multiple levels. The more levels a menu has, the longer it takes to navigate. A common navigation pattern is a three-level menu. You’ll often find it on dashboard interfaces and desktop applications. The easiest way to optimize the navigation speed of a three-level menu is to design for the fastest layout.

速度對(duì)于包含多個(gè)級(jí)別的菜單至關(guān)重要。 菜單級(jí)別越高，導(dǎo)航所需的時(shí)間就越長(zhǎng)。 常見(jiàn)的導(dǎo)航模式是三級(jí)菜單。 您通常會(huì)在儀表板界面和桌面應(yīng)用程序上找到它。 優(yōu)化三級(jí)菜單的導(dǎo)航速度的最簡(jiǎn)單方法是設(shè)計(jì)最快的布局。

A research study ( A comparison of three-level menu navigation structures for web design) has shed some light on which layout is fastest to navigate. They evaluated various three-level menu layouts based on several criteria categories.

一項(xiàng)研究研究( 用于Web設(shè)計(jì)的三級(jí)菜單導(dǎo)航結(jié)構(gòu)的比較 )揭示了哪種布局導(dǎo)航最快。 他們根據(jù)幾個(gè)標(biāo)準(zhǔn)類(lèi)別評(píng)估了各種三級(jí)菜單布局。

The navigation layouts include top-top-top, top-left-left, top-top-left, top-left-top, left-left-left, left-top-top, left-left-top, and left-top-left. The level notations are ordered by priority and hierarchy (i.e., primary[1]-secondary[2]-tertiary[3]). The criteria categories include navigation time, user hesitation, cursor movement, selection errors, and user preference.

導(dǎo)航布局包括頂部-頂部-頂部，頂部-左側(cè)-左側(cè)，頂部-頂部-左側(cè)，頂部-左側(cè)-頂部，左側(cè)-左側(cè)-左側(cè)，左側(cè)-頂部-頂部，左側(cè)-左側(cè)-頂部和左側(cè)-頂部-剩下。 級(jí)別標(biāo)記按優(yōu)先級(jí)和層次結(jié)構(gòu)排序(即，primary [1] -secondary [2] -tertiary [3])。 標(biāo)準(zhǔn)類(lèi)別包括導(dǎo)航時(shí)間，用戶猶豫，光標(biāo)移動(dòng)，選擇錯(cuò)誤和用戶偏好。

導(dǎo)航時(shí)間 (Navigation Time)

The study discovered that a left primary is faster to navigate than a top primary. This effect also applies to left secondary menu levels. It also found that navigation is faster when the primary level is separate from the secondary and tertiary levels. Overall, left-top-top and top-left-left were the fastest, and top-top-top and top-top-left were the slowest.

研究發(fā)現(xiàn)，左側(cè)的主要對(duì)象比頂部的主要對(duì)象導(dǎo)航更快。 此效果也適用于左側(cè)輔助菜單級(jí)別。 還發(fā)現(xiàn)，當(dāng)初級(jí)與次級(jí)和第三級(jí)分開(kāi)時(shí)，導(dǎo)航速度更快。 總體而言，左上-頂和左上-左是最快的，頂-頂-頂和左上-左是最慢的。

用戶猶豫 (User Hesitation)

A hesitation is when the user hesitates to move their cursor from one menu level to another. The left-top-top had the least hesitation out of all the layouts, and the top-left-left had the most. There was a significant decrease in hesitation when the secondary and tertiary levels were on the same plane.

猶豫是指用戶猶豫將其光標(biāo)從一個(gè)菜單級(jí)別移至另一菜單級(jí)別。 在所有布局中，左上角的猶豫最少，而左上角至左數(shù)最多。 當(dāng)二級(jí)和三級(jí)在同一平面上時(shí)，猶豫明顯減少。

光標(biāo)移動(dòng) (Cursor Movement)

The frequency of cursor movements to the incorrect plane represented a cursor movement. There were fewer cursor movements when the primary menu was on the left. Fewer cursor movements also occurred when the secondary level was split from the primary. Many cursor movements occurred when secondary and tertiary menus were on different planes. But when they were on the same plane, users performed better.

光標(biāo)移動(dòng)到錯(cuò)誤平面的頻率表示光標(biāo)移動(dòng)。 當(dāng)主菜單在左側(cè)時(shí)，光標(biāo)移動(dòng)較少。 當(dāng)次要級(jí)別與主要級(jí)別分開(kāi)時(shí)，光標(biāo)移動(dòng)也較少。 當(dāng)二級(jí)菜單和三級(jí)菜單位于不同的平面上時(shí)，會(huì)發(fā)生許多光標(biāo)移動(dòng)。 但是，當(dāng)他們?cè)谕患茱w機(jī)上時(shí)，用戶表現(xiàn)會(huì)更好。

Left-left-left and top-top-top had the fewest cursor movements, while top-top-left and top-left-top had the most. This effect makes sense because when all menu levels are on the same plane, it’s harder for users to move their cursor to the wrong plane.

左-左-左和上-頂-上的光標(biāo)移動(dòng)最少，而左上-左上和左上-頂最多。 這種效果是有道理的，因?yàn)楫?dāng)所有菜單級(jí)別都在同一平面上時(shí)，用戶很難將光標(biāo)移動(dòng)到錯(cuò)誤的平面上。

選擇錯(cuò)誤 (Selection Errors)

The number of excessive clicks represented a selection error. When the primary level was on the left plane, the least amount of selection errors occurred. A left primary reduced selection errors by 80% compared to a top primary.

點(diǎn)擊次數(shù)過(guò)多表示選擇錯(cuò)誤。 當(dāng)主要水平位于左側(cè)平面上時(shí)，發(fā)生的選擇錯(cuò)誤最少。 左主數(shù)據(jù)庫(kù)比頂級(jí)主數(shù)據(jù)庫(kù)減少了80％的選擇錯(cuò)誤。

A significant number of selection errors occurred when both the primary and secondary were on the top plane. Top-top-top and top-top-left performed the worst. Fewer selection errors occurred when the secondary and tertiary levels were on a separate plane from the primary. Left-top-left and left-left-left performed the best.

當(dāng)主要和次要都在頂面上時(shí)，會(huì)發(fā)生大量選擇錯(cuò)誤。 頂部-頂部-頂部和頂部-左上方的效果最差。 當(dāng)?shù)诙?jí)和第三級(jí)位于與第一級(jí)不同的平面上時(shí)，選擇錯(cuò)誤的發(fā)生率會(huì)降低。 左上左和左上左表現(xiàn)最佳。

用戶偏好 (User Preference)

The majority of users preferred using a left primary than a top one. Left-top-top and left-left-left were most preferred. There was a strong preference for grouping the primary and secondary levels and secondary and tertiary levels. Top-left-top and left-top-left were the least preferred. This effect implies that users don’t like jumping back and forth between planes.

大多數(shù)用戶更喜歡使用左主數(shù)據(jù)庫(kù)而不是頂主數(shù)據(jù)庫(kù)。 最優(yōu)選左上-上和左-左-左。 強(qiáng)烈希望將小學(xué)和中學(xué)層次以及中學(xué)和高等教育層次進(jìn)行分組。 最不喜歡左上角和左上角。 這種效果意味著用戶不喜歡在飛機(jī)之間來(lái)回跳躍。

最佳與最差的整體表現(xiàn) (Best vs. Worst Overall Performance)

An overall score was given to each layout based on their performance for all criteria categories combined. The best performing navigation layout was left-top-top, followed by left-left-left. The two worst-performing ones were top-top-left and top-left-top. Out of the two best, left-top-top was faster than left-left-left by approximately 17 seconds.

根據(jù)每種布局在所有標(biāo)準(zhǔn)類(lèi)別中的綜合表現(xiàn)，對(duì)它們進(jìn)行總體評(píng)分。 效果最佳的導(dǎo)航布局是從左上到上，然后是從左到左，從左到左。 表現(xiàn)最差的兩個(gè)是左上角和左上角。 在這兩種最好的方法中，“左上-頂”比“左-左-左”快約17秒。

Left-left-left is slower than left-top-top because when all the menus are on the left, it requires users to scroll through the list of items. As the levels expand and go deeper, users have to scroll more and can no longer view all the primary items on a single screen. However, the benefit left-left-left has is that users can consume more content per screen view. Users spend less time navigating the content screen, but it’s a tradeoff for more time navigating the menu.

從左到左，從左到左比從左上到下慢，因?yàn)楫?dāng)所有菜單都在左側(cè)時(shí)，它要求用戶滾動(dòng)瀏覽項(xiàng)目列表。 隨著級(jí)別的擴(kuò)展和深入，用戶必須滾動(dòng)更多內(nèi)容，并且無(wú)法再在一個(gè)屏幕上查看所有主要項(xiàng)目。 但是，left-left-left的好處是用戶可以在每個(gè)屏幕視圖中消費(fèi)更多內(nèi)容。 用戶花費(fèi)在導(dǎo)航內(nèi)容屏幕上的時(shí)間更少，但是這是在導(dǎo)航菜單上花費(fèi)更多時(shí)間的折衷方案。

The screen view advantage for left-top-top allows users to view more primary items at a time no matter how deep they navigate. However, they see less content per screen due to the top navigation bars. As a result, users experience less menu scrolling but more content scrolling.

左上角的屏幕視圖優(yōu)勢(shì)允許用戶一次瀏覽更多主要項(xiàng)目，無(wú)論他們導(dǎo)航的深度如何。 但是，由于頂部的導(dǎo)航欄，他們?cè)诿總€(gè)屏幕上看到的內(nèi)容更少。 結(jié)果，用戶體驗(yàn)較少的菜單滾動(dòng)，但是體驗(yàn)了更多的內(nèi)容滾動(dòng)。

作者推薦 (Author’s Recommendation)

No matter which navigation layout you choose, left-left-left and left-top-top are both winners. There are give-and-takes between screen view and scrolling, so it’s important to evaluate what’s more important for your UX.

無(wú)論您選擇哪種導(dǎo)航布局，左-左-左和左上-頂部都是贏家。 屏幕視圖和滾動(dòng)之間存在取舍，因此評(píng)估對(duì)用戶體驗(yàn)更重要的一點(diǎn)很重要。

If your users navigate between different primary categories a lot, go with left-top-top to minimize menu scrolling, and maximize menu viewing. If your interface displays a lot of content with large and heavy visuals (e.g., photos, videos, graphics), go with left-left-left to minimize content scrolling and maximize screen view.

如果您的用戶經(jīng)常在不同的主要類(lèi)別之間導(dǎo)航，請(qǐng)使用左上角以最小化菜單滾動(dòng)并最大化菜單查看。 如果您的界面顯示了大量帶有大而沉重的視覺(jué)效果的內(nèi)容(例如，照片，視頻，圖形)，請(qǐng)使用left-left-left來(lái)最小化內(nèi)容滾動(dòng)并最大化屏幕視圖。

It’s possible you can increase the content screen view for left-top-top and still reap the benefits of less menu scrolling. By temporarily hiding the top navigation bar when users scroll down the screen, they can get a full content view. When they scroll up, the bar will reappear. The assumption is that users are viewing content when they’re scrolling down. When they scroll up, their intention to navigate is more likely.

您可以增加左上角的內(nèi)容屏幕視圖，并仍然獲得較少菜單滾動(dòng)的好處。 當(dāng)用戶向下滾動(dòng)屏幕時(shí)，通過(guò)暫時(shí)隱藏頂部導(dǎo)航欄，他們可以獲得完整的內(nèi)容視圖。 當(dāng)他們向上滾動(dòng)時(shí)，該欄將重新出現(xiàn)。 假定用戶向下滾動(dòng)時(shí)正在查看內(nèi)容。 當(dāng)他們向上滾動(dòng)時(shí)，他們導(dǎo)航的意圖更有可能。

In my opinion, left-top-top is the winning navigation layout. Not only is it a few seconds faster than left-left-left, but it allows users to recognize which primary category they’re on. When you have multiple menu levels expanded in the left sidebar, it takes more effort to recognize which level you’re on. It’s also easier to mix up secondary and tertiary items since they’re so near each other.

在我看來(lái)，左上方是導(dǎo)航的布局。 它不僅比left-left-left-left快幾秒鐘，而且還使用戶能夠識(shí)別他們所在的主要類(lèi)別。 如果左側(cè)欄中展開(kāi)了多個(gè)菜單級(jí)別，則需要花費(fèi)更多的精力來(lái)識(shí)別您所處的級(jí)別。 混合二級(jí)和三級(jí)項(xiàng)目也很容易，因?yàn)樗鼈儽舜朔浅＝咏?

A left-top-top layout makes scanning primary categories easy. It distinguishes secondary and tertiary categories from primary and places them on different vertical levels. Therefore, users are less likely to mix up secondary and tertiary items when scanning horizontally.

左上角的布局使掃描主要類(lèi)別變得容易。 它區(qū)分了第二和第三類(lèi)與主要類(lèi)別，并將它們置于不同的垂直級(jí)別。 因此，在水平掃描時(shí)，用戶不太可能混淆第二和第三項(xiàng)。

Of course, left-top-top isn’t the best choice for every use case and interface context because there are exceptions to every rule. But overall, it appears to perform superiorly to all other three-level menus.

當(dāng)然，對(duì)于每種用例和接口上下文，左上角并不是最佳選擇，因?yàn)槊織l規(guī)則都有例外。 但總的來(lái)說(shuō)，它的性能似乎要優(yōu)于所有其他三級(jí)菜單。

UX設(shè)計(jì)的含義 (UX Design Implications)

There are three significant design implications from this study that will dramatically optimize the navigation speed of your three-level menu.

這項(xiàng)研究具有三個(gè)重要的設(shè)計(jì)含義，它們將極大地優(yōu)化三級(jí)菜單的導(dǎo)航速度。

1: The primary menu should be on the left instead of the top. (~17 seconds saved)

1：主菜單應(yīng)位于左側(cè)而不是頂部。 (節(jié)省約17秒)

This conclusion makes sense because organizing menu items in the form of a columned list makes them easier to scan. The user can see a cluster of items in a single view when they’re in a column instead of a row. With a top primary, the user can only view items individually as they scan across the row.

該結(jié)論之所以有意義，是因?yàn)橐粤辛斜淼男问浇M織菜單項(xiàng)使它們更易于掃描。 當(dāng)用戶位于列而不是行中時(shí)，他們可以在單個(gè)視圖中看到一組項(xiàng)目。 使用最高級(jí)的主要對(duì)象時(shí)，用戶只能在掃描整個(gè)行時(shí)單獨(dú)查看它們。

2: The primary menu should be on a different plane than the secondary and tertiary menus. (~23 seconds saved)

2：主菜單應(yīng)該與第二和第三菜單不在同一平面上。 (節(jié)省約23秒)

This conclusion makes sense because the primary menu is the parent category, which has higher priority over child categories. When the secondary and tertiary levels are separate from the primary, it clearly distinguishes the hierarchy and prevents visual clutter on the same plane.

由于主菜單是父類(lèi)別，因此其優(yōu)先級(jí)高于子類(lèi)別，因此此結(jié)論很有意義。 當(dāng)?shù)诙?jí)和第三級(jí)與第一級(jí)分開(kāi)時(shí)，它可以清楚地區(qū)分層次結(jié)構(gòu)并防止在同一平面上出現(xiàn)視覺(jué)混亂。

3: Secondary and tertiary menus should be on the same plane. (~9 seconds saved)

3：第二菜單和第三菜單應(yīng)位于同一平面上。 (節(jié)省約9秒)

This conclusion makes sense because the secondary and tertiary levels are both child categories of the parent category, making them more related. Placing them on the same plane makes navigating from child to child more intuitive and easier to follow.

該結(jié)論之所以有意義，是因?yàn)橹袑W(xué)和高等教育水平都是父類(lèi)別的子類(lèi)別，因此它們之間的關(guān)聯(lián)性更高。 將它們放置在同一平面上可使從一個(gè)孩子到另一個(gè)孩子的導(dǎo)航更加直觀且易于遵循。

If you’re designing a three-level menu for a desktop application, keep these UX insights in mind. They’ll especially apply to dashboard interfaces where efficiency is crucial. If you currently have a three-level menu that uses a slow navigation layout, consider redesigning it. A fast navigation layout will give your users the speed they need to accomplish tasks with greater satisfaction.

如果要為桌面應(yīng)用程序設(shè)計(jì)三級(jí)菜單，請(qǐng)牢記這些UX見(jiàn)解。 它們尤其適用于效率至關(guān)重要的儀表板界面。 如果當(dāng)前有一個(gè)使用慢速導(dǎo)航布局的三級(jí)菜單，請(qǐng)考慮重新設(shè)計(jì)它。 快速的導(dǎo)航布局將使您的用戶更快地完成任務(wù)所需的速度。

Originally published at https://uxmovement.com on July 8, 2020.

最初于 2020年7月8日 發(fā)布在 https://uxmovement.com 。

翻譯自: https://medium.com/@uxmovement/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2

三級(jí)菜單頁(yè)面布局

總結(jié)

以上是生活随笔為你收集整理的三级菜单页面布局_三级菜单的最快导航布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。