Better Blackboard Help: Where your users need it, when they want it.

https://matthewdeeprose.github.io/bbh.html
Better Blackboard Help: Where your users need it,
when they want it.
Matthew Deeprose, VLE Manager, University of Southampton

This presentation was:
- recorded in one hit.
- involved much more work that I anticipated.
- finished in a rush.

I made inline, contextual, relevant
help for Blackboard users within
Blackboard, that directed them to
our own support site.
This is the story all about how:

That increased engagement with our
support site during key times by
more than 1000%

0
5000
10000
15000
20000
25000
2018 2019
Week 0 to Week 4
Page views where referral was blackboard.soton*
2018: 955 views
2019: 19,596 views
1952% increase.

And how you can do the same, using
free software.
more than 1000%

So how can I do this myself?
• Have ready:
– JSHack
• If on SaaS your SDM can install for you.
– A text editor, e.g. Notepad ++
– A Blackboard test environment.

And how you can do the same, using
free software.
more than 1000%
And lots of resources I will share
with you!

Supporting website

Agenda
Topic
The background.
How I made “better Blackboard help”.
How you can make it too!
Other benefits.
The impact of “better Blackboard help”.
Possible next steps.

About me
@vleguru

About me
• Managing the Blackboard service at the University of
Southampton since July 2000.
• Was Blackboard MVP now member of “Blackboard Community
Leadership Circle”.
• Previous TLC presentations:
– Upgrade Club (2018).
– Bluffer’s guide to customising the 2016 Blackboard theme.
(2019).
• Presentations at this year’s TLC:
– The Bluffer’s Guide to Blackboard Theme Accessibility.
– Better Blackboard Help.
@vleguru

Where is Southampton?

Where is Southampton?
Top fact: The New Forest (left on map
above) is one of the largest remaining tracts
of unenclosed pasture land, heathland and
forest in Southern England.

In Scope:
• Blackboard Original Experience.
Out of Scope:
• Blackboard Ultra.
• Ultra-base navigation.
What’s in scope?

Some background

Staff and students rely on Blackboard, now more than ever.
Time spent by staff and students waiting for an answer to a support request
is time spent not using the environment efficiently and effectively.
How can we improve the support experience?

Typical support cycle

Use
Blackboard.
Experience
a problem /
uncertainty
?
Look for
help?
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Search engine?
Local support site?
Phone a friend?
Guess?

Use
Blackboard.
Experience
a problem /
uncertainty
?
Look for
help?
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Improve processes to
reduce this time:
• Ticket handling.
• First line fixes.
• Knowledgebase.
• SLAs etc

Use
Blackboard.
Experience
a problem /
uncertainty
?
Look for
help?
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Better approaches…

Use
Blackboard.
Experience
a problem /
uncertainty
?
Find help
and resolve
issue.
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Help users to resolve
their own issues.

Use
Blackboard.
Experience
a problem /
uncertainty
?
Look for
help?
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Even better approach…

Use
Blackboard.
Experience
a problem /
uncertainty
?
Look for
help?
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Even better approach…
Never have problems or
uncertainties etc!
But is that realistic?

Use
Blackboard.
Experience
a problem /
uncertainty
?
Find help
and resolve
issue.
Contact
support.
Wait for
answer.
Get answer.
Continue
using
Blackboard
when
possible.
Help users to resolve
their own issues.
Best case scenario?

Some more background

Support volumes are falling… slowly
1450
1486
1362
1318
1290
1150
1200
1250
1300
1350
1400
1450
1500
1550
2015 2016 2017 2018 2019
Blackboard Support Tickets Raised
Support tickets

% Active users who need help is falling, but has plateaued
Year
Average (mean) %users (active) who raised a
Bb ticket that went to second line.
Percentage change
2012 0.643% -
2013 0.530% -18%
2014 0.471% -11%
2015 0.400% -15%
2016 0.367% -8%
2017 0.326% -11%
2018 0.293% -10%
2019 0.288% -2%

Staff need the most help, their usage is more advanced.
Staff

“How do I” is one of the most popular reasons for raising a ticket
0
100
200
300
400
500
600
700
800
2016 2017 2018 2019
Three popular closure codes
Fault with central data Course unavailable How do I...

“My course is unavailable” too often
0
100
200
300
400
500
600
700
800
2016 2017 2018 2019

Our “elearn” support site
• Developed over many years and several
iterations.
• We resisted locking it away in an intranet,
internal knowledge base, SharePoint etc.
• Open to the world.

