24 August, 2016

Labels on Mobile Forms

Labels describe the purpose of form controls, including text fields, check boxes, radio buttons, drop-down menus amongst others. On mobile apps, screen real estate is limited. This forces app developers to save space by placing labels in varying positions on tiny screens. Labels can be placed in many different ways. I cover five varied approaches in this article.
Positioning Labels – The Right Way
1. Inline Labels
Labels placed inside the form field are called Inline Labels. These continue to be a fad for many programmers after Apple introduced them in most of their apps.
Image Source: Dash Lane app
  • Simplistic look
  • Space efficiency and better use of mobile real estate
  • Loss of Context – When user begins typing or even upon entering the field, label is lost thereby taking away the memorability aspect of the field
On Dash lane app, text fields have an inline label. Tapping on the text field keeps the inline label intact, until user starts typing into it. If user deletes existing data, inline label re-appears, to remind the user about the context of the field, just in case, user forgot what the field means.
Inline labels suit best on forms with fewer fields. E.g., on login forms, , it’s hard to forget which field is for what kind of input(username, password), for most part as there are just fewer fields with a straightforward goal.
Inline label could be a great feature if it is used in the right way. A good approach is to use it as supporting text or short descriptions that provide cues to users.
Luke Wroblewski, writes simple guidelines for input labels in his book, Mobile First.
A label within an input field:
  • Should never become part of someone’s answer. This seems simple enough but still happens quite frequently when things haven’t been loaded or aren’t coded correctly. Ever try searching only to find the word “search” has become part of your query?
  • Should not be confused with an actual answer in an input field. If labels and inputs look too similar, people might (rightly) assume an answer has already been provided for them. I’ve seen this happen too often in usability testing.
  • Is usually absent when someone starts answering a question and when they finish answering a set of questions. This can make it harder to know which question is being answered or to go back and check answers after the labels are gone.
2. Floating Labels
Image Source: Google Material Design
Material Design guideline, introduced us to floating labels, i.e. the label appears as an Inline Label on the screen (Description field). As soon as user starts typing into the field, the label slowly floats upwards and places itself at the top of the field (Title field).
A downside to this approach is that, unless the features are coded for accessibility, visually impaired users might find it difficult to understand this behavior.
3. Top Aligned Labels
Labels are aligned above input fields, hence the name Top Aligned. I forgot the mobile app from where I picked this screenshot. That leads us to another problem. Shouldn't each screen have app logo on it, just in case, amnesia patients like me could recollect which app we are on? Well, I can only say, the world is tough out there.
  • Faster completion time from users as per Matteo Penzo’s findings
  • Works well for long labels
  • Labels that require localization might have good flexibility
  • They take up a lot of vertical real estate, leading to perennial vertical scrolling / swiping for long-ish mobile forms
4. Right Aligned Labels
Image Source: www.css-tricks.com
Labels are right-aligned while input fields follow them in left-alignment.
  • Slightly slower completion times compared to top aligned labels
  • Less vertical space
  • When labels change, this alignment leads to flexibility issues in the layout
5. Left Aligned Labels
Image Source: www.css-tricks.com
Labels are left-aligned while input fields follow them in left-alignment.
  • Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms
  • Slowest completion time compared to top aligned and right aligned labels
  • Difficult to parse fields on long forms
Luke Wroblewski, has talked about top, right and left aligned labels in an elegant way, here that is almost impossible for me to beat. 
Image Source: Polar mobile app
As you notice in Polar mobile app above, inline labels can be used as placeholder texts inside input fields to complement labels with additional information. Notice that Polar has ensured that branding is intact on login screens with their 'Join Polar' title. There is little possibility that a user forgets which app this is. By the way, Polar app was designed by Luke Wroblewski, which was acquired by Google a while ago.
Labels appear to be the least important elements on mobile screens, yet play a major role in how these screens appear to users. We need to pay attention to not just their behavior, but also their placement.
How do you handle labels in your apps?

03 August, 2016

An Introduction to Visual Design and the Goals

Visual Design is the process of visual problem solving through the use of typography, space, images and color. Visual design is used interchangeably with Graphic Design and Communication Design due to overlapping skills involved.

Examples of visual design include creating logos, publication of books, magazines, newspapers, print media, website/mobile graphics and so forth. Key purpose of visual design is communication through the image, functional to the disclosure of a message or information.

User Experience Design != Visual Design
User Experience Diagram by Dan Saffer

Many colleagues and friends I work with think that Visual Design means User Experience Design and vice versa. They are surprised when I mention that User Experience Design is a superset of 13+ disciplines. Dan Saffer, world renowned author designed the User Experience Design diagram based on his several decades of experience. In short,

Visual Design is a subset of User Experience Design.

Three Goals of Visual Design
As per Scott Klemmer, Visual Design has three main goals:
  1. GUIDE: Guide people to convey structure, relative importance, relationships
  2. PACE: Set up the pace of the interaction to draw people in, help orient, provide hooks to dive deep
  3. MESSAGE: Use Visual Design to express the meaning of the interaction and style, breathe life into the content

Visual Design Tools

Google Website

Google website demonstrates simplicity at its best. With a search box in the middle of the screen, important tabs in the header and less important items in the header, it demonstrate what it takes to retain users.
NDTV Website

Check out an Indian News website above. Layout and Content organization are very different compared to what Google search did.

Fresh Menu Website

Things might change drastically for a Healthy Food Ordering app like Fresh Menu where people would like to know the variety of food offered on a daily basis. 

As you notice in above screenshots, visual design is very different. Visuals and Content have varied layouts, organization and hierarchy in each website. In general, three main tools accomplish good visual design. They are Typography, Layout and Color. In simpler terms, paying attention to these simple tools can help you accomplish good aesthetics.
What does good visual design mean to you?