Presentation on Interface Design for DMD Students

1. INTERFACE DESIGNINTERFACE DESIGN

2. Interface - “A point at which independent systems or diverse groups interact.”

8. Source: http://www.usabilitycounts.com/2012/03/28/user-experience-vs-user-interface-infographic-as-cereal/

9. Source: http://ux.walkme.com/great-infographic-ux-designer-vs-ui-designer/

12. HIGHIG

13. HIGHIG
Human Interface Guideline

14. #1 Status Bar
#2 Navigation Bar
#3 Content Display
#4 Tab Bar/ToolBar

15. #1 Status Bar
#2 Main Action Bar
#3 Content Display
#4 Action Bar Tabs
#5 Navigation Bar

19. Source: http://www.kinvey.com/blog/2765/ios-and-android-design-guidelines-cheat-sheet

20. Source: https://developer.apple.com/design/tips/

21. FUNDAMENTALSFUNDAMENTALS
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

22. know your userknow your user
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

23. Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
patternspatterns

24. patternspatterns
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
ui-patterns.com
pttrns.com

25. stay consistentstay consistent
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

26. 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

27. visual hierarchyvisual hierarchy
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

28. 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.

29. provide feedbackprovide feedback
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

30. 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.

31. be forgivingbe forgiving
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

32. be forgivingbe forgiving
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
Your UI should allow for and tolerate user error.

33. empower userempower user
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

34. 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.

35. keep it simplekeep it simple
Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

36. 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.

37. Source: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
littlebigdetails.com

39. Source: http://vimeo.com/116101132

40. review/workshop

41. WinACC - Home Energy Advice & The Great Waste Project
http://uxmag.com/articles/increasing-user-engagement-with-rewarding-interactions
Hyde 900
http://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 Materials
http://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 Churches
http://kathrynjamesfaulkner.com/mobile-first/index.html
http://www.givegoodux.com/5-crucial-principles-great-mobile-design/
Human Values Foundation
http://2ndquadrant.com/media/pdfs/mindcandy_casestudy.pdf