Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 24 2014

04:22

August 30 2013

08:29

Original And Innovative Web Layouts


  

The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.

An original, creative layout goes a long way to improving the user experience of a website, although not letting your creativity get in the way of usability is important. As usual, we have to put ourselves in the users’ shoes: What do we want them to see first? How will your message be best communicated? We have to ask these questions before we start designing, because the layout will shape the rest of the design.

Well, the following websites have some quite… unusual layouts. They aren’t necessarily perfect; still, browse through them, and maybe, just maybe, your creative genius will be sparked.

Original Web Layouts

Beurre & Sel
This website is just beautiful. The automatic slideshow plays in the background, with the main navigation bar at the top. As you scroll down, the navigation shrinks but remains fixed at the top. Below is a colorful list of the different cookies the company makes, but these also serve as buttons in a submenu. When you click on a flavor, information overlaps this submenu, allowing you to click through the assortment of cookie flavors. The navigation bar at the top and the submenu are confined to the middle column of a three-column grid, maintaining the user’s focus at the center.

Beurre & Sel

Hackery, Maths & Design
As the page loads, a fun 3D line animation starts to fill the screen. The arrows indicate movement and fluidity and encourage the user to scroll down toward the content. The content below is laid out in a three column grid with two main columns and one smaller side bar. However, it doesn’t feel boxy and constrained but has a more open feel — this is due to the ample space given and the use of rounded corners. The layout of this site is comfortable for the user.

Hackery, Maths & Design

The Drawing Room
I love this layout, simple yet so visually interesting. The studio’s work is displayed in diamond shapes of different sizes that fit together. The center diamond is the nameplate, which isn’t too prominent and so doesn’t detract from the work. As you hover over a diamond, it fills with a description of the work. This single-page website has an original and clean layout that it easy to use.

The Drawing Room

We Love Noise
Luke Finch’s portfolio has a fun and friendly layout. The work seems to be haphazardly scattered, breaking away from too clean and predictable an approach. The transitions tell you a bit about the projects, and you can navigate using the arrows. The little heart in the top-left corner is the navigation for the whole website, it swivels into an “i” on the home page. When viewing a project, you can exit by hovering over the heart.

We Love Noise

Ende
This layout is dynamic. Upon loading, it greets you with a quirky photograph and prompts you to scroll down, where the navigation appears and eventually affixes to the top. I really like the transparent navigation bar, which opens the page up a little, revealing the content underneath. The content is scattered around the page, although the website does have structure; each section is set off by a different background color. The projects are prominently displayed in a three-column grid, but the section for the team members breaks away from the grid and uses the space in an interesting way.

Ende

Edward Carvalho Monaghan
How’s about some color? This portfolio website has some serious personality, and the work is loud and lively as it moves about. Most effective is the consistency in style. The website coheres as a complete work, representing the designer while supporting the individual portfolio pieces — which is precisely what such a website should do. The color palette is incorporated in the nameplate, and the flashing animation brings energy to the website.

Edward Carvalho Monaghan

Huys
This site has an original take on layout with the right side of the page acting like a kind of letterhead, providing all the necessary information like who they are and what they do. The left side of the page scrolls vertically and resembles the layout of the windows of the condominiums they build. Once you click, you are directed to a more blog-style layout which is easy to navigate.

Huys

KathArt
KathArt has a great video layout. The personality just about oozes from this simple yet highly effective design, as you meet the members of this team. The team members are introduced as they’re working, as though you’re in the office with them! The navigation as a timeline is clever because you can track the progress of the video easily.

KathArt

Wacom
Wacom targets a wide audience of both professional and non-professional creatives with its website. The layout is an integral part of this and creates a user-friendly experience. The navigation on the left minimizes when hovered over, and it shows the various categories available. The user is in control and can choose which products to look at; they are not coerced or subjected to a sales pitch. The layout of the home page is simple and guides the user to the product that best suits their needs. I like the subtle hand-drawn elements that accompany the products.

Wacom

Amsterdam Dance Event
The layout here really helps to showcase the attitude and spirit of this event. The navigation runs down the left side, becoming a reference point across the website. A slideshow of strong, visually stimulating images rotates, with teasers for the event’s festival, playground and conference. This is an effective way to engage users.

Amsterdam Dance Event

As you scroll down the page, the content below slides over the slideshow, bringing the submenu from the bottom to the top. Each section of the website has a banner that runs across the screen, making for a visually appealing introduction to that section. The rest of the articles are laid out in a grid. The rows in the grid don’t line up perfectly; each column starts slightly lower than the last — another small yet effective visual device.

Cropp
Cropp has a big and bold personality, and the layout showcases it. As you hover over an image, the image pixelates beyond recognition, which grabs your attention. The navigation bar at the top is consistent across all pages, and the home page is basically a loud, visual representation of the options in the navigation. The layout captures the idea of pixellation, and all photographs and videos are laid out in blocks, like a pixelated image.

Cropp

Neue Yorke
The grid layout for Davy Rudolph’s portfolio is simple and minimalist — pretty straightforward and natural to the user. Each page has only two colors, unique to that page. When you click on one of his projects, the showcase takes precedence, and the main navigation panel disappears. What I like about this approach to a portfolio website is that, while it has personality, the personality does not detract from the designer’s work.

Neue Yorke

Juliana Bicycles
Juliana has a rather unusual and innovative design for a bicycle store. Upon loading, a beautiful photograph fills the screen with richness and warmth. The website is laid out in four sections, which are kept hidden behind the navigation icon. The design seems to have a more feminine touch, and the typography is bold and strong with a bit of flair. The 3-D hover effect on the bicycles is a nice touch as well.

Juliana Bicycles

Esquire
The layout here is simple, clean and accessible. Esquire’s identity is a monochromatic black and white. The article teasers are in color, drawing the reader’s eye. The hover effect is also simple, with a description below the teaser caption. The navigation is in the middle of the website, functioning much like a newspaper, where the reader becomes intrigued by the content above the fold. The images, color and brief headlines grab the user’s attention.

Esquire

Institut Choiseul
Intitut Choiseul has an attractive block layout that fits together like a puzzle. The layered look with the slabs of color help to establish the identity. Further down the page, the layout transitions to a more traditional grid, although each story is in a different-sized block, creating an interesting and dynamic aesthetic. The different blocks of color set off the different parts of the website, making it easy to navigate and read. The website has a sophisticated and refined quality, suited to its purpose.

Institut Choiseul

Award
Award celebrates creativity, and its neutral design aesthetic sets the stage for the designers’ work effectively. The grid layout doesn’t have any trim or frills that would detract or clash with any of the designs being featured, but the interesting hover effect has a nice pixelated drop-shadow. The navigation is fixed to the left of the page, and the search and filter functions are fixed at the top. This navigational arrangement is best suited to showcase the contents of the website.

Award

Harry’s
The experience of this website is lovely. The designers make great use of the grid, which has a classic appeal appropriate to the target market. The open, clean, structured design makes for a pleasant user experience. Being a website that sells men’s razors, Harry’s features images that are sophisticated and manly without feeling brutish.

Harry's

The King’s of Summer
This Tumblr website conveys the charm of this movie with the layout of photographs, the occasional GIF, and quirky lines from the movie. It has a structured yet not uniform layout that is fun to scroll through, and the handwritten type for the title helps to establish a scrap-book feel. The unique arrangement of content blocks creates an interesting visual, with pictures and GIFs overlapping every now and then, guiding the user’s eye around the website. A movie website should convey the complex personality of a feature-length film, and although I haven’t seen this movie, I definitely have an idea of its personality.

The King's Of Summer

World Baking Day
The layout of World Baking Day requires interaction of the user right from the get-go. As the page loads, you are prompted by an animated hand-drawn arrow to choose your baking level. If you choose to view all recipes across all levels, instead of one at a time, then you’ll be greeted with an entire screen full of delicious, mouth-watering recipes.

World Baking Day

The layout treats food like a work of art, showcasing photographs of the baked goods on most of the page and redirecting you to another page for the recipe itself. The recipes are neatly laid out in three columns: ingredients on the left, instructions in the middle, and information about the contributor on the right.

Paper & Paint
The layout and interaction of Paper & Paint is original. As you navigate, the website almost snaps from section to section, and the layout and structure are appropriate to the product. The navigation is hidden and appears when you select a color scheme. The images are prominently displayed as you scroll through, and the top of each subsequent image teases the user, inviting them to scroll to see more.

Paper & Paint

I love the way the images move inward as you scroll down the page, making for an interesting visual dynamic. Another nice interactive feature is “painting” the wall different colors using your mouse, which adds a bit of fun.

Newsweek
This layout is anything but conventional for a news website. The home page of Newsweek is simple yet bold, with the photograph for the lead story set as the background image. The small red tabs throughout signpost the website, indicating the types of stories being featured. The layout is broken up into sections that don’t all follow the same grid. The “Newsmakers” section makes use of a standard grid but breaks away from the conventional table look, with some of the images appearing as circles, instead of the usual squares. As you scroll down, the same pattern for each day’s news is laid out in this way, which creates a consistency that is easily understood by the reader.

Newsweek

Abby Putinski
An original approach to a portfolio site, Abby Putinski seperates herself as a creative illustrator and graphic designer. Upon loading, an animated introductory window falls onto the screen inviting the user to explore her work. Once you close the window you move around a map compiling all her adventures. This site doesn’t really have a layout and is free and open with no clear boudaries, making it so interesting to navigate. When you click on a work, the image in a postcard-type frame falls onto the page, reiterating the idea of adventure and travel. The navigation is always available and fixed to the top in the same illustrative aestheic.

Abby Putinski

Baumastisch
This tight grid layout is a nice way to showcase a portfolio of work. When you hover over each piece, the title is given but when you click on a work, a “front page” for the work appears. This page provides all the necessary information about the project, such the date, the client, the desinger’s role etc. which is consistent throughout all the projects. You have to click through a slideshow that fills the screen to view the project. I think it’s a really effective way to showcase work.

Baumastisch

Norwich University of the Arts
The strong photography and beautiful images do a great job of showcasing the artistic talent at this university right from the start. The background image on the home page tells a story, drawing the user in. I like the layout of the navigation to the side; it is different but works well and doesn’t overpower the image or layout. The labels are all yellow, creating a consistent visual identity. The drop-down menus take prominence when a category is clicked, which the layout accommodates well.

The logo also caught my attention, with its neat Helvetica lettering. It isn’t overpowering, but the tilt of the “N” adds something different, a little spunk. Our first impression is established by the large background image, but then an arrow invites us to scroll down to view the various stories, which are featured as large thumbnails with captions. The rest of the page is fairly conventional.

Trask Industries
Trask Industries is a viral website for the new X-Men movie. The layout is simple but effective. It is divided into three parts, with the navigation sidebar fixed to the left, a video in the center, and the main content scrolling vertically on the right. The video used here works well to create anticipation for the movie. The animated hover effect in the navigation icons is a nice touch. The point of the website is clear, as demonstrated by the prominence given to the video. The transitions are rather nifty, as the content sections slide out and back in. Also, try resizing your browser to see how the layout changes — the navigation is hidden, with the content visible as you scroll down the page.

Trask Industries

Adam Hartwig
This website is really interesting for its seeming lack of layout. It is created with Flash-like animated typography that continues to autoplay throughout the website. Even without clicking through the various categories, the user gets an idea of the designer’s work through the animated slideshow. The animation is consistent, and the illustrations are cute and do a great job of illustrating the designer’s creative personality.

Adam Hartwig

Contad
Everything here — the CSS, HTML, JavaScript and SVGs — animates as you scroll. It’s crazy! The bright colors are stimulating, and the design is made up of intricate illustrations. The downside is that the website was developed only for desktop computers with a mouse, and it works only in Chrome.

Contad

National Academy Museum
This layout has a layered feel, exhibiting a modular approach. The different elements on the page seem to overlap one another; for instance, the navigation bar stops about three fourths of the way across the page. The photograph lies below the navigation, and the buttons and captions are written in colored blocks, adding to the modular layering aesthetic. I also like the drop-shadow effect with the drop-down menus in the navigation, which creates an interesting depth.

National Academy Museum

Andrew McCarthy
Andrew McCarthy’s portfolio has a unique layout. Bands of color wash the page, and more information about the designer is revealed as you scroll down. A clever stop-motion graphic of a pixelated feline runs in place as you scroll. I love the movement created by this simple idea. Incidentally, the website also relies on the interaction of the user.

Andrew McCarthy

Mikael Edwards
Animation, when used wisely, can really contribute to the functionality of a website. Mikael Edwards uses animation that is both visually appealing and functional. We’re designing for the Web, right? There is no need to squash everything onto the page or wrap text around images. Why not include interactive animation and make it fun? This idea works well here as a hover effect. The blue dot represents the cursor; as you move the mouse in, the image shifts, making space for the text.

Mikael

Designer’s Friend
Not quite what you were expecting from a designer’s website, right? Designer’s Friend looks like the HTML code behind the website itself. Everything you need to know is right there in the code, with the tags acting as headings. The “Tip of the Day” box is a wonderful device that guides the user through the website.

Designer's Friend

Hatched
The layout for Hatched is anchored by the navigation and sections that run wide across the screen, creating a boldness and openness. The responsive navigation is interesting. On a smaller screen, it could look clumsy; but here, the navigation, including the social network buttons, is kept to one menu button.

Hatched

Institute for Emerging Issues
This website has nice consistent transitions, with the circles popping up as the page loads. The website is well structured, and the circles create a friendly counterpoint to the statistics below. The captions in the “Challenges” section look like speech bubbles, adding to the friendly atmosphere. The hover effect on these captions is visually appealing as well as functional. The user is not bombarded with statistics because the numbers are hidden and revealed only when hovered over.

Institute for Emmerging Issues

Into The Arctic
The layout of Into the Arctic engages the user and incorporates their interaction. The video in the background captivates the user and illustrates its cause. The style of the navigation is different — as you hover over it, it folds out with more information, like a pamphlet. The typography is also alluring, and the pull quotes are particularly strong. The design of the website is just really well executed.

Into The Artic

John Jacob
This portfolio has horizontal scrolling, which is very unusual. When you click to view a work, it unfolds to the middle of the screen, with an enlarged view and a short explanation of the work. The descriptions and list of work are short and concise; you don’t feel like you’re constantly being redirected to other pages. I really like the navigation, clustered in the top-left corner with the designer’s social network links in the bottom-right corner, framing the page. The designer uses the space effectively, and the swivel effect is interesting.

Postable

Impress
The white space here is refreshing and creates an openness and friendliness. White space allows the user to read and navigate comfortably and to use the website effectively. The hover effect is different; it is as though half the paper folds up. When clicked, the button folds over like a book to reveal more information.

Impress

Postable
Postable has a cute concept; it sends beautifully designed thank-you cards by email for you, and the design of the website has a real snail-mail look. The design and layout throughout play an integral part in communicating the concept. The background has a real paper texture, with a top border resembling an old-school envelope. The authentic real-life feel is a lovely touch on the Web form, as though you’re scribbling your information on a sheet in a notebook.

Postable

National LGBT Museum
This website has a new take on single-page layouts. The scrolling mechanism here is really cool; the page splits in half, with the two halves scrolling in different directions, creating a dynamic effect. The sections are in different colors and snap together as you scroll.

National LGBT Museum

Lucas Nikitczuk
I really like the layout of Lucas Nikitczuk’s portfolio because it showcases his skill. It gets straight to the point, with a short biography of the designer and his work right there on the home page. The circles create a friendly and fluid aesthetic. The paint spills in the background add to this and create an openness and freeness to the website’s identity. The navigation is pretty simple and works the same throughout the website. Another nice touch is that you can navigate with the arrow keys, which is helpful for laptop users.

Lucas Nikitczuk

Conclusion

The layout is the foundation of your website and a crucial part of any creative endeavor. Consider the user and how they will interact with the website. Will they likely be viewing your website only on a mobile device? How would that affect the layout? I hope you’ve gleaned some inspiration to tackle some layout designs yourself!

(al) (il)


© Shavaughn Haack for Smashing Magazine, 2013.

Sponsored post
feedback2020-admin
04:05

August 29 2013

06:30

Building an Interactive Navigation Bar with HTML/CSS


  

A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

July 11 2013

09:44

Creative And Innovative Navigation Designs


  

A website has a personality — it is a reflection of the person or organization behind it. When people visit your website, you want it to stand out from the crowd, to be memorable. You want people to come back and use your website or get in touch with you.

So, to distinguish itself from the unwashed masses, your website not only needs remarkable content, but also has to be innovative yet functional. Ask yourself, what would make life easier for your user? Simple search functionality may be needed, or perhaps the navigation menu could use some sprucing up. Nevertheless, the personality of the website needs to be consistent throughout. The following websites will whet your appetite for extreme creativity. Browse through and explore them for yourself.

Creative Navigation Designs

Toybox
Navigation should always be there when needed, and graciously disappear when the user wants to focus on a particular task. For example, in designing the checkout for an online store, the navigation should always be accessible but also give enough prominence to criticial features of the website, such as the checkout form. The navigation for Toybox does just that.

Toybox

It feels like you’re peeking behind the page or the lid of a toybox to see what’s inside. The navigation is easy to use, and the swivel effect directs the user’s attention to the navigation bar when they’re using it. Hiding the navigation also allows for a simple, clean design that makes viewing the projects quite pleasant, because the projects are not competing for attention.

Information you might want to know, such as what Toybox does and where it is located, can still be found in a discreet navigation bar at the top. The hover effect is also fun, as the other images get pushed back and fade as the user focuses on one project.

Olivier Bossel
The portfolio of Olivier Bossel, an interactive designer, is interesting. The navigation elements create an effect of exploding pixels as you hover over them. The effect is quite dynamic and contrasts with the otherwise clean design. It works nicely as a visual element because it encourages the user to continue through the website. The consistent visual voice and tone complement the brand’s identity. Just by viewing the website, the user experiences the designer’s work.

Olivier Bossel

Tsto
Tsto, a design agency, has a simple yet unorthodox approach to design; its navigation is different from what we’d expect. A navigation element is fixed in each corner of the screen, framing the work being showcased. The visual identity is created with heavy hot-pink letters, along with the descriptive information. The hierarchy is clear, however, with the “Work” tab in the top-left corner, and the “Contact” and “About” tabs at the bottom of the page. In keeping with the style, the title of the work being showcased is in the same heavy pink font.

Tsto

When clicking through the work, which presents like a slideshow, a preview of the next project is shown when you hover over the arrow. The images are large and take up most of the page. As the user clicks through and views the large images, they get a clear idea of Tsto’s identity and work.

Derek Boateng
Derek Boateng’s portfolio welcomes the user with a polite “Hi” upon loading, and an arrow directs you to scroll down. The general design is understated; it doesn’t shout at you, but rather gently guides you through the work. As you scroll down from the loading page, the header and navigation shrink back, allowing more space for the portfolio. This is a good example of navigation that is always accessible yet gives center stage to the main content.

Derek Boateng

Second Story
Ah, good ol’ horizontal scrolling! Second Story’s website works like a magazine app on a tablet. It is innovative in that it doesn’t have the feel of a typical Web page and it scrolls horizontally. The content is laid out in columns, and each section scrolls vertically. The navigation is anchored to the left, which helps to establish the rhythm. As you view this portfolio, the navigation minimizes to a bar on the left and reappears when hovered over. You can choose to view the portfolio in thumbnail view or as a slideshow.

Second Story Interactive Studios

Mostly Serious
As its name suggests, Mostly Serious has an element of playfulness to it. You are greeted by navigation that is designed as balloons floating around. The friendly animation creates movement on the otherwise static website and sets the tone for the brand. While you can come back to the home page at any stage, a subtle navigation bar appears at the bottom of the page. The website is functional, with a splash of the studio’s fun personality. Actually, it reminds me of funky Flash animations from the good old days (EYE4U, anyone?), but because the website is supposed to be a little playful, it works well in this context.

Mostly Serious

Minimal Monkey
Scrolling through articles in this bold simple design reminds me of browsing a bookshelf. The hover effect singles out an article for the user to focus on. This website also has a clever design for the “About” and “Contact” sections: When you click on a tab, the page drops down to reveal the information. It’s a simple way to provide information without redirecting to another page.

Minimal Monkey

However, viewing old articles is not so easy because there is no search functionality. If the user is looking for a particular article, they would have to scroll through to find it. Search functionality would be useful without changing the overall design too much.

LayerVault
It’s amazing what effect a simple, clean layout with playful colors and fun animations can have. LayerVault balances white space and subtle animation to intrigue and engage the user. Animation can be used to illustrate a point, to guide the user through a website, or even to illustrate how-tos. Animation doesn’t always do the trick, but LayerVault applies it sparingly, and only when the user is browsing a particular section of the page. The result? A well laid out page with engaging and attractive illustrations.

LayerVault

Escape Flight
Escape Flight is cleverly designed, and the logo animation as a page is loading is novel and funky. The navigation is fixed at the top and looks like a departures and arrivals board, as though you’re at the airport already! The drop-down menus look like a travel checklist, which works well with the theme. When you click on a location and scroll down, all of the important information remains fixed at the top, making access to the content much easier and more comfortable for the intrepid traveler.

Escape Fligh

Making use of stunning photography, Escape Flight maximizes its space. It’s exactly what you want from a travel website. It gives you a little taste of the adventure that awaits, beautifully showcasing the amazing destinations. When you hover over a destination, you find exactly what you need to know: ticket prices, weather conditions, flight time and travel length. What more could you ask for?

aSCIIaRENa
Calling all ASCII enthusiasts! aSCIIaRENa reeks of the ’90s. People can register and post news on the wall, submit their own text art, and get featured on the wall of fame.

Asciiarena

The Sartorialst
Photographs are the focus on this website, and the design supports that with no muss or fuss. More importantly, the website uses the hover effect quite elegantly; captions slide in from the side and slide out again, following the cursor.

The Satorialst

SilkTricky
The people behind SilkTricky are out to break the status quo, and their website doesn’t let down. Mousing over the images creates an interesting effect. The movement on the page creates a sense of activity that intrigues the user. On this single-page website, the user doesn’t have to click from page to page to navigate. Just click “View,” and the chosen article folds out as the other articles shift off. This would be a nice way to showcase a photography portfolio, too.

SilkTricky

SumAll
SumAll’s layout is clean, with no unnecessary extras that would distract the user. Hovering reveals more information in a simple understated manner, and the transitions are an extension of the hover effect. When you click on a button, succinct information and options appear below. I quite like that you aren’t redirected to another page when you click an option; rather, the information tidily appears below the button.

SumAll

Potluck
Sorry for being so enthusiastic about this one, but Potluck exhibits a fantastic user experience. The generous white space helps the user access what they need, when they need it. The forms and buttons have a fresh and open aesthetic that makes them easy to spot and use. Both the text and beautiful graphics are laid out in a way that guides the user through the website. The buttons and icons work well together, and all buttons and input areas feel consistent and engaging. This is a great example of how a bit of well-chosen typography and a subtle, clean user interface go a long way to engaging and delighting users.

Potluck

Lowdi
The single-page responsive layout works quite beautifully. Lowdi uses lines and shapes to set off sections of the page, a great way to break away from the conventional boxy layout. I love how the “Order now” button is incorporated in the design with line and shape. These elements adjust to your screen effectively, and the design maintains a flow throughout, which makes for easy viewing.

Lowdi

Barcamp Omaha
Barcamp Omaha is an online invitation to an event. The single-page tool effectively guides the user through the narrative with a consistent visual theme. All of the essential what, where and when information is at the top of the page, but the design urges the user to scroll down to see what else they can find. I really like the clever integration of the Twitter and Facebook icons.

Barcamp Omaha

As the user scrolls down, more information is provided systematically, and the layout remains tidy and succinct, with bold headings. The categories of conference talks are illustrated with simple animation to keep the user engaged. Once you’ve scrolled down the building and reached the ground, contact information is waiting for you, easily accessible.

Combadi
This website feels tranquil as soon as it loads, a result of the careful design. While it does not have a lot of white space, it does not feel claustrophobic. Tabs expand on hover, providing more information and enhancing usability. Along with the other elements, this effect conveys an airy, calm feeling. The design mirrors the vocabulary of the website, and the various elements work together to achieve a coherent and consistent identity.

Combadi

Waller Creek Conservancy: The Final Four
A hover effect should not only provide more information, but also contribute to the visual appeal of the website. This website does that quite beautifully by expanding the image as you hover over it. The image also changes from greyscale to full color, with a caption. The effect is quite captivating.

The Waller Creek Conversy Design Comepetition

Lift
When laying out products or items on a website, it’s easy to end up with a static catalogue-style view. Lift’s simple hover effect rotates the books to display a 3-D version. This seemingly minor and simple visual effect really makes the website more interesting. The user feels that they are involved and can interact with the website. You can achieve this 3-D effect, too.

Lift

Snowbird
Snowbird is a dynamic website that involves the user. The current weather is displayed and, when you hover over it, folds out to reveal the week’s forecast. The hover effect on the “Full Report” button, as it transforms rounded corners into square corners, is subtle yet effective. The teasers are triangular and look like a snowbird’s wing; when hovered over, they unfold into a square for a larger view.

Snowbird

Etch
The square sections on this website are tightly laid out but don’t feel cramped. The navigation in the top-left corner takes up little space because icons are used for the various categories. You can toggle the navigation to show and hide in the large view by clicking the menu icon. The responsive design makes the website easily accessible on any device, without losing functionality or brand appeal.

Etch

Would You Like To See More Showcases On Smashing Magazine?

How’s that for inspiration? With so many fresh ideas to implement, we mustn’t forget that the personality of a website still needs to engage the user. An effective website should be creative yet user-friendly.

Leave a comment and let us know if this article was helpful and whether you’d like to see more showcases like it.

(al)


© Shavaughn Haack for Smashing Magazine, 2013.

May 06 2013

13:56

New Defaults In Web Design: How Much Has The Web Really Changed?


  

Responsive design is about more than just layout; it’s about designing for the Web, which means, mostly, for people with browsers. And that’s just about everything we know about the people who visit our websites: they are probably using a browser. All the rest we just don’t know.

Up until not so long ago, we used to base our designs on some rather general assumptions about screen size and input type. With the rise of devices with various screen sizes and alternative ways to interact, these assumptions have turned out to be unreliable. We need to upgrade the defaults that we use when we start designing our websites.

A Closer Look

People keep saying that the Web has changed. But has it really? Let’s take a look at all of the things that have actually changed.

Screen Sizes

In the 1990s, the Web was 640 pixels wide. In the early 2000s, it grew to 800 pixels. A few years later, we decided it should be 1024 pixels. But five years ago, all of a sudden, something strange happened. A device with a very small screen entered the market. Suddenly, our ideas about the size of the Web did not work anymore. Later on, tablets entered the market. People hold these things however they want. Today, the height of the viewport could be bigger than the width! But is that new? Not really.

Screen sizes, shown in a non-flexible medium. Photo and work by Aram Bartholl.
Screen sizes, shown in a non-flexible medium. (Photo and work: Aram Bartholl)

We never really knew what size the window of our visitors would be. We just assumed it was at least the random pixel width that we felt comfortable with. These numbers were always arbitrary, and there were always people who could not see the entire website. We simply ignored them.

“Everyone Has a Mouse”

We’ve always assumed that everyone uses a mouse. Even though we knew that this was not always true, most designs completely ignored alternative ways of interacting. People who had to use a keyboard, for whatever reason, had a very hard time interacting with our websites.

But because most people did use a mouse, and because back then many designers thought that designing only for the majority was OK, we created websites that were unusable for a lot of people. And this turned out to be a growing number. Many mouseover interactions are completely dysfunctional on a touch device. Because people love these devices, and even managers and designers use them, they are harder to ignore.

“Everyone Has Broadband Internet”

Another thing we always assumed was that everyone had a super-fast Internet connection, at least as fast as our own. And if they didn’t already have it, they’d have it soon. This was again mostly true; speeds were increasing. But today, more and more people use crappy, unreliable 3G connections all the time. If you’ve ever travelled on a train in The Netherlands, you know what I mean. And if you’ve ever had to rely on the mythical “free hotel Wi-Fi,” then you know for sure that the assumption about the ever-increasing speed of our Internet connections is just not true. This is a big change in our thinking; we really should consider these users. This will have a major impact on what our designs look like.

“Everyone’s Computer Gets Faster Every Year”

It used to be true that computers would get faster and faster. If you waited half a year before buying a computer, you would get one that was twice as fast, for the same price. This was true of new desktop computers, but mobile devices have priorities other than processor speed. The most important thing for a phone, for instance, is battery life: you really don’t want to have to charge it after every phone call.

And there’s another trend: instead of creating ever-faster devices, many manufacturers are starting to sell ever-cheaper devices. Many people care about price and battery life more than about processor speed. This is also not new: what happened to your old computers? You probably sold them or gave them away. People keep using old stuff. Not everyone has the same hardware as we designers do.

“All Monitors Are Calibrated”

Well, we always knew this to be untrue, right? Only the monitors of visual professionals are calibrated. Most other monitors don’t display colors accurately, and many monitors are downright crappy. Most mobile phones that I’ve tested have pretty decent screens, until you start using them outside, in the sunshine. If you’re lucky, you can read the content, but you definitely cannot see the subtle gradients in low-contrast designs.

I haven’t even mentioned “modern” black and white screens. These, too, are not new. People have always used crappy monitors, and people with bad eyesight have always visited your websites. It’s just that more and more people are seeing a subpar color palette. Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.

All of these things are not new. In 2002, John Allsopp wrote the monumental article “A Dao of Web Design.” People such as Jeremy Keith and Roger Johansson have written about all of these facts for years and years. And yet, somehow, we’ve always managed to actively ignore them. But we really can’t anymore. The Web actually did change in the last five years, with new devices, new browsers and many, many cool new features. We need new defaults. The old ways of creating websites just don’t work anymore.

This Is Responsive, the excellent resource about responsive design by Brad Frost.
This Is Responsive, the excellent resource about responsive design by Brad Frost.

In the past few years, we’ve been actively researching new ways to deal with all of these different screen sizes. But apart from responsive design, there are many more challenges in today’s ever-growing pile of devices. We have to find new patterns of interaction: we need interfaces that work on any device. Maybe we have to reconsider that enormous photo carousel on the home page, now that we know that not everyone has a cheap and fast connection. New defaults are emerging, and I’ve collected a few for you here.

The things in this article are not new. Many clever people have written about them in many articles and many books. But these ideas, like all good stories, have to be repeated many times so that people understand and remember them.

New Default: Activate

I initially titled this section “New Default: Touch.” But I came to realize that “touch” has a different meaning for everyone. Some people, like me, think of a single tap when we hear the word. Others think about swiping and complex gestures. That’s why I settled on the heading “New Defaults: Activate.” All devices, no matter what kind of input they offer, let the user activate something in some way.

With a mouse, it’s a click; with a touch device, it’s a tap; on a keyboard, it’s the “Enter” key. There are ways to activate things by voice, and by waving your arms in the air. And many devices offer more than one way to interact. The only thing that all of these devices have in common is the action of activating. Most of them are capable of doing many other things, too, but all of them can activate stuff.

Only recently have we really started thinking about alternative methods of user input. We used to assume that everyone uses a mouse. Hiding content and showing it on mouseover was considered to be a decent design pattern. And it used to work for most people — until all of these wonderful touch devices entered the market. What should a device without a mouse do when content can be revealed only with a mouse? Different devices have different solutions. Let’s look at a simple drop-down menu.

You can find a live example of this navigation pattern right here.
See a live example of this navigation pattern.

When you hover over a menu item, a submenu appears. But apart from hovering over an item, you can also simply click on it to follow the link. Now, what should happen when you tap on the item with a touch device? Should the submenus appear, or should the link activate? Or both? Or should something else happen? On iOS, something else happens. The first time you tap a link like that, the submenu appears; in other words, the hover event fires. You have to tap a second time to actually follow the link. This is confusing, and not many people will tap a second time. On Android, the submenu appears and the link is followed simultaneously. I don’t have to explain to you that this is confusing.

It’s very well possible to think of complex solutions whereby you define different interactions for different input devices. But the better solution, I think, is to make sure that the default interaction, the activate event, just works for everybody. If you really need to, you could choose to enhance this default experience for certain users.

For instance, if you are certain that someone is using a mouse, you could enable some mouseover interactions. Or if you’re sure that someone has fat fingers, you could make small buttons a bit bigger. But only do so in addition to the default activate interaction, and only if there’s no doubt about it, and only if the enhancement would really make things better. Those are quite a few ifs, and some of them, such as the mouse usage, are very hard to detect — especially on devices that offer more than one way to interact, such as a laptop with an optional mouse, touch pad, camera, microphone, keyboard and touchscreen. Give it some serious thought. Do you really need to optimize for a mouse?

New Default: Small Screens

Growing is easy. Most things grow. Babies grow, trees grow, curious minds grow. They don’t grow by themselves, but you don’t need much energy to make things bigger. This is just what things do when they live. While shrinking things is definitely possible, it’s also much harder. You could, for instance, compress a car to a fraction of its original size. A compressed car does have a certain aesthetic appeal to it, but it is definitely not as useful as it was before. The same goes for websites. Shrinking a desktop website does not always result in a pleasant experience on a small screen.

Trees grow on their own, cars are less usefull when they shrink.
Cedro di Versailles by Italian artist Giuseppe Penone clearly shows that things grow. On the other hand, the work Papalote Goliad by American artist John Chamberlain shows that shrinking can be aesthetically appealing but may result in less useful results.

To build a responsive website that works on all kinds of screens, designing for a small screen first is easiest. It forces you to focus on what’s really important: if it doesn’t fit in this small square, it is probably not terribly important. It forces you to think better about hierarchy, about the right order of components on the page.

The same principle that we follow for interactions — whereby we design the activate event first and enhance it later — applies to graphic design. We should start designing the things that we know everyone will see. That’s the content. No matter how big or small a screen is and no matter how minimal the feature set of a browser, it will be able to show letters. Because this is about the only thing we know for certain — since color is absent on most Kindles, most of the latest CSS doesn’t work on old browsers, and layout is of minor importance on small screens — starting with the text is logical.

I wrote an in-depth article about defining breakpoints on the basis of typography, so I won’t repeat every detail here. But the basic idea is that you start by designing the relationship between the different font sizes. Almost everyone, no matter what device they have, will be able to see this. When the typography is done, you would start designing the layout for bigger screens; you can think of this as an enhancement for people with bigger screens. And after that, when the different layouts are done, you could add the paint. And by paint, I mean color, gradients, borders, etc.

I’ve presented this as a very strict way of working; in real life, of course, things are not as rigid. I’m not talking about “activate only” or “small screen only.” When I say to start with typography, I don’t mean that you aren’t allowed to think about paint at the same time. Rather, I’m trying to find the things that all of these different devices, with all of their different screen sizes and all of their different features, have in common. It just seems logical to first design this shared core thoroughly. The strange thing is that this core is often overlooked: Web professionals tend to view their own creations with top-of-the-line devices with up-to-date browsers. They see only the enhancements. The shared core with the basic experience is often invisible.

New Default: Content

The way we designed our websites until recently was by putting a header with the logo and navigation at the top, putting the subnavigation on the left, putting some widgets on the right, and putting the footer at the bottom. When all of that was done, we’d cram the content into the little space that was left in the middle. All of the things we created first — the navigation, the widgets, the footer — they all helped the visitor to leave the page. But the visitor probably wanted to be there! That was weird. It was as if we were not so confident in our own content and tried our best to come up with something else that our guests might like.

But rather than pollute the page with all kinds of links to get people out of there, we should really focus on that thing in the middle. Make sure it works. Make sure it looks good. Make sure it’s readable. Make sure people will understand it and find it useful. Perhaps even delight them with it!

Once you’re done with the content, you can start to ask yourself whether this content needs a header. Or a logo. Or subnavigation. Does it need navigation at all? And does it really need all of those widgets? The answer to that last question is “No.” I’ve never understood what those widgets are for. I have never seen a useful widget. I have never seen a widget that’s better than white space.

A typical news site with more attention for widgets versus the complete focus on the content on Medium.
Compare a typical news website’s attention to widgets with Medium’s complete focus on content.

By starting with the content first, you can come up with some very interesting solutions. For instance, does the logo really need to be at the top of every page? It could very well go in the footer on many websites; such as in digital style guides or on pages for registered users. Many links that we used to put in the subnavigation might work better in relevant spots in the main content.

For instance, the option to add extra luggage to a flight booking might be most effective right there in the overview of the flight, instead of in the middle of a list of links somewhere on the left of the page. And when looking at the hierarchy of a page, does the main navigation look more important than the main content? Most of the time it shouldn’t be, and I usually consider the navigation to be footer content. A simple “skip” link at the top of the page could either take the visitor to the navigation or fetch the navigation and show it at the top of the page.

In this era of responsive Web design, we need many new clever solutions. As we’ve seen here, our old defaults don’t work anymore. We need to reconsider how we work with interaction, how we approach design and how we shape our content. But we need to think about one other very important thing, and that is where our content comes from.

New Default: The API

Luke Wroblewski wrote a fantastic article about designing an application for the command line first, and then enhancing it for different needs. This is not just a nerdy idea, but a very practical idea, too. If you are able to design and develop your own application, you could test the functionality relatively easily before even starting to think about what it will look like on different devices. This requires designers to work with developers to design a feature that at first works only from the command line. If the feature does not work as expected, then you merely have to change the API, rather than also a bunch of visual designs. Once the API works as you want it to, enhancing it for all of the devices and screen sizes that you want to support becomes easier.

Most of the time, you wouldn’t design the entire API of the application that you’re building. Most companies would choose a content management system (CMS) of sorts or a specialized tool to help them achieve what they want to do. I’ve always been amazed that CMSes are so often chosen only by technical people and business people. This causes many problems during the design process.

Developers and business people have different goals than designers. Developers want stuff that is easy to develop on. Business people want stuff that’s cheap. But designers want to make the best and most beautiful things possible. These goals can easily conflict.

I’m not saying that designers alone should choose the system, but they should definitely be a part of the decision-making process. I’m convinced that the selection of CMSes will improve. And I’m convinced that CMS makers will start to improve their products once designers get involved. Right now, all CMSes I know of deliver hostile cruft unless you tweak them extensively.

But it works the other way around, too. If designers are involved in the selection process, they will have a say in the choice of tool and will understand how it works, what’s possible, what’s easy and what’s hard. This will result in designs that are based in part on the tool, not just on imagination. This is an important part of the design process that has not yet been optimized. Right now, the command line and the systems that deliver the content we design for are the domain of the developers, and designers have nothing to do with them. That is a pity. Just as you would want to take advantage of the knowledge of developers in the design process, you would want to take advantage of the knowledge of designers in the development process.

Progressive Enhancement

If you review the sections above, you’ll see that what I’ve described is nothing other than progressive enhancement. You start with the content, then design the content and optimize it for different screen sizes and devices, and after that you can further optimize for very specific features such as mouse usage and fat fingers. Many Web developers build websites according to this principle. They transform the beautiful Photoshop documents that they receive into all of the different layers described above.

This can work out fine if the developer has a good sense of design and a delicate attention to detail. But if they don’t — which is often the case — this can easily result in crappy usability and ugly details. I’m not saying that designers shouldn’t use Photoshop anymore. If that’s your tool, go ahead and use it. But do remember that you’re designing the layers of the Web, not the layers in Photoshop. There’s much more to the Web than a single beautiful image. People will see our creations in innumerable ways. We design for all of these people — remember that. We don’t just design for the CEO with a laptop. We also design for the people on the train and the people with “free hotel Wi-Fi.”

Tools

I’ve mentioned Photoshop a few times because it’s still widely misused for designing websites. One reason we have a hard time with progressive enhancement in the design process is due to a lack of good Web design tools. The tools we use are built to wow; they mostly help you to create the “paint,” not to design the core. Fortunately, more tools are popping up with very specific functions in the design process. These are micro-tools such as the International Measure Slider, which helps you to define breakpoints in your grid; tools such as Gridset, which helps you to create grids for different screen sizes; and excellent tools that help you to define typography. By incorporating these tools into our design workflow, we might start making better stuff.

