Week 4 Page 6: Designing Responsive Navigation
Responsive Navigation Strategies
In a world where screens sizes are getting smaller and smaller, navigation structure is of critical importance to user success. On a larger screen design, designers have the "real-estate" freedom to display all top-level navigation so users have access to a wide variety of links at once. However, for smaller screen designs, designers don't have the same luxury. Navigation design then becomes a matter of setting priorities about which links are most important and reducing design complexity so users can navigate with ease.
Setting Priorities:How do you figure out what navigation absolutely needs to be displayed in a mobile design? Many clients will insist they need everything! One technique is to list important pages in a spreadsheet and suggest that the client assign priorities to each of those pages. When it comes to designing the navigation for a mobile site, you can then use this prioritization as a starting point for deciding which navigation actually appears on the home page. Above all, remember that it's not essential to show all navigation options at once. A designer has a variety of navigation choices including accordion style navigation or a single-access drop down menu (from an icon) Look at this example of a bank site in desktop and mobile. Notice how they prioritized what was most important to appear on the mobile site in terms of navigation. It's important for designers to think: "What does a user most want/need when they first interact with a design?" Reducing complexity:In addition to prioritizing which navigation links should appear on a mobile design, designers should strive to keep that design simple. It's a small space... there's no room for distractions or extraneous elements! A user doesn't want to scroll around miscellaneous images or enlarge the content to read 4 point type! Here's an example of a desktop and mobile design for the World Wildlife Fund. Notice how the mobile design is clean and simple. What does the WWF emphasize in the mobile navigation? Donate, Adopt and the main article with a simple photo.
Navigation options for small screen sizes:As discussed on page 4 of this lecture, designers have a variety of options for small screen navigation. The main goal of any mobile site is to allow the user easy access to the content. This also applies to navigation! Once a user has selected an option, the navigation needs to get out of the way. Sometimes this means using a universal navigation icon at the top (like the ubiquitous "pancake" icon) or having navigation that slides on and off screen. Take a look at the Star Wars site and see how it handles navigation! To see the mobile design you'll need to reduce the size of your browser window. Navigation options by context:It is possible to anticipate navigation needs and serve navigation links based on specific pre-established criteria. These might include: screen width, type of device (whether it is a click or touch/tap device for example) and geolocation (where the user is), Note: This page is an overview from:Responsive Design Patterns and Components by Vitaly Friedman in the book, Real-Life Responsive Web Design (Smashing Book 5) Now let's talk a little about the use of icons in navigation!! |