Web Design ,

Accessibility, &

Usability Tips

Adam Voyton

Usability is important in your

Blackboard Course Bad usability causes the people using your

Blackboard course to get confused or annoyed.

This SlideShare will cover usability tips in

Blackboard:

Organizing content to appear and operate in

predictable ways

Common usability mistakes

Ways to make your job simpler by providing

answers to commonly asked questions

What is Usability?

Usability is the ease of use and learnability

of a human-made object.

The object of use can be:

Software application (like Blackboard!)

Website

Book

Anything a human interacts with

Good Usability has 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 reestablish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Source: http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Why Usability is Important

If a website is difficult to use, people

leave.

If a web site homepage fails to clearly

state what a company offers and what

users can do on the site, people leave.

If users get lost on a website, they leave.

If a website's information is hard to read

or doesn't answer users' key questions,

they leave.

Usability is Especially Important for

Teaching Students In An Online Environment

Online learning required self-motivation

Online learning lacks face-to-face

feedback

More responsibility for student

Usability is Important in your

Blackboard Course Too!

It helps guide your students to the goal of

completing their course work

It can help reduce the number of emails

you get with student questions

Bad Usability

Bad usability causes the people using the

site to get confused or annoyed.

Can you think of a time you were on a

web site and it frustrated you?

◦ Did you leave the site?

◦ Have you ever left a web site because it

required you to register just to see the

content?

Another Reason it’s Important:

Attention Span

People tend to read less these days.

We quickly scan pages. We read headings,

look for anything that looks clickable, and

ignore long passages of text.

Because of social media, people tend to

connect better with images.

Students check Facebook Every 15

Minutes while Studying

By the time the 15 minutes were up, they

had spent only about 65 percent of the

observation period actually doing their

schoolwork.

Source:

http://www.slate.com/articles/health_and_science/science/2013/05/multitasking_whi

le_studying_divided_attention_and_technological_gadgets.html

Which of these is more User

Friendly? WHY?

• Blackboard does not offer the ability to search for

content in a course

• iPhones are designed so effectively that most

children can figure out how to use them

• Netflix uses visuals and headings to guide users

USABILITY TEST

Blackboard Question:

If you were a student and you did not

know how to post to a discussion board,

where would you go to find technical

support?

WilmU Web Site

How would you get information about

becoming HOT trained?

USABILITY TIPS IN

BLACKBOARD

PART 1: HYPERLINKS

Use text that makes sense when

read out of context.

For example, avoid "click here”

People’s eyes tend to scan web pages,

reading only the headings or links

Consistency in color

Web browsers have standard colors that are used for links:◦ blue for links

◦ violet for visited links

◦ Always make sure your links are underlined. Don’t underline things that are not a link, people may think it’s clickable.

When you use other colors, you run the risk of confusing your students

Source: http://webdesign.about.com/od/usability/tp/aatpwebusable.htm

I broke the rule here, but it’s good to know the

rules first and THEN decide if you want to

break them for aesthetic or branding purposes

Put the File Type on a Hyperlink

If you’re not linking to a web page, then

put in parentheses the file type that

you’re linking to.

This lets a user know what’s going to

happen before they click on it.

If they’re on their phone and they can’t open a PDF

file, they’ll know not to waste their time.

Or if they’re in a library and don’t want a noisy

video to start playing, they’ll know before clicking!

Put the File Type on a hyperlink

EXAMPLE:

PART 2:

ORGANIZATION

Make content appear and operate in predictable ways

Use lists

Bullet points when it’s notimportant that the items in the list are in any particular order

For example, for the school trip on week, children need to bring:

Waterproof clothing in case of rain

Packed lunch

Notebook and pen

Walking shoes

Numbered points show order, like step by step directions (sequence matters)

Here is the agenda for the next PTA meeting:

1. Minutes from last meeting

2. Fund-raising initiatives

3. Other concerns

4. Date of next meeting

Use Headings Headings give structure to a web page.

• Headings increase a page’s usability by making the

it more “scannable.”

• Nobody reads pages from top to bottom. Instead,

