Dashboard dan Kombinasi Visual

Deden Istiawan

Prinsip Gestalt

Sekelompok prinsip yang menjelaskan bagaimana manusia memahami dan memaknai
informasi serta rangsangan visual.

Prinsip Gambar dan Latar (Figure and Ground)

Prinsip Kedekatan (Proximity)

Prinsip Kesamaan (Similarity)

Prinsip Wilayah yang Sama (Common Region)

Prinsip Kesinambungan dan Penutupan (Continuity and Closure)

Prinsip Gambar dan Latar Belakang (Figure and Ground)

Prinsip Figur dan Latar (Figure and Ground)

Principle of Closure

Prinsip Penutupan (Closure)

Prinsip Penutupan (Closure)

Prinsip Kesamaan (Similarity)

Prinsip Kesamaan (Similarity)

Prinsip Kedekatan (Proximity)

Prinsip Kedekatan (Proximity)

Prinsip Keterhubungan (Connectivity)

Prinsip Keterhubungan (Connectivity)

Menghilangkan Gangguan Visual

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Declutter!

Exercise

Latihan 1

Hilangkan elemen-elemen yang tidak perlu dari grafik garis di slide berikutnya.

Setelah itu, jawab pertanyaan berikut:

• Apa pesan utama dari grafik tersebut?
• Apakah semua data relevan?
• Apa yang ingin Anda ubah?
• Bagaimana cara menekankan pesan utamanya?

Menekankan Wawasan Utama

Source: “Where’s Waldo?” by Martin Handford © Kilburn & Strode LLP

Source: “Where’s Waldo?” by Martin Handford © Kilburn & Strode LLP

Atribut Praatensi

Sifat visual yang dapat langsung dan tanpa sadar dikenali oleh otak manusia.

Adapted from Stephen Few and others

Membuat Komposisi Visual

Prinsip Utama Desain Grafis

    → Kesatuan
    → Variasi
    → Hierarki

Keseimbangan antara kesatuan dan variasi dapat menghasilkan hierarki.

Created by Lindsay Betzendahl

Created by Lindsay Betzendahl

Source: Ernest & Young

Reworked version of the charts by Ernest & Young

Reworked version of the charts by Ernest & Young

Source: Credit Suisse

Reworked version of the table by Credit Suisse

Reworked version of the table by Credit Suisse

Alignment & Layout

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Alignment in Charts

Desain Modular

Source: londonphotography.org.uk

Modified example from Fabio Crameri

“Turbo, An Improved Rainbow Colormap for Visualization” by Anton Mikhailov (Google Research)

Be Consistent

Source: Lisa Charlotte Muth, DataWrapper Blog

Gunakan Warna yang Mudah Dipahami (?)

Source: Lisa Charlotte Muth, DataWrapper Blog

Gunakan Warna yang Mudah Dipahami (?)

Source: Lisa Charlotte Muth, DataWrapper Blog

Source: Vivid Maps

Source: Vivid Maps

Desain dengan Memperhatikan Buta Warna

Source: “Fundamentals of Data Visualization” by Claus O. Wilke

Desain dengan Memperhatikan Buta Warna

Source: “Fundamentals of Data Visualization” by Claus O. Wilke

Contribution to the SWDchallenge by Alex Varlamoff — tested with a color-blindness simulator

Contribution to the SWDchallenge by Alex Varlamoff — tested with a color-blindness simulator

The VizPalette tool tests color palettes for legibility for different chart types, line weights, backgrounds, and font colors.

The VizPalette tool tests color palettes for legibility for different chart types, line weights, backgrounds, and font colors.

The VizPalette tool tests color palettes for legibility for different chart types, line weights, backgrounds, and font colors.

The VizPalette tool tests color palettes for legibility for different chart types, line weights, backgrounds, and font colors.

The Myndex APCA Contrast Calculator displays modern contrast ratios for various combinations of text size and font weight

Source: Lisa Charlotte Muth, DataWrapper Blog

The Myndex APCA Contrast Calculator displays modern contrast ratios for various combinations of text size and font weight

The Myndex APCA Contrast Calculator displays modern contrast ratios for various combinations of text size and font weight

Source: Lisa Charlotte Muth, DataWrapper Blog

Source: Lisa Charlotte Muth, DataWrapper Blog

The Myndex APCA Contrast Calculator displays modern contrast ratios for various combinations of text size and font weight

The Myndex APCA Contrast Calculator displays modern contrast ratios for various combinations of text size and font weight

Viridis colors, tested with VizPalette

Source: “Fundamentals of Data Visualization” by Claus O. Wilke

Source: Lisa Charlotte Muth, DataWrapper Blog

Source: Lisa Charlotte Muth, DataWrapper Blog

The 1Il Test

The 1Il Test

Exercise

Latihan 2

Tinjau kembali grafik garis dari latihan 1 sesi pertama.

• Atribut praatensi apa saja yang digunakan dalam grafik ini?
• Bagaimana menurut Anda tentang tata letak dan perataan grafik? Apakah ada yang ingin Anda ubah?

Tinjau kembali diagram lingkaran dari latihan 1 sesi pertama.

• Keputusan desain mana yang berpotensi bermasalah?
• Bagaimana Anda bisa menggunakan atribut praatensi untuk menyampaikan cerita dengan data yang sama?

Source: “Yearly Fluctuations in Area of Arctic Covered by Ice” by Derek Watkins (New York Times)

Source: Dr. Robert Rohde (Tweet)