Musings, Project Planning, Work

UX Myth #1

People read on the web ux myths

UX Myth #1

Source: UX Myth #1: People read on the web

I love the UX Myths blog; both as a user and as a User Experience Designer. There are pithy observations about our common behaviors as we interact with the internet, and all of it is supported with research – yay science! I’d like to feature a visual version of each of these excellent “UX Myths” to help promote it.

less than 20% of the text content is actually read on an average web page
Nielsen Study, via UX Myths

In my own work this is something I’m always conscious of during content planning and wireframing. Perhaps I don’t give text enough credit, as I design smaller and smaller areas for copywriting to live on web pages, but for the most part I believe that people honestly want to skim, look at pretty pictures, and get to the important information. This is reflected in my work for Mount Gay Rum. I designed their new site to have collapsed content sections and only display the headers. The headers and curated photography are enough to get branding (history, artisanal, sailing, etc.) across, but if you happen to be interested in one of the topics on the site (doubtful), you can click to read about it – otherwise, keep skimming! I operate on the assumption that people will skim, and I seek to facilitate that.

I’m doing that again with a global brand’s new site template that has to adapt to a variety of markets, some with a lot of content, and some with very little. In either case, these collapsed headers facilitate skimming so you can get to what you’re looking for faster.


Mount Gay Rum Rebrand

One of my first projects as an Information Architect was to re-architect a new version of the site for Mount Gay Rum. My company is working on a complete rebrand on many levels: label design, posters, printed mailers, film spot, and web. Nearing their 310th anniversary is a historical accomplishment, but unlike tested and traditional fermentation methods, web sites do not age well (especially their last one).

As the only Information Architect in the digital department, my role felt particularly heavy at the beginning of the project. After lots of research and iteration, I am happy to look at the finished product with confidence. Yes, the developers I work with are issuing a new version as I write, and there’s always room for improvement, but I think we’ve taken a big enough first step from where the brand had been these last few years. When the original version of a site is an antiquated Flash experience, it’s hard to do any worse with a new design, but I challenged myself to take this old site as warning that any new design will have to stand the test of time (as much as possible). I had that great privilege to work with a very skilled team and ridiculously talented visual designer, but I can only speak to the functional and organizational aspects of the site, for which I was responsible.

Age Gate


A legal requirement of alcohol web sites is some proof that the visitor is of legal drinking age. In the old version, you had to click on each box to fill out the form, and find your country from a long drop-down list. Screen shot 2013-02-21 at 11.25.35 AM


Yes, there is still a drop-down list for country selection, but this new version detects your computer’s general location and fills out that part of the form for you. Once you start filling out your date of birth, there’s still no clicking required because your cursor automatically moves from one field to the next – saving your hand the arduous few inches of travel between mouse and keyboard. Mount Gay Rum Age Gate

Home / Initial View


Once you verify you are over 21, the old flash site presents you with a closed book. You can’t even see any content until you click and drag the book open. Talk about keeping your content at arm’s length! Screen shot 2013-02-21 at 11.26.19 AM


Once past the age gate, visitors are immediately presented with clear navigation and the latest marketing message (in this case, a new line of Rum called Black Barrel). You can immediately go to the product’s detail page, or scroll to explore other sections of the site. Mount Gay Rum Home

Site Navigation


Not only does the navigation cover the page content, but once you select a page from the menu, it is hidden away like a bookmark behind the book. A perfect example of skeuomorphism at its worst. Screen shot 2013-02-21 at 11.26.40 AM


While auditing the original site content, it became clear that this brand has a story to tell – not in the cliché marketing regard of conveying brand info through storytelling, but Mount Gay Rum very literally has an impressive history to convey, as the true pioneers of rum.

Although a current (2012) trend in web design is the single page website, I do believe it’s most effective for telling a story because the visitor can experience it from start to finish without going anywhere. This approach has a few negatives that I did my best to design around:

Long Scrolls

A very long scroll might not be a huge bother, but it does factor in your split second cost-benefit analysis when deciding if you want to spend precious time on the page.
My best effort for dealing with lots of content on a single page is to divide a single story into pieces and then neatly fold these away into their appropriate drawers, or chapter heads.
Especially after my comment on the old home page, you might think I’m creating an obstacle between visitor and content, but I believe the contrary: I am facilitating engagement, because you would be gently introduced into each topic instead of overwhelmed, and – curiosity permitting – you can pick and choose what parts of the story interest you most.


