Matter

Designing for the Web

Adam Schwartz — @adamfschwartz

Pixels don't always behave

the way we want them too.

inconsistency, incoherence, or inaccuracy

detracts from the user experience.

Just be aware.

Fixing these problems is often easy...

...once you learn to identify them.

Part I
Identifying Problem Pixels

Part II
Fixing Problem Pixels

Part III
Avoiding Problem Pixels from the Start
AKA: How to Be a Designer

Easier to see when the changes are quick.

What about

consistency and accuracy without coherence?

Problem pixels come in many varieties.

Alignment of text and containers.

Fonts, aliasing, OS-dependent rendering.

-webkit-font-smoothing: antialiased

Cursors

Bridge to the OS

Border adjacent to browser edge, popup window position, etc.

URL inconsistencies

trailing slash, noun/verb usage, guids vs. ints, dashes vs. underscores

FOUC, resize glitches, transition: all

Copy, typos, spelling and grammar, voice


  • API error response messages (back-end devs: these apply to you!)
  • Title text, alt text (not just immediately visible copy)
  • Anything that shows in the status bar (ex: javascript:; href)

    • Aren't these just all possible UI problems?

    • Prioritize
    • Don't be paralyzed by complexity #JFDI
    • Remember it's an iterative process
    • Periodically reassess priorities

    Enlist others


  • Share screencasts with others and they'll identify problems for you
  • Gate to Super Users or Beta Users to get early feedback
  • Selenium, User testing, etc.

    • Just be aware.

    Part I
    Identifying Problem Pixels

    Part II
    Fixing Problem Pixels

    Part III
    Avoiding Problem Pixels from the Start
    AKA: Some Basic Design Lessons

    If there is something
    you can do to change it,
    then you own it.

    Me
    Source

    Learn your tools


  • Chrome inspector ⌘ + ⌥ + I
  • Zoom screen ⌘ + scroll wheel
  • Use the screenshot tool to check alignment ⌘ + SHIFT + 4

    • Fixing Problem Pixels

    Workshop

    http://tinyurl.com/tech-talk-pixel-tests

    Part I
    Identifying Problem Pixels

    Part II
    Fixing Problem Pixels

    Part III
    Avoiding Problem Pixels from the Start
    AKA: Some Basic Design Lessons

    Principle of Least Astonishment


    ...exploit users' pre-existing knowledge as a way to minimize the learning curve....

    Wikipedia

    Consistency

    Coherence

    Accuracy

    We face additional challenges as we scale.

    Mo Pixels Mo Problems

    Notorious B.I.G.

    Centralized Repositories


    style_guide

    hubspot_public_assets

    I never met a pull request I didn't like.

    Any Developer at HubSpot

    Just be aware.

    #JFDI

    Pixels make a Website a Design an App Art