D eve l o p e r s P rac t i c al UX & UI f o r · P rac t i c al UX & UI f o r D eve l o p e r s Frameworks and Guidelines for deliv ering Exceptional User Inter faces KyleMit @KyleMitBTV

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/

TermsTerms

UX ≠ UIUX ≠ UI

UX =UX =UserUser + + ExperienceExperience + +

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

FrameworksFrameworksNavigationProximityEmphasisPhilosophies

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

Design PhilosophiesDesign Philosophies

Human Centered DesignConversational DesignUniversal Design

ProcessProcess

Software DevelopmentDesign

Life Cycle (SDLC)

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

PrototypingPrototyping

...with Balsamiq

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

ResourcesResources

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