[InfoViz] Memvisualisasikan Berbagai Jenis Data

Beberapa tahun belakangan mulai ngetren yang namanya infographics, dimana informasi atau data disajikan dengan grafis atau visualisasi menarik. Sebuah informasi ternyata menjadi lebih menarik ketika disampaikan dalam bentuk infografis. Tadinya sebuah informasi bisa berupa berderet-deret angka dalam tabel atau bertumpuk-tumpuk paragraf. Infografis bisa merangkum informasi atau data dalam jumlah besar, sekaligus relasi antar variabelnya, dalam satu ilustrasi.

Dalam bidang penelitian HCI sendiri dikenal bidang information visualization (infoviz). Seiring dengan berkembang pesatnya big data, dibutuhkan cara yang tepat untuk menyajikan data yang besar itu. Kenapa harus divisualisasikan? Penglihatan adalah indera paling dominan manusia dan manusia mempunyai kemampuan yang bagus dalam mengenali pola-pola visual. Nah ketika kita bisa melihat pola dalam data, kita jadi tau lebih cepat bagian apa yang mau kita telusuri lebih lanjut. Selain itu informasi yang divisualisasikan juga jadi lebih gampang untuk dijelaskan.

Di bidang infoviz, banyak peneliti yang mengusulkan teknik visualisasi baru. Visualisasi data itu tak hanya bar chart, pie chart, scatterplot.. Setiap ada usulan baru harus dijelaskan kenapa teknik ini efektif, digunakan untuk data seperti apa, apakah usable, mudah dipahami, dan apa saja limitasinya. Media visualisasi juga menjadi faktor berkembangnya teknik visualisasi, misalnya buat wall-sized display bakal beda sama mobile display. Nah bagaimana kah cara mendesain visualisasi data yang baik?

Sebelum membuat suatu visualisasi, perlu dilihat dulu jenis datanya. Secara umum jenis data bisa dibagi menjadi:

  1. Nominal (data yang berbentuk kategori atau klasifikasi, contoh: jenis kelamin -> laki-laki, perempuan)
  2. Ordinal (data yang berupa order atau peringkat, contoh: kualitas barang tiruan -> KW I, KW II, dst, data ordinal bisa diurutkan, tetapi tidak bisa dilakukan operasi matematika)
  3. Kuantitatif interval (data yang berupa nilai atau rentang nilai, contoh: tanggal, jarak)
  4. Kuantitatif rasio (data yang berupa nilai, bisa diberi semua operasi matematika, contoh berat, panjang, jumlah, dsb)

Kenapa mengetahui jenis data itu penting? Ternyata untuk merepresentasikan setiap jenis data ada cara terbaiknya masing-masing. Apalagi ketika kita menyandingkan satu jenis data dengan jenis data yang berbeda, nggak semua cara bisa. Contohnya di grafik di bawah ini, apa yang salah?

grafik salah

sapi, kambing, ayam, kelinci itu tidak saling terhubung

Dalam membuat visualisasi dua dimensi ada yang namanya building blocks, antara lain :

  • Poin/titik
    Poin menggambarkan lokasi, tetapi belum tentu punya nilai besaran,
  • Garis
    Garis memiliki panjang yang bisa diukur, tapi nggak punya luas area. Garis bisa digunakan untuk menggambarkan koneksi, perbatasan, atau rute.
  • Bidang/Area
    Bidang punya luas yang dapat diukur. Sebuah bidang yang sama nilainya biasanya nggak akan berubah ukurannya, tetapi bisa berubah posisinya.

Building blocks di atas kemudian punya visual variable. Visual variable ini nanti yang memberikan nilai pada building blocks di atas. Visual variable antara lain ada shape, size, value, orientation, color, dan texture. Selain itu untuk visualisasi yang menggunakan layar komputer bisa memiliki visual variable tambahan seperti gerakan/motion, kedalaman, iluminasi, transparensi.

visual variable

Ibarat bermain game menggunakan weapon yang berbeda-beda, visual variable ini punya efek yang berbeda-beda. Efek ini disebut juga characteristic of visual variable yang  dideskripsikan dalam poin-poin di bawah ini.

  • Selective
    Apakah visual variable bisa dengan mudah membedakan satu nilai dari nilai yang lain?
  • Associative
    Apakah visual variable bisa dengan mudah mengelompokkan nilai-nilai?
  • Ordered
    Apakah visual variable bisa dengan mudah menunjukkan urutan dari sekumpulan nilai?
  • Quantitative
    Apakah visual variable bisa dengan mudah menunjukkan jumlah?
  • Length
    Seberapa banyak variasi visual variable yang bisa menunjukkan nilai yang berbeda-beda?

