User Experience Bootcamp

Catherine Robson

Three ways to focus on the user for every project

User-centric Design !

Usability Testing !

Visual Design

Know your users

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?

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

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

keep track of who I have talked to recently.

As a <user type>, I want <feature> so <reason>. !

!

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

When complex, expand with use cases

Use Cases

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 !

Mock up your design

Map your content and tasks

Application maps courtesy of Hagan Rivers

Draw sketches

Determine the navigation structure

Consider interaction patternsDrag and drop Rich Lists

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 !

Critique, Test, and Iterate

CritiqueVersion 1

Version 2

Version 3

Final

Prototype

Test & Iterate

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/ !

!

Utilize visual design basics

Utilize proximity

www.colourlovers.com

Understand similarity

Try continuity & closure

Apply good visual hierarchy

1

2

3 4

Visual hierarchy guides users

Utilize grid layouts to align contentIm

ages

cou

rtes

y of

960

.gs

Strive for simplicity

Use san-serif fonts for paragraphs

Sans Serif

Serif

Serifs highlighted

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.

Pick a color palette & use wiselyKickstarter Box

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/ !

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