DIY UX Toolbox

UX Tools for non-UX Developers

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