What is a UI?

Before we start talking about developing a graphical user interface, let’s clarify what it actually is.

Interface – a common border between two functional objects, the requirements for which are defined by the standard; a set of tools, methods and rules of interaction (management, control, etc.) between system elements (source: wikipedia.org).

This is an accurate but boring definition.

In other words, and more interesting: the user interface (UI) is “the way you perform a task using a product, namely the actions you take and what you get in return” (source: Jeff Raskin, “Interface. New directions in the design of computer systems”).

In our daily life, we constantly encounter interfaces. These are social networking sites, control elements in the car’s systems, remote control for the TV, voice control of a smart home, panel of buttons in the elevator.

It turns out that we use one product to manage another product. But let’s not list all of this, but talk directly about web services and applications and how to make their use convenient.

Why do I need a UI?

We figured out what the user interface is, but it is still unclear why do we need it and whether it is worth spending money on its development and design. So let’s go back to the elevators for a minute.

The elevator is convenient. It allows you to get to the upper floors with a minimum of time and physical costs. But would it be so good if we could not easily open it, choose the floor and, if necessary, stop at all for a while? All of the above can be done, but in which way? Will the lever control allow the passenger to take the necessary actions or is it wiser to use button control? Here appears an important point: which elevator control interface to choose.

Modern web services and systems are fundamentally changing the way of people work. There are, for example, control systems for theatrical mechanisms that simplify the work with electronic equipment, making it unnecessary to constantly be beside it. But it is unsure if the work will be simplified if such systems have too complicated interface.

It turns out that the program interface not only solves our problem of interaction with the application, but also makes this interaction as comfortable as possible. It is important for us to have an interface that allows you to get acquainted with the capabilities of the application and understand the principles of work in it with less effort.

 

 

UI development

So to don’t have problems when using any application, smart people visualize its functionality in the form of understandable elements, and behind this visualization is real UX / UI-design.

The line between UX (User Experience) and UI (User Interface) is very thin, but if you look, it becomes clear that UX helps to understand the user. UX-design has more psychological aspect than technological. UX studies the user: how the user lives, what he thinks, how and what he does and what surrounds him. The task is set for the designer – to help an ordinary person easily figure out your software product and get satisfaction from working with it.

And to understand the user is very important. No one will want to fill out twenty fields of the registration form on the website or click through fifteen tabs before getting to the wished function. “The user should not be forced to interact with the program longer than absolutely necessary to solve a particular problem” (Alan Cooper, “The mental hospital in the hands of patients”).

This is a real problem that a designer must solve, and we’ll get to know the stages of solving this problem a little closer.

Concept

First, we need to navigate between the elements of the future interface. To do this, we will define the task, examine the subject area, audience and how the people use the product.

Creating a Mocap

This stage allows you to quickly understand the client’s vision and make a lot of changes before starting the development of the interface. We outline the location of buttons, forms and other necessary elements, and only then we select a color palette, fonts, images, transforming all this into a convenient and beautiful layout. That is, we start with a warframe (a plan for arranging elements on a page), and end with creating a beautiful picture from this plan. In the case of developing applications for Android and iOS, the work of the designer is facilitated by the guidelines – the rules for the design and layout of interface elements, the UX / UI regulation, which was created directly by design experts from Google and Apple.

As soon as we figured out the sketch, it’s time to start the map of screens and understand how an ordinary person will behave when using the future toolkit of the application and which state the interface will take with every user interaction with him.

Structure approval

The client approves the developed structure and user scenarios, and the developer moves on. This step eliminates future changes or makes them insignificant. If the structure is not logic or the design requires more global processing, this will be not good for the project in general.

UI style selection

There are many different concepts, for example: material design, metro, skeuomorphism, etc. By choosing an interface style, you should think of current trends in design, adaptability, time for design development and implementation, and many other equally important points.

In any web service or application, design helps the user solve his urgent problem, so non-standard solutions and bright colors are not useful.

Style matching

Finally, while justifying style decisions we can show to the customer developed desing. At this stage, we process any customer comments, because our work is to come to a common decision. When a style is chosen, the designer draws a layout based on the rules of the guidelines and the corporate identity of the client. At the end, we get a convenient and beautiful design of a mobile application.

Interactive prototype

“The prototype is a visual model of the user interface. Essentially,  it is a functioning “draft” of the interface, created on the basis of your ideas about the needs of users ”(source: Ed Sullivan,“ Time is money. Creating a team of software developers ”).

To more clearly demonstrate the application to investors and potential users, you can start developing an interactive prototype. But is not an obligatory step, since the mocap + user flow diagram is itself a prototype that describes the future product from the point of the UX view. However, an interactive prototype will give a more complete picture of both the capabilities of the application and the scope of work for their implementation.

Variants of the prototype depend only on your time resources and the level of quality, you wish to see. This can be a test bench where the operator manually makes changes to the state of the application depending on the user’s choice, or it can already be a software implementation that you can launch on a smartphone or browser, click on all screens, evaluate the logic of the product.

The task of the application user interface design process is an integral part of prototyping. In our company, designers study future users using different methods: discussing the issue with the immediate environment, talking directly with our client, discussing with potential audiences (live or in forums) and interviews to identify the urgency of the problem and find ways to solve it by the user.

The result of this study is a description of the target audience and a clearer understanding of which difficulties may arise while using the service and how to overcome them.

Result approval

Here it is, the last stage of work on the UI. Everything is very simple: the client evaluates the result, gives comments and suggestions, and we make corrections if necessary.

At this point, we should have a ready technical task, containing all the information we worked with at the prototyping and design stage. Having a ready-made design and technical specifications on hand, we begin to develop the application.

Summary

The phased development of the application interface and complex systems saves time, structures all the work, reduces the possibility of additional cash investments.We think that from all of the written above it is already clear that the interface is in principle necessary for convenient user interaction with the application. But what’s most important is the ability to develop an interface in which the user will find the key functions of the product in the minimum time necessary for this.

You must admit that this task is not an easy one, because as too complicated, as too simple interface can spoil the whole impression of any web service or mobile application.

Creation of a user interface reduces design time and simplifies user interaction with the product. Well-designed UI = grateful user = happy you. Contact us to get your best one!