@ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...

@ Everything Xcelsius.com 2010

Presented by: Mico Yuk & Mike AlexanderDate: March 24th, 2010

Day 1 - Advanced Dashboarding Design TechniquesXcelsius Gurus

Mico Yuk Founder – EverythingXcelsius.com (popular weblog) Founder - Xcelsius Guru Network Xcelsius Trainer / Developer / Architect / Blogger

Mike Alexander (you already met) Founder – Datapig Technologies Xcelsius Evangelist / Blogger (www.datapigtechnologies.com) Microsoft Excel MVP

Who are We?

@ Everything Xcelsius.com 2010Slide 3

Dashboard Design Resources

Well known Stephen Few (book) – Information Dashboard Design Edward Tufte (book) – Multiple books Jorge Camos (blog) -

http://www.excelcharts.com/blog/data-visualization/

What will you learn?

How to design better dashboards in 4 easy steps

1. Choose the Correct charts for your Data

2. Choose the correct dashboard layout

3. Implement effective Formatting Techniques

4. Configure component functionality in your dashboard

Common Mistakes

Real Word Examples

Which charts to choose?

Class Exercise

Step #1 – Chart Usage

Stop searching for information – Monitor it with Dashboard Technology.- Gregory Hovis, DM Direct

4 Common Mistakes

I chose this chart because…1. It looked good on the dashboard

2. It fit in the space available

3. The user HAD to have a (name a chart type) on the dashboard so we had to fit it

4. It looked cool aka ‘bling effect’

Reality – Data should dictate what charts are used on the dashboard. Period.

Example #1 - Data

Preview Data – Sales

Example #1 – Common Scenario

1st Chart Choice = Common Choice

Makes data comparison hard!

Example #1 – Better Choice

2nd Chart Choice = Final Choice

This works!

Example #2 - Data

Preview Data – Supply Chain Industry

Example #2 – Common Scenario

1st Chart Choice = Common Choice

Kind of works!

Example #2 – Better Choice

2nd Chart Choice = Final Choice

This works!

The most effective means for easily digesting quantitative information is through the use of graph components.

In building a dashboard it is important to understand best practices for choosing a graph to visualize specific metrics, trends, and analysis.

2 things to think about…

Choosing a Chart

Line Chart Consecutive Interval (mostly time-based) metrics. Any non-consecutive intervals.

Pie Chart & Area Chart Distribution or parts of a single measure. Any metrics that do not represent all parts of a whole (3-8 parts).

Bar & Column Chart Comparison of one or multiple measures with a common axis & scale. Any consecutive interval based metrics.

XY Chart, Bubble Chart Comparison between 2 or 3 measures with like or unlike scales. Use them in place of line or bar chart if 1 measure is not quantitative.

Stacked Chart Visualize how an individual part contributes to a whole. When the emphasis is on comparing the parts.

Understanding Chart Types

Quiz #1: Which Graph?

Choose the Correct Graph1. Graph #1

Comparing independent data sets Money distribution by time Production against time

2. Graph #2 Money distribution over time Material characteristics by temperature Clinical response by concentration

3. Graph #3 Budgets Money distribution

Bar & Column Chart

Line Chart

Pie Chart

Quiz #1: Which Graph?

Choose the Correct Graph4. Graph #4

Display changes in cumulative value or percentage over time.

Compare groups on outcome measurements.

Display group trends.

5. Graph #5 Displaying data with three variables Displaying financial data

Area Chart

Bubble Chart

Choose Charts

Step #1: Exercise

Exercise Steps:

1. Open Sample (borrow data )2. Divide Canvas into 4 parts3. Choose appropriate charts

Website Layouts

Common Dashboard Layouts

Real World Examples

Xcelsius Template Review

Class Exercise Continued

Step #2 – Dashboard Layout

3 Things to Consider

Most users …1. Spend 8+ hours on the internet

2. Most of that time is spent browsing websites

3. Familiar and accustomed to basic website navigation

4. Are not sure where to place items on their dashboard

Conclusion – Why remake the wheel?

Popular Website #1 Header – Logo, Main Menu Tab Left Side Pane – Main Navigation for each Menu Tab Body – Relevant Data Footer – Copyright Info & Links (not shown here)

