Save 37% off PRO during our Black Friday Sale! »

DIY UX Toolbox

DIY UX Toolbox

UX Tools for non-UX Developers

D1fafc2a1501d489080c805e0cdda295?s=128

Cobey Potter

March 19, 2015
Tweet

Transcript

  1. DIY UX TOOLBOX DIY UX TOOLBOX COBEY POTTER, WELLFIRE INTERACTIVE

    COBEY POTTER, WELLFIRE INTERACTIVE
  2. WHERE DOES HE GET THOSE WONDERFUL TOYS? WHERE DOES HE

    GET THOSE WONDERFUL TOYS?
  3. SOME BACKGROUND SOME BACKGROUND STRATEGY TOOLS STRATEGY TOOLS DEVELOPMENT TOOLS

    DEVELOPMENT TOOLS USER TESTING USER TESTING PERFORMANCE PERFORMANCE ACCESSIBILITY ACCESSIBILITY SECURITY SECURITY TAKE-AWAYS TAKE-AWAYS
  4. SOME BACKGROUND SOME BACKGROUND A SHORT COMPENDIUM A SHORT COMPENDIUM

  5. COBEY POTTER COBEY POTTER PARTNER + FRONT-END/UX PARTNER + FRONT-END/UX

    FOR WELLFIRE INTERACTIVE FOR WELLFIRE INTERACTIVE
  6. COBEY POTTER 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
  7. STUDIED COGNITIVE SCIENCE AT UVA STUDIED COGNITIVE SCIENCE AT UVA

    how the brain processes, stores, and retrieves information concentrated in Human-Computer Interaction
  8. AT THREESPOT MEDIA (2006), WORKED WITH AT THREESPOT MEDIA (2006),

    WORKED WITH School Breakfast Association Brookings Institute Paley Center for Media Peace Corps Washington National Cathedral
  9. AT WELLFIRE INTERACTIVE (2008), WORKED WITH 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
  10. STRATEGY TOOLS STRATEGY TOOLS IT ALL STARTS SIMPLY. IT ALL

    STARTS SIMPLY.
  11. USERS AREN'T DUMB. USERS AREN'T DUMB. WE'RE ALWAYS LEARNING. WE'RE

    ALWAYS LEARNING. HOWEVER, AS A DEVELOPER, WE MIGHT BE HOWEVER, AS A DEVELOPER, WE MIGHT BE TOO SMART FOR OUR OWN GOOD. TOO SMART FOR OUR OWN GOOD.
  12. YOU 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. LISTEN AND OBSERVE.
  13. PATTERN LIBRARIES 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: The Pattern Lab ( ) MailChimp UX ( ) Lonely Planet ( ) patternlab.io ux.mailchimp.com rizzo.lonelyplanet.com
  14. PEN + PAPER PEN + PAPER Formulate ideas and write

    them down. Keep these ideas in a notebook. Dot-grid books ( , ) even your old Trapper Keeper will work "Limitless paper in a paperless world" Behance Baron Fig Field Notes Moleskine Cahier Notebooks
  15. USERS STORIES / REQUIREMENTS USERS STORIES / REQUIREMENTS Kanban applications:

    Trello ( ) Asana ( ) Pivotal Tracker ( ) ZenHub ( ) Evernote, Dropbox, Sharepoint trello.com asana.com pivotaltracker.com zenhub.io
  16. DEVELOPMENT TOOLS DEVELOPMENT TOOLS NOW WE'RE GETTING SOMEWHERE. NOW WE'RE

    GETTING SOMEWHERE.
  17. DESIGN-STYLE TOOLS DESIGN-STYLE TOOLS Adobe Illustrator Bohemian Coding Sketch Affinity

    Designer (Adobe Fireworks) Adobe Indesign
  18. HYBRID DESIGN/DEVELOPMENT HYBRID DESIGN/DEVELOPMENT Axure ( ) Adobe Edge Reflow

    ( ) Invision ( ) Webflow ( ) Froont ( ) Blocs UI ( ) Macaw ( ) others: Antetype, UXPin, HotGloo, Brix, Adobe Muse axure.com creative.adobe.com/products/reflow invision.com webflow.com froont.com blocsapp.com macaw.co
  19. FRAMEWORK TOOLS FRAMEWORK TOOLS GitHub Bootstrap ( ) Zurb Foundation

    ( ) Yahoo Pure CSS ( ) Skeleton ( ) Gumby ( ) Base ( ) Roll Your Own getbootstrap.com foundation.zurb.com purecss.io getskeleton.com gumbyframework.com matthewhartman.github.io/base/
  20. USER TESTING USER TESTING YOU MEAN WE HAVE TO TALK

    TO SOMEONE? YOU MEAN WE HAVE TO TALK TO SOMEONE? ...SORTA. ...SORTA.
  21. HOSTING YOUR MOCKS HOSTING YOUR MOCKS Github Pages - Native

    to Repo Cloud Cannon ( ) - Dropbox Divshot ( ) - sweet static site hosting cloudcannon.com divshot.com
  22. USER TESTING USER TESTING Client group In-house group Friends and

    Family The Mom/Dad test
  23. REMOTE (RANDOM) USER TESTING REMOTE (RANDOM) USER TESTING Mechanical Turk

    UserTesting ( ) UserZoom ( ) HotJar ( ) - in beta usertesting.com userzoom.com hotjar.com
  24. DON'T GET DISCOURAGED DON'T GET DISCOURAGED WHEN THE DRAWING BOARD

    CALLS. WHEN THE DRAWING BOARD CALLS.
  25. WHAT DOES WELLFIRE CONSIDER IN UX? WHAT DOES WELLFIRE CONSIDER

    IN UX? The standard perceptions: utility, ease of use, efficiency information organization emotional connection contextual content performance accessibility even security
  26. PERFORMANCE PERFORMANCE PLAN FOR ENGAGEMENT. PLAN FOR ENGAGEMENT.

  27. PLAN FOR LAUNCH PLAN FOR LAUNCH BUT KNOW THAT'S A

    FIRST STEP BUT KNOW THAT'S A FIRST STEP
  28. WHY WELLFIRE CONSIDERS IT UX 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
  29. ANALYTICS / METRICS ANALYTICS / METRICS Google Analytics ( )

    Mixpanel ( ) Kissmetrics ( ) Crazy Egg ( ) - Heatmaps Optimizely ( ) - A/B testing HotJar ( ) - all of it google.com/analytics mixpanel.com kissmetrics.com crazyegg.com optimizely.com hotjar.com
  30. PERFORMANCE ISSUES 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
  31. SOMETIMES YOU CAN'T DO ANYTHING ABOUT IT. SOMETIMES YOU CAN'T

    DO ANYTHING ABOUT IT. PREPARE UX/UI FALLBACKS AND LIGHTEN THE LOAD. PREPARE UX/UI FALLBACKS AND LIGHTEN THE LOAD.
  32. PERFORMANCE APPS PERFORMANCE APPS New Relic APM ( ) -

    monitoring Pingdom ( ) - monitoring Raygun ( ) - monitoring Sentry ( ) - exception tracking Your Hosting Platform: Heroku ( ) Rackspace Divshot newrelic.com pingdom.com raygun.io getsentry.com addons.heroku.com
  33. PERFORMANCE HOMEBREW PERFORMANCE HOMEBREW BrowserStack - Browser / Mobile Testing

    Modern.ie - Localized Internet Explorer Testing Virtualization (Oracle VirtualBox) crazy oddball browser sandboxes (television) Gulp/Grunt JS Testing frameworks Safari Dev Tools / Adobe Edge Inspect Localized Mobile testing Chrome Dev Tools checkgzipcompression.com
  34. 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
  35. ACCESSIBILITY ACCESSIBILITY YEAH, IT'S OFTEN THE LAST THING ON THE

    LIST YEAH, IT'S OFTEN THE LAST THING ON THE LIST
  36. WHY WELLFIRE CONSIDERS IT UX 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!
  37. ACCESSIBILITY TOOLS ACCESSIBILITY TOOLS Use your own eyes and hands

    Remember best practices Screen readers (free add-ons availabile through Chrome) Color contrast checker ( ) Color blindness ( ) ( ) What does your site cost? ( ) http://bit.ly/18lnjpX colororacle.org colorfilter.wickline.org whatdoesmysitecost.com
  38. SECURITY SECURITY YEAH, IT MATTERS. YEAH, IT MATTERS.

  39. WHY WELLFIRE CONSIDERS IT UX 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
  40. A LOT OF THIS IS BUILT IN 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
  41. WHEN IN DOUBT, OFFLOAD IT 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
  42. BUT PAY ATTENTION! BUT PAY ATTENTION! NEWS ORGS / TECH

    BLOGS ARE A SAVING GRACE NEWS ORGS / TECH BLOGS ARE A SAVING GRACE (Heartbleed virus, any one?)
  43. ITERATE ITERATE LAUNCH ISN'T THE END OF THE LINE, NO

    SIR. LAUNCH ISN'T THE END OF THE LINE, NO SIR.
  44. TAKE-AWAYS TAKE-AWAYS TL; DNLHYPMVY? TL; DNLHYPMVY? TOO LONG; DID NOT

    LISTEN, HAVE YOU PLAYED MONUMENT VALLEY YET? TOO LONG; DID NOT LISTEN, HAVE YOU PLAYED MONUMENT VALLEY YET?
  45. USE YOUR HUMAN-NESS TO YOUR ADVANTAGE. USE YOUR HUMAN-NESS TO

    YOUR ADVANTAGE. THE WORLD IS VAST, LISTEN IN. THE WORLD IS VAST, LISTEN IN. .... AND HAS BUILT TOOLS (SOME FREE) FOR YOU TO USE. .... AND HAS BUILT TOOLS (SOME FREE) FOR YOU TO USE. BUILD SOMETHING... FIND FRIENDS TO TEST IT... ITERATE. BUILD SOMETHING... FIND FRIENDS TO TEST IT... ITERATE. PERFORMANCE. ACCESSIBILITY. SECURITY. UX TOO. PERFORMANCE. ACCESSIBILITY. SECURITY. UX TOO. ITERATE. AND ITERATE SOME MORE. ITERATE. AND ITERATE SOME MORE.
  46. THANKS! THANKS! Cobey Potter, Wellfire Interactive | @ | @

    cobey@wellfire.co courcelan wellfire.co wellfire