The Main Steps of The User Interface Design

The user interface design of any software product is crucial for its success. No matter what a superb idea is created by the owner of the product and how comprehensive technologies used by the software development team are, the product won’t be successful if the users are confused, frightened or can’t figure out how to use it.  

We assume that a software product should be created for its users rather than for the owner or development team. In this case, a good user interface design could be described as a difference between a successful and failed product. But what exactly is a good user interface? Is it always an eye-catching one with a lot of interactivity and funny icons? Imagine, your product is a corporate business application to organize, for example, the financial reports system. You can create a “great” design for this product with astonishing animation that George Lucas would be impressed with, but if this doesn’t meet your business goals and your users’ needs, all of your efforts will be wasted.

Perhaps, animation and bright colors shouldn’t be used in a good interface at all. Imagine, your product is a digital library for the children. If you created a simple interface using black, grey and white colors and standard elements like a search box and some search options, for example, by author or by title (these options are enough to achieve the user’s goal) the probability of successful users’ experience, in this case, would be very low. Why? It may sound surprising, but kids – your potential users –  are more likely to have no idea of the author or the title or even both. They’d know, for example, the color of the book cover and if it contains any pictures or not and more very specific information. Need any proof?  Please, ask your kid.

So, what a good user interface is? The truth is that there is no ultimate answer to this question. For that reason, the design of user interface is one of the most important parts of the custom software development and shouldn’t be underestimated. Our goal is to create products that are useful, engaging and as user-friendly as possible. To achieve this goal, we follow three steps of the user interface design.

Three main stages of the user interface design:

  • User Research
  • Design and Prototyping
  • Evaluation

User research.

The goal is to define who the customers of your product are and how they are going to use it. At this point, you should explore

  • User’s needs, challenges, and problems
  • User types, their experience, level of knowledge and skills;
  • What activities they can do using your system;
  • Contexts of use for what you are designing.

This stage is required on all software development projects and in all methodologies (the Waterfall and the Agile ). If you have already had all this information you are ready to start the user interface design. If the information about all the points above is inconsistent or incomplete, then there are a lot of risks that your attempt to design the user interface won’t be very successful.

Suppose that important information about the users and the product requirements has been successfully gathered. Now we are ready to start the designing process.

Design and Prototyping.

A good way is to start from the simple sketches and low-fidelity wireframes and to continue with high-fidelity wireframes, mockups, and prototypes.

Wireframes.

A wireframe is a sketch of the system to be built. Wireframes should clarify exactly what elements realize the different features on all pages or screens of a future product but without full details. The actual screen design will be produced at a later stage by referencing the wireframe.

Wireframing stage doesn’t require a lot of time and efforts, but it can come in handy when designer communicates with customers, users, project team, as it allows them to visualize first ideas more easily when he or she just describes them verbally. Wireframes can easily be revised or changed. It helps to do all the process more cost-effective.

Therefore, wireframes should come first. What should follow? It depends on the type of the software product that is going to be produced. If your product is, for example, a business app with many business processes, users’ types and features, then it probably would be very important to build the prototype at the next stage after wireframes.

Prototypes.

A prototype, in this case, is a semi-functional layout that can give a high-fidelity preview of the actual app or website user interface (front-end) functionality. While prototype might not have full functionality, it generally gives customers and/or end-users an ability to click around the elements of the interface and simulate the way the app will actually work. Prototypes may or may not include completed design elements. At this stage, we can demonstrate and discuss after demonstration not only what elements display the features of the product, but how they can work. It helps to test the ideas and make some changes at early stages of the project. The prototype can easily be revised, trickier than wireframes but much easier than the final product. So, creating a prototype also can raise the efficiency of the software development process.

Is prototype an obligatory stage of the design process? The practical experience has shown that it is not. If your future software product was a one-page site or mobile app with the one main function to record “the sounds of the night” than the prototypes would be excessive.

After wireframing and prototyping we can focus on the visual design of all elements.

Mockups.

To produce the mockups after reviewing the wireframes (but not instead the wireframes) is a right decision. The mockup model demonstrates all the graphics, typography, colors and other page elements. Mockups are generally just image files.

There is a very popular question:

What is the difference between wireframes and mockups?

Our answer is:

  • the wireframes are about functionality;
  • the mockups are about presenting how what the final product would look like.

Notice that we often used the words “reviewing”, “discussion”, “brainstorming”, “demonstration”, etc. when we talked about the stage of design and prototyping. Actually, design and prototyping is always an exploratory process. So, we don’t talk about just one set of wireframes, or one prototype, or one mockup but rather about designs and prototypes in plural because it’s important to investigate some alternatives in order to get to the right design.

 

Evaluation.

As we can see, the evaluation should be included in all stages of the design process. The main purpose of the evaluation stage is to assess the quality of a design, not in the abstract, but how it fits the users, meets their needs and displays all the product’s features. Also, we should identify promising areas for improvement and make some of them.

After several series of iteration from the sketches, wireframes and mockups to prototype, after several discussion and brainstorming session with the customers’ stakeholders, end-users and project team, in other words, after the evaluation, the probability of creating a good user interface increases significantly.

These are the core components of user interface design processes. Of course, how they are balanced, arranged or mixed, the order in which you do it may differ from project to project. Nevertheless, these key concepts are present in all user interface design.

We will be extremely happy to create a good user interface for your product. So, do not hesitate to contact us. Our strong and experienced design and software development team is ready for comprehensive and challenging tasks.

Back to Company Blog

Profile

Intetics Inc. is an expert in creation and operation of effective distributed technology teams aimed at software product development, IT support, quality assurance and data processing. Based on a proprietary business model of Remote In-Sourcing®, advanced Quality Management Platform and measurable SLAs, Intetics enables IT rich, innovative organizations to capitalize on available global talent and Intetics’ in-depth engineering expertise. Our core know-how is rooted in design of software products within conditions of incomplete specifications.

Request a consultation from intetics specialist