Sprint Web Design Bangalore

UX and UI for Mobile: Quick Tips for Shooting

It is a fact that most access to websites and systems today come from mobile users. Unlike the desktop, with large resolutions and many pixels of space, small screens are a limitation; the touch screen, as a new form of input and control, causes new UX and UI recommendations to emerge for this format.

We have put together some mobile usability tips that make all the difference when designing layouts and experiences for the mobile visitor, taking advantage of reminders of global tips that can not be ignored 🙂

Excess of information brings clutter

Each button, image, text, form field, and icon added make screens more complicated. Minimize the user’s mental load by making objects, actions, and options clearer and more visible.

One of the tactics used to reduce the cognitive load is progressive disclosure , one of UX’s global principles.

No one wants to have the same job twice

Look at all the streams looking for those who give more work. The user should not need to remember information that he filled out during different and previous steps of the flow, such as having to re-enter some data that has already been reported before, or that is the default, or having to make decisions that he has made before .

A little at a time

Find ways to break a primary task into subtasks. Large and long tasks generate more complex interfaces. A flow should be, wherever possible, divided into linear steps where the sense of progress is visible and the option to return is always within reach.

The way the purchase checkout within Instagram is performed shows that digital products can offer actions and flows different from their primary purpose

Screens and conventional terms

Draw screens thinking about how much they will be familiar, that everyone expects finds, for their user base. In apps that contain feeds, these screens would be “Home,” “My feed,” and “Search results” – always use your industry standards.

Today is also much talked about microcopy, the wording of custom text for buttons, warning texts and error messages. It is wonderful for branding within the product and humanization interfaces, but when it deviates from the main idea, it can confuse users, making the learning curve. Avoid jargon and specific terms that can be a great barrier to lay people.

Reduced focus on UI consistency

It is a principle of design that, when ignored in the mobile environment, makes a product very punished. Keeping consistent appearance is essential in screens and in-app elements. Interactive elements should remain consistent and match expectations.

Do not be afraid to create a mega button for the main action of a screen. Give weight to what really matters, with font size, special elements and colors.

Today we have guidelines, such as Apple’s and Material Design. Do not be afraid to rely on already consolidated UI standards that fit well with your needs. It is important that typography and colors remain consonant with website, social network, email templates and any other platform or format in which the brand operates.

More power and control for people

We have previously written about affordance , the ability of an object to communicate its usefulness. Interactive elements should have their explicit meaning and lead to expected results when triggered.

Predictability makes the user feel empowered. People also feel in control when there is the option to return and correct any mistakes. And speaking of errors, how do the error messages in your product go?

Did you make a mistake? Swears This Spotify error message does not help the user at all.

Remember that wrong is human and eventually these unwanted screens will be displayed. Regardless of the cause, the way you design and manage error scenarios is what sets a good experience up to that point bad. Be transparent, telling what went wrong, why it went wrong, and what direction the user should follow to fix it.

Most inclusive mobile product

Accessibility can not be ignored in a world where 4.5% of people are estimated to have some type of color blindness and populations that get older every decade.

Think of the classic colors of error and success, respectively red and green – are complicated spectra for colorblind types. Your product can be part of the inclusion easily by also adopting W3C accessibility guidelines.

Spectra of colors and how they are seen by Achromatic, dichromatic and trichomatic color-blinds.

Another problem, inherent context of using mobile products, where the user is almost always in transit, may be the excess of animated elements. Too much movement in the eye can cause nausea in sensitive people. Always present an option to disable the animations in the interface.

More tips from UX mobile

These recommendations are a great starting point when analyzing interfaces and starting to optimize a product. As you’ve seen, many global rules in common with the desktop can be applied in mobile design.

You can go further. Understanding the context of use and building empathy with the user is an ongoing process that the best design teams of great products practice daily. How do you deal with it? Here at Man Machine we give great value to research, testing and feedback and we can help you with these methodologies .