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?
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
- What's the problem space you're working in?
- Information architecture: color, contrast, position, hierarchy
- UI design: logical/visual connections; similarity; guiding features; calls to action/visual differences; minimalism; aesthetic usability effect
- 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 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:
126-UI Design
By tkjn
