Posts tagged 'Information Architecture / IA'

By: adam.huse at 8:12 am

Not Invented Here Vol. 2: Fat Footers

Mar
1

Welcome to Vol.2 of Not Invented Here, a new semi-regular series on trends and innovations in interaction design (IxD).

For much of the life of the web, the footer has largely been an afterthought, usually containing only a small number of simple elements: a copyright statement, security and privacy statements, and maybe some utility links. That’s about it.

Traditional style footer on www.ford.com (as of Feb. 04, 2010)

Designers have generally given little attention to this seemingly insignificant element. And why would they? The prevailing assumption was that users don’t scroll, so let’s keep everything important at the top of the page. The footer could be an afterthought because no one would look at it anyway.

But based on some compelling research, users’ true habits have proven to the contrary – people are in fact scrolling and the myth of the fold is finally coming undone. Armed with this knowledge, the footer has been undergoing an evolution and designers are giving the lowest page element some love.

Over the last couple of years we’ve seen the rise of the Fat Footer, or as I prefer to call them, “Super Footers,” a name that’s not just less insulting, but downright impressive.

Fat footers, as their name implies, are just larger footers that make room for an increased and varied array of elements. These have come to include, among others: redundant navigation, site maps, searches, featured content, social sharing elements, and contact info and forms.

Examples of Fat Footers

Fat footer on www.comedycentral.com (as of Feb. 04, 2010)

Fat footer on www.ea.com (as of Feb. 04, 2010)

Benefits of Fat Footers

So what is the big deal?

We reached out to user experience specialist Kara McCain of Nielsen Norman Group to get her take, and this is what she had to say:

“It’s basically about predicting a user’s next need(s), keeping them moving throughout the site by helping them find the most relevant information and completing their tasks when they get down to that part of the page (rather than just slapping your copyright information and privacy policy down there and calling it a day). ”

— Kara McCain, User Experience Specialist at Nielsen Norman Group

Fat footers provide added utility and usability in a somewhat surprising place by keeping users moving through a site with two main benefits: second chances and additional considerations.

Second Chances: By providing redundant navigational links or a shallow site map, fat footers can give users a second chance to find the content they’re looking for.

A couple levels of navigation can be listed out in a fat footer without the same restrictions of vertical space that designers must adhere to in the header. This allows users a quick scan of the site without having to scroll back to the top to poke around the global navigation in a trial and error manner.

But, however useful they may be, fat footers should not be relied upon to make up for shortcomings in site architecture or navigation design.

Site navigation in the Fat footer on www.whitehouse.gov (as of Feb. 04, 2010)

Additional Considerations: The fat footer can be a great place to globally highlight featured content and additional resources (social networking, subscriptions, affiliate sites, etc…).

This can take the pressure off of more valuable page real-estate in the header or page body by either providing an alternate or redundant location for the this kind of content. For blogs, news, and e-commerce site, this can be particularly useful where users are scrolling down the page while scanning listings, reading an article, or exploring product details.

Featured content in the fat footer on www.h-d.com/darkcustom (as of Feb. 04, 2010)

Fat But Not Bloated

The footer may be getting fatter, but just like with mega-dropdowns, caution should be given so that it doesn’t also get bloated with too many unnecessary elements and links.  Basic design rules of clarity and scanability still apply. Keep enough breathing room between content and provide clear headers. If users have to work too hard to figure out what’s going on in the footer, it will likely be ignored just like most standard footers.

The example below from the (otherwise fantastic) Food Network site may be getting to the point of being too cluttered. The number of links are distracting, the headers are easily lost, and the carousel of affiliate sites is poorly integrated into the design.

Fat footer on www.foodnetwork.com (as of Feb. 04, 2010)

By cutting back on some of the links and cleaning up the design with a clear visual hierarchy, it’s possible these same elements could be reworked into a more coherent and useful presentation.

Creamycss.com on the other hand, has quite a lot going on in their fat footer: recent posts, an about paragraph, a list of links, and a carousel of recommended reading, but unlike the Food Network example, these elements have clear headers, good spacing, and use a harmonious color palette.

