HUMAN
COMPUTER
INTERACTION
HUMAN
COMPUTER
INTERACTION
PART 4
HIGH-FIDELITY
PROTOTYPING
HIGH-FIDELITY
PROTOTYPE
shows a lot more detail
shows more functionality
shows how real UI elements might look like
PRINCIPLES
OF USER INTERFACES
DISCOVERABILITY
user is able determine what he can and cannot do
user should not get lost
AFFORDANCE
possible interactions between user x interface
affordance might differ between different cultures
x antiaffordance (disabled btns, hiding input fields)
FEEDBACK
full (after an action) x continuous (state of interface)
eg. label ‘Successful‘ after completing order, completing
input field after selecting a date in datepicker
SIGNIFIERS
indicators on interface elements which shows their
behaviour/actions
very often comparable to real life (bookmark, files
and folders)
CONSTRAINTS
limitations for users to be able to take an action
Interlocks x Lock-Ins x Lock-Outs
CRAP!
Contrast Repetition Alignment Proximity
CONTRAST
elements which have different meaning/purpose
should not look the same
contrasts are attractive, help people get oriented
it’s not just color contrasts
REPETITION
repeat visual elements through whole app
people should recognize your app thanks to uniform
design
colors, shapes, fonts, structure...
https://www.behance.net/gallery/54350129/NIKE-Web-Concept
ALIGNMENT
each element should have visual connection to
another one
elements should not be placed randomly
leave whitespace white
PROXIMITY
elements which are related should form a visible
group
elements which are not related should be separated
www.adobe.com/products/xd.html
www.figma.com www.invisionapp.comwww.sketchapp.com www.proto.io
NOW!
1. find 4 websites containing some of the principles we
have mentioned in today’s lecture and describe
the principles into a text document
2. test your prototypes with classmates
3. check software for your homework
we will check all required parts of your homework
you’ll get the points
HOMEWORK!
upload your prototype or a link to Homework Vaults
until the next seminar
using Adobe XD (or your favorite software) prepare
high-fi y prototype of your semestral project