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.

1. The Case for the UX Developer
Sarah DutkiewiczCleveland Tech Consultingsarah@cletechconsulting.com

2. What is UX?

3. All About the Users

4. The Breadth of UX
According to ISO, UX encompasses the following –before, during, and after use:
•Emotions
•Beliefs
•Preferences
•Perceptions
•Physical responses
•Psychological responses

6. Image taken from Dan Willis’s UX Umbrella talk

7. Convenience + Design –Cost =
User Experience

8. 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.

9. User-Centric Development

10. All About the Users

11. Taken from What comes after usability? (Kathy Sierra)

12. Questions to Think About
Who 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?

13. XKCD 773 –University Website

14. Personas

15. What are personas?
Fictional characters based on real users
Composites of research
Usually presented in 1-2 page documents

16. Personas
José
Business Owner
Irene
Older Resident
Sarah
Younger Resident

17. 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?

18. 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?

19. 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?

20. How These Help Developers
Assigning personas to screens helps us to make sure the functionalityis designed appropriately.
Sometimes, developers become empatheticwith the personas, putting themselves in the personas’ positions. This helps them to realize flows easier.

21. Features and Requirements Gathering

22. Features
During 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

23. Gherkin Syntax

24. Given-When-Then Cadence
Consistent wording to describe a scenario
Giventhis known situation
Whenthe user does something
Thensomething happens

25. How These Help Developers
Consistency –we love this!
English words map to programming language tests.

26. Tools
Behat (PHP)
SpecFlow (.NET)
Cucumber (Ruby, gherkin syntax) Cucumber-JVM (Java, including Android)

27. Wireframes

28. Wireframes.org
Built in templates
Wireframes, flow charts, etc.
Runs right in the browser

29. Balsamiq

30. Pencil

31. How These Help Developers
Allows rapid sketching of visuals to help communicate ideas better
Allows clients to sketch out their vision in times when the developer cannot picture it

32. Tools
Balsamiq Mockups
Pencil
Wireframes.org

33. User Flows, Mind Maps, and Site Maps

34. User Flows

35. Mind Maps

36. Site Maps

37. Site Maps

38. How These Help Developers
Plan 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.

39. Tools
Mind Maps
Xmind
Freemind
Flows
Dia
Site Maps
Balsamiq

40. Heatmaps& Analytics

41. Heatmaps

42. Google Analytics
Track information about visitors including:
Time on site
Pages visited
Location
Traffic source
Browser usage

43. Feedburner
Used for tracking RSS feed subscriptions
Great for tracking people who read blogs in a feed reader

44. How These Help Developers
Identifies how the site is getting used
Identifies types of environments the site is being visited
Identifies who is reading in a feed reader

45. Tools
Heat Maps
Free Website HeatmapGenerator
ClickTale
CrazyEgg
ClickHeat
Analytics
Google Analytics
KissMetrics
Feedburner

46. Additional Tools and Resources

47. Additional Tools and Methods in UX
Field Research
Interviewing
User Tests
Usability
Accessibility
Copywriting
Graphics Design
UI Design

48. Additional Resources
All About UXUX for the masses -25 great free UX toolsMSDN -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