CONTENTS
Charts Color & Type UI Interface Pictograms 06 12 18 22
A line chart provides the most clear graphical representation of time dependent variables.
6 meter line area donut gauge bubble LINE CHART AREA CHART Home 20% Transportation hubs 29% Work 13% 0 5 10 15 1 1.5 2 2.5 3 NYC Yellow Taxis per day, ‘000 Yellow Taxis % change on previous years 600 4 500 0 400 4 300 8 200 12 100 16 0 20 2013 14 15 +Usage destinations Rationale for Uber usage Surge multiplier Uber prices NYE in 5 10 15 % change on previous years 4 0 4 8 12 16 20 15 + -
Meter charts are used to measure the rate of change of a quantity against defined targets.
7 METER CHART LINE CHART Hotels Yellow Taxis v Uber NYC Yellow Taxis per day, ‘000 Yellow Taxis % previous 600 500 400 300 200 100 0 2013 14 36.6% 20.7% 17.1% 11.0% 3.7% 3.7% 2.4% 2.4% 2.4% Going out/drinking Parking No car Cost Multi-tasking Other Time Weather Other Rationale for Uber usage 36.6% 20.7% 17.1% 11.0% 3.7%
2.4% Going out/drinking Parking No car Cost Multi-tasking Other Time Weather CHARTS
3.7% 2.4%
8 meter line area donut gauge bubble AREA CHART 0 5 10 0.0 20 40 60 80 100 120 140 180 1 1.5 2 2.5 3 previous years 4 0 4 8 12 16 20 14 15 +Minutes after midnight Surge multiplier Uber prices on NYE in Boston An area chart is a graph that combines a line chart and a bar chart to show changes in quantities over time. CHART AREA CHART 0 5 10 15 3 Taxis per day, ‘000 Taxis % change on previous years 4 0 4 8 12 16 20 2013 14 15 +Uber prices
METER CHART LINE CHART
Uber Usage
DONUT CHART GAUGE CHART
9
Events 3% Nightlife 3% Home 20% Transportation hubs 29% Hotels 16% Work 13% Restaurants 6% Other 10% 300 200 100 0 2013 14
NYC destinations 2.4% 2.4% 2.4% Time Weather Other METER CHART LINE CHART DONUT CHART GAUGE CHART Events 3% Nightlife 3% Home 20% Transportation hubs 29% Hotels 16% Work 13% Restaurants 6% Other 10% Yellow Taxis v Uber NYC Yellow Taxis per day, ‘000 Yellow Taxis % change on previous years 600 4 500 0 400 4 300 8 200 12 100 16 0 20 2013 14 15 +Uber Usage NYC destinations 36.6% 20.7% 17.1% 11.0% 3.7% 3.7% 2.4% 2.4% 2.4% Going out/drinking Parking No car Cost Multi-tasking Other Time Weather Other Rationale for Uber usage
A donut chart, in its simplest form, is a pie chart with its center cut out to look like a donut.
Gauge charts give you a way to quickly see how well a given metric is performing against a target goal.
10 meter line area donut gauge bubble GAUGE CHART BUBBLE CHART Home 20% Transportation hubs 29% Work 13% 0.0 20 1 1.5 2 Usage destinations Surge multiplier
An extension of a scatter plot, a bubble chart is commonly used to visualize relationships between three or more numeric variables.
11 AREA CHART BUBBLE CHART 0 5 0.0 20 40 60 80 100 120 140 180 1 1.5 2 2.5 3 Minutes after midnight Surge multiplier Uber prices on NYE in Boston
0.0 20 40 60 80 100 120 140 1 1.5 2 2.5 Minutes after midnight Surge multiplier
BUBBLE CHART
Futura Book Oblique Futura Bold
Futura Extra Bold
Neutral color for text
Neutral color for text
Click this link
This page cannot be found
12 0 1
2 3 Futura Book STD
A B C D E F G H I J K L M N O P Q R S T U W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R S T U W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R S T U W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R S T U W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
13 4 5 6
7 8 9
TYPE
14 Futura STD 12
STD 14
STD 16
STD 18 Futura STD 20 Futura STD 28 Futura STD 32 Futura STD 36 Futura STD 42 Futura STD 48 Futura STD 54 U Uber UBER 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) 0 1 ! @
Futura
Futura
Futura
3 4 5 6 7 8 9
15
2
#
( )
Uber UBERberUberUBER Uber
$ % ^ & *
16 100% 90% 80% 70% 60% 50% 40% GRAY 100% 100% GRAY 100% 90% 80% 70% 60% 50% 40%
WHITE
GRAY 100% GRAY 90% GRAY 80%
ALERT
RED ALERT ORANGE ALERT YELLOW ALERT GREEN
GRAY 10% GRAY 100% GRAY 90%
17 30% 20% 10% WHITE 30% 20% 10% WHITE GRAY 100% GRAY 90% GRAY 80%
COLOR
Name of step current progress
appointment
Name of step future goal
Name of step past progress
Your account has been created successfully
account has been created successfully Previous Next Previous Next Create account Verify payment Schedule appointment Add riders Your account has been created successfully
Name of step past progress
3
18
Previous Next Create account Verify payment Schedule appointment
Add riders 2
Name of step past progress
Name of step past progress
Name of step current progress
Name of step future goal
2 Verify payment Schedule
INDICATORS:PROGRESS STEPS & LISTED
Your
past progress
Name of step past progress Name of step
current progress
Name of step
future goal
Name of step
INDICATORS:PROGRESS STEPS & LISTED
of step past progress 2 2 2 3 2 2 1 2 2 2 3
Name of step current progress Name
Name of step past progress
Name of step past progress
19 Name of step past progress Name of step past progress Name of step current progress Name of step past progress 2 2 2 3 2 2 1 2 2 2 3 3
Next
Verify payment Schedule appointment Add riders
2
2 3 Name of step past progress Name of step past progress Name of step current progress Name of step future goal LISTED INDICATORS Name of step past progress Name of step past progress Name of step current progress Name of step past progress 2 2 2 3 2 2 1 2 2 2 3 Name of step past progress Name of step past progress Name of step current progress Name of step future goal Name of step past progress Name of step past progress Name of step current progress Name of step past progress 2 2 2 3 2 2 1 2 2 2 3 Name of step past progress Name of step past progress Name of step current progress Name of step future goal
Add riders Previous
Create account
Your account has been created successfully
3
20 2 1 3 4 5 Uber Ride Drive More Help ? Uber Ride Drive More ? Uber Ride Drive More ? Uber Ride Drive More ?
Hamburger Menu
Header name 3. Header links 4. Header utilities
Switcher B C A A. Hover B. Active C. Selected Help Help Help A. Hover B. Active C. Selected
1.
2.
5.
21 Uber Ride Drive More Uber Ride Drive More Uber Ride Drive More B C A 6 Selected ?
22
23 PICTOGRAMS
24 Uber