Fat footer on http://www.creamycss.com (as of Feb. 04, 2010)

Some Parting Thoughts on Fat Footers

A well-designed fat footer is great way to provide added utility to a site without cluttering the header or body.  Just be careful not to overdo it.

Beyond added utility; a fat footer can be a space for creative outlet as well. I’ll end this article with a few of the more creative ones out there.

Fat footer on www.vimeo.com (as of Feb. 04, 2010)

Fat footer on http://www.northern-classics.de (as of Feb. 04, 2010)

Fat footer on http://www.bristolarchiverecords.com (as of Feb. 04, 2010)

Fat footer on http://www.neatorama.com (as of Feb. 04, 2010)

0
Continue Reading
By: Todd Levy at 6:00 am

Not Invented Here Vol. 1: Mega Dropdowns

Sep
16

Welcome to Vol.1 of Not Invented Here, a new semi-regular series on trends and innovations in interaction design (IxD).

A staple of the WIMP interface from day one, the once humble dropdown menu got its start as part of Xerox Park’s Alto, was thrust into the limelight with the Apple Lisa, and then popularized by her legendary little sister the Macintosh.

The dropdown menu (aka pulldown menu) saw little innovation for years, save the nested dropdown (aka cascading menu) and the combo-box, a marriage of the dropdown menu and a text input field.

Then, with the proliferation of rigidly hierarchical websites and widespread adoption of JavaScript compliant browsers over the past decade, the dropdown menu became a natural addition to the standard global nav bar, often handsomely styled to match a site design. Mouse over a section, see its subsections, and jump right to one without ever seeing the parent page.

And of course since websites hierarchies often went deeper than one level, dropdowns came along for the ride, evolving into the ubiquitous and fine-motor-skill-taxing nested dropdowns that are easy to create yet almost impossible to execute well.

Recently however, the dropdown has gotten a steroid injection in the form of the not-so-humbly named mega dropdown.

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.
— Jakob Nielsen, Mega Drop-Down Navigation Menus Work Well

Of course writing about mega dropdowns is like dancing about architecture, so here are a few examples you can link to and try yourself:

Mega dropdown on Gateway.com (as of Sept. 10, 2009)

Mega dropdown on Gateway.com (as of Sept. 10, 2009)

Mega dropdown on EA.com (as of Sept. 10, 2009)

Mega dropdown on EA.com (as of Sept. 10, 2009)

Read on for some analysis of mega dropdowns, a few guidelines on how to use them, and a couple of links to help you get started creating your own.

1
Continue Reading
By: Todd Levy at 3:52 am

Not Invented Here: Trends and Innovations in Interaction Design (IxD)

Sep
3

Welcome to Not Invented Here, a new semi-regular series on trends and innovations in interaction design (IxD).

As the field of interaction design takes shape, practitioners are doing a great job of harnessing the familiar to ensure usability and help people meet their goals on the web.

But familiar isn’t good enough for some interaction designers who are willing to throw caution to the wind and try out something new. They’re taking a risk for sure, but some of their innovative solutions work quite well. And a select few work even better than the traditional alternative — trending from obscurity to familiarity — ultimately becoming standards in their own right.

The Not Invented Here series will salute the work of these pioneers, with an eye towards solutions you can immediately bring to bear on your own projects.

For the first two posts, I’ll turn my attention on two “emerged” trends in modern interaction design – mega-dropdowns and super-footers – both of which sound like they’d fit right in as villains in a Godzilla movie.

After that, I’ll take a look at some newer innovations that are making their way to a website near you. Things like accessible direct-manipulation interfaces and a fresh, space-saving interaction technique called pageSlide.

Beyond that, who knows? Perhaps we’ll collectively stumble upon the next great interaction design innovation… and together we can make it the next big trend.

Come back next Monday for part 1 of the series. And if you’re forgetful like me, you can grab our RSS feed or sign-up for email updates so you won’t miss a thing.

P.S. Have an IxD innovation of your own? Post a comment or email me… I’d love to hear about it.

0
Continue Reading