Embed Size (px)
DESCRIPTION
Tips & tricks *for developers, by a developer* on how to work with end users and the business, making software development a bit easier. This was delivered at Link State 2014 at Case Western Reserve University in Cleveland, OH on September 20, 2014.
Citation preview
The Case for the UX Developer
Sarah DutkiewiczCleveland Tech Consulting
What is UX?
All About the Users
The Breadth of UX
According to ISO, UX encompasses the following – before, during, and after use:
• Emotions
• Beliefs
• Preferences
• Perceptions
• Physical responses
• Psychological responses
Convenience + Design – Cost =
User Experience
Why should developers care?Without users, our software has no reason to exist.
More happy users means better chance of getting them to recommend our software to others.
While designers can make things look visually appealing, at the end of the day, if the functionality is awful, people will get frustrated and stop using a product.
User-Centric Development
All About the Users
Taken from What comes after usability? (Kathy Sierra)
Questions to Think AboutWho are our users? What types of users will we have?
What are our users expecting to get out of this software?
What does this need to do in order to meet the users’ expectations?
How can we design this so that it’s easy for the user to accomplish their goals?
Personas
What are personas?Fictional characters based on real users
Composites of research
Usually presented in 1-2 page documents
Personas
José
Business Owner
Irene
Older Resident
Sarah
Younger Resident
JoséBusiness Owner
What are the city’s demographics? Are they appropriate for me to bring my business there?
What incentives do they have for businesses?
Are there good networking or community opportunities for promoting my business?
IreneOlder Resident
Are there any senior programs for me to participate in?
What doctors and hospitals are there?
Are there parks or places for me to walk?
SarahYounger Resident
Where can I learn about the local school system?
Are there any summer recreation programs for my kids to participate in when they’re older?
How safe is the city for my kids to play in?
What’s the diversity like of the residents in the city?
Are there parks for my kids to play in? Will they be safe there?
How These Help DevelopersAssigning personas to screens helps us to make sure the functionality is designed appropriately.
Sometimes, developers become empathetic with the personas, putting themselves in the personas’ positions. This helps them to realize flows easier.
Features and Requirements Gathering
FeaturesDuring brainstorming, break a project into features.
Use the features to help write the code and determine tests.
Write the features in English with gherkin.
Consistency
Works on multiple platforms
Gherkin Syntax
Given-When-Then CadenceConsistent wording to describe a scenario
Given this known situation
When the user does something
Then something happens
How These Help DevelopersConsistency – we love this!
English words map to programming language tests.
ToolsBehat (PHP)
SpecFlow (.NET)
Cucumber (Ruby, gherkin syntax)
Cucumber-JVM (Java, including Android)
Wireframes
Wireframes.orgBuilt in templates
Wireframes, flow charts, etc.
Runs right in the browser
Balsamiq
Pencil
How These Help DevelopersAllows rapid sketching of visuals to help communicate ideas better
Allows clients to sketch out their vision in times when the developer cannot picture it
ToolsBalsamiq Mockups
Pencil
Wireframes.org
User Flows, Mind Maps, and Site Maps
User Flows
Mind Maps
Site Maps
Site Maps
How These Help DevelopersPlan a website site map to gauge the scope of the website.
Useful for seeing how to organize features for releases.
Helps to see how the users plan on incorporating the software into their routines.
ToolsMind Maps
Xmind
Freemind
Flows
Dia
Site Maps
Balsamiq
Heatmaps & Analytics
Heatmaps
Google AnalyticsTrack information about visitors including:
Time on site
Pages visited
Location
Traffic source
Browser usage
FeedburnerUsed for tracking RSS feed subscriptions
Great for tracking people who read blogs in a feed reader
How These Help DevelopersIdentifies how the site is getting used
Identifies types of environments the site is being visited
Identifies who is reading in a feed reader
ToolsHeat Maps
Free Website Heatmap Generator
ClickTale
CrazyEgg
ClickHeat
Analytics
Google Analytics
KissMetrics
Feedburner
Additional Tools and Resources
Additional Tools and Methods in UXField Research
Interviewing
User Tests
Usability
Accessibility
Copywriting
Graphics Design
UI Design
Additional ResourcesAll About UX
UX for the masses - 25 great free UX tools
MSDN - Windows UX Design Principles
OS X Human Interface Guidelines
Mobile UX and Mobile UI guidelines: The 2014 Collection
UX is not UI
The Secret to Designing an Intuitive UX
