Practical UX & UI for Developers

Frameworks and Guidelines for delivering Exceptional User Interfaces

KyleMit @KyleMitBTV

Survey - Let me know how I did!

Overview O

• Terms ... shared terminology
• Frameworks ... conceptual models
• Processes ... how to fish
• Components ... improve elements
• Resources ... learn more

Follow Along!

http://bit.ly/PracticalUX

https://kylemit.github.io/Presentations/UX/

Terms

UX ≠ UI

UX =

User + Experience

+

User Experience Facets

• Surface
  • Graphic Design
  • Visual Design
• Skeleton
  • Interface Design
  • Navigation Design
• Structure
  • Interaction Design
  • Information Architecture
• Scope
  • Content Requirements
• Strategy
  • User Needs
  • Business Objectives
• Support
  • Marketing
  • Help Desk

Interface

Fundamental Principles of Interaction

• Discoverability
  • Affordances ... what actions are possible
  • Signifiers ... where the action should occur
• Understanding
  • Conceptual Models ... universe of actions
  • Mapping ... layout of actions
  • Feedback ... results of an action

Usability vs. Learnability

Kiosk vs. Cockpit

Increased Repeated Exposure

Frameworks

• Navigation
• Proximity
• Emphasis
• Philosophies

User Flows & Navigation

• Path - Set of Steps needed to complete a task
• Step - Effort to complete sub-task
• • Length - Amount of Time to complete
  • Width - Amount of Difficulty to complete
• • Mental difficulty
  • Physical difficulty

Path Example IRL

ex. Walking a tightrope

• Climb stairs to top of building
• Put on harness, helmet, equipment
• Walk across buildings on tightrope

How to Make a Path Easier:

• Shorten Steps
• Widen Steps
• Reduce # of Steps
• Alternative Steps

Conceptual Relationship & Proximity

• Conceptual Relationship
  How related two elements are to one another
  e.g. [Equivalant ... Opposed]
• Proximity
  The physical space between one element to another
  e.g. [Contained ... Distant]

Conceptual Relationship & Proximity

Proximity Example

ex. Elevator Buttons

Proximity Example #2

Can we improve this?

Emphasis

Every pixel on a screen conveys information that your brain must process

• Emphasize with thickness
• Emphasize with contrast
• Emphasize with color
• Emphasize with size
• Emphasize with spacing

Informational Relevance & Emphasis

• Information Relevance
  How important a piece of information is to the users goals
• Emphasis
  The ability to draw attention to some pieces of information over others

Informational Relevance & Emphasis

Design Philosophies

• Human Centered Design
• Conversational Design
• Universal Design

Process

Software Development Design Life Cycle (SDLC)

Jakob's Law

Users spend most of their time on a site that's not yours

When adding components...

Check if a similar UI Metaphor already exists:

1. Somewhere else in your project
2. In whatever framework you're using
3. In any commercial products
4. Otherwise, do lots of research and design

Prototyping

Hallway Usability Testing

Grab a random person from the hallway and watch them use your product

Project Paper Cuts

• Every Month
• For One Hour
• One on One
• Review minor issues
• And fix immediately

Fix Everything Two Ways

1. Help Desk
2. Code Base

Components

Buttons

1. Use Good, Descriptive Verbs ^[1]
2. Use Signifiers for discoverability & feedback
3. Bigger Easier (Fitts' Law)

Example

User Selection

Tables

Resources

Design Languages

• Google - Material Design
• Apple - Human Interface Guidelines
• Microsoft - Fluent Design

Online Learning

UX StackExchange

Nielsen Norman Group

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

Science of Great UI by Mark Miller

Pluralsight

Podcasts

UI Breakfast

UX Podcast

99% Invisible

Design Notes

Hacking UI

Dot Net Rocks

Thank You

Yes, You!

Like, sincerely, I'm really excited to be able to talk about design with y'all

Questions ¿

• Slides made with reveal.js!
• Icons by Font Awesome