2. How do people perceive design?
Behavioral
Function
Understandability
Usability
Physical Feel
Reflective
Message
Culture
Meaning
Image
Visceral
Look & Feel & ...
Gestalt
First impression
Gut reactions
28. Recognition vs. Recall
People are better at recognizing things they have previously
experienced than they are at recalling those things from memory.
Choose recognition over recall!
52. FACT
A piece of information
“Ten years ago they didn't have email”
“They have email”
“They have whatsapp”
“They have smartphones”
“Rafting is dangerous”
53. CHALLENGE
A problem defined through action. “how might we”
“How might we use email to help them get organized”
“How might we take the river to where they are”
“How might we make rafting safe”
54. IDEA
Something that makes something
“Google Wave for outdoor activities”
“A virtual rafting experience”
“Make foam stones”
Hinweis der Redaktion
3 runtime compiler that all cost energy
engineering process
boiling it down to a great solution
Who are we designing for? What problems are we solving? What are we focussing on?
we have different methods: quantity vs quality.
- memory, attention
- e.g. post completion error… scanner and printers vs atms
Learning, behavior, banner blindness, issue with search knowledge boxes
How are distilling our observations into findings? What does matter to our problem
WHY: - Understanding (+exploring) - Sharing with the team - Validating (over time)
WHAT: - keeping track of values, behavior, change - generating a mission statement
Create prototype people, ie: “Persona”
- Exploring problem spaces
-
WHAT - Fast ideation - Stating solutions - create a common understanding - generate group alignment
how is the box on the shelf used?
bringing ideas together
basic UX knowledge to come up with a first draft or prototype to itereate on…..
helping you to base decissions on UX and/or UI questions on some expert knowledge….
BUT: only a small subset of principles that we show here (randomly selected by me…)
… after we heared Johan explaing what UX is and is not,
Robert explained us the UX lifecyle…
taking it from there I would like to introduce some tools and principles, that come in handy while developing your Prototypes or shaping your product
Implementation model == eng thinking - software architecture (database model, data types, classes) (free space on harddrive, so that in can be overwritten someday)
Mental model == how the user thinks the system should behave to serve his goal (deleting a file = putting it in the trash)
Representation model == how the UI looks and feels (drag and drop a file into the trashcan)
- Iterative process
- Collaborative process
Build up an architecture for your application
where am I going to show which information? How are the different screens structured?
Primary questions:
Who are my users?
What do they want to achieve using your application / what are the goals?
- What are the primary goals, what are secondary goals?
- What information does the user need to see to achieve the primary goal?
- What information is imperative to achieve this goal?
- What information is needed to achieve secondary for follow up goals?
simplest way to come up with an IA
low-fi, low-tech - no tools needed, everybody can participate
after brainstorming order structure content, features and information into sections, where they do make sense
to help the user achieve the identified goals
translate it into a first UI
=> raw pencil on paper is more than enough!!!!
devide screen into ares for information
“where do I see which information”
Pro Tip
Squint your eyes
blurred view
Pro Tip
Squint your eyes
identify regions / sections
It’s easier to click and choose from a variety of options than to write out those same things from memory.
A classic move from using recall memory to recognition memory in user interface design was when modern GUIs (Graphical User Interfaces) slowly began replacing the older command-line interfaces known from DOS or the UNIX prompt. The effort associated with learning commands in the command-line interface made computers difficult to use. By presenting commands in menus in modern GUIs, the recalling commands from memory became obsolete and simplified the ease of use of computers.
=> never the less you need expert features for quick acess to these features, like copy and paste
AND: Know your users….. for some entering commands is appropriate!!!!
this is also why: understanding a foreing language is easier than talking
e.g. you want to fly friday in 2 weeks
- Feedback (what's happening)
- Visibility of System Status (where am I)
Chrome:
After zooming in our out with keyboard commands, the current zoom level with the controls is briefly displayed
Youtube:
When video is playing a play icon is added to the title text
this only helps people who can read and who understand englisch
errors are human!!!
undo, redo, abort, cancel, reset….
spell checker / auto correct...
phonebook does not look and behave like a calendar!
Avoid uniformity. Make objects consistent with their behavior. Make objects that act differently look different.
...Lack of consistency in a UX design leads to added “cognitive load” for the user and breaks the “transparent to task” effect. An inconsistent UX requires the user to repeatedly allocate thinking to how to use the interface because there are many more variations of UX patterns. Consistency (visual and behavioral) in a UX means that the user can learn the controls and then employ them without much active thinking about them, and can instead concentrate on the work itself.
still they all look cohesive / feel the same.
all looks alike, even though the concrete input methods are totally different
- align screens by drag and drop
- set timezone using a map
- set your date and time via clock and calendar
but they all feel the same
- back
- navigation
- search
- ...
all items for a unit (same font and size)
but some stand in contrast to the rest by being bold (more important)
one even is red (most important) => the label I chose to see currently
4 Dots forming a group
you can only tell if in context…
even though I know the issue I sill confuse it every time!!!
all apps are aligned.
no app looks more important than the others
it looks homogeneous, all belongs together, clean and easy to look at
BUT: nav elements on bottom are not aligned… they appear to be different than the rest - YES, they are!
Do this intentionally!!!!
Proximity done right!
Simplicity - just a textfield…
Details on Demand - little info button
Feedback - instantly as you type (color and text changes)
Affordance - just a textfield (pw-field)
Tolerance - easy undo, easy feedback when I do something right
Similarity & contrast - different stages are easy to seperate from each other
Proximity - feedback and textfield form a unit