Conclusion

The Web has always been a weird, borderless, flexible medium. In the last couple of years, we’ve started to realize that designing for this medium is fundamentally different from the design work we’ve done previously. The fixed dimensions and the singular ways of interacting that formed the basis of all types of media that we’ve worked with for centuries just don’t work on the Web. This truly is a unique medium.

We have to find new defaults, new starting points for our design process. I’ve explained some of these new defaults here, but of course there are many more. The way we work with forms, for instance, could probably use a whole series of articles by itself. Some new starting points are well established by now, but I’m sure many more will be invented in the near future. I am curious to hear about new patterns and new defaults that you have discovered and have used successfully in your projects.

(al)


© Vasilis van Gemert for Smashing Magazine, 2013.

April 15 2013

13:00

Creating a CSS3 Dropdown Menu – Video Tutorial

We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, around 40 minutes, this is because I have gone into great detail explaining the process. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3.

April 02 2012

11:00

Cool Tips and Resources to Make Your Website Tablet-Friendly

Is your website ready for the Tablet Revolution? Unless you are one of those Doomsday Preppers and you’ve been living in your bug out bunker for the past few weeks, you know iPad 3 just hit the market, and people are going crazy over it. It’s only taken a few years, but the release of Apple’s iPad, among all of the other tablets, has created a new HUGE trend that website owners need to be aware of. The Tablet Revolution, as some are referring to it, has cause many website owners to rethink their website design and layout. Earlier you could simply build a website for desktops and laptops. Then mobile smart phones came along and changed everything. Many website owners now have a mobile version of their website ready for any visitors who decide to stop by from their mobile phones. Well, it’s time to update your website yet again, this time for tablet owners. In this article we are going to cover why it’s important for your website to be tablet ready, talk about some Do’s and Don’ts, provide some example companies who are making sure their website is tablet ready, and provide you with the tools and resources that you need to create a tablet-ready version of your website.

Tablets have been growing in popularity over night

Tablets have been growing in popularity over night

Image Source

Why is it Important to Make Your Website Tablet Ready

International Data Corporation predicts that by 2015 more U.S. Web users will access the Internet through mobile devices than by using personal computers. 2015 is only a few years away and obviously in order for this to come true, the trend between now and then is UP.  Think about it. How many times have you gone to a website from your smart phone only to realize it’s clunky and you cannot navigate through the site easily? How long do you stay on that website? How often do you return? Using that same philosophy, now think about what tablet users will do if they hit your website and it’s not tablet ready. With more and more consumers using the Internet from their tablets, it’s critical that you take some time to update your website as soon as possible.

Do’s and Don’ts for Creating a Tablet Ready Website

Now that you realize how critical it is to create a tablet ready website, let’s go over some Do’s and Don’ts. Let’s start with the Don’ts.

If you’re doing the following, your website is not tablet ready:

  • Don’t include Flash if you want your website to work on iPad.
  • Don’t have too many clickable areas (links, etc.) too close to one another. Make sure your navigation is easy to find and easy to interact with.
  • Don’t have too much media cluttering your site. Photos and videos are great, but too many on any given page can make the site looked cluttered and could possibly even cause loading issues.

In order to make sure your website is tablet friendly, here are a few things that you can do:

  • Access your current website from a tablet to see where the hang ups are, what looks good and what doesn’t, and what the overall experience is. Take notes and brainstorm ideas for making your website function better on tablets, while maintaining its functionality for laptops and desktop computers.
  • Add more “on the go” content and information. One of the biggest advantages of tablets are that they can come everywhere with you. Tablet users are mobile and that could mean that they are looking for more “mobile-related” content. Think links to Google Maps, your contact information, etc.
  • Make sure your website font can be easily read from a tablet. Glare and lighting, as well as, a smaller screen size can make certain websites hard to read from a tablet. Usually laptops and desktops are set up and used inside and in well lit areas. Again, tablets are mobile which means lighting is going to be an issue more often for tablet users. Update your website font style, color, and size if you need to.

Following the steps above will help you get started updating your website to be more tablet friendly.

Example Websites that Have Become Tablet Friendly

Tablets have acquired several versatile usages, including reading

Tablets have acquired several versatile usages, including reading

Image Source

In just under 2 years, the release of Apple’s iPad has created an unimaginable amount of change across a multitude of industries. With more and more people surfing the Internet on tablets like iPad, more and more businesses are taking notice. Here are a few examples of big companies who have made their website tablet ready.

  • Amazon.com – In 2011 Amazon made a huge push into the mobile space with the release of their Windowshop iPad app and with their new look website. Brennon Slattery of PCWorld commented, “the new look and feel of Amazon.com screams tablet. It has a lot more white space, the messy sidebar on the left is gone, the search bar is enlarged for touchscreen fingertip use, and the product photos are easily clickable icons”.
  • Utah Government – Last August the state of Utah released an updated tablet ready website to make interacting with their website easier for tablet users.
  • Nike – Nike has updated their website to fully take advantage of the tablet interface. Nike’s website is one of the very best examples of a tablet ready website.

As this new tablet trend gets a little old we are going to see more and more businesses begin to overhaul their website to ensure tablet users can easily navigate and interact with their website.

Tablet Ready WordPress Themes

Are you running WordPress for your website? If so, then you’re very familiar with WordPress themes. There are millions of free and paid version of WordPress themes out there for you to choose from. That said, as of today, there aren’t a ton of WordPress themes that will allow you to have a website that looks good on laptops and tablets. If you’re running WordPress and want a theme that you can install in order to create a tablet ready website, here are a few good ones to choose from:

  • Onswipe – Make your blog look beautiful on tablet web browsers in under 3 minutes.
  • MobilePRO – A beautiful professional WordPress theme for mobile devices. However, it looks great on any computer screen.
  • Mobility – An iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin.

Tools and Resources to Create a Tablet Ready Website

Converting your website into a tablet friendly environment sooner rather than later is something that can separate you from your competitors. We will end this article with links to various resources and tools that you might want to check out if you want to take advantage of the Tablet Revolution and create a tablet ready website.

Pressly automatically lets you beautify your online publications

Pressly lets you beautify your online publications

  • Pressly automatically makes online publications as beautiful and touchable as native apps when visited on tablet web browsers.
  • For anyone looking to learn a little more about what the future holds for Tablet e-Commerce I highly recommend checking out Zmags recently released ebook entitled, “Mobile and Tablet e-Commerce: Is Anyone Really Ready?”.
  • Learning HTML5 would be a great skill to have if you’re thinking of making your website more tablet ready. Todd Anglin said, “virtually all modern devices with a web browser have broad support for the technologies defined by HTML5, like Video, Geolocation, Offline Apps, Local Storage, and CSS3 styling, making them the perfect target for aggressive HTML5 development.

Now that you have more information on why it’s some important for you to update your website tablet ready design and navigation, do you think it’s something that you’ll make a priority over the next 6 – 12 months? At the very least, open your website on a tablet to see what it looks like and how easy it is to navigate. Let us know your thoughts by leaving a comment below.

March 26 2012

14:47

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites


  

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

Dawid Wadach
The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

Justin Lerner
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Shelton Fleming
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

McCormack & Morrison
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack & Morrison
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack & Morrison
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

Moka
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Moka
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

Moka
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)


© Justin Mifsud for Smashing Magazine, 2012.

March 23 2012

10:00

Tips on Designing the Perfect Navigation System for Your Website

Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can be a big turn off for your readers if they aren’t planned well. Although webmasters assume that a simple menu is enough, most of the time yet they forget that a navigational menu has its own requirements. Sometimes a simple to use navigation will do just fine for your website design while at times you will have to click a lot of links into your navigational menu so as to compliment the various branches of your website.

This discussion will pick up some of the obvious forms of websites and then shed some light on how the navigational menu changes for each of them. Hold tight and don’t leave!

E-Commerce Websites

The buzz of today for developed nations and the future for upcoming nations, e-commerce has evolved as one of the most current businesses on the Internet and almost all of them have been able to earn their share of fame during their lifetime.

One common point between all e-commerce websites is how complex they are. No matter how simple a e-commerce portal is, at the end of the day lot of navigational links have to be used so that readers can order multiple items or continue shopping from the cart. This is when it becomes important for webmasters to come up with the perfect blend of simplicity and complexity that keeps readers on that e-commerce portal.

What better example then Amazon when it comes to an e-commerce portal. Amazon has been successful in coming up with a very simple to use navigational menu which leads to almost every category under which the company features products. Also, the search system of Amazon is next to perfect which almost always results into satisfactory queries.

One must understand that it is this two type of navigational system (menu+search) which helps Amazon to keep visitors engrossed.

News Websites

Ah, news websites! They are famous for their content heavy presentation. I am not sure if there is even one news website which I have read thoroughly. The amount of content generated by a news website is enough to confuse readers. And this is when a sorted navigational system becomes important.

Imagine a news website like New York Times with just a top navigational menu that links to Home and few other important categories. Nobody would understand the depth of the website if they used such an incomplete navigational system. It is important to understand that the general perspective of a reader for a news based website is a lot of content with a complex navigational system. So, if you are including a very in-depth navigational system for a news based website then you’re doing things right.

Blogs

Well, which discussion on navigational menus would be complete without talking about blogs? In this section we will target blogs that are content rich. One can argue that niche specific blogs can run with a fewer number of categories so the navigational menu can be avoided in these cases. In this case, we must understand that it is advantageous for niche specific blogs to divide their content into various categories. Now, these categories need to be listed in the navigational menu so that visitors can dig into various forms of content on that blog.

This is where it becomes very important for content rich and niche blogs to have all its major categories listed on every page of the blog so that navigation is a cakewalk.

On the whole, a blog can have following navigational styles to check old content which is not available on the home page:

  • Pagination - This is placed at the end of each page and gives direct links to other pages of the blog.
  • Archive Page - Some A-List blogs use archive pages which can be used to display a complete archive of articles easily accessible from that a single page.
  • Categories/Tags In Sidebar - This is a common feature used by most blogs. A list of categories or tags used by the blog can be shown on the sidebar so that they are easily accessible from every page.
  • Header Menu - This happens to be an obvious form of navigation in blogs. It can be used for linking to the most readily used pages like the Contact and About Us pages. Some blogs use the header menu to link to major categories.
  • Footer Navigation - In the last few years blogs have come up with a footer navigation where a huge footer is used to link back to literally everything on the blog. This footer can be used to connect categories, pages and tags together.

Please understand that it is the format of content and the amount of visitors that will decide what sort of navigation a blog should use. Usually it depends on the blog’s webmaster to do some form of A/B testing to understand what suits the blog the most.

Corporate Websites

Corporate websites can show extensive variations in their style. While some of the corporate websites are used as a platform to represent an already famous company. Such websites basically are the face of the company without any other meaning whatsoever. Such corporate websites keep the customers informed and that is it.

On the other hand there are corporate websites that will keep try to entice new customers. They play a different ballgame altogether but still, at the end of the day, they are corporate websites. The professionalism reflected from these websites is almost always similar.

It is this professional factor that forces corporate websites to include the least amount of navigation links. Usually, a header menu with links to basic pages is all that is required to complete the navigational section of a corporate website. To add the Midas touch a webmaster can use footer based menu if the website has lot of content that can be admired by the visitor. The footer menu will never play down the professionalism factor of the corporate website.

Review-based Websites

Review-based websites cover a lot of area and various niches all in one platform. Usually such websites target consumer oriented products and provide a platform where users can leave comments or reviews regarding a respective service.

The problem with such a website is that due to a huge amount of content which is divided into various niches, it becomes almost impossible to cover all of it in one navigational style. This is when the menu style show in the image below can come in handy.

Review based websites will use huge drop down menus which are almost like a new pop up opening on every mouse over.  This style of navigational menus gives the review based websites ample amount of space to showcase almost every category without making it look congested. White space matters!

Conclusion

Not yet done, folks! But I hope that you have an idea of how important navigational menus are and how they change without us noticing them. See, the point is that navigational menus must not be a point of concern for the website visitor. They must blend with the website and its content in a manner that they look perfectly appropriate with that respective website. Get the idea?

December 26 2011

09:01

50 Interesting Navigation Menus


  

Navigation menus are a very important part of every website design. First and foremost, they help direct visitors to the main areas of your website, regardless of what page they are viewing on your website. They also point search engine robots in the right direction (though some flashy navigation menus aren’t that SEO friendly).

Today we would like to show you 50 beautiful navigation menus; ranging from simple ones that hide discretely at the corner of the design to full blown menus that take up most of the header. No matter what type of navigational menus you tend to favor, we hope that there is a little inspiration waiting for you in the designs below. Enjoy :)

Nicely Navigated

1. Alexarts

A great looking home page that has 4 large balloons as a navigation menu with each balloon floating up whenever a visitor hovers over it.

Alexarts

2. Blogger Bake Off

A traditional horizontal navigation menu that integrates with the website design beautifully.

Blogger Bake Off

3. Small Stone Recordings

One of the coolest navigation menus on the web. Each section of the site is featured as a dial or button in the recording unit at the top of the page.

Small Stone Recordings

4. Loodo

A good navigation menu that is based upon a traditional board game.

Loodo

5. Jeff Sarmiento

A colourful vertical navigation menu. The background colour and icon that is shown when a visitor hovers over a link is different for every page.

Jeff Sarmiento

6. Fabrica De Caricaturas

A great looking home page which features a navigation menu as labels at the left hand side of an A4 piece of paper.

Fabrica De Caricaturas

7. Genes Sausage Shop

At first glance it looks like a regular vertical menu but when you look closely you will see that the designer has made the menu resemble the ‘specials’ chalkboard like you would see in a butcher shop.

Genes Sausage Shop

8. Robin James Yu

The square bubbles that are placed around the navigation menu items are placed around the site in other areas. It’s a simple design but it fits in well with the site.

Robert James Yu

9. Polar Gold

A stylish flash horizontal navigation menu. Sleek and simple.

Polar Gold

10. Madison

A grungy style navigation menu that turns red when you hover over a link.

Madison

11. Tennessee Trains & Byways

Don’t let the discrete menu at the top of the page fool you; Tennessee Trains & Byways is in contention for the largest drop down menu in the world. :)

Tennessee Trains & Byways

12. Innovative Imaging Professionals

A colourful flash menu that lists the various site pages on top of a photo.

Innovative Imaging Professionals

13. Carsonified

A cool horizontal navigation menu that fits in well with the groovy Carsonified design.

Carsonified

14. Fantasy Cartography

A fantastic home page from old mapmaker Robin C. Kuprella. The areas of the site are linked directly on the home page map. Clicking on a link will change the content in the central content box.

Fantasy Cartography

15. Bully Entertainment

A great menu that features hand drawn icons for each section of the site.

Bully Entertainment

16. Indubitablee

Beautiful hover actions and well designed sketched icons makes Indubitablee a breeze to get around.

Iindubitablee

17. Power To The Poster

A practical design in which all menu items, and any links on the page, turn red when you hover over them.

Power To The Poster

18. Fundo Los Paltos

A good looking wooden style navigation menu that shows a leaf icon whenever you over a menu item.

Fundo Los Paltos

19. Yellow Bird Project

A simple but fun menu that integrates well with the cartoon design of the rest of the website.

Yellow Bird Project

20. Pure Grips

A good looking clean corporate style horizontal menu.

Pure Grips

21. Carbonica

A simple vertical menu that shows an arrow and drawn circle when you hover over the item. Strangely, not all menu items have this effect.

Carbonica

22. Chris Jennings

Colourful bookmarks are used as menu links at the top of a torn piece of paper in this cool looking vertical navigation menu.

Chris Jennings

23. Time For Cake

An elegant drop down navigation menu. Perfectly fits both the design and subject of the site.

Time For Cake

24. Amazee Labs

Another simple yet beautiful horizontal menu that we felt was worth taking note of.

Amazee Labs

25. Guga Fit

A cool navigation menu which changes the links from blue to green when you hover over them. Simple but effective.

Guga Fit

26. Ferocious Quarterly

A ribbon style menu that shows page links on different levels.

Ferocious Quarterly

27. USU Students Association

A great looking vertical navigation menu. Bold and attention grabbing for such a simple design.

USU Students Association

28. FA Design

A stylish menu that looks great over the full screen image changing background.

FA Design

29. Biola Undergrad

A basic horizontal navigation menu that works well with the colourful design of Biola Undergrad.

Biola Undergrad

30. C & C Coffee

A fun flash based menu that playfully dangles links from the top of the page.

C & C Coffee

31. Helmy Bern

An interesting menu that wraps the menu links around a torn piece of cardboard.

Helmy Bern

32. Crumpler

An image based navigation menu that features social media integration.

Crumpler

33. B & Q

Each category shows dozens of website links under it. It’s a great example of how you can still make a website with hundreds of pages easy to navigate.

B & Q

34. From The Couch

A simple vertical drop down menu that integrates well with the blog design.

From The Couch

35. Get Me Fast

Many of the graphics in the background are links in this fun header design.

Get Me Fast

36. Eye Bridge

A graphic based menu that shows a circle around the page text when you hover over it.

Eye Bridge

37. CampLuxe

A clean professional looking naivigation menu. An easy addition to the showcase.

CampLuxe

38. NickAd

Probably not the most practical menu available but certainly one of the coolest. The NickAd page remains mostly blank apart from a small logo at the top left and bottom right of the page. Your cursor changes into a star when viewing the page. If you click on the page a horizontal menu will appear that will let you navigate the site.

NickAd

39. Envira Media

A great looking eco-style vertical navigation menu.

Envira Media

40. XHTML Cafe

Another good example of an interactive home page. The top menu and and many elements of the home page design are all clickable.

XHTML Cafe

41. Design Bombs

A minimal design that integrates with the Design Bombs website look and feel perfectly.

Design Bombs

42. Paolo Cavanna

A unique navigation menu that is implemented on a cool one page design.

Paolo Cavanna

43. Surf Station

A minimal vertical navigation menu which increases the size and weight of the menu link selected.

Surf Station

44. Racket

An innovative navigation menu that fits in well with the website’s unique design.

Racket

45. CL Designz

A fantastic design that is unique, colourful, fun and practical…oh my.

CL Designz

46. Keith Cakes

A simple horizontal menu that uses beautiful calligraphy.

Keith Cakes

47. Carbon Made

The background colour of every page is different, however the colourful navigation menu remains the same.

Carbon Made

48. Manic Design

A scrolling vertical navigation menu that moves the cursor as you scroll down the page.

Manic Design

49. HydroHolistic

A fun horizontal menu that displays a descriptive pop up of each page when you hover over a link.

HydroHolistic

50. Space O Technologies

The cartoon font fits the cosmic style of Space O Technologies perfectly. This is a one page website so the menu colours change depending on what section you are looking at.

Space O Technologies

Thanks for checking out the various navigation menus we collected to feature for you. Hopefully you found a little inspiration along the way. What are some of your favorite solutions to site navigation? Feel free to leave us your thoughts below.

(rb)

December 23 2011

21:00

50 Creative Websites with Highly Unusual Navigation

Navigation plays a crucial role in the success or failure of any website. An easy to navigate website is more likely to be explored in more detail as compared to a website with more complex navigation. Regardless of the functionality of the website, the navigation is the first thing that must be taken care of.

Accomplishing matchless navigation that successfully performs its function is almost similar to mounting Mt. Everest. Getting an exceptional navigation with wonderful functionality makes the website easy to navigate and interesting for the visitors, therefore assuring a better user experience.

At this time, we have selected some websites with marvelous and distinctive navigational elements that will not only enthuse you, but will demonstrate to you how to merge novelty with realism. Enjoy!

1. Tvrdek

On this website, you may feel that the website does not have any content but once you explore its navigation, you will love to browse this website more than anything.

Tvrdek

2. Racket

Here you will see the navigation menu hanging in the air. The navigation menu looks somewhat off the cuff but at the same time it looks so cool.

Racket

