Web Design & Usability

1 of 32

Overview• Housekeeping• Information architecture• Pervasive Usability• Web design and usability standards

2 of 32

Housekeeping• RR2 postponed until 10/27• Assignment 2 postponed until 11/10• Assignment 2 YouTube postponed until 11/17• Readings this week• Technology Integration of IMPACT V in North Carolina.• Web design and usability

• Activity this week• Use Wordpress as a social networking hub to Twitter and

Facebook.

3 of 32

Assignment 2 Overview• Interview someone in the field about emerging technologies in

your area of interest• An IT person, library director, experienced practitioner• Technology Foundation• Where things are headed?

4 of 32

Assignment 2 YouTube Video• Following the same assignment outline• In PowerPoint or other video editing software• Record a video introduction and conclusion to your video• Create a PowerPoint presentation• Record audio• Save entire presentation as a video file (.wav) on a Windows

machine• Post to YouTube and insert link in assignment form

5 of 32

Designing Digital Spaces• User Centered Design• The practice of creating engaging, efficient user experiences

(Garrett, 2011) • “an approach for employing usability. It is a structured product

development methodology that involves users throughout all stages of Web site development, in order to create a Web site that meets users' needs. This approach considers an organization's business objectives and the user's needs, limitations, and preferences”

6 of 32

UCD

7 of 32

Human Centered Design (HCD)• According to the World Wide Web Consortium (W3C), UCD

can also be considered human-centered design (HCD). • The International Organization for Standardization defines HCD in

its standard ISO 13407 (1999) as, ‘…an approach to interactive system development that focuses specifically on making systems usable. It is a multi-disciplinary activity.

8 of 32

Usability• The International Organization for Standardization formally

defines usability as the ‘extent to which the product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use’.• Effectiveness is the ‘percentage of goals achieved, percentage of

users successfully completing tasks and average accuracy of completed tasks.’

• Efficiency is the ‘time to complete a task, tasks completed per unit time and monetary cost of performing the task.’

• Satisfaction is a ‘rating scale for satisfaction, frequency of discretionary use and frequency of complaints.’

9 of 32

• Morville & Rosenfeld (2007) posit four primary definitions of information

architecture (IA):

1. Structural design of information.

2. The act of organizing, labeling, and ensuring appropriate search and navigation

systems exist for intranets (for internal use only) and Web sites (public and

internal use).

3. The art and science of taking into account users’ IB and designing highly usable

systems to meet them.

4. An emerging discipline which applies these design principles to digital

information spaces.

What is information architecture?

10 of 32

• As stated earlier the distinction between digital and non-digital

environments are relatively trivial• The structural design of information and the application of information behavior

(IB) and information architecture (IA) as an art and a science is relatively ubiquitous.

What is information architecture? (2)

11 of 32

• As an educational psychologist understanding the relationship between:• Information Learning Human performance• Was both intriguing and part of the discipline

• Applying this to the digital world was even more captivating• Helped redesign FSU’s College of Information’s Web site and

information architecture (www.ci.fsu.edu) over a two year span involving all stakeholders.

How I became interested in IA

12 of 32

Branded and with CI’s vision statement clearly displayed.

B

Search feature and site map clearly visible.

Five major organizational categories – rigorously usability tested.

Flash based “advertiseme

nt” that refreshes every 20

seconds (my former

students in the picture :o)

Quick links with representative images of the department

Diversity was important

News and announcements “at-a-glance”

Alumni fundraising is always a priority :o)

Research is a priority for faculty and administration.

Department contact information

Standard sub links such as a privacy policy, tech support, etc.

13

Information Goals and Usability

“If people can’t or won’t use a feature, it might as well not exist” (Nielsen & Loranger, 2006, pg. xvi)

14 of 32

Information Goals and Usability (2)

• Usability is a ubiquitous term that really applies to both technical and non-technical environments alike• Think about it: If you or your users/patrons have a

goal, do you/they want to accomplish it as effectively and efficiently as possible?• Think of it in another way: How easy or hard do you

want to make it? • User satisfaction then becomes simple to

operationalize: • How easy and effective do you want your own and your

users’ experience to be? The higher these two factors, the higher the satisfaction and usability and more likely you or the user will come back for more….

15 of 32

• Now let’s multiply this by every user that comes to use your service or Web site, how satisfied do they leave, and how many come back for more?• You see now that usability is critical for the success and

survival of any organization, service, or Web site.• As mentioned earlier, the utility or specifically meeting

the needs of a user or patron takes precedence over “ease-of-use”, which gives us a solid place for us to start.• We need to identify, as clearly as possible, what the

overarching goals of a site, a service, and organization are and link them directly to how they are directly meeting the needs of users/patrons.

Information Goals and Usability (3)

16 of 32

• Now let’s multiply this by every user that comes to use your service or Web site, how satisfied do they leave, and how many come back for more?• You see now that usability is critical for the success and

survival of any organization, service, or Web site.• As mentioned earlier, the utility or specifically meeting

the needs of a user or patron takes precedence over “ease-of-use”, which gives us a solid place for us to start.• We need to identify, as clearly as possible, what the

