Practical UX & UI forPractical UX & UI forDevelopersDevelopers
Frameworks and Guidelines for deliveringFrameworks and Guidelines for delivering
Exceptional User InterfacesExceptional User Interfaces KyleMit @KyleMitBTV
Survey - Let me know how I did!Survey - Let me know how I did!
Fork me on GitHub
Fork me on GitHubPresen
tation View
Presen
tation View
Overview Overview OTerms ... shared terminologyFrameworks ... conceptual modelsProcesses ... how to �shResources ... next steps
Follow Along!Follow Along!
https://kylemit.github.io/Presentations/UX/https://kylemit.github.io/Presentations/UX/
User Experience FacetsUser Experience FacetsSurface
Graphic DesignVisual Design
SkeletonInterface DesignNavigation Design
StructureInteraction DesignInformation Architecture
ScopeContent Requirements
StrategyUser NeedsBusiness Objectives
SupportMarketingHelp Desk
The Elements of User Experience by Jesse James Garrett
InterfaceInterface
API - Application Programming Interface
UI - User Interface
GUI - Graphical User Interface
Shared boundary between two layers
FundamentalFundamental Principles of Inter Principles of InteractionactionDiscoverability
Affordances ... what actions are possibleSigni�ers ... where the action should occur
UnderstandingMapping ... layout of actionsFeedback ... results of an actionConceptual Models ... universe of actions
The Design of Everyday Things by Don Norman
Usability vs. LearnabilityUsability vs. LearnabilityKiosk vs. CockpitKiosk vs. Cockpit
Increased Repeated Exposure
Usability vs. Learnability by Jeff Atwood
NavigationNavigationPath - Set of Steps needed to complete a taskStep - Physical and Mental Effort
Length - Amount of Time to completeWidth - Amount of Di�culty to complete
The Science of Great Design by Mark Miller
Path ExamplePath Exampleex. Mountain Bikingex. Mountain Biking
Load Bike on Car
Drive to Kingdom Trails
Bike up and down course
Path
How to Make a Path How to Make a Path EasierEasier::Shorten StepsWiden StepsReduce # of StepsAlternative Steps
Path
Conceptual Relationship & ProximityConceptual Relationship & Proximity
Contextual Relationship
Prox
imity
Conextual Relationship & Proximity
Equivalent Similar Connected Unrelated Opposed
Contained
Adjacent
Buffered
Apart
Distant
The Science of Great Design by Mark Miller
Proximity ExampleProximity Exampleex. Elevator Buttonsex. Elevator Buttons
7 8 9
4 5 6
1 2 3
contained adjacent buffered apart distant
Informational Relevance & EmphasisInformational Relevance & EmphasisInformation Relevance
How important a piece of information is tothe users goals
Emphasis The ability to draw attention to somepieces of information over others
EmphasisEmphasis
Emphasize with thicknessEmphasize with contrastEmphasize with color
Emphasize with sizeEmphasize with spacing
Every pixel on a screen conveysinformation that your brain must process
Informational Relevance & EmphasisInformational Relevance & Emphasis
Information Relevance
Emph
asis
Information Relevance & Emphasis
Low Medium High
Low
Medium
High
The Science of Great Design by Mark Miller
Jakob's LawJakob's Law
AKA Don't re-invent the wheelAKA Don't re-invent the wheel
Users spend most of their time on asite that's not yours
Jakob's Law of Internet User Experience by Jakob Nielsen
When adding components...When adding components...Check if a similar UI Metaphor already exists:Check if a similar UI Metaphor already exists:
1. Somewhere else in your project2. In whatever framework you're using3. In any commercial products4. Otherwise, do lots of research and design
Hallway Usability TestingHallway Usability Testing
Do'sDo's & & Dont'sDont's
Grab a random person from the hallwayand watch them use your product
Watch Listen
Justify Ego
Why You Only Need to Test with 5 Users by Jakob Nielsen
Project Paper CutsProject Paper Cuts
Every MonthFor One HourOne on OneReview minor issuesAnd �x immediately
Fix Everything Two WaysFix Everything Two Ways
1. Help Desk2. Code Base
Seven steps to remarkable customer service by Joel Spolsky
Design Languages Design Languages
Google - Material Design Apple - Human Interface Guidelines Microsoft - Fluent Design
Online Learning Online Learning
UX StackExchange Nielsen Norman Group
Books Books
The Design of Everyday Things by Don Norman
UI is Communication by Everett N McKay
Don't Make Me Think by Steve Krug
The Elements of User Experience by Jesse James Garrett
Video Video
Science of Great UI by Mark Miller Pluralsight
Podcasts Podcasts
UI Breakfast UX Podcast 99% Invisible
Design Notes Hacking UI Dot Net Rocks
Local Local
Meetup - UX Speakeasy Meetup - Vermont Coders Connection
Thank YouThank YouYes, You!Yes, You!
Like, sincerely, I'm really excited to be able totalk about design with y'all
Questions Questions Slides made with !Icons by Font is my own
¿¿reveal.js
Font AwesomeFont Smiler