3. Iamyuna

Here the navigation may appear minimal and negligible but once you keep your mouse on the option it shows you the complete list of all available choices. The mouse over effect is simply amazing.

Iamyuna

4. Kutztown

Kutztown creates a very artistic look with its design and typography, further the navigation adds more beauty to it.

Kutztown

5. Samsung Mobile

Samsung Mobile features an extremely dynamic and animated website with a unique and appealing navigation style.

Samsung Mobile

6. Case Studies

Centrally aligned navigation with some links at the top of the page is truly an extraordinary approach for a navigation menu. Clicking on any centrally aligned option will reveal the detail page.

Case Studies

7. Acko

An artistic representation even through the choice of navigation menu. Acko takes advantage of its bright color combination to make its navigation even more attractive.

Acko

8. Helmy Bern

Helmy Bern features a somewhat disorganized top navigation but the side bar and the bottom navigation menu are simply amazing. The use of the right color to create the right impact can be seen here.

Helmy Bern

9. Cathy Beck

Cathy Beck makes use of a unique approach for her site navigation. Here the navigation is set at the bottom of the page rather than the top of the page, further the mouse over effect is out of the ordinary.

Cathy Beck

10. TinyTeam

TinyTeam offers a very systematic and pragmatic navigation menu that eliminates any confusion a new visitor may have in browsing the website and finding its desired information.

TinyTeam

11. Alexbuga

The sliding effect on mouse over is the key point of navigation plan of this website that makes this navigation extremely classy and elegant. The main navigation reveals when you place your mouse on the logo design at the top of the page.

Alexbuga

12. Thibaud

It’s truly fun to browse this website. You can actually arrange and rotate the cards present on the home page by simply dragging and dropping them to your desired location and can see the portfolio by clicking on it.

Thibaud

13. Small Stone

An unusual navigation that matches the website name. Here the designer has successfully imitated a recording device as a navigation menu.

Small Stone

14. Gleis3

The navigation plan used in Gleis3 website looks somewhat like a road map that leads you to your desired location easily and effortlessly. Simply click on an option and you will get the relevant information.

Gleis3

15. Amore

With a horizontal as well as vertical navigation plan, this website holds its own charm. The main navigation menu is placed at the bottom of the page with some cool and beautiful mouse over effects.

Amore

16. Yodabaz

Here the navigation is presented with an animated background image sufficient enough to create that attention grabbing first impression. Clicking on the portfolio reveals some of their excellent work.

Yodabaz

17. Sensi Soft

The whole navigation is set to be at the center that makes this website extremely well-organized and easy to navigate. The effects that this website uses are beyond the ordinary mouse over effects.

Sensi Soft

18. Nickad

Nickad brings flash into play to make its navigation menu and overall website design look stunning. This is something that you will never find in any other website navigation plan.

Nickad

19. Not Forgotten Movie

The navigation options in this website are in the shape of playing cards and when you put your mouse on it, they will give a burning effect suitable with the theme of the website.

Not Forgotten Movie

20. 75b

75b also has a horizontal and vertical navigation plan. The main options or menu is placed with the vertical navigation while the sub-menus are placed with the horizontal navigation.

75b

21. Dave

This website not only brings an exceptional use of navigation into play but also experiments with unique typography to set it apart from dozens of other similar websites.

Dave

22. Vernon Clarke

Here the whole navigation has been summed up within an icon of a film tape with some small icons on it. Besides that the website also features some exceptional work on the main page.

Vernon Clarke

23. Booma Webdesign

Simple and efficient navigation without extra or jumbled up elements. The navigation used here is also easy to understand for the new visitors.

Booma Webdesign

24. Revolution Driving Tuition

Simple and nice navigation with no more classy effects, even a novice can also understand how this website works.

Revolution Driving Tuition

25. Jeremy Levine

An imaginative demonstration of the navigation menu that makes this website fun to browse. Jeremy Levine takes advantage of its dazzling color combination to make its navigation even more eye-catching.

Jeremy Levine

26. Wards Exchange

The whole navigation has been placed at the side of the website design that makes this website tremendously well-ordered and easy to navigate. The effects this website uses are beyond the ordinary mouse over effects.

Wards Exchange

27. Sideshow Press

The navigation is presented with some cool and appealing effects giving this website a personal and human touch. Clicking on any option will take you horizontally to the relevant section.

Sideshow Press

28. Bountybev

Bountybev make the most of its bright color combination to make its navigation even more attention-grabbing. The use of bold typography further makes this website design hard to forget.

Bountybev

29. Noonstyle

Here again, the navigation has been set at the sidebar to make this website look well organized and efficient. When clicked, the website also shows the relevant options in the sidebar.

Noonstyle

30. Vanity Claire

Easy and on the contrary an artistic approaches to design navigation for Vanity Claire that not only matches with the main concept of the website but also affords regularity.

Vanity Claire

31. EwingCole

Here, the navigation options are divided into two parts. The top most navigation reveals the content in the customary style while the second navigation is presented in a somewhat trendy style.

EwingCole

32. Custom Tshirts

Here the main links are presented at the top while a portfolio or T-shirt photo are presented with a mouse over effect that enlarge the photo when you place your mouse on it.

Custom Tshirts

33. Hello Goodlooking

When browsing this website, initially you may feel like that this website does not contain any content but once you explore its navigation, you will love to browse this website more than anything.

Hello Goodlooking

34. Christian Sparrow

Christian Sparrow makes use of a simple but attractive navigation plan that not only grabs the attention of the visitors but also creates an everlasting first impression.

Christian Sparrow

35. Enila

Enila has a rather jumbled navigation menu but the side bar at the top of the page makes it simple and easy to navigate, and also add an interesting feel to the design.

Enila

36. Salt Films

In this navigation menu the thing that stands out is the animated hand which gives the whole website a very unique and appealing look.

Salt Films

37. Blue Bug Digital

Blue Bug Digital makes use of an animated background that revolves 360 degree providing you a complete preview along with the navigation menu.

Blue Bug Digital

38. Section Seven

Section Seven also uses its navigation menu in an extremely creative and artistic way making the whole website look and design visually appealing and remarkable.

Section Seven

39. Sq Circle

While the website loads completely, the message says we are creative and pragmatic. That proves true when you explore the site in detail. The navigation truly is out of the box and extraordinary.

Sq Circle

40. EyeDraw

EyeDraw presents a very non-fussy and clean website layout giving its visitors an easy to navigate and understand website. The main options slide to give you a complete preview when you place your mouse on it.

EyeDraw

41. Light Motion design

Light Motion design also provides a navigation plan or guide for those who are not very internet savvy. On the whole, the navigation is exceptional and has been designed in a very systematic way.

Light Motion design

42. Studio Stemmler

Studio Stemmler combines effective navigation, excellent design and a beautiful color combination all in a one to get this visually appealing and attractive website to the surface.

Studio Stemmler

43. Eric johansson

A fun and irreverent site that also give you the option to view the site in a more traditional way.

Eric johansson

44. Iipvapi

Innovation at its very best is what that describe this navigation menu perfectly. Simple but effective navigation with some cool effects.

Iipvapi

45. Narrow Design

A vertically sliding navigation menu that moves to the left when one item is clicked giving its details on the remaining part of the screen.

Narrow Design

46. Organic Grid

Organic Grid holds a visually appealing website navigation that consists of more than 90% of the main page.

Organic Grid

47. Smriyaz

An extremely beautiful website design with neat and efficient navigation menu that guides its visitors how to explore the site to make the most of it.

Smriyaz

48. Unfold

Simple but a creative approach to design navigation for Unfold that not only matches with the main concept of the website but also provides symmetry. Simply click on the top navigation links to explore the site in detail.

Unfold

49. Yugop

The navigation is placed at the bottom of the page with some exceptionally animated effects.

Yugop

50. Vanalen

Vanalen also presents a very unusual and unique navigation menu that is totally different from the ordinary websites. The navigation plan used in this website is rare and exceptionally creative.

Vanalen

July 27 2011

14:02

What Web Designers Can Learn From Video Games

Advertisement in What Web Designers Can Learn From Video Games
 in What Web Designers Can Learn From Video Games  in What Web Designers Can Learn From Video Games  in What Web Designers Can Learn From Video Games

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games?

Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail.

Prince-of-persia in What Web Designers Can Learn From Video Games
Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games.

In the same way, website users want their content delivered to them in a way that is easy to understand, intuitive and engaging and that doesn’t require a lot of scrolling or clicking. In fact, Web designers can learn a lot from video game interfaces. Websites that use common game interface tools can streamline the user experience while adding a lot of personality. This can result in higher traffic and a higher rate of repeat visits — and sales… Cha-ching!

It’s no surprise, then, that we’ve seen an influx of carousels, lightboxes, accordions and increasingly sophisticated navigation patterns, as CSS and JavaScript libraries have put such tools within reach of Web browsers. Whether it’s a good or a bad thing, is a topic for another article, and this article will focus on the techniques rather than their wrong applications.

What a Web designer can learn from video games isn’t limited to the user interface. Yahoo Answers works because of the psychology of the achievement system that is built in. So, while we will look at some basic user interface ideas and patterns, other higher-level concepts would be useful, too, and worth exploring.

Remember The Big Picture

In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals. Obviously, a website will often, though not always, have a goal that is very different from that of a video game. On many websites, efficiency needs to be a higher priority than entertainment. A cool fish-eye interface is not the most practical idea for a website dedicated to delivering tax information quickly or for an e-commerce website. However, an interactive social media channel might benefit from a leaderboard or some type of achievement system. Choose your UI components to fit the project.

Looking at the big picture, also consider structure and method — not just UI components. For example, look at how menus are structured, and consider why those choices were made. In many games, you have a hub-and-spoke type architecture, leading to different sets of tools within the menus. If you choose “Weapons,” then all of the options for weapons open on the next screen. You have to navigate back to the top screen in order to choose “Maps.” This structure simplifies a set of options that would otherwise quickly become confusing or overwhelming by providing focused attention on one choice at a time.

Can you see how this type of architecture could benefit a website that presents a large amount of information to the visitor? By allowing the visitor to focus on one piece of a large online task or one nugget of information at a time, you potentially increase the conversion rate for your client. This structure could also be effective when you are crafting a sales funnel on a website. The example below shows a simple game menu structure that could easily be applied to the information architecture of a website, building paths for visitors to follow.

Theball Menustructure in What Web Designers Can Learn From Video Games

If you were building a website for a CPA firm, you might segment its menu information under headings relevant to the type of visitor. A high-wealth individual has very different needs than a small business, but both might be interested in hiring the same firm. You could start at the top level, with two simple entry points serving as a funnel, one for individuals and families and the other for businesses and organizations, each button leading to the hub for that user. This hub page could provide content, offer pertinent tools and advertise relevant services for these very different users, thus simplifying their experience.

Hub-and-spoke-funnel in What Web Designers Can Learn From Video Games

Also, notice places where video games show instead of tell, and try to understand how they do that. Successful games are particularly adept at showing during training sessions, in what are often referred to as “noob caves.” A character has to pass through elementary rooms or levels, where they are taught to accomplish basic tasks in a way that is entertaining and integrated with the story. An adventurer learns to pick up a sword and swing it, then kills a rat, then learns how to pick up treasure. The user is taught to use the interface through immersive experience.

Oblivion Start11 in What Web Designers Can Learn From Video Games
In The Elder Scrolls IV: Oblivion, you start out in prison and must escape through an underground cave, fighting rats and the occasional small goblin along the way to learn the basic controls of the game.

Why is this relevant? You probably won’t have to make a full interactive tutorial for a complicated interface, but chances are your client’s content will be more clearly received and more quickly understood through intelligent graphics or charts. You could take big concepts and break them down into bite-sized chunks. You could look for potential points of confusion and clarify with tooltips or examples rather than long explanations. By studying how games show instead of tell, you could get a breakthrough on a thorny presentation problem.

Engagement Doesn’t Have to Be Glitzy

Game design wizard Jesse Schell says, “Games offer the possibility of success, the opportunity to satisfy your curiosity, the chance to do some problem-solving and make clear choices, giving a feeling of freedom.” Even the most mundane of websites could be made more engaging by asking the question, What elements of games do people find pleasurable?

Games provide clear feedback, often at the instant of user input. These elements could be incorporated into interfaces, and not only through carousels or accordions. Asking something as simple as “Would you like to learn more about this topic?” upon confirming the submission of a form can go a long way to increasing user interaction.

Some Web designers already implement some of these common UI components at a simple level. Certainly hover menus and tooltips are not new. Seeing how these are implemented in a game can spark ideas on how to implement ordinary UI elements in a more creative and interesting way.

Examples, Please

Let’s dive in and look at some UI elements that can add zing to your next project. We’ll look at some examples and then a few resources where you can learn more.

AJAX Messages With Loader Image

Falloutnv-load1 in What Web Designers Can Learn From Video Games

Falloutload1 in What Web Designers Can Learn From Video Games

These loading screens from Fallout: New Vegas (top) and Fallout 3 (bottom) have helpful information and tips, along with a background image that expands on the theme of the game. Instead of a spinning loader image, the user sees a roulette wheel or green-screen target that transforms a boring wait into a fun part of the game experience.

What a Web designer can take from this:

Customize your graphics. Use them to pull the user into the “world” that you’re creating on screen. Even if you are working on a corporate website, you can load tips and helpful bits of information. Building a retail sports website? Perhaps you could use a spinning basketball for your loading graphic on a slideshow. Not sure how to get started? Check out this tutorial to learn how to preload content.

A full-page background image for a loading screen might be too slow, but you could add a colored background to the loading panel div, and then use JavaScript plug-ins to load random tips and information to fill the space. For best results, keep the loader files below 30 KB; the smaller the better. A simple AJAX call can grab tips every so many seconds, or you can simply post one for each load. The choice depends on how much content you need to load and how much time you have. For an example of this kind of loader, check out the Website Grader at HubSpot. After submitting a link, check out the loader that comes up as you wait for the result.

Hubspot in What Web Designers Can Learn From Video Games

Custom Cursors

Immersive in What Web Designers Can Learn From Video Games
In Fable 3, the place being chosen by the user is indicated by a magnifying glass, which acts as a custom cursor.

Steal in What Web Designers Can Learn From Video Games
In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates an object that the player can pick up. A red hand indicates that the item is being stolen and that soldiers might pursue.

What a Web designer can take from this:

Probably the most recognizable custom cursor is the “grabby hand” Google Maps. But custom cursors are nothing new and are common in Web applications. The capability is built into most browsers.

It’s important to use these cursors sparingly: when offering help, to indicate clickable content, and to highlight important information. Does a particular piece of information absolutely need to be seen by visitors? Try this demo of a custom cursor (pictured below). Do you see how it could be used to grab attention and highlight important points? Imagine what a well-executed JavaScript magic wand could do on a children’s website to capture attention! Obviously, it wouldn’t be a good fit for a corporate website, though.

Cursor in What Web Designers Can Learn From Video Games

Icons, Icons, Icons

ReadHUD in What Web Designers Can Learn From Video Games

Screenshot-frontpage in What Web Designers Can Learn From Video Games

One big difference between video games and websites is that icons are used much more in complex game menus than in website navigation, and rightly so. A user typically spends much more time in a game than on a website. But icons are still used on websites, and increasingly so as the line between websites and Web applications blur.

So, how are icons used effectively in game navigation? They must be readable and fit the context. In the example above from Halo Reach, the user relies on icons to navigate and choose weapons, but the menus resemble a “heads-up display” (HUD) that we might see in a vehicle in the real world. In Oblivion, icons are presented on “scrolls.” Website icons should likewise be easy to understand. Add text labels for optimum usability.

Icons can greatly accelerate navigation through complex menus if the icons are carefully chosen and consistent and if users spend a lot of time on the website. Use solid-color, high-contrast outlines of easily recognizable shapes that are simple and quickly readable.

Games are moving away from small, highly detailed images to more sophisticated outlines (in smaller files), such as those found in Halo Reach and the Call of Duty series, and larger detailed images with distinctive shapes, such as the ones below. Even if you don’t notice the details, you will recognize the hand, circle and face outlines. Using the same color makes them less visually complicated and easier to decipher. The more icons that are used, the simpler and more quickly readable they should be.

Bar-videogames in What Web Designers Can Learn From Video Games

You can also use icons as visual cues to focus attention on key topics. Use “header” graphics instead of buttons as quick prompts in content boxes and repeating topics to reinforce concepts. Make complex images bigger, and be consistent. Use icons to add interest to lists, and break up content into digestible pieces and to draw attention to important sections of text, as Treemo does so well. Consider using relevant icons for navigation and topical groupings. You could use consistent shapes as headings within the text or as pull quotes to indicate that certain content is related. Use icons to make content easy to scan, highlighting points of interest, so that users can quickly find pertinent information.

Icons don’t have to be static illustrations. The screenshots on Pattern Tap serve as traditional thumbnails, but their distinctive shape also functions as an icon, increasing interest and reinforcing the brand:

Pattern-tap-screenshot in What Web Designers Can Learn From Video Games

What about using your client’s own products as icons? The clever sub-menu on DonQ, shown below, uses the products themselves as icons, quickly and easily directing you to the one you’re interested in. Even more clever is the way that the rest of the content dims when the sub-menu appears, making your options stand out.

Icon-submenu in What Web Designers Can Learn From Video Games

Full-Page Carousels

Tabbed screens that fade out, such as this one from Dragon Age, Origins, have been around for a long time:

Da-origins in What Web Designers Can Learn From Video Games

In the “Carnage Report” in Halo Reach, below, this idea is taken to a new level. The screens scroll horizontally, and each page has multiple tabs. Gamers are used to this type of interface. But take it to the Web, and people will be surprised.

Carnage-report in What Web Designers Can Learn From Video Games

You have to interact with this type of interface to do it justice.

Jax Vineyards uses a similar type of layout, without tabs:

Jax-screenshot in What Web Designers Can Learn From Video Games

Add tabs to each carousel screen, and you would take this website to the next level.

Magento offers another, simpler take on this idea:

Magento2 in What Web Designers Can Learn From Video Games

Right now we see this type of interface in mobile and tablet UIs in which there are multiple background images. We also see it in games of all types. This is more than tabs within tabs or simple horizontal scrolling: think iPad with multiple desktops. Think for a Living offers a (very game-like!) map in the top-right corner to help users navigate its unusual carousel.

What a Web designer can take from this:

If you have a lot of content, then this bold solution can be user-friendly and can increase engagement. Remember the good old on-page anchor tag with a target? This is the same concept in new clothing. Your screens slide in and are easily navigable with a touch screen, which is a factor that will only increase in importance.

Because of the various screen sizes, this type of layout requires careful planning and might call for CSS3 media queries to ensure that the content loads as intended on different screen sizes. You will need to make your layouts responsive. You can implement a full-screen carousel by using a page-sized div, with the overflow set to hidden, and placing the screens in an unordered list with a set width.

Users will become increasingly familiar and comfortable with this type of interface as they adopt tablets. Implementing an even simpler horizontal scroll can make your client stand out from the crowd.

Slider Menus

Fable-scroll2rev in What Web Designers Can Learn From Video Games

Fable-scroll3rev1 in What Web Designers Can Learn From Video Games

Fable 3 is out, and its immersive menu system is completely different from the one in Fable 2, pictured above. But Fable 2 has such a beautiful slider menu that we had to include it.

Scrolling with the slider reveals buttons, and content is presented on the right half of the screen. The buttons also have dropdowns under them. Inactive content dims. Pictured above is the top category of “Clothing.” Then the content drills down to “Coats,” then to specific clothing items. Does this remind you of e-commerce?

What a Web designer can take from this:

Have you ever been on a website that had huge fly-out menus that covered the page? And as you hovered over items, they expanded into sub-menus… four levels deep! Such complicated menus can be intimidating and make the person want to leave. Making the menu small, easy on the eyes and quickly scrollable is a great way to overcome bloat and keep visitors from clicking away.

