Over the past 4 long, arduous articles I covered some tips and tricks related to UX design that you can implement within your mobile projects. While the principles will hold for any mobile design I threw in an occasional snippet to make it Android-y. In this final article, I would like to take a deep dive into how those principles will work within an Android application. So for the first time in a long-time, code.

Review of Principles

But first a quick refresher on how the UX principles will be applied and what we should be looking for within our application.

Visibility

Can the user find the actions you want them to complete? Is it obvious and transparent what actions they need to accomplish?

Affordance and Signifiers

Are your UI components obvious? Affordance is the principle that objects “afford” a relationship. For example, buttons can be pressed. More importantly for our uses is the Signifier. The Signifier indicates that an action can be done. That is a button should look like buttons so the user understands intuitively they can be pressed.

Feedback

Does the user get feedback when they complete an action? Is it clear to them what they have done and what the result of that action is? Are you making use of progress and loading dialogs?

Consistency

Do you have a consistent interface? Not just your UI, but are the motions the users needs to accomplish an action consistent. Do you use the same language throughout the application?

Constraints

Are you constraining actions to direct the user towards the goal? Is that constraint clear to the user?

Mapping

Are your controls laid out in a systematic manner and where the user expects them to be? Are you following the platform conventions as much as possible?

Putting it All Together

As an experiment I wanted to apply those UX principles towards a mobile sample application. While a complete application might be a little ambitious for a single article, we can focus on a single part of that experience in detail. For that I picked the login and signup pages because regardless of their usefulness they have a tendency to make it into a good portion of applications. [ Tip: For most apps a gradual engagement approach might be a better solution ]. Most applications still rely on the initial experience being the “Sign In/Sign Up” landing page so reducing user friction on the first landing page would go a long way in reducing the users frustration with the application. Plus, everyone has met a frustrating login page at one time or another so it seems like a good starting point.

What Do I Want the User to Accomplish?

Before starting with any page, you should have a good idea of what Primary Action you want the user to accomplish on your page. Defining that simple starting point will guide much of your remaining decisions on how to implement the UX. Think of it like a Mission Statement for the UX, although unlike other Mission Statements this one is actually useful. Without that guideline the UX principles are a cluster of good ideas with no coherent design.

Let’s see how the Primary Action plays into our design.

Landing Page

In our sample application the landing page looks similar to many others. Brand title, callout and two actions, Sign In and Sign Up. And like many landing pages, the Sign In access is slightly obfuscated. The reasoning behind this is for this application is that we want to encourage Sign Ups, not Sign Ins. Sign In is a secondary action and will impede the new user experience. We don’t want new users clicking the Sign In by accident. Reasoning that it is probably safe to assume that if the user already has an account with the application they just want to passthrough as fast as possible, so they will be willing to search for the correct action. Our Primary Action should be to get the new users to Sign Up as easily as possible. We optimize for new user experience over existing accounts.

Just as easily we could have swapped the two buttons and made the login experience the Primary Action if the business need dictated it. The importance of deciding the Primary Action for the screen (or state) comes down to what you need the user to accomplish at that time. That should be the starting point of your UX design