one’s eyes flow down the page looking for

relevant keywords to explore more closely.

• By breaking a page up with headings, a user can

scan the page faster and more effectively.

Read more at http://mrwweb.com/use-html-headings-for-accessibility/

Use Specific and Concise Naming of

Course Menu Items (Avoid Vagueness)

Use Consistent Structure

The fonts and sizes

for the headings

and paragraphs in

each article are the

same.

In the online

course templates,

each week has the

same structure:

Good Example of Consistency:

Wikipedia

Wikipedia’s articles cover a massive range

of topics, but they contain many common

organizational elements

Cleanliness and Simplicity: Wikipedia’s

layout tries to ensure that users are not

overwhelmed with information.

PART 3:

WHAT NOT TO DO

Common mistakes

Don’t use to many folders

• A good rule of thumb is no more than 3

folders.

• Too many folders ‘hide’ the content making

it hard for students to find the information

they are looking for.

Don’t use blinking images

Have you ever been distracted by an ad on a website? Example: http://citationmachine.net/index2.php

VShttps://web.archive.org/web/20131005135514/http://citationmachine.net/index2.php

Animated .gif-images or Flash-movies make it extremely hard to focus on reading if such images are blinking all around the content.

Don’t have videos or audio that

auto-plays The site becomes unusable for people

who have to listen to their screen-reader

software and can not continue browsing

the page until the clip has finished

If someone is not expecting it, they may

be surprised by the sudden noise –

especially if they have their speakers

turned up really loud

Sources: http://www.punkchip.com/2009/04/autoplay-is-bad-for-all-users/

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-

audio.html

Don’t forget to use the alt attribute

to describe the function of each

image

About ALT Tags

ALT Tags are invisible descriptions of images

which are read aloud to blind users on a screen

reader.

A good rule of thumb to consider is to include

what you might relay over the phone.

Read more at http://accessibility.psu.edu/images

Alt Text in BlackboardBlackboard calls an Alt text “Image Description

* Notice that the field is not required

Adding ALT text allows authors to include images, but still provide the content in

an alternative text based format. If no ALT tags are provided, then a screen reader

would only be able to say "IMAGE" or perhaps provide a file name.

Provide a Text transcript for video

or audio files you create

Visually impaired users may need additional

information about images in a video.

Some people learn differently and prefer to

read the content instead of listen to it.

Some people may not have the software

necessary to get the file to play (for instance, if

the file requires flash or a Java plug-in).

Don’t Copy and Paste text from

Microsoft Word into an

Announcement

When the announcement is emailed, it

may come through garbled with extra

code from Microsoft

It’s best to type the text inside the

Blackboard web editor or paste the text

in notepad to strip the formatting, then

paste it in Blackboard.

Otherwise…the message gets lost.

Your message may appear below all

of this UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>

UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>

UnhideWhenUsed="false" Name="Dark List Accent 1"/>

UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>

UnhideWhenUsed="false" Name="Colorful List Accent 1"/>

UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>

UnhideWhenUsed="false" Name="Light Shading Accent 2"/>

UnhideWhenUsed="false" Name="Light List Accent 2"/>

UnhideWhenUsed="false" Name="Light Grid Accent 2"/>

UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>

UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>

UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>

UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>

UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>

