Kisah Inspirasi Ladies : 11/01/17

USER INTERFACES DAN USER EKSPERIENCE

A. PENGERTIAN USER INTERFACES

User Interface Design atau yang bahasa Indonesianya itu Desain Antarmuka Pengguna adalah:

Desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan pengalaman pengguna.

Bahasa gampangnya yaitu UI Design adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website.

Gambar 1 Ranah utama User Interface

B. PENGERTIAN USER EXPERIENCE

User Interface (UI) adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website. Untuk membuat UI bisa menggunakan photoshop atau langsung coding. Namun, kebanyakan web designer dalam membuat UI biasanya menggunakan media pensil dan kertas karena lebih fleksibel.

User experience memiliki ranah yang lebih luas dari UI, karena ranah UX ini dimulai dengan research pasar – pengguna yang kemudian diimplementasi kedalam sebuah interface. Ya UI adalah bagian dari UX dimana UI merupakan produk akhir dari UX. User experience designer mampu menghasilkan user interface yang mudah digunakan oleh target penggunanya. Karena ranah UX ini terlihat cukup luas, pada beberapa perusahaan memecah UX designer menjadi 2 kelompok, UX Researcher dan UI Designer untuk menciptakan user experience dari suatu apps atau website yang baik.

Seorang user experience designer bisa menjawab mengapa suatu tombol itu terletak dibawah gambar dari konten utama, berwarna hijau, memilki icon bergambarkan kotak dengan panah kearah bawah. Apakah anda mengetahui tombol apa yang dimaksud? Jika iya itulah mindset yang sudah dibuat oleh seorang UX designer untuk menyesuaikan kemampuan dan pengalaman penggunanya. ya tombol yang dimaksud adalah sebuah tombol download.

MEGA MENU DROP-DOWN

A. Pengertian Mega Menu Drop-Down

Mega Dropdown Menu, atau biasa juga disebut mega menu adalah jenis dropdown menu yang menampilkan dropdown yang besar. Dropdown besar tersebut biasanya berisi banyak sekali link, dan terkadang juga memiliki paragraf. Mega Menu biasanya digunakan pada situs-situs besar yang memiliki banyak sekali konten dan jenis halaman sehingga membutuhkan navigasi yang banyak, seperti situs-situs pemerintahan. Jadi, Mega Menu kurang cocok jika diterapkan pada blog.

B. Tutorial Membuat Mega Menu Drop-Down

Buka aplikasi Sublime Text 3
Setting bahasa yang akan digunakan. Pilih HTML dan CSS dengan langkah sebagai berikut:

Pada halaman dengan format bahasa HTML masukan syntax seperti dibawah ini:

<!DOCTYPE html>

<html>

<head>

<title>TODO supply a title</title>

</head>

<body>

<h3>Web Development</h3>

<ul>

<li>Javascript</li>

<li>Wordpress</li>

</ul>

</div>

<h3>Web Design</h3>

<ul>

<li>Photoshop</li>

<li>Sketch</li>

<li>Macaw</li>

</ul>

</div>

<h3>Browser</h3>

<ul>

<li>Chrome</li>

<li>Firefox</li>

<li>Internet Explorer</li>

<li>Opera</li>

</ul>

</div>

</li>

<h3>Web Development</h3>

<ul>

<li>Javascript</li>

<li>Wordpress</li>

</ul>

</div>

<h3>Web Design</h3>

<ul>

<li>Photoshop</li>

<li>Sketch</li>

<li>Macaw</li>

</ul>

</div>

<h3>Browser</h3>

<ul>

<li>Chrome</li>

<li>Firefox</li>

<li>Internet Explorer</li>

<li>Opera</li>

</ul>

</div>

</li>

<li><a href="#">Dropdown Menu</a></li>

<li><a href="#">About</a></li>

</ul>

</nav>

</div>

</header>

</body>

</html>

Pada halaman dengan format bahasa CSS masukan syntax sebagai berikut:

margin:0;

padding:0;

box-sizing: border-box;

}

