Over the past decade, the discipline of designing the user interface has become increasingly significant. In fact, according to Google Trends, the past 5 years have seen steady and consistent increases in the search volume of the term “user interface design”, so not only is designing the user interface significant in a modern context, but with digital products being so relevant, we can anticipate it to grow to unprecedented heights as we venture deeper into this decade.

However, designing the user interface for a digital product is a complex process, with plenty of roles and responsibilities taking shape at different stages of the process. In this article, we’re breaking down what user interface design is, and it’s constituents. We’ll then take a look at Onehing’s process when taking on a new project, and finally, some tips we always keep in mind when working on UI’s, which ensure we’re keeping the foundation strong at all times when building it.

What is User Interface Design?

Designing the user interface actually encompasses two design disciplines, those being UI design and UX design, and in the absence of either one, designing a satisfying interface becomes increasingly difficult. UI design functions mostly as a subset of UX design, and you’ll rarely see it being done independently, and this article goes into far more detail about the specific role of UI designers. Let’s begin by discussing UX design, since it comes chronologically first when designing a user interface. UX design defines the entire process of designing, creating, and integrating a product. UX design begins by considering the ‘why, what, and how’ of an issue, which goes on to form the final product. They’re concerned not just by the product, but the users who end up using it, hence the large amounts of research carried out by UX designers, in order to make the entire experience of a product satisfactory, from things as small as unboxing it, to the entire process of interacting with it.

UI design, as mentioned, is a subset of UX design, and comes in fairly late in the design process as a whole. UI designers are far more concerned with the visual design aspects of a product, and normally refers to the design of a graphical interface, in today’s context. A UI should be able to anticipate the behavior of a user, and play on previously existing knowledge to make even a brand new interface feel like one the user has used before. The user shouldn’t have to ‘think’ while using an interface, and designers ensure that their actions speak far louder. Additionally, conveying emotion also comes in the realm of UI design, such as a sense of adventure in a travel site, or sociability on a networking app. In short, UI designers must find the balance between playing on the psychology of users for usability purposes, and playing with visual design elements for a UI’s attractiveness.

The Interface Design Process

While it’s natural for different designers and agencies to have their own processes and steps for designing the user interface from start to finish, below is the process we personally adhere to at Onething for all projects.

1. Understanding Goals

The first step in designing a user interface is realizing why exactly it is being created, this is the purpose of the ‘understanding goals’ stage. This is part of the design thinking process, wherein designers try to understand the context around the problem which has been isolated. Thinking critically about why solving this problem is necessary, and going deeper into its roots to improve their knowledge of not only the issue, but the scenario surrounding it. Designers also try to isolate what exactly the various stakeholders are looking for, most importantly, the client. It’s wise to lay out expectations as to what will make the user interface a success. Also important is gaining a competitive understanding of the situation, studying other digital products which occupy a similar space, and perhaps solve the same issues, to make a truly unique product which takes creative leaps rather than building on the foundations of what already exists.

2. Research

Secondly, designers come to research the issue, and everything around it. This is arguably the most crucial point of any product development cycle, as a strong foundation here can consistently make for a great end product. UX Research comes first, where designers immerse themselves in the needs, wants, preferences, and behaviours of those who will be using the product. This process entails the use of many activities, such as user groups, user interviews, UX surveys, or more. Here, designers also begin carving out personas, essentially stand-ins for the final user, which can be referenced throughout the project, as a sort of summary of the research done in this stage. Towards the end of the research stage, journey mapping is done, to begin imagining the steps users will take in utilizing the product.

3. Strategize

The seeds of what will turn out to be the final product begin appearing in the ‘strategize’ phase. This is where most UI/UX designers, and agencies create concrete timelines of how the remainder of the project will look, with time being allotted for each of the remaining stages, along with a release window. The features and scope which sit at the core of the product are also determined, to begin forming a rough image of what it might look like. Ideas are brainstormed, discussed, and filtered through in preparation for the design stage, and visions for the product begin taking shape.

4. Design

Only in the fourth phase technically does physical design come into play. This begins with laying out an information architecture, a UX blueprint of how the various elements of the product will be arranged alongside one another. This ‘birds eye view’ look at the product  gives a structure for the creation of low-fidelity wireframes, which are 2d models of how each screen or portion of the app or website will look. These then create detailed wireframes, which paint a picture of close to the final UX. Following this, the UI designers come into play with visual and interaction design elements adding polish to the foundation built by UX and information architecture. Here, colour schemes, buttons, elements, and fonts come into play, and add life and personality to the product.

5. Deliver & Iterate

