Embed Size (px)
DESCRIPTION
Usability and accessibility guidelines are helpful in designing online courses that allow learners to focus on the content and tasks rather than on navigation and reading issues.
Citation preview
Crea%ng Engaging and Accessible Online Courses using Wordpress.com Presenta%on delivered at the Connect 2014 Conference on Technology and Learning, Niagara Falls ON.
Robin L Po)er School of English and Liberal Studies Seneca College
INTRODUCTION
2 TRS-‐80 -‐ Wikipedia, the free encyclopedia, en.wikipedia.org (Accessed May 2, 2014)
The first computer I ever used.
3
MicrosoP Sweden, Apple Computer with Excel 1.0 for Macintosh Screenshot 1985, h)ps://www.flickr.com/photos/microsoPsweden/5395285812/, (Accessed May 2, 2014).
The first computer I ever owned.
THEN AND NOW
4 Steve Jobs image from: h)p://cyberculturenewbie.wordpress.com/ used from www.soul-‐sides.com (Accessed May 2, 2014).
Text-‐based compu%ng Visual informa%on experience
THE DIGITAL DIVIDE FOR MANY OF US
5
Jukes, I, & Dosaj, A. (2003, February). The differences between digital na]ve learners and digital immigrant teachers. The InfoSavvy Group. (Accessed February 20, 2014) from h)p://edorigami.wikispaces.com/Understanding+Digital+Children+-‐+Ian+Jukes
CONSIDERATIONS FOR BRIDGING THE DIGITAL DIVIDE
In “Rewri]ng the Syllabus: Examining New Hybrid and Online Pedagogies,” Jesse Stommel suggests: “With digital pedagogy and online educa]on, our challenge is not to merely replace (or offer subs]tutes for) face-‐to-‐face instruc]on, but to find new and innova]ve ways to engage students in the prac]ce of learning. . . So, hybrid pedagogy does not just describe an easy mixing of on-‐ground and online learning, but is about bringing the sorts of learning that happen in a physical place and the sorts of learning that happen in a virtual place into a more engaged and dynamic conversa]on.”
6
DESIGN YOUR SITE SO YOUR STUDENTS WANT TO STAY AND COME BACK Consider the experience of these kids: Goats balancing on flexible steel ribbon What is their experience of “the thing”? Max Mur, Chèvres en équilibre -‐ goats balancing on a flexible steel ribbon,
h)p://youtu.be/58-‐ atNakMWw (Accessed February 20, 2014).
7
WHAT MAKES FOR A GOOD WEBSITE?
“The most important part of a perfectly designed website is connec]ng the user with the informa]on they came to find. If your design is easy to navigate and captures the interest of the user, you have likely made good design decisions.” Douglas Hughmanick of ANML, a web and content design firm in San Jose, California
8
Peter Vukovic, Experts answer what makes Websites great?, h)p://99designs.com/designer-‐blog/2013/05/01/experts-‐answer-‐what-‐makes-‐websites-‐great/ May 1, 2013. (Accessed November 25, 2013); Photo from About Roads & Kingdoms, 2014, h)p://roadsandkingdoms.com/about/, (Accessed February 21, 2014)
“A website design needs to be clean and simple so it’s easy for the user to quickly find what they want. . . It just needs to be done in a tasteful, unclu)ered manner — use whitespace, good typography and be subtle with rounded corners and drop-‐shadows. . .— long, responsive websites are the new trend.”
Pat Johnson, award winning (10 AAF awards) web designer
9
Peter Vukovic, Experts answer what makes Websites great?, h)p://99designs.com/designer-‐blog/2013/05/01/experts-‐answer-‐what-‐makes-‐websites-‐great/ May 1, 2013. (Accessed November 25, 2013); Photo from Thumbtack.com, h)p://www.thumbtack.com/in/indianapolis/graphic-‐designers/award-‐winning-‐web-‐graphic-‐design (Accessed February 21, 2014).
“Carefully review the words on the websites you design. Are they helping or hur]ng your clients? Like good design, good content can clearly tell visitors how they’ll benefit from a product or service, provide guidance, and make it easy for them to take ac]on. Quality content keeps website visitors – and your clients – happy, and coming back for more.” Rick Sloboda, Web copywriter
10
Rick Sloboda, Good Web content examples and what makes them work." Web Design Depot June 7, 2011. h)p://www.webdesignerdepot.com/2011/06/good-‐web-‐content-‐examples-‐and-‐what-‐makes-‐them-‐work/ (Accessed November 25, 2013); Photo from Canada 1, h)p://www.canadaone.com/bio/rick_sloboda.html (Accessed February 21, 2014)
DESIGNING FOR ONLINE WITH YOUR AUDIENCE IN MIND
1. A look at a Wordpress.com Course (as an example) 2. User Experience 3. Usability 101-‐-‐for Online Course Design
a) Course mapping b) Portal Guide to Off-‐Site Course c) Unit overview
4. Accessibility and Readability a) Managing Cogni]ve Load b) AODA—Communica]on and Informa]on c) Page Design
5. Wordpress Course Recap
11
WORDPRESS.COM: AN OVERVIEW
Wordpress is a blogging plauorm that started in 2003 with “a single bit of code,” which evolved into the open source blogging/website development site we know today. Dis]nguish between:
-‐ wordpress.com: work with templates -‐ wordpress.org: download the soPware script
12
wordpress-‐logo1.bmp, www.evenfromhere.org. Crea]ve Commons A)ribu]on-‐ShareAlike 3.0 Unported License.
FEATURES OF A WORDPRESS.COM COURSE
Go to Wordpress.com • Theme • Naviga]on
• Site map • Scaffolding content
• Blogging • Easy upda]ng • Mul]media • Polling • Privacy
13
ELEMENTS OF USER EXPERIENCE: NEILSON & NORMAN
14 Neospot, Usability vs User Experience, n.d. h)p://www.neospot.se/usability-‐vs-‐user-‐experience/ (Accessed November 27, 2013).
WHAT IS USABILITY?
Jakob Neilson and Don Norman (nnGroup) define Usability as follows:
1. Learnability: how easily a user “can accomplish a task the first ]me they encounter the design.” 2. Efficiency: how well they can perform a task with informa]on provided within the design 3. Memorability: how well they can become adept at using the design aPer not using is for a while
15
4. Errors: the number and severity of errors in the design, along with ease of recovery 5. Sa]sfac]on: the degree of pleasure or sa]sfac]on in using the design
16
HANDY PEDAGOGICAL TOOLS FOR OPTIMIZING USABILITY
1. Course Mapping -‐ A tool for planning your course, media, materials -‐ A learning guide for students -‐ Template
17
2. Learning Portal (LMS) Guide to Off-‐Site Online Course a) General course intro b) Addendum c) Learning guide (course map) d) Student guide e) Link to etext site f) Link to Wordpress.com g) Learn.Wordpress.com (tutorials)
18
3. Unit Overview -‐ Orients students to unit
-‐ Topics -‐ Outcomes -‐ Readings and ac]vi]es
-‐ Focus
19
BASIC PRINCIPLES OF ACCESSIBILITY
1. Keep your reader’s needs, abili]es, and experience in mind 2. Familiarize yourself with the Accessibility Ontario Disability Act
(AODA) 3. Use mul]media 4. Think about devices 5. Be consistent and predictable 6. Write concisely and clearly
20
MANAGE THE COGNITIVE LOAD
Avoid overloading the learning units with too many shiPs between: • content • visuals • styles • dynamics
Plan the combina]on of media elements with care
21
AODA REQUIREMENTS
22
Image from Panorama, Abili]y in Disability, h)p://www.]gweb.org/youth-‐media/panorama/ar]cle.html?ContentID=6688 (Accessed February 23, 2014)
The Accessibility for Ontarians with Disabili]es Act (AODA) provides guidelines for informa]on and communica]on that are based on the World Wide Web Consor]um Accessibility Guidelines–highlights are linked here.
BASIC ACCESSIBILITY PRINCIPLES FOR ONLINE COURSES
A. Create Unclucered Pages 1. Use sans serif fonts e.g., Calibri, Verdana, Arial
2. Place important informa]on, headings, visual aids at
the leP margin for leP-‐to-‐right reading languages (Neilson, 2011) -‐same rule applies to right-‐to-‐leP reading languages F-‐Shaped Design Rule (Neilson, 2006) • F-‐shaped reading pa)ern
23
3. Use short paragraphs and lis]ng (chunk informa]on) -‐ paragraphs—10 lines max
4. Allow for white space
-‐ rests the eye -‐ makes informa]on easy to find -‐ improves reten]on
24
25
Jon Phillips, “5 Things for Improving Readability on Your Website,” 2011, h)p://spyrestudios.com/5-‐]ps-‐for-‐improving-‐readability-‐on-‐your-‐website/, (Accessed February 24, 2014).
B. Organize Informa%on Consistently and Predictably 1. Use descrip]ve headings and sub-‐headings
consistently -‐ Verb tenses -‐ Placement -‐ Font style
2. Organize informa]on in predictable ways and place it in similar loca]ons on each page
-‐ reveal informa]on progressively -‐ use parent, child, grandchild pages logically
26
27
Divyat Rawat, “How to Improve Website Usability by Improving Content,” 2014, h)p://www.paulolyslager.com/how-‐to-‐improve-‐website-‐usability-‐by-‐improving-‐content/, (Accessed February 24, 2014).
C. Write Clearly Using Straight-‐forward Language 1. Write concisely; brevity is key in all web wri]ng
-‐ Applies to all languages despite differences in nuances/length (Neilson, 2011)
2. Use the ac]ve voice in 20-‐25-‐word length sentences.
-‐subject + ac]ve verb + object 3. Use the “you a{tude”:
-‐ necessary informa]on first; you-‐oriented 28
D. Support Complex Informa%on with Visual Aids 1. An]cipate when the learner would benefit from
mul]media support and provide it as needed a) Logical placement b) Compa]ble with content: clarifica]on, illustra]on,
explana]on, etc. c) Easy to find
2. Accompany audio and video informa]on with a transcript or sub]tles (AODA requirement)
-‐ Many Youtube videos have closed cap]ons
29
REMEMBER
“Quality Design is an Indicator of Credibility”
30
Dimitri Fedeyev, 10 Useful Usability Findings and Guidelines, 2009, h)p://uxdesign.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/ (Accessed February 23, 2014); Alicia David, Payton Glore, The Impact of Design and Aesthe]cs on Usability, Credibility, and Learning in an Online Environment, in Online Journal of Distance Learning Administra]on, Winter 2010, h)p://www.westga.edu/~distance/ojdla/winter134/david_glore134.html (Accessed February 23, 2014). Image from locosol, 2013, h)p://locsolu]ons.biz/about/ (Accessed February 23, 2014).
ENGAGEMENT
31 Karen Robert, Yukon Public Schools, from North Ins]tute of Teaching and Learning, March 4, 2011, h)p://ni.oc.edu/2011/03/what-‐does-‐student-‐engagement-‐mean-‐to-‐you/ (Accessed February 20, 2014).
WHAT IS A RESPONSIVE SITE?
Responsive web design is usually understood in terms of • page structure, • typography, and • coding. We are concerned about web page elements that connect faculty with students—and students with faculty and peers.
32 Kyla Wright, Responsive Website Design: What It Is and How to Use It. January 12, 2011. h)p://coding.smashingmagazine.com/2011/01/12/guidelines-‐for-‐responsive-‐web-‐design/ (Accessed November 26, 2013).
ELEMENTS FOR CREATING A RESPONSIVE WEBSITE
1. Easy to update/modify 2. Blogging-‐-‐Comments 3. Polls 4. Contact form 5. Email feed 6. Media-‐enriched elements (for different learning styles) 7. Seamless design
33
White African, Blogging Tools: IZEAFest Talk. September 13, 2008. h)p://whiteafrican.com/2008/09/13/blogging-‐tools-‐izeafest-‐talk/ (Accessed December 1, 2013).November 26, 2013)
Works Cited and Consulted Alicia David, Payton Glore, The Impact of Design and Aesthe]cs on Usability, Credibility, and Learning in an Online Environment, in Online Journal of Distance Learning Administra]on, Winter 2010, h)p://www.westga.edu/~distance/ojdla/winter134/david_glore134.html (Accessed February 23, 2014). Dimitri Fedeyev, 10 Useful Usability Findings and Guidelines, 2009, h)p://uxdesign.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/ (Accessed February 23, 2014). Douglas Hughmanick Photo, About Roads & Kingdoms, 2014, h)p://roadsandkingdoms.com/about/, Accessed February 21, 2014). Steve Jobs image from: h)p://cyberculturenewbie.wordpress.com/ used from www.soul-‐sides.com (Accessed May 2, 2014). Hanna Lee, Culture Interfaces: The Blackberry Project. n.d. The Royal College of Art. h)p://ied.rca.ac.uk/uncategorized/culture-‐interfaces-‐the-‐blackberry-‐project (Accessed November 26, 2013). Pat Johnson Photo, Thumbtack.com, h)p://www.thumbtack.com/in/indianapolis/graphic-‐designers/award-‐winning-‐web-‐graphic-‐design (Accessed February 21, 2014). Jukes, I, & Dosaj, A. (2003, February). The differences between digital na]ve learners and digital immigrant teachers. The InfoSavvy Group. Retrieved February 23, 2009 from h)p://edorigami.wikispaces.com/ Understanding+Digital+Children+-‐+Ian+Jukes 34
Max Mur, Chèvres en équilibre -‐ goats balancing on a flexible steel ribbon, h)p://youtu.be/58-‐atNakMWw (Accessed February 20, 2014). MicrosoP Sweden, Apple Computer with Excel 1.0 for Macintosh Screenshot 1985, h)ps://www.flickr.com/photos/microsoPsweden/5395285812/, (Accessed May 2, 2014) Neilson, Jakob. F-‐shaped PaEern for Reading Web Content. April 17, 2006. h)p://www.nngroup.com/ar]cles/f-‐shaped-‐pa)ern-‐reading-‐web-‐content/ (Accessed November 14, 2013). Neilson, Jakob. Interna]onal Usability: Big Stuff the Same, Details Differ. June 6, 2011. h)p://www.nngroup.com/ar]cles/interna]onal-‐usability-‐details-‐differ/ (Accessed November 26, 2013). Neospot, Usability vs User Experience, n.d. h)p://www.neospot.se/usability-‐vs-‐user-‐experience/ (Accessed November 27, 2013). Jon Phillips, “5 Things for Improving Readability on Your Website,” 2011, h)p://spyrestudios.com/5-‐]ps-‐for-‐improving-‐readability-‐on-‐your-‐website/, (Accessed February 24, 2014). D i v y a t R aw a t , “ H ow t o Im p r o v e We b s i t e U s a b i l i t y b y I m p r o v i n g C o n t e n t , ” 2 0 1 4 , h)p://www.paulolyslager.com/how-‐to-‐improve-‐website-‐usability-‐by-‐improving-‐content/, (Accessed February 24, 2014).
35
Karen Robert, Yukon Public Schools, “Engagement Word Cloud,” from North Ins]tute of Teaching and Learning, “What does student engagement mean to you?” by Berlin Fang March 4, 2011, h)p://ni.oc.edu/2011/03/what-‐does-‐student-‐engagement-‐mean-‐to-‐you/ (Accessed February 20, 2014). Rick Sloboda, Good Web content examples and what makes them work." Web Design Depot June 7, 2011. h)p://www.webdesignerdepot.com/2011/06/good-‐web-‐content-‐examples-‐and-‐what-‐makes-‐them-‐work/ (Accessed November 25, 2013). Rick Sloboda Photo, Canada 1, h)p://www.canadaone.com/bio/rick_sloboda.html (Accessed February 21, 2014). Tom Springer, Domenico Azzarello, Jeff Melton, Bain Consul]ng, “What it takes to win with customer experience,” July 8, 2011, h)p://www.bain.com/publica]ons/ar]cles/what-‐it-‐takes-‐to-‐win-‐with-‐customer-‐experience.aspx (Accessed February 20, 2014).
36
Jesse Stommel, “Rewri]ng the Syllabus: Examining New Hybrid and Online Pedagogies,” presented at the ASSETT Teaching with Technology Symposium, April 28, 2014, h)ps://docs.google.com/document/d/1jaIbXUXKPujMIrpySEgwyGokOKXV34C2iF4I2M9WjD4/mobilebasic?pli=1 (Accessed May 2, 2014). Peter Vukovic, Experts answer what makes Websites great?, h)p://99designs.com/designer-‐blog/2013/05/01/experts-‐answer-‐what-‐makes-‐websites-‐great/ May 1, 2013. (Accessed November 25, 2013). Wikipedia, TRS-‐80 -‐ Wikipedia, the free encyclopedia, en.wikipedia.org (Accessed May 2, 2014) Website Design Canberra, “Customer Experience Design,” technowand.com.au, (Accessed February 20, 2014).
37
This presenta%on has been created by Robin L Pocer [email protected] Tw: @newbuscom Registered under a Crea%ve Commons license:
38
