What is User interface (UI) design? Conventions and Elements

The understanding of User Interface (UI) Design is fragmented across the web and mobile industry. There are thousands of articles about UI design available on the internet. It becomes more confusing when you jump from one book or article to another. Everyone presents different detail, but my article is going to cover everything about, what is user interface (UI) design? By the end of this article, you’ll have a good understanding of user interface design. You will get effective user interface info based on psychological, scientific, and technological considerations. Below is a breakdown of what we are going to cover in this article.

3)Conventions and Elements
4)Importance of UI
5)Role of UI in Business
6)History of UI term
7)Why I write this article.


User interface design (UID or Surface) is the way, process, approach or science of converting low fidelity design to high fidelity design. The UI design concerns efficiency, effectiveness, animation, responsiveness, usability, accessibility and arrangement of elements in an aesthetic way using colors and graphics. 

Example: If you imagine a product as the human body, it’s bone structure and organs by nature represent to User Experience (UX) design. User Interface (UI) design represents to cosmetics of the body, its presentation, its senses, its color (black, white, brown) and reactions.


The UI design is a part of UX design so UI design is the bridge between the user and user experience. The user interface is a space in which the user and system come together and interact. UI design enables end-user to control the software as well as a hardware component of a system.
The UI aims to make a product aesthetic, easy to use and pleasurable. The user interface design refines to the structure or skeleton plane by applying graphics and colors. The UI design is responsible for enhancing the user’s experience. It getting the user faster to their goals with fewer mistakes.

Which functions setup on which screen is a matter of UX design, how those functions are realized on the screen is the realm of user interface design. The UI design brings content, functionality, and aesthetics come together for a finished design that pleases the user. Successful interfaces are those in which users immediately notice the important stuff. Some of the successful user interfaces are defined below. 

1)CLI (Command-Line Interface)
2)GUI (Graphical User Interface)
3)NUI (Natural User Interface)
4)RUI (Reality User Interface)
5)OUI (Organic User Interface)
6)VUI (Voice User Interface)

CLI: Command-Line Interface also known as console user interface(CUI) or character user interface (CUI).CLI or CUI is a graphic less user interface design. It used to perform specific tasks required by users, these days used in the banking field and by the Hacker community.
GUI: A graphical user interface is a form of user interface that allows users to interact with the computer using icons, menu, and navigation.

NUI: A natural user interface is a user interface that is effectively transparent and remains invisible it has bit complex interactions.

RUI: The reality user interfaces further divided into two categories.
i) Augmented reality:  A technology that superimposes a computer-generated image on a user’s view of the real world, thus providing a composite view.
ii) Virtual reality: Virtual reality is an interactive computer-generated experience take the user in a simulated environment

OUI: An organic user interface is a type of user interface that involves a non-flat display, Where users control an object by manipulating an actual physical shape.

VUI: A voice-user interface makes human interaction with computers through a voice.

what is user interface design
what is user interface design? Convention and Elements.

Conventions and Elements:

UI is an umbrella term that has many, conventions, and elements, it includes layout, animations, images, graphics, color theory, It also includes
Input control: Checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field.
Navigation: Breadcrumb, search field, pagination, slider, tags, icons, and interaction.
Informational components: Tooltips, popup, progress bar, notifications, message boxes, and text.

Similarly, UI design includes a bunch of different conventions (principals) such as Visibility, Real-world mapping, User control, and freedom, Consistency, and standard, Error Prevention, Recognize rather than recall, Flexibility and efficiency, Aesthetic and minimalist design, Help user recognize, Help and documentation. Some important elements and conventions are defined below.

UI Elements:

Check Boxes: Allow users to select options independently of one another.

Radio Buttons: Allow users to select one option from a set of mutually exclusive options.

Text Fields: Allow users to wait for it and enter text or feedbacks.

Dropdown Lists: Allowing many more options to be presented efficiently it serves in a more compact space.
List Boxes: Provide the same functionality as checkboxes it serves in a more compact space.

Buttons: Can do lots of different things. Typically, they tell the system to take action.

Toggle: It refers to switching from one state another by a single click.

UI Conventions:

Visibility: It informed to the user for some action or goal. The system should always keep users informed about what is going on.

