Tag Archives: Usability Heuristics

Checklist for Designing Mobile Input Fields

The Nielsen/Norman group recently published Checklist for Designing Mobile Input Fields featuring a quick reference of what you should review when designing for mobile.

A Checklist for Designing Mobile Input Fields via Jennifer Blatz UX design
Credit Nielsen Norman Group

 

 

 

Text version of checklist of 14 guidelines to follow for mobile input field UX

Should it be there at all

  • Is this field absolutely necessary?

Description

  • Is the label above it? (Not inside, not below)
  • Is the field marked as required (*) or optional?
  • Have you removed any placeholder from inside the field?

Visibility

  • Is the field big enough so that most possible field values are visible?
  • Is the field visible in both orientations when the keyboard is displayed?

Filling it in for the user

  • Do you have any good defaults for this field?
  • Any history available?
  • Frequently used values?
  • Can you use the phone features (camera, GPS, voice, contacts ) to populate it?
  • Can you compute it for the user based on other info (e.g., state based on zip code, coupon field)?

Typing

  • Do you support copy & paste into the field?
  • What is the right keyboard for this field?
  • Can you make suggestions/autocomplete based on the first letters typed?
  • Do not autocorrect for names, addresses and email addresses.
  • Do you allow typos or abbreviations?
  • Do you allow users to enter it in whatever format they like? (e.g., phone numbers credit cards)
  • You can autoformat it for them.

Real world vs. electronic world

Designing a paper EMR in to a digital format Jennifer Blatz UX Design
Creating an electronic version of a paper medical record is very challenging for the UI designer.

A UX/UI designer has a tremendous challenge when she is assigned the duties of translating a real-world process in to an electronic or digital process. The UX designer must keep the user’s mental model in mind when designing an electronic system.

When working on EMR, or electronic medical records, it is a completely different set up and system than the paper recording method the user has been using. They key to designing a successful EMR, is to closely match the work flow and system that the user is used to. That success has not really been achieved in most EMR systems. Often, software designers get too excited and caught up in the features and flash of digital possibilities. When working on any electronic system, it is crucial to always understand how the user works, and make your system as similar to that work flow as possible.

If you have any suggestions on how to bridge the gap between the real world and electronic world, please leave them in the comments. Thanks!

Competitive analysis is a valuable tool

I recently took it upon myself to compare three online movie ticket purchasing websites: Fandango*, movietickets.com and Arclight Cinemas. By comparing the features, design, content and user flow of similar websites, one can gain invaluable knowledge about their own sites.

When you compare your website to what a competitive website is doing, you will learn:

  • What your website or experience is doing right
  • What your website or experience is doing wrong
  • What your competitors are doing right
  • What your competitors are doing wrong

This is a great jumping off point in improving your own website or experience.

This graphic only shows some some of the insights I discovered when comparing websites. My brief overview is below:

Comparative Analysis for movie sites as a User Experience learning tool and step in the process
Comparative Analysis is a valuable process for getting your website up to par. See what other websites are getting right and wrong, and you can modify your own website accordingly.
* At the time of publishing this post, Fandango had not yet released its redesigned website and mobile app. Therefore many of the specific features I discuss here will no longer be applicable. However, going this process was still a great learning tool.

Comparative Analysis: Fandango

I know that Fandango will be launching a redesign very soon, so the shelf life of my analysis is ver limited. Still, I would like to share with you a few things I learned when analyzing Fandango.com website on the desktop:

  • If something looks like a button, then it should be a button.  The “Find Movie Times + Buy Tickets” looks like a button, but is not. Best not to confuse the user.
  • Movie posters can be too small and sometimes difficult to read the title. Maybe use a simpler image to illustrate film?  And therefore help me read the title of the film.
  • Use the user’s language, according to Jakob Nielsen’s “10 Usability Heuristics for User Interface Design.” On the Fandango site: Features> I thought that meant Feature films. This language could be confusing to some users. It was to me.
  • Fandango Comparative Analysis
    Fandango Comparative Analysis

 

Comparative analysis: movietickets.com

When analyzing the movie tickets.com website on the computer/desktop, I discovered a few key points:

  • Highlight theaters where I can buy the tickets from, not just all of them
  • Make the CTA (Call to Action) button clear. I want to buy movie tickets. Make it easy for me. Just like Steve Krug’s book “Don’t Make Me Think.”
  • I found this to be a particular pain point: there is a long list of theaters with no address or map. How do I know how far away the theaters are?
    movie tickets.com Comparative Analysis of the computer/desktop version
    movie tickets.com Comparative Analysis of the computer/desktop version.

     

 

Comparative analysis: Arclight Cinemas

Some take-aways I discovered when looking at the arclight.com website on the desktop:

  • After a failed search,  provided closest options rather than saying “no results found”
  • Indicate where I am in the buying process, Like Jakob Neilsen’s HeuristicsVisibility of system status
  • When I get an error message in a purchase, indicate what fields are required by an asterisk so I know I which fields I must fill out

    Arclight.com Comparative Analysis for desktop (computer) website.
    Arclight.com Comparative Analysis for desktop (computer) website.