DIY UX Toolbox

Cobey Potter, Wellfire Interactive

Where does he get those wonderful toys?

Some Background

Strategy Tools

Development Tools

User Testing

Performance

Accessibility

Security

Take-Aways

Some Background

A short Compendium

Cobey Potter

Partner + Front-end/UX 

for Wellfire interactive

Cobey Potter

  • Originally from Charlottesville, VA
  • Been in DC Metro for 10 years
  • Belong to a lovely wife and independent Shiba Inu
  • Looking forward to seeing UVA win the Big Dance

Studied Cognitive Science at UVA

  • how the brain processes, stores, and retrieves information
  • concentrated in Human-Computer Interaction

at threespot media (2006), worked with

  • School Breakfast Association
  • Brookings Institute
  • Paley Center for Media
  • Peace Corps
  • Washington National Cathedral

at Wellfire Interactive (2008), worked with

  • American Frozen Food Institute
  • FairVote.org
  • Port City Brewing Company
  • Center for Student Opportunity's I'm First 
  • Communities In Schools

Strategy Tools

It all starts simply.

Users Aren't Dumb.

We're always learning.

However, as a Developer, we might be

too smart For Our Own Good.

You

  • Congratulations, you're human
  • You think like a human
  • You use the same basic tools as those around you
  • What are your own good/bad experiences?

Listen and Observe.

PAttern Libraries

  • Use your previous successes
  • Craft and maintain a pattern library:
    • oftentimes structures are mimicked site-to-site,
      its the visual layer thats different
  • Books:
    • Curtis, Nathan. Modular Web Design
  • Websites:

Pen + Paper

Users STories / REquirements

Development Tools

Now we're getting somewhere.

Design-style Tools

  • Adobe Illustrator
  • Bohemian Coding Sketch
  • Affinity Designer
  • (Adobe Fireworks)
  • Adobe Indesign

Hybrid Design/Development

Framework Tools

User Testing

You mean we have to Talk to Someone?

...Sorta.

Hosting Your Mocks

User Testing

  • Client group
  • In-house group
  • Friends and Family
    • The Mom/Dad test

REmote (Random) User Testing

Don't get Discouraged

When the drawing board calls.

What does Wellfire Consider in UX?

  • The standard perceptions:
    • utility, ease of use, efficiency
    • information organization
    • emotional connection 
  • contextual content
  • performance
  • accessibility
  • even security

Performance

Plan for Engagement.

PLan for Launch

But Know that's a first step

Why Wellfire Considers it UX

  • Nobody likes to use a site that crashes their browser
    • oftentimes we're running multiple full-fledged apps
    • definitely multiple tabs
    • the dreaded "autoplay"
  • Users not left with a bad taste in their mouth?
    • Happy users and return visits
    • The Coconut Wireless

Analytics / Metrics

Performance Issues

  • >2-3 seconds causes users to leave
    • but it depends.
  • Slow database queries
  • Huge Images
  • Too much Javascript
  • Too much "flair"
  • Overall Janky-ness

Sometimes you can't do anything about it.

Prepare UX/UI Fallbacks and lighten the load.

Performance Apps

Performance Homebrew

  • BrowserStack - Browser / Mobile Testing
  • Modern.ie - Localized Internet Explorer Testing
  • Virtualization (Oracle VirtualBox)
    • crazy oddball browser sandboxes (television)
  • checkgzipcompression.com
  • Gulp/Grunt JS Testing frameworks
  • Safari Dev Tools / Adobe Edge Inspect
    • Localized Mobile testing
  • Chrome Dev Tools

Chrome Dev Tools

  • Network Testing
    • disable cache!
  • Profiles
    • show how JS memory is used
  • Audits
    • general Webpage performance
  • Responsive Design Mode
    • not just for testing visual layout
    • tests with network throttling

Accessibility

Yeah, IT's often the Last thing on the List

Why Wellfire Considers it UX

  • Accessibility is not just for the handicapped, but also for the international market or those using older technology
  • Even disregarding a large part of the populace that has physical hardships, convenience factors (keyboard controls) are a plus
  • Progressive Enhancement / Mobile First Design
  • Delight in the simple,  add on elegance and complexity
  • Most accessibility is built into things you are already doing so go with it!

Accessibility tools

Security

Yeah, it matters.

Why Wellfire Considers it UX

  • Trust yourself, would you go to a site that "lost":
    • your personal information
    • your credit card information
    • even your user profile?
  • That dang Coconut Wireless again

A Lot of this is built in

  • Wordpress has its own security features
  • Django has a full fledged authorization module
  • Most dev languages have hashes for storing sensitive data
  • Use SSL and HTTPS

When in doubt, Offload it

  • the most secure site is a static flat site, but...
  • Login systems:
    • Google, Facebook, Twitter login systems
    • Yahoo just introduced passwordless login system
      • new, maybe too new, but seems promising
    • two-step authorization?
  • Payment gateways:
    • Stripe, Google Checkout, Paypal, etc

But Pay attention!

News ORgs / Tech Blogs are a Saving Grace

(Heartbleed virus, any one?)

iterate

Launch isn't the end of the line, no sir.

TAke-Aways

TL; DNLHYPMVY?

Too long; Did not listen, have you played monument valley yet?

Use your human-ness to Your advantage.

The world is vast, Listen in.

.... and has built tools (some free) for you to use.

Build something... Find Friends to test it... Iterate. 

Performance. Accessibility. Security. UX too.

Iterate. and iterate some more. 

Thanks!

Cobey Potter, Wellfire Interactive

cobey@wellfire.co | @courcelan

wellfire.co | @wellfire

 

Made with Slides.com