Selamat Datang

Sejarah Singkat Ikon Hamburger Menu

Kita pasti mengetahui dan telah melihat ikon hamburger ini. Sebagai contoh saja pasti hampir setiap hari Anda melihat icon yang ada di pojok kanan atas dari browser Google Chrome atau Mozilla Firefox, yang menjadi pertanda untuk menu Setting.

icon hamburger menu

Untuk dunia web desain, kita juga hampir setiap saat melihat perdebatan tentang bagaimana penggunaan hamburger icon yang baik dan di posisi mana umumnya penembatan ikon hamburger ini ditelatakan agar pengguna tidak kebingungan.

Norm Cox

Norm Cox

Ikon Hamburger / hamburger menu ini pertama kali dirancang oleh Norm Cox untuk Xerox Star, graphical user interface pertama di dunia. Norm Cox adalah co-foundar dari Cox & Hall dan telah menjadi konsultan untuk bidang interaction/experience design sejak tahun 1982. Dia juga menjadi perancang ikon dokumen untuk antarmuka yang sama. Geoff Alday adalah desainer perangkat lunak yang luar biasa yang pergi mencari pencipta ikon hamburger dan berhasil menemukan video ini.

sejarah ikon hamburger menu

Ini dibuat pada tahun 1990, yang disponsori oleh ACM CHI, menceritakan sejarah widget. Sumber: Brad Myers di Vimeo.

Dari sana dia mengirim email kepada Norm Cox, yang senang berbagi cerita asal usul ikon hamburger. Inilah yang ia katakan:

Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).”

Setelah digunakan Xerox Star, ikon hamburger sempat menghilang beberapa waktu.

Kebangkitan Kembali Ikon Hamburger

Lebih baru, hamburger menu tampil lebih kecil, dimiliki oleh antarmuka smartphone, desainer harus mencari cara untuk membuat segalanya cocok untuk layar yang hanya 4 inci. Tidak jelas aplikasi apa yang pertama kali menggunakan ikon hamburger di smartphone, namun yang diingat oleh beberapa orang yaitu

Voice Memo di iOS

Hal ini tampaknya menjadi yang tertua (diluar Xerox) yang menggunakan ikon hamburger sebagai tombol menu. Ini terjadi pada 17 Juni 2009, yang tersedia saat ini di iPhone 3Gs. Jika di klik menu tersebut, maka akan memunculkan daftar rekaman dan pilihan.

voice memo iphone

Tweetie untuk iPad

Tweetie adalah aplikasi pertama yang tersedia untuk Twitter, yang dibuat oleh Loren Brichter, yang kebetulan bekerja di Apple pada saat itu. Aplikasi ini keluar pada tahun 2009 dan menggunakan ikon hamburger untuk list/daftar. Sepertinya ini merupakan kebutulan saja bahwa seorang desainer Apple menggunakan ini.

tweetie for ipad

Facebook Membuatnya Menjadi Lebih Ngetrend

Facebook sepertinya juga telah menjadi kontributor besar dalam penyebaran penggunaan hamburger ikon untuk menu. Ini dimulai dengan icon Grid seperti ini pada tahun 2008.

facebook

Dan jumlah barisnya bertambah seiring dengan update aplikasi Facebook pada tahun 2009

facebook

Dan pada tahun 2010 menjadi garis-garis saja, bukan lagi berbentuk grid.

facebook 3

Facebook saat ini sudah menggunakan side menu untuk aplikasinya, hal ini sepertinya menjadi salah satu penampakan pertama paling diingat dari ikon hamburger.

Sepertinya Apple adalah alasan terbesar untuk kebangkitan ikon hamburger. Mereka membawa ikon hamburger ke smartphone besar mereka. Apple adalah penggemar ide Xerox dan mereka mulai menggunakannya pada antarmuka, dari sana aplikasi media sosial yang besar-besar mengambil alih dan orang lain mengikutinya.

Saat ini ikon hamburger ini banyak digunakan untuk mewakili menu samping / side menu pada website dan aplikasi sebagai lists. Beberapa aplikasi besar yang menggunakannya adalah.

Path

Path menggunakan hamburger menu untuk bagian navigasi.

path

Twitter Bootstrap dan Navigasi menu di website Starbuck versi mobile.

bootstrap starbuck

Berikut ini contoh-contoh lain penggunaan hamburger menu pada website modern

Contoh hamburger menu

Hamburger Menu

Penggunaan Hamburger menu

Masa Depan Hamburger Menu

Ikon hamburger telah menjadi hal yang penting dalam aplikasi maupun pada website, dan ini sepertinya akan berlangsung sangat lama, dan menjadi semakin masif penggunaannya. Hamburger menu juga sepertinya sudah disambut hangat oleh berbagai komunitas UX / UI. Beberapa orang mengatakan itu adalah hal yang mengerikan dan harus dihentikan sekarang juga dan diganti dengan menu atau dengan tab bar yang lebih berguna. Beberapa membeci namun beberapa menyukainya.

Beberapa orang juga ada yang mengumpulkan website-website yang menggunakan hamburger menu dengan cara yang simpel dan sederhana sebagai inspirasi untuk desainer lain.

Jadi kapan anda pertama kali melihat icon seperti ini ☰ ?

Itulah sejarah singkat ikon hamburger yang dilansir dari blog.placeit.net pada (29/10/2013)





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

One thought on “Sejarah Singkat Ikon Hamburger Menu

  1. […] bentuk navigasi yang simpel akan sangat cocok dengan website minimalis. Penggunaan hamburger menu tentu akan bisa memangkas jumlah elemen […]

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development