    
|
|
|
 |
Central to a solid user experience is a well-structured, simple navigation system. Over the past few months, I’ve been involved in launching two large institutional websites with complex navigation systems. Maintaining simplicity on such large websites becomes increasingly difficult as content requirements grow and tiers of navigation are added, not to mention the extra complexity added by small screens.
To illustrate the techniques involved in implementing responsive navigation on a large website, I’ll refer to two actual clients of mine. I’ll start with the process and how to get through it with research and mockups, then later get into some of the actual code that was used.
The key to success in every project, particularly a large website, is to work closely with the client, keeping them involved in as many aspects of the design process as possible. Before we get into code and how to build a website technically, we need to learn more about the project. At ResIM, we start with audience research, before progressing through information architecture, wireframing and wireframe usability testing.
In our latest project for a public health organization, the Middlesex-London Health Unit (MLHU), we started with audience research to find out the kinds of information that public users look for on health-related websites. Considering that MLHU’s website had over 1300 pages to be overhauled, we needed to make sure that priority content gets the focus it deserves.
As a design studio, we’ve tried different forms of audience research. One of our go-to methods is to bring in users to walk through a wireframe website, seeing how long it takes them to perform various tasks and to find various sections of the website, while video recording them. This style of testing doesn’t always yield perfect results because many inexperienced users will have problems understanding a website without graphics, colors, etc. But it still provides valuable insight into how easy or difficult content is to find.
This method works well when the structure and site map are defined, but we weren’t quite at that stage and needed to step back. MLHU has various committees and groups that had to be represented on the website, and we needed to make sure that everyone’s voice is heard.
We started by meeting with all of the committee members who were appointed to work on the website, to determine which parts of the website were most important. After hearing each group state its case as to why its information needed to be prominent on the website, we started to build a proper hierarchy. We realized there were a lot of different sections and areas, and we needed a way to group them into fewer parent items in order for the user to be able to interpret and navigate more quickly. We decided to piece together a lot of similar categories, and we named each of these groups; these would become our four main navigation items.
This was a great accomplishment, but we quickly realized that we needed to call attention to other important pages that weren’t necessarily grouped into those four sections. We created a supporting menu to accommodate and provide access to some of these non-health-related topics. Once we had built this streamlined navigation and worked it into our wireframes, we ran them through a testing period, in which we had users walk through areas of the website, performing tasks and finding information.
Watching people use this streamlined navigation, we noticed that each of them was able to quickly find the section of the website they were looking for and then effortlessly find the particular page and information they were after. These results from real-world users reinforced the decisions we had made in the information architecture.
MLHU’s site map. (Larger view | Source)
From here, we were able to move into the interface design phase, which included mocking up the responsive mobile view. Many clients struggle with the concept that a responsive mobile website is, in fact, the same website they see on their desktop, and not a whole new skin for mobile. Showing these clients a little less in the mockup phase is sometimes valuable.
For this reason, we typically leave tablet views out of this step, to enable us to control how the website transitions from the big “desktop” view down to the small “mobile” view. In the case of MLHU, I realized with the older ages of some of our target users, we couldn’t rely on typical top-right hamburger-style navigation.
Feeling that this solution would have been more difficult for certain users, I opted instead for vertical text-based navigation. This gave the second level of navigation a better layout, by allowing users to view all menu options before making a selection.
MLHU’s website on mobile. (Larger view | Source)
Our initial concern in the MLHU project was whether we could keep the mobile navigation structure congruent with the desktop version. Typically, one can hide navigation under a hamburger-style button, a common design pattern. However, our target audience included a wide age range, and we felt that displaying the full text of the navigation would be more user-friendly.
If we were to keep the navigation the same and then make some CSS adjustments to wrap the navigation in a box and stack the navigation vertically instead of horizontally, we could achieve the solution we were looking for.
@media only screen and (max-width: 600px) {
nav li {
width: 100%;
box-sizing: border-box;
}
nav a {
background: rgba(0,0,0,0.5);
padding: 10px 12px;
text-align: left;
margin: 0;
box-sizing: border-box;
}
}
MLHU’s mobile navigation. (Source)
A JavaScript-based solution for our desktop navigation interaction was in place, using the hoverIntent plugin, but we needed to adjust it to work properly on mobile. Our solution was to add a condition to check the screen’s size and, if small, to switch to a toggle slide instead of a hover fade in/out. A toggle slide gives a more native feel to the website, making it fit in and feel quicker on a mobile device, whereas a fade can feel slow and unresponsive when interacted with on a touchscreen.
function navIn() {
[...]
} else if($(window).width() < 600) { /* Here's where we check for the screen size and do a slide instead. */
$(this).children('ul').slideDown();
$(this).addClass('hovering');
}
[...]
}
A second instance of our process was the design and UX overhaul of Seneca College’s public website. We couldn’t reduce the main navigation as we did with MHLU because of different content requirements and organizational constraints. We didn’t need to work through an information architecture phase because the navigation was already set for us by the client; so, we moved right into wireframing and interface concepts. Similar to MLHU, we also mocked up a responsive mobile view and explored ways to display the navigation in an effective format.
Recognizing that this target audience is much younger, I felt strongly about using a streamlined navigation that is revealed via a hamburger-style vertical side menu. The hamburger icon has become popular through its use in many mobile applications, and it frees up space in the website’s header for the logo and search icon. A lot of sublevel pages needed to be displayed on Seneca College’s website, and showing them all at once in the header navigation would have been a bit too much.
My solution was to display sectional navigation at the top of every inner page. This secondary navigation would allow the user to quickly move through sections of the website without having to scroll through a long menu. With the complexity of a large website, making it navigable before showing the main content on the inner pages is sometimes necessary.
If you’re unsure of which route to take, try doing some extra audience research using mobile wireframes, and get a feel for how real-world users respond to the solutions.
Seneca’s website on mobile. (Larger view | Source)
Seneca’s navigation system is more complex and its mobile and desktop versions more different from each other than MLHU’s. We needed to find a way to replace the main navigation with a hamburger icon once the screen reaches a certain size. We started with a div for the mobile navigation that sits inside the header, but we didn’t want it to show up in the desktop view, so we hid it with CSS.
<div id="mobileNav">
<a id="searchIcon" href="#"><img src="http://media.smashingmagazine.com/images/searchIcon.png" width="24px" height="24px" alt="" /></a>
<a id="mobileNavIcon" href="#"><img src="http://media.smashingmagazine.com/images/mobileNav.png" width="38px" height="20px" alt="" /></a>
</div>
Seneca’s div for mobile navigation. (Source)
#mobileNav {
display: none;
}
For screens that are big enough, we display the aforementioned hidden div using media queries.
@media only screen and (max-width: 600px) {
#mobileNav {
display:block;
}
}
At the same time, we restyled the navigation and hid it. Feel free to get creative with restyling the navigation for mobile. I wanted full-width navigation that slides down, pushing the rest of the content, but you could instead absolutely position the menu to overlap the main content, or achieve an off-screen push effect using something like PageSlide. Many different techniques are possible; experiment with what you like and what feels best for the website.
@media only screen and (max-width: 600px) {
nav {
display: none;
width: 100%;
background: #000;
margin-left: -20px;
padding-right: 40px;
}
nav li {
display: block;
margin: 20px 0 20px 20px;
width: 100%;
}
nav a {
color: #FFF;
margin: 0;
width: 100%;
}
}
Lastly, completing our toggle is simply a matter of adding some JavaScript, similar to the example above.
$('#mobileNavIcon').click(function () {
$('nav').slideToggle();
return false;
});
Seneca’s mobile navigation opened. (Source)
It’s imperative to make design decisions that enhance the user experience by considering the results of usability testing, the perceived skill level of all user sets, and the general characteristics of the audience. As demonstrated in the cases above, even though a hamburger-style menu icon has become the industry standard, it might not be the best approach given the age or competency of the target audience.
I’m always looking for new solutions to the problem of complex navigation. Below are a few examples that could be really useful, depending on the requirements of the project.
I like that PageSlide follows the current mobile app trend with a pull-out side menu. Users are getting more comfortable with these menus and how they work. The benefit is a much taller scrollable menu that doesn’t push content too far down.
Responsive Multi-Level Menu is great for a few reasons. It mimics normal drop-down navigation, which is usually triggered by mouse hovering, and implements it effectively for touchscreens. It also makes it easy for users to jump down a few levels without forcing new pages to load.
Making design decisions based on your users should be paramount. If you aren’t involved in the initial design phase, then at least try to get involved in the responsive portion of the project. You need to help make sure that the direction taken is in the best interest of users, based on their comprehension of the systems you plan on using and their ability to access content.
Next, determine what code is needed to make a smooth transition from desktop to mobile. Does it require some JavaScript to animate nicely? Does its orientation need to change from horizontal to vertical? What can you do with the initial CSS to allow for an even smoother transition that requires fewer adjustments to media queries?
Lastly, don’t let a complex navigation system or information architecture intimidate you. There’s always a way to simplify it to its core and to provide those layers to the user in a way that is non-threatening and easy to understand. Take on the challenge and have fun with it!
You may be interested in the following articles and related resources:
(al) (ea)
© Jon Rundle for Smashing Magazine, 2013.
]]>|
|
Are you underestimating this deceptively “neutral” color? Either it’s considered cheap (because it reminds us of putty colored school cabinets and our landlord’s choice of budget “Navajo White” paint) or boring (for the same reasons, I suppose)… or it makes us think of something that started out snowy white, but yellowed in the weather. There are plenty of reasons to dismiss it as a color and miss out on some of the amazing magic beige can create for a design palette.
Used with thought and playfulness, beige can do surprising things for website design. The more consciously you pull it into a layout, the more you can do with it. It’s more than just a “neutral” background. The strip of color chips below look like a rainbow, but look at one on its own or with a stronger color and it will seem to take a back seat. What it’s really doing is establishing context.
Among other things, beige is used to add warmth, to evoke a historic period or luxury, or to give a space an organic feel. It changes dramatically when grouped with different colors, appearing to be nearly gray or surprisingly color-rich. It can make other colors pop or it can temper them, unifying a palette by both absorbing and reflecting the colors around it.
Designers and other colorists debate at what point beige stops being beige. It can turn up in a broad range of hues. The chip set above purposely veers out of range so you can get an overview of where it lives in the HSB color model. Pink or green can go beige as you desaturate them, but the colors in the middle will still come across as beige with even more saturation than shown here. Still, the very colors that look obviously un-beige in this example can take on some of its qualities in the right context.
The Red Bulllet Web Design website is a good example. It’s often included in collections of great beige site designs although it really pushes the green end of the scale.
Browsing the Japanese collections on the Los Angeles County Museum of Art collections website, I found even more beige inspiration than I expected, including bursts of translucent gem tones and rich blue hues, all made to really sparkle when paired with the warmth of beige. First, have a look at the range of colors you can call “beige” in the woodcut below.
Oiran in Summer Kimono, color on silk hanging scroll, attributed to Hosoda Eishi (18th-early 19th century).
Because the artist used white on the kimono fabric prints, it’s even more clear how beige was consciously used elsewhere, from the woman’s nearly pink fan to the gold clothes rack to her flesh tones, and more.
It might be said that we either ignore or misuse beige because we’ve seen it accomplish so many things.
Beige and crimson are common to see in Asian art, and the impact is often luxurious. It’s a popular palette for upscale food sites, as well as higher-end money sites. I emphasize crimson over red because in these context, I usually see it on the cool side, heading toward pink, rather than warmer true reds.
The woodcut below shows how nice both large and and very tiny areas of crimson can look with beige. Little spots of color, like the woman’s lips, and larger areas, like her collar, are good suggestions for usage on a layout. This print also has examples of both warm and cool beige tones. The purples, greens and warm grays can be good jumping-off points for a palette, too.
Asaoka Watching a Mouse on a Screen, woodcut by Tsukioka Yoshitoshi (circa 1875-1876).
Here’s a beautiful example of beige (yes, that’s beige: #fffef6) and crimson for a luxury coffee brand. And that really is it: the ribbon is the only place on the entire page where crimson is used (I highly recommend their coffee, too).
The variety of blues in this next woodcut (and another example of both warm and cool beige) also grabbed me as I was browsing the LACMA collection. The secondary use of red and black are pretty smart, too. Warm beige starts to look gold, especially when grouped with deep crimson or navy blues. Cooler beiges tend to evoke winter (check out the snow in the print), as well as some urban sophistication, and will look just as classy in the right contexts.
The Ferry at Yoroi, woodcut by Utagawa Hiroshige II (1862).
Used with pastels and candy tones, beige can be used to keep the feeling light. White may be too contrasty and formal. A warm beige can help create colors that draw us in, and that we may even want to eat.
I threw a little licorice into the the sketch below to give a shout out to beige and black, which is an incredibly versatile combination that could probably fill its own entire post with applications as varied as luxury, retro, humor, even kids’ brands.
Here’s an inspiring website example that does beautiful things with candy-toned blue and beige. If you’ve done any research on beige for web design, you’ve probably seen this one, for good reason.
Groups of beige tones alongside other natural hue sets really benefit from the backlit computer monitor. A little finessing will evoke sunlight through leaves or flower petals, or a glistening ocean near the sand. I’ll never stop taking cues from nature. I’m guessing the Cooper Graphic Design website design below does a bit of that, too.
Beige, especially when it’s thoughtfully textured, also brings to mind a life “unbleached” — natural fabrics, unbleached sugar, unbleached paper and other things that industrialization has made unnaturally white.
Because those of us who’ve grown up in the Western world have so many negative connotations with the color, it’s important to proceed carefully. Take into account the audience, as well as the context within which your colors will be seen.
Beige is not only sensitive to social context, it’s also very, very sensitive to color context. A shade that looks creamy on its own can, for example, unexpectedly pick up the yellow tones around it, and turn sallow or dull. If your colors start to lose their umph, try rebalancing the beige (add or subtract saturation, shift the hue toward the yellow end or toward the pink end), or, if that particular shade of beige is your priority, adjust your primary palette colors to harmonize better with it.
Do you use beige in your work? What colors do you find it works well with? Let us know in the comments.
| 10 Professional Cartoon Characters in 400+ poses – only $24! |  |
|
|