Table of Contents

• Introduction to Dashboard Design• Dashboards for different audiences• Dashboard Design - Questions to Ask• Dashboard Color Schemes • Color Suggestion• Colors for Data• Good Dashboard Examples• Basic Flowchart for Dashboard Design.• Feature Languages Dashboard concept (Slide 11 - Slide 20)• More Student dashboard wireframes• Instructor dashboard wireframes• Admin dashboard wireframes• Direct class, Search and Immersion classes,(Slide 30 - Slide 34)• Sign On Design Wireframe• Instructor Schedule

Dashboard

There are three key questions:1.

Who is my audience? 2.

What value will the dashboard add?3.

What type of dashboard am I creating?

Dashboards for different audiences

• The function of a dashboard is to communicate critical information to your audience in a way they can understand, delivered when and where they need the information.

• A complicating factor is that most dashboards have multiple audiences. In fact, delivering the same dashboard across an entire organization has the potential benefit of getting everyone on the same page.

Before Dashboard DesignThings to ask

1. TimelinessHow frequently is the data in the dashboard updated?

2. Aesthetic valueHow important is it that the dashboard look attractive, or can it be purely utilitarian?

3. MobilityDoes the audience need to access the information on-the-go?

4. ConnectivityDoes the dashboard need to connect to live data sources?

5. Data detailWill the dashboard offer an ability todrill down to see more context?

6. Data densityHow information-rich will views of the data be?

7. InteractivityWill the user benefit from interacting with the dashboard?

8. CollaborationIs it important that your audience be able to easily share and collaborate on the dashboard?

Dashboard color• Appropriate use of color requires restraint. So best way

to start with a dashboard designs is typically start by using

only grey, then gradually add color where it conveys useful

information.• Color brings meaning, color can draw your eye to what is

important and tie together similar things. For example,

if we increase color brightness, it will attract attention and

make a point seem more important. Similarly, use of the

same color hue can be used to connect things that are

related.• At a more subtle level, the color scheme we choose can

evoke an emotion or feeling about the dashboard

Recommend using earth tones• Colors can be broken into high-

level dichotomies such as “earth tones” versus “unnatural” colors. We perceive earth tones as calming.

• In contrast, unnatural colors jump out at your audience, making them ideal for showing an alerts.

Color to display data on a dashboard

• Color to display dataWhen you are using color in your graphs to represent data, there are three types of color schemes to consider:

• Sequential When you are ordering values from low to high.

• DivergentWhen the values are ordered and there is a critical mid-point (e.g. an average or zero).

• Categorical When data falls into distinct groups (e.g. countries) and therefore requires contrast between adjacent colors

Good examples of dashboards

Employee Dashboard

Simplest flow chart of student dashboard

Part 1 of 10

Student Dashboard design

• A personalized and unified view into all the important study related news  and calendar events.

• Act as gateway and offer links to all the other study related systems.

• Offer shortcuts to my currently active courses. • Motivate students by offering visualizations of

a few key  measurements related to their personal study progress.

• Offer a simple and pleasant user experience.

Part 2 of 10

A) Virtual learning studentsand credit scores

please refer to section A in picture on slide 9

Virtual learning environment. It is the place where students do most of the day to day online learning activities like: Download reading material for courses Do online activities like complete course

questioners Submit personal or team assignments Read news items related to course like

“There is a new assignment for course X”

Part 3 of 10

B) Onsite Student registration and credits/scores

please refer to section A in picture on slide 10

• Student registration and student credit system. It will allow students to registrar and set beforehand their learning plan and their studies both online and onsite and register for courses at the beginning of the semester.

• It is also the system where the teachers will submit the credits and grades the students get from successfully completing a course.

Part 4 of 10

C) Tools

Other Tools

• There are of course plenty of other online tools that are used to facilitate and support learning like calendar and collaboration tools (like wiki’s and Office 365).

Part 5 of 10

Study progress meter

• The purpose of this component is to motivate the student by visualizing their progress by three key measures. The visualization will compare their results with the average of other students and the university “targets”.

• Colors use will seek attention from the student.

Part 6 of 10

Student Dashboard

• See a Graphical view of ‘Activity in last 30 days’• “Speed meter” type of visualization of activity in

last 30 days • Activity sources

– What I have done online (completed assignment, commenting on page, etc)

– What I have done (course registration, new credit points for completed course, updated study plan)

– Speed meter result is own activity/general activity scaled to 0-100

Part 7 of 10

Study Progress section on dashboard

• Study progress this year

• How many study points do I have this year?

• How many study points is the average this year?

• How many study points is the target?

• Overall study progress

• What percentage of my studies have I completed?

• What is the average completion in the same time?

• What is the target ?

Part 8 of 10

Event Calendar

• Event calendar• This element will visualize all the important study related

events for each individual student. It has two sub elements: 1) Today’s events, 2) Upcoming events.

• The following list illustrates what type of events will be shown in this interface element:

• Registration deadline for classes if there are any. • Registration deadline for the course in my study plan • Upcoming exams.• Upcoming deadlines on my courses.• Majors school events to participate.

Part 9 of 10

News Feed• News feed• This user interface component offers students a

personalized study related news feed that is collected from the databases that HR, admin and teachers update.

• News feed from HR/admin– Registered successfully to semester – Registered successfully to course – New credits from course X registered– Technical problems in system today, please reboot the system.

•  News feed from teachers – New material/deadline/assignment in course X – You completed assignment X with score 7/10 – Tomorrows lecture is canceled/change of venue

Part 10 of 10

More Examples of Student Dashboards

Cleaner Student Dashboard

Instructor Dashboard examples

Admin User Dashboard

Classes->Distant Learning Classes->Direct Class

Classes->Immersion ClassesWireframes

Part1 of 5

Part 2 of 5

Part 3 of 5

Part 4 of 5

Part 5 of 5

Sign ON design

Schedule