Identifying & Implementing UI Design Vol 1

Published in

Bootcamp

7 min readOct 22, 2021

Hello friends. I am Agung Prabowo from Singaperbangsa Karawang University. This time I will share a little about Identifying UI Design. we will discuss about User Interface Design and Implementation of User Interface Design. Let’s just start the first discussion.

User Interface Design

UI design is the process of creating an interface in a software or computerized device with a focus on appearance or style. In the system/application development life-cycle, designing the User Interface is part of the “Design” stage. The output of the process of designing the User Interface is a design specification document.

The Design Specification Document consists of:

Narrative overview
Design Example
Usability testing and evaluation

UI Design Specification Document Outline

The following is an example of a User Interface Design Specification Document, consisting of a Narrative Overview, Interface Design, and Usability Testing and Evaluation. In this blog, we will discuss more fully about interface design, from designing to implementing it.

Some Forms of User and Application Interaction

In general, there are 5 forms of interaction between the user and the application:

Command Language Interaction
Interaction Menu
Interaction Forms
Object-Based Interaction
Natural Language Interaction

Example Command Language Interaction

C:\> cd c:\xampp $ cp file.doc newfile.doc

Command Language Interaction is a form of interaction between users and applications where users enter explicit statements into the system to carry out operations.

The user needs to remember the command syntax.

Example of Interaction Menu

Menu Interaction is A form of user interaction with the application in which a list of system options is provided and special commands are executed based on the user’s choice of menu options.

There are 2 types:

Drop-down Menu Menu position When accessed the menu opens by dropping to the view (example left image, When a menu is clicked it will drop the options that can be selected).
Pop-up menu menu that will appear automatically or when we move the mouse cursor in a certain area

Example of Interaction Form

Form Interaction, a highly intuitive form of user-app interaction where data fields are formatted in a manner similar to paper-based forms. Usually used for data entry and retrieval in the system.

Example of Object-Based Interaction

Form of interaction Object-Based Interaction, a form of interaction between users and applications where symbols are used to represent commands or functions.

A common method of attachment is through the use of icons: graphic images that represent specific functions in a system.

Example of Natural Language Interaction

A branch of research in Artificial Intelligence, studies techniques to enable systems to receive input and produce output in conventional languages. This method of interaction is referred to as natural language interaction. This method interaction can be implemented with audio or keyboard input. Natural Language Interaction, a form of user-application interaction where the input and output of computer-based applications are in the form of conventional languages, such as English.

UI vs UX Design

UI is more concerned with the appearance of the surface and the overall feel of the design. UX covers the entire spectrum of user experience.

“If we want users to like our software, we must design it to behave the way people like it: respectful, generous, and helpful.” (Alan Cooper, software designer and programmer).

UX itself can be defined as the way users (users) use a product, while UI is an object or objects used to interact

UI is more concerned with the appearance of the surface and the overall feel of the design. UX covers the entire spectrum of user experience

7 Habits of Successful Interface Designers

Understand the Business
Maximize graphic effectiveness
Think like a user
Use a model or prototype (mock up)
Focus on usability
Provide feedback
Document everything

Some UI Components (Best Practice)

Typography: the use of the right typeface is also very important because this element plays a role in determining the level of readability.
Color: the choice of colors has a great influence in the design of the user interface. The use of different colors for each button and icon makes it easier for users to find the features they are looking for and want to use.
Icon: Icons convey meaning in a graphical user interface.
Grid: serves to help designers to arrange content (images, paragraphs, etc.) in a neat and structured manner. The grid is based on a 12 column system.
Buttons: Use buttons to draw attention to important actions.
Labels: Tags draw attention to new or categorized content elements.
Tables: Tables show tabular data in columns and rows.
Alerts: keep users informed of important and sometimes time-sensitive changes.
Form controls: allow users to enter information into the page.
Form templates: Patterns for some of the most commonly used forms or forms.
Search field: Search allows users to search for specific content if they know what search term to use or cannot find the desired content in the main navigation.
Navigation: Hierarchical and vertical navigation to place on the side of the page.
Headers: headers help users identify where they are and provide a fast and organized way to reach the main sections of the website.
Footers: Footers serve site visitors who arrive at the bottom of the page without finding what they want.

Dialog Component Order

the order in which information is displayed to the user and obtained from the user. The main design guidelines in dialogs are consistency in the sequence of actions, keystrokes, and terminology of the 3 step process:

Design the dialogue order
Designing prototypes / mock-ups
Evaluate its use

Designing the Order of Dialog Components

Determine the order Have a clear understanding of the characteristics of users, tasks, technology and environment and Create dialog diagrams i.e. Formal method for designing and representing human-computer dialogue: using boxes and lines Consists of a box with 3 parts:

up
middle
lower

Example of Dialog Component Sequence Design

Dialog component sequence diagram depicting sequence, selection, and iteration

Example of a sequence diagram for a customer information system

From login -> main menu (sequence)
Main menu (selection, because there are several choices / options)
Menu Individual Customer Information (Sequence, done sequentially and there is no choice)
Customer Information (Selection, there are several options to choose from)

Designing Prototypes / Mock ups and Evaluating Their Uses

Usually this is an optional step and this Job can be easily done with any UI design software.

Some examples of UI Design Software:

Pencil Project / Pencil Evolus (Free and Open Source Software)
Inkscape (Free and Open Source Software)
Draw.io (Free and Open Source Software)
Sketch (Commercial)
Wireframe.cc (Freemium)
Adobe XD (Commercial)
UXPin (Commercial)
Fluid UI (Commercial)
Balsamiq Mockups (Commercial)
Axure RP (Commercial)
Microsoft Visio (Commercial)
mockflow.com (Freemium)
moqups.com (Freemium)

The choice of software used depends on the user’s taste, but usually use Pencil Project and draw.io because both software are free and open source.

Example of a Design Mock Up with Pencil

Pencil is a software for creating UI designs/ Mock-ups. Here are the Pencil Project installation steps. Pencil Project can be downloaded at here

Follow the installation steps by clicking next, until the Finish dialog box appears as follows.

Specifies the page to be used in creating the UI design / mock-up.

The work page that will be used to create the UI design. On the left are the components that can be used in designing the UI, such as buttons, textboxes, checklists, etc.

Conclusion

UI is the process of creating an interface in a software. The steps in the process of designing a dialog box are designing the dialogue sequence, designing a prototype/mock-up, evaluating usability. Before implementing, first design a prototype/mock-up that can be done with several free and open source software, one of which is Pencil Project.

Thank you