07-ux-styling

UX, styling, accessibility - front-end web technology

Make your app a joy to use

Please read:

• The box model
• Responsive design
• Flexbox
• CSS values and units
• CSS and JavaScript accessibility best practices

Supplemental reading material

• UI/UX Cheat Sheet

Why are UX, styling & accessibility exciting?

• Inclusivity - make your app feel like a welcoming place for all users
• Conversion - minimize agony to maximize conversions of first time users
• An art, not a science - usability testing, monitoring

UX

Answering the question: What experience do we want our users to have?

• Purpose (why use our app)
• Personas (who uses our app)
• Inspiration (similar apps)
• User flows / user journeys (how to use our app)
• Sketching (paper, whiteboard)
• Wireframes (Miro, Whimsical, Figma, Draw.io)
• Prototyping (Figma / HTML / JSX)
• Feedback (team, user testing)

UI

Which techniques can we use to implement experiences?

• Layout, mobile-first
• Words
• Color
• Typography
• Motion, animation
• Accessibility
• Familiarity

Layout

• Position, order, hierarchy
• Size, space
• Responsive design
• Flexbox
• Media queries
• Table / Grid
• The box model
• Inspiration: https://dribbble.com/

Colors

• color roles: primary, secondary, background, surface, error
• color palette / color scheme
• light/dark-mode: @media (prefers-color-scheme: dark)
• Inspiration: https://coolors.co/

Accessibility

• Semantic HTML tags
• <img alt="description>
• Respect styling of tags to correspond with semantics
• Links for navigation, buttons for actions
• Only use tables for tabular data display
• Accessibility Inspector in Firefox Developer Tools

Sample bugs

• Wrong focus / auto focus
• Reflows / fixes size / responsive
• Allow bad input / lack of input validation
• Contradicting language / terminology

Sample layouts

• Thorup General Store

Debugging layouts

* {
  outline: 1px solid red;
}

Next time

HTTP.