UI is an abbreviation for User Interface. Let’s start with the definition of Interface. An interface is a mechanism for the interaction between two systems. Therefore, User Interface is an interface that is designed to facilitate and simplify interactions between the system and the user.
There are generally two types of User Interfaces:
Command Line Interface (CLI) or command-line interface, which is text-only and is mainly used by programmers;
We will describe and introduce the graphical User Interface (GUI) or graphical user interface in this article. Items such as images, windows, icons and menus are under this heading.
In this article, we will focus specifically on the type of user interface that deals with what the end-user sees, Namely GUI.
If UI’s exact meaning is unclear to you yet, the next part, UI design, will make everything clear to you.
What is UI Design?
UI Design is a topic that deals with UI design for devices, software as well as the web environment and focuses on fit and beauty to provide more and better use of the desired design and content and a better user experience for the audience. UI design is part of a broader topic called UX (User Experience) design, which focuses more on colours and typography or text design. In other words, the UI comprises all the components that enable the user to interact with our system or product. Still, UX is the user’s overall achievement from their experience interacting with our system or product. In short, a UI design is usually a combination of the following:
• Visual design; It means the mood and feeling that we are looking to convey and
• Interaction design: How our design works and its effect on the audience’s interaction with the design and content.
By giving an example, one can fully understand the difference between UI and UX design. Assuming we want to add a button to our design, the UX design focuses on where to place the switch so the user can easily find it. Still, the UI design thinks about making the button more attractive so that the user wants to press or touch it.
Why do we need a UI?
Everything you present to your audience should be visually appealing, beautiful, and to their liking. A good user interface creates a single visual language to help improve user interaction with your product. The UI is the Interface between Interaction Design, Visual Design, and Information Architecture and will inevitably affect all aspects of what you present to your audience. . In the absence of a proper UI, user interaction will not be optimal. Therefore we will not see ideal results.
What are the parts of UI design?
Creating an excellent UI design would not be possible without using all the application techniques in the following areas:
Visual Design:
The main goal of Visual Design is to shape and improve the user experience with the help of images, engravings, typography, use of empty spaces, layout and colour. Using visual design techniques, you can design the final product based on aesthetic principles and use user-centred designs with the help of well-known rules that have passed the test.
Colours:
Due to the subconscious mental associations resulting from the use of different colours and their effect on the emotions and meaning transmitted to the audience, the use of appropriate colours for each project is necessary. In addition, another critical point to note is the intelligent use of brand colours according to the desired design and message.
Graphic Design:
Graphic design is responsible for combining images, typography, motion graphics or motion graphics items in such a way that they can impress the audience or customer. The graphic design seeks Pixel.
Perfection;
This means that all points, spaces and colours must align with the brand’s principles. Note that graphic design is a specialized field, and creating extraordinary designs will require professionalism and sufficient experience. At the same time, drawing a clear line between graphic design and visual design is often impossible.
Mockup:
A mockup is a smaller or larger model with the original design that is prepared for preview, design evaluation, advertising or other purposes. Mockup design means displaying the final appearance of the invention with its visual details, such as colours and typography. Mockup is often confused with Wireframe and prototyping, but each is a different step in the design process. The Wireframe is a less accurate way of presenting a design that shows the structure and outline of the final product. Unlike Wireframe, Mokap is more like a prototype or prototype of the final product, but it is not possible to interact with it. With mockup design, you can create a more precise method for the last UI design mind and consider more diverse and appropriate options for organizing content.
Typography:
Typography is one of the main pillars of most different types of design. Typography is the art and knowledge of applying and organizing fonts, and its purpose is to provide beautiful and legible texts to the reader. Typography adds another layer of meaning to your text. Good typography should:
▪︎ Performs well on various screens of any size;
▪︎ The letters used in it are easy to clean;
Pay attention to the hierarchical relevance of the content to make what is presented more digestible.
In addition to the above, modern UI design largely depends on motion design. The animations, visual effects, and effects you see when scrolling through the screen will all dramatically impact users who interact with your product for the first time.
What are the types of UI prototyping?
One of the essential steps in UI design is prototyping. As mentioned earlier, prototypes are different from Wireframe and Mokap. Naturally, since the initial testing of the final product is only possible using an efficient prototype, each prototype should be as close as possible to the final UI and allow the user to interact. We should be able to prototype the interaction between the user and the UI in the most realistic way possible. However, not all prototypes reach this level of perfection, and especially in the early stages, other prototypes are used, which we will refer to here:
Video prototyping: In this prototype, a video of the UI function is produced to determine its final or expected performance for the UI team or client.
• Prototyping for feasibility:
This prototype is prepared to check the feasibility of implementing the expected solutions in the user interface. This way, before attempting to produce the final product, the facilities and technical risks in terms of performance, compatibility and suitability to the plant are tested.
Horizontal prototyping: Horizontal prototyping means displaying the user interface as a screenshot. In this case, only the outer layer of the user interface (menus, graphic items, button style and the like, etc.) will be visible.
• Rapid prototyping:
This type of prototyping attempts to prepare a prototype in the shortest possible time by utilizing the maximum available facilities.
• Simulation:
Simulation is the prototype that produces a UI similar to the final UI and allows the user to interact. In this case, users’ opinions can be evaluated, and possible problems can be eliminated.
Storyboard prototyping: In the storyboard method, we introduce the UI in the form of a series of images in the style of a story.
• Vertical Prototyping:
Vertical prototypes, unlike horizontal prototypes that show the user interface’s appearance, display the user interface’s back end. In this way, we can focus more on improving the code and testing the main components of the design in the early stages so that there is an efficient (albeit unfinished) model for evaluating essential functions.
In the following, the types of prototyping can be mentioned as Wireframe and Mokap, which we have already explained.
Prototyping tools
Depending on what you are designing the UI for (for example, software or a site), you can use a variety of tools, some of which we will mention here:
• InVision
• Frame Box
• Pidoco
• CogTool
• Wirefly
• Sketch
• Adobe XD
• Justinmind
• Keynote
• Google slides
UI design principles
A good designer follows 6 UI design principles when prototyping and designing the user interface:
• Structurality:
This principle is related to the overall architecture of the user interface and believes that the design should be clear, coordinated and understandable and separate associated items and irrelevant items; In such a way, an acceptable structure governs the integrity of the UI model.
• Simplicity:
The UI design should simplify and facilitate various activities for the user so that the audience does not feel alienated from the user environment.
• Visibility:
The design should be done so that all the options and components required by the user are available to him without any disturbing and unused factors. No duplicate information and opportunities that have no reason to exist have a place in the UI design.
• Responsiveness:
The user must receive appropriate responses and messages in proportion to every action he takes and every event that takes place at the system or UI level.
• Tolerance:
The design should be flexible and allow the previous action (undo and redo) to be cancelled and repeated to prevent mistakes and misuse.
• Modification and recyclability:
It should be possible to modify the internal and external components used in the design and reuse them.
UI techniques
But how do we achieve the UI design principles mentioned above? In this regard, we must use some simple and, at the same time, valuable tactics.
First of all, we need to know exactly what is meant by a UI technique (interaction technique or input technique). The UI technique is software and hardware components that help users get something done. Examples include clicking a button, moving a mouse, or saying a voice command.
There are dozens of different effective UI design techniques, the most well-known of which are summarized here:
• Interaction style:
such as filling out a form or selecting an item from the menu.
• Interaction design templates:
These templates provide a way to describe solutions to common usability problems or use different components in a particular context. In other words, it’s a formal approach to solving common design problems.
• Organized structures and arrangements:
The hierarchical structure is based on the brain’s ability to recognize different components based on physical differences, such as size, colour, contrast, and balance.
• The chain structure through which the user enters a specific path and performs the desired actions one by one.
• A matrix structure in which the user can select the type of movement in the user interface based on the alphabetical, temporal, thematic or similar order.
• Content organization models:
• Single page model
• A flat or flat model in which all the planes are considered level and equal and in the same hierarchy.
• List model allows users to access the page through a list of pages on each page.
• A purely hierarchical model that provides only one way to access sub-pages, and that is through the home page.
• Synchronous hierarchical model that provides the user with different methods for accessing content But at the same time, it somehow guides him in a particular direction to perform the expected actions.
• Imaging technique that emphasizes the output of the work and seeks to organize and structure numerical and non-numerical data in a way that is clear, understandable, and visually appealing to the user.
• Research and innovation:
By constantly researching, performing various tests and using new and innovative components, you can always make the designed UI better and more efficient. Innovative features that can be used include interactive layers, a buttonless user interface, animation, bright and attractive colours, high-quality image content, multi-part pages and the like.
The list of UI design techniques does not end there, but most of them can be placed in the above groups. Now that you are familiar with UI design techniques let’s move on to the design process.
UI design process
The UI design process can be divided into several stages and phases, which we refer to here as one of the most common of these categories:
- Collect and determine the necessary features:
In this step, we prepare a list of features necessary to achieve the desired goal of UI design and meet the potential needs of users. - User Analysis and Action:
In this step, we will look at how the various actions performed by potential users and our design should facilitate them. This step is in line with the research being done as part of the UX design process. - Information Architecture (IA):
This step involves designing and developing the information delivery process and flow. During this step, we choose the style and context of interaction with the UI, design pattern and illustration technique. Many of the design techniques mentioned earlier are formed during this step. - Prototyping:
This step will include preparing and developing prototypes, wireframes, mocap and any other type of prototype. - Applicability Assessment:
In this step, we look at prototypes or features that usually cannot be tested directly on the plant with the help of users. - Usability test:
With the help of the UI design test, we evaluate the level of user acceptance of the user interface design. During the usability test, users are usually asked to perform activities to identify areas where they are having problems or, for whatever reason, are not clear enough. - The final design of the GUI (graphical user interface):
This step is the stage of designing the unmistakable style and context of the graphical user interface. In this step, we finalize the type of visual interaction using typography and images and various graphic items and complete the UI design. - Supervision and maintenance matters:
After the design is completed, the performance should be monitored to make appropriate changes if necessary.
Ten do’s and don’ts in UI design
Fdesigny, as a reasonable conclusion, we mention ten do’s and don’ts that you should consider in UI (as well as UX) design:
• Create a similar space and experience for users of different devices. In other words, the user must face the same area using any device (mobile, laptop, or other devices).
Avoid any complexity as much as possible and make it easy to navigate between different parts of the UI.
• Consider an essential component on the page as the focus of the design, In such a way that the user’s attention is focused on it while browsing the page.
• Do not put several essential items on one page.
• Ensure that all interactive components, including buttons and links, are working correctly.
• Do not deprive the user of control. Auto-play or auto-scroll is one of the things that users do not like.
• Do not let the design negatively affect the readability of the content.
• Facilitate overview of content for the user. In this regard, using visual cues such as titles, separate sections and tables, and different images and buttons can be effective.
• Do not use components for which no specific justification is conceivable. In other words, avoid cluttering the UI unnecessarily.
• Do not move the design so that the user is forced to wait to use the user interface. Given the limited patience of today’s users, it will not be in your best interest to overload the UI with exciting and attractive components that take a long time to load.