Web design , accessibility, and usability tips in Blackboard
4 likes12,227 views
The document discusses usability tips for Blackboard courses. It defines usability and its five key components: learnability, efficiency, memorability, errors, and satisfaction. Common usability mistakes are outlined such as using too many folders, blinking images, and auto-playing videos. Tips are provided for organizing content with headings, lists, and consistent structure. Specific guidance is offered for hyperlinks, discussions boards, assignments, and testing in Blackboard.
Web design , accessibility, and usability tips in Blackboard
- 1. Web Design , Accessibility, & Usability TipsAdam Voyton
- 2. 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
- 3. 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!) Website Book Anythinga human interacts with
- 4. 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/
- 5. 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.
- 6. 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
- 7. 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
- 8. 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?
- 9. 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.
- 10. 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_while_studying_divided_attention_and_technological_gadgets.html
- 11. 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
- 12. USABILITY TEST
- 13. 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?
- 14. USABILITY TIPS IN BLACKBOARD
- 16. 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
- 17. 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
- 18. 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!
- 19. Put the File Type on a hyperlink EXAMPLE:
- 20. PART 2: ORGANIZATION Make content appear and operate in predictable ways
- 21. 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
- 22. 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/
- 23. Use Specific and Concise Naming of Course Menu Items (Avoid Vagueness)
- 24. 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:
- 25. 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.
- 26. PART 3: WHAT NOT TO DO Common mistakes
- 27. 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.
- 28. 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.
- 29. 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
- 30. 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
- 31. 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.
- 32. 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).
- 33. 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.
- 34. 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:"TableNormal"; 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";}
- 35. Don’t Let the Picture tell the message in an announcement Images don’t load in the email message. It only appears in Blackboard.
- 36. Here’s why –the image doesn’t load!
- 37. Instead, include the relevant information, then attach the image, or put the image below the text
- 38. 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
- 39. 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.
- 40. 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
- 41. 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.
- 42. 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.
- 43. 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.
- 44. 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
- 45. 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
- 46. QUESTIONS?? THANKS! Adam VoytonInstructional Technology Project Specialist Wilmington University adam.c.voyton@wilmu.edu ____________________________________ Online Learning & Educational Technology Department Wilmu.edu/Edtech/Training/
- 47. 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