Tips for Creation an Effective Mobile App Interface

Tips for Creation an Effective Mobile App Interface

Mobile apps have nowadays strongly grown into our lives, and the number of them is rising rapidly.

They make our life easier and more interesting, we can use them always and everywhere.

Business correspondence, chatting with friends, control of the financial accounts, arranging a visit to a doctor - these and many other things you can do with your apps. 

The more applications appear on the market, the greater users demand is. Users are becoming more and more experienced and want to simplify their life. That is the reason why a designer should do great ground work before a mobile app is being created.

From experience, we can confidently say that success of any mobile app depends on the interface creation.


Let’s look at the interface creation process, taking one of our projects as an example.

WAM (World around me) is a mobile app which simplifies searching courses or favorite hobby groups in London.

The app is going to be a great discovery for both parents and teachers. With WAM parents don’t have to run around the city or surf the internet, trying to find appropriate hobby group for their child. Teachers, on the other hand, get a great opportunity to advertise their course and develop a good reputation.

Project goals

To make the app work efficiently you should define basic goals and priorities.

Note, that goals and tasks are not the same things. A goal is a final outcome, tasks are intermediate stages which lead to the goal.

Creating the WAM app interface, we defined the goal - to make the app easy and quick in search of any hobby group in the city. The main task, respectively, was to create the most user-friendly interface, so that the search would be fast and thorough, and the results would satisfy user’s needs.

 

Target audience and characters

In order to make the app easy and useful, it is essential to explore its target audience.

First of all, a general picture should be drawn by singling out the following categories: personal, demographic, behavioristic characteristics and real-life situation.

Every category has its criteria which might influence the interface and functionality. When detailed picture and all criteria are defined, you can proceed to the characters. That is a very useful technique for further ideas generation. A typical character, a made-up user, is created to fit the criteria thoroughly. An ideal scenario is to find real people and communicate with them, in order to be sure in certain behavioristic features.

This is the moment when a UX designer should just get into the character and live his/her life. This is the very stage that helps to create detailed scenarios in future and predict user's emotions and behavior while using the app.

 

Competitors market analysis

Much time should be spent studying and analyzing the market before starting the wireframing process.

According to our research, there is no analogous service for London at the moment. But if there is any, different methods of analysis should be used.

The most famous is a SWOT analysis which reveals strengths and weaknesses of the competitors. This analysis also shows what features should be prioritized to make the app unique.


Tasks-problems-solutions

As we’ve already mentioned, tasks are intermediate stages in the wireframing process. In order to analyze the tasks, a three-column chart with all the characters is drawn.

The first column is the task, the second one is the problem. Only on this stage adequate solutions and ideas, which create a basis for the project, can be generated (the third column).

The important thing is that all tasks derive from characters scenarios, the TA to be more exact. That is of huge importance for the project.


Users behavior scenarios

This stage aims at revealing mistakes in logic, prioritizing and improving solutions.

To carry through the sequence of actions in the scenario, you should really live into every character, trying to predict his/her actions.

Have you ever paid attention to the order of fields on the online shop product page? Personal information, payment, delivery - this sequence exists for a reason. In the WAM app parents sign in, fill in the profile and have the ability to pay for the courses online. There is no need to fill in the same data every time. Just log in and click “Pay” button confirming payment amount. No repeated actions - one more technique to make the app easier to use.

 

Mind map

After the above-listed stages, there are enough ideas to systematize and visualize.

Our designers use Xmind service to create a mind map. The ideas should be divided into separate large sections. In our case, we initially had two of them - parents and teachers. We divided and specified tasks and solutions for both.  According to brainstorming strategy, all low-priority ideas should be put aside for now. Some notes, observations, and remarks can be made during the process. Considering all the thoughts on the project, the logic chain is built.

All ideas and solutions are cohered. In WAM, for example, a parent can leave feedback on teacher’s profile. Therefore we drew an arrow from the idea “A parent can leave feedback on the teacher of his/her child” to the idea “A teacher can look through and comment on feedback”.

 

User flow. Information architecture

Basing on the mind map and taking into account characters scenarios, it is much easier to develop a website structure and to make sure that nothing is left aside.

There is a bunch of services offering convenient architecture buildup. Only after that, you can get to wireframes.


Wireframes

This stage usually takes much of the time. Axure or Photoshop are of great help here.

It’s okay to draft wireframes roughly at first, divide all functions into blocks, lay out necessary buttons.

Going this way it’s easier to think through the general logic of actions and create detailed wireframes later on. You should get interface wireframes of all app screens in the result.
It’s highly important to create wireframes in black and white shades with no sign of app design. This piece of work is left to UI designers.

 

Usability testing

Yeah, that’s right! Not only finished apps must be tested. Azure helps to create interactive wireframes transforming them into HTML pages.

This is the point when a user has to see them. If any mistake in logic or user actions sequence is found it's much easier to fix it now.

Gather a group of potential users according to the TA criteria, set a task and watch their actions closely. In such a way you find out interface flaws and get feedback on the service in general.

The users were not confused and accomplished the task? Great! You can move to design now. Otherwise, you go back to previous stages and look for mistakes.


UI

After successful testing, a UX designer passes the project to a UI designer, who converts it into a pretty original picture.

Marketing experts, as well as developers, are saying possibilities and functions terms. That’s reasonable because that is the way they work - function after function.

As we figured out, the WAM app has plenty of practical functions for its user. Would it be so, if we did not think through the interface?!

Only due to the combination of useful functions and quality interface wireframing, a user can improve his/her efficiency and simplify life by the offered technology.