Karakteristik ini bersifat pre-attentive atau harus bisa dilihat/dipahami tanpa seseorang harus melihat secara fokus.

Kita lihat salah satu contohnya. Size misalnya. Gambar di bawah ini menunjukkan tiga building blocks dengan size yang berbeda.

Screen Shot 2015-12-02 at 10.31.18

Dari gambar di atas, apakah kita bisa langsung melihat walau sekilas (pre-attentively) variasi data dari size yang berbeda-beda? Bagaimana dengan mengelompokkan? Mengurutkan? Menunjukkan jumlah? Menurut Bertin [1], size memenuhi semua karakteristik kecuali menentukan jumlah (quantitative). Misalnya ada lingkaran besar yang mempunyai 2x luas dari sebuah lingkaran kecil. Kita tahu kalau lingkaran besar itu punya jumlah lebih banyak, tapi ketika masih dalam tahap pre-attentive, sulit untuk menemukan kalau ternyata si lingkaran besar ini jumlahnya tepat 2x lingkaran kecil. Contohnya pada gambar di bawah ini. Apakah mudah membayangkan jumlahnya? Bagaimana dengan proporsi lingkaran kecil dengan lingkaran yang besar?

Screen Shot 2015-12-02 at 10.50.15

Ternyata memang size tidak terlalu cocok untuk menggambarkan jumlah. Selain itu rasio mana yang dipakai? Radius atau luas? Menurut saya bar chart akan lebih jelas memberikan gambaran.

Karakteristik visual variable bisa dirangkum dalam tabel berikut. Perlu diingat selalu bahwa karakteristik ini dilihat dalam keadaan pre-attentive.

Screen Shot 2015-12-03 at 14.49.42

 

Kembali lagi ke jenis data yang kita bahas di awal. Setelah melihat visual variable yang memberikan efek atau karakteristik yang berbeda, maka, dalam menyajikan jenis data yang berbeda, dapat dipilih visual variable yang paling sesuai. Tabel di bawah ini merangkum setiap jenis data dengan visual variable yang digunakan dari yang paling akurat sampai tidak akurat untuk setiap jenis data. Mungkin ini yang saya bisa sebut tabel sakti yang jadi pedoman untuk visualisasi dengan jenis data yang bebeda.

Screen Shot 2015-12-03 at 15.09.58.png

Terakhir, berikut ini adalah salah satu contoh yang menarik dari penggunaan visual variable yang kurang sesuai. Dua grafik di bawah ini menunjukkan merk mobil dan dari mana asalnya. Semua variabel menggunakan data nominal (cek kembali tabel di atas kolom paling kanan). Grafik pertama menggunakan length sementara grafik kedua menggunakan position. Nah yang mana yang lebih mudah dipahami (dan tidak memberikan persepsi yang salah)?

Grafik sebelah kiri yang menggunakan length membuat kita beranggapan kalau mobil Volvo dan Saab buatan Sweden punya nilai lebih tinggi dari pada yang lain. Padahal itu bukan maksud dari grafik ini.

Nah itu kurang lebih demikian hal-hal dasar yang perlu diperhatikan untuk membuat visualisasi data yang baik. Teori yang dibahas di atas masih general, belum spesifik ke visualisasi menggunakan media komputer, dimana nanti bisa lebih “kaya” dengan interaksi.

Monggo kalau ada pertanyaan atau kritik, ditunggu di kolom komentar! 🙂

-dirangkum dari materi kuliah Interactive Information Visualization (01 Intro) oleh Aviz Lab Universite Paris-Sud –

[1] J. Bertin, Graphics and Graphic Information Processing. Berlin: Walter de Gruyter, 1977/1981

 

Mental Model di Warung Makan

Tempat makan (di Indonesia) itu banyak macamnya

  • Warteg
  • Fast food/take away
  • Restoran
  • Kafe
  • Warung gerobak

nah tiap tempat makan bisa punya cara pesen, makan, dan bayar sendiri. Di warteg, warung padang, warung nasi biasanya nasi, sayur dan lauknya ditata di sebuah lemari kaca. Pembeli bisa mengambil piring dan menunya sendiri atau diambilkan oleh penjaga warung (biasanya kalau dibungkus). Ada warung yang memberi harga dengan melihat apa saja isi piring, tapi ada juga warung yang cukup pembeli menyebutkan apa lauknya.