There are already some slider scripts that provide custom scroll bars for any div container. Why not put buttons in the div? There may be certain settings (like entertainment or fashion websites) where this type of menu is more usable and scalable than your average dropdown or fly-out menu. Add an AJAX loader for your onClick event, and you have an engaging interface that users can easily decipher. The goal is to keep users on one screen while keeping the menus scalable. You could add literally as many items under each menu as you need without making them unwieldy.

Pivot Screens

I must admit, my heart skipped a beat the first time I saw the pivot screens on Halo Reach. When you get to the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of menu screens. This is a visual cue. What happens when you push the controller to the right? The screen jumps and scrolls horizontally, blurring, to give you the next screen, which uses perspective as well, this time skewing all of the text and images to the left. Under a tab, your character is animated, barely moving and eerily life-like. Bravo. I sat and played with the pivots for a while. Of course, my first reaction was, I want to do that.

What a Web designer can take from this:

With a little Photoshop, you can emulate this menu. By using a large panoramic background image that covers two screens’ width with skewed CSS3 typography, and a fast horizontal scroll in JavaScript, you could get something close to the tilt found in this game.

Apply this to a smaller pane, and use it on a banner or button that is completely animated in two frames, and you’ll get a wow (so will your client). I haven’t seen anyone using this method on the Web yet, but I did work up a little demo to give you a starting point should you want to implement this yourself.

Pivot-example in What Web Designers Can Learn From Video Games

Also, notice the way that Halo Reach integrates mundane menu screens into the world of the game with the clever illusion of a landscape in the distance. It’s a beautiful thing. It gives a sense of depth and approach, like when you look at a city from a plane before landing. It builds excitement and entices you to go deeper, to interact and be part of the action. This type of integration does not lend itself to all website experiences, but it does to some; and when appropriate, it is worth doing. Never underestimate the power of delight.

Context Menus

Radial-menu-a-creed in What Web Designers Can Learn From Video Games

The context menu in a video game is the kissing cousin of a website sub-menu. Context menus like the one above from Assassin’s Creed: Brotherhood give the user specific options depending on their location in the game and their choice of actions. If you choose to cast a spell, then the sub-menu offers you a fireball or lightning blast. If you choose to move, then you can run, climb or hide, all from the radial menu. Radial menus with icons are very popular, but context menus could just as easily be short vertical lists of text.

What a Web designer can take from this:

When you invite a user to take a specific action, a context menu can enhance the experience. Instead of providing lists of links, you could offer a fun array of specific actions to take. We see this used now in Web applications and in small social media sharing widgets.

When making a context menu, you might at least consider making it radial. Radial menus should give users a choice of three to eight options, and the interface can add visual interest. Keep the menus as simple and clear as possible. They should offer relevant choices to the user at the point of decision and increase conversion rates. They should also be easy to click and visually lightweight.

For a fun example of a radial context menu, check out TuneGlue’s musicmap:

Radial-tuneglue in What Web Designers Can Learn From Video Games

While this was done in Flash, you could build a simple radial menu with JavaScript. Or you could get more complex, with nested radial menus, like so:

Nested-rad-menu in What Web Designers Can Learn From Video Games

Radial menus aren’t limited to context menus. Pop-up panel menus at a point of action can be equally effective and may not take as much time or testing to develop.

Context-panel-menu in What Web Designers Can Learn From Video Games

Your Turn

Many other examples of great interface ideas can be gleaned from studying video games. Games offer design inspiration that can help you reward and gratify users and make your interfaces more intuitive and fun.

Are you building a website for a non-profit that is planning a donation drive? Consider using leaderboards to track donations. You could use leaderboards to give a shout out to the top 10 readers on your blog, giving them greater incentive to comment.

Study how icons are used, and think of ways to implement them that will make your website more user-friendly and enjoyable. Make interesting tooltips, or consider ways to add downloadable content (“DLC” for all you gamers out there) as a reward or incentive. By observing and implementing creatively, your websites will become more engaging and easier to use. And let’s not forget that doing the research is really fun!

Further Resources

(al)


© Anne Sallee Miles for Smashing Magazine, 2011.

July 26 2011

07:25

40+ Websites with Unusual Navigation

Advertisement in 40+ Websites with Unusual Navigation
 in 40+ Websites with Unusual Navigation  in 40+ Websites with Unusual Navigation  in 40+ Websites with Unusual Navigation

Navigation is the most important part of a website without which no website can effectively operate. Achieving unique navigation that effectively fulfills its purpose is nearly akin to climbing Mount Everest. Having a unique navigation with perfect functionality makes the website easy to navigate, thus ensuring a better users experience.

Here, we have collected some sites with amazing and unique navigational elements that will not only inspire you, but will show you how to combine innovation with practicality. We hope you like this assortment. Enjoy!

CSS and JavaScript Based Navigation Menu

Small Stone
The navigation of this site goes with the theme. This is a website of a US based record label that is evident through its navigation.

Unusualnavigation27 in 40+ Websites with Unusual Navigation

BountyBev
BountyBev turns to their creativity to help make their navigation menu as unique and distinctive as it is.

Unusualnavigation8 in 40+ Websites with Unusual Navigation

I am Yuna
Beautiful navigation with exceptional hover effects. Navigation menu goes up and down when you hover over it with your mouse.

Unusualnavigation3 in 40+ Websites with Unusual Navigation

Racket
Truly exceptional and creative navigation that shows a hierarchy of menu up to its roots.

Unusualnavigation25 in 40+ Websites with Unusual Navigation

Side Show Press Shop
An easy to navigate website thanks to its well designed navigation menu.

Unusualnavigation10 in 40+ Websites with Unusual Navigation

TapTapTap
A restaurant menu like navigation is used here that looks really great. The navigation grabs the attention with its simplicity and creativity.

Unusualnavigation34 in 40+ Websites with Unusual Navigation

Studio-Output
Beautiful and appealing navigation. Selected area becomes highlighted and provides necessary information to the visitors.

Unusualnavigation9 in 40+ Websites with Unusual Navigation

Got Milk
Bold use of a centered navigation menu that never dislodges from its position. On hover, icons change to text.

Unusualnavigation41 in 40+ Websites with Unusual Navigation

CathyBeck
This website uses a unique navigation style that opens and closes like a scroll when a menu is chosen.

Unusualnavigation24 in 40+ Websites with Unusual Navigation

Unfold
Unfold has a simple yet most powerful navigation system that sets it apart from other websites.

Unusualnavigation2 in 40+ Websites with Unusual Navigation

Lab for Culture
Simply creative navigation menu is used here that not only is functional but looks visually interesting as well.

Unusualnavigation40 in 40+ Websites with Unusual Navigation

El Studio
Beautiful and easy to navigate website demonstrating the power of their navigation menu.

Unusualnavigation1 in 40+ Websites with Unusual Navigation

Acko
The site navigation is designed from a totally different perspective. Worth mentioning.

Unusualnavigation26 in 40+ Websites with Unusual Navigation

Jiri Tvrdek
Yet another creative way to present site navigation. Here the navigation is presented in the form of fruit bearing tree.

Unusualnavigation28 in 40+ Websites with Unusual Navigation

District Solutions
Vertical tabs are very rarely used as navigation bars, but this website proves that they can look stunning if used properly.

Unusualnavigation30 in 40+ Websites with Unusual Navigation

Dragon Interactive
Simple, neat and clean navigation that looks stunning with the stylish hover effect employed.

Unusualnavigation32 in 40+ Websites with Unusual Navigation

Helmy Bern
The navigation has a grungy style and jQuery dropdown menu.

Unusualnavigation33 in 40+ Websites with Unusual Navigation

Andreas Hinkel
Here the navigational elements are setup as handwritten captions on a Polaroid picture.

Unusualnavigation36 in 40+ Websites with Unusual Navigation

Cypher13
Cypher 13 possesses a flexible navigation that is supported by photographs and text. This style is appealing, practical and at times amusing.

Unusualnavigation37 in 40+ Websites with Unusual Navigation

Im Design
Navigate the site through the arrows and certain other keys of your keyboard, Mac users may require their mouse on some occasions.

Unusualnavigation38 in 40+ Websites with Unusual Navigation

Studio Stemmler
Studio Stemmler has a simple landing page. But the instant you choose a category, the interface transforms giving you several ways to access content.

Unusualnavigation39 in 40+ Websites with Unusual Navigation

Thibaud
Another dazzling portfolio with innovative navigation, this one is based on Flash color samples to select from. Similar items are grouped together.

Unusualnavigation42 in 40+ Websites with Unusual Navigation

SensiSoft
To help visitors connect with their creative navigation menu, SensiSoft puts a familiar-looking information stand in the center.

Unusualnavigation43 in 40+ Websites with Unusual Navigation

Flash Based Navigation Menu

Work Life Balance Centre
Work Life Balance Centre uses a balanced navigation menu that emphasizes all the necessary elements.

Unusualnavigation6 in 40+ Websites with Unusual Navigation

Narrow Design
This is a portfolio website where Nick Jones uses a simple but dynamic sort of navigation.

Unusualnavigation18 in 40+ Websites with Unusual Navigation

TBWA\HAKUHODO
Navigation is based on a beautiful artistic scenario where every element used adds life to the site, simply magnificent.

Unusualnavigation51 in 40+ Websites with Unusual Navigation

Gleis 3
Overall the site is simple and plain, but creatively used navigation makes this website look out of the ordinary.

Unusualnavigation4 in 40+ Websites with Unusual Navigation

Marc Anton Dahme
A unique concept of mouse and keyboard being used as the navigation that really stands out, all the while remaining practical.

Unusualnavigation52 in 40+ Websites with Unusual Navigation

Amore
Navigational menu is set at the bottom of the web page and has some cool hover effects incorporated.

Unusualnavigation5 in 40+ Websites with Unusual Navigation

Grip Limited
Here you can navigate with the simple scroll of your mouse or with the arrows keys of your keyboard.

Unusualnavigation7 in 40+ Websites with Unusual Navigation

65media
Bold use of navigational elements on this site stimulates a visual interest among users.

Unusualnavigation12 in 40+ Websites with Unusual Navigation

Organic Grid
Organic Grid uses an excellent approach to create navigation bars as if they are the main attraction of the website. Navigation bars move left and right when mouse over to it.

Unusualnavigation13 in 40+ Websites with Unusual Navigation

Innovative Imaging Professionals
Here a beautiful navigation menu with hover color effect is used that gives the website a very unique feel.

Unusualnavigation15 in 40+ Websites with Unusual Navigation

Moodstream | Getty Image
This website tweaks the mood sliders in order to squeeze your creative juices. This navigation style rocks.

Unusualnavigation16 in 40+ Websites with Unusual Navigation

Not forgotten Movie
Here navigation is presented in the form of tarot like cards which catch fire when clicked. The cards are based on a devilish and freaky theme to match the feel of the website.

Unusualnavigation17 in 40+ Websites with Unusual Navigation

Marc Ecko
This site’s navigation allows the visitors to take a tour of a virtual art gallery to move through the site’s offerings. A more traditional nav menu is also included.

Unusualnavigation19 in 40+ Websites with Unusual Navigation

Agency Net
This is a New York and Fort Lauderdale based design studio whose website uses a dramatic and astonishing navigation design.

Unusualnavigation20 in 40+ Websites with Unusual Navigation

Nickad
A flexible approach is taken while keeping the navigation easy to use. Stars when clicked change to navigation that simply look stunning.

Unusualnavigation21 in 40+ Websites with Unusual Navigation

Okaydave
The navigation is set at the bottom of the web page which is out of the ordinary in and of itself. Different images are used to point to the same content.

Unusualnavigation22 in 40+ Websites with Unusual Navigation

Section Seven
A colorful and vibrant pamphlet like navigation gives this site character and sets it apart from others.

Unusualnavigation23 in 40+ Websites with Unusual Navigation

Andreas Smetana
You can navigate through the photo thumbnails either by using your mouse wheel or the arrows.

Unusualnavigation53 in 40+ Websites with Unusual Navigation

You may also want to consider our previous posts:

(rb)

June 13 2011

14:55

Custom Web Design Techniques for Unusual Navigation

Page navigation is arguably the most important aspect to any properly constructed website. How easily your visitors can travel from page-to-page will affect the overall emotion and user interface of your website.

Great web designers always keep a surprise around every corner, and navigation menus can feature this big time. From fullpage to corner links I’ve shared a few great examples of unusual website navigation. Hopefully these ideas can incite a barrage of creativity within yourself and any future projects.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Some Fancy Animations

Back when Adobe (Macromedia) Flash ruled the web it wasn’t uncommon to see strange navigation animations. But these fell to the wayside as HTML/XHTML standards started to develop in the latter 2000s. Since then we’ve seen dramatically increasing support for HTML5 and CSS3 effects, as well as full browser support for JavaScript and more importantly jQuery.

The guys over at jQuery have made custom web animation child’s play. Anybody who understands the basics of scripting can model a great website around the jQuery library and come out with resoundingly positive feedback. Below I’ve included a screen capture of Cooper Design, which offers a brilliant surprise for their navigation.

Cooper Design Studio

As you click throughout the top links you’ll be sent flying horizontally about the page through jQuery effect. Alternatively this will open up a sub-menu with categories based upon your heading page. As you choose between these you’ll notice page effects scrolling vertically, too!

Their site is a puzzle board of animations providing an amazing demonstration of the power in web design today. Alternatively you can scroll vertically as normal and transition between pages left/right by clicking on the columns side-by-side.

Another site Janette D. Council boasts a unique navigation which rearranges her portfolio items based on query data. Upon default you’ll be viewing all projects, but you may target print, logo, and illustration work individually.

Janette D. Council Portfolio Design

Additionally her images and site information all open into the same page. This means if you’re running full JavaScript support you never need to reload your browser! Granted further inspection of her code shows there are no alternative pages for Google to crawl. This isn’t totally a bad thing, since all of the page information is strictly held within one file!

Full Page Takeover

When you think of unusual page navigation these next examples must take home the trophy. heartshapedwork is apparently a full portfolio running via WordPress. Upon entering their home page you’ll notice large horizontal bars cascading down the page. These all display great hover effects and lead to external articles and portfolio shots.

Heart Shaped Work Portfolio

You’ll notice each bar has the project title in bold lettering with subtext containing the type of work developed. This includes websites, illustrations, mobile, and more. Their portfolio is exhaustive and actually pretty fun to flip through.

Another great example is the Work Life Balance Center site. The center was founded in 1991 and has seen a few updates to their website in that time. Currently running on Flash, their entire navigation functions by magnifying the currently focused navigation object.

Work Life Balance Center Nav Menu

So as you browse through you’ll notice large bars focusing on individual pages and sub-pages with links included. These links don’t go anywhere in particular, just drag you through the Flash layout. Interestingly this effect was seen earlier on Cooper’s website, all constructed with jQuery.

Grip Limited is possibly another epitome of fullscreen page navigation. Upon loading the site you’ll notice bars unfolding to display new information and page links. You’re able to click through the headers atop each bar to collapse the content and display more screen room.

Grip Limited

Perhaps not the best use of navigation, although it is absolutely unique. At the very top there’s a bar titled Open Menu which drops even more links in front of your face. These include core company pages and case study links.

Obscure Designs

When you really start to examine the web many portfolios stand out as just plain arcane. Yuna Kim has a personal portfolio which truly takes on a life of its own. She has built the entire navigation through jQuery and CSS positioning.

For each portfolio item she has denoted a symbol to represent the project work. Square for digital work, Triangle for branding and Circle for print. As you scroll down you’ll notice each project link is a colorful shape marking her work.

Yuna Kim portfolio pieces

Additionally her heading navigation drops down as you move throughout top links. The three options hello, Tweets, and contacts will display different content based on where you are. To be more specific, tweets and contacts will drop the same information: her latest update on Twitter along with e-mail and phone contact. hello will offer a brief introduction to Yuna Kim and her website. Pretty cool stuff!

Big Kid is a blog running WordPress which displays individual blocks of content. You can check out their site for yourself to see what I mean. The navigation isn’t all to uncommon, although quite unusual for a blog layout. Much of all the posts are portfolio updates which you can sort through.

BIG KID Navigation portfolio

What I really like is the individuality implied with their layout. It’s almost the most unique usage of block patterns I’ve ever seen on the web. From a user experience perspective it’s very easy to scroll through everything and sort project work based on personal interests. It’s also a very light website, quick to load in many of the browsers I tried (including Internet Explorer and Safari for Windows).

Site Gallery

Since there are so many weird and unusual navigation styles to cover, I’ve put together a small gallery of my personal favorites. These websites feature strange styles which I’ve never run into anywhere else on the web.

The popularity of awkward website design has risen dramatically in the past few years. Strange and unusual page layouts coupled with consideration for proper user interface have spurred some great projects. If you know of similar designs please offer your ideas in the discussion section below.

Amore

Amore boasts one colorful background. Quick to load, the page navigation is actually featured directly at the bottom-center alignment. As you move from each block the area expands to include informational text about the page. All their information opens in a lightbox window, saving the trouble of reloading each page view.

Organic Grid

Michael McDonald is the creator of Organic Grid, all built over Flash. The application takes a while to load on slower connections but I think you’ll really appreciate his style of design. Each navigation area appears as a horizontal bar which brings you to a full-page portfolio display. There is a lot of work to feature here and the enhanced visuals appeal brilliantly to UX design.

TinyTeam

What I like most about TinyTeam is their creativity in building the site. There are no extra graphics or flashy illustrations, and their solid blue backdrop is wonderful to limit distractions. Another site built over Flash which demonstrates just how unique a page menu can be. Clicking on the center box will open a new set of options for browsing their company portfolio.

LoveBento

At first appearance LoveBento is not easy on the eyes. There is a lot of content to consume and no direct navigation. Along the top right you’ll find drop-down panels, but the real items are located along the left side. Beneath the company logo you’ll find a unique display of images used to represent link hovers. Additionally there are numbered links at the bottom right for maneuvering between pages.

Lucuma

Here we’ve found another prosperous usage of horizontal scrolling. Their effects are built under the jQuery library. Lucuma also has links underneath their core content area offering XHTML and CSS validation. When designing portfolios for the web here they really mean business!

Andreas Smetana

Andreas Photography showcase truly brings the word unusual to the forefront. Once the page is fully loaded you’ll be given a notification explaining how to traverse their thumbnails gallery. By using either your mouse scroll wheel or arrow keys you can maneuver between the many categories of photographs. In the bottom-left hand corner is another small set of menu links which open on the side of whatever page you’re at. Pretty neat!

cypher13 Design Studio

Here we come to another design studio with a corresponding portfolio set in a black-and-white theme. The layout is built with HTML/CSS and uses jQuery animation effects to transition between portfolio items. The great thing here is how elegant each motion becomes. You feel gracefully offered a guide as you browse through their portfolio. It’s possible to sort items based on client and category, or take advantage of their search bar which displays results in real-time.

Studio Output

Studio Output brings a new feature into their portfolio display. The home page boasts a beautiful collage of project images which can be clicked to bring up more information in a lightbox effect. They offer lots and lots of example images and even display related projects when possible. Here I’ve clipped a piece from their portfolio of some Spongebob artwork and graphics.

Duane King

The portfolio of Duane King is another excellent example of keyboard support. Once loaded on the home page you may scroll between segments left and right with your arrow keys. You may click on a project to expand the image and display a bit more information. This is also another example where portfolio items don’t load onto a new page, really taking advantage of the jQuery library and featured plugins.

Sideshow Press

What I really like about Sideshow Press is their use of a hash mark(#) between pages. This indicates to search engines that all new content is not loaded onto a new page, but dynamically controlled through JavaScript. In this case we’re looking at a Flash application, but this is why the technique works so well. The page navigation offers some colorful animation effects on hover state. Each page transition displays a sliding effect as well, highly unique and composed perfectly.

Conclusion

I hope you’ve enjoyed these examples of unusual navigation techniques and that they’ve inspired you to create your own unique experiments.

If you know of any crazy navigation menus that we missed, leave a comment with a link below so we can check it out!

Tags: Navigation

June 06 2011

14:59

Planning And Implementing Website Navigation

Advertisement in Planning And Implementing Website Navigation
 in Planning And Implementing Website Navigation  in Planning And Implementing Website Navigation  in Planning And Implementing Website Navigation

The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.

Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”

Organizing Navigation Structure

Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.

Primarysecondary in Planning And Implementing Website Navigation
SpeckyBoy

You might assume that the primary and secondary navigations are marked in a wrong way on the image above, but I believe that this is not the case.

Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).

Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,” “Contribute,” “Advertise” and so on. For other websites, the links might be for the client area, FAQ or help page.

