Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio ultricies, iaculis nisl sed, pretium ex. Etiam rhoncus consectetur laoreet. Nunc dapibus magna non leo aliquet vulputate. Vivamus eu erat ut erat commodo ullamcorper. Fusce quis quam eu risus semper consectetur. Integer et purus dictum, tincidunt felis ac, tincidunt nisl. Proin eleifend.
Share

After designing user experiences for mobile applications for a couple years, I’ve learned to pay close attention to the details. I’ve seen amazing apps, and way to many bad apps. I’ve compiled a list of “low hanging fruit” to enhance the UX on mobile apps.

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:

our 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.

Author headshot

When I’m not deep in a rabbit hole of research, I’m working on making technology products more intuitive to use. I always enjoy connecting with like minded individuals, let's have a conversation. Follow me on twitter @marcosmoralez or instagram @webdesigners Who knows you may just end up in wonderland with me. 🐰