The typographic grid: still as useful today?

Either on your own or in school, you probably learned at some point about the origins of the typographic grid. You know grids were developed with measurements from the golden ratio, the measurement that defines good aesthetics. You may also recall that layout/design using the golden section is scientifically and psychologically proven to be the most visually pleasing for the printed word. No doubt that principles of grid layout laid foundational work for all of graphic design today, but in a time when there are so many variations in how users absorb information, is the typographic grid still as applicable?

The Golden Ratio

In short, the answer is: of course. The eye still gets tired after reading 7-10 words per line. Only now, eye strain is even worse because people are reading on a glowing screen all day. Additionally, multiple available touchpoints and a constant barrage of distractions make for a decent design challenge on its own. But a user experience designer has an opportunity to meaningfully forecast these issues and make a difference for users. It’s a thankless job–sometimes your only job is to get people to read the core message, not to do it beautifully. Grids are more important to us now than ever–they can adapt to screen sizes and change a user’s experience instantly. And as always, grids give us an opportunity to quickly and beautifully get content to users.

Use the grid across platforms and devices

Many companies today reach people in multiple ways, so web and user experience designers are expected to adapt to sending a core message in several different ways. No problem! You can use the same grid on a website or a mobile device. This may seem impossible, as column widths obviously would seem so much smaller on a mobile device, or completely overwhelm a large monitor–but here’s where one of our heroes, the fluid grid, enters the scene.

There has been a lot of top-notch attention lately given to  fluid grids, especially since the advent of responsive/adaptive design. Here’s why: fluid grids combined with screen-size-sensitive media queries allow you to create one online experience that adapts to countless devices (some companies will be able to kiss their mobile sites goodbye!).

In order to calculate the measurements for your fluid grid, you probably will need to start with a design that already has some elements defined in pixels: the container and maybe a couple of columns, for example. Once you have those, you’re ready to see magic in the math.

To get the correct measurements for your fluid grid, Ethan Marcotte, founder/leader of the responsive web design movement, says,

“We take the target value for each element’s font-size in pixels and divide it by the font-size of its container (that is, its context). We’re left with the desired font-size, expressed in relative, em-friendly terms. Or to put it more succinctly: target ÷ context = result”.

That number is converted into a percentage and that determines the column width (Ethan’s article on responsive web design does an excellent job illustrating this technique). Therefore, even your carefully-crafted grid can adapt and be responsive to multiple devices while still maintaining a consistent visual harmony. And, provided your media queries are correct, telescoping on a mobile device should not be necessary.

Why use the same grid on multiple devices? Not only does using the same one grid save an immense amount of time and energy, you can reuse all assets by using a single grid. This saves even more time and energy. The same image asset can be used on a mobile device and an email, a landing page or a kiosk screen. The image doesn’t need to be cropped or renamed. Additionally, by using the same grid across touchpoints, your site is likely to be easily modularized, if it’s not already. Take one piece here, plug it in there. Seamless.

Grids are not limiting

I have heard some user experience designers claim that they find grids limiting. I completely cannot relate, because the grid is actually an incredibly liberating design device. You probably already know (thanks to a template or style guide) where the headline will likely go, how a callout will work, where photos will appear, etc. Influential graphic designer and educator Ellen Lupton famously said, “To say a grid is limiting is to say that language is limiting, or typography is limiting.”

The best page layouts, in my opinion, are ones you don’t even notice. Swiss design taught us this. Their minimalist aesthetic and thoughtfulness towards human behavior set the standard for how we read the printed word today. Think about reading a really engrossing book: do you even notice the page numbers, the width of the margins, or the leading? Your mission as a user experience professional is to get people to the core message, and the grid enables designers to present that core message in a meaningful way.

The medium of the printed word has certainly evolved and changed–a glowing screen, after all, is the new “printed” word. However, the underlying principles of good layout and typography really have not changed. The thought leaders on web grids have poignantly reminded us that we need to be mindful of the grid as not only a powerful layout tool, but a necessary structure for commanding information and most importantly, getting our core message to users.

Lacey Graves Gerard is a design generalist living and working in Houston, TX. She specializes in designing experiences for the web, mobile devices, and kiosks and infuses each of those touch points with her passion for and understanding of graphic design. And, she can make a mean bowl of popcorn.  You should follow her on twitter here.

Secrets of Creating a Remarkable Customer Experience

Today I spoke with a group of entrepreneurs about creating a remarkable customer experience. We all know about companies who are celebrated for having remarkable customer experiences. Companies like Zappos, Amazon, and Apple. There are countless books about how great their experiences are and all the things they do to delight their customers, but precious little advice about how to create new or evaluate existing experiences.

