© Blackboard, Inc. All rights reserved.

Usability: From Idea to Reality

Zahra SafavianSenior Product AnalystBlackboard Inc.

July 19th 9am

2

Ideas

» The basics of usability and accessibility» Capitalizing on Blackboard® tag libraries to

improve the usability of your Building Block» A usable software development life cycle» User testing with limited time and budget» A real-life example: putting it all together

3

Usability: What and Why?

“Everyone involved with technology should keep that Florida ballot in mind when creating the interface between human and machine. If perfectly normal people can screw that one up, how will they deal with your new product?”

-Richard L. Brandt, Upside

4

Usability: What and Why?

» What is usability?» International Standards Organization (ISO 9241-

11): the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments

» The usable definition: Designing for ease of use

5

Usability – What and Why?

» Why do you care?» Helps adapt users to the technology» Improves users perception of overall quality» Differentiates your product from competitors» Requires less support

» Bottom line: People will use it; you spend less time and money

6

Elements of Good Design

“You know you’ve achieved

perfection in design, not

when you have nothing

more to add, but when

you have nothing more

to take away.”

- Antoine de Saint-Exupery

7

Elements of Good Design

» Know your users and design to meet their specific goals

» Build an efficient architecture » Build obvious controls» Put readability first» Design with purpose» Know your technology limitations» Be accessible

8

Elements of Good Design

» Accessibility: universal design» U.S. Rehabilitation Act, Section 508 requires

Federal agencies to make their electronic and information technology accessible to people with disabilities

» Also applies to state agencies, federal and state vendors, and many others.

9

Elements of Good Design

» Accessibility checklist:» Provide text equivalents for all non-text

elements: ALT & LONGDESC tags, captions and transcripts for audio content

» Do not rely on color to convey information» All pages should be readable with styles turned

off» Give each frame a useful title

10

Elements of Good Design

» Above all: Stick to convention

11

Blackboard Tag Libraries

12

Using Blackboard Tag Libraries

» Advantages:» Small learning curve for Blackboard users» Cross-platform, cross-browser, and

support Section 508» Bb style changes filter down to your application» We’ve done much of the design work for you

13

Using Blackboard Tag Libraries

» Navigation bar (breadcrumb)» Key features:

» Helps prevent dead ends» Makes it easy for users to navigate your application

» Proper Usage: Each item in the navigation bar matches the header of the page to which it maps.

The last item in the breadcrumb tells a user where they are.

The last item in the breadcrumb tells a user where they are.

The breadcrumb links ensure that the user can navigate back to any point of the process.

The breadcrumb links ensure that the user can navigate back to any point of the process.

14

Using Blackboard Tag Libraries

» Data Collection Pages:» Key Features

» Organizes forms into chunks of related information» Easy to read grid and layout

» Proper Usage:» One left-justified label and form field per line» Make step titles informative and clear» Create logical groups of data collection elements» Always include instructions» Always indicate if task if required

15

Using Blackboard Tag Libraries

» Data Collection Pages (cont’d)

Step titles organize the page into clearly defined chunks

Step titles organize the page into clearly defined chunks

Use a navigation bar and a page header to establish hierarchy

The Submit step allows users to perform an action or back out.

The Submit step allows users to perform an action or back out.

Each form field is clearly labeledEach form field is clearly labeled

16

Using Blackboard Tag Libraries

» List Pages» Key feature: Eases navigation of long lists» Proper Usage:

» Item-specific actions: Use an inline action» Page or multiple item actions: Use an action bar button» Use paging for long lists to minimize scrolling and

download time» Use sorting whenever possible to help users manage

long lists of information» Limit number of columns as much as possible» Make column headers clear and concise

17

Using Blackboard Tag Libraries» List Pages (cont’d) Inline buttons are

used to support item-specific actions.

Inline buttons are used to support item-specific actions.

Action bar buttons are used to support page-level actions.

Action bar buttons are used to support page-level actions.

Use paging with long lists to improve legibility and performance.

Use paging with long lists to improve legibility and performance.

Alternating background colors clearly delineate each itemAlternating background colors clearly delineate each item

18

Usable Software Development Life Cycle

19

Usable Software Development Life Cycle

» Identify the problem

< Test< Test

< Test

» Seek the solution

» Plan the implementation

» Build the application

» Launch your product

20

Usable Software Development Life Cycle

» Things you can test:» Rough sketches» Screenshots» Prototypes» Early versions» “Completed” application

21

Usable Software Development Life Cycle

» Testing Guidelines:» A few users is better than none» Face-to-face tests are best» The objective is to learn not prove» Don’t give hints» Be patient

» The basics: show, ask, observe, write and repeat

22

Building Block Case Study:Copyright Clearance Center

23

Case Study: Background

» Copyright Clearance Center (CCC) is the world’s largest provider of copyright licensing and compliance services for the reuse of text materials

» Founded in 1978 at the suggestion of Congress

» A not-for-profit intermediary between rightsholders and copyrighted content users

24

Case Study: Background

» Support both print and electronic formats for:» Interlibrary Loan (ILL) / Document Delivery» Library Reserves / Electronic Reserves » Paper and Electronic Coursepacks » Classroom Handouts» Course Management System and Intranet postings

» Provide copyright permissions to over 1000 colleges and universities across the U.S.

» CCC received several customer requests to integrate their pay-per-use permission services within Blackboard

25

Case Study: Building the Building Block

» User Input» Informal sessions with customers» Focus group piggybacking

» Initial meeting with Blackboard» Project analysis

» Resources» Project timing» Technical expertise

» Established the Copyright Building Block team» Joined Blackboard Developers Network

26

Case Study: Building the Building Block

» Kick-off meeting (CCC and Tratum Technologies)» User requirements » Process flows and integration points

» Copyright Building Block architecture» Screen design (reviewed by Blackboard)» Detailed system design » Building Block Development Advisor Group

» Development (3-4 weeks)» Test plan development» Help and Information pages development

27

Case Study: Building the Building Block

» User acceptance testing» Internal CCC testing» Blackboard customer beta test

» Mid-August» Interested participants please contact:

Tim Bowentbowen@copyright.com 978-646-2592

» General availability: Mid-September

28

Case Study: “Selling” the Building Block

» Internal and external launch activities» Building Blocks Catalog» Participate in the regional Bb User Groups» Blackboard Users Conference 2005

» Planning for next release » Collect feedback» Analyze requests and put into action

29

Case Study: Positive Results» Data Collection

page with clearly marked required items

» Form fields are well-labeled

» Navigation bar gives users their current location

» The date picker tag allows users to easily select a date.

30

Case Study: Positive Results» Multiple lists are

used to organize groups of data

» Inline action buttons are used for item-level actions

» Paging and navigation links are used to ease viewing and processing large amounts of data

31

Case Study: Positive Results

» Help and Information pages use familiar module interface

» Information provided is valuable and well-organized

32

In Closing

» Resources Available:» Blackboard Resources:

» Blackboard Developers site: http://www.blackboard.com/dev

» Building Blocks Development Advisor Group: http://www.blackboard.com/dev/subscribe.htm

» Accessibility Resources: » Accessibility Checklist:

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

» Section 508: http://www.section508.gov» Web Accessibility Initiative: http://www.w3.org/WAI

33

In Closing

» Usability Resources:» Health & Human Services Usability site: http://

www.usability.gov» Jakob Nielsen’s website: http://www.useit.com» Human Factors International: http://

www.humanfactors.com» Usability News: http://www.usabilitynews.com

» Follow up Contact(s):Zahra Safavian zsafavian@blackboard.com