Our “elearn” support site
• Site has been used by 1,399 academic
institutions from 32 countries, including 368
from the UK.
• 400+ Blackboard guides.
• 70+ Panopto guides.
• 70+ Turnitin guides.
• 30+ Blackboard Collaborate guides…. and more.

elearn.soton page views per day week 0 to week 4
0
500
1,000
1,500
2,000
2,500
2018

0
500
1,000
1,500
2,000
2,500
2018
Averaging between
500 and 1500 page
views per day at
peak support
times.

Why not use Blackboard’s help?

We use other tools, e.g. Turnitin, Panopto within
Blackboard.
We currently only licence Learn, not the content
system, nor the community system.
We may disable features, e.g. Course Messages.

We want to quickly provide information and
workarounds about bugs.
We rely on the links not changing.
We may configure Blackboard differently from how it is
presented in the help.

Case Study – Adding Video to
Blackboard
Build Content  Video
• We prefer large videos to be uploaded to
Panopto.
• Small videos should use HTML5 video feature.
• Build Content  Video, uses older method, not
HTML5.

HTML 5 Video?
Hidden away in text editor when you
• Build Content  Item
• Then insert video

HTML 5 Video
Hidden away in text editor when you
• Build Content  Item
• Then insert video, and change drop down to
HTML 5 video.
– Default is Flash !?!?!

Blackboard
But we also have users who believe we have
hidden all the “goodies” away from them (we
haven’t).
So we are very wary of turning features off.
Build Content  Video has been in place for a
long time.
Requests to have Build Content  Video use
HTML5 ignored by Blackboard so far.

Blackboard
How can we:
• Recommend users use the preferred method.
• While not turning any features off.
• And accept that some will never read our
emails or view our web pages?

The challenge of directing users to our support pages from Blackboard

The help link in Global Navigation

How would anyone know to find
this?

Help links on the login page?
https://blackboard.soton.ac.uk

Carousel shows an
“advert” every 7
seconds.

Dropdown menu of
useful links.

Help links within
login box

Not much use after you have logged
in.
Most users will save their password
anyway, or Single Sign On and bypass
the login page.

Help links in Control Panel point to
Blackboard’s own pages.
We wish to direct users to our own
pages.

Language Packs

Have to maintain edits after each
upgrade.
Cannot include links? (I think.)
Cumbersome to edit.
We had random nasty errors
whenever Java was updated on the
server.
Language Pack challenges

You can turn it off.
Blackboard’s built in help

It’s easy to ignore, or miss.

Sometimes not WCAG AA compliant

The aim
• Improving service by:
– Reducing interface “friction”.
– Increase engagement with internal support
resources (elearn.southampton.ac.uk).
– Reduce tickets.
• Resulting in:
– More effective and efficient usage?
– Greater user satisfaction?

Meanwhile

Feature requests and motivations
To implement ATbar (assist with accessibility).
To make course copy easier to find and the rollover
process easier to complete.
To change the message staff and students see when no
announcements have yet been posted to a course.

Standing on the shoulders of giants
• Particular thanks to these giants of the
community:
– Wiley Fuller and Shane Argo
(University of the Sunshine Coast)
– Heather Crites
(Columbus State Community College)
– Ashley Fisher
(Universiteit van Amsterdam)
– Ester Muñoz
( eLearning Media)

ATbar
Thanks to Ester Muñoz for the suggestion to try
using JSHack.
I will share the final Enhanced Atbar code to the
community soon, there are still some
improvements I would like to make first.

About JSHack

University of the Sunshine Coast
developed the JSHacks Building
Block for Blackboard Learn™, which
gives administrators the ability to
customise their Blackboard Learn
instances by inserting HTML and
JavaScript into pages where it was
not possible before.
This dynamic Building Block evolves
with Blackboard’s Open Source
community so users can work
together to implement small
changes to the Blackboard Learn
interface.
About JSHack
Winner of BLACKBOARD LEARN™ INNOVATIVE DEVELOPMENT (Catalyst) AWARD

All info at
https://github.com/All
TheDucks/jshack-
v1/wiki
See more links in my
support page.
Developed by Shane
Argo and Wiley Fuller.
Free and open source
More about JSHack

Compatible with
• Learn Original Experience.
• SaaS
Not compatible with:
• Ultra
• Ultra base navigation
(for now?)

Finding treasure in the wiki
• The JSHacks wiki has some example hacks.
• So I tried them, the first were AMAZING!

“Availability Notice”

Appears through unavailable courses.
The button takes you direct to the page to
enable course availability.

The button takes you direct to the page to
enable course availability.

