user experience bootcamp for developers
DESCRIPTION
Given at DevNation 2014, this presentation provides a high level overview for developers about why user experience practices should be a part of every project they undertake. Through a focus on user-centric design practices, usability testing, and visual design - developers can provide a first-class application that meets and exceeds their user's needs the first time, rather than undergoing serious re-writes of applications due to misunderstandings between project stakeholders and users.TRANSCRIPT
![Page 1: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/1.jpg)
![Page 2: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/2.jpg)
User Experience Bootcamp
Catherine Robson
![Page 3: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/3.jpg)
Three ways to focus on the user for every project
User-centric Design !
Usability Testing !
Visual Design
![Page 4: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/4.jpg)
Know your users
![Page 5: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/5.jpg)
Be able to answer the following
What do my users do on a daily basis? !
How will the application I am making fit into their daily work? !
What else might they be doing while they use this application? !
What are their main goals or tasks when using this application?
![Page 6: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/6.jpg)
Build example usersJosh The Mobile Application Developer
Primary consumerof the UI
Goals, Needs
Skills, behavior and environment
I want the back-end to be “automagic”. No code, just works.
・ Age 29
・ Front-end Developer
・ 4 years of experience
・ Self-taught
・ Works at a startup with a small team
・ Wants to send up data to a particular URL “in the cloud” and it gets magically saved and secured
・Wants an easy registration process and guidance to get started with his application
・ Wants to use the web console and client-side SDKs to interact with Liveak services (anything that can speak to the APIs)
・ Wants to upload simple server-side scripts (javascript) to run on specific events, via UI
・ Needs to share a set of data with another developer working in the same application
・ Needs to have mobile access for cases like the app is misbehaving in production and he is away from his computer
・ Needs to become familiar with terms like blob and realm
・ Web and UI skills, not a Java EE developer
・ Most work during the day in his IDE for client-side development
・ Occasional interruptions, but able to finish his tasks
・ Early adopter, he is always testing new solutions
Frequency of use・ Will use Liveoak heavily in the beginning to accomplish
his tasks (configure an application, send up data etc.)
・ After the application is configured, will just come back to verify something specific (e.g. if the data is in the cloud)
Competition・ Does not like unattractive solutions (e.g. Feed Henry) nor
solutions with not much functionality (e.g. Strongloop)
・ Thinks that Kinvey, StackMob and Parse offers a good balance of functionality, usability and design
・ Thinks that Apigee and Firebase are good for data
![Page 7: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/7.jpg)
Write down the user’s needs
![Page 8: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/8.jpg)
Start with user stories
As a human resources recruiter, I need to record recruit’s information and a contact date so I can
keep track of who I have talked to recently.
As a <user type>, I want <feature> so <reason>. !
!
![Page 9: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/9.jpg)
Understand their task flows
Call with recruit starts
Start new notes for discussion
Save notes w/ timestamp
Add notes after call
Main flow
Alternative flow
![Page 10: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/10.jpg)
When complex, expand with use cases
Use Cases
![Page 11: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/11.jpg)
User requirements gathering resourcesAgile user stories introduction: https://www.scrumalliance.org/community/articles/2013/september/agile-user-stories !
Task Flow tools: - http://www.gliffy.com/ !
Use cases - regular: http://alistair.cockburn.us/Use+cases Use cases - essential: http://www.agilemodeling.com/artifacts/essentialUseCase.htm !
![Page 12: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/12.jpg)
Mock up your design
![Page 13: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/13.jpg)
Map your content and tasks
Application maps courtesy of Hagan Rivers
![Page 14: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/14.jpg)
Draw sketches
![Page 15: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/15.jpg)
Determine the navigation structure
![Page 16: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/16.jpg)
Consider interaction patternsDrag and drop Rich Lists
![Page 17: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/17.jpg)
Design references!
Wireframing tools: - pen and paper or a whiteboard! - http://balsamiq.com/ - http://www.hotgloo.com/ - http://www.uxpin.com/ - http://www.mockflow.com/ - there are many other options out there - just google wireframing! !
UI Pattern Libraries list: http://developer.yahoo.com/ypatterns/about/libraries.html !
![Page 18: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/18.jpg)
Critique, Test, and Iterate
![Page 19: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/19.jpg)
CritiqueVersion 1
![Page 20: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/20.jpg)
Version 2
![Page 21: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/21.jpg)
Version 3
![Page 22: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/22.jpg)
Final
![Page 23: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/23.jpg)
Prototype
![Page 24: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/24.jpg)
Test & Iterate
![Page 25: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/25.jpg)
Testing References!
Prototyping tools: - Click-through on a slideshow - www.balsamiq.com & other wireframe to prototype tools - HTML/CSS (with Twitter Bootstrap to make prototypes faster) - http://getbootstrap.com/ !
Guerilla usability techniques: - http://www.uxbooth.com/articles/the-art-of-guerilla-usability-testing/ - Public website? Try Loop11 - http://www.loop11.com/ !
!
![Page 26: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/26.jpg)
Utilize visual design basics
![Page 28: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/28.jpg)
Understand similarity
![Page 29: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/29.jpg)
Try continuity & closure
![Page 30: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/30.jpg)
Apply good visual hierarchy
1
2
3 4
![Page 31: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/31.jpg)
Visual hierarchy guides users
![Page 32: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/32.jpg)
Utilize grid layouts to align contentIm
ages
cou
rtes
y of
960
.gs
![Page 33: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/33.jpg)
Strive for simplicity
![Page 34: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/34.jpg)
Use san-serif fonts for paragraphs
Sans Serif
Serif
Serifs highlighted
![Page 35: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/35.jpg)
Pick fonts that are easy to readA whole paragraph written in a font that is difficult to read. This is Birch Std regular. Aliquam lectus orci, adipiscing et, sodales ac, feugiat non, lacus. Ut dictum velit nec est. Quisque posuere, purus sit amet malesuada blandit, sapien sapien auctor arcu, sed pulvinar felis mi sollicitudin tortor. Maecenas volutpat, nisl et dignissim pharetra, urna lectus ultrices est, vel pretium pede turpis id velit. Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi.
A whole paragraph written in a font that is easy to read. This is Open Sans, Light. Aliquam lectus orci, adipiscing et, sodales ac, feugiat non, lacus. Ut dictum velit nec est. Quisque posuere, purus sit amet malesuada blandit, sapien sapien auctor arcu, sed pulvinar felis mi sollicitudin tortor. Maecenas volutpat, nisl et dignissim pharetra, urna lectus ultrices est, vel pretium pede turpis id velit. Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi.
![Page 36: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/36.jpg)
Pick a color palette & use wiselyKickstarter Box
![Page 37: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/37.jpg)
Visual design references!
Fonts: - https://www.google.com/fonts - http://www.fontsquirrel.com/ - http://hellohappy.org/beautiful-web-type/ !
Colors: - http://www.colourlovers.com/ - http://www.colorcombos.com/ - https://kuler.adobe.com/ !
!
!
!
Visual Design/HTML&CSS Kits: - http://pixelkit.com/ - https://wrapbootstrap.com/ - http://www.bootstrapthemeroller.com/twitter-bootstrap-themeroller.html - https://bootsnipp.com/ !
!
Icons: - http://fortawesome.github.io/Font-Awesome/ !
![Page 38: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/38.jpg)
Get the slides for reference
https://www.dropbox.com/s/cx8o6fm99tq5e28/crobson_t_0245_user_experience_bootcamp.pdf
![Page 39: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/39.jpg)
Extra Slides
![Page 40: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/40.jpg)
Fidelity - low fidelity
![Page 41: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/41.jpg)
Fidelity - medium fidelity
![Page 42: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/42.jpg)
Fidelity - high fidelity
![Page 43: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/43.jpg)
UX in the development process
![Page 44: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/44.jpg)
UX in the agile process
![Page 45: User Experience Bootcamp for Developers](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c7522c4a7959912a8b458c/html5/thumbnails/45.jpg)
UX process example