/* Style Definitions */table.MsoNormalTable{mso-style-name:"Table Normal";mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-priority:99;mso-style-parent:"";mso-padding-alt:0in 5.4pt 0in 5.4pt;mso-para-margin:0in;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Tahoma","sans-serif";}

Don’t Let the Picture tell the

message in an announcement

Images don’t load in the email message. It

only appears in Blackboard.

Here’s why – the image doesn’t

load!

Instead, include the relevant

information, then attach the image,

or put the image below the text

PART 4:

WHAT TO DO Ways to make things simpler Feel free to copy and paste the text on the slides that follow into your Blackboard Course

Set Links to Open in New Tab

Technically this is a no-no because it “breaks the Back Button”, but

Blackboard has security prompts that may not allow links to open up in the

same browser window.

Remind students to check

comments on assignments

How do you know that I left a comment with a score?

Go to My Progress (the student view of the Grade Center)

Look for a comment link.◦ If you see a comment link

then click on it

◦ If you do not see a comment link then no comments were left.

Please review all comments

Pair Discussion Board with Tutorials

Clicking the link above takes you to the Discussion Board Forums. An easy way to return to this webpage in Blackboard is to use the Back button on your browser (the back arrow in the upper left corner of your browser) or the backspace key on your keyboard.

For help creating a Discussion Board thread, view this video: Creating a Discussion Board Post The video will open in a new browser window or tab. If you already have multiple browser windows open, the link will open in a window behind your Blackboard window.

Pair Assignments with Tutorials

Submit your assignment by clicking on the

Assignment title link above. If you need

help uploading your assignment, view this

video: Submitting Assignments The video

will open in a separate browser window

or tab.

Tips for Students During a Bb

Test Students should not double click when starting a test. The first click takes the students into the test. A double click causes the

system to read the first click as an attempt to take the test and the second click as a second attempt and therefore will block

access. Students should click once on the link and wait until the test is fully loaded. Students should not click more than

once on submit, next or save. Click once and wait for the system to process. Clicking more than once can cause test errors.

If an instructor sets up ‘no backtracking’, students who click outside the test are during an exam, to go back into a content

area of the course will be kicked out of the exam before they finish the test.

Do not click the back arrow, forward arrow, or hit the refresh button on the browser. This may cause you to lose your test.

Students can scroll up and down the page or navigate the test by clicking on the arrow keys within the test.

Firefox may be a more reliable browser with tests

“When a student is taking a quiz and the quiz is not set to allow multiple attempts, the student must be careful! Anything

which occurs that causes the quiz window to no longer be the active window, even for a second will kick the student out of

the test. So, students should be wary of things like clicking around in other areas of the course, or sitting idle until their

browser times out or screen saver comes on, or even getting a pop-up email notifier. Automated functions of that nature

should be turned off during testing time.

Using a scroll wheel may change answers, always click on an empty portion of the test before scrolling. After selecting an

answer, click on the page before scroll navigating.

Can students print out a quiz? If a quiz “Allows Multiple Attempts” then a quiz can be returned to after printing. If multiple

attempts is not an option, the students who prints the quiz and leaves Blackboard without actually answering any questions,

the system will consider the quiz taken.

Some students who take tests on a wireless access may be kicked out of the test. Some wireless connections are timed, and

the user can be dropped from the network. Students can always use campus computers with a wired connection if problems

at home persist.

Also the student’s Internet Service Provider may have a time out feature.

A student may experience a “time out” - if the server detects inactivity after 20 minutes, it may kick the student out of the

test… Students should save their exam every 10 minutes or so or even every question, as this will prevent a loss of answers.

Tips for Instructors Deploying

a Bb Test Wait until all students have taken the test, then turn on

more ‘Feedback to User’ options (correct answer feedback,

this might cut down on sharing answers online.)

i.e. only check Score, then after the test, the instructor

would return to select more options. The student will see

the test results in whatever the current Test Feedback

setting is marked.

More tips at:

http://blackboardtips.blogspot.com/2007/01/tips-for-

deploying-test-in-blackboard.html

Guideline for Assignments

Make instructions as specific as possible

to clarify expectations on assignments

Include examples of an “A” paper so

students can use it as a benchmark

QUESTIONS??

THANKS!

Adam VoytonInstructional Technology Project Specialist

Wilmington University

adam.c.voyton@wilmu.edu ____________________________________Online Learning & Educational Technology Department

Wilmu.edu/Edtech/Training/

References & Additional Readings

Usability 101: Introduction to Usability: http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Usability, User Experience and the Internet in the 21st Century: http://www.slideshare.net/maxsoe/usability-user-experience-and-the-internet-in-the-21st-century

Web Usability: Making Your Sites More Awesomer: http://www.slideshare.net/ncsumarit/web-usability-making-your-sites-more-awesomer