Interface design
41
INTERFACE DESIGN INTERFACE DESIGN
-
Upload
chriskonings -
Category
Education
-
view
153 -
download
1
Transcript of Interface design
INTERFACE DESIGNINTERFACE DESIGN
Interface - “A point at which independent systems or diverse groups interact.”
Source: http://www.usabilitycounts.com/2012/03/28/user-experience-vs-user-interface-infographic-as-cereal/
Source: http://ux.walkme.com/great-infographic-ux-designer-vs-ui-designer/
HIGHIG
HIGHIGHuman Interface Guideline
#1 Status Bar
#2 Navigation Bar
#3 Content Display
#4 Tab Bar/ToolBar
#1 Status Bar
#2 Main Action Bar
#3 Content Display
#4 Action Bar Tabs
#5 Navigation Bar
Source: http://www.kinvey.com/blog/2765/ios-and-android-design-guidelines-cheat-sheet
Source: https://developer.apple.com/design/tips/
FUNDAMENTALSFUNDAMENTALS
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
know your userknow your user
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
patternspatterns
patternspatterns
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
ui-patterns.compttrns.com
stay consistentstay consistent
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
stay consistentstay consistent
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like
it.”
Jakob Nielson
visual hierarchyvisual hierarchy
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
visual hierarchyvisual hierarchy
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Allow user to focus on what is important using size, color, placement etc.
provide feedbackprovide feedback
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
provide feedbackprovide feedback
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Inform your users of actions, changes in state and errors, or exceptions that occur.
be forgivingbe forgiving
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
be forgivingbe forgiving
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Your UI should allow for and tolerate user error.
empower userempower user
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
empower userempower user
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Once user is experienced with interface, reward them.e.g. an experienced user does not need tool tips or simple steps broken down for them.
keep it simplekeep it simple
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
keep it simplekeep it simple
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
The best interface designs are invisible. They do not contain UI-bling or unnecessary elements.
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
littlebigdetails.com
review/workshop
WinACC - Home Energy Advice & The Great Waste Projecthttp://uxmag.com/articles/increasing-user-engagement-with-rewarding-interactions
Hyde 900http://www.uxmatters.com/mt/archives/2009/08/inside-out-interaction-design-for-augmented-reality.php
http://www.ngrain.com/in-the-hotseat-augmented-reality-user-experience-designer-qa-2/
PG Distance Learning Materialshttp://www.digitalartsonline.co.uk/features/creative-lifestyle/graphic-designers-guide-interactive-design/
Project for MOOC
https://onlinelearninginsights.wordpress.com/2013/02/01/how-not-to-design-a-mooc-the-disaster-at-coursera-and-how-to-fix-it/
http://www.edtechmagazine.com/higher/article/2014/02/comparison-five-free-mooc-platforms-educators
http://www.learndash.com/5-mooc-building-platforms/
St Swithuns & St Mary's Parish Churcheshttp://kathrynjamesfaulkner.com/mobile-first/index.html
http://www.givegoodux.com/5-crucial-principles-great-mobile-design/
Human Values Foundationhttp://2ndquadrant.com/media/pdfs/mindcandy_casestudy.pdf
