Web design , accessibility, and usability tips in Blackboard
Web Design , Accessibility, & Usability TipsAdam 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?
Usabilityis the ease of use and learnability of a human-made object.
The object of use can be:
Software application (like Blackboard!)
Anythinga 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?
WhyUsability is Important
If a website is difficult to use, people leave.
If a web site homepagefails 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 reducethe number of emails you get with student questions
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.
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
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?
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
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 beforethey 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 knowbefore clicking!
PART 2: ORGANIZATION
Make content appear and operate in predictable ways
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
Notebook and pen
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
4.Date of next meeting
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.
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.phpVShttps://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 blinkingall 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 altattribute 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 whatyou might relay over the phone.
Read more at http://accessibility.psu.edu/images
Alt Text in Blackboard
Blackboard 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.
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 PostThe 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 AssignmentsThe 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 onceon 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 contentarea 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 notset 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
Adam VoytonInstructional Technology Project Specialist
email@example.com ____________________________________ Online Learning & Educational Technology Department
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