Web Learner Portal UI/UX Enhancements – Civica Learning

Several user interface (UI) and user experience (UX) related enhancements to the Civica Web learner portal will be rolled out during November. These new enhancements will feature on your learners’ web portal. This document provides a summary of the forthcoming changes to prepare you for this release.

Content tile updates

The tile design has been decluttered and simplified. Tiles now feature titles, descriptions, status and ratings (on sites with ratings enabled).
Buttons with different labels depending on the content type have been removed. Simply tap (or click) a tile to proceed. On devices with mouse pointers, hover effects have been added to reinforce the fact they can be clicked. On touch devices, the natural tendency is to tap the tiles. Tiles can be tapped anywhere and in all cases the tap or click action reveals the item’s landing page.
Titles can run to two lines with lengthier titles truncated with an ellipsis. Lengthy descriptions are truncated in a similar fashion, to ensure a uniform tile depth in all cases. When viewing sets of tiles, for example on home pages or catalogue pages this ensures that tiles are displayed in neat rows as shown below.

Content item landing pages

We have introduced ‘landing pages’ for all content items displayed within the Civica Learning web learner portal and the Civica Learning mobile learning Apps. An example is shown here:

Landing pages feature the following:

The item’s title
The item’s image
The item’s formatted description
The item's current status (for example, Not started, In progress, Completed, Passed, Failed etc)
An Open button to launch content
Optional file attachments
Optional content specific discussion areas
Optional star ratings

Note that the Open button to launch content is disabled once a course has been launched inside a new window. This makes it much harder for a learner to inadvertently open more than one course content window. (Multiple course windows containing the same course content can lead to tracking problems).

Describe your content in greater detail

You can now add much longer descriptions and by using markdown formatting you can make your descriptions stand out on the page. For example, you could use headings to provide author information, use bullets to list objectives, add hyperlinks to companion and related resources and so on.

With simple markdown syntax entered on the content item’s properties page in the catalogue section of the admin site, you can add headings, bold and italic words, formatted bullets and numbered lists to your text. You can also add hyperlinks. The description simply flows down the landing page enabling you to add as much descriptive text as you like.

The support for hyperlinks also enables you to reference other, related resources or perhaps include a Google Map reference, or a hotel accommodation link for a classroom training session.

Markdown syntax is very simple and you can enter markdown text directly into the description fields in the Civica Learning admin portal. A preview window lets you quickly check your formatting to give you an approximation for how it will appear in your Web learner portal.

Markdown text you can enter	Appearance when displayed in the web learner portal
Here is a bold word	Here is a bold word
Here is an italic word	Here is an italic word
Here is a bulleted list - one - two - three	Here is a bulleted list one two three
Here is a numbered list 1. one 2. two 3. three	Here is a numbered list one two three
# Level one heading	Level one heading
## Level two heading	Level two heading
### Level three heading	Level three heading
Here is a hyperlink to the [BBC web site](http://www.bbc.co.uk)	Here is a hyperlink to the BBC web site

Add file attachments

You can now add file attachments to other items of content such as courses and curricula. The attached files are listed on the landing page beneath the item’s thumbnail image for quick access.

Classic scenarios where file attachments are useful include providing an attached syllabus document for a course, attaching a video preview of a course, or including additional resources and workbooks.

Content specific discussions

For sites where social commenting is enabled, landing pages now feature content specific discussion areas. These enable learners to leave their thoughts about the content, to ask questions related to the content and to engage in social collaboration with the user cohort related to the content.

NOTE: The discussion system will soon undergo additional UI and feature related enhancements including the ability to flag posts for moderator attention, and the ability to be notified when new comments are available. Administrators will quickly and easily be able to see where new comments have been added by members of the learner community.

Star ratings

For sites where ratings are enabled, the current average star rating together with the total number of ratings are featured on the landing page. Any user who has viewed the content is able to provide a rating simply by tapping or clicking the star UI control.

App support for markdown

Where you use mobile Apps to access content on your lms, your Apps will need to be updated to support the markdown that you use in content item descriptions. Civica will be updating Apps on a rolling basis to add markdown support, and you will be informed when you Apps have been updated and released to the appropriate App stores.