“My course is unavailable” too often
0
100
200
300
400
500
600
700
800
2016 2017 2018 2019
(Still) only appears on some Bb pages, e.g.
not announcements.

Inspiration

Inspiration: Part 1
Change language to suit our institution (e.g.
replace unit with course)
Add links to our help guides that are likely
to be most relevant while a course is
unavailable.

Inspiration Part 2
• Can we make more of these “Yellow boxes”
within Blackboard?
• They could provide
– direct links to our own support pages.
– extra relevant information where
appropriate.
• In the Blackboard feature concerned.
• So users see this help when it is relevant!

And that’s what we did!

Better Blackboard Help can be configured in multiple languages

Beispiel auf Deutsch

Ejemplo en español Thanks to Ester Muñoz from
eLearning Media for
providing a translation!

Przykład w języku polskim
Thanks to Marek Zawadzki
from Blackboard for
providing a translation!

So how difficult is it?
• You only need to know, or be able to copy a
little bit of HTML.
– I provide templates and explanations in this
video.
• You need a little patience, and imagination.

So how can I do this myself?
• It’s easy! I will show you. Remember you can
refer back to this video any time 
• Have ready:
– JSHack
• If on SaaS your SDM can install for you.
– A text editor, e.g. Notepad ++
– The presentation support site.
– A Blackboard test environment.

Step by step: Anatomy of an example Extra Help Box

Start in the Admin Panel.

1. Admin Panel
2. Tools and Utilities area
3. Manage Javascript Hacks

JSHacks main page

JSHacks main page
In case of emergency, press this button to
disable JSHack.

1. Admin Panel
2. Tools and Utilities area
3. Manage Javascript Hacks
4. Create Hack

Set hack details

Set hack details
Once set, the
identifier is fixed.

Set developer details

Create the ‘snippet’
By making reference to Javascript it
seems more complicated than it needs to
be for this purpose.

Create the ‘snippet’
This text box cannot be resized, so it’s
more convenient to craft your snippet in
a text editor like Notepad ++

An example ‘snippet’ in four parts
1. Everything is in a “paragraph
tag”. The id allows us to apply
styling easily.
2. The image appears at the top right. I’ll
explain the resource path part in a few slides.
3. The heading.
4. The main
content.
1. We close it here.

The four parts
1.The opening P with an
identifier (closed at
the end).
2.The image.
3.The heading.
4.The content.

In a course

3. The heading.
In a course
2. The image appears at the top right. I’ll
explain the resource path part in a few slides.
1. Everything is in a “paragraph
tag”. The id allows us to apply
styling easily.
4. The main
content.

The injection point

Injection point
Learning System
Page.

Priority and resources
For our purposes
we do not need to
consider this.

Priority and resources
This is where we upload
resources we will use like
graphics.

In this example we use
one graphic file.
“help.png”
We must set the MIME
type.
For png files it is:
“image/png”.
Here is a list of the
common MIME types.
The example file
reference tells us the
path to that image we
can declare in our
snippet.

In this example we use
one graphic file.
“help.png”
We must set the MIME
type.
For png files it is:
“image/png”.
Here is a list of the
common MIME types.
The example file
can declare in our
snippet.
help.png on support site.

The example file
can declare in our
snippet.

Restrictions

For the extra help
boxes I have used:
• URL
• Course Role
URL concerns which
page / feature of
Blackboard the help
should appear in.
Course role is to which
course role the help
will appear (e.g.
student, instructor).
What types of restriction are available?

URL Restriction
• This allows us to configure within
which Blackboard feature the extra
help box appears.
• It takes a little patience and
perseverance to work these out.

URL Restrictions
I’m going to make it easier for you by:
– Sharing the ones I have worked out so
far and providing a way for the
community to grow it.
– Showing you how to work them out for
yourself.

My Shared List
https://bit.ly/2W3PwnA

Understanding URL restrictions and making your own
Process is described on the JSHacks wiki.
Install and enable the “Display URL” package first.
Navigate to the feature in which you wish to add a “hack”/help box.
Copy the URL.
Open page source and search for “displayURL” and copy the link it identifies and paste into (for example)
Notepad.

Copy the URL

Copy the displayURL from View Source

URL from browser:
/webapps/assessment/do/authoring/viewAss
essmentManager?assessmentType=Test&cour
se_id=_192688_1
Remove part after the question
mark:
essmentManager
Remove part preceding last “/”:
viewAssessmentManager
URL from displayURL:
essmentManager
URL restrictions

