View on GitHub

ux-design

and a closer look at UI-Design

-An overview of UX Design using the Human-Centered Design framework with a closer look at the role of UI Design in this process.


User Experience (UX) Design

UX Design is a process that can be used to design anything from products to bicycles to mobile applications. The focus of this design process puts the users’ needs first–making their interaction with the product a pleasureable one.

Don Norman of Nielsen Norman Group coined the term ‘user experience’ in the early days at Apple.

‘User Experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

The job of a UX Professional is to investigate the cause of conflict and resolve it.



One way to do this is through a process called Human-Centered Design:

Human-Centered Design

HCD is a framework that follows a hands-on, user-centric approach to problem solving.

hcd -Source: Codergirl, Launchcode, St Louis, Mo

Empathize: Learning the patterns of behavior. Find out what the users do, say, think and feel.

Define: Define the user problem that you will focus on. This is done by analying all the research from the empathy stage and grouping common pain points for example.

Ideate: Totally free creativity here! Brainstorm. Come up with as many ideas as you can. No idea is too crazy. Try to meet the users needs that were identified in the define phase.

Prototype: Build, get feedback, refine, and repeat. The goal here is to make sure your solution is on target by creating something simple and quick to present to the users to get feedback.

Test: Return to the original users for feedback if this solution has improved how they feel, think and do their task. Does it achieve their goals?


Tools that will help us through the HCD Process:

hcd_tools -Source: Codergirl, Launchcode, St Louis, Mo

Ultimately, the goal of HCD is to connect the business goals to the user’s needs through this process of testing and refinement so that all parties are satisfied.



User Interface (UI) Design

UI Design can fall under multiple phases of the of the design process, although generally seen in the ideate and prototype phases It is a part of the UX design process, but the goal is different.

The UI Designer is responsible for transferring the products research, content and layout into an attractive, guiding, responsive experience for the users. It is a digital, visual part of the process.

The UI Designers work closely to the UX designers to make sure every step the user will experience in their interaction will conform to the overall vision created by the UX Designers.

10 General Principles for User Interface Design

-Source: Jakob Nielsen Nielsen Norman Group

1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

The Progress Bar is an example of Visibility. It gives the user a sense of control and trust.

responsive checkout progress bar

2. Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Airbnb uses simple familiar language and booking form.

airbnb homepage

3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

emergency exit

4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

conventions

5. Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

iphone

6. Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

recognition over recall

7. Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

keyboard shortcuts in sketch

-Source: Medium Corporation

8. Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

google sign in

9. Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

error prevention

10. Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

help



In summary:

UX design is understanding the user needs and pain points, through user research, prototyping and testing. Then arriving at a solution that will solve this conflict and accomplish the goals.

Once the solution has been identified, the UI designer creates the visual, digital interface that will best serve this solution.