body{

font-family: Raleway, arial, sans-serif;

}

header{ background: #bad455; }

.wrapper{

width: 1020px;

margin: 0 auto;

}

.main-navigation{

position: relative;

}

.menu{

list-style: none;

}

.menu:after{

content:"";

clear: both;

display: block;

}

/*style untuk .main-navigation, .menu dan li*/

.menu>li{

position: relative;

float: left;

}

.menu>li.has-mega-menu{

position: static;

}

.menu>li>a{

color: white;

text-decoration: none;

padding: 10px 20px;

display: block;

font-weight: 100;

}

.menu>li:hover>a{

background-color: #90AB2A;

}

.menu>li:hover .mega-menu{

display: block;

}

/*styling untuk mega-menunya*/

.mega-menu{

position: absolute;

background: #fff;

padding: 50px 30px;

box-shadow: 0 0 10px rgba(0,0,0,.3);

display: none;

}

.mega-menu:after{

content:" ";

display:block;

clear: both;

}

.mega-menu.fullwidth{

left:0;

right:0;

}

/* */

.mega-menu ul{

list-style: none;

margin: 20px 0 0;

}

/* kolom mega menu */

.column{

margin:0 -15px;

}

.column:after{

content:" ";

display:block;

clear: both;

}

.col{

width: 33.33333%;

float: left;

padding: 0 15px;

}

/* */

.mega-menu{

background-image: url(mega-bg.png);

background-position: 100% 100%;

background-repeat: no-repeat;

}

Kemudian simpan keduanya pada satu folder.
File yang berekstensi HTML buka dengan menggunakan web browser(google chrome) akan muncul tampilan seperti gambar dibawah ini:

MENU DROP-DOWN

A. Pengertian Menu Drop-Down

Sebuah menu drop-down (juga drop-down menu atau daftar drop-down atau "menu drop") adalah elemen kontrol grafis, mirip dengan kotak daftar, yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar. Ketika daftar drop-down tidak aktif, akan menampilkan nilai tunggal. Ketika diaktifkan, ini akan menampilkan (turun ke bawah) daftar nilai, dari mana pengguna dapat memilih salah satu. Ketika pengguna memilih nilai baru, kontrol beralih ke keadaan tidak aktif tersebut, menampilkan nilai yang dipilih. Hal ini sering digunakan dalam desain antarmuka pengguna grafis, termasuk desain web.

Drop-down menu adalah navigasi yang banyak digunakan pada website, namun dalam pembuatannya drop-down menu selain menggunakan CSS juga sering dibantu dengan Javascript.

B. Contoh Source Code Menu Drop-Down

Gambar 1 Menu Drop-Down

Drop-Down ini ada 3 level menu :

Main menu(level1)
Submenu(level2)
Sub-submenu(level3)

Struktur HTML. Adapun struktur HTML Drop-down menu tersebut adalah sebagai berikut:

<!doctype html>

<html>

<head>

</head>

<body>

<nav>

<ul>

<li><a href="#">About</a></li>

<li>

<a href="#">Services ▾</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Graphic Design</a>

<ul>

<li><a href="#">Print Media</a></li>

<li><a href="#">Illustration</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</body>

</html>

CSS Style. Pada bagian ini kita akan membahas CSS Style dari Drop-down menu:

nav {

margin-top: 100px;

text-align: center;

}

nav ul{

font-family: Open Sans;

font-size: 16px;

padding: 0;

list-style: none;

text-align: center;

display: inline-table;

}

nav ul li{

float: left;

width: 200px;

text-align: center;

line-height: 21px;

background-color: #006b7a;

}

nav ul li a{

display: block;

padding: 5px 10px;

color: #FFF;

background-color: #006b7a;

text-decoration: none;

}

nav ul li a:hover{

color: #fff;

background-color: #007e94;

}

Dimulai dengan nav dan nav ul aplikasikan style pada level1(main menu).

Property text-align: center pada selector nav dan property display: inline-table pada selector nav li agar menu berada pada posisi tengah halaman.
Property float: left; pada selector nav ul li untuk mengatur item list(li) dari menu item tersusun secara horizontal.
Property display: block pada selector nav ul li a agar kotak masing-masing menu bisa memiliki width: 200px. Sehingga setiap menu bisa bersampingan satu sama lain dengan rapat tanpa celah.
Property nav ul li ul{display: none;} berfungsi untuk menyembunyikan sementara drop-down menu. Tanpa property {display: none;} ini maka semua menu baik itu level1, level2 dan level3 akan terlihat secara bersamaan.

nav ul li ul{

display: none;

}

nav ul li:hover ul{

display: block; /*display the dropdown */

}

Selanjutnya kita akan masuk ke level2(submenu). Level2(submenu) yakni berupa drop-down menu hanya akan tampil/terlihat bila mouse cursor pengguna masuk ke daerah menu yang dimaksud(hover). Pada saat tidak ada cursor yang memasuki daerah menu tersebut maka submenu/drop-down menu tersebut tidaklah terlihat.

Nav ul li{display: none;} berfungsi menyembunyikan submenu/drop-down menu pada saat cursor tidak memasuki daerah menu.
Nav ul li: hover ul{display: block;} untuk menapilkan submenu/drop-down menu saat cursor memasuki daerah menu.

Gambar 3 Sub Menu/Drop-down(Level2)

nav ul ul ul li {

display: none;

}

nav ul li ul li:hover ul li{

display: block;

float: none;

}

Selanjutnya kita akan masuk ke level 3 (sub submenu). Pada level 3 ini pada prinsipnya sama dengan level 2 dimana sub submenu ini tidak akan tampil bila mouse cursor tidak memasuki daerah menu.

Property nav ul ul ul li {display: none;} untuk menyembunyikan level 3 (sub submenu) pada saat cursor tidak memasuki daerah menu
Property nav ul li ul li:hover ul li {display: block; float: none;} untuk menampilkan level 3 (sub submenu) saat cursor memasuki daerah menu

Dengan semua CSS style yang telah kita terapkan pada HTML di atas namun tampilan menu masih seperti gambar di bawah ini (Gambar 4). Pada (Gambar 4) level 3 (sub submenu) berada pada posisi di bawah submenu Graphic Design (ditandai oleh garis merah putus-putus). Sedangkan posisi level 3 (sub submenu) yang kita inginkan ini pada daerah (2) yang ditandai garis hijau putus-putus.

Gambar 4 level3 (sub submenu) berada pada posisi di bawah submenu

Untuk memindahkan level 3 (sub submenu) dari posisi (1) ke posisi (2) pada Gambar (4) di atas kita butuh CSS selector berikut ini:

nav ul ul li{

position: relative;

}

nav ul ul ul{

position: absolute;

top:0;

left:100%;

}

Property nav ul ul ul{ position: absolute; top:0; left:100%;} untuk memindahkan menu level 3 (sub submenu) ke daerah (2).Property position : absolute menjadikannya lebih fleksibel
Untuk bisa menggunakan position : absolute pada menu level 3 maka ancestor dari menu level 3 tersebut dikenakan position : relative , adapun ancestornya ada pada nav ul ul li{position: relative;}

Dari keseluruhan CSS style yang kita buat maka hasil dari drop down menunya adalah seperti pada (Gambar 5) di bawah ini:

Gambar 5 Tampilan akhir menu drop-down

#Selamat Mencoba Kawan.

Semoga bermanfaat ^_^

Kisah Inspirasi Ladies

Rabu, 01 November 2017

USER INTERFACES DAN USER EKSPERIENCE

A. PENGERTIAN USER INTERFACES

B. PENGERTIAN USER EXPERIENCE

MEGA MENU DROP-DOWN

A. Pengertian Mega Menu Drop-Down

B. Tutorial Membuat Mega Menu Drop-Down

MENU DROP-DOWN

A. Pengertian Menu Drop-Down

B. Contoh Source Code Menu Drop-Down

Translate