Sometimes the displayURL shows a
.jsp page.
e.g. forum_edit.jsp
Add a before the dot, e.g.
forum_edit.jsp
See the wiki for more on this.
Why check both?

URL from browser:
essmentManager?assessmentType=Test&cour
se_id=_192688_1
Remove part after the question
mark:
essmentManager
URL from displayURL:
essmentManager
URL restrictions
In this case they
are the same.

Add .* to the beginning.
Add * to the end.
.*viewAssessmentManager*
Paste into URL restriction.
Your “hack” will apply when you use this
feature.

Multiple pages/features?
Put a “pipe” | between each one and keep within the
brackets.
For example:
(.*viewAssessmentManager*|.*modifyAssessment*)

Use Course Role S: Student
P: Instructor
G: Maker / Grader
T: Teaching Assistant
B: Builder
Making sure staff / student roles see the help
Put in brackets and separate
with a pipe if you use more
than one role.

Submit and enable

Boom!

The advanced
restriction can be used
to make a JSHack
appear only on certain
courses.

Advanced restrictions
Apply to all courses with a course id beginning
ARCH.

Advanced restrictions
Apply to these specific course ids.

context.course.courseId =~ "^MEDI-MSC-001.*$" || context.course.courseId =~ "^MEDI-MSC-
002.*$" || context.course.courseId =~ "^MEDI6077.*$" || context.course.courseId =~
"^MEDI6078.*$" || context.course.courseId =~ "^MEDI6082.*$" || context.course.courseId =~
"^MEDI6083.*$“
More details on advanced restrictions:
https://github.com/AllTheDucks/jshack-v1/wiki/Advanced-Restriction
Thanks to Shane Algo for helping me to understand using Advanced restrictions for this particular use-
case.

HTML “Template”

HTML “Template” BetterBbHelp-exampleHTML.txt on support site.

Styling
• For efficiency, we will apply “styling” separately.

Download and install the CSS-BBH-
YB.zip JSHack package from the
support site.
Enable it.
Styling example

Loads the CSS on any page.
(There are no URL
restrictions)

The CSS is attached.

The concept
CSS “hack”
Help
Package
Help
Package
Help
Package

The concept
CSS “hack”
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package
Help
Package

The concept
CSS “hack”
Help
Package
Help
Package
Help
Package
Change the CSS here once.
All help boxes are updated at once!

The CSS explained
#YBhelp {
border-radius: 0px;
margin: 5px;
background: #FFD;
padding: 10px;
border: 3px solid grey;
font-size: 100%;
margin-bottom: 30px; }
#YBhelp a:hover,
#YBhelp a:focus {
color: #fff !important;
text-decoration: underline !important;
background-color: #231F20 !important;
transition: ease-in-out 0.5s !important;
outline: 0px; }

#YBhelp {
border-radius: 0px;
margin: 5px;
background: #FFD;
padding: 10px;
font-size: 100%;
#YBhelp a:hover,
#YBhelp a:focus {
outline: 0px; }

#YBhelp {
border-radius: 0px;
margin: 5px;
background: #FFD;
padding: 10px;
font-size: 100%;

#YBhelp a:hover,
#YBhelp a:focus {
text-decoration: underline
!important;
background-color:
#231F20 !important;
transition: ease-in-out 0.5s
!important;
outline: 0px; }

#YBhelp img {
-webkit-filter: invert(1);
filter: invert(1); }
#YBhelp {
border-radius: 0px;
margin: 5px;
background: black;
color: white;
padding: 10px;
border: 3px solid #8D3970;
/* font-size: 1.2rem; */
margin-bottom: 30px;}
#YBhelp a {
color: #FCBC00; }
#YBhelp a:hover,
#YBhelp a:focus {
background-color: #231F20 important;
outline: 0px; }

#YBhelp img {
#YBhelp {
border-radius: 0px;
margin: 5px;
background: black;
color: white;
padding: 10px;
border: 3px solid #8D3970;
margin-bottom: 30px;}
#YBhelp a {
color: #FCBC00; }

#YBhelp {
border-radius: 0px;
margin: 5px;
background: #FFF;
padding: 10px;
border: 3px solid #1E8765;
margin-bottom: 30px;
color: #00131D;
-webkit-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16);
box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16); }
#YBhelp a {
color: #005C84; }
#YBhelp a:hover,
#YBhelp a:focus {
outline: 0px; }

#YBhelp {
border-radius: 0px;
margin: 5px;
background: #FFF;
padding: 10px;
border: 3px solid #1E8765;
color: #00131D;
-webkit-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16);
box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.16); }
#YBhelp a {
color: #005C84; }

