Pages

24 August, 2016

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

Pros

Simplistic look

Space efficiency and better use of mobile real estate

Cons

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.

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.

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.

Pros

Slightly slower completion times compared to top aligned labels

Less vertical space

Cons

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.

Pros

Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms

Cons

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.

03 August, 2016

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,

PACE: Set up the pace of the
interaction to draw people in, help orient, provide hooks to dive deep

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.