Istilah-istilah yang Harus Dipahami dalam UI / UX Design

Share:

Hello World's! Udah lama nih saya ngga bahas tentang desain. Tiap postingan isinya coding terus, padahal kan ngeweb ga hanya ngoding. Padahal secara basic saya lebih cenderung ke desain daripada technical. Mungkin sombong kali ya? Gamau bagi-bagi ilmu di desain....

Mudah-mudahan ga sombong.....

Meskipun saya lebih mahir di desain, bukan berarti sekarang kita bakalan belajar mengenai bagaimana cara mendesain tampilan antarmuka yang mampu menggaet hati seluruh user, atau tips membuat desain ui seharga 15 juta. Kita belajar basic-nya aja dulu....

Pernah nggak sih kalian mendengar kata "usability test"? Atau kalau ga pernah denger, "whitespace" deh... Pernah denger kan kalau whitespace? Nah, itu yang akan kita pelajari sekarang. Memahami istilah-istilah yang mungkin terdengar aneh bagi kita yang suka ngedesain hanya sebatas hobi saja. Berikut ini adalah 6 Istilah asing yang harus dipahami di bidang Design.

<!-- Whitespace -->

Yang pertama ini mungkin sering kita dengar di berbagai tempat, salah satunya adalah forum. Kata "whitespace" ini sering kita dengar karena ini basic banget. Kalau gak tau.... belajar biar tau!

Whitespace ini artinya ialah ruang kosong. Yap, ruang kosong di antara dua / lebih elemen / komponen design. Dalam membuat sebuah desain tampilan, pastinya akan memilki lebih dari 2 komponen dalam satu canvas. Biar lebih paham, coba tengok gambar ini.

apa itu whitespace, pengertian whitespace, whitespace adalah, white space css

Di atas adalah contoh desain dari halaman profil Instagram. Pada setiap foto, pasti akan diberi jarak agar pengguna tahu bahwa foto tersebut bukan satu kesatuan. Selain di bagian foto-foto, ada juga di bagian lainnya. Jika kita perhatikan, halaman tersebut "dipersempit" tampilannya dengan memberi jarak yang sama di kiri dan kanan.

Mempersempit macam ini ada alasannya loh. Ngga cuman biar kelihatan rapi. Tujuannya, agar mata si pengguna tidak terlalu jauh dalam mengeksplorasi layar, si pengguna jadi lebih fokus. Kalau fokus, mereka akan nyaman. Apalagi kalau fotonya cewe-cewe estetik, nyaman bet deh....

<!-- Wireframe -->

Wireframe merupakan cikal bakal dari sebuah desain yang sangat menawan. Wireframe itu gambaran awal desain yang biasanya diaplikasikan ke sebuah kertas menggunakan spidol. Tapi ada juga yang langsung bikin di komputer. Kalau ngegambar dulu di kertas ini mungkin lagi pas gak ada komputer, jadi ya terpaksa digambar dulu, daripada lupa.

Sebelum desain dibuat, biasanya desainer akan membuat kotak-kotaknya dulu di kertas. Jadi wujud dari wireframe ini cuma kotak-kota aja sih, ga ada spesialnya.

<!-- Low / High Fidelity -->

Kalau dilihat dari namanya, mungkin kita akan bingung dengan makna sebenarnya dari istilah ini. Jika dicari di kamus (GTranslate), fidelity adalah ketepatan. Maksudnya "ketepatan tinggi" ini apa sih? Apakah "sesuai harapan pengguna"?

Sebenarnya bukan ketepatan dari sebuah tampilan yang diharapkan pengguna sih. Tapi, bagaimana tingkatan dari segi-segi penunjang, segi warna, ukuran teks, jarak antar elemen, dll.

Untuk low-fi (singkatannya Low-fidelity), tingkat presisinya masih rendah. Jadi belum memiliki warna, ukuran teks-nya masih morat-marit. Low-fi juga berarti Wireframe. Tujuannya hanya untuk menentukan tata-letaknya saja.

Sedangkan high-fi, desain yang tingkat presisinya sudah tinggi, sudah lebih berwarna, ukuran dan jaraknya sudah diatur biar enak dilihat.

<!-- Above the Fold -->

Kalau istilah yang satu ini jarang kita dengar. Saya sendiri aja sering lupa nyebutnya apa. Ketika kita membuka sebuah halaman web, sebagai contoh toko online. Ngetik URL teketeketeketek.... enter.... Tak lama berselang sebuah laman pertama (index) dari toko itu muncul.

Pada halaman tersebut, pasti panjang ke bawah kan? Di bagian bawah mungkin ada Official Store, ada Pengumuman, ada banyak lah pokoknya. Sedangkan di bagian atas ada Hot Promo. Nah, tempat hot promo itu diletakkan namanya Above the Fold. Secara deskripsi, istilah ini berarti apa yang pertama kali dilihat oleh klien pada komputernya tanpa scrolling terlebih dahulu.

Kenapa kok Hot Promo itu diletakkan di Above the Fold? Jawabannya simpel... Biar pengunjung cepat tahu kalau toko itu lagi ada promo / diskon di produk-produknya.

<!-- Usability / Usability Test -->

Usability artinya fungsionalitas, kegunaan. Maksudnya, kegunaan dari sebuah elemen yang ada. Jadi, setiap elemen, harus punya kegunaan. Elemen yang gak ada fungsinya buang saja biar tidak berat ketika dimuat. Dan pastinya, kegunaan itu harus sesuai dengan semestinya. Maka dari itu, diperlukan sebuah usability test untuk mengetahuinya.

apa itu usability test, pengertian usability test, cara usability test,, usability testing adalah

Usability Test. Usability itu kegunaan, sedangkan test itu tes. Berarti "tes kegunaan". Maksud dari tes ini ialah untuk mencoba semua fungsi-fungsi yang ada dan mengetahui apakah semuanya berjalan sesuai dengan yang diharapkan ataukah masih ada kesalahan.

Mungkin kita mengira usability test itu hanya ada di bagian belakang saja. Tapi ternyata bagian depan juga harus di-tes. Sebenarnya kalau buat design yang dites itu bukan fungsi-fungsi di coding-nya, tapi lebih mengarah ke kenyamanan pengguna. Apakah pengguna nyaman dengan design yang diujikan atau tidak. Kalau tidak, kita harus tahu bagaimana caranya mengubah kata tidak itu bisa menjadi iya.

Banyak loh yang harus diuji cobakan kepada pengguna. Seperti urutan tombol-tombol, keberadaan / posisi elemen, hingga warna-warnanya pun harus diteskan. Namun sayangnya, seringkali kita mengabaikan hal ini dan memilih tanpa uji coba terlebih dahulu.

<!-- User Flow / User Journey -->

Yang ini masih ada hubungannya dengan Usability Test. Tujuan dari usability test itu kan untuk mengetahui bagaimana si pengguna menggunakan aplikasi (design) yang kita buat. Nah, proses menggunakan itu dinamakan user journey, atau ada juga yang nyebutnya user flow.

Dari user journey ini kita bisa mempelajari apa saja sih kekurangan yang ada di design kita,? Apakah warnanya itu terlalu kontras? Ataukah elemen-elemen yang kurang memiliki jarak kosong? Semakin banyak kendala di user journey yang bisa diselesaikan, semakin bagus hasil design kita.

<!-- Epilog -->

Selain keenam istilah di atas, masih ada banyak loh istilah-istilah asing yang kita dengar. Tapi rasanya kok muncul rasa males nulisnya. Dan, terakhir, tetep semangat buat menjadi designer "sangar". Good bye....!

Tidak ada komentar