Di warung nasi menu bisa langsung dilihat dan diambil, kadang strategi penjualan itu berada di peletakan menu. Sama dengan ketika menata makanan di rumah biar makanan cepat habis harus bisa kelihatan sama yang mau makan (nasehat ibuk). Beda lagi strateginya kalau ada di restoran atau tempat makan yang harus masak dulu. Penjualan tempat seperti itu bergantung ke tulisan atau gambar pada menu (asumsinya si warung belom kondang ya).

Aktivitas terakhir adalah bayar. Ada yang bayar di depan sebelom dapet makanan, ada yang bayar berdasarkan penilaian kasir, ada yang pake nota, ada juga yang bayar berdasarkan kejujuran nyebut lauk apa yang dimakan.

Terus apa sih poin-nya tulisan ini?

Sebetulnya motivasi tulisan ini adalah pengalaman siang tadi beli makanan di warung geprek. Jogja mulai dua tahun yang lalu latah warung ayam geprek dan ada warung yang meniru 98% warung ayam gepreknya Bu Rum (pionir yang paling kondang menurut sejarah warung ayam geprek). Di warung Bu Rum sebelum makan biasanya antri, ambil sendiri nasi, sayur, terus ayamnya dibawa ke mas-mas biar digeprekin sambil menyebutkan berapa tingkat kepedesan yang diinginkan. Nah warung tadi siang tuh 95% mirip Bu Rum dari sisi bentuk piringnya, nasi ambil sendiri, ayam milih sendiri terus dibawa ke penggeprekan. Tetapi peletakannya sedikit berbeda dan ga ada penjaga warung yang ngasih tau. Udah lama ga makan di warung ayam geprek sih, jadi perlu sedikit me-refresh memori, tetapi melihat piring rotan yang dikasih alas kertas coklat bikin aku memasang mental model “oh, ini kaya di Bu Rum”. Tapi karena peletakan berbeda jadi “lho ini mulai dari mana? terus dikasihkan ke penggeprekan gimana?”

Jadiiii.. monggo yang akan mendesain sebuah sistem (apapun, di sini contoh simpelnya warung makan) untuk menginvestigasi apa sih yang sudah familiar dengan user. Trus ternyata tempat asal menentukan mental model seseorang. Bisa jadi kalo bukan orang Jogja atau gak familiar dengan ayam geprek Bu Rum gak akan bingung kaya saya tadi.

Tapi bukan berarti sistem baru harus selalu sama dengan sistem yang sudah ada dengan alasan “biar gampang”, tentu semua ada faktor lain yang menentukan (misalnya gimana biar antrian lancar, ga tabrakan, ato bahkan strategi biar penjualan lebih kenceng). Apalagi kalau sistemnya dipake ke banyak orang dan mulai ada diversity, mulai perlu identifikasi apa yang essential dan apa yang necessary.

Art and Craft

There are people who were born artistic. Their senses work really well to pull strings here and there to make a great piece. But I am pretty sure that not every artists are just talented. Some achieve it from hard work. The question I had in mind is, how do they learn?

Growing up in a country that has large population and huge education gap, many times I feel that the education system is lacking in appreciating people’s individuality. For example, to get to a good school, you only need to be good in three or five subjects. Other subjects somehow does not count. Probably the government meant that the subjects are the threshold to pass. But in reality, other subjects were kind of forgotten. It is no surprise for kids who become engineer and doctors can survive this. But what about artists?

When we travel to places, a lot of the attraction are about arts: music, dance, shows. I am zero in arts. Well, I do dance a little bit, but for everything else, I have no idea. But I do start questioning when I travel. Of how artists can create beautiful, awesome, full of meaning, artistic stuff.

Then I started to realise arts has a lot of engineering! Firstly you have different raw materials to explore from. It is not just about canvas and brush or pen. You have clay. Paper. Plastic. Glass. Metal. Seashells. Sand. Water. Oil. Feather. Wax. Bamboo. Wood. Bronze. Silver. Gold. And. Many. More. From many of these materials, I am amazed with myself of how little do I have experience with them even they are very easily available around me.

So with the wiiiide availability of raw materials to use from, now comes even more engineering part. You need to process the materials. You want to make a shape. You want to join one part with another. You want to make it stand. You want to make it hang nicely. You want to make it interactive. You want to change the colour. You want to highlight, you want to hide. A lot of these things need some time to learn the technique. Certain material need special ways to process. You sand them. You heat them. You rub some chemical onto it. You knead them.

And oh you need to know how to make the harmony of the shapes. A lot of great piece have strong calculation behind it. Well, ok, the government wasn’t so wrong in making math in one of the required subject in the final exams. But I wish I knew that math is useful in arts too. Haha I complain too much.

