Web design , accessibility, and usability tips in Blackboard
-
Upload
wilmington-university -
Category
Education
-
view
8.731 -
download
2
Transcript of Web design , accessibility, and usability tips in Blackboard
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
[email protected] ____________________________________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