Usability and Agile DevelopmentBy: Binu Thayamkery (binu.thayamkery@gmail.com)

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

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

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

Now that we defined usability…

• Can you tell me 3 public websites that you think ranks best in terms of usability?

5

Top 10 Web Brands 2010

6

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

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

8

Results Results ResultsResults

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

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

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

What is the color of this text?

• Did you know? 8% of male population and 0.5% of female population is color blind

12

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

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

Enter Agile (Scrum, etc.) Development

15

Agile Manifesto – RefresherWe 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

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

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

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

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

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

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

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

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

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

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 development25

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

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

Why does Usability Test works?

• Because watching users using our system will always makes us a better designer

28

USABILITY GUIDELINES

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

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

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

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

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

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

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

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

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

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

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

Questions?

41

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