Introduction to UI/UX

Authors: Ang Shi Ya, Tan Jun Kiat

Overview

User Interface (UI) and User Experience (UX) are terms often used interchangeably. In fact, these two terms are quickly becoming dangerous buzzwords that are used inaccurately, creating massive confusion in the industry. A simple Google search will show that UI Designer and UX Designer jobs are listed under similar titles and descriptions.

In addition to helping us identify and apply for the right role, understanding the key differences between UI and UX helps us in using the right concept in our own applications. This document will address the difference between UI and UX as well as some of the techniques used in UI Design and UX Design.

User Interface vs User Experience

UI is about the design of the buttons, the layout of the website and the responsiveness of the application. It encompasses the presentation and interactivity of the application. On the other hand, UX is concern with the ease of use and the pleasure provided through using the application. In short, UI is about the look and feel while UX is about customer satisfaction.

Due to the overlapping nature of UI and UX, you might still have some questions such as 'Doesn't improving the UI also improve the UX?' Indeed, it does. In fact, UI can be part of UX.

Note that can is used because UI is no longer a necessity to UX due to the emergence of zero UI, which won't be covered here.

To gain a better understanding, let's look at real life examples of good UI but bad UX. A prime example would be the Mystery Meat Navigation problem. It refers to buttons and links that do not explain themselves; users have to click on them to find out where it leads. In essence, the pursuit of clean and neat UI has resulted in omission of details that provide clarity for the user. This results in bad UX because people do not like to puzzle over how things work. A good UX should never make the user think.

If you would like to read more about the differences between UI and UX, here are a few articles:

• The Difference Between UX and UI Design-A Layman’s Guide - provides breakdown of the disciplines involved.
• What’s the difference between UI and UX? - provides opinions from UX experts.
• The superpowers of UX & UI designers - provides illustrations to highlight the differences.

UI Design

Flat and minimalist design are technically easier to create than realistic design. Thanks to the rise of flat and minimalist design you don't have to be a photoshop expert to get started on UI design.

A good way to start is by observing existing designs. Use existing UI Designs as references and try to apply the design patterns in your own application. Using UI design guidelines can help to highlight and avoid common mistakes. Online lessons like Hack Design also provide a variety of materials covering the basics of UI design. The best thing is that they are free!

Here is a non-exhaustive list of UI design concepts you can choose to dive into if you are interested:

• Color Theory - Take a look at Smashing Magazine for a introduction to color theory
• Grid system - This article provides a comprehensive overview on the grid system
• Typography - Here is an article that has a list of resources to get you started on typography
• Iconography - Take a look at Metro Studio for free icons.
• Visual Hierarchy - This article covers the different techniques used to create visual hierachies
• Flat vs Skeuomorphism - This article provides the good and bad of flat design

UX Design

At it's core, UX Design is about understanding both user and business goals, and tailoring a product that strikes a right balance between both goals within given constraints such as budget or time.

Just like Software Development, UX Design is an iterative process. It involves many stages like researching, planning, testing, and at each stage are many different techniques that you could use. A good place to find these techniques would be the UX Project Checklist created by Andrea Soverini.

Which is More Important?

The metaphor of building a house by Clayton Yan (UX Designer at UserTesting) illustrates this aptly. UX is the structure (i.e. the number of rooms, one-storey or two-storey and where the front door leads). Meanwhile, UI is about the visual (i.e. whether the same wallpaper or vases is used). A good UX with bad UI is like an ugly house with nice structure. A good UI with bad UX is like a beautiful house with the front door leading straight to the bathroom. To sum it up, UI and UX are equally important in creating an awesome experience for the users.

The Process of UX Design

As stated above, UX is a highly iterative process to achieve a fine balance between meeting the needs of the target audience and achieving business goals. Many times the functionality of a product is prioritised over the experience it gives. However this should not be the case when experience is the deciding factor in delighting or frustrating users.

Catering the right experiences for users does not have to be difficult. The stages of UX Design are logical and can be decomposed into four main stages as shown, with each section supplemented with what you would do during each stage, and the expected deliverables at the end of each stage.

1. Preliminary Research
2. Prototyping
3. User Testing
4. Maintenance

Preliminary Research

The first stage is Preliminary Research. This is where you would:

• Understand your target audience through Contextual Inquiry, which involves interviewing users to find out about their wants, needs and pain-points, in the setting of them using the actual product and/or products from competitors
• Gather the tools needed for the project such as wireframing or prototyping tools for creating low to high fidelity products for testing
• Depending on whether the project is self-initiated (taking a known product and re-designing it) or client-based (working for businesses or non-profits), discuss and create a project plan with stakeholders

Deliverables

• Personas - User profiles that are representative of the target audiences
• User Stories - Representation of the most important user actions or motivations for each persona
• User Scenarios - Case studies of how users use the products, supplementing User Stories to allow you to better empathize with the users
• User Flows - Depiction of how users navigate through the product for each scenario

Prototyping

After Preliminary Research, the next stage is Prototyping. This is where you would:

• Test whether the product flow you came up with is smooth
• Create prototypes, or Minimum Viable Product (MVP), for further testing and refinement
• Use studies gathered from the previous stage to get a better sense of how users would interact with the final product, which would be further refined in the User Testing stage

Deliverables

• Wireframes - Depicts a skeleton version of an application, meant to develop a unified vision of content structure instead of focusing on asthetics; may or may not be clickable
• UI Elements - Basic visual components, which can start out basic and increase in quantity/quality with the fidelity of MVP
• Mockups - Built upon an agreed version of wireframe with higher fidelity and asthetics

User Testing

After Prototyping, the next stage is User Testing. This is where you would:

• Have a clear sense of the user goals at this stage
• Use a low or high fidelity prototype during usability testing to determine product effectiveness
• Follow an iterative design process to re-prototype after gathering user feedback

Deliverables (before actual testing with users)

• Usability Test Plan - Summary of background, goals, and test methodology
• User Testing Script - What to say as the facilitator, encouraging users to think out loud during the test

Deliverables (after actual testing with users)

• Usability Reports - Thorough introduction to what aspects of the product was or was not effective and how to improve
• Journey Maps - More detailed user flow based on how users are observed to use the product in actual testing conditions
• Refined Prototype - A more refined prototype that is closer to meeting user expectations, each iteration should always be tested before moving to a higher fidelity

Maintenance

After User Testing and the launch of the final product, the next stage is Maintenance. This is where you would:

• Follow-up with the product after the final product launch
• Recursively update, revise and maintain the content in the application

Deliverables

• Sitemaps - Depiction of how all pages of the product interconnect
• Taxonomies - Organized depiction of how features or information in the product relate to one another
• Content Governance Plans - Complete strategy for updating, revising and maintaining all content within the product

Ending Notes

The clearly-stated objectives and deliverables of each stage culminate in a well-defined target audience and a well-designed prototype needed to match the expectations of that audience. UX Design requires empathy in the users' shoes and effort to address their problems, however all that is worth it in the grand scheme of delighting users when they use your applications.