USER INTERFACE DESIGN & the UI PROCESS

COMP 126: Practical Web Design & Development for Everyone

what is UI design?

design for the point of human-computer interaction

  • inputs
  • navigation
  • informational components
  • containers

what does UI consider?

UI design patterns

Useful and usable aesthetic choices

THE UI PROCESS

Note: the following process stages aren't always included in every design process or always followed in this sequence, and the level of formality and attention paid to each can vary widely between projects. Not all these steps are required to complete A5 in this class.

know your users

  • who is your target audience?

  • consider, observe, talk, listen, interview 

  • users plan their actions in a system based on their predictions of what will happen

  • those predictions (and thus, actions) are based on their prior experience of your system and other systems like it

  • it's about what your users believe, not what you know

UI BASICS TO CONSIDER

  1. What's the problem space you're working in?
  2. Information architecture: color, contrast, position, hierarchy
  3. UI design: logical/visual connections; similarity; guiding features; calls to action/visual differences; minimalism; aesthetic usability effect
  4. Design patterns: what are they? Are they effective?

the UI process

user research & user persona/e

the UI process

user stories

"As a [type of user/stakeholder], I want to [task/functionality], so that I can [result/benefit]."

"As a customer, I want to quickly save items to a shopping cart, so that I can return to consider purchasing them later."

"As a hiring manager, I want to easily access a list of the candidate's skills, so that I can quickly assess whether they might be a good fit."

"As a potential client, I want to read prior clients' reviews, so that I can decide whether to make an appointment."

the UI process

the user flow diagram (of your user story/stories)

single-user flow

multi-user flow

the design ui process

lo-fi wireframes

the UI design process

mid-fi wireframes

the UI design process

moodboards

the UI design

process

the style guide

the UI design

process

hi-fi wireframes

the UI design process

the interactive prototype

the design brief

The design brief...

  • sets out a project's aims, terms, stakes, and parameters
  • is developed by the client or the designer or both
  • is a means of communication about and agreement upon the details of the project
  • provides the project team a place to start development
  • serves as a point of reference to keep the team focused as the project progresses

A design brief contains

  • the problem the project is intended to solve
  • the objective of the project
  • any relevant constraints (time, $, staffing, content, etc.)
  • the project team member/s & their role/s
  • a planned timeline
  • summary of any UX research undertaken
  • user stories 
  • user flow/s
  • user profiles/personae
  • moodboard/s
  • a style guide
  • sketches & wireframes

some combination of the following: