Making Good Design Great

8/2/2019 Making Good Design Great

1/104


2/104

2

Making a Good Design Great

Shima Nakazawa,

Global Director of QlikView Demo and Best Practices


3/104

Agenda

Making smart decisions

Visualization and Color

10 things to consider when creating UI

QlikView Developer Kit


4/104

Making Smart Decisions


5/104


6/104


7/104


8/104


9/104


10/104

70s


11/104

1997


12/104

K.I.S.S.methodology


13/104

Keep it simple stupid.

or

Keep it simple and straightforward.


14/104

1The Grid


15/104


16/104

2 HierarchyUsing type size to your advantage(less importance here)


17/104

Header: Its important

Subhead, less important

Body Copy

Legal boilerplate information


18/104


19/104

3Contrast


20/104

Presentation by Michael Anthony, 2011.


21/104

Presentation by Michael Anthony, 2011.


22/104

4Color


23/104


24/104


25/104


26/104


27/104

My Advice:

- Keep it clean, keep it simple


28/104

Less


29/104

More


30/104

Less


31/104

More


32/104

vs


33/104

Visualization & Color


34/104

Colour

Blindness

What our mind sees

Affordances

Context

Data Ink & Chart Junk

Left Brain / Right Brain


35/104

Colour Blindness

About 8% of males, but only 0.5% of females, are colour blind in some wayor another.

Ishihara Test - PseudoIsochromatic Plates


36/104

Ishihara Test

16


37/104

Ishihara Test

8(but red green colour blind will see 3!)


38/104

Ishihara Test

74(but red green colour blind see 21!)


39/104

Ishihara Test

42


40/104

Ishihara Test

7


41/104

Colour Palettes

http://www.visibone.com/colorblind/

http://www.iamcal.com/toys/colors/

http://colorschemedesigner.com/

http://www.colourlovers.com/palettes/


42/104

Your eyes and colours..


43/104

Fooling Your Cones


44/104

What you actually see..


45/104

Affordances

The computer user is often at a loss as to what to do. Bymaking certain regions of the screen take on perceptible,

distinctive appearances, the designer is communication the

design intention. These are designed affordances, messages

from designer to user, attracting attention to the set of desiredpossible actions.


46/104


47/104

Confusing Design / Not Enough Information


48/104

Context

I consume 12,000 calories a day


49/104

Context


50/104


51/104

Context.So What?.


52/104

Data Ink & Chart Junk (Over Engineering)


53/104

Data Ink & Chart Junk (Over Engineering)


54/104


55/104

10 Things to consider on UI


56/104

10 things to consider when creating UI

1. Resolution2. Font

3. Clean and Professional appealing

4. Utilizing the space

5. Makings things obvious

6. Meaningful data display

7. Using icons/graphics

8. Usability vs Cluttering

9. Visualization

10. Eye Candy


57/104


58/104

2. Font

List boxes - Minimum 10pt, 11pt if you can

Tables - Minimum 9pt

Legend Minimum 8pt

Avoid Calibri (MS Office 2007 + only)

Intensity of colors


59/104

3. Clean and professional appealing

Before Crowded with too much information


60/104


61/104


Before Intro sheet


62/104


After Keep only the highlight of the information


63/104


After About sheet


64/104

3. Clean and professional appealing About sheet


65/104



66/104



67/104



68/104


69/104


70/104

5. Making things more obvious - After


71/104

5. Making things more obvious - Before


72/104

5. Making things more obvious - After


73/104

5. Making things more obvious Before (Help Text)


74/104


75/104

6. Meaningful data display - Before


76/104

6. Meaningful data display - After


77/104


78/104


79/104

7. Using icons/graphics (Data Ink)


80/104

8. Usability vs Cluttering - Before


81/104



82/104

8 U bili Cl i Af


83/104

8. Usability vs Cluttering - After

8 U bilit Cl tt i B f


84/104


8 U bilit Cl tt i Aft


85/104

8. Usability vs Cluttering - After

9 Vi li ti Sil t L d


86/104

9. Visualization Silent Legend


87/104

9 Vi li ti Sil t L d


88/104

9. Visualization Silent Legend


89/104

10 Eye Candy After


90/104

10. Eye Candy - After

10 Eye Candy Before


91/104

10. Eye Candy - Before

10 Eye Candy After


92/104

10. Eye Candy - After

One more thing


93/104

One more thing

Gorgeous and Genius

Gorgeous and Genius in QlikView way Photoshop


94/104

Gorgeous and Genius in QlikView way Photoshop

Gorgeous and Genius in QlikView way QlikView


95/104

Gorgeous and Genius in QlikView way - QlikView


96/104



97/104


Template .qvw application (samples)

Sheet background templates - Preformatted

Background images

Image gallery

Design helper goods

Developer Kit sheet background examples


98/104




99/104


Developer Kit Image gallery


100/104

Developer Kit Image gallery

Background Buttons

Logos

Separators

Objects

Developer Kit Design Helper goods


101/104

Developer Kit Design Helper goods

Resolution Applier

Grid Applier

Where to find the materials/updates


102/104

Where to find the materials/updates

Materials

Salesforce Content (key word Demo and Best Practices)

Demo.qlikview.com

Sales Enablement Assets.qvw on pub.qliktech.com

Updates

Salesforce Chatter : Demo group

Q&A


103/104

Q&A


104/104

Making Good Design Great

Documents

Transcript of Making Good Design Great