The Hamburger Icon In UI History, Usage, Insights - Algrim.co

The Hamburger Icon In UI History, Usage, Insights - Algrim.co The Internet is no longer limited to computers. The emergence of smartphones has seen a strong surge in mobile internet usage. Some statistics show a rising trend in global mobile data traffic by seven times between 2016 and 2021. So, web designers need to focus a lot more on the mobile-friendly versions of their web creations. There is something to help with this idea, known as the mobile-first approach. What is a mobile-first design approach? Mobile-first design approach means designing a site or application based on the user experience on a mobile device. This approach means designers have to work in a restricted space and conditions to plan out the best model for a website or application for optimum user experience. There are types of approach to design: progressive enhancement and graceful degradation. In a progressive enhancement approach, the designer directly bases their initial plans and models with reference to the screen layout of mobile devices. It calls for high prioritization of screen space to hold features and functions. From here, elements get added to the design when transitioning to larger screen layouts. A mobile layout of a site only packs essential features that the user needs to navigate and interact. The approach of graceful degradation is the total opposite of progressive enhancement. While you add feature elements in progressive enhancement, graceful degradation invokes features segregation and removal. You start from the full-scale web design for large screens. From there, you get into the process of ranking features and then discarding or hiding them into menus. You start from particular web design and then begin downsizing to fit the critical elements of the website or application on the mobile screen. There is a downside to this process. Since you are dealing with a large number of feature elements, it might be harder to distinguish their prominence. Hence, it is advised to start with the progressive enhancement approach. What mobile-first approach does is puts the user experience at the top, which means these approaches are very user-centric. The mobile-first approach puts a tremendous amount of focus on content, as this is the only thing that keeps the user engaged. So, planning out the appropriate use of space by features is vital. A mobile screen offers limited scope for designers to play with. This limitation of space does help plan out the priorities but can hinder when you have a large number of features to add to the home-screen or landing page. One needs to have a proper idea of the content and create a hierarchy based on the importance of the elements and plan the layout accordingly. The limited space of mobile screen calls for judicious use of space to show content. In addition to screen size, there are other elements like bandwidth, memory, interacting options/input options that need consideration. An average mobile user does not stay on the site if it takes longer than 3 seconds to load. So, not only the design should be sensible in the association of features but should also not be slow and irresponsive. Here are some of the highlights of mobile-first design approach: • It helps avoid the design clutter in desktop or larger screen sizes, by having apt ‘breathing space’ between elements. • It cuts down effort and time wasted on resizing and editing elements when scaling from large screen design to a smaller one. Let’s dive into the process. Mobile-first design process The first question â€" where does the process start? And the answer is obviousâ€" the screen size. Before you start designing you need to know the size of the playfield you are provided with. So, a designer should start with the smallest screen size available. Then comes the question of content inventory, visual hierarchy, space breaks, touch targets, hidden incorporation of elements, graphics size, and mobile testing. Let’s have a look at each of these in detail. Content Inventory. After settling on screen size, think of all the contents you want to include in the design. It could be the homepage, contact page or product categories. List out all the elements that the website or application needs to incorporate. Visual hierarchy. It deals with weighing down the importance of the elements and in turn, allocating screen space based on the order. For example, when designing a social media application, elements like messages, profile, photos, or search will take up higher priority and demand direct representation on the screen space for easy access. Designing within small spaces then scale up. It is an excellent strategy to utilize a minimum amount of space for an element on the screen, as following this will indirectly create space between individual elements. There will be a higher scope of adjustment when the elements are resized to fit the available screen space. Emphasizing touch targets. A smartphone screen is touch-sensitive. Moreover, when you compare the screen size to an average human finger, you realize there’s a minimum limit of touch targets. Apple recommends a 44px by 44px target. Hence, designers need to take care, not to create too small navigation elements or improper spacing between the home button and other links. One thing that does not work on mobile sites is hover effects. Hover effects are only plausible when working with an input device like a mouse. Moreover, the pop-out menu effects are not made for finger touches yet. Hidden incorporation of elements. When designing for a mobile, don’t think you are limited to the screen space. You can integrate some function of the website or app with gestures like swiping left, right, up or down. But there’s a risk of overwhelming the user if used extensively. It needs to be kept accessible and straightforward. Avoid large graphics. Graphics add that wow factor to the site but take care that it is not the reason for the website being slow. Texts are easier to load up. However, the image and videos being large, take more time to load and can make the site sluggish. So, when adding images, ensure they are compressed or resized. Mobile testing. After all the efforts you have put into the process, it does not hurt to work a bit more and ensure that your creation works aptly for the preferred platform. After building the prototype, it is a good idea to test it on a mobile device. And who knows, you might find an unexpected flaw in the design. Hamburger Menu: history It’s been around for a while, but still, the majority of the people don’t know about the hamburger menu. People might know it by its function but not by the name. A hamburger menu is a three stacked line graphic, which acts as a hidden menu in websites and apps. Its creator, Norm Cox built it for Xerox Star. Speaking about the menu, Cox said, “Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).” Soon, it went out of fashion after Xerox Star and world did not see it until Apple came up with it. In the early 2000s, two of the mobile applications for iOS incorporated the ‘ham menu’ so can thank Apple for resurrecting it. Tweetie, an app specifically for Twitter came in 2008 for iPad. It used the hamburger menu for lists. The next year, in 2009, came Voice Memos for iPhone 3Gs on June 17. In the meantime, Facebook used the ham menu albeit in a different format. The Facebook app had a grid layout for accessing features like profile, friends, chat, and news feed. In 2010, the grids transformed to bars, taking up the familiar hamburger menu form. Hamburger menu has got mixed reactions from the designers. Some love it while some hate it. Some designers appreciate the minimalistic look it brings to design. Alternatively, some designers blame it for hiding features and signify low importance. Hamburger Menu: Usage Let’s look at some of the pros and cons of a hamburger menu before you join either of the for or against parties. Cons of hamburger menu: • Does not display the features well • Hiding elements means that the hidden features have lesser importance over other visible elements • Lower click rates on the top left (for mobile devices) • Top screen navigation options are hard to reach • In iOS, it clashes with the back button layout Pros of hamburger menu: • Cleaner UI interface for ease of navigation • Well-recognized menu • Allows direct access to features Now that you know about the pros and cons let’s look into some other aspects. Hamburger Menu: Insight When do you use the hamburger menu UI? You cannot use the hamburger menu in every case, especially not if you are incorporating some key features. Ham menu is useful when some additional features need representation in a page but stays hidden until called upon. It is a menu for the backseat elements. So, it should not be used for elements that are vital for user experience and navigation. It should not include the core functions on the landing page/home screen. Apart from that hamburger menus could be used for direct access to some elements. The small size of mobile devices might not be enough for setting all the functions on the screen. Hence, a hamburger menu will tidy things up and keep them hidden under the three bars. Before using the hamburger menu, you need to weigh between screen space and viewable features. That is, does your design call for more screen space or higher emphasis on the features. If features are your priority concern, then ditch the hamburger menu. Alternatives to hamburger menu: Floating hamburger menu Unlike the traditional hamburger menu which is situated at the top left, a floating hamburger menu can be placed anywhere on the screen, devoid of any relation to other elements on display. Hence, it is termed ‘floating.’ Pros: • Signifies importance • Save screen space • Ease of use and accessibility • Direct access to features Cons: • Take up large screen space • Features are hidden from plain view Tabbed menus Tabbed menus keep the features of a website or app in plain sight of the user in the form of tabs. This menu design allows for direct access to features with a single selection. Pros: • Highlighting of core features and functionality on the landing page/home screen • The visiting page info • Easy accessibility • Signify importance • Direct access to features Cons: • Limited space for menus • Categorization leads to the creation of additional menus or icons Top tabbed menus he top tabbed menu differs from the tabbed menu in terms of placement. While tabbed menus are located at the bottom, top tabbed menus are set on the top of the page. Hence, these menus could be awkward to use for people without long finger reach. Pros: • Highlighting of core features and functionality • Info about the visiting page • Easy accessibility • Signify importance • Direct access to features Cons: • Limited space for menus • Categorization leads to the creation of additional menus or icons • Buttons are not easy to reach Swipe pages Most prominent on the Tinder app, this alternative expects users to have prior knowledge about the style of navigation. It is a minimalist approach to menu design with a clean and visually appealing interface. Pros: • Clean and minimalistic • Segregate different features on an app • Visually pleasing Cons: • Prior knowledge of navigation required • No page info available • Have to search for features • Can't directly access features Labeled menu button It is the purest form of menu design. The menu button is labeled as 'Menu.' Users might get confused with icons, but they cannot be confused with text. Pros: • Easy identification of menu access Cons: • Increased recognition of menu icon Slide out navigation tabs These menu styles are hidden from plain sight. These are accessed by a simple swipe of fingers to bring out the menu. Pros: • Helps in freeing screen space for other elements • Direct access to features Cons: • Interference with other features • Proper navigation knowledge required for use Combinations of different versions One can combine the various menu styles to create a unique interface. Combining menus will even out the weaknesses and prove for better overall feature accessibility. Mobile design is based on a fast and responsive design. So, some elements will have to accept relegation from direct on-screen visibility in favor of speed. Hamburger menu shines in this scenario by housing the elements under a single icon and letting the user choose when they need to access specific hidden features without compromising on the content visibility.