the importance of mobile bi ui interface design

The Importance of Mobile BI UI Interface Design

Copyright © 2013. iOLAP Corporation. All Rights Reserved

Charles Yorek, Managing Partner

[email protected] 214-618-5000www.iolap.com

Webinar Overview

• Why Mobile?

• Why is UI Design Important?

• Intro to UI Design

• Turning Concept into Reality

Copyright © 2013. iOLAP Corporation. All Rights Reservedwww.iolap.com

Why Mobile?


Mobile Enablement

• Mobile caters to ‘On the Move’ people

• Mobile provides the ability to work at ‘Speed of Thought’

• Mobile simplifies sharing of information


Mobile Benefits

• Answers the important questions quickly

• Better use of employee time

• Less information ‘Lost in Translation’


Why is UI Design so Important?


The Reality of the Situation

• Normal users have a very different concept of

what you’re building

• They don’t understand the programming

behind what you’re building

• They don’t understand the limitations

• More importantly - they don’t care



• User expectations of Mobile Applications are driven by

their personal use – this sets our ‘bar’ much higher

than we think



• We’re used to building for the Web

• We’re data jocks – not UI specialists

• We usually don’t concern ourselves with making

it ‘pretty’


So why bother?

What Does UI Do for Us?

• Good UI Design

• Creates trust with users

• Creates engagement with users

• Ultimately makes them feel they are getting

the best product


What Does UI Do for Us?

Improved Experience

More Usage

Better BI ROI

• The Path to Higher ROI


User Interface vs. User Experience

Great UI

Great UI

Great UX

Great UX


Improving the Experience is the goal

UI Design Intro


UI Design Intro

• What is a User Interface?

• Where Beauty meets Business

• ‘The goal of interaction between a human and

a machine at the user interface is effective

operation and control of the machine, and

feedback from the machine which aids the

operator in making operational decisions’


Constantine and Lockwood Design Principles

• The Structure Principle

• Your design should organize the user interface

purposefully

• The structure principle is concerned with your

overall user interface architecture

• The Simplicity Principle

• Your design should make simple, common

tasks simple to do

* Modified from: Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design



Left to Right Flow

Navigation Bar at BottomCopyright © 2013. iOLAP Corporation. All Rights Reserved

www.iolap.com


• The Visibility Principle

• Your design should keep all needed options and materials for a given task visible

• Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.

• The Feedback Principle

• Your design should keep users informed of actions or interpretations… through clear, concise, and unambiguous language familiar to users.




One Concept is Displayed on the ScreenCopyright © 2013. iOLAP Corporation. All Rights Reserved

www.iolap.com


Feedback is given when data isn’t available

Data Loads Have Not Completed

Please Try Again Later

Copyright © 2013. iOLAP Corporation. All Rights Reserved

www.iolap.com


• The Tolerance Principle

• Your design should be flexible and tolerant

• Your design should also prevent errors

wherever possible by tolerating varied inputs

• The Reuse Principle

• Your design should reuse internal and external

components and behaviors, maintaining

consistency with purpose rather than merely

arbitrary consistency



Representing Data with Graphs

What are you doing with the data?

• Making comparisons between data

• Showing data relationships

• Displaying distribution of data

• Show a composition of data


Graphs - Comparing Data

Line Chart

0

2

4

6

0

1

2

3

4

5

Column Chart

• Comparing over Time

• Comparing Many Categories

• Comparing among Items

• Comparing Few Categories


Graphs - Comparing Data

Bar Chart

Radar Chart

• Comparing among many items

• Comparing few Categories

• Comparing cyclical data

• Comparing many time periods

0 2 4 6


Graphs - Relationships

0

10

20

30

40

0 20 40

0

1

2

3

4

0 2 4

Scatter Chart

Bubble Chart

• Used to show the relationship

between two variables

• Used to show the relationship

between three variables


Graphs – Distribution of Data

0

2

4

6

0

2

4

6

8

3D Area Chart

Histogram Chart

• Used to show the distribution

of data between three

variables

• Used to show the distribution

of data for a single variable

across values


Graphs – Data Composition

0%

20%

40%

60%

80%

100%

8.2

3.2

1.4

1.2

2.6

Pie Chart

Area Chart

• Shows the share of total – It’s

not that bad!!

• Used to show differences

among data points over time


Effective Use of Color

• Color Templates

• Usually begins with corporate color

schemes‒ Check internal branding sites for great information on

colors/logos

• If starting from scratch – use a color palette

designer ‒ Easy to find online


Varying Colors by Series

0

2

4

6

Jan Feb Mar Apr May Jun

Revenue

0

2

4

6

Jan Feb Mar Apr May Jun

Revenue

Don’t: Vary colors in such a way that

it is visually confusing

Do: Vary colors in a gradual

manner to represent

differences


Emphasizing with Color

$0

$2

$4

$6

Q1 Q2 Q3 Q4

Revenue

4.3

4.5

1.8

Revenue

Do: Highlight the line with

importance to make it stand

out

Do: Use red to signify ‘Bad’

and green for ‘Good’


Designing for Visually Impaired

1 in 10 Men have some form of Color Blindness

• Two simple solutions

• Greyscale Test

• Use an alternative call out method



• Greyscale Test – Change your Colors



• Alternative Callout – MSTR Quick Symbol


Turning Concept into Reality


Before you Begin to Build

• Get into a Mobile Mindset



• Story Boarding



• Story Boarding Benefits

• Provides a ‘guard rail’ that allows you to:‒ Focus development efforts

‒ Reduce scope creep

• Helps you take advantage of features

• Can assist in validating user requirements



• Story Boarding Technique

• Begin by taking inventory of requests

• Determine points of logical intersection

• Develop application ‘Flow’

• Nitty Gritty‒ Decide: Grid or Graph?

‒ Visualization Type

‒ Landing Page

• Finally ask yourself ‘Would I buy this?’



• Paper Prototypes

• Offer Immediate

Feedback

• Helps Solve Design

Debates

• Uncovers insights

and perspectives

from users


Turning it into Reality

• Theory is great… but how does it translate into

development?

• We often find ourselves bound by

templates and examples

• When moving from Web to Mobile – start

fresh!

• Don’t be afraid to get graphical

• Reference iOS Human Interface Guidelines


iOS Design Principles

• Aesthetic Integrity

• Consistency

• Direct Manipulation

• Feedback

• Metaphors

• User Control


iOS Design Principles - Metaphors


iOS Design Principles - Consistency


External Internal

Using Static Backgrounds

• Very Simple Way to add ‘Pop’


Navigation Bars

• Add a Navigation Bar on All Dashboards

• Use ‘On’ and ‘Off’ Icons


Style Documentation

• Document Your UI Styles

www.iolap.com

iOLAP Can Help

• Assessment & Health Checks

• Review Mobile capabilities

• Determine best candidates for Mobile

• Mobile Projects

• BI and UI design sessions

• Mobile development (onshore/offshore)

• UI graphics development

• Application support & security

www.iolap.com

Q&A

Questions?

www.iolap.com

Thank You!

Charles Yorek, Managing Partner

[email protected] 214-618-5000


the importance of mobile bi ui interface design

Documents