漢堡菜單

重點 (Top highlight)

I was recently designing a hamburger menu for a client and before I knew it, I had embarked on this journey where I was reading article after article about the accessibility issues which accompany a hamburger icon. Turns out, these menu icons which entered the world of user-interface design in 1981 through Norm Cox, are controversial yet one on the most popular navigation bar components. One thing which piqued my interest was that despite being a target of such strict scrutiny, hamburgers are still widely used in navigation bars and headers by companies like Google and Microsoft.

我最近正在為一個客戶設計一個漢堡菜單，在不知不覺中，我就開始了這段旅程，在這里我逐篇閱讀有關漢堡圖標附帶的可訪問性問題的文章。 事實證明，這些菜單圖標在1981年通過Norm Cox進入了用戶界面設計的世界，盡管存在爭議，但仍是最受歡迎的導航欄組件之一。 引起我興趣的一件事是，盡管漢堡包受到了如此嚴格的審查，但仍被Google和Microsoft等公司廣泛用于導航欄和標題中。

Before we can talk about why these three menacing stacked lines are so deeply embedded in the online world, let’s take a look at their flaws.

在我們討論為什么這三條令人生畏的堆疊式生產(chǎn)線如此深入地嵌入在線世界之前，讓我們先看看它們的缺陷。

1.它們使重要信息對用戶隱藏。 (1. They keep important information hidden from the user.)

A widely accepted design principle is that users should have all the information they need while navigating a web/mobile app. According to Apple UX Evangelist Mike Stern,

廣泛接受的設計原則是，用戶在瀏覽Web /移動應用程序時應擁有所需的所有信息。 根據(jù)Apple UX傳播者Mike Stern的說法，

“Remember, the [two] key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”

“請記住，關于直觀導航系統(tǒng)的[兩個]關鍵問題是，它們告訴您您在哪里，并且向您顯示您可以去的其他地方。”

“Hamburger menus are terrible at both of those things because the menu is not on the screen. It’s not visible. Only the button to display the menu is.”

“漢堡菜單在這兩個方面都很糟糕，因為菜單不在屏幕上。 不可見 只有顯示菜單的按鈕是。”

Oh the irony, Mr. Stern. Apple is a fan of using hamburger icons like no other. Coming to the main point, hamburger goes against user-friendliness because it takes two clicks/taps to navigate to a screen where a traditional link only takes one. That too, without showing the users what they are navigating to.

噢，諷刺的是，斯特恩先生。 蘋果公司非常喜歡使用漢堡包圖標。 談到要點，漢堡包違反了用戶友好性，因為它需要兩次單擊/輕擊才能導航到傳統(tǒng)鏈接僅需一次的屏幕。 同樣，也沒有向用戶顯示他們要導航到的內(nèi)容。

2.它們在觸摸屏上的位置較難觸及 (2. Their position is less reachable on touch screens)

Have you ever found yourself lying in your bed, your phone in your hand above your face, and as you try to reach the far left corner with your thumb, you realize it was a mistake but it’s too late now because the phone has already slipped out of your hand and hit your face. If you haven’t, then trust me, nothing hurts like the classic square edge of an iPhone SE. For me, it was either the back button or a hamburger icon which lead to those moments.

您是否曾經(jīng)發(fā)現(xiàn)自己躺在床上，手機在您的臉上方，并且當您嘗試用拇指到達最左角時，您意識到這是一個錯誤，但為時已晚，因為手機已經(jīng)滑落伸出你的手，打了你的臉。 如果還沒有，請相信我，沒有什么比iPhone SE的經(jīng)典方形邊緣更傷人了。 對我而言，導致這些時刻的是后退按鈕或漢堡包圖標。

It is extremely important to understand that a component which contains the most important buttons in any phone app should be the easiest to reach, which is not the case in a hamburger icon. According to a research on the relative ease of access of different parts of a touch screen, hamburger icons are the furthest to reach as they are usually present in the top-left or top-right corners of a screen.

理解包含任何電話應用程序中最重要按鈕的組件應該最容易找到是非常重要的，而在漢堡包圖標中則并非如此。 根據(jù)對觸摸屏不同部分的相對訪問的便捷性的研究 ，漢堡包圖標最遠，因為它們通常出現(xiàn)在屏幕的左上角或右上角。