So today, I talked about the secrets behind a remarkable customer experience:

• Clear - Cultivate a business environment where everything is simple, straightforward, and uncluttered
• Consistent - Expectation that everything is going to be friendly and easy every single time
• Capable - Employees have the ability and are empowered to solve customer problems
• Nice - Be human. Be real.

Six Benefits of Remote Usability Testing

‘Lo about 2005 I started doing usability testing.  I was working on a major redesign and replatforming of continental.com and we tested every interface multiple times, in cities across the U.S., before handing off the requirements to the development team. (This was also a different age when things were far less agile than today.)

Since there were only three of us to do all the UX design and usability testing, this was a formidable task which was only made more challenging by the need to recruit from and travel to the various cities. Sometimes I conducted testing, sometimes I observed and took meticulous notes from behind a one-way mirror.  One time the one-way mirror was inside a room that I suspect was once a very small broom closet.  My co-worker had to leave in the middle of a session because she became claustrophobic.

Usability testing has come a long way in 7 years.

Today, there are no more broom closets for us.  The vast majority of usability testing we conduct at Normal Modes consists of:

• User interviews onsite at our client’s facility - almost exclusively B2B clients testing highly complex, very specialized software applications with participants who leave their desks to join us for an hour in a conference room.
• Remote usability testing - almost exclusively B2C clients testing website functionality.  Good examples of this type of testing are our Republican Candidate Website Usability Study and Weight Loss Website Usability Study, both of which were conducted with remote usability testing.

I’m a huge fan of remote usability testing.

Here are six reasons why:

Sure, about once a session we encounter technical hiccups, usually with older participants and always related to GoToMeeting. (WebEx is no better.)  Bandwidth hasn’t really been an issue in our studies; we always pipe in video from participants only.  We’ve only ever had one participant who didn’t have sufficient bandwidth; she was in her 70′s and didn’t have a webcam either.  In that case, we paid her the incentive and quickly found a new participant. Easy peasy.

Of course, not every situation is suitable for a remote usability study.

Studies that aren’t appropriate for usability testing tend to be on applications where there are technical limitations (usually B2B situation with non-public, proprietary databases) or where the user’s proximity to the application is a constraint. Mobile devices or kiosk applications, for example, need to be studied in person.

Is that really all there is to know?

Well, you’ve got to know how to plan and conduct a usability test, too.  Don’t forget that.  We can help there. Our usability testing workshops cover both how to design a usability study (test plan, screener, and moderator’s guide) as well as the technical setup for conducting any type of usability test.

UX Tips: Keep Icon Metaphors Obvious & Direct

It’s really a shame when the icons that designers so carefully choose to make applications intuitive for users have the absolute opposite effect.  It goes without saying that users expect an obvious relationship between an icon and the concept it represents.

For example, the “New Tab” page for the Chrome browser features icons for common Google services:

• Chrome Web Store = Webstore logo, which is a shopping bag (shopping = store)
• Gmail = Gmail logo, which is an envelope (envelope = mail)
• YouTube = YouTube logo, which is a TV screen with a play button (you watch TV)
• Google Search = “g” in a blue box logo

It’s worth noting that there is one weakness to these icons:  The Google search icon doesn’t match the favicon, which can be a bit confusing because it breaks the 1:1 relationship established in favicons.

Icons That Just Don’t Make Sense

Bad icons are everywhere – from the websites and software we work on everyday to that kiosk in your grocery store and those minor home appliances you still can’t figure out.

Example:  During our recent trip to Ireland, it was quite cold and wet.  (The people of Ireland are lovely and delightfully friendly, and their warmth to a large extent mitigated any physical discomfort.)  Nevertheless, we really wanted to turn on the heat in our hotel room.  We found the air conditioner control panel on the wall, and turned up the temperature without paying much attention to the rest of the interface.  

A little later, when we were still cold, we turned up the heat some more. Eventually, we had the thermostat set on 30? C (~86? F) and we were still cold. So we went to investigate and fiddle around further.

Our major point of confusion was whether the heat was on or not. We expected the snowflake to mean “make things cooler”, but then what were the other two icons — a raindrop (or is it a flame) and a blazing sun. A blazing sun could mean “make things warmer”, but I’m more likely to associate it with “summer”. So did these icons represent settings we’d use in a particular season or the cooling/heating processes? 

Ultimately, we determined that snowflake meant “winter” by the time consuming process of trial-and-error.

Extrapolation:  Where Good Icons Go Bad