Even more pervasive in the single-page trend is the use of parallax, which can be done well and add an impressive depth to the site’s design, but in most cases it isn’t necessary, and in the worst cases it can be confusing.
It was decided early on in this project that we wouldn’t implement parallax, but we do rely heavily on large photography and commissioned illustrations to pull your attention down the page. What parallax sites often do well is the use of persistent headers that double as a way-finding tool. In the new design, you can see that the header follows your scroll and highlights the current section you’re viewing. It was my intent that this convey the idea that all content stands on equal footing, freeing your conscience to explore as much as you like without risk of getting buried in layers of hierarchy.

Mount Gay Rum Navigation



I don’t have a lot to say about the old footer. It works, and was very much in the background, as we expect from most site footers. It could have done more, though. Screen shot 2013-02-21 at 11.26.56 AM


As an obviously product-centric site, it is important to make product information as accessible as possible. At the risk of overdoing site navigation (if possible), the secondary navigation is visually presented at the bottom of the site (with some fun rollover states), and the primary navigation links are reiterated in the footer as well.
Mount Gay Rum Footer

Legal, and other links you never click


Oh boy. Café menu? Scrolling page within a modal? What else can we cover the site content with?
Mount Gay Rum Old Legal


As they say, “you can’t polish a turd.” The best one can do with legal content, in my opinion, is to do away with anything too fancy (see above), and keep it out of the way of content as much as possible. Usually these links open a modal or new window that separates you from the page. A cheeky approach in this new design is to bury it below the footer. Yes, if you accidentally click one of these “fine print” links, the site extends below the foot and you are scrolled down a bit to let you know that what you seek is in the abyss. There is a nice big “X” button to collapse this content when you’re finished with it.
Mount Gay Rum New Legal

“Story sections”


The old site was literally a book. You had to flip through every page to get through the website, or jump around with their Table of Contents navigation bookmark thing. This was not conducive to skimming, which is the default behavior for almost everyone jumping from page to page on the Internet. Screen shot 2013-02-21 at 11.28.15 AM


As I started to explain in Navigation, the new content is structured in chapters akin to the skeuomorphic book approach, but instead of requiring a linear path to each piece of content, the story is boiled down to four main “chapters” (plus a visit section). These chapters slide open when you want to read one, and don’t go anywhere while you’re reading. At the bottom of one chapter, is the introduction to the next, which will expand open on click. Mount Gay Rum story sections

Visit Us / Distillery Tour Info


There isn’t much to say about the content, except that once again, it was well-hidden. At the Visit part of the old “book” site, you have to click to pull up a skeuomorph-brochure with several pages within.
Screen shot 2013-02-21 at 11.27.20 AM


Although you might not think many people would go to this site and book a trip to the distillery, analytics did show a majority of visitors being referred here from travel sites – many people touring Barbados were Googling things to see! So, in an effort to get straight to the point, and keep everything accessible, I recommended very minimal content, no collapsing function, and a printable PDF download for those who want more info and something to-go. Visit Mount Gay Rum


I congratulate anyone that has read this far, and will spare you dozens of screen shots for different clicking states and animations. If you’re curious about some of the really divergent features (compared to the old site), check out the cocktails or Contact Us.
Mmm… the traditional Manhattan

If you just scrolled past all the pictures and arrived here at the bottom of the page, please take a second to read this summary and acknowledgement:

The visuals that you see while experiencing the site, the words that you read, and the fact that it loads on your computer is all the work of someone other than me. How it is organized, the fact that it works on your phone and desktop, and the bits of interactivity are more representative of my role. My concepts could not have been refined, visualized, or put into working code had it not been for the efforts of an entire team. I feel privileged to work where I do, and appreciate the constructive reviews along the way that have guided my crazy wishes and expectations into something practical.


Link Drop!

I’ve seen some sites do this, and find at least 70% of them to be really helpful or just plain cool. Maybe I can remember to do this weekly (or monthly) and keep track of the best articles and images I’ve seen. For now, here’s a list of my many sources:

Eye Candy +
Abduzeedo – You’ll never remember the URL, so just bookmark it.
Booooooom – Same ^
Behance • Most Discussed, This Week • Interaction Design
The Next Web • giant list of design inspiration links – whoa, meta!

News/Articles +
The Next Web
A List Apart
UX Booth
Smashing Magazine • UX Design
Rosenfeld Media • Books – Warning: pro stuff here
Jesse James Garret • Information Architecture
My diagram bible: Jesse James Garret – Visual Vocabulary
52 Weeks of UX

Design Patterns + 
UX Archive
Pattern TAP
iOS Inspirations
Mobile Patterns
Inspired UI

Resources –
Design Deck (free icons, PSDs, and fonts) – not updated often, but I check once in a while in case there’s a new goodie to download.
One Div

Random +
Good Fucking Design Advice
The Fucking Weather
Solve For X