overarching goals of a site, a service, and organization are and link them directly to how they are directly meeting the needs of users/patrons.

Information Goals and Usability (3)

17 of 32

• The paramount problem of course is that user goals will be different across the board:

• Individuals• Gender• Race• Age• Interests, etc.

• Determining the primary goals of a service or Web site becomes a dialogue and compromise between you and your users.

Information Goals and Usability (4)

18 of 32

• You should talk with users before you design and finalize your goals• You should certainly test with your potential users to see if they are

able to effectively and efficiently “use” your service or Web site.

Information Goals and Usability (5)

19 of 32

• Nielsen notes on a HOME PAGE you have less than 30 seconds to convince a user why they should spend any additional time on your site and should answer the following four questions:

1. What site am I on?2. What benefits can I gain here?3. Who or what organization put this together?4. What are my choices and how can I get to my most relevant goals as

quickly as possible?

Prioritizing Web Usability

20 of 32

• For an INTERIOR PAGE, off of your homepage, you have approximately 45 seconds to meet their needs or convince them you can meet their needs before they leave.

• The concept of “Information Foraging” is critical here – information that has maximum benefit with minimal effort.• An information scent then is telling a user how likely what they want is

behind a link.

Prioritizing Web Usability

21 of 32

• By now having a conceptual framework and some operational definitions under our belt:• We can begin discussing how to design and test for

overall usability of practically anything.

• Both Nielsen and Jordan also have usability heuristics or general standards to abide by.• These standards serve as rules of thumb to

consider when creating or trying to evaluate the overall usability of something.• Let’s take a look….

Okay, sounds good but what do I do with this?

22 of 32

1. ConsistencyDesigning a product so that similar tasks are done in similar ways.

2. CompatibilityDesigning a product so that its method of operation is compatible with users’ expectations

based on their knowledge of other types of products and the “outside world.”

3. Consideration of User ResourcesDesigning a product so that its method of operation takes into account the demands

placed on the users’ resources during interaction.

4. User ControlDesigning a product so that the extent to which the user has control over the actions

taken by the product and the state that the product is in is maximized.

5. Visual ClarityDesigning a product so that information displayed can be read quickly and easily without

causing confusion.

Top ten usability heuristics or rules of thumb (Nielsen, 2001; Jordan, 2001)

23 of 32

6. Prioritization of functionality and informationDesigning a product so that the most important functionality and information are easily

accessible to the user.7. Explicitness

Designing a product so that cues are given as to its functionality and method of operation.8. Match between system and real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order

9. Recognition rather than recallMake objects, actions, and options visible. The user should not have to remember information

from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

10. Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of

information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Top ten usability heuristics or rules of thumb (Nielsen, 2001; Jordan, 2001)

24 of 32

These 10 usability heuristics serve as a checklist of “norms” one should consider.

Operationally there are a few that take precedence:◦ #6 - Prioritization of functionality = utility

Create a feature checklist of information or features that are in priority order that you think users will be looking for

◦ #2 – Compatibility = ease-of-use This speaks to user expectations based on the “norms” of the

field or environment, existing schemata, and cybernetic decision making SOPs

How close it meets user expectations helps define overall ease-of-use.

Application of these heuristics

25 of 32

• Nielsen (2000) has developed a theory stating: • That a set of five

representative users will find 85% of all usability problems

• A second test with an additional five will find the remaining 13% of the problems

• A third test will find the remaining 2%

Nielsen’s Five User Test Theory

26 of 32

Empirical (with users)• Interviews, surveys, and focus groups help establish user needs and

features• User testing • Users trying to actually use your product or service in completing major,

identified tasks• Usability metrics

• Time – how long does it take• Error rate – how many errors • Satisfaction – rate and tell us why

• Think-aloud-protocals (TAPs) – users “think aloud” while completing tasks• Natural observation or contextual inquiry – watch what people do and what they use

• User debriefing – ask users about their overall feelings after testing or viewing the product (again interviews, focus groups, and surveys).

Standard methods for evaluating for usability

27 of 32

Non-Empirical (without users)• Search analytics• Cognitive Walkthroughs• Heuristic evaluation – “experts” evaluate using standard design

heuristics

Standard methods for evaluating for usability (2)

28 of 32

• Simply identify a user group and what you assume to be their major feature checklist

• For example, prospective students to our program might be looking for in rank order:

1. Program information2. Course information3. Faculty and their teaching and research 4. Application information5. Tuition and Financial aid

User feature checklists and information architecture

29 of 32

• How do we know this is a good list?1. Ask current or prospective students

Interviews, focus groups, surveys

2. Look at user analytics (will do this next slide)3. Look at other sites

User feature checklists and information architecture (2)

30 of 32

• A look at our LIS analytics reveals:

User feature checklists and information architecture (3)

Courses, faculty, and students are most popular.

31 of 32

Tying it Altogether• Identify goals of your web space• Identify users of your web space• Prioritize most common information needs (all info. is not

created equal) by creating a feature checklist• Have users as design partners• Test frequently• Use analytics to make decisions

32 of 32