I want to share some pics I took when I went to Christmas market in Champs-Elysees. There was some kind of “artist village”. I really admire how crafty and skilful they are.

IMG_20150103_192940

Sleep lights. The artist cut woodboards in different layer and arranged them into a cube. Then adding some lights behind the layer of woodboard, it becomes like lights between trees and grass.

IMG_20150103_193433

Iron work. Shapes and ornaments you can put as decoration in your houses. Some miniature too.

IMG_20150103_193601

Glass blowing. Look at the different little creature he made. That is super amazing because you shape glasses as you blow them–while they are hot!

IMG_20150103_193744

Jeweleries. Made from different stones.

IMG_20150103_194713

Clay work. Glass. Signs. and more.

IMG_20150103_194823

Little magnets. I forgot what they are made of.

IMG_20150103_195720

Colorful lights. Customizable.

IKEA’s Store Shopping List: the feature that comes true

IKEA is so awesome, recently they post the ultimate trolling video of the year: the IKEA bookbook.

Lol.. I guess since that video, this “Apple-style” ads will be a joke, no? :p But in this post I am not going to talk about that, I want to share how awesome I found their website is, to help me with my “just moved” shopping.

I remember (not very well though) a few times during my study, students who were assigned to design a shop’s website would come up with many features, including “make a shopping list” feature. We dream of stores displaying all their product online and we can shop “virtually”: put things on the basket, the items in the basket will become a shopping list. Until recently, I have only heard this as a concept. I have not seen this feature in a real shop’s site.

Aaand, so the time comes when I have to move to a new city. And the most exciting thing for me is filling my new empty room with new stuff 😀 I don’t enjoy shopping for clothes as much as shopping for housewares :3 And the must visit store for this is definitely IKEA!

During two first weeks in France, I went to their big stores just to get familiar with the stores. France’s department stores in the suburbs like Auchan and Carrefour are ultra super very ultimate big. It is so so tiring that you have to go back to the aisle way down the store if you forgot something from that aisle’s “category”. Your feet will suffer if you don’t know what you need to get or if u are like me, the memory of these things only pops up at random and not always the right time.

I have lived in the country of IKEA–that the main supply of furniture and housewares are 99% from IKEA–for two years that this year I 80% know exactly what I need to get after moving into my new room. So I opened IKEA’s website to do an early browsing. Then I found this button “add to store shopping list” (after translated by Google Chrome from French to English) on mouse-over on each item.

1

At first I was just clicking this button for no reason.. I thought nothing had happened. In HCI term–no feedback. So after a while browsing and clicking the same button, I was getting curious about what this button does. They can’t have put a button that does nothing. So I tried clicking “My Cart” as it is the word in bold–the clearest to the eye. But there was nothing there. Okay.. Then somehow I saw the button “check your shopping list” I forgot where that was, and then I also figured out that they have a “store shopping list” button next to “my cart”.

2

Aaaaahhh.. so all the items I’ve clicked “add to store shopping list” are displayed in a neat list here ❤ After going back to browse for more stuff, the final shopping list is done! I can even click on which store I am going for shopping and check the availability of the product. There was a long moment of awe looking at the list.

3

It gives the total amount, so we can prepare the money. Having things well-prepared to the very detail is very Swedish… and it can even send the list to your email. Whoa.. easy access of the list on my mobile? I am in love!

Comparing IM/Chat User Interfaces

So I am to design for the interface of a chatroom-like application. Then I was thinking how do the successful chat application look like. This is challenging, though we use chat app all the time, sometimes the best designs are the ones that goes un-noticable. Lets have a look.

  • iRC, Jabber, AIM

Starting from the early age of Instant Messaging, we have MiRC, ICQ, Jabber. You might think there is no UI here, but this is the UI. Messages in all three platform look like command interface with some color codes, no separation or boxes between the messages. In MiRC group chat, it has time status in the beginning then followed by user name then followed by the message. in Jabber there is only user name and followed by its message, the color codes only for user’s name, not the message. In AIM, it has names, followed by time and message.

MiRC group chat

Jabber

  • Yahoo Messenger/MSN

I dunno if this is their latest UI, but I remember YM looks like this in desktop version for their personal chat. There is only user name and No timestamp, only when user sign in there is a timestamp. Still no separator or boxes, but they leave some space between the messages, so it doesn’t look too command-line-like. Picture of the user is shown in separate part of the window.

..Later I found out that you can set your chat to have timestamp if you want. But still the default setting you don’t have it. Oh and I think I remember in YM there is a “Last message received on dd/mm/yyyy hh:mm” isn’t it? Can’t find pic again.. -_-

Continue reading