If you’d like to learn more about primary and secondary navigation, “Understanding Site Navigation: Key Terms” is a great article with detailed explanations of different navigation terms, including for primary and secondary menus.

The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.

Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it? No matter how organized the content is, if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, there’s a great method that designers can try: card sorting.

Information Architecture: Card Sorting

What’s the best way to organize content? How should the navigation be labelled and grouped and positioned? How will people use the navigation?

Card sorting is commonly used in information architecture and can help Web designers answer all of these questions even before the design phase begins. Card sorting basically helps designers organize navigation, especially complex navigation, in the most efficient way possible.

One complaint I hear regularly about websites… is that they’re designed around how the organization is structured. Given that the information architecture is usually completed by internal teams, this makes sense. One way to get input on structuring a site to reflect a a visitor’s way of thinking is by collecting input from card sorts.

Card sorts are a way to have website visitors organize and label content. It’s useful to have a visitor show you how she’d approach your website, and grouping and labeling are key elements for determining the best navigation for a website. Of course, you’re likely to get a variety of different groupings from users, so you’ll be looking for overlaps and commonalities while also considering how to help those who used varying  groups and labels.

Amy Hissrich

Card sorting can be used to determine menus and sub-menus, the wording on them and even their design and structure. We’ll go over the basics here, but be sure to check out the resources below for more information, guides and examples.

Cardsorting in Planning And Implementing Website Navigation
(Image: Dunk the Funk)

There are two types:

  • Open card sorting is when participants are given cards with content topics and are asked to organize them into groups. They are given no information or context beforehand. Then they name the groups. Depending on the project, participants could be asked to create two groups, unlimited groups, sub-groups and so on. They could also be asked to organize the groups and content into the hierarchy they think best.
  • Closed card sorting is when participants are given cards with content topics as well as the categories to put them into (and even sometimes sub-categories). Participants are not responsible for naming the cards. This option is great for exiting websites with established categories, menus, etc.

Below are some resources and further information on card sorting:

There are also many applications for card sorting, some desktop and others online. Online card sorting can be easier to run, but it’s not always the right choice. A great article on UX for the Masses that covers the pros and cons of each approach: “Online Card Sorting: Even Better Than the Real Thing?” For easy card-sorting tools, check out OptimalSort, WebSort and UserZoom.

Grouped Content: Classification Schemes

When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?

Below is a list of the most common content classification methods, along with suggestions for what each is best for:

  • Most recent to oldest
    Suitable for time-sensitive content.
  • Alphabetical
    Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.
  • Most popular or most used
    Great for interest-based browsing, rather than content that users need.
  • Geographical
    Is certain content irrelevant to certain regions or sub-regions?
  • In the order of the process
    If the content in some way represents a process (for example, “How to file your taxes”), then it could be organized according to the order of actions the user has to take. FeverBee has a great example of this: “How to Build an Online Community: The Ultimate List of Resources.” While the website is a blog, the content isn’t necessarily time-sensitive, so the author has created a great navigational structure that puts much of the content into a step-by-step process.

For more on classification schemes, check out UX Booth’s “Classification Schemes (and When to Use Them).”

Navigation And User Levels

For websites where navigation changes based on whether a user is logged in or out, other organizational challenges arise. Some websites may have a simple client area, while others have full-fledged communities. When this kind of interaction is involved, user roles and available content may vary, and owners may want to highlight some content or design it differently.

Below are a few tips for organizing navigation across membership levels:

  • What user levels are there?
    Many website owners plan this out ahead of time, and it depends greatly on their business model. As the designer or developer, make sure you know what navigation levels are needed, and keep the content in them straight.
  • Design and plan for each level separately.
    Don’t wait until the membership area is set up before considering the navigation structure of the levels. How should content be organized for logged-out users? How should it be structured for logged-in users? Administrators vs. basic members? Free accounts vs. paid accounts?
  • What content should each type of user be able to access?
    A logged-out visitor will want to know more about the community or service. A logged-in member will already be convinced, and so the primary navigation for them should reflect what is available with their membership. Is there special content for paid members, and should it be highlighted to be more visible? Should special links or content be shown to logged-out administrators, or will that all be taken care of once they log in?

Planning for different user levels can be done with the same methods outlined for primary and secondary navigation. Card sorting can be helpful for each level. Think about what the primary navigation should be, what the secondary navigation should be, where everything should go (i.e. hierarchy), and how menu items should be labelled.

What do members need to do? What does they want to accomplish? These are great questions to ask when organizing beyond membership levels or beyond logged-in and -out states.

Take Facebook. Content is everywhere, and it’s user-generated. How does one organize the navigation around this? Facebook is structured by context; it’s defined and organized by how the user functions on the website. Feeds, messages, events and friends are part of the primary navigation, while the other navigation is based on specific applications, requests, friends’ friends, etc. The remainder of the navigation is based on how the user has used Facebook in the past.

Below is a selection of websites that have memberships, client areas and the like. It shows how varied websites can be in how they handle navigation and structure based on user levels and logged-in and -out states.

MailChimp

On MailChimp, the location of the primary navigation for logged-in and logged-out users is the same, but the content of the menus is different. For logged-out users (and new visitors), MailChimp’s navigation guides them to sign in and gets them interested in signing up, with items such as features and pricing. For logged-in users, the navigation becomes the control panel for the service.

Should navigation always change this much? Not at all, although in this case it was the most user-friendly solution. There are many other scenarios in which the primary navigation should remain the same, but supplemented with additional navigation for logged-in users.

Mailchimp Loggedout in Planning And Implementing Website Navigation

Mailchimp Loggedin in Planning And Implementing Website Navigation
MailChimp

Freelance Mingle

On Freelance Mingle, the secondary navigation is the only main menu that changes for logged-in and logged-out users. The mini menu up top handles the core needs of members, and the primary menu below and the footer navigation remain the same. Many areas of the website are accessible to both logged-in and logged-out members, which keeps the navigation fairly simple; but only members may post content.

Also, making the sections visible to new visitors, while limiting their functionality, serves as a live tour of the website. If you sign up, this is what you get!

Fm Loggedout in Planning And Implementing Website Navigation

Fm Loggedin in Planning And Implementing Website Navigation
Freelance Mingle

FreshBooks

Some websites go in an entirely different direction. While the two examples above have a style and navigation scheme that is similar for logged-in and logged-out users, FreshBooks and many other websites have an entirely different layout and structure for members.

FreshBooks sells its service and promotes sign-ups to logged-out users. On clicking the “Login” link in the top-right area, the user is redirected to a log-in page. Once logged in, they are redirected to the client area, whose content is tailored to their preferences and which contains none of the content offered to logged-out users.

Freshbooks Loggedout in Planning And Implementing Website Navigation

Freshbooks Loggedin in Planning And Implementing Website Navigation
FreshBooks

Business Catalyst

Business Catalyst does something similar but keeps more of its own branding, allowing for little customization in the client area. The home page for logged-out users is much the same as that of other websites; the content and navigation focus on getting new users to sign up. After logging in, the user is redirected to the client area, rather than a logged-in version of the home page. The layout, navigation structure and menu change completely for logged-in users, very tangibly separating the two areas of the website.

The client area exhibits an especially good organization of otherwise complex navigation. The first tab is for basic account information, and the other tabs are for other pages or sections. The main features for members are clearly separated in these tabs and in the mini-menu up top. The separate “Recent items” drop-down menu on the right is also great, making it easy for users to navigate to their recent and most used documents. Tools like this make it easier to use a large website with complex navigation.

Businesscatalyst Loggedout in Planning And Implementing Website Navigation

Businesscatalyst Loggedin in Planning And Implementing Website Navigation
Business Catalyst

Common Considerations

Navigation design is all about findability and usability. No matter how simple or complicated, navigation must work well for its users. Now we’ll look at some trends in navigation and how these designs might benefit or hinder websites.

Horizontal vs. Vertical

The decision of whether to make the navigation horizontal or vertical tends to be determined by the nature and focus of the website. Often, it’s a mix of both, but with primary navigation we see certain tendencies. Small websites often lean towards horizontal navigation at the top of the site, while large corporate websites often use both horizontal and vertical navigation (usually with drop-down menus). Blogs vary greatly; primary navigation (such as for categories or pages) is sometimes horizontal, while most of the other menus are vertical. On news website, the navigation is mixed, with no clear tendency either way.

A number of factors will influence the decision for horizontal or vertical navigation, including design, usability and density of content. Sometimes designers add icons to the navigation or add visual elements around it to make it better stand out. Rich typography is another common consideration: since the navigation is the most popular area of the website, it could be given a special typographic treatment to make the user experience a bit more distinctive and unique.

Amazon in Planning And Implementing Website Navigation

Amazon’s list of departments is much too long to go in a horizontal menu without looking crowded. Instead, across the top we find a search bar, which is a kind of navigation in itself. Many Amazon customers know exactly what they are looking for and so go to the search bar first; perhaps far more often than on other websites. Amazon puts its menu of departments along the left. Because the list is so long and varied, its purpose is chiefly for browsing; and vertical menus are good for browsing. The sub-menus, also vertical, help the user refine their browsing among departments and products.

Another thing to consider is the website’s primary language and whether the content will need to be translated into several languages. English words are relatively short compared to German and French words, so horizontal real estate is a consideration with horizontal menus. Will translated items require two lines instead of one or an overflow in the horizontal menu? Is more space required, and if so, is a vertical menu viable? One must always think about how the website will be read and used and about practical issues such as language.

While it is generally good practice to make simple primary menus horizontal, it’s not essential. Below are a few designs that use vertical menus for primary navigation, and pull it off. However, all of these websites have simple menus and fairly minimal design and content; websites with a lot of content could easily overpower vertical menus. Good/Corps (the first site below) is a nice example of how a quite large amount of information is presented in a very compact, even minimalistic way. Subsection are indented, providing users with a clear sense of hierarchy on the site.

Good/Corps
Good-corps in Planning And Implementing Website Navigation

Stura TU-Chemnitz
Clouds-navi-screenshot-small1 in Planning And Implementing Website Navigation

Baltic International Bank
Bib in Planning And Implementing Website Navigation

Analogue Digital
Analogue in Planning And Implementing Website Navigation

Cambrian House
Cambrianhouse in Planning And Implementing Website Navigation

Divensis
Divensis in Planning And Implementing Website Navigation

Mellasat
Mellasat in Planning And Implementing Website Navigation

Debbie Millman
Debbiemillman in Planning And Implementing Website Navigation

Of course, horizontal menus can work really well, too, and menus that follow best practices don’t have to be boring. In fact, combining horizontal and vertical menus is even a possibility.

Below is a small showcase of horizontal menus in action, at either the primary or secondary level.

Moody International
Moody in Planning And Implementing Website Navigation

The Big Feastival
Big-festival-screenshot-small1 in Planning And Implementing Website Navigation

Web Standards Sherpa
Sherpa in Planning And Implementing Website Navigation

Tijuana Flats
Tijuanaflats-screenshot500 in Planning And Implementing Website Navigation

Unlocking.com
Unlocking-screenshot-small in Planning And Implementing Website Navigation

Cultural Solutions
Culturalsolutions in Planning And Implementing Website Navigation

Tinkering Monkey
Tinkering in Planning And Implementing Website Navigation

JustBurns
Justburns in Planning And Implementing Website Navigation

Drop-Downs And Mega Drop-Downs

While horizontal menus are best for top-level navigation, larger websites often need more in-depth navigation. Drop-down menus can fit a lot of items in one space, thus saving valuable real estate and keeping the navigation organized. The hierarchy can be refined with sub-levels and even sub-levels of sub-levels, helping users filter the information to get to the page or section they want.

Even more useful are mega drop-downs, which can accommodate an even wider variety of content and layouts, but more importantly provider larger click areas for users. They can be used to better organize navigation, as well as contain more content while saving space. They are also a great place for additional features and otherwise non-essential content. In both cases it is important to clearly indicate that the drop-down menu is available, either by using arrows or icons or something else.

Below is a small showcase:

Glasses-store-screenshot-small in Planning And Implementing Website Navigation

Shoe-store-screenshot-small in Planning And Implementing Website Navigation

Aviary
Aviary in Planning And Implementing Website Navigation

Estee Lauder
Esteelauder in Planning And Implementing Website Navigation

Portero Luxury
Porteroluxury in Planning And Implementing Website Navigation

Sunglass Hut
Sunglasseshut in Planning And Implementing Website Navigation

See how some of these menus are creative in their organization of content and navigation. Below are a few points to note:

  • Much of the navigation the small showcase above is organized into categories and sub-categories, which can be determined with the card-sorting method above.
  • Many of the websites have a different layout and style for each drop-down menu under each top-level link. This creates more variety and creates the appearance of sub-pages under the main page of a design.
  • Some of the websites have icons, images and regular text for link items; these elements could be used for promotion, navigation usability or simply organization.

These are just a few of the features in the drop-down designs above, but of course many more interesting solutions could be found. The point is that navigation is sometimes so extensive that sub-menus (whether via drop-downs or mega drop-downs) are necessary.

With smart CSS and semantic mark-up, implementing mega drop-downs shouldn’t be much harder than building traditional drop-down menus. However, one could run into issues. For example, in Safari, mega drop-downs tend not to display over Flash content. There are several workarounds to this, but the most popular seems to be to wrap the Flash in a div or other layer and then hide it when the drop-down is expanded.

Below are a few tutorials on drop-down and mega drop-down menus:

Conclusion

Navigation that is complex, whether because of content volume or membership considerations or something else, can add a lot of work to the design and development process. But with solid pre-planning and good organization, the work can be fairly easy. Organizing, designing and coding navigation can take many shapes, but there are definite trends to follow and resources to turn to for help at every stage.

Feel free to share other tips, examples and best practices related to complex navigation. There are probably many approaches to each stage of navigation development, and hearing about the practices and experiences of other designers and developers would be great.

Further Resources

(al)


© Kayla Knight for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: navigation, Showcases

May 18 2011

15:06

Optimizing Error Pages: Creating Opportunities Out Of Mistakes

Advertisement in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes  in Optimizing Error Pages: Creating Opportunities Out Of Mistakes  in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

In this article I’ll be reviewing a few techniques that will help Web designers and UI professionals to improve their error pages in order to engage visitors and improve overall website experience. As C. S. Lewis once said, “Failures are finger posts on the road to achievement”. Web designers should take this to heart. I’ll be focusing on error and maintenance pages, both from tracking as well as usability perspectives. I’ll also be providing a good number of examples on how to use analytics and defensive design in order to optimize user experience for such pages.

404-art-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
Image designed by Daniel Bronfen

First, let’s go over the error pages and cover the questions on how to optimize them efficiently:

  • Is your 404 page succeeding to engage visitors, following the frustration of not getting what they are seeking for?
  • How does one decrease the number of people landing on a 404 page?
  • How do you monitor your 404 page traffic efficiently?

Following, I will discuss techniques that can be used to improve conversion rates even when the website is under maintenance. Here are some of the questions you’ve probably been asking yourself:

  • How do I choose maintenance time wisely?
  • How do I increase visitor engagement while using a maintenance page?

Optimizing 404 Pages

The subject of improving error messages was thoroughly described on Defensive Design for the Web, a book written by the 37signals team. They cover 40 guidelines to “prevent errors and rescue customers if a breakdown does occur.” Guideline #16 tells us to offer customized “Page Not Found” error pages; and they provide an interesting insight into how to create error pages (page 93):

“Instead of merely saying a page is not found, your site needs to explain why a page can’t be located and offer suggestions for getting to the right screen. Your site should lend a hand, not kick people when they are down.

Smart things to include on your 404 page:

  1. Your company’s name and logo,
  2. An explanation of why the visitor is seeing this page,
  3. A list of common mistakes that may explain the problem,
  4. Links back to the homepage and/or other pages that might be relevant,
  5. A search engine that customers can use to find the right information and
  6. An email link so that visitors can report problems, missing pages, and so on.”

A while ago I came across the great examples shared here on Smashing Magazine (part 1 and part 2) and was very inspired to create my own 404 page. But since I believe it is so important to understand and analyze online behavior, I asked myself, “Is it really good enough? How can I make it better?” On the sessions below I go over a few techniques that can be used in order to both monitor and optimize 404 pages.

If you do not have a customized 404 page, please refer to this simple explanation on ‘How to Setup a 404 Page‘.

Monitoring 404 Page Traffic

How often do you check the traffic to your 404 page? Most of the companies I have worked with never did, not once. The importance of monitoring 404 pages constantly should not be underestimated. For example, if a website is linked from a prominent blog and the link is broken, this will cause a very negative experience to users (which will not find what they expected) and also to search engines (which will not crawl to the right content). Below, I show a few tips on how to track those pages in a seamless way using Google Analytics.

Note: The screenshots were taken using the new Google Analytics version, which is still in Beta, so your mileage may vary.

Create an Alert on Google Analytics

As you can see in the screenshot below, it is possible to set alerts on Google Analytics that will let you know each time your 404 traffic reaches a determined number of visits per day. This will enable you to do the work once and be alerted every time there should be a problem.

Google-Analytics-Alerts2 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows how to create a custom alert to track 404 pageviews.

Track Your 404 Page as a Goal

Setting the 404 page as a goal on Google Analytics will produce important information that can be achieved only through goals, e.g. the last three steps before getting to this page. In addition, it will make the task of finding traffic sources with broken links much easier. Below is a screenshot of how to do it:

Google-Analytics-Goal1 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows how to create a goal to track 404 pageviews on your reports.

Add Your 404 Content Report to Your Dashboard

Every report on Google Analytics can be added to the dashboard. By adding the 404 page to your dashboard, you will be able to constantly monitor the trend of visits to your 404 page:

Google-Analytics-Dashboard1 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows how to add the 404 goal to your dashboard.

Check Your Navigation Summary Report

This will help you understand what visitors do after landing on a 404 page, which is very important in order to optimize it:

Google-Analytics-Navigation-Summary3 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows the navigation summary for a 404 page on Google Analytics.

Track Internal Searches

If you do not have a search box on your 404 page, you should seriously consider adding one. Through searches performed in this page you will be able to understand what people were expecting to find there and you will get insights on which links you should add to the page. Below are the metrics you will be able to analyze if you use this feature:

  • Total Unique Searches
    The number of times people started a search from the 404 page. Duplicate searches within a single visit are excluded.
  • Results Pageviews/Search
    The average number of times visitors viewed a search results page after performing a search.
  • % Search Exits
    The percentage of searches that resulted in an immediate exit from your site.
  • % Search Refinements
    The percentage of searches that resulted in another search ( i.e. a new search using a different term).
  • Time After Search
    The average amount of time visitors spend on your site after performing a search.
  • Search Depth
    The average number of pages visitors viewed after performing a search.

Decrease Your Errors (Fixing Broken Links)

Monitoring your 404 pages is very important, but it is useless if you don’t take action upon it. Taking action means doing all you can do to decrease the number of people getting to the 404 pages and improving the user experience of the page to your visitors (next section). Below, I provide a few tips on how to find and fix both internal and external broken links.

Check Your Navigation Summary Report

This will help you understand where your visitors are coming from within your site, i.e. it will tell you which pages contain internal broken links. You will be able to see what percentage of the visitors have arrived to this page from internal and external sources; the internal sources will be listed in this report (see navigation summary screenshot above).

Check the Sources of Traffic That Land on the 404 Page

This will clearly show which websites have broken links leading to your site. Once you have the list, you should either contact these websites or create 301 redirects to the right pages.

Google-Analytics-Landing-Pages in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows sources of traffic that are leading visitors to the 404 page.

Usability Tips to Improve 404 Engagement

