Tag Archives: Nielsen Norman Group

Education, UX

Checklist for Designing Mobile Input Fields

Leave a comment

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.
Web Design

Image-Focused Design: Is Bigger Better?

Leave a comment

UX, user experience, Jennifer Blatz, design, hero image

The Nielsen Norman Group has released an article discussing the importance and flaws of using a huge hero image on the home page. I am sharing the important check list that is included in the article. Read the entire article about image usage “Image-Focused Design: Is Bigger Better?” now.

How to Ensure that You Use Images Appropriately

Follow these steps to make sure you have the right balance of elements:

  1. Identify and prioritize all the goals of the page — both the user goals, and the business goals (including brand goals.) Is the page primarily a marketing vehicle to build your brand? Or are most visitors already familiar with your organization (or at least your industry vertical), and now need specific content or functionality?
  2. Define how each design element relates to the page goals. Images are usually decorative, and support branding goals. Navigation and structured search relate to specific user tasks.
  3. Assign visual weight based on goal importance. If a design element supports a high priority goal, it should have more visual emphasis; conversely, design elements related to secondary goals should have less emphasis. (This guideline sounds obvious, but is often completely disregarded, or gets lost along the way to creating a ‘modern’ looking website.)
  4. Select images that have a strong relationship with brand goals. Remember, the purpose of your site is not just to showcase images (unless you’re Flickr). Instead, the images you select should showcase the purpose of your site.
  5. Choose striking visuals that capture attention. Once you’ve identified the goals of your images and their relative importance among other design elements, and you’ve determined what types of images relate to these goals — only then should you focus on selecting the most compelling images you can find.
  6. Be selective about which trends you embrace when ‘updating’ your site. For many redesign projects, creating a site that looks ‘modern’ is an important goal. But there are many ways to accomplish this goal. Typography, layout, and brand colors — just to name a few—can all be effectively used to create a modern look and feel, while still providing appropriate emphasis on critical site functions.