UX Design for Mobile Developers

I recently took the UX Design for Mobile Developers course on Udacity as a short refresher and to get an idea of how developers approach design.

The course is taught by UX designers at Google and I highly recommend any app developers, especially people developing on the Android platform to take this course, it’s great value for your time.

Here are some learnings and highlights from the course:

Avoid Detail-first thinking

Developers and designers tend to get lost in details and forget about the overall experience. Focusing on details too early cause you to optimise locally at the expense of overall app experience. For example, you may be focused on getting a particular component right when you may not even need the flow at all. Low-res wireframing helps you to think about your application from a high level as a series of steps your user needs to go through to accomplish a task.

high level flow

Design for Your Users

Understand your users and design with their needs and behaviors in mind. If you don’t know who your users are, you run the risk of designing for yourself. The key to user-centric design is to overcome our personal preference bias. Focus on what is important to your persona and try not to combine feature lists from multiple stakeholders with the aim of pleasing everyone.

If you aim to please everyone, you please no one.

Be aware of the approach you take, design with empathy but be aware of the technical constraints.

Designing for Mobile

When designing for mobile users, take into account the mobile user persona on top of the persona for your app.

The Mobile Persona
  • Finite data & battery
  • Divided attention
  • Handedness
  • Small screen
  • Sketchy network

People interact with their phones different. Some people use phones with both phones while other common usage include interactions like cradling, which is holding the phone with one hand and pointing with the other, like when they’re browsing the web on their phone.

50% of smartphone usage occurs with a single hand. When designing for mobile, put buttons and interactive elements in the natural zone and avoid the ow zones, but bear in mind the natural and ow zones may vary from person to person and device to device.

Screen Shot 2015-01-08 at 8.41.30 PM

Responsive Mobile Design

Android allows you to scale your user interface up and down between different devices, however there are some pitfalls just relying on this approach:

Excessive Line
The line lengths of text should be between 45 and 75 characters in order to maintain a comfortable viewing experience that users can easily scan across.

Excessive Line

Unbalanced Content
Having content clustered to a corner with a lot of wasted screen real estate can project a very unbalanced feeling, leading your application to feel unoptimized for the device.

Unbalanced Content
Content is clustered to the top left corner of the screen, leaving huge white space across of the rest of the screen.

Use Available
Not making the best use of the screen real estate available.

Use Available
the tiny thumbnails of this photo application are all grouped over to one side, leaving a lot of unused screen real estate

The solution to overcome these common pitfalls from relying solely on the scaling approach is to adopt responsive design that respond to the device’s characteristics using the following techniques:

Combine things from different screens onto a single screen to fill up the space.

Combination– Combining two screens from a smaller device into one on a larger device with sufficient width. This avoids the problem of having excessive line lengths and make better use of the screen real estate.

Macro Reflow
Taking the major building blocks of your application and reflowing or rearranging them on the screen to make better use of the space.

Macro Reflow
Macro Reflow – Moving a larger header image to be horizontally stacked instead of vertically stacked to make full use of the screen estate to show off the image better as well as to avoid excessive line lengths in a landscape device

Micro Reflow
Focusing on the individual blocks within your design and delegating responsibilities to these individual blocks to optimize themselves given a certain amount of space.

Micro Reflow
Micro Reflow – The list view of a mobile app on the left is adapted into grid view past a certain width to avoid excessive length and unbalanced view. On the right, there is no way to put in more content on a form type application on a larger screen, so a margin point is introduced.

Handedness and other constraints are all part of thinking about the user, and making your application fit in their lives in a way that they’re comfortable performing tasks and using your applications to achieve those tasks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s