design guidelines for pixel perfect document design...design typography sans serif serif garamond...
TRANSCRIPT
Design guidelines for Pixel
Perfect Document DesignMatt Pepper, UK Presales, London Symposium, 6th April 2017
Agenda
How to make Impactful Applications
UI vx. UX?
The Requirements Process
Iteration using MSTR
Choosing the right visualization
MSTR examples
What makes a good app?
Two very separate design examples that have
different use cases:
• A blisteringly quick search engine;
• A user experience that makes you caress your
device
…and then there’s the final one, which I have seen
(and built myself!) many times!
3
UI vs UXThe difference and importance
So what’s the difference between UI an UX?
How are skills different?
Landing Page
Personalised information
Social Media or updates from BI team (Transactions)
Hyperlinks to key dashboards
Embedded content (e.g. videos; PDFs)
Navigation: Consistent header with InfoWindow
Demo App
The Requirement Process within MicroStrategyA process recommendation
11
User-Centered
Mobile Design
Project Overview
Audience
Definition
Features /
Requirements
Platform
Selection
Process Flows
StoryboardWireframes
Graphic
Design
Develop
User
Testing
Review
Final
ReviewFinal Approval
Why are you making the app?
Use one sentence
Iteration within MicroStrategy: Whiteboarding
Iteration: Using Visual Insight
Iteration: Report Services
Cut tableConnect via Data Import
What can be built in VI?
User feedback
Draft schema Schemadesign
Draft Document
design
Image showing iterative
nature
Iteration within MicroStrategy: Iterating with VI
Chunking DataCreating the building blocks for your Dashboard
Data isn’t like your kids, you don’t have to pretend to love them all equally.
Amanda Cox,NY Times
Chunking Data
02083960000
Phone number as
one large string
020-8396-0000
Phone number chunked
into smaller strings
Chunking Data
Chunking Data
Dashboard
metrics
Component
metrics
Contributing
metrics
Hierarchy of metrics
The Gartner Hierarchy of Metrics for Manufacturers
Hierarchy of metrics
Example: Telecoms Customer Base
Hierarchy of metrics
Example: Telecoms Customer Base
Hierarchy of metrics
Chart TypesSelecting the right one
Datavizcatalogue
Resources
No idea what visualization to use?
Try this site:
www.datavizcatalogue.com
Stephen Few
Resources
Great baseline for understanding Dashboard design,
and how the human mind works
Scott Berinato
Resources
Good for requirements gathering and looking at data
in a different way
Abela’s Chart Type Hierarchy
Matching Key Words to Chart Types
Source: Berinato, Good Charts
Colour
Stick to a well-defined palette.
Design
Colour Palette
Typography
Stick with 1-2 readable fonts.
Design
Typography
Sans serif Serif
GaramondLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grouping
How do you use shapes to convey a hierarchy?
Design
Grouping
Contrast
Direct the attention of the user
Design
Contrast
Design
Contrast
Design
Contrast
Dark contrast, more emphasis
Bold for emphasis (metrics)
Light for less emphasis (labels)
Less contrast for less emphasisSmaller font for less emphasis
External References
Image storage
Resources
Not got access to Web images folder?
www.postimage.org
Online image editor
Resources
Not got access to Web images folder?
https://pixlr.com/editor
Formatting Tips in MicroStrategyExplore your options – it’s worth it
Think Mobile First
Button sizes
Localytics
89.7%WiFi Devices
89.7%3G Enabled Devices
1.5%4G Enabled Devices
4
G
3
G
Platform Selection
Select a device
Platform Selection
Select a device
Colour Selection
Flatten Graphs
De-Emphasize Grid Lines
Transparency
Transparency
Text Alignment
Spacing
Rename Objects
Thresholds
Thresholds
Thresholds
Thresholds
Fullscreen Mode
Formatting Tips in MicroStrategyExplore your options – it’s worth it
Title Text
Click to add subtitle
Title Text
Click to add subtitle
Title Text
Click to add subtitle
Title Text
Click to add subtitle
Title Text
Click to add subtitle
Title Text
Title Text
Click to add subtitle
Title Text
Click to add subtitle
Title Text
Title Text
Click to add subtitle
