1.
User Experience
Bootcamp
Catherine Robson

2.
Developers spend 50% of their
time fixing avoidable issues
http://socialmediatoday.com/bitpakkit/267487/roi-ux

3.
Reclaim your time!
User-centric Design
!
Usability Testing
!
Visual Design
Focus on

4.
Catherine Robson
Product Manager, User Experience
JBoss by Red Hat
crobson@redhat.com
@catwrobson

5.
Know your users

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.
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.
Write down the user’s needs

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.
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.
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.
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.
Mock up your design

14.
Map your content and tasks
Application maps courtesy of Hagan Rivers

15.
Determine the navigation structure

16.
Consider interaction patterns
Drag and drop Rich Lists

17.
Draw sketches

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.
Critique, Test, and Iterate

20.
Critique

21.
Critique

22.
Critique

23.
Critique

24.
Prototype

25.
Test & iterate

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.
Use visual design basics

28.
Use proximity
www.colourlovers.com

29.
Understand similarity

30.
Try continuity & closure

31.
Grid layouts help align content
Imagescourtesyof960.gs

32.
Apply good visual hierarchy
1
2
3 4

33.
Visual hierarchy guides users

34.
Strive for simplicity

35.
Use san-serif fonts for paragraphs
Sans Serif
Serif
Serifs highlighted

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.
Pick a color palette & use wisely
Kickstarter Box

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.
Get the slides for reference
https://www.dropbox.com/s/cx8o6fm99tq5e28/
crobson_t_0245_user_experience_bootcamp.pdf

40.
Extra Slides

41.
Fidelity - low fidelity

42.
Fidelity - medium fidelity

43.
Fidelity - high fidelity

44.
UX in the development process

45.
UX in the agile process

46.
UX process example