UX Best Practices for Designing Mobile Apps by Marcos Moralez

Marcos Moralez is an Emmy Award winning UI Designer with over 13 years of experience. He is the founder of Micro-Startups.com, an Idea lab built on Lean & UX principles.

He describe that after he had designing user experience for mobile experience for a couple years, he had learned to pay attention to the details. Thus, he had compiled a list to enhance the UX on mobile apps and published at Micro-Startups.com.

Context:
Each context requires slightly different design goals.

Bored – Social, News, Entertainment (Has time to kill)
Busy – Email, Calendar, Banking (Optimize for micro-tasks and getting things done easily)
Lost – Attractions, Directions, Recommendations (geo maps yelp: connectivity and battery are important)

All applications are not created with the same goal in mind, and shouldn’t be designed that way. That being said these are some of the key guidelines that all apps should follow, regardless of context.

Affordances:
The visual clues the design aspect of an object that will suggest how the object should be used (visual clue to its function). Be sure to include affordance for gestures. Provide visual feedback for every user interaction when user clicks something.

Responsiveness:
This is critical. Having to wait for data is not acceptable for mobile apps, users are on the go and have less time and attention than if they were on a desktop.

Thumbs/Fingers:
Users are more likely to be using one hand. The primary actions (targets) should be easy to reach with the thumb. The target size should be large enough to hit with minimal error. They have enough breathing room so that they don’t accidentally click wrong targets (if they must be close to the other targets make sure that its easily reversible e.g. just click to back to the previous tab versus deleting a message you were about to send.)

Screen Real Estate:
Because there is limited space on the screen you should remove unnecessary buttons and labels.

App Control Placement:
Controls at the top of the screen versus at the bottom, e.g. instagram, maps. Controls for the app should be at the bottom of the screen versus the top. When the Control is at the top (google maps, Apple maps) when you need to edit update your hand is in the way.

Use the Proper Navigation Model:
Apps currently use 3 types of nav models

None – Single screen apps, Calculator app
Tab Bar – Different areas in the app without a clear data hierarchy, almost like different modes where they don’t have any true relationship to the other tabs.
Drill-down nav – List + detailed content hierarchy, (settings on the iPhone)

Things to Avoid:
– Autocorrect in form-fields!
– Avoid making the user type a lot of information (if you can’t avoid it, support landscape view. This makes the typing much less painful)
– Avoid modal alerts as much as possible. (Its okay if you’re using it as a confirmation to a potential hazardous action e.g. deleting a user account, message)
– Avoid excessive alerts and badges (if you use badges make sure they are accurate)

Designing Your Application:
Polish: Professional design is valuable more so on mobile than desktops due to the personal relationship to the phone. Applications can be used anywhere at anytime, making the application visually appealing can help with adoption.

Icons:
Your Icon is your business card, if defines you. I have a strong opinion about the need to have a well designed icon that also somewhat represents what your app does.

Planning:
Map out user personas: How is are target audience going to use the app, and with mobile you want to ask “where are they going to be using it”

LoFi Wireframe prototype:
Using wireframe tools you can replicate interaction and user flow through the app. This will help uncover potential problems, target size, font size etc.

Feedback Loop:
Get Feedback from real users. Ask about expectations for the interface (what the user expects to happen after they click xy button.) If affordances are used correctly (icons, label) the expectation should align with what will happen.

Track Data:
Using services like Apsalar and Mixpanel, you can uncover problems, as well as track how users are interacting within the app. Determining the most popular thing areas of your app can help with planning future iterations.

All these points are really useful and referable. Mobile applications now continue to proliferate. But the quality of mobile user experiences ranges are dropping. Choosing the best development tools doesn’t guarantee the great user experience. However, to design a great app with good user experience have to consider the user behaviours, useful, usable and desirable.

Advertisements

One response to “UX Best Practices for Designing Mobile Apps by Marcos Moralez”

  1. queeniehui says :

    Hi, Evonne. You have great research findings under the topic of mobile technology. I find it interesting especially for the point of “each context requires slightly different design goals”. Keep it up!

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

%d bloggers like this: