Please enable JavaScript.
Coggle requires JavaScript to display documents.
Theory for Interaction Design - Coggle Diagram
Theory for Interaction Design
Gesalt
Proximity
Similarity
Design Patterns
Wizard
Selection Map
2 Panel Selector
Kevin
Patterns Used
Tiled Panes
Multiple things at once
Open floor plan concept
Haven't used multiple Windows
Two panel selector
Advantages
Easy to shift attention
Reduces visual load
Reduces physical effort
Dexterity
Reduces memory load
Minimised one-window drilldown
Haven't used Wizard Pattern
User can leave the wizard anytime
Can be confusing the the next user
Navigation
Signposting
Navigation when a menu is selected
Map
Buttons
Titles
Menu Navigation
Fitts Law
Keeping distances short
1 level of nexting
Global Navigation
Overview of system
One Click Transition
Encourages Exploration
Way Finding
Maps
Read More Events
Page Layout
Tiled Sections
Used throughout
Center Stage
Major area covered
Action & Command Patterns
Button Grouping
Next/Previous buttons
Comprehensibility
UI needs to communicate what is going on
toggle switches - psychological behaviour on and off
Close buttons on our pop-ups
Checkboxes - check/uncheck
Feedback Loop
Effectiveness
80/20 Rule
20% of system functionality will be used 80% of times
Progressive Disclosure
Read More Button
Map when clicked the zone
Timeline
Gestalt Principles
Proximity - yes
Similarity - yes
Common Fate - yes
Same feeling among components
Closure - no
Good continuity - yes
Area - yes
Symmetry - yes
Surroundedness - yes
pragnanz - no
Fibonacci Series - Golden Grid
Hamza
Patterns used
Tiled panes
Shows more bits at once
Expose users to more features
Extras on demand (come back to)
Pop ups
Wizard
Suggested Trail Wizard
Leads user step-by-step
Good for long complex tasks
Suited for user decisions who cannot decide which path they wanna take
2 Panel Selectors
quicker to shift attention
Reduce physical effort
dexterty friendly for older users
reduce cognitive load
reduce memory load
Have not used One-Window-Drilldown
Confusion as signposting of where you are isn't clear
Navigation
Signposting is everywhere
Ttitles
Icons
Maps
Anything with buttons, titles is a signpost
Short distances
80% of use cases in 0-1 context switching
Your suggested trail wizard does this with prev and next question
Sequence map pattern
Suggested Trail Wizard
Interactive History Timeline
users dont waste time
lets them know how far way from goal
gives indication of past present and future
Navigational patterns used
Global navigation
Overview of UI
Helps users locate what they need
Encourages exploration
Signposting is complimented with colouring of buttton
Page layout patterns
Tiled sections
Centre Stage Pattern
Used for Map
Action and Command Patterns
button groups
prominent done button at end of wizard
Design principles
comprehensibility
close buttons
checkboxes
learnability
pop up window
blurred background
content is no longer clickable
Feedback loop made
80/20 rules is being used :
20% of system functionality
80% of the time
Map for example
progressive disclosure
Map
Wizard
Timeline
user is only shown what is necessary at any given moment during interaction
Memorability
Global nav
Gestalt Principles
Proximity
Visitor rules
Acessibility
Events feed
Key in the Map
Animal page showing info
Similarity
All the buttons, font sizes, text headings have a sense of consistency looks the same
Common fate
Closure
area
used in golden ratio page where I had the largest image
symmetry
Symmetry principle used in my navbar the button labels have symmetry in them
surroundness
Accessibiltiy
pop up is surrounding background layer
praganz
contininutity
used in map
perception (not a gestalt principle)
Some amount of white space
stimulus intensity
Golden Grid used in my map screen
I
Shared
What background research did you do with examples
screen sizes
Places that sell kiosk
she put existing paper
HCI book
Designing interface book
Recommended reading
Global Statistics
Your outdated paper
Her book
What else would you have done with more time
Exploration - Background research - Cant see one in person
Physical access
Research paper
More time to learn the software
Time - Efficiency -
Iteration
Feedback - Limited to staying at home
More interaction
What did you learn from the module
Design Thinking process
What's online/trending is not always correct
Industry trends often do not follow the theory
Everyday design eye
Attention to detail
How will you apply theory to your final year project
Gurwinder
Server Controls
UI of website
Page Layouts - Tried and tested :fire:
Ryan
Prototypig
Kev
A component based design system
Using design patterns learnt
Research into HCI theory
Hamza
How did the module change your thinking for design
Critical
Underlying decisions
User cantered approach