The fifth and final stage in designing the user interface is hardly an ‘end point’ for the product, since designing is a cyclical process rather than a linear one. Functioning prototypes are created here, and tested by users to weed out any issues which come up. Additionally, the users make precise comments about the product, allowing designers to iterate on it repeatedly until the perfect balance is found. The final designs are then handed off for development, to be turned into the final app or website which encompassed this process. Some post-launch support could also be here, depending on the nature of the project, and further iterations, even after the product has hit the market could be an additional step.

4 Rules to Perfect the UI Design Process

Now that the meaning and relevance of designing the user interface is clear, let’s move to some tried and tested strategies which help not only our designers, but professionals all over the world perfect their own processes, and create marvellous UI’s.

1. Consistency is Key

This point delves straight into the interaction design aspect of designing the user interface. Essentially, user logic must be taken into account with every decision the UI designers make, which is why consistency is far and away from the most important rule when it comes to UI’s. The behaviors of users should reflect predictability and understanding when it comes to a certain UI, allowing them to quickly and easily master the internal logic of an interface. Not only this, but products that are being interacted with for the first time for a user should trigger recall from previous, similar experiences, A concrete example of how UI designers leverage consistency can be seen with the psychological phenomenon of ‘mere exposure effect’ which states in essence that people will be more comfortable with things which they’ve experienced before. This translates to UI design since elements such as a ‘house’ could represent going back to the homepage, or how users expect a pop-out when clicking a hamburger button near the corner of the screen. This demonstrates that in designing the user interface, not only is consistency required internally in the product, but in the general ecosystem of other apps and websites as well. 

2. Recognition Over Recall

This rule, explored thoroughly by the Nielsen Norman Group, differentiates between the two types of memories utilized by users when interacting with a product. To use the analogy of a test, multiple choice questions would require recognition, whereas open-ended questions require recall, which of the two would you say is simpler? UI designers should aim to have the users interactions with a product to be predicated on recognition as much as possible, as opposed to recall. Recognition ensures a far higher success rate per action done by a user as compared to recall, since picking between a list of provided options for example, is far simpler than remembering a separate command for each one of them. Interfaces can be made more recognition based through one of two methods:

1. Providing the user with buttons, elements, visual cues, and interaction points whenever possible, reducing the burden on their memory to remember things like contextual actions, commands, or gestures.
2. Through the content itself, by improving its visibility, layout and structure. By making these more streamlined and intuitive from the users standpoint, UI designers can build familiarity, and promote recognition of the product itself. 

3. Reduce Cognitive Load

Cognitive load may seem like a buzzword, but it’s perhaps the single biggest nemesis of UI designers out there. It’s defined as an overabundance of mental resources required on the users end interacting with a product. Similar to the paralysis by analysis phenomenon, cognitive load can impair the users ability to make decisions, progress further towards their goal, or even attempt to interact with an app or website. Thankfully, when designing the user interface, steps can be taken to reduce cognitive load on the user, here are some examples:

1. Reducing visual bulk and clutter can give users the breathing-room and clarity to get where they want, when they want. Aesthetics are certainly a big part of UI design, but remember, less is always more. Not only can an over designed interface slow users down, but misplaced elements can prove a serious hindrance to usability. 
2. Harkening back to the first rule on this list, having consistency not only in your own product, but harmonious with trends from across the industry can help reduce cognitive load. The familiarity gives users the comfort to interact with a product the way designers intended.
3. Lastly, stripping the process of interacting with a user to the bare minimum can be helpful in reducing cognitive load. Whereas spoiling the user for choice may seem like a good idea, it’s at times beneficial to protect users from auxiliary functions before genuine recall can be established.

4. Allow Users to Take Control

Putting the users in the proverbial drivers seat is one of the most crucial aspects of designing the user interface. In essence, allow users to completely take the reins of their own interactions, which can include allowing them to freely navigate the product, make their own decisions, move forwards and backwards at will, and even make their own mistakes and learn from them. This feeling of ownership and control tends to improve user interactions by building comfort and familiarity with the app or website in question.

However, it goes without saying that giving the users tools to seek help as and when required is also a part of this rule. While agency is priority one, helping users help themselves goes hand-in-hand with this, and giving them the tools to correct their own mistakes makes them more decisive with their decision-making when interacting with an interface in the future.

Conclusion

User interfaces, and by proxy designing the user interface, is a key tenet of modern technology in the information age. Hopefully, this article has contributed to your understanding of UI design not only as a discipline, but as a well-oiled process. Its differentiation from UX design is oftentimes a misunderstood one, due to their relevance to one another, although it’s key to understand that they must work in tandem with one another to perfect the process of user interactions. Additionally, the six rules presented above, if followed, will ensure you a silky smooth UI design process every time.