So how do designers and developers end up with bad icons? What usually happens is this: the developer knows he needs to create an icon and begins to think about a worthy and appropriate metaphor for the task at hand.  And so he might come up with reasoning along the lines of (continuing with the air conditioning example):

I need an icon for heat.

Well, I could use fire – like in a fireplace because you light one of them when it’s cold outside and it brings you warmth, but is that really very clever?  (Everyone does that!)

Well, you need heat is when it’s cold outside.  And a lot of times when it’s cold outside, there’s also snow.  I’ve got it!  A snowflake!  Genius!

This is going to be THE GREATEST ICON ever.  I really think it makes the interface!

See what he did there – he extrapolated an indirect relationship between the icon and the concept it represented.  Instead of keeping it simple, obvious, and straightforward, he over-thought the situation until he ended up with an icon that was – quite literally – the polar opposite of what he intended to represent.

Our UX Tip  

There should be an obvious and direct relationship between the concept you’re representing and the appearance of the icon, with no degrees of separation in logic. Icons should be simple, obvious, and consistent with other icon representations (favicons, avatars, etc.)

Genuinely evolved interfaces are transparent, so transparent as to be invisible.

“The environment itself will be smart, rather than various function-specific nodes scattered through it. Genuinely ubiquitous computing spreads like warm Vaseline.  Genuinely evolved interfaces are transparent, so transparent as to be invisible.“

- William Gibson, in a talk for the Director’s Guild in 2003 as reprinted in Distrust That Particular Flavor,a recently published selection of his essays and speeches.

UX Tips: Provide a Text Link to “Home” in Primary Navigation

Across all types of usability studies we do – whether it’s B2B or B2C – the most common point of failure and user frustration is getting back to the homepage when there’s no text link to “Home” in the primary navigation.  As is customary, users expect to find a homepage link on the left side of the main navigation bar.

Example 1: People magazine’s “Home” link located as the first text link on the primary navigation, just to the right of the logo.  Notice how it’s actually called out with a highlight color, so it’s easy to find.  

When there is no expected “Home,” we find that users exhibit one of several behaviors:

1. Re-type in the homepage url, or
2. Hit their browser’s “back” button until they get to the homepage (which can sometimes take quite awhile), or
3. Return to Google to look for the website again (often clicking on ads in the process), or
4. Give up entirely.

Using the Logo as the Link to Home

It’s standard industry practice to make the logo link to the homepage.  About half of users know about this practice and expect the logo to take them back home, and we find that most websites conform to this standard.

Where we find problems, however, is when the logo is the only method of returning home. Although, about half of users expect the logo to take them home; the other half don’t know that they can click on the logo.

Example 2: In our November 2011 usability study on campaign website usability, we found numerous critical errors related to navigation throughout Mitt Romney’s website.  Among the biggest problems was that users could not navigate back home because there was no “home” link where they expected to see it in the primary navigation. 

In B2B and internal applications, we also frequently find cases where website teams assume that the vast majority of users are technology professionals know the logo returns to the homepage.  This is simply not true: there are frequently other stakeholders outside of technology, and even a limited set of professionals in technology (especially QA), who aren’t aware of the convention.

Example 3:  Popular email newsletters software Mailchimp doesn’t feature a link to the homepage on it’s marketing site.  While the site is primarily targeted at relatively web-savvy professionals, we often find folks in this demographic who are unaware of the logo link to homepage convention.

Icons as the “Clutter-Free” Link to Home

To avoid adding “Home” text to the primary navigation – for various reasons including de-cluttering the header and to offer more “real” navigation options - some designers choose to include a “home icon” instead.  This is again problematic as we often find users don’t see the home icon – they’re looking for the word “Home” – or, in cases where they see it, don’t recognize the house icon as the equivalent of “Home.”

Example 4: Since our November 2011 usability study that included the Romney campaign website, the site has been redesigned including the whole navigation scheme.  Among the changes, the designers added a link to the homepage but did so in the form of a house icon.  We often find in studies that users are literal, so they’re looking for the words “Home” instead of an icon.

Example 5: During our usability study on weight loss websites, we found users routinely wanted to go back to the homepage, but were unable to accomplish this task using the site’s navigation.  They often retyped the homepage URL (if they knew it) or, in cases where they were unsure of the company name’s spelling, returned to Google search.  When asked if they thought Nutrisystem provided a link to the homepage in their navigation, participants said they didn’t believe one was provided.  When asked about the gray element on the left in the navigation bar, participants indicated they didn’t know what it was.  One participant thought it was a decorative element without any functionality associated with it.

Our Recommendation 

All websites, regardless of target audience, should have a text link that says “Home” as the first element on the left in the primary navigation.