CS 235: User Interface Design December 3 Class Meeting Department of Computer Science San Jose State...

CS 235: User Interface DesignDecember 3 Class Meeting

Department of Computer ScienceSan Jose State University

Fall 2014Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

Computer Science Dept.Fall 2014: December 3

CS 235: User Interface Design© R. Mak

2

Developing an Effective Dashboard

Understand the application domain.

Clearly define the dashboard’s purpose. What are its objectives?

Get inside the heads of the dashboard viewers.

Focus on the objectives, not the means.

Most dashboard creation tools over-emphasize fancy artwork and cute skeuomorphs.



3

Matching a Dashboard to its Viewers

A dashboard should represent information that’s needed to update a viewer’s mental model …

… in a way that closely matches that mental model.

What information is displayed. How it’s displayed. The arrangement.



4

Dashboard Requirements

Understand the viewers’ mental models.

Elicit requirements from potential viewers.

How does this piece of information relate to that? If a problem occurs here,

what does it affect and how?

Novices to an application domain may not have formed clear mental models.

Experts may not be able to describe their mental models.



5

Information Complexity

Assess the degree of information complexity that viewers can easily process.

People benefit most from dashboardsthat are well-matched to their abilities.

Viewers may have different levels of abilities.



6

Questions the Dashboard Designer Should Ask

How frequently to update the information?

Who will use the dashboard? One person? One group? Different departments?

What will the dashboard monitor?

What objectives will it support?



7

Questions to Ask, cont’d

What questions should the dashboard answer?

What actions will be taken in response?

What items should the dashboard display? What does each item tell you? Why is it important?



8

Questions to Ask, cont’d

At what level of summary or detail should information be displayed for a quick overview?

Which information items are most important to achieve the dashboard’s objectives?

What are logical groupings of information? To which group does each item belong?

What are useful comparisons to provide meaningful context? Are there historical data or targets?



9

Include Only Useful Information

A dashboard should only include information that actually affects performance.

Questions to ask future viewers:

Can you describe a situation when this information would lead you to do something?

What is an example of the actual data that would appear and what action would you take in response?



10

Purpose of a Dashboard

Not just for keeping viewers up to date.

Also to maintain situational awareness:

Prevent problems. Take advantage of opportunities. Take steps to maintain or improve performance.



11

The Need for Context

Data values by themselves are useless. Compared to what?

Data only comes alive when compared to related values:

targets standards the norm the past



12

Fundamental Considerations

Update frequency User expertise Audience size Technology platform Screen type Data type



13

Update Frequency

Daily? Hourly? Real time? Include a timestamp if updated more than daily.

If updated less often than daily,then it’s not a dashboard. Not situation awareness at a glance.

If updated in real time, then the dashboard should be simpler and contain less information. Increased need for speed. There is a limit to the amount of information

a viewer can take in at a glance.



14

User Experience

A viewer with a high level of expertise in the application domain can handle a high degree of complexity in the information display.

A novice can handle relatively little complexity.

Provide a simpler dashboard display. Increase complexity as the viewer gains experience.



15

Audience Size

One person Multiple people with similar requirements Multiple people who need to monitor

different subsets of information

Designing a dashboard for a group of people is more challenging.

One-size-fits all may be a poor compromise. Instead, show different levels of information based

on the identity of the logged-in viewer.



16

Technology Platform

Desktop or laptop Web browser and server Mobile device

Web constraints Less functionality Less elegant interface

Mobile devices add touch and gesture input.



17

Screen Type

Screen characteristics size viewing distance aspect ratio resolution

We can only see clearly within a small angle. A large screen doesn’t mean we can show

more information in the dashboard.

Designers may have to accommodate multiple screen sizes, aspect ratios, and resolutions.



18

Data Type

Quantitative data

numerical values measures

Non-quantitative data

top 10 customers issues to be resolved people to contact etc.



19

Quantitative Data: Timing Variations

Time frames

This year to date This quarter to date This month to date This week to date Today so far

The appropriate time frame is determined by the nature of the dashboard’s objectives.



20

Quantitative Data: Comparisons

Understand data measures in context.

Context is often provided by comparisons:

same day last year end of last year budgeted amount percentage of the budget percentage of the forecast average, typical range, benchmark projection into the future competitor’s measure



21

Quantitative Data: Comparisons, cont’d

Multiple instances of a measure Each represents a subdivision of a whole Examples: regions, departments, subranges

Temporal instances of a measure Time series

Questions to ask a viewer:

Can you tell how well what you’re monitoring is performing?

Can you tell when something is abnormal?



22

Quantitative Data: Predictions

Develop good predictive models based on:

historical data an understanding of probability and statistics

If possible, incorporate predictions into a dashboard.

The dashboard can help shape the future.



23

A Well-Designed Dashboard

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” -- Antoine de Saint-Exupery

Exceptionally well organized. Condensed primarily in the form of summaries. Specific to the task at hand. Customized clearly to the viewers. Uses concise media that communicate in the

clearest and most direct way possible.



24

What is Wrong with this “Dashboard”?

Display a single traffic signal.

Light is green: All is well. Light is red: Drill down for more details.

Viewers rely on a predetermined threshold of what is or is not well.



25

Data-Ink Ratio

Maximize the data-ink ratio (within reason).

Every bit of ink on a graphic requires a reason. Nearly always, the reason should be that

the ink presents new information.

Keep it simple! Eliminate chart junk!



26

Dashboard Design: Goals and Steps

Reduce the non-data pixels.

Eliminate all unnecessary non-data pixels. De-emphasize and regularize

the non-data pixels that remain.

Enhance the data pixels.

Eliminate all unnecessary data pixels. Highlight the most important data pixels that remain.



27

Data-Ink Ratio, cont’d

Can you separate the data ink from the non-data ink?

The non-data inkis highlighted in red.

Information Dashboard Design, 2nd ed.by Stephen FewAnalytics Press, 2013



28


Too high percentage of non-data pixels:




29


Colors that don’t encode any meaning:




30


Unnecessary borders fragment the display.




31


Unnecessary and distracting fill colors.




32


Distracting use of color gradients.




33


Unnecessary grid lines in graphs.




34


Unnecessary grid lines in tables.




35


Complete borders instead of x- and y-axes.




36


Avoid 3-D




37


Make separator lines lighter.




38


Make separator lines lighter, cont’d.




39


Make grid lines lighter.




40


Make grid lines lighter, cont’d.




41


Mute the shading used to delineate table rows.




42


Dashboards should not need instructions.




43


Chart junk!




44


Overuse of color.




45


Overuse of color, cont’d.

Now the importantitems stand out.


CS 235: User Interface Design December 3 Class Meeting Department of Computer Science San Jose State...

Documents

Transcript of CS 235: User Interface Design December 3 Class Meeting Department of Computer Science San Jose State...