Real-world mapping: The system should speak the user’s language also contains illustrations, icons, and concepts that are familiar to the users.

User control and freedom: Users often choose system’s functions by mistake and will need an “emergency exit” to leave it. User control provides an emergency exit.

Consistency and standards: Design under the same properties for an element, situations, colors, and actions from start to end of the application.

Error prevention: A careful design which prevents a problem from occurring in the first place even better than good error messages.

Recognition rather than recall: The user should not have to remember info from one part of the dialogue to another.

Flexibility and efficiency of use: It’s about speed up user interaction. It is responsible for space where user efficiently accomplishes their task.

Aesthetic and minimalist design: Layout of the application should be more aesthetic and dialogues should not contain irrelevant info.

Importance of UI:

The User interface design is a multidimensional and challenging role. It is responsible for aesthetic layout, interaction, visual guiding, research, content and responsive experience for users. User interface design plays an important role in solving problems.

Sometimes a product looks simple and easy to use but not attractive to users because of its bad UI and strong UX so UI is important and necessary because of the following reasons. If a user interface design is too complex, the user may not be able to find the information or service they are looking for. Some important points of UI design described below.

1) UI design reduces the rate of user’s mistakes.
2) UI design solves the user’s problems.
3) UI design increases user involvement
4) UI design enhance (Optimize) end-user experience
5) UI design Improves the quality of products
6) UI design helps to win the consumers’ confidence
7) UI design makes the application easy to learn and use.
8) UI design enables users to switch quickly from one task to another
9) UI design increase system flexibility
10) UI design reducing the mental effort required users to get in touch with the system

Role of UI in Business: 

Everyone knows the primary goal of any business is to increase its sales. UI design does not just make your application aesthetic and interactive but it also grows your business. UI design plays an essential role in growing and achieving our business targets. The goal of UI design in business is to improve product quality and user loyalty.

If your site or an application consists of web pros, then UI asks to you make the product easy to use, aesthetic, high qualitative, high performance and flexible. An intelligent UI design connects the beauty with the experience. Intelligent UI design happens when we make some effective decisions in a way that understands and fulfills the needs of both our users and our business. UI provides the following benefits in business

1) UI Design grow business
2) UI Design increase the conversion rate
3) UI Design targets an audience.
4) UI Design reduces the mental effort of users.
5) UI Design attracts users and brings back to your system.
6) UI Design increases revenue.
7) UI Design increase your sell rate.

History of UI term:

UI term invented from the concepts of interaction design and visual design. The user interface evolved with the introduction of the command-line interface. It first appeared in 1950-1969 when “teleprinter” (TTY) machines introduced. Later on, the mechanical “teleprinter” was replaced by a “glass TTY”. Where the user was able to move “mouse” over the screen and could be done some clickable tasks. This was the first system where were command-line interface used. 

When computer users feel trouble using CLI, at that time computer scientists introduced a graphical user interface system. The first GUI was developed by researchers at Xerox Palo Research Center (parc) in the 1970s and was the start of a succession of GUI’s which has led us to where we are today. During the 1980s-1990s Apple and Microsoft on PCs set the command-line interface (CLI) as the primary user interface and It replaced by the Graphical User Interface. Now command-line interface available as alternative user interfaces in these systems.

The next 10 years (1990-2001) of GUI released features such as color, higher resolution displays, and better processing power. After 2005 UX (User Experience) design became a buzz-word at the same time graphical designer called GUI to UID (User Interface Design) and it became a proper field. Now great software houses have a separate department and team of UI Design. 

Why I write this article:

Firstly, there is seemingly a clear need for more articles on UI, I found a few experts bothering publicly to define UI. So I decided to write this article because I wanted there should be an article where the reader learns most easily and efficiently. I hope this article will be helpful for beginners and experts, It takes you one step ahead in the UI field. If you like it drop feedback and share it with your friends. If you need UI/UX services to let us contact. You can check out our projects. Stay in touch with us Linkedin, Facebook, Pinterest, Dribbble.

* Open rights for students and teachers so they can use this article for their assignments and other documents. We appreciate it if you give a reference to our site in your documents.

1 thought on “What is User interface (UI) design? Conventions and Elements”

Leave a Comment

Your email address will not be published. Required fields are marked *