Product Design Engineering on User Interface-Perspectives

Interaction design foundation, in their articles in 2019, through https://www.interaction-design.org/literature/topics/ui-design, indicates that user interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style. Designers aim to create designs users will find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones.

Figure Source: https://www.interaction-design.org/literature/topics/ui-design
Article Source: User Interface (UI) Design

It is likely that UI design is confused with UX design. In this discussion, UI design is likely to cope with with the surface and overall feel of a design, meanwhile UX design copes with the entire spectrum of the user experience. As illustrated in visual form, UX design is deemed as a vehicle with UI design as the driving console. In GUIs, you are expected to create aesthetics and animations that align and embark your organization’s values and maximize usability, as the purpose.

How to make Great UIs
To deliver impressive GUIs, remember – users are humans, with needs such as comfort and low cognitive loads. Follow these guidelines:
1. Make elements such as buttons and other common elements perform predictably (including responses such as pinch = zoom) so users can unconsciously use them everywhere. Form should follow function.
2. Maintain high discoverability. Clearly label icons and include well-indicated affordances.
3. Keep interfaces simple and create an “invisible” feel. Every element must serve a purpose.
4. Respect the user’s eye and attention regarding layout; focus on hierarchy and readability:
o Alignment – minimize your number of alignment lines (think justified text); typically choose edge (over center) alignment.
o Draw attention to key features using:
 Color, brightness and contrast. Avoid including colors or buttons excessively.
 Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users should pick up meanings just by scanning.
5. Minimize the number of actions for performing tasks but focus on one chief function per page; guide users by indicating preferred actions. Ease complex tasks by using progressive disclosure.
6. Put controls near objects users want to control.
7. Keep users informed vis-à-vis system responses/actions with feedback.
8. Consider defaults to reduce user burdens (e.g., pre-fill forms).
9. Use reusable design patterns to guide behavior regarding navigation and search functions.
10. Concentrate on maintaining brand consistency.

Source: https://www.interaction-design.org/literature/topics/ui-design
Article Source: User Interface (UI) Design

Compiled by
Dr. Khristian Edi Nugroho Soebandrija, BSIE, MM.
Product Design Engineering Program, Binus Aso School of Engineering, BINUS University.