Popular Website #2 Header – Logo, Main Menu Tab Left Side Pane – Main Navigation for each Menu Tab Body – Relevant Data Footer – Copyright Info & Links (not shown here)

Common Dashboard Layouts

Stick with 2, 3 and 4’s for the body

Don’t forget the navigation!

Real World Example #1

Dashboard Template #1

Header – Title, Report Date, Global Buttons Left Side Pane – Dashboard navigation, Static Data,

Links Body – Relevant chart sand bulk of data Footer – Copyright Info, Links

Dashboard Template #2

Header – Title, Report Date, Global Buttons Left & Right Side Bar – Dashboard navigation, Static

Data, Links Body – Relevant chart sand bulk of data Footer – Copyright Info, Links

Choose Charts

Step #2: Exercise

Exercise Steps:

1. Choose 2 Layouts as a class2. Handraw to Preview3. Build chosen one on canvas

Xcelsius Themes

Setting your Color Scheme

Class Exercise Ctd.

Step #3 – Formatting Techniques

Recommended1. Nova (default)2. Aqua3. Halo

Xcelsius Themes

BEST Color Scheme Chooser

URL – http://colorschemedesigner.com/

Before / After

Step #4 – Configuring Components

Presented by: Mico Yuk & Mike AlexanderDate: March 25th, 2010

Day 2 – Basic Connectivity TechniquesXcelsius Gurus

Download Files

URL - http://everythingxcelsius.com/wp-content/uploads/Xcelsius_Trainingfiles.zip

What will you learn?

4 Basic connectivity technique

1. What is XML?

2. How to employ XML Data into your dashboard?

3. Understanding flash vars

4. Passing parameters between dashboards

What is XML?

How to deploy it?

Understanding XML

What is XML?

Important Facts…

1. Defined – Extensible Markup Language

2. Developed in 1998 to allow different programs to pass data

3. Simple text file

4. Great Resource = Mike’s Video -

http://datapigtechnologies.com/flashfiles/xxmlpart1.html

What is XML?

Updating XML in Excel

Exercise #1

Exercise Steps:

1. Open ‘Books XML Example’ Folder2. Import data into Excel3. Open XML file and change 2 values4. Refresh data in Excel

XML Connectivity

Compare 3 Xcelsius options …

HTTPData PublishedClient DevelopmentMiddleware

XML Connectivity – Design Time

Xcelsius SWF

WebService

ExcelXML

XMLDataXMLData

Any XML structure

.NET/J2EE

<row><column> structure

HTTPData PublishedMiddleware

XML Connectivity – Run Time

SWFAny XML Structure.NET/J2EE

<row><column> Structure

XML Data

Excel XML Maps

Web Service

Understanding Flash Vars

Passing parameters between dashboards

Other Techniques

Flash VariablesHTMLFLASHVARS=“abc123”

Dashboard (SWF)Dashboard (SWF)

abc123

Pass parameters to into a SWF on-load

Using flash vars to pass parameters

Exercise #2

Exercise Steps:

1. Open ‘Pass_Parameter Example’ folder2. Open parent.swf model3. Change values and click enter4. See right child.swf update5. Open parent.xlf and child.xlf model6. Review code!

@ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...

Documents

Transcript of @ Everything Xcelsius.com 2010 Presented by: Mico Yuk & Mike Alexander Date: March 24 th, 2010 Day 1...

Design a Successful User Experience with Xcelsius Dashboards · Design a successful user experience with Xcelsius dashboards Natasha Lloyd, SAP User Experience Mico Yuk, Everything

Dashboarding for Innovators

Xcelsius 2008

Xcelsius 2008 Training

Xcelsius Chart Type

CR-Xcelsius PPT Final

Xcelsius Designer Userguide Es

Xcelsius Pro Userguide En

Excel 2013 Dashboarding

Social Media Dashboarding (reporting)

xcelsius best practises

Xcelsius Tips and Tricks_Present

NGLUYUR YUK!

The dashboarding problem

Xcelsius 2008 Participant Exercises

Dashboarding Examples Dt

Xcelsius Standard Userguide En

Sample Xcelsius Practical Guid

1 About Xcelsius Prasad BKR. 2 Agenda 1 1 1 2 1 3 1 4 1 5 About Xcelsius and Editions Features and Components Comparison: MS Excel vs SAP Xcelsius Xcelsius.

Xcelsius -