Basically, the usability tips for error pages should not be too different from website usability common practices. Below are a few of the elements that can definitely help to increase the conversion rates of 404 pages; in this context conversion should be considered Click Through Rate (CTR), as our main objective is for visitors to find whatever they were looking for:

  1. Simplicity and Focus
    It is very important to have appealing images and an original design. However, it is critical to have a clear focus on the page; users are already puzzled that they got somewhere they were not expecting, so we must make their lives easy and provide a clear action for them to take.
  2. Know Your Visitors
    Many 404 pages use humour and technical jokes. It is important to keep in mind that we are not our visitors, and jokes can be misunderstood, so use them with responsibility.
  3. Let Your Visitors Decide
    As I wrote in the Web Analytics Process: “Customers should tell us what to do, not consultants, friends or feelings; data and online surveys are the place to look for customers’ needs.” I believe the best way to understand what works for your visitors is by providing them with a few page version and let the best win (check the advanced A/B Testing techniques written by Paras Chopra).

Optimizing Maintenance Pages

Not long ago, I worked with a website that had weekly maintenance down times, about 1-2 hours a week. They chose the day with the least traffic for the maintenance, but I believe they did not completely understand how this affected the website and, more importantly, how they could improve the design of the page in order to optimize user experience and take advantage of this failure. In a previous post at Smashing Magazine, Cameron Chapman provides a good checklist to be used when designing effective maintenance pages:

  1. Keep your maintenance pages simple and useful.
  2. Realize it’s an inconvenience to your visitors.
  3. Don’t be afraid to use humor.
  4. Give your maintenance page the same look and feel as your regular site.
  5. Let visitors know when your site will be back.
  6. Provide recommended content.
  7. Invite your visitors to come back when the site is online again.
  8. Inform your visitors about the progress of the maintenance.

In additional to the tips provided above, I believe two additional rules can be especially important to please and engage your visitors.

Chose Maintenance Time Wisely

A very common practice for choosing maintenance time is to look at the traffic of the website and choose the time of the day, or day of the week that has the lowest visitor traffic. However, this misses an important point: websites want to optimize for performance, not for traffic. By choosing the maintenance time using visitor count, we might be optimizing for traffic and not for dollars. The best way to get this number would be to run an hourly report and check what is the time of the day (or day of the week) in which the conversions are the lowest.

Increasing Visitor Engagement Using Maintenance Pages

Improving visitor engagement while the website is in maintenance mode? Yes, you read it right. While your website is in maintenance mode you have a great opportunity to promote your additional marketing channels: offline stores, Facebook fan pages, Youtube channels, Twitter accounts, etc. Below you can find an example from the Online Behavior maintenance page:

Bad-timing-404-pages-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes
This image shows a Maintenance page example.

Closing Thoughts

As we mentioned above, errors happen, and we must be prepared for them. We must give a hand to our visitors when they are most frustrated and help them feel comfortable again. The level of online patience and understanding is decreasing and users have a world of choices just one click away, so website owners cannot let one small error get in their way.

What are your thoughts on this subject? Feel free to share them with us in the comment section below!


© Daniel Waisberg for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: 404, errors, maintenance, measurement, navigation, optimization

April 19 2011

17:33

Showcase of Creative Navigation Menus: Good and Bad Examples

Advertisement in Showcase of Creative Navigation Menus: Good and Bad Examples
 in Showcase of Creative Navigation Menus: Good and Bad Examples  in Showcase of Creative Navigation Menus: Good and Bad Examples  in Showcase of Creative Navigation Menus: Good and Bad Examples

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.

We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs; in some contexts, an interactive menu does make sense, especially when it comes to promotional websites such as online campaigns, portfolios or advertising — on these sites, interactive navigation can lend some dynamics to an otherwise dull and boring experience.

Below we present some interesting examples of website navigation menus — they are not necessarily very usable, but they are certainly inspiring and original and thus you could build your designs upon the ideas presented below: use them, tweak them and improve upon them. We also discuss the potential usability problems of each of the techniques presented in this post. Before using a similar technique in your design, please make sure that it fits the context of your design. Test, validate and verify that the technique would actually make sense in your website. Approach these techniques with caution. Let’s take a look at some interesting ways to present navigation menus content for both smaller promotional pages and deep informational websites.

Parallax and Scrolling

Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World site.

Nike Better World

Rich graphics and parallax 3D effects

Www Nikebetterworld Com-2011-3-11-20 18 20 in Showcase of Creative Navigation Menus: Good and Bad Examples
Vertical scrolling navigation with parallax background effects

On the Nike page, the effect is visible when a user scrolls the page vertically. The background images seem to overlap, as if they were piled up in a slide deck. This effect is particularly strong when you click on the circles in the right area of the site. Notice the dashed horizontal and vertical lines which are displayed as you scroll the page. They vividly connect parts of the site and help to create a more consistent user experience.

One drawback of the navigation here is that the navigation controls are very subtle. In fact, on many sites which use this technique, the strong emphases are on the rich, detailed illustrations which make it a bit more challenging to actually find the navigation. In this example, perceiving the dots on the right side as navigation and not mistaking them for part of the design may take a while. Still, a very original and memorable design.

Rosso Carmilla

Horizontal parallax animation

Www Rossocarmilla Com-2011-3-11-16 11 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling with parallax animation

Rosso Carmilla features an interesting twist on a combination of the Parallax-effect and scrolling navigation. The designer uses a horizontal rather than a vertical orientation, with a classic navigation menu at the top. As the user hovers over visual elements, they seem to move, creating the illusion of depth. The limited color palette and original illustrations work very well with the animation to create a memorable experience. The subtle animations are visible only when the user hovers over the content area.

The idea is very interesting, and the execution is done fairly well. However, a larger font size and additional navigation controls for a smooth transition between sections might improve the overall usability of the site: the horizontal scroll bar at the bottom of the page isn’t easy to notice and isn’t very comfortable to use.

Discover Tennessee Trails & Byways

Horizontal scrolling navigation, clarified.

Tntrailsandbyways Com-2011-3-11-16 15 37 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling with parallax animation and clarified navigation

Discover Tennessee Trails & Byways incorporate a “trail viewer” navigation for their users. The designers of the site use the same idea of horizontal scrolling navigation with a Parallax animation, but they decided to explain to users first how to use the navigation on the site. Usually, this is not a sign for an effective navigation, but it works quite well in this example, especially because the overall design appears to be very novel, playful and experimental to users anyway. In the case of uncommon or particularly innovative design techniques, this kind of instruction might be necessary until users understand the paradigm of the new navigation pattern.

When the user clicks on a trailer icon, further related details are displayed in a lightbox. Also notice how the “map” with trailer on the right side moves when the user uses the main “trail viewer” navigation. The other interesting navigation menu on the site is the one displayed at the bottom of the page; when a user selects an area, secondary options are displayed in the menu on the right side and this selection doesn’t change wherever the user’s mouse is. This navigation menu is also very nicely integrated in the overall site’s design.

Siebennull

‘Cluttered desk’ meets Parallax

Www Siebennull Com-2011-3-11-16 18 33 in Showcase of Creative Navigation Menus: Good and Bad Examples
A unique and original take on the ‘cluttered desk’ style

Strikingly original, Siebennull features a’cluttered desk’ style wooden theme, along with a 3D feel provided in part by shadows and other realistic graphics and in part by the Parallax effect which is applied to the whole page. The overall effect feel very interconnected without too much clutter.

One pitfall with an animated background, however, is that the background doesn’t necessarily hold still while the user is viewing something in detail, whether in a model box or a simple zoom-in. This can make it more difficult to read large blocks of text. The page does feel a bit difficult to focus on due to a strong Parallax-effect. This is probably an example of the Parallax-effect being used too strongly, thus deteriorating the purpose of navigation.

Storytelling

It’s common practice to keep the design as simple and intuitive as possible, making it very easy for the user to click from one page to the next, almost mindlessly — “don’t make the user think” is the rule. However, you could as well engage users on your site, making them think about what’s going on in the page and involving them in the experience on a deeper level. For instance, you could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with.

One way to make your visitors feel involved is to turn the website into an interactive journey. While users interact with the page, they can learn something along the way, being baffled by the originality and uncertainty of the site. This technique is probably best-suited to promotional landing pages rather than content-heavy websites. If a story is intriguing and presented in an interesting, perhaps unconventional way, it will capture users’ attention and encourange them to continue through to your site’s call to action. A few fine examples of these types of navigation are highlighted below.

Ben the Bodyguard

A narrated landing page

Benthebodyguard Com-2011-3-11-16 27 0 in Showcase of Creative Navigation Menus: Good and Bad Examples
An exciting user experience, creating user-engagement with design and effects

The designers of the Ben the Bodyguard landing page have chosen a very memorable metaphor for their main character. Instead of presenting a generic “coming soon” page with a description of the upcoming service, the site effectively tells a story. The main tagline of the page is “A Frenchman protecting your secrets. Yes, seriously.” Next to this statement, a description of the tool is presented subtly. The mysterious character is displayed in the background, yet it very well captures users’ attention and interest.

The actual interesting part of the page happens when you scroll the page slowly. If you pay attention to illustrations and read all the details presented, you can watch as a story unfolds. While the narrator walks down the street, he gives you some explanation, but only enough to raise your interest. As you keep scrolling, the story reaches its climax and ends with a prominent call-to-action buttons. Notice that the design is responsive and the illustrations adjust to the user’s viewport. On the whole, it’s not classic navigation, but it’s not a traditional site either. Ben the Bodyguard is a remarkable website and storytelling works very well in this context of a promotional piece. That’s the reason why the site has received so much attention when it was initially released.

Youzee

Smooth, gentle storytelling

Youzee Com-2011-3-11-16 21 26 in Showcase of Creative Navigation Menus: Good and Bad Examples
Smooth, gentle parallax animation

Youzee is another example of a smooth, vertical one-page scrolling navigation which employs storytelling. The page has the main navigation at the top, yet it is not linked to separate pages, but rather to the sections of the loaded page. In fact, each section slides up neatly, with a bit of animation but not enough to make the user dizzy.

Notice how carefully the designers use storytelling to involve the user in a story and engage them in learning about the tool. Opposite to Ben the Bodyguard, the design doesn’t rely heavily on a character, but rather uses more familiar, existing metaphors to unfold the story. The main area on the top isn’t saying what the service is about; the user learns it along the way as he scrolls the page. Also notice how well designers use the “Turn on” metaphor for the button on the top of the page; it looks as if it wanted to be clicked on and responds appropriately to a click. Well done, guys, well done.

Scrolling Navigation

Tried and true, scrolling navigation is a simple and elegant way to guide users through your content. Many designers are experimenting with scrolling navigation on single page designs which accomodate the full information of a website on one page rather than spreading it across multiple pages that would load separately. Usability studies are required to determine if this navigation pattern is more effective than a classic one, and it would be wrong to apply it to contexts without verifying its usefulness first. Some ways of making your scrolling navigation unique are highlighted below.

Polecat

Back to the basics

Ipolecat Com-2011-3-11-16 28 16 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple solid scrolling navigation

Polecat is a yet nice example of a single page site with scrolling navigation. The primary navigation in the upper right corner is very minimal, plain text almost, but it works well because it’s not in the way; it’s clearly available and makes the user feel like they know exactly where they are. The illustrations are unique and engaging. When you visit the page for the first time, you might feel overwhelmed with a number of information items thrown at you, but this feeling goes away shortly after the site is explored in more detail.

When a navigation item is clicked, the page smoothly scrolls to the chosen section of the page. The interesting part is that various parts of the page are clearly divided using distinctive background colors, so the user always knows exactly where a section begins and where it ends. Also, each section is vividly illustrated, leaving a lasting and memorable impression. It has a more interesting and engaging design for a portfolio website than many of the similar websites out there.

The main drawback: at first glance, it’s not quite clear which elements are clickable and how the navigation works, which can be a bit confusing at first.

Cornerd

Simple vertical scrolling navigation

Cornerd Com-2011-3-11-16 29 28 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple vertical scrolling navigation

Very much like Polecat, Cornerd features lots of illustrative eye-candy. The monster theme is working very well and subtle eye movements of the monsters create an inviting, playful atmosphere. The designer Denise Chandler does not take herself too seriously and this is exactly what invokes empathy and sympathy on the site, making it easier to develop trust for designer’s ability to produce engaging and attractive work.

The sections of the page work well, but a fixed navigation at theop might really help to establish more of a sense of freedom, especially in the long sections like the portfolio section. Instead of that, the user is only provided with the option to move back up.

Curious Generation Group

Single page scrolling with a twist

Curiousgenerationgroup Com-2011-3-11-16 34 53 in Showcase of Creative Navigation Menus: Good and Bad Examples
Single page scrolling with a twist

While clean and organized, Curious Generation Group feels a bit unexpected with its colorful round shapes. A simple static navigation bar at the top is both subtle and plays well with the overall design of this website. Sometimes a fixed navigation bar can feel clunky and distracting, but this one feels light and airy with its transparency. The positioning of the content works well with the animation of the scrolling and does a good job of leading your eye through the website. Notice that all single areas are interconnected: for each area, there is a sidebar navigation displaying further navigation options. A very vivid, colorful and memorable design.

Eric Johansson

Riding on a scooter

Ericj Se-2011-3-11-16 25 45 in Showcase of Creative Navigation Menus: Good and Bad Examples
Riding on a scooter, featuring parallax animation

Eric Johansson does a couple of things that make the exploration of his site interesting for the user. The page provides subtle cues on how to use the navigation and there is also a (kind of) horizontal scrollbar which appears within the context of the page. It’s a small difference, to have a scrollbar a few pixels above the bottom of the window as opposed to using the browser scrollbar itself, but it provides almost enough distinction to make it clear that the user is supposed to click and drag.

As the users scroll the page, they need to look out for arrows and handles that need to be clicked on in order for further navigation options to be displayed. Eric is playing with the users, and does so in a very unique way. Users that do not feel comfortable with it are nevertheless provided with the option to View the extended & “normal” site. The graphics on the page could be improved a bit to make the design look a bit realistic, but maybe it is designed this way on purpose. But it would be great if the users could scroll the page without necessarily using the integrated scroll bar on the bottom of the page (see Scroll Page Horizontally With Mouse Wheel).

Haunted Cathouse

Vertical scrolling navigation with storybook graphics

Haunted Cathouse in Showcase of Creative Navigation Menus: Good and Bad Examples
Vertical scrolling navigation with storybook illustrations

Haunted Cathouse is a yet another, very detailed and very illustrated page which breaks the flow of the page by displaying unique illustrations between the sections of the page. As the user scrolls vertically, he can either see the current section, jump to the previous one or to the next one.

Clicking on the little owl in the lower right corner reveals a slide in navigation bar at your service wherever you are on the site, a better indicator however may save the visitor some time. While some users may be happy to start scrolling away on their mouse to get to the content, in this particular design it might be useful to provide multiple options. A top-level navigation bar also provides a way to highlight what kind of content users can expect to find below.

Sam Web

Horizontal scrolling within horizontal scrolling

Www Samweb Com Br-2011-3-11-16 36 42 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling nested within horizontal scrolling

Sam Web’s horizontal scrolling panels, while a fairly classic navigation model, are very cleanly executed. It’s also nice that some sections slide horizontally while the contact link scrolls to the bottom, since that element is present globally.

The interesting thing here is the nested horizontal scroller on the portfolio page. Since it scrolls in the same direction as the main content area, but isn’t controlled by the same navigation, it has some potential to confuse users. The left and right arrows are visual indicators that something is different about this section, but it also might benefit from being a slightly different kind of scroller, or using some other interaction to navigate that content. It’s a tricky thing, finding a slick way to add navigation to subcontent already inside of some sort of interactive navigation.

Denny’s Restaurant

Too much of anything is bad for you

Dennys in Showcase of Creative Navigation Menus: Good and Bad Examples
Combined horizontal and vertical scrolling

The designers of Denny’s Restaurant probably overshot when searching for a way to accommodate a lot of content. The combination of horizontal and vertical scrolling is rather disorienting than helpful. Without the small hint on the home screen, the user may even miss the content only reachable through the extra vertical scroll. Additional content is hidden in sliders and it seems easy to get lost. In addition to being confusing, the site is not very friendly to mobile users, looking to order or find a restaurant on the go. The site might create a feeling of “fluid content” which is a bit difficult to grasp and focus on, since everything is moving; everything is interactive and everything is changing. The design could use a bit more calm.

Experimental Navigation Menus

It seems that designers often feel a bit underwhelmed with classic navigation pattern and inventing new methods of navigation or just add a new twist to convenient design patterns. The sites featured below present navigation in some interesting ways.

Ferocious Quarterly

The more unconventional tabs

Fe Rocious Com-2011-3-12-12 53 41 in Showcase of Creative Navigation Menus: Good and Bad Examples
Interesting illustrations

Ferocious Quarterly’s tabs in the upper section of the site are a little out of the ordinary. The single fact that they are presented in a different way, creating an illusion of depth, makes the design stand out a bit. A good example of how a small detail can make an otherwise quite unspectacular design look a bit more interesting.

Zut Alors

Pop-up-mania at its best [WARNING: First five seconds may cause a headache!]

Zutalorsinc Com-2011-3-11-16 42 27 in Showcase of Creative Navigation Menus: Good and Bad Examples
Front and center tabbed navigation

Overall, ZUT ALORS! is extremely avante garde and very non-traditional. The large front and center letters are the only content on the page, and they are the navigation. Each letter pops open a series of thoroughly arranged pop-ups with subsequent page content.

While this approach is unique and bound to stand out, it will also deter average users. The short, simple statement on the landing page isn’t very informative and makes the user get confused. The pop-up secondary pages could backfire though: if the user has many windows open, the new opened ones won’t necessarily be the primary focus, which could make the design confusing. Although it is possible that that was the intention of designers in the first place. A very weird, noisy and extremely memorable design. Please do not try this at home.

Method Design Lab

Up-to-date news

Method-Design-Lab in Showcase of Creative Navigation Menus: Good and Bad Examples
Graphic equalizer selector

Method Design Lab’s menu to follow their feed is one of a kind. Following their activity on the site is made easy by the graphic equalizer-like history in the top right hand corner. Clicking on an hour brings up all posts, media releases and tweets of the past hours. Differentiating between the different types is easy since each is assigned a specific color. A click on one of the news bubbles pops open a window with the actual message. Both the idea and the implementation are quite refreshing and do not overstrain the visitors patience.

The Web Standards Sherpa

Skipping through content

The-Web-Standards-Sherpa in Showcase of Creative Navigation Menus: Good and Bad Examples
Clear and easy — as long as the content is limited

The Web Standards Sherpa basically comes without much of a navigation. The content is presented on slides that can be skipped through. The arrows clearly indicate the preceding and following articles. While it is still manageable to skip through less than ten articles, this type of navigation is of no greater use once more than twenty articles are up for view. The link to a list of all published articles as well as the search function takes care of this. A level deeper into the site, the horizontal navigation only consists of three clear options that leave no one in the dark about their whereabouts.

BonLook

Illustrated Drop-Down Menu

BonLook1 in Showcase of Creative Navigation Menus: Good and Bad Examples
Offering choice by shape using pictograms

BonLook features a nice example of a clean and simple illustrated drop-down menu. Choosing glasses by shape instead of brands makes the product catalog easier for any customer’s browser. In general, using pictograms in menu contexts eases orientation and helps customers find what they are looking for.

Design Intellection

Right-side dynamic navigation tabs

Design-Intellection2 in Showcase of Creative Navigation Menus: Good and Bad Examples
The right-hand navigation changes its appearance

The guys at Design Intellection present their portfolio-style site with a tab navigation on the right hand side. Interestingly enough, the navigation changes appearance when scrolling into the context section of each page, replacing the original literal menu with small icons. A click on the icons brings the user back to the top of each section, giving them a quick hint that the icon style is simply a smaller version of the main menu, not a submenu for the specific content section.

Generally a nice and intuitive menu style worth adapting and easily extended to cover subsections of content.

Bernat Fortet Unanue

A creative and interesting way to present your work

Bernat-Fortet in Showcase of Creative Navigation Menus: Good and Bad Examples
Clear and interesting categorical menu design

