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.

1. 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

2. INTRODUCTION
2
TRS-­‐80
-­‐
Wikipedia,
the
free
encyclopedia,
en.wikipedia.org
(Accessed
May
2,
2014)
The
first
computer
I
ever
used.

3. 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.

4. 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

5. 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

6. 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

7. 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

8.
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)

9. “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).

10.
“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)

11. 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

12. 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.

13. 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

14. 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).

15. 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

16. 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

17. HANDY
PEDAGOGICAL
TOOLS
FOR
OPTIMIZING
USABILITY
1. Course
Mapping
-­‐ A
tool
for
planning
your
course,
media,
materials
-­‐ A
learning
guide
for
students
-­‐ Template
17

18. 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

19. 3.
Unit
Overview
-­‐
Orients
students
to
unit
-­‐ Topics
-­‐ Outcomes
-­‐ Readings
and
ac]vi]es
-­‐ Focus
19

20. 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

21. 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

22. 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.

23. 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

24.
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. 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).

26.
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. 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).

28.
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

29. 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

30. 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).

31. 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).

32. 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).

33. 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)

34. 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

35. 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 a w a t ,
“ H o w
t o
I m p r o v e
W e 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

36. 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

37. 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

38. This
presenta%on
has
been
created
by
Robin
L
Pocer
Robin.Pocer@senecacollege.ca
Tw:
@newbuscom
Registered
under
a
Crea%ve
Commons
license:
38