the UI DESIGN PROCESS
COMP 126: Practical Web Design & Development for Everyone
UI design
is 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?
user research & user persona/e
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 user flow diagram (of your user story/stories)
single-user flow
multi-user flow
lo-fi wireframing
mid-fi wireframing
moodboards
THE style guide
hi-fi wireframing