Fortet features 22 categories of work in the form of circular navigation buttons. The full menu reappears at the end of every page, making the site easy to skim through. Even though it is quite space intensive, the user is already used to its look and recognizes the visited categories. Another example of a clear visual indication contributing positively to the look and feel of the site.

Lega-Lega

Intuitive and clear pictograms with roll-over titles

LegaLega in Showcase of Creative Navigation Menus: Good and Bad Examples
Straightforward Navigation

The Lega-Lega is simply structured and slick. The menu only consists of seven categories, each featuring a single layer. Only minus: the horizontal scroll-bar may easily be mistaken for part of the layout rather than being recognized as a scroller. Adding a mouse-over effect might fix the issue. A clean and easy site with straightforward navigation — you certainly will not get lost here.

Bluecadet Interactive

Clean submenu

Bluecadet in Showcase of Creative Navigation Menus: Good and Bad Examples
Letting the user choose the category

Bluecadet sets an example in implementing a clean version of a graphics-heavy submenu. The design features a slider on the right side; as the user browses the items of the slider, the background image changes as well. Once an item in the navigation is chosen, the page displays the previous and next projects as well as provides a link to get back to the main menu. Also, the user can personally check the categories being displayed.

Danilo Iurlaro

Creative animation effects

Www Daniloiurlaro Com-2011-3-11-16 47 111 in Showcase of Creative Navigation Menus: Good and Bad Examples
Creative animation effects

Danilo Iurlaro features a creative use of scrolling animation effects, and it certainly stands out in a crowd. However, the text that jumps down from the top whenever a navigation item is clicked is truly annoying and distracting. At first, it gives the impression that this text is the title of the page, not just a transitional graphic, which actually isn’t the case. Letting the users scroll down manually to view the actual content with such a large navigation area is quite a challenge.

When using novel navigation techniques that many users might be unfamiliar with, it’s really important to utilize clear labelling to help them find their way through the site.

Fantasy Cartography

A map of navigation

Www Fantasy-cartography Com-2011-3-11-17 0 36 in Showcase of Creative Navigation Menus: Good and Bad Examples
A map of navigation

Fantasy Cartography is a site showcasing maps, with navigation that is modelled after a map itself. While the content sections are basically a take on scrolling navigation, the organization and layout of the navigation options is unusual. The site is also full of ‘soft effects’ which tie it well in with the illustrations.

Clear visual indication using the link-corresponding dots correlates the active tab with the displayed content. Labelling is key in atypical navigation situations.

C&C Coffee Company

Charming animation

Www Candccoffee Com-2011-3-11-16 43 13 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple and fun, animation that enhances the navigation without distracting from it

The upper navigation of C&C Coffee Company is an example of animated navigation that is minimal, simple, and although being dynamic, doesn’t force itself onto users. The dynamic navigation elements fit nicely to the overall design of the page which also contains other “hand-written” elements, giving the brewery a more personal, friendly touch. Still, having seen the animation once may be enough for some visitors.

Breadcrumbs

NOS

Context-sensitive breadcrumbs

Nos-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
Interactive breadcrumb

The top-level navigation in this example is really simple, but very clever. NOS displays sub-categories to the right of each top-level category when clicked, almost like a breadcrumb. This is a really interesting take and a good way to handle a large content-heavy site with a lot of categories. It lends itself well to the blog format where a lot of different new categories may be coming and going constantly.

MDM Bank

Persistent breadcrumb

Mdm-bank-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
Persistent breadcrumb

MDM Bank features a classic breadcrumb-style navigation. However, it not only keeps track of where users have been so they can always return easily to any given point, but clicking on the site map tab reveals the complete interactive map for easy pinpoint navigation throughout the site.

Sliding Sections

Sliding sections are a great way to display a lot of content in less space. You have the advantage of focusing the user into that specific content block at a time, which can be useful if you’d like to present certain information and are trying to not distract the user with other information at the same time. Below are some examples of effective implementations.

Directions

Accordion style navigation links

Directions Com-2011-3-11-16 45 5 in Showcase of Creative Navigation Menus: Good and Bad Examples
Accordion style navigation links

Directions is a well-executed example of sliding sections. There’s a lot of content on this one page, but it doesn’t feel overwhelming because not all of it is displayed at the same time. This is a good method for a site with a lot of links, or that’s just deep.

The secondary navigation is carried through to the secondary pages, so users won’t get lost. One suggestion, however, would be that if the navigation pattern would somehow reappear on the secondary pages as well, instead of the classic navigation. This might just help make the site appear a bit more striking and coherent.

Coexhibitions

Expand to see content

Co-Exhibitions in Showcase of Creative Navigation Menus: Good and Bad Examples
Expand the calendar elements

Coexhibitions basically is one big sliding menu. Clicking on the titles reveals information about past and current events taking place in their showrooms. Certainly a good choice for a site with limited content, even though an easy way back to the top is not offered. Hiding the content in sliders is comfortable. In this case it helps create a calendar of events taking place at the venue.

Bankwest

Multiple expanding levels

Www Bankwest Com Au-2011-3-18-15 52 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
Multiple expanding levels

Bankwest does not use sliding animations, but it’s a good example of a multi-tiered navigation system. They have a left-aligned top level navigation, which expands first vertically and then horizontally as the user navigates deeper. This is another good strategy for a very deep, content-heavy site. While it works very well as it is, a little JavaScript interaction allows users to peruse the deeper levels of navigation a bit more easily, making it even more effective. Notice the breadcrumbs navigation at the top of the content area: it supports the navigation and helps the users track their path throughout the website.

Elliot Lepers

Sliding boxes with captions

Viteungraphiste Com-2011-3-11-16 45 58 in Showcase of Creative Navigation Menus: Good and Bad Examples
Sliding boxes with captions

Elliot Lepers uses an interesting grid layout with interactive sliding boxes. They load quickly and the website is easy to navigate. The simplicity of the information being on the main page makes it extremely difficult to get lost, as there are always arrows to follow and to click. The colors are quite energizing and the content nicely organized.

The secondary pages for each project are also well-done. The big arrow on the left is the only navigation that appears on each, but since the primary navigation is the front page, it still perfectly serves its function.

Global Humanitarian Assistance

Hidden sections help deal with large amounts of content

Www Globalhumanitarianassistance Org-2011-3-11-16 54 52 in Showcase of Creative Navigation Menus: Good and Bad Examples
Hidden sections help deal with large amounts of content

One of the first things a user probably should notice on Global Humanitarian Assistance is the bright yellow left slide-out menu. It’s neatly executed, yet because all other elements are yellow, too, it doesn’t really jump to an eye. The site is very data-heavy and intended to provide visitors with access to many reports and case studies which are all hidden behind the yellow bar; in general, it’s a very neat and simple way to hide secondary navigation until it’s needed (context-sensitive navigation). An interesting idea: such slide-out panels are generally a good way for content-heavy sites to hide things while making them globally available. In this specific case, the secondary navigation panel could have been a bit thicker to attract the user’s focus.

Creative NZ

A lot of information in a small amount of space

Creative-nz-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
A lot of information in a small amount of space

Creative NZ features a “mega drop-down-menu”. This is a nice example of a navigation that makes good use of the space by adding classic navigation (like the contact form, advanced search, etc.) as well as informative blocks along the bottom of each one. If you’re going to use such a menu, it’s really worth taking the time to carefully study the content and make sure that you’re efficiently selecting the content to be included in each submenu.

Additionally, notice the categorized slider on the main page. By making use of categories, it actually presents multiple slideshows at once.

Conclusion

Some final points to keep in mind when working with creative navigation:

  • Use appropriate descriptions to clarify when necessary. Not every engaging navigation paradigm is self-explanatory; sometimes a little explanation or introduction to the technique may be of greater help to the users of the site. Do not exaggerate and do not overcomplicate things, though. The experience should be smooth and simple.
  • Consistency is crucial. Even completely avante garde navigation can work well when key elements are always accessible, allowing the user to permanently have an overview as well as a sort of life buoy.
  • Use clear labels. Simple image cues aren’t always enough to guide users, and animated clues might not be perceived as navigational elements.
  • Consider telling a story. You could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with. This technique is probably best-suited to promotional landing pages rather than content-heavy websites.

Related Posts

Note: Thank you to Smashing Magazine’s proofreader, John von Bergen.
(ik) (vf)


© Sarah & Adrienne Kahn for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: jquery, menu, navigation, parallax, showcases

April 04 2011

05:25

25 Beautiful & Inspiring Navigation Menus

The importance of a website’s navigation shouldn’t be overlooked. After all, without it, one wouldn’t make it much further than the home page. That’s why designers spend extra effort coming up with ways to make the navigation menu not only look great, but also easy to use. For your Monday inspiration, we’ve rounded up 25 examples of beautiful and inspiring navigation menus.

Beautiful Type

Also some nice colors and type here. Social menu on the header and everything else on the left side.

navmenus18

Drupalcon Denver

Single page layout with footer navigation menus that will take you around.

navmenus01

CXXVI

Browse around using the header menu or the image slider, really nice and clean.

navmenus03

Unfold

Another beautiful single page layout with a nice and smooth header navigation menu to take you around.

navmenus04

Tinkering Monkey

Beautiful layout! Nice and clean menu, colors and typography.

navmenus05

Shout

Nice colorful layout with a basic straightforward menu. Also a nice typography choice.

navmenus06

Sellected Studio

Really beautiful layout and navigation. Color combination and typography are really elegant.

navmenus07

Webvisionary Awards

A strong and cool single page layout. You can scroll around or use the header nav menu.

navmenus08

David Desandro

Nice layout based on shapes and typography. Header menu using pure typography and hover effects.

navmenus09

TEDxPortland

Another nice single page layout with footer navigation menus that will take you around.

navmenus10

Bluecadet Interactive

Beautiful and elegant layout with nice navigation menu that ‘frame up’ when you hover it.

navmenus11

anCnoc

Clean layout based on typography and beautiful images. Header and footer menus to help your navigation.

navmenus12

Lounge

Delicate single page design with typographic header menus.

navmenus13

Gene’s Sausage Shop

Beautiful typography and style on the navigation menu, and it actually looks like a real menu. ;)

navmenus14

Luke Dorny

Nice layout, colors, typography and menus. I also really liked the blurred effect when you load the page, check it out.

navmenus15

Visual Republic

Elegant single page design with a side menu that follow you where you go and help you navigate the site.

navmenus16

Wigolia

Beautiful layout. Elegant choice of colors and typography. Smooth navigation menu with a fade hover effect.

navmenus17

Facio Design

Beautiful layout and colors. Nice framed menu with hover effects.

navmenus19

Collaborative Fund

Another nice single page layout with smooth navigation menus.

navmenus20

The Coastal Cupboard

Nice layout, colors, type and images. Elegant and simple navigation menu with hover effects.

navmenus21

Ferocious

Header menu based on typography and shapes.

navmenus22

Scribble & Tweak

Super beautiful single page layout with smooth and clean menus.

navmenus23

Don’t Throw Batteries

Big and simple – a good combination for an effective nav.

navmenus02

Nordkapp

Yes, another single page layout with smooth navigation. ;)

navmenus24

Interlink Conference

Nice colors, type and menus.

navmenus25

Source:

The Best Designs
Unmatched Style

January 24 2011

07:00

How To Create a Cool Animated Menu with jQuery

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

View the animated menu demo

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

View the HTML code

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each <li> item containing an anchor.

Style up the design with CSS

View the CSS code

Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the <ul> with margin: auto; and text-align: center; and clear the element using overflow: hidden;.
Float each <li> item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item.
Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

Spice up the effect with jQuery

View the Javascript code

In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

View the jQuery code

The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set the backgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a .stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

View the extra jQuery code

A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

The complete HTML, CSS & jQuery code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f5f0e0 url(images/noise.png);
}

#container {
	height: 800px;
	background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none;
	}
		ul#nav li a {
			display: block; width: 97px; height: 77px;
			padding: 72px 0 0 0; margin: 0 32px 0 32px;
			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

			background: url(images/label.png) 0 -149px no-repeat;
		}
			ul#nav li a:hover {
				background: url(images/label.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
			}

			ul#nav li a.js:hover {
				background: url(images/label.png) 0 -149px no-repeat;
			}

jQuery

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

The final animated menu design

View the animated menu demo

View the animated menu demo

December 06 2010

10:00

Eye-Catching Websites with One-of-a-Kind Navigations for Inspiration

A website is like a magazine where people search for information. The table of contents of a magazine is like the navigation of a website. Table of contents provides an overview of your magazine, while a navigation also shows on what your viewers should expect to see on your website. Both serves as pathways for your viewers on how they can read your mag or explore your website.

Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.

Components of Good Website Navigation:

1. Primary Navigation

Primary navigation are the main menus or categories of a website. These are considered as the most important links that can be seen the moment your website loads. Most of the primary navigation consists of Home, About Us, Contact Us and other links depending on what kind of website you are creating.

Primary navigation sample

Keep in mind that primary navigation should not have more than seven or eight links. Choose the most important links and put them as the main menus and the rest will be placed on the sub-menus.

2. Secondary Navigation

Secondary navigation are the secondary links or sub-menus of a website. Usually, these are to be found from a drop down menu or a fly-out menu.

A drop down menu is when a user mouse over and click on a menu button, then sub-menus will be shown.

Submenu sample

Sample Image of a Drop Down Menu

A flyout menu is when a user hovers onto a menu button, then sub-menus will appear. In this case, the user doesn’t have to click the button for the sub-menus to appear.

Fly out menu sample

Sample Image of a Flyout Menu

3. Position of Menus

It is important that you position your menus on a place where your viewers can easily see them.

Usually, horizontal navigation is put on top and under the header of your website. While a vertical navigation, this is commonly put on the left side of the website.

To add up on to this, always put your menus from left to right since most viewers start reading from the left.

Left-to-right-navigation

Even you put your links from right to left, your viewers will still read them starting from left. Take the image below as an example. Even the links are put into a right to left position, viewers will still read them starting from the Contact Us, Blog, About Us and then Home.

Right-to-left-navigation

4. Size of Buttons and Menu Label

The size of your menus must be noticeable, but not too large that they would occupy too much space. Adjust them where they can be seen easily by your visitors while maintaining a professional look.

Wrong-size-menu

When putting menu labels, make sure they are readable in size. Also, choose a font color that is in contrast with the color of your button. If the color of your button is light, use dark color for your menu label and vice versa.

Correct-size-menu

5. Color of Menu Buttons

Colors are one way to entice the visitors of your website. Use a color for your menus that is in contrast with the background color of your website. This way, you can capture the attention of your viewers and your buttons will stand out with the other elements of your website.

Tulumarka

Take a look at this example. Even the buttons have the same color as the background, it still stands out for it has button-click effect and the text color is white.

Merixstudio

6. Icons and Effects

Icons are great way to differentiate your buttons and they also inform users on what viewers could expect on that link. Also, hover effects is a good way to attract viewers’ attention. This also informs the visitor that they can click the button which looks different from the others. You can also put a button-click effect to inform your viewers on what button they clicked.

To give you more idea about this, I have here a good example of website navigation. The designer of PixelResort put icons on top of each menu label to represent the link. Also, it has a hover effect (glowing circle) and a button-click effect (arrow pointing on the link). In this case, the page is on the Blog link and the mouse pointer of the viewer is put on the Goodies link.

Pixelresort

And my last tip for you…

7. The less click, the better.

Viewers tend to be impatient when searching for information, they want to seek what they are searching very quickly. Make sure that your navigation respond as quickly as possible to your viewers’ instincts.

In this article, I will highlight amazing horizontal and vertical navigations for your inspiration. First, let us take a look at horizontal navigation.

Horizontal Navigation

Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.

Good Characteristics:

1. It occupies less space

Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.

2. More noticeable

Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.

3. Easier to use

Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.

4. Viewers are already used to it

Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.

Bad Characteristics:

1. Limited space for your menus

When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.

2. Can only be used if number of menus are already known

Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.

Here are some example of horizontal navigation for your inspiration:

1. Rayman

Rayman

2. Davroc Interiors

Davroc

3. Rzepak

Rzepak

4. Owltastic

Owltastic

5. Sarah Hyland

SarahHyland

6. Racket

Racket

7. Kinder Aktuell

Kinderaktuell

8. Acko

Acko

9. Red Velvet Art (Horizontal Navigation)

Redvelvetart

10. Xedum

Xedum

11. Design Nut

DesignNut

12. Jay Taylor Design

Lehighvalleyweb

13. Mac Rabbit

Macrabbit

14. Getraenke Kukral

Kukral

15. Noizi Kidz

Noizikidz

16. Chris Guille Beau

Chrisguillebeau

17. Small Stone Recordings

Smallstone

18. Max and Lous

Max&lou

19. Loodo

Loodo

20. Boukarabila

Boukarabila

21. Jiri Tvrdek

Jiritvrdek

22. Ungarbage

Ungarbage

23. Duarte Pires

Duarte Pires

24. CSS Beauty

Cssbeauty

25. Manndible Cafe

Manndiblecafe

Now let us go to vertical navigation.

Vertical Navigation

Vertical navigation are usually placed on the left side of a website and the menus are placed from the top to bottom, like a ladder.

Good Characteristics:

1. It allows grouping of menus

Vertical navigation allows you to group your menus and place sub-menus under each main category. Unlike in horizontal navigation, you still need to create a drop down menu for the sub-menus.

2. It is easier to add or remove menus

If you are trying to put more or remove menus in the future, you can use vertical navigation. It will be easier for you to add or remove menus without resizing each buttons.

Bad Characteristics:

1. It occupies a lot of space

Usually, menus in vertical navigation are placed on the left side of the website and this occupies a lot of space on the whole website template. Unlike when using horizontal navigation, you are just using the top part of your website.

2. Limited characters for your menu label

For your buttons not to occupy too much space, you are limited to few characters when putting labels for your menu. If you will be putting many characters, tendency is the font size of your menu label would be small or you will occupy too much space on your template.

3. Scrolling down is needed for websites with many menu buttons

If you have several menus for your website, the tendency is that your viewers need to scroll down their to see the other menus placed at the bottom part.

4. Viewers are not used to it

Viewers expect that a website should always have a horizontal navigation, since it is mostly used by web designers. But nowadays, there are already websites that are using vertical navigation and are designed creatively to make it easier and noticeable for visitors.

To give you more idea about vertical navigations, take a look at these websites.

1. Brian Handley Design

Brianhandleydesign

2. R.I.P. Cube Club

Ripcubeclub

3. INNOVATIVE Imaging Professionals

Innovative

4. Envira Media Inc.

Enviramediainc

5. Oink El Rellano

Oink

6. Gary’s Real Life

GarysrealLife

7. Total Body Care

Totalbodycare

8. Red Velvet Art (Vertical Navigation)

Redvelvetart2

9. Extra Tasty

Extratasty

10. Power to the Poster

Powertoposter

11. Cambrian House

Cambrianhouse

12. Cassys Design

Cassysdesign

13. Diego La Torre

Diegolatorre

14. Brown Blog Films

Brownblog

15. Wards Exchange

Wardsexchange

16. AJ Miles

Ajmiles

17. Washtenaw Community College

Washtenaw

18. Adventure Here

Adventurehere

19. KKMedia

Kkmedia

20. National Television

Natl

21. Utah Travel

Utahtravel

22. Notorious Design

Notoriousdesign

23. This is Leaf

Thisisleaf

24. District Solutions

Districtsolutions1

25. Thora

Thora

Other Examples of Navigations

Here are some examples of websites with one-of-a-kind navigations.

1. Noroutine

Noroutine

2. Good Man

Goodman

3. Time for Cake

Timeforcake

4. Steven Holl

Stevenhollarchitects

5. Michael J. Yang

Michaelyang

6. WOW Brand Impact

Wowbrandimpact

7. Nathan Borror

Nathanborror

8. Creative Storm

Creativestorm

9. Nora Rose Travis

Norarosetravis

10. Deconstruction Records

Deconstructionrecords

What are your favorites among the selection? Comment out and feel free to share.

For high quality Photoshop navigation menu tutorials, click the link below.

50 Really High Quality Photoshop Navigation Menu Tutorials

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...