Photo by Scott Hurff.圖片由Scott Hurff攝 。

As the present-day phones are getting bigger, hamburger icons are getting pushed further away from the ‘natural’ zone into the ‘ow’ zone. This might be a subtle aspect, but on large apps with many tabs and complex hierarchies, tapping hamburger icon each time a user has to navigate one screen backwards or forwards can make it frustrating.

隨著當今電話的體積越來越大，漢堡包圖標正逐漸從“自然”區(qū)域推向“低”區(qū)域。 這可能是一個微妙的方面，但是在具有許多選項卡和復雜層次結構的大型應用程序中，每次用戶必須向后或向前瀏覽一個屏幕時，都點擊漢堡包圖標可能會使它感到沮喪。

If any other web design component had these downsides, it would have been taken over by more accessible alternatives. So why is it that hamburger icons have become an almost essential part of responsive apps and websites.

如果任何其他Web設計組件有這些缺點，那么它將由更易于訪問的替代方案取代。 那么，為什么漢堡包圖標已成為響應式應用程序和網(wǎng)站的基本組成部分。

1.他們的受歡迎程度超過了所有關切。 (1. Their popularity outweighs all concerns.)

Being in use for around forty years, hamburger icons are so well known by designers and users that they can act as standalone components without any extra labels such as that of a ‘menu’. Such popularity counters Mike Stern’s argument above because the users do not need to know what’s behind the hamburger icon. The image of three lines stacked on top of each other immediately conveys the idea to the user that it contains links to different parts of an app/website.

漢堡包圖標已經(jīng)使用了大約40年，它在設計人員和用戶中廣為人知，以至于它們可以作為獨立的組件使用而無需任何額外的標簽，例如“菜單”。 這種受歡迎程度反駁了Mike Stern的上述論點，因為用戶不需要知道漢堡圖標的背后是什么。 三行疊加在一起的圖像立即向用戶傳達了一個想法，即其中包含指向應用程序/網(wǎng)站不同部分的鏈接。

2.多功能性是無限的。 (2. The versatility is endless.)

Google utilized a hamburger icon for chrome settings and still does for gmail and other services. Apple and Microsoft use it to point to their navigation bar links on smaller screens. Quite frankly, the hamburger icon is like the ‘miscellaneous’ folder you have in your drive. Anything can go inside it. On top of that, it saves space, a commodity highly valued in the ‘small screen’ ecosystem.

Google在chrome設置中使用了一個漢堡包圖標，而在gmail和其他服務中仍然使用。 Apple和Microsoft使用它在較小的屏幕上指向其導航欄鏈接。 坦率地說，漢堡包圖標就像您驅動器中的“雜項”文件夾一樣。 任何東西都可以進入里面。 最重要的是，它節(jié)省了空間，這是在“小屏幕”生態(tài)系統(tǒng)中極有價值的商品。

Do I enjoy animating hamburger icons? Yes. The number of ways you can rotate three lines around are infinite. But do I find it frustrating when I have to reach across to it just to get to the contact page? A bit. From a developer’s point of view, it comes down to what you hope to achieve with your website. If you are trying to go for a minimalist design or are confined by the limitations of smaller screens, then accessibility can be sacrificed by implementing hamburger icon. However, if you are a firm believer of user-friendliness over everything else, then there are better alternatives you can employ in your apps.

我喜歡動畫漢堡圖標嗎？ 是。 旋轉三行的方式是無限的。 但是當我不得不深入到聯(lián)系頁面時，是否感到沮喪？ 一點點。 從開發(fā)人員的角度來看，它取決于您希望通過網(wǎng)站實現(xiàn)的目標。 如果您嘗試采用簡約設計或受限于較小屏幕的限制，則可以通過實現(xiàn)漢堡包圖標來犧牲可訪問性。 但是，如果您堅信用戶友好性高于其他一切，那么您可以在應用程序中采用更好的選擇 。

翻譯自: https://levelup.gitconnected.com/hamburger-menus-a-challenge-to-accessibility-and-ux-design-principles-697ccec0ee63

漢堡菜單

總結

以上是生活随笔為你收集整理的汉堡菜单_汉堡菜单-可访问性和用户体验设计原则的挑战？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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