UX MythsSource: UX Myths

When you copy, you don’t know the reasons behind a design, you’re not responding directly to your customer needs, you’re devaluing your own data.
Joshua Porter, Copycat Design

I will admit having looked to Amazon, and other high-traffic sites as a point of authority on certain design patterns. If I might not know where to start – with a product page, for example – then I begin with a reference, but remain en garde about what I choose to carry over to a wireframe. I always try to take a slice of design that I suspect is effective and boil it down; deducing what it is that works about a page element that catches my eye. I make it a point of practice to audit other designs of the same category and see what is repeated among the most effective. Typically the point I eventually arrive at is a “best practice” or slight variation. This may be a roundabout approach to design discovery, when you could just research best practices alone, but I feel this circumspect method gives me more context of how a certain “best practice” can take form, and eventually feel more confident about its use in my own design.

I know that’s a really long way to say that I actually do research, instead of steal, but I think it’s important to say that you shouldn’t avert yours eyes per se from some sites with the longevity of Amazon. A huge user base will let them get away with poor design decisions, but it also means that the same large group of users have also been exposed to certain design patterns several times. Some designers want only to innovate, and I can understand that desire to leave your mark and constantly improve, but I’m of the Steve Krug camp that believes some innovation to be good, but different for the sake of different will leave users confused.

You’ll likely shoot yourself in the foot if you just pull something straight out of an Amazon or Facebook, but look at the design and ask yourself “why is this better than this?”

Reblog, Wireframes

UX Myth #22

Image
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.

Standard
Musings

Designers, Please Read:

A List Apart: The Infinite Grid
Viljamis: Prototyping Responsive Typography

I could write so much as a reflection on the first article, and the second is one I have only just seen and half-read, but seeing how much information is covered, I’m bookmarking posting it for my later reference. I won’t bother summarizing either, but hopefully the titles intrigue and you give them some time of day.

Standard
Work

Mount Gay Rum Rebrand

illustration-ageGate
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


Before:

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


After:

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


Before:

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


After:

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


Before:

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


After:

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

Problem
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.
Solution
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.

Parallax

Problem
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.
Solution
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

Footer


Before:

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

After:

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


Before:

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

After:

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”


Before:

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

After:

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


Before:

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

After:

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

Interactions

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
Cocktails

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.

Standard
Musings

An Ever-Important Article Discussing Responsive Design

A leading image of some website in its various states of Responsiveness

A leading image of some website in its various states of Responsiveness

In [month, year], X% of web traffic came from mobile devices, as of writing this article, that number has grown to a whopping Y%. As businesses focus increasingly on e-commerce, and getting the best ROI for their development costs, the rewards of making your site responsive are more appealing than ever.

Mobile usage since [date]

At this point in the article I should talk about the explosion of the handheld and tablet market, and the overwhelming popularity of Apple products, but throw in a dreadful reminder that a huge portion of users are on “other” devices, all of which have many variations in screen dimensions. I can also mention studies about how many people use both a handheld device and their trusty desktop/laptop when doing the most important thing in the universe, shopping. Accommodating this user behavior – that is admittedly akin to moths banging their heads into the next brightest lightbulb – is imperative if you want to have any success in business and become the next Amazon.

Benefits of making your site Responsive

Now that I’ve overwhelmed you with information about how a lot of different people use the internet and you can’t design for just one ideal scenario, I’ll bring great relief: with a little extra preparation, you can still manage a single site that pleases all. Then I continue to elaborate about how you’ll only have to manage this single site, which works across all platforms, and the only thing you need to do is sprinkle a bit of magic Responsiveness on your code. Hooray, the future of the internet is here! With n-number column grid, your typography will look more beautiful than ever, too.

Use of responsive grid

In order to illustrate the immediate payoff of such a concept, I need to include some kind of column grid or perhaps an image that you can play with by resizing your browser window. This will instantly convince you that you need your site to do this.

If you don’t know about CSS3, LESS, and HTML5 by now, then just throw the terms at your developers and they’ll get all glossy-eyed. If you don’t run on these, then you might as well be working with Windows XP. You can download some frameworks from github and start playing around with it yourself.

Usability will increase 9,000 fold

It might look like three different sites, but don’t worry, your brand will be consistent across all platforms. Resizing images and collapsing a row of navigation into a column (or collapsible menu tray, whoa!) makes your site over 9,000 times more useful to the mysterious collective of mobile device wielding e-customers. A great website experience increases the chance of a repeat visit. You’re going to have so many new regulars with this platform.

A few challenges

It will take some more development time and you’ll have to organize the architecture of your desktop site to make sure it translates well to mobile. Of course, this will also require a lot more resources and testing, but it’s totally worth it – and hey, developers love it.

I should also slip in a suggestion about how different devices suggest different use cases. Jimmy might be looking at your site on his desktop to find some awesome new coupons, because he never gets any emails from his e-commerce subscriptions. Jessica however, could be on her iPhone at the bus stop, in the rain, trying to find your nearest store because in this scenario you sell umbrellas online and in storefronts. Two devices, two use cases. Don’t worry, actual user research is expensive, takes time, and you can pretty much guess at what they want to do with your site.

Final thoughts

Because I write for the web, I don’t know how to intelligently conclude something without saying something like in conclusion, summary, […] to consider, or final thoughts. If I’m writing for TheNextWeb then there should be at least two typos and a grammatical ‘slip’ thrown in, but you’re not here for grammar, you’re here for loads of content, images, links to cool sites, and the latest on Tech.

Whether you decide to make your site responsive is up to you, but if you do, make sure that you plan it well and do loads of testing afterward. You probably won’t do either, and just throw the content into a template you found online. You don’t really need to listen to users, or make sure the content strategy is efficient… as long as things shift around when you drag the corner of your browser window.

About The Author

[Author Name] is a [technical position] manager at [web company], tech writer, and frequent speaker at ____camp. Follow this author on Twitter!

Standard
Musings

#7 Assault

MTA assaulting sign
Riding the subway to work in the morning, I kept staring at that #7 ASSAULT sign they have in subway cars. It really bothers me that they have a giant, red number 7 that takes precedence over the rest of the text as though it’s a drop cap (but has no paragraph to follow).

Of course, once read, I understand that it’s a disclaimer about assaulting employees, which results in 7 years in prison. At first glance though, I always think: SEVEN, assault… blah blah blah; as though it’s a coffee table book of possible offenses one could commit during their commute. [see what I did there?]

Does the same ever occur to you? Do you mentally plan what could appropriately fill numbers 1 through 6? I should design some for the MTA. You know, just to keep things sequential.

[update: I attempted to look up some quirky laws which resulted in 1-6 years on prison, but ended up educating myself on NY State penal codes and class D felonies. It turns out that class D felonies are punishable by 2 to 7 years in prison. So, there’s no such thing as a law guaranteeing 4 years for example… just that range. It’s pretty depressing thinking about all this, especially when you consider that “assault” can legally be defined as verbally threatening. So you could (probably wouldn’t) go to prison for years if you threaten to injure or kill an MTA employee. Sounds quite harsh, and spurs a whole tangent of thoughts about what punishment is an adequate punishment, and how a single year can feel like an eternity and is probably adequate for most crimes (at least the ones involving yelling and acting like an asshole). Funny comment turned to serious lesson; oops]
Standard