0
User Experience
Bootcamp
Catherine Robson
Developers spend 50% of their
time fixing avoidable issues
http://socialmediatoday.com/bitpakkit/267487/roi-ux
Reclaim your time!
User-centric Design
!
Usability Testing
!
Visual Design
Focus on
Catherine Robson
Product Manager, User Experience
JBoss by Red Hat
crobson@redhat.com
@catwrobson
Know your users
Be able to answer the following
What do my users do daily?
!
When will they use it?
!
What else might they do at the same ...
Josh The Mobile Application Developer
Primary consumer
of the UI
Goals, Needs
Skills, behavior and environment
I want the ...
Write down the user’s needs
Start with user stories
As a human resources recruiter, I need to record
recruit’s information and a contact date so I can...
Understand their task flows
Call with recruit
starts
Start new notes
for discussion
Save notes w/	

timestamp
Add notes af...
Expand with use cases
User Intention System Responsibility
Start an entry about a recruit Build basic entry with time and ...
User requirements gathering resources
Agile user stories introduction: https://www.scrumalliance.org/community/articles/20...
Mock up your design
Map your content and tasks
Application maps courtesy of Hagan Rivers
Determine the navigation structure
Consider interaction patterns
Drag and drop Rich Lists
Draw sketches
Design references
!
Wireframing tools:
- pen and paper or a whiteboard!
- http://balsamiq.com/
- http://www.hotgloo.com/
-...
Critique, Test, and Iterate
Critique
Critique
Critique
Critique
Prototype
Test & iterate
Testing References
!
Prototyping tools:
- Click-through on a slideshow
- www.balsamiq.com & other wireframe to prototype t...
Use visual design basics
Use proximity
www.colourlovers.com
Understand similarity
Try continuity & closure
Grid layouts help align content
Imagescourtesyof960.gs
Apply good visual hierarchy
1
2
3 4
Visual hierarchy guides users
Strive for simplicity
Use san-serif fonts for paragraphs
Sans Serif
Serif
Serifs highlighted
Pick fonts that are easy to read
Awholeparagraphwritteninafontthatisdifficulttoread. ThisisBirchStdregular. Aliquamlectuso...
Pick a color palette & use wisely
Kickstarter Box
Visual design references
!
Fonts:
- https://www.google.com/fonts
- http://www.fontsquirrel.com/
- http://hellohappy.org/be...
Get the slides for reference
https://www.dropbox.com/s/cx8o6fm99tq5e28/
crobson_t_0245_user_experience_bootcamp.pdf
Extra Slides
Fidelity - low fidelity
Fidelity - medium fidelity
Fidelity - high fidelity
UX in the development process
UX in the agile process
UX process example
User Experience Bootcamp for Developers
Upcoming SlideShare
Loading in...5
×

User Experience Bootcamp for Developers

785

Published on

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.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
785
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "User Experience Bootcamp for Developers"

  1. 1. User Experience Bootcamp Catherine Robson
  2. 2. Developers spend 50% of their time fixing avoidable issues http://socialmediatoday.com/bitpakkit/267487/roi-ux
  3. 3. Reclaim your time! User-centric Design ! Usability Testing ! Visual Design Focus on
  4. 4. Catherine Robson Product Manager, User Experience JBoss by Red Hat crobson@redhat.com @catwrobson
  5. 5. Know your users
  6. 6. Be able to answer the following What do my users do daily? ! When will they use it? ! What else might they do at the same time? ! What are their main goals or tasks?
  7. 7. Josh The Mobile Application Developer Primary consumer of 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 Build example users
  8. 8. Write down the user’s needs
  9. 9. 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>. ! !
  10. 10. 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
  11. 11. Expand with use cases User Intention System Responsibility Start an entry about a recruit Build basic entry with time and date information Provide likely recruits that this might be for Set the user on the notes field Type notes about phone call Add links to notes where referring to existing info Complete call and notes Alert the user of any missing field entries Save the notes to the recruits records Update the recruit contact record
  12. 12. User requirements gathering resources Agile 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 !
  13. 13. Mock up your design
  14. 14. Map your content and tasks Application maps courtesy of Hagan Rivers
  15. 15. Determine the navigation structure
  16. 16. Consider interaction patterns Drag and drop Rich Lists
  17. 17. Draw sketches
  18. 18. 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 !
  19. 19. Critique, Test, and Iterate
  20. 20. Critique
  21. 21. Critique
  22. 22. Critique
  23. 23. Critique
  24. 24. Prototype
  25. 25. Test & iterate
  26. 26. 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/ - “Rocket surgery made easy” by Steve Krug ! !
  27. 27. Use visual design basics
  28. 28. Use proximity www.colourlovers.com
  29. 29. Understand similarity
  30. 30. Try continuity & closure
  31. 31. Grid layouts help align content Imagescourtesyof960.gs
  32. 32. Apply good visual hierarchy 1 2 3 4
  33. 33. Visual hierarchy guides users
  34. 34. Strive for simplicity
  35. 35. Use san-serif fonts for paragraphs Sans Serif Serif Serifs highlighted
  36. 36. Pick fonts that are easy to read Awholeparagraphwritteninafontthatisdifficulttoread. ThisisBirchStdregular. Aliquamlectusorci,adipiscinget,sodalesac,feugiatnon,lacus.Utdictum velitnecest.Quisqueposuere,purussitametmalesuadablandit,sapiensapienauctorarcu,sedpulvinarfelismisollicitudintortor.Maecenasvolutpat,nislet dignissimpharetra,urnalectusultricesest,velpretiumpedeturpisidvelit.Aliquamsagittismagnainfelisegestasrutrum.Proinwisilibero,vestibulumeget, pulvinarnec,suscipitut,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.
  37. 37. Pick a color palette & use wisely Kickstarter Box
  38. 38. 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/ !
  39. 39. Get the slides for reference https://www.dropbox.com/s/cx8o6fm99tq5e28/ crobson_t_0245_user_experience_bootcamp.pdf
  40. 40. Extra Slides
  41. 41. Fidelity - low fidelity
  42. 42. Fidelity - medium fidelity
  43. 43. Fidelity - high fidelity
  44. 44. UX in the development process
  45. 45. UX in the agile process
  46. 46. UX process example
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×