7 Deadly Sins of Mobile User Interface Programming

While working on the user interface in their applications, mobile developers tend to make the same mistakes over and over again. If the development process is properly organized, these are normally fixed during the quality assurance phase. However, the mobile developers should normally avoid making them before the code is passed to QA engineers or even merged into the code base. To help our developers in Factorial Complexity I have compiled the list of the most common mistakes.

1. Image view is reused but is not reset

Both iOS, Android and cross-platform SDKs have a mechanism of reusing the cells of the long lists for the purpose of performance improvement. Reusing the views properly is the developer's responsibility. It is quite easy to forget to reset the previous content in the view, specifically when the data is fetched asynchronously, which is the case with the image. This result is a poor and confusing user experience. The problem might be hard to spot because the development environment is often set up the way, so latencies are low and images are loading near instantaneously.

Wrong
Right

2. Scroll offset in the list is getting reset

User scrolls down a long list. He selects something. Then he is navigated to another screen, then goes back and... Oops, he ends up at the very top of the list. Obviously, he should go back to the exact place he left instead. However, this behavior in many cases does not come "out of the box" and needs additional attention from the developer.

Wrong
Right

3. Images are stretched

It rarely makes sense to display the images so it fills all the container space, ignoring the aspect ratio. This is, however, the default setting in mobile SDKs and often overlooked by the developer. The image should either be displayed with padding in the container ("aspect fit") or fill the container with some parts getting cut off ("aspect fill").

Wrong

Right

4. Linear animation curves

In the real world, a motion is never linear. When the object starts moving it needs some time to accelerate from zero velocity. Even Tesla cars need a couple of seconds to get to 60 mph. Same story when the object stops. If you want the user interface to feel natural, no animated motion should be linear. Period.

5. Text labels don't account for strings that are either too long or too short

The real world data is often different from what developers use in testing. According to quick googling, the book with the longest title in the world contains 5,820 characters (1,022 words). How about accounting for that in your bookshelf inventory application? But even disregarding the extremes, developers should always consider the actual length of the externally fetched data. Long text shouldn't overflow other elements and yet it should be cut abruptly. There is no universal solution, you should always consider your specific case.

Wrong
A Bit Better
Best

6. No visual feedback on touch

Each tappable element in the mobile application should provide the visual feedback when a user places his finger on it. Otherwise, it just doesn't feel right and a user might be confused if he is actually tapping what is supposed to be tapped.

Wrong
Right

7. Text inputs are not properly configured

Here are few things that need to be taken care of whenever developer adds a text input:

  1. Consider if this specific text needs automatic capitalization
  2. Do not forget to set the correct expected data type (email, numbers etc)
  3. Consider if this field needs autocorrection
  4. Setup the proper return button captions and link multiple inputs into the continuous navigation
Wrong
Right

That's it. I hope this list will help you to avoid the common UI programming mistakes at the earliest stages and be a professional and productive mobile developer. If you need developers like that for your project, Factorial Complexity is here to help.

Vitaliy Ivanov Technical Director at Factorial Complexity