#YBhelp img {
#YBhelp {
margin: 5px;
background: #8D3970;
padding: 10px;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 0px solid #000000;
color: #FFF; }
#YBhelp a {
color: #B3DBD2; }
#YBhelp a:hover,
#YBhelp a:focus {
transition: ease-in-out 0.5s important;
outline: 0px; }

#YBhelp img {
#YBhelp {
margin: 5px;
background: #8D3970;
padding: 10px;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 0px solid #000000;
color: #FFF; }
#YBhelp a {
color: #B3DBD2; }

Tip!
I use my colour matrix to ensure I use
institutional colours accessibly. See my
other presentation from this year’s TLC
for more info.

Easier to find course copy
• The associate Dean for Education of our Arts and
Humanities faculty fed back to us that his
colleagues found Course Copy to difficult to find.
Could we make it easier?
• After lots of experimenting with different
techniques and asking on the Community site,
Heather Crites provided some code we could use
in JSHack that allowed us to customise the Control
Panel.
• We added a link to the Open Photo Roster tool as
well using this method.

Rollover

Making rollover easier

Making rollover easier
• Button sets the options we recommend as most
suitable for problem-free course copies.
• Based on work shared by Brian Almanza of
Kansas City Kansas Community College at a
Kansas Blackboard User Group (K-BUG)
meeting.
– The resources were shared on the community
site.

https://myclass.kckcc.edu/bbcswebdav/library/SidLit2018/JS_Hacks_SidLit2018_Presentation_Links.htm

Copy / Move content

Copy / Move content
• When you choose into which course you wish
to copy or move a single item of content, the
course list is not shown in order.
• When I raise this to Bb under #02939545 I was
told “this feature isn't included on a purpose
this could cause performance issues”.
• It has resulted in support requests and user
frustration.

Copy / Move content
• On the Community site, Heather Crites created
a JSHack that sorts the course list.
• It does so within the browser, so does not
impact server performance.
• sort_course_list.zip on presentation support
page.

Better announcements?

NO-ANN-Staff.zip on support site.

NO-ANN-St.zip on support site.

“Floating help box” for students
ST-INC-HELP.zip on support site.

Contextual help for Bb Collaborate

Making the course menu return automatically

Making the course menu return automatically
uvaNavExpand.zip by Ashley Fisher,
available on the support site.

Contextual help for Bb Collaborate
See my blogpost:
https://thevleguru.blogspot.com/2020/
04/jshack-collaborate-help.html

0
1,000
2,000
3,000
4,000
5,000
6,000
2018 2019

0
1,000
2,000
3,000
4,000
5,000
6,000
2018 2019
2018: 36,520 views
2019: 62,829 views
72% increase.

0
1,000
2,000
3,000
4,000
5,000
6,000
2018 2019
We did much more
promotion of elearn,
not only “yellow
boxes”

0
5000
10000
15000
20000
25000
2018 2019
Week 0 to Week 4

0
5000
10000
15000
20000
25000
2018 2019
Week 0 to Week 4
Some of this will have been
Internet Explorer users
receiving a message directing
them to elearn to find out
why their browser was no
longer compatible.

0
5000
10000
15000
20000
25000
2018 2019
Week 0 to Week 4
Some of this will have been
Internet Explorer users
receiving a message directing
them to elearn to find out
why their browser was no
longer compatible.
We used a JSHack
to do that too 

Comparting October 2019 vs October 2018
60% reduction in “course
not available” queries.

Conclusions

Easy to do, lots of help materials and
examples in this presentation and on
the support site.
Long term prospect unknown. But
tiny investment now for almost
instant results.
Very quick. Once you have done
one, the only effort to make more is
determining URL restrictions.
Opportunities for the community to
grow this.
Creating better Blackboard Help

Add tracking elements? A community of treasure hunters
adding URL restrictions?
A/B testing? You tell me 
Next steps

Thanks to…
Shane Argo
Chris Boon
Heather Crites
Hervé Didiot-Cook
Ashley Fisher
Wiley Fuller
Andy Holohan
Ester Muñoz

Thank you and goodbye!

Better Blackboard Help: Where your users need it, when they want it.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Better Blackboard Help: Where your users need it, when they want it.

Similar to Better Blackboard Help: Where your users need it, when they want it. (20)

More from Matthew Deeprose

More from Matthew Deeprose (13)

Recently uploaded

Recently uploaded (20)

Better Blackboard Help: Where your users need it, when they want it.