Those with names that are quite long – like Stephanopoulos, at 14 characters - are often limited by an arbitrary 10-12 character restriction. For folks with last names greater than 15 characters, it’s even worse.

Similarly, folks with some of the most common last names on earth – like Ly, Hu, Ma, Ng, Xu, Fu, and Yu, at 2 characters – are foiled because someone randomly decides that there needs to be a minimum character length on last names.  It’s almost like the programmer completed an additional step to make it unusable.

For example, this image of a Facebook complaint appeared on imgur this week with the title “Asian problems.”

When form fields are insufficient length for user needs, we find several user behaviors:

• Problems with data integrity as users try to game the system,
• High abandonment rate, with commiserate increase in requests for support, and
• Low response rate as users just give up.

Corollary: The Hyphenated Last Name

Our Recommendation

When declaring form field lengths, consider the worst case scenario. Scrub an existing database for the longest character length and round up to the nearest ”5″.  If you have to declare minimum character length for last names, make it “2″ to accommodate every possible common scenario.  Accept hyphens, too.

If you liked this recommendation, then you’ll love our Ultimate UX Bootcamp

March 15-16, 2012 in Houston. (It’s a great time of year to visit!) Featuring boots-on-the-ground advice about what specific UX & usability practices companies can quickly and cost-effectively implement. Learn more

Related UX Tips

• Keep Icon Metaphors Obvious & Direct
• Provide a Text Link to “Home” in Primary Navigation

Day 1 will be a workshop on User Experience Design, you’ll learn:

• Identify the characteristics of your users — their needs, fears and motivations
• Organize content into intuitive navigation structures
• Develop intuitive user experiences by using UX guidelines: clear, consistent, capable and nice.
• Calculate the ROI of UX

Day 2 will be a workshop on Usability Testing.  We’ll focus on these practical essentials:

• When to conduct usability testing
• Identifying the right testing methodology — from paper prototypes to remote usability testing
• Planning a usability test
• Recruiting real users as participants — sorting out the bad from the good, and providing proper incentives
• How to conduct a usability test! 
• Analyzing test results to produce meaningful reports
• Effective strategies for handling political situations

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.

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.

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.

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

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

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.

Lots of development teams suspect they have a UX or usability problem. But it can be hard to justify an investment in UX or usability research to upper management in terms they’ll really appreciate.

How did we figure out that a series of usability studies saved a hospital $10 million per year, not to mention hundreds of lives? How can you prove that an investment in user experience reduces the overall development and maintenance costs for your application? How can eye-tracking be used to assign a dollar value to down to the pixel?

Get the answers from Angela Schmeidel Randall, CXO of Normal Modes and user experience expert. In this webinar she’ll teach you how UX and usability testing can make direct and significant contributions to the bottom line. Learn some serious skills like:

• How to identify the metrics of success that are appropriate for your company and your industry.
• Successfully calculate and track those metrics.
• Justify UX investments to upper management in terms they understand.

If your development team is struggling to obtain upper management support or to justify an investment in UX, you can’t afford to miss this webinar.

Register Now
Tuesday, February 14
$129

So many times Interaction Designers forget about all the other technology that we interact with on a daily basis and focus solely on the web design.

Angela started by telling her story of a flight cancellation on Southwest airlines last summer during which she interacted with over half a dozen systems including 2 separate IVR systems, outbound text messaging, inbound mailboxes, website, customer service, the airport kiosks, and mapping out all of these experiences. She explained how the failures of the systems, though not terribly expensive on a customer-by-customer basis, can add up to millions of dollars in costs and lost revenues in the event of large-scale cancellations due to weather, mechanical issues, etc.

She then drilled down on each of the systems IVR, kiosks, and alternative displays to give examples of what works and what doesn’t work, and provide tips for improving the customer experience on these platforms that all the participants could use and apply to their daily work whether designing for the web or for other platforms.

When she gets back from Ireland, we’ll post the slideshow she gave at the conference.