The document discusses usability and how it can be effectively incorporated into agile development processes, noting that user experience work should be done early and iteratively through techniques like design studios, prototyping, and usability testing to evolve the user interface alongside development in short iterations. It provides guidelines for usability best practices like optimizing the user experience, effective navigation and page design, screen controls, and testing to ensure the user interface is easy to use.
OpenShift Commons Paris - Choose Your Own Observability Adventure
Usability & Agile Development
1. Usability and Agile Development
By: Binu Thayamkery (binu.thayamkery@gmail.com)
2. Do you agree with this statement?
• “For the End User, the Interface is the System”
– Too many good products hidden behind a bad UI
– UI is one of the most neglected aspects of system
design
– UI should evolve along with the architecture
2
3. Definition
• Usability is defined as…
– It is the ease of use and learnability of a human
made object.
– For web based applications, it is simple as making
sure that the website works well and a person of
average (or lower) ability and experience can use
it.
3
4. Definition – Detailed
• Usability is a quality attribute that assesses how easy
user interfaces are to use.
• Defined by 5 quality components
– Learnability: How easy is it for users to accomplish basic
tasks the first time they encounter the design?
– Efficiency: Once users have learned the design, how
quickly can they perform tasks?
– Memorability: When users return to the design after a
period of not using it, how easily can they re-establish
proficiency?
– Errors: How many errors do users make, how severe are
these errors, how easily they can recover from the errors?
– Satisfaction: How pleasant is to use the design?
4
5. Now that we defined usability…
• Can you tell me 3 public websites that you
think ranks best in terms of usability?
5
7. Benefits of Usability
• Increased productivity (for the user)
• Decreased training and support costs
• Increased enrollment (sales and revenues)
• Reduced development costs and time
• Reduced maintenance costs
• Increased customer satisfaction
7
8. Krug’s First Law of Usability
• “Don’t make me think”
– Or at least make it easy for me…
– Contents of the web page should be self-evident,
self-explanatory and obvious to user
Results Results Results Results
8
9. First Rule of Usability? Don’t Listen to
Users
• To design an easy-to-use interface, pay
attention to what users do, not what they say
– Watch what people do
– Do not believe what people say they do
– Definitely don’t believe what people predict they
may do in the future
– And…cool design is not always the best usable
design
9
10. How do we read web pages?
• We don’t read them, we scan them.
• Eye Tracking helps us to learn this behavior
• F- Shaped gaze pattern !
10
11. Eye Tracking Contd.
• Eye Tracking captures the Foveal vision.
• Red spots denotes the “fixation”
• Peripheral vision elements are usually ignored
• Based on Mind-Eye hypothesis
• Users behavior is always evolving when it
comes to web usage !
11
12. What is the color of this text?
• Did you know? 8% of male
population and 0.5% of female
population is color blind
12
13. Web Accessibility
• “An accessible site is by default a usable one”
• Ensure that everyone including persons with
difficulty in seeing, hearing or making precise
movements can use the site.
• Some Guidelines as specified in Section 508
– Design forms for users using assistive technologies
– Do not use color alone to convey information
– Enable users to skip repetitive links
– Provide text equivalents for non textual elements
– Do not require style sheets
– No screen flickers or distractions.
13
14. Waterfall/Iterative and Usability
• Why it does not work well?
– Predicts too much into future
– Functional Requirements drive the development
– UI is fixed, does not evolve
– More importance given to the “system” not the UI
• It works to an a certain extend when…
– UI design tightly follows requirements gathering and is
coupled with the step where functional requirements
are created.
– Build functional, clickable wireframes for the whole
system
14
15. Enter Agile (Scrum, etc.) Development
Agile Manifesto – Refresher
We are uncovering better ways of developing software by doing it and helping others do it.
Through this work we have come to value:
• Individuals and interactions over processes and tools
• Working software over comprehensive documentation
• Customer collaboration over contract negotiation
• Responding to change over following a plan
That is, while there is value in the items on the right, we value the items on the left more. - Beck
et al,2001
15
16. Agile Development and UX
• Promise
– “Discount Usability Engineering”- Usability techniques are used frequently, throughout the
development process
• Threats
– Agile is a developer centric methodology proposed by developers and mainly addresses
implementation side of the system
– Usability expertise may not be there.
• Solution
– For design and usability to be taken seriously, they must be assigned “story points” on an
equal footing with the coding
– Perform usability activities such as user design studios, user testing.
– Conduct activities like user design studio one step ahead of implementation work. By the time
sprint starts to develop a feature, initial user experience work went through some thinking.
– Create general usability guidelines and have it accessible to all projects to be reused.
16
17. What is the right way to do Usability
work in an Agile Team?
• Quick answer is to do what ever is needed
• UX people are bridges
– embedded with the team but also involved in high level/early
planning
• UX work is early, flexible
– done up-front to storyboard level with good expectation setting that
changes will happen
• Low-fi prototype is the ongoing spec
– owned by UX, agreed by stakeholders
• UX work happens in a parallel track
– pair complex back-end sprints with UX intensive work
• Guerilla style UX validation
– fast, discount methods run frequently and regularly on early code
17
18. UX people are bridges
• Good understanding of developers, business
and end users, speaks language of all three
groups
• A dedicated resource or someone from
development team
• Owns the UX, storyboards, prototypes,
wireframes
18
19. UI work is early, flexible
• Agile says No Big Design Up Front (NBDUF)
– True for low level system design
• Come up with re-usable UI patters early in the
process. Also do the top level prototypes,
wireframes and storyboards
• An early style guide also can be created to
address graphical treatment
19
20. Low fidelity documents as
specification document
• Serves as a tool for communicating user needs
• Story boards to represent interactions
• These are refined as the developers pick up
stories for sprint
20
21. UX work happens in parallel
• Difficult to manage UX work along with the
development sprint
• Work on UX stories one/two sprints ahead of
development
21
22. Contd.
• Assign story points to all UX work
– Some teams keep UX work as research
– If there is dedicated UX professional, then story
points helps to validate, help track and control
amount of work
22
23. Guerilla style UX validation
• RITE (Rapid Iterative Test and Evaluation)
• Decide on how much re-work need to be done
for usability issues
• Reach an agreement on what is acceptable
23
24. Design Studio – Great UX tool
• Agile development is “democratic”, More
generalists than specialists
• Design Studio is an extension of this
democratic nature of Agile UX development
• It is a more inclusive way of involving the
business and development team members in
the design process so that the entire team
feels ownership of the design direction.
24
25. Design Studio – The Process
• All developers ( and other participants) bring sketches
of their ideas on how to solve an interface problem
• Sketches are pinned up and each member describes
their solution
• Each sketch is critiqued by the entire team under the
guidance of UX team member (or the facilitator)
• All the desired and not so desired attributes from each
sketch is noted
• All the participants work together to create a single
design concept taking into account all the good ideas
that were presented
• This design concept is then used to guide development
25
26. Design Studio - Advantages
• Team as a whole is involved in finding solutions and
engaged with other stakeholders in that process
• Critique is an opportunity to help team members learn
design principles
– Best way to do this: One team member offers critique, then
reframe that critique with generally accepted user design
guidelines and design heuristics. Over time these heuristics can
be compiled and pinned along with the designs. Team members
then can use it as vocabulary in their critiques.
• Pool of talents will uncover new design solutions
– Even when the initial designs of someone may be sub optimal,
the concepts that they arise may be perfect to be re-engineered
to the merged UI
26
27. Usability Testing
• Watching people try to use what you’re creating/designing/building (or
something you’ve already created/designed/built), with the intention of
(a) making it easier for people to use or (b) proving that it is easy to use.
• Element of actual use makes it different from interviews, surveys, focus
groups etc.
• It is a qualitative testing, purpose is not to prove anything but to get
insights to improve what we are building
• Basically a facilitator sits with the participant in a room gives him a task to
do also asking him to think aloud while he is at it
• Development team and other stakeholders observe this from another
room using a screen sharing software
• After the tests are finished, observers have a debriefing session to
compare notes to decide what problems to be fixed and how to fix them.
• (We will watch a video of this in action if we have time at the end)
27
28. Why does Usability Test works?
• Because watching users using our system will
always makes us a better designer
28
30. Design Process and Evaluation
• Set clear and concise goals for your site /application/ user story
– set of user requirements, users expectations, usability goals, useful
content
– do customer surveys, interviews, user groups, talk to sales people,
focus groups, etc.
• Involve users in establishing your user requirements
• Consider a range of design choices to address UI issues and patters,
have many people collaborate on it
• Focus on Performance before Preference
– Content, format, interaction, navigation before color, cool factor
• If you are a web site, try to get into Google top 30
• Use "Personas" while doing design process.
– Hypothetical "stand-ins" for actual users. Kind of role play.
30
31. Optimizing User Experience
• Do not display unsolicited windows or graphics
– NO pop ups when user is trying to finish core activity
• Increase Web Site Credibility
– Provide useful set of FAQs
– Website should be arranged in a logical way
– Provide articles with citations and references
– Site should look professionally designed
– Provide an archive of past content (where appropriate)
– Keep it fresh and up to date
– Provide links to outside sources
– and get inbound links from related and credible sites
31
32. Contd.
• Standardize task sequences
– For example, If using date picker, use it same way everywhere.
– User looks for additional information, left or right, place additional
information left/right to main content
• Design for working memory limitations
– Users when navigate from one place to another, they can remember only very
little
• Minimize page download time
– Use YSlow! and follow best practices on web site performance
• Warn of 'Time Outs‘
– Best is to provide a non-intrusive growl style pop up, that allows user to
extend their time.
• Display information in a directly usable format
– Examples are localized date formats, weight and distance measurements, etc.
• -Provide feedback when user must wait
– Long running queries, processing - show some status!
32
33. Contd.
• Develop pages that will print cleanly, provide print
options
– Have print specific CSS for pages
– Provide ability to print sections of page or eliminate
printing them
• Format Information for Reading and Printing
• Inform users of download time
– When downloading an image, document, application
providing approx download time for users connection
improves navigation
• Develop Help in users terminology
– Help should be a click away
33
34. Home Page
• Enable users to access homepage from any other page on
the site
• Show all major options on the homepage
• Create a positive first impression of your site, this is key to
conveying quality of your site
• Make home page distinct from other pages
• Limit Homepage length, Manage widths too (no horizontal
scroll bar )
• Put Announcements changes to the web site, application
maintenance windows, any other announcements on
homepage.
– When complete site is taken down for upgrade, releases and
maintenance, use a static page to make that announcement
34
35. Scrolling, Paging and Page Layout
• Eliminate Horizontal Scrolling
• Use Paging rather than scrolling
• Place important items consistently
• Reduce clutter, but at the same time use
moderate whitespace for enhanced scanning
and searching
• Use fluid layouts
– Design for 1024X768 or higher
35
36. Navigation
• Do not create or direct users into pages that has no
navigational options
– Never disable browser’s back button
• Differentiate and group navigation elements
– Top Navigation, Sub Navigation
• Primary navigation on left side
– Studies shows that it is the best navigation option
• Use descriptive labels on Tabs
– If there is not enough space, then Tab is not the right UI choice
• Provide feedback on users location, i.e., breadcrumbs
• Breadcrumb navigation - do not rely on it
– Studies shows that very few people actually use breadcrumbs!
36
37. Links
• Use meaningful link labels
– “Click here” is counter productive
• Link to related content
• Match link names consistent with destination page title
• Avoid misleading cues to click
– If it looks like a link, it should be a link otherwise it should not look like a link
• Repeat important links
– Its not evil to have important pages linked from multiple places within a busy
page
• Prefer text links over image links
• Provide consistent clickability clues
• Use point and clicking than mouse over – It is more efficient
• Indicate external and internal links
• Provide definition links – style them differently
37
38. Screen based controls (Widgets)
• Distinguish required and optional data entry fields
• Ensure that push buttons label clearly indicate action
• Label data entry fields consistently, cleanly
• Do not make user entry fields case sensitive
• Do not punish user for not entering in right format
• Allow users to see their entered data without scrolling
• Use familiar widgets
• Handle user errors elegantly. Place error messages close the error entry
field
• Use single data entry method – keyboard or mouse, pick one !
• Prioritize buttons and links according to usage frequency
• Ensure that double clicking does not create problems
• Data Entry fields rather than selection from fields, ensure proper tab order
38
39. Tabs Usability
• Alternate views within the same context
• Logically chunks the content
• Typically, users don’t need to
simultaneously see the contents of
different tabs
• Parallel in nature
• Current tab should be highlighted,
unselected ones clearly visible
• Current tab connected to content area
• Labels are short but should describe
contents well
• One row of tabs, placed top of the panel
• Architect for fast response time when
tab is switched
39
40. Usability Testing
• Develop and test prototypes through an iterative design approach
• Solicit test participants’ comments
• Evaluate Websites before and after making changes
• Prioritize tasks
– Use “Usability Magnitude Estimation” measure to decide which usability tasks
should be addressed first
– Participants judge how easy or difficult tasks are before and after tests
• Distinguish between frequency and severity
– Number of users affected by the problem is frequency
– Difficulty encountered by individual user is severity
– Should fix most severe first.
• Use right number of participants
• Use the right prototyping technology
• Recognize the “Evaluator Effect”
40
42. References
• Don't Make me think, A Common Sense Approach to Web Usability, 2nd Edition - By Steve Krug
• UseIT.com, Alert box Article - www.useit.com/alertbox/20010805.html
• Eye Tracking - http://www.usability.gov/articles/newsletter/pubs/032010news.html
• Eye Tracking Web Usability - Jacob Nielsen, Kara Pemice
• Color Blindness and Website Design By Jeanne Liu -
http://usability.gov/articles/newsletter/pubs/022010new.html
• Accessibility - http://www.usability.gov/pdfs/chapter3.pdf
• Usability Guidelines - http://usability.gov/guidelines/index.html
• Agile Usability: Best Practices for User Experience on Agile Development Projects, 2nd edition By
Chris Nodder and Jakob Nielsen
• Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems By
Steve Krug
• Top 10 Web Brands - http://blog.nielsen.com/nielsenwire/online_mobile/facebook-users-average-
7-hrs-a-month-in-january-as-digital-universe-expands/
• Cartoons:
– http://www.dilbert.com/strips/comic/2007-11-16
– http://www.dilbert.com/strips/comic/2002-05-11/
– http://dilbert.com/strips/comic/2003-01-10/
– http://dilbert.com/strips/comic/2009-11-27/
– http://www.erinlynnyoung.com/244/user-testing-fallacies/
42