Bayangkan… Kamu adalah pengusaha yang sedang mencari designer untuk membuat desain website untuk bisnis mu.

Setelah menemukan designer yang menurut mu tepat, Kamu memberikan semua informasi terkait website yang ingin kamu buat. Dan tak lupa membayar uang muka agar project bisa dimulai.

Read more

Berikut adalah beberapa elemen kecil yang sering terlewatkan ketika mendesain suatu aplikasi. Elemen berikut memang kecil, tetapi dampaknya sangat besar.


1. Loading

Elemen loading ini berfungsi agar user tahu bahwa aplikasi sedang dalam proses. Loading ini bisa diimplementasikan saat:

  1. Berpindah dari satu halaman ke halaman lain
  2. Memproses suatu data
  3. Mengupload foto

Jika tidak menampilkan elemen loading, besar kemungkinan user mengira aplikasi nya crash atau error. Karena tampilannya hanya kosong atau pada halaman nya tidak terjadi perubahan.

Contoh contoh loading dari beberapa aplikasi | Techcrunch, Nike, Duolingo, TripAdvisor

Contoh contoh loading dari beberapa aplikasi | Techcrunch, Nike, Duolingo, TripAdvisor

2. Error dan Success State

Ini adalah elemen yang memberitahukan kepada user apakah langkah yang baru saja dilakukannya benar atau salah.

Ingat… user itu selalu butuh kepastian, jangan sekali kali menggantung user. Karena mereka bisa beralih ke aplikasi lain yang memberikan kepastian #haiah

Berikut adalah contoh Error dan Succes State

Error State yang baik selalu menunjukkan dimana letak kesalahan dan apa yang harus diperbaiki.

Success State yang baik memberitahukan user langkah apa yang selanjutnya harus dilakukan oleh user, Tetapi ini tidak berlaku untuk semua success state.

 

Error State menunjukkan dimana letak kesalahan

Error State menunjukkan dimana letak kesalahan

 

Success State memberitahukan langkah selanjutnya yang harus dilakukan oleh user

Success State memberitahukan langkah selanjutnya yang harus dilakukan oleh user

 

Success State yang cukup memberitahukan bahwa informasi berhasil disimpan, Untuk jenis success state seperti ini tidak diperlukan untuk memberi tahu langkah selanjutnya yang harus dilakukan oleh user

Success State yang cukup memberitahukan bahwa informasi berhasil disimpan, Untuk jenis success state seperti ini tidak diperlukan untuk memberi tahu langkah selanjutnya yang harus dilakukan oleh user

Btw…. untuk Error State ada kondisi dimana sistem tidak memberitahukan letak kesalahan secara spesifik. Tapi hanya memberitahukannya secara global. Contohnya ketika terjadi kesalahan login ataupun jika sistem mengalami gangguan setelah user menekan tombol.

3. Empty State atau Empty Data

Kondisi dimana sebuah halaman tidak memiliki konten atau data untuk ditampilkan.

Empty Data dengan tombol action

Ketika kita menggunakan aplikasi belanja online untuk pertama kali dan membuka halaman pembelian tentu sistem akan memberitahukan bahwa belum ada daftar pembelian , Maka ditaruhlah tombol action disitu untuk mengajak kita melakukan pembelian

Contoh Empty Data dengan tombol action dari beberapa aplikasi | Spring, Spotify, Asos, Youtube

Contoh Empty Data dengan tombol action dari beberapa aplikasi | Spring, Spotify, Asos, Youtube

Tombol Action di halaman Empty Data ini tentu disesuaikan dengan konteksnya.

  • Jika konteksnya di halaman pembelian maka tombol action nya untuk mengajak user melakukan pembelian.
  • Jika konteksnya di halaman daftar pertemanan maka tombol action nya untuk mengajak user mencari teman

Empty Data Tanpa Tombol Action

Tidak semua empty data membutuhkan tombol action, beberapa halaman empty data yang tidak membutuhkan tombol action adalah

  • Halaman Trash pada aplikasi email
  • Halaman Orang orang yang di blok (Tentu suatu aplikasi tidak akan pernah mengajak usernya untuk memblok lebih banyak orang)
Contoh Empty State tanpa tombol action dari beberapa aplikasi | Bear, Musical.ly

Contoh Empty State tanpa tombol action dari beberapa aplikasi | Bear, Musical.ly

Melewatkan beberapa desain diatas memang bukan sesuatu yang fatal, tapi bisa mengganggu proses development. Ada baiknya untuk mencatat beberapa desain yang sering terlewat lalu menjadikannya checklist.

Sehingga ketika proses desain sudah hampir selesai bisa membuka checklist tersebut dan melihat apa yang terlewat.

 

UI Designer at Paperpillar, writer at Insight

Ketika kita membuka suatu app dan menscroll nya, maka kita bisa melihat ada sebagian konten halaman yang menghilang. Seperti dibawah ini

Pada design diatas terlihat jelas konten akan menghilang setelah melewati suatu garis atau blok putih pada bagian atas.

Tetapi bagaimana jika pada design tidak terdapat suatu garis atau blok seperti design dibawah ini.

Untuk itu kita perlu membuat scrolling state untuk design seperti ini agar developer tidak kebingungan bagaimana tampilan ketika user menscroll halaman ini.

Untuk scrolling statenya kita bisa buat seperti dibawah ini.

Untuk scrolling state apakah harus menggunakan animasi?

Enggak harus, animasi hanya untuk menambahkan faktor delight pada aplikasi. Yang penting adalah memberikan gambaran pada developer bahwa ketika user menscroll halaman maka halamannya akan berubah.

Pada design diatas, animasinya bisa kita hilangkan dan akan menjadi seperti ini

Email adalah salah satu hal yang dibutuhkan ketika mendaftar suatu sosial media. Pada artikel kali ini kita akan membahas flow atau langkah langkah mengganti email pada akun sosial media. Kita akan membahas dan membandingkan 2 flow. Kira kira mana solusi yang paling ideal. Yuk… langsung saja

Flow 1

Pada flow 1, berikut langkah langkah yang harus dilakukan user untuk mengganti alamat emailnya :

  1. Menuju ke menu My Profile lalu klik pada bagian email.
  2. Klik pada link “Change Email Address”.
  3. Sistem mengirimkan link verifikasi ke alamat email.
  4. User membuka email dan menglik link verifikasi untuk mengganti email
  5. User diarahkan ke aplikasi lalu diminta untuk mengisi alamat email baru.
  6. Sistem mengirimkan link verifikasi ke alamat email yang baru, dan user cukup mengklik link verifikasi tersebut untuk menjadikan email yang baru tersebut menjadi primary email di akun sosial media nya.

Flow 2

Pada flow 2, berikut langkah langkah yang harus dilakukan user untuk mengganti alamat emailnya :

  1. Menuju ke menu My Profile lalu klik pada bagian email.
  2. Klik pada link “Change Email Address”.
  3. User mengisi alamat email baru dan juga password akun sosial media.
  4. Sistem mengirimkan link verifikasi ke alamat email yang baru, dan user cukup mengklik link verifikasi tersebut untuk menjadikan email yang baru tersebut menjadi primary email di akun sosial media nya.

Pembahasan

Kira-kira solusi yang paling ideal yang mana?

Flow 1.

  • Pada flow 1 langkahnya cukup panjang.
  • User harus mengakses alamat email yang saat ini dipakai untuk email sosial media, agar bisa mengklik link verifikasi dan melanjutkan proses pergantian email.

Tapi 2 poin diatas membuat flow pergantian email ini akan menjadi lebih aman (bukan berarti 100% aman lho…).

Kenapa menjadi lebih aman? kita asumsikan password akun sosial media user telah berhasil dicuri melalui cara brute force (Tentang brute force).

Salah satu cara untuk menyelamatkan akun sosial media itu adalah melalui email dengan cara Forget Password, yang mana sistem akan mengirimkan link verifikasi pergantian password ke alamat email. Sehingga selama alamat email belum terganti, masih ada kemungkinan untuk mendapatkan akun tersebut.

Dengan menggunakan cara flow 1, akan sulit untuk mengganti alamat email, karena walaupun password akun sosial media telah berhasil didapat tapi tahapan untuk mengganti alamat email adalah harus mengklik link verifikasi yang dikirim ke alamat email. Yang mana untuk bisa mendapatkan link verifikasi , harus mengakses email yang saat ini digunakan. Pada flow 1 terdapat tambahan keamanan yaitu dengan tidak menampilkan alamat email secara utuh. Sehingga sulit untuk menebak alamat email apa yang digunakan.

Flow 2

  • Pada flow 2 langkahnya cukup mudah.
  • User cukup mengetikkan alamat email baru yang akan digunakan dan password akun sosial media.

Cara ini bisa dibilang lebih simple, tapi cukup beresiko. Karena bila password berhasil dicuri, maka akan dengan mudah untuk mengganti email yang digunakan pada akun sosial media


Kemaren sempat berbincang dengan seorang teman, dan ia berpendapat bahwa UX yang baik tidak selamanya harus mudah atau seamless. Ada beberapa hal yang harus “dipersulit” untuk menjaga keamanan. UX yang baik itu fluid, tergantung dari konteks dan kebutuhannya.

Semoga bermanfaat

UI Designer at Paperpillar, writer at Insight

Dashboards adalah sebuah User Interface yang cukup unik, ia berada diantara data dan desain. Menampilkan berbagai metriks , angka ataupun visualisasi data.

Read more

Mungkin kamu sering mendengar tentang istilah istilah seperti whitespace, wireframe, high fidelity dan banyak lainnya. Kali ini kita akan membahas satu persatu istilah yang sering digunakan di industri UI/UX. Yuk kita bahas satu persatu 😀

Read more

UI Designer at Paperpillar, writer at Insight

Mengenal Komponen Form

April 29, 2018  ·

  Design

Saat menggunakan produk digital entah itu web atau app kita sering menjumpai form saat login ataupun saat mengisi data diri. Kali ini kita akan membahas tentang komponen form satu persatu. Mulai dari fungsi, bentuk dan bagaimana tips penggunaannya.


1. Input Text

 

Berfungsi untuk memasukkan inputan berupa angka maupun teks. Teks yang diketikkan disini biasanya tidak terlalu panjang.

Tips Penggunaan:

Sebaiknya inputan teks digunakan untuk memasukkan data yang tidak terlalu panjang seperti Nama, Nomor Telepon.


2. Select Box

Bentuknya mirip dengan input teks, tapi memiliki indikator anak panah di sebelah kanan. Saat diklik akan memunculkan pilihan yang disediakan oleh sistem dan user hanya bisa memilih satu opsi saja. Contohnya: Memilih Provinsi, Memilih tahun lahir

Tips Penggunaan:

Kalau opsinya kurang dari 5 sebaiknya jangan menggunakan select box, tapi bisa menggunakan radio button. Kenapa? agar user bisa langsung melihat semua opsinya tanpa harus mengklik sesuatu. Select Box cocok digunakan jika opsinya ada banyak. Kenapa? agar tidak memakan tempat.


3. Checkbox

Checkbox dengan banyak pilihan

Checkbox dengan banyak pilihan

Biasanya terdapat banyak pilihan dan user bisa memilih lebih dari satu pilihan. Seperti memilih hobi, memilih makan kesukaan.

 

Checkbox yang hanya memiliki satu opsi

Checkbox yang hanya memiliki satu opsi

Tetapi checkbox juga bisa hanya terdapat satu pilihan yaitu pada terms and condition ataupun untuk memunculkan sesuatu seperti form tambahan atau info tambahan.

Tips Penggunaan

Ukuran checkbox pada website cenderung lebih kecil dibandingkan pada aplikasi. Kenapa? karena pada website user memilih checkbox menggunakan mouse/cursor. Sedangkan pada aplikasi user memilih checkbox menggunakan jempol atau jari sehingga diperlukan ukuran yang lebih besar.


4. Radio Button

Digunakan untuk memilih satu opsi diantara beberapa opsi. Hampir sama dengan select box, tapi perbedaan di Radio Button adalah semua opsinya terlihat.

Contoh penggunaannya: Di opsi sekali jalan atau pulang pergi pada pencarian tiket pesawat/kereta api, Pemilihan Gender, Pemilihan Golongan Darah

Tips Penggunaan

Radio Button akan efektif jika opsinya kurang dari 6 atau 5. Jika opsinya terlalu banyak maka gunakan Select Box.


5. Textarea

 

Mirip dengan input teks, tetapi textarea lebih tinggi dan cenderung lebih panjang.

Tips Penggunaan

Textarea cocok digunakan untuk menuliskan sesuatu yang panjang. Seperti Alamat, Komentar.


6. Datepicker

 

Sesuai dengan namanya, komponen ini digunakan untuk memilih tanggal. Bentuknya mirip dengan Input Text, tapi biasanya terdapat icon kalender di sebelah kanan untuk mengindikasikan bahwa user bisa memilih tanggal dengan meng-klik icon tersebut. Setelah user mengklik icon tersebut akan muncul kalender


7. Autocomplete

 

Anda pernah mencari suatu barang di toko online, lalu setelah mulai mengetik ada beberapa saran yang muncul dibawahnya? itulah autocomplete. Autocomplete sebenarnya bukan termasuk inputan, tetapi lebih ke alat bantu user untuk mempercepat menginputkan sebuah isian.


8. Normal, Hover, Active, Disable

Bukan merupakan inputan, 4 hal tersebut adalah kondisi (state) suatu inputan.

  • Normal: Kondisi awal suatu inputan
  • Hover: Kondisi suatu inputan ketika user meletakan mouse diatas inputan
  • Active: Kondisi suatu inputan ketika user meng-klik inputan tersebut
  • Disable: Kondisi suatu inputan yang tidak bisa diklik atau non-active, hal ini biasanya karena sistem yang mengaturnya.

Semoga bermanfaat 🙂

UI Designer at Paperpillar, writer at Insight

Berikut adalah hal-hal yang bisa teman-teman pertimbangkan saat membuat UI design 🙂

1. Shadow

Bukan bermaksud mengajak menghindari penggunaan shadow. Saya sendiri sangat menyukai shadow, dengan menggunakan shadow, sebuah elemen terlihat sangat menonjol. Tapi sebelum kamu memutuskan untuk menggunakan shadow, sebaiknya kroscek dulu dengan developer. Apakah memungkinkan untuk menggunakan shadow? Jika memungkinkan maka silahkan gunakan shadow.

Alternatif jika belum memungkinkan menggunakan shadow saat development

Tapi jika memang dalam versi awal ini belum bisa menggunakan shadow karena kendala teknis misalnya, maka jangan dipaksakan untuk mendesain menggunakan shadow. Sebagai alternatifnya bisa menggunakan border terlebih dahulu jika memang tujuannya adalah sebagai pemisah antara elemen dengan background. Atau membuat background nya menjadi lebih gelap


2. Border terlalu tipis hampir tidak terlihat

Saya menyukai design minimalis dan clean. Hal itu membuat saya berusaha untuk selalu membuat design yang clean. Bahkan jika diperlukan adanya border, saya akan membuat border itu se-subtle/sehalus mungkin, agar terlihat clean.

Padahal dengan border yang subtle akan membuat user kesulitan untuk memisahkan antar konten saat melihatnya. Seperti contoh dibawah ini.

Design yang saya anggap clean, dengan border yang tipis. Tapi jika dilihat, akan membuat susah untuk fokus di satu konten, karena konten yang lain terasa bercampur karena border yang kurang jelas.

 

Dengan menggunakan border yang jelas, akan memperjelas juga pemisah antar konten. Sehingga jika dilihat, akan membantu untuk fokus di satu konten

Design clean memang sangat diidamkan, tapi diatas itu ada kenyamanan user yang harus diperhatikan.


3. Ketika membuat dialog konfirmasi. Jangan membuat semua tombol CTA terlihat sama

 

Jika konteksnya adalah memberikan konfirmasi dalam sebuah flow. (Misal: Flow Download File, Flow Pemesanan, Flow Pengisian Data) , Maka sebaiknya tombol yang menuntun user untuk melanjutkan ke flow berikutnya dibuat menjadi lebih jelas.

Karena dengan membuat tombol terlihat sama akan membuat user berpikir selama beberapa saat untuk mencari tombol untuk melanjutkan ke flow berikutnya.


4. Jangan membuat form isian yang terlalu panjang

 

Form isian yang terlalu panjang dalam satu halaman akan membuat user sedikit ketakutan. Maka jika memungkinkan untuk dibuat menjadi beberapa halaman maka lakukanlah.

Dengan membuat flow pengisian data menjadi beberapa halaman akan ada semacam “Sense of achievement” yang membuat user nyaman untuk melanjutkan ke halaman berikutnya karena mengetahui berapa step yang harus dilalui.

Dan jika terjadi kesalahan dalam pengisian inputan, user juga akan lebih cepat untuk memperbaikinya.


5. Jangan lupa membuat Feedback

Feedback yang dimaksud disini adalah hal yang selanjutnya terjadi setelah user melakukan suatu operasi. Misalnya: Upload Foto. Upload foto membutuhkan waktu untuk mengupload ke server , sehingga user diharuskan untuk menunggu.

Jika setelah user memilih foto dan tidak ada feedback sama sekali maka user akan kebingungan. Mereka akan bertanya tanya apa yang terjadi? apa yang harus dilakukan? apakah fotonya sudah ter-upload?

Saat membuat design jangan lupa untuk selalu membuat feedback, terlebih jika ada kondisi dimana user diharuskan untuk menunggu. Semoga bermanfaat 🙂

 

UI Designer at Paperpillar, writer at Insight

Salah satu tahap dalam pembuatan sebuah produk adalah melakukan User Interview.

User Interview merupakan tahap untuk mengetahui apa kesulitan user, ataupun kebiasaan user terkait dengan masalah yang akan kita pecahkan melalui sebuah produk.

Artikel ini akan membahas tentang Open-Ended dan Closed-Ended Questions dalam konteks saat melakukan User Interview.

Open-Ended Questions

  1. Apa pertimbangan Anda saat memilih tempat makan?
  2. Tempat makan seperti apa yang Anda sukai?
  3. Tempat makan seperti apa yang Anda hindari?
  4. Bagaimana Anda mencari suatu tempat makan?
  5. Apa kesulitan mencari tempat makan dengan cara tersebut?
  6. Apa kesulitan mencari tempat makan melalui internet?

Open-Ended Questions — adalah pertanyaan untuk mendapatkan jawaban yang luas.

Open-Ended Questions — cocok untuk mencari tahu lebih dalam mengenai hal hal apa saja yang menyulitkan user ataupun hal-hal yang menjadi pertimbangan user.

Open-Ended Questions — cocok untuk ditanyakan saat sesi user interview yang bertemu secara langsung dengan partisipan.

Open-Ended Questions — cocok untuk mendapatkan jawaban yang diluar perkiraan Anda.

Closed-Ended Questions

  1. Apakah Anda tertarik dengan tempat makan yang direkomendasikan oleh teman?
  2. Apakah harga menjadi pertimbangan Anda dalam memilih tempat makan?
  3. Apakah tipe masakan menjadi pertimbangan Anda memilih tempat makan?
  4. Apakah Anda pernah mencari suatu tempat makan melalui internet?
  5. Apakah Anda pernah melakukan reservasi di suatu tempat makan sebelum berkunjung?
  6. Dalam sebulan, berapa kali Anda mencari tempat makan untuk suatu acara?

Closed-Ended Questions — digunakan untuk jawaban yang singkat seperti “Ya” , “Tidak”, “Pernah” , “Belum” ataupun jawaban yang menggunakan jumlah seperti “1 kali” , “2 kali”

Closed-Ended Questions — cocok digunakan saat Anda melakukan survey , karena Anda akan mendapatkan respon yang lebih tinggi saat partisipan tidak perlu menulis terlalu banyak.

Closed Ended Questions — cocok untuk pertanyaan yang kita sudah bisa kita prediksi jawabannya (contoh: 1kali, 2kali, 3kali, lebih dari 3 kali)

Closed Ended Questions — mudah untuk dianalisis menggunakan presentase, karena kita bisa memprediksi jawabannya.

 

UI Designer at Paperpillar, writer at Insight

Saat Designer kehabisan ide

April 11, 2018  ·

  Advices, Design

Kita semua pernah mengalaminya, dan itu cukup menyebalkan. Tengah dikejar deadline tapi tiba tiba gak ada ide. “Layout yang nyaman untuk halaman pembayaran seperti apa ya?” , “Flow yang nyaman untuk fitur ini seperti apa ya?

Mungkin beberapa cara dibawah ini bisa temen temen coba untuk memancing ide ide cemerlang.

Saat desainer kehabisan ide, buka aplikasi atau produk sejenis

1. Buka aplikasi atau produk sejenis

Temen temen mendapatkan tugas untuk merancang flow sebuah fitur pemesanan. Tapi di tengah tengah merancang flow tiba tiba kehabisan ide dan bingung untuk melanjutkan.

Untuk memancing ide keluar, temen temen bisa melihat produk sejenis yang memiliki flow yang mirip. Lihat bagaimana flow dari produk tersebut, tapi jangan langsung dicontek.

Coba analisa apakah ada yang bisa ditingkatkan dari flow produk tersebut. Atau coba buat daftar keunggulan dari flow tersebut lalu pilih mana yang bisa dikembangkan sesuai dengan kebutuhan dari flow yang sedang temen temen kerjakan.

Contoh lainnya, temen temen mendapatkan tugas untuk merancang halaman pembayaran.

Setelah mendapatkan info kebutuhan user untuk halaman pembayaran, temen temen mulai mendesain halamannya, Tapi di tengah tengah mengerjakan design kebingungan untuk merancang layout nya.

Untuk memancing ide keluar, temen temen bisa melihat website atau aplikasi sejenis yang juga memiliki halaman pembayaran yang fungsi nya kurang lebih sama dengan yang sedang temen temen rancang.

Ingat, jangan langsung mencontek. Karena setiap produk memiliki kebutuhan yang berbeda beda. Pelajari dulu bagaimana layout dari produk tersebut. Apa yang membuat layout tersebut nyaman.

Jika sudah menemukan keunggulan dari layout produk tersebut. Coba sesuaikan dengan kebutuhan dari halaman yang sedang temen temen rancang.

Cara seperti ini sering disebut sebagai Competitive Analysis

Saat desainer kehabisan ide, lakukan crazy8

2. Melakukan Crazy8 dengan teman kerja

Crazy8 adalah salah satu cara brainstorming yang bertujuan untuk mengumpulkan ide sebanyak banyaknya. Bagaimana cara melakukannya?

  • Ajak teman kerja kalian, minimal 3 orang
  • Sediakan kertas hvs dan spidol
  • Bagikan 1 kertas dan 1 spidol ke setiap orang
  • Minta tiap orang untuk melipat kertas menjadi 8 bagian
  • Ceritakan masalah yang sedang kalian pecahkan. Apakah itu pembuatan flow atau perancangan suatu halaman
  • Minta mereka menggambar solusi di satu bagian kertas, dan beri batas waktu 30 detik. Setelah itu ulangi sampai 8 bagian kertas terisi
  • Setelah semua kertas terisi minta setiap orang untuk menjelaskan ide nya.
  • Dengan begini akan terkumpul banyak ide dalam waktu yang singkat

Crazy8 bertujuan untuk mengumpulkan ide sebanyak banyaknya yang mana sangat memungkinkan untuk menjadi pemancing solusi yang sedang dicari.

Untuk mengetahui lebih tentang crazy8, temen temen bisa menyimak penjelasan di artikel ini

3. Ingat kembali apa masalah yang akan dipecahkan

Sebagai designer kadang kita sering berpikir terlalu jauh, itu bukan hal yang buruk, tapi kadang membuat kita jarang fokus ke permasalahan yang sebenarnya harus kita pecahkan. Saat kita mengalami kebuntuan dalam merancang sesuatu, coba berhenti sejenak dan ingat kembali apa sebenarnya masalah yang akan kita pecahkan.  Semoga bermanfaat 🙂

Saat desainer kehabisan ide, ingat kembali masalah apa yang ingin dipecahkan


Artikel ini pertama kali dipublikasikan dalam Medium Insight

UI Designer at Paperpillar, writer at Insight

1. Apa itu konteks?

Menurut wikipedia, Konteks adalah kondisi di mana suatu keadaan terjadi. Hmmm…. oke agak membingungkan :)) , mari gunakan contoh.

Contoh 1:

Anda berada di mini market, Anda mengambil beberapa barang, Anda membawanya ke kasir, lalu anda membayar dan pulang. Maka konteks dari kegiatan Anda tadi adalah proses membeli barang dengan tujuan mendapatkan barang.

Contoh 2:

Anda berada di rumah makan, Anda melihat menu, Anda bilang apa makanan yang Anda inginkan, dan kemudian makanan Anda datang. Maka konteks dari kegiatan Anda tadi adalah proses memesan makanan dengan tujuan mendapatkan makanan.

2. Pentingnya sebuah konteks

Bayangkan jika saat Anda di mini market, membawa banyak barang dan saat tiba di kasir, sang kasir malah menaruh kembali barang barang Anda di rak seperti semula, tanpa memberitahu alasannya. (yah… walaupun ini gak mungkin terjadi sih)

Jika hal itu terjadi pasti Anda akan kebingungan, karena konteks Anda adalah sedang dalam proses membeli barang. Tapi hal yang baru saja terjadi sama sekali tidak berhubungan dengan proses membeli barang.

3. Konteks dalam pembuatan produk digital

Sebagai designer, dalam membuat sebuah produk digital, banyak sekali konteks yang harus kita pikirkan.

Kita ambil contoh fitur login di online shop. Fitur login adalah fitur yang digunakan user untuk masuk ke dalam akun nya. Dalam mengakses fitur login ada beberapa kondisi:

Kondisi 1:

Budi membuka suatu website online shop, lalu melakukan login, dengan tujuan ingin melihat status pengiriman barang yang kemaren dibelinya dan juga ingin mengedit data profile nya. Jadi konteks pada kondisi 1 adalah… Budi melakukan login dengan tujuan melihat status pengiriman barang.

Kondisi 2:

Budi membuka suatu website online shop, lalu memilih barang, lalu melakukan checkout, Karena Budi belum login maka untuk melanjutkan proses pemesanan barang, sistem dari website tersebut meminta Budi untuk login, agar datanya bisa tersimpan di akun Budi. Pada kondisi 2, konteksnya adalah… Budi melakukan login, karena saat melakukan proses pemesanan barang, sistem mendeteksi bahwa budi belum login, sehingga sistem meminta budi untuk melakukan login agar bisa melanjutkan proses pemesanan. Saat melakukan perancangan desain, kita harus membuat masing masing alur untuk dua kondisi tersebut. Kenapa harus membuat dua alur untuk sebuah fitur yang sama? Karena walaupun fiturnya sama tapi konteksnya berbeda.

 

Untuk kondisi 1, kita bisa membuat alur sebagai berikut:
  • Budi membuka website online shop
  • Budi mengklik menu login
  • Setelah login, Budi diarahkan ke halaman user profile

Untuk kondisi 2, kita bisa membuat alur sebagai berikut:
  • Budi membuka website online shop
  • Budi memilih barang lalu memasukkan ke keranjang belanja
  • Budi menekan tombol checkout
  • Karena Budi belum login maka sistem meminta Budi untuk login dengan menampilkan form login
  • Setelah login, Budi diarahkan ke halaman pembayaran.

Bayangkan jika kita tidak membedakan alurnya, Pada kondisi 2, setelah Budi melakukan login, Budi diarahkan ke halaman user profile. Tentu Budi akan kebingungan. Karena konteksnya Budi sedang dalam proses membeli barang, tapi kenapa tiba2 malah berada di halaman user profile.

4. Konteks kurang lebih adalah guideline

Dengan mengerti sebuah konteks kita bisa membayangkan apa tujuan dari user tersebut dan kita bisa membuat alur yang informatif sehingga membuat user nyaman untuk mencapai tujuannya.

Semoga bermanfaat 🙂 Special thanks to Solechan yang telah membantu dalam proses penulisan artikel ini.

Artikel ini pertama kali dipublikasikan dalam Medium Insight

UI Designer at Paperpillar, writer at Insight

Kamu bukanlah penggunamu. Tetapi bila kamu bisa menemukan siapa penggunamu dan mempelajari mereka dalam pembuatan desain, kamu akan bisa menghasilkan produk yang lebih baik.

Read more

Saya yakin kamu pernah mendengar tentang persona dan skenario, tapi mari mulai dengan penjelasan singkat tentang kegunaan mereka dalam proses desain:

Read more

Ingat hari-hari di mana mengklik mouse adalah pemicu interaksi yang paling banyak digunakan pada situs atau aplikasi? Masa itu sudah berlalu.

Read more

Netflix mengenalmu dengan baik - begitu baiknya hingga sekarang ia membuat movie art baru berdasarkan preferensimu.

Read more

Fungsi pencarian adalah seperti perbincangan antara pengguna dengan sistem: pengguna menyatakan apa kebutuhan informasi mereka sebagai pertanyaan, dan sistem merespon dengan menampilkan rangkaian hasil pencarian. Fungsi pencarian adalah aktivitas dasar dan elemen penting dalam membangun situs yang berat-konten.

Read more

Kesuksesan Amazon adalah contoh nyata dari prinsip yang terkadang sulit diterima komunitas desain: desain yang berhasil belum tentu ‘cantik’.

Read more

Bukanlah sebuah rahasia bahwa industri kreatif bisa menguras habis ide-idemu, namun saya menemukan bahwa kreativitas memiliki kesamaan dengan otot.

Read more

Minggu lalu, kami memberikan tips-tips dari Dennis Field mengenai bagaimana memberikan umpan balik yang lebih baik kepada para desainer.

Read more

Dalam dunia industri desain yang kompetitif hari-hari ini, portfolio adalah kunci utama untuk menarik perhatian klien/perusahaan.

Read more

Belakangan ini saya melihat ada kecenderungan para desainer untuk melewatkan proses wireframing atau low fidelity mockups dan langsung mengerjakan tahap mendesain User Interface (UI).

Read more

Kita semua tentunya tahu bahwa sebagai manusia, kita hanya bisa menjadi lebih baik ketika kita mau keluar dari zona nyaman kita.

Read more

UX bukan hanya tentang design, tetapi UX adalah prinsip inti dari sebuah bisnis di industri digital. Apple melakukan perubahan ketika memproduksi iPod. Music player mini ini menjadi trend dimasanya. Bukan karena teknologi yang ada di dalam iPod itu tetapi Apple menghadirkan pengalaman baru dan cara yang baru dalam mendengarkan music.

Read more

Saat ini Youtube adalah salah satu website favorit bagi kalangan masyarakat di seluruh dunia. Youtube juga semakin populer dengan munculnya berbagai channel menarik dan berkualitas. Bahkan dengan meningkatnya kepopuleran Youtube menjadi lahan baru bagi konten creator untuk mendapatkan penghasilan melalui Youtube.

Read more

Terkadang untuk menjaga layer design anda agar tertata dengan baik, penamaan yang tepat dan mengelompokkan secara baik diperlukan waktu yang cukup. Apa yang dapat kita lakukan untuk membuatnya menjadi lebih cepat ? Kali ini kita akan melihat beberapa trik untuk mengelolah layer design di Sketch agar lebih cepat dan lebih baik.

Read more

Sebagai seorang designer, anda adalah seorang manusia kreatif yang bekerja di industri digital atau teknologi. Anda mungkin pernah mendengar bahwa robot dapat menggantikan pekerjaan manusia termasuk pekerjaan designer.

Read more

Tips Dasar Untuk Membuat Ilustrasi

January 17, 2018  ·

  Design

Untuk membuat ilustrasi yang baik diperlukan yang namanya konsistensi. Untuk menjadi seorang ilustrator yang baik, anda harus terus berlatih, meskipun memerlukan waktu yang tidak singkat. Tetapi percayalah latihan adalah salah satu cara terbaik untuk belajar. Kali ini kami akan berbagi tips dasar ketika akan membuat ilustrasi yang baik.

Read more

Prinsip Dasar Visual Design

January 12, 2018  ·

  Design

Ada satu hal yang perlu dipahami oleh setiap designer ketika ingin membuat karya design yaitu tentang prinsip dasar visual design. Karena prinsip dasar ini merupakan acuan seorang designer ketika akan membuat design, sehingga design yang dibuat menjadi lebih maksimal.

Read more

3 Kunci Principle Web Navigation

January 11, 2018  ·

  Design

Berikut cara untuk membuat fondasi digital experience product anda agar dapat berjalan lancar. Sehingga anda dapat membantu user anda menemukan apa yang mereka butuhkan atau menyelesaikan task mereka.

Read more

Dulu animasi hanya dianggap sebagai elemen tambahan (hiasan) saja pada sebuah interface web maupun app. Seiring perkembangan zaman, saat ini designer menggunakan animasi untuk meng engage user atau target audience mereka.

Read more

Kerja secara remote saat ini telah menjadi tren. Dimana sistem remote sendiri tidak mengharuskan pekerja untuk bekerja di kantor perusahaan dia bekerja. Mereka dapat dengan bebas bekerja di manapun, seperti di cafe, rumah, coworking space bahkan di pantai sekalipun.

Read more

Business owner dan web designer harus menentukan fitur dan konten apa yang harus mereka tambahkan di website mereka. Variabel seperti warna, design button, animasi, user flow, search engine optimization, font, photos & video, page performance dan masih banyak lagi. Semua hal itu sangat berperan secara keseluruhan pada sebuah website.

Read more

Design workflow adalah suatu proses design yang dilalui ketika akan membuat sebuah karya design atau product. Kami akan membagikan design workflow yang ideal yang dapat kalian gunakan ketika membuat sebuah karya design atau product.

Read more

Ketika memikirkan tentang user experience, kita sering memikirkan fitur sebuah product yang sederhana, baik dan membuat user mudah ketika menggunakannya. Tetapi faktanya, sebuah fitur hanyalah bagian kecil dari sebuah product.

Read more

Mengapa Research Itu Penting ?

December 15, 2017  ·

  Design

Ingin membuat sebuah product yang disukai oleh orang? Anda harus melakukan research yang lebih. Jika anda terbiasa menerima feedback dengan frekuensi yang sering, anda akan memiliki wawasan yang penting tentang product yang akan anda buat dan akan mencegah anda membangun sesuatu yang tidak diinginkan orang.

Read more

Alasan Design Thinking Itu Penting

December 8, 2017  ·

  Design

Apa yang akan anda pikirkan jika ada cara manual untuk meciptakan sebuah product, experience atau service ?. Kami ingin berbagi pengalaman yang berhubungan dengan design thinking. Ketika saya menggunakan design thinking untuk merenungkan masalah yang terjadi di sekelompok orang tertentu. Saat itulah saya menemukan solusi terbaik untuk sebuah masalah yang terjadi.

Read more

User Journey adalah perjalanan dimana user menavigasi sebuah website untuk mencapai hasil yang diinginkan. Untuk menemukan sebuah informasi atau menyelesaikan task tertentu. Layout sebuah website mempengaruhi "flow" user. Project manager dan UX Designer melakukan research pada langkah-langkah yang harus dilakukan user dalam proses tertentu dan menentukan cara yang paling efisien untuk memfasilitasi kebutuhan user.

Read more

Visual hierarchy sangat penting diterapkan untuk menghasilkan website yang baik. Visual hierarchy adalah salah satu prinsip utama yang dapat membuat website anda mencapai tujuan yang diinginkan.

Read more

Information architecture (IA) berfokus pada pengorganisasian, menyusun struktur dan labeling konten secara efektif dan berkelanjutan. Tujuannya adalah membantu user menemukan informasi dan menyelesaikan task nya.

Read more

Trend Web Design tahun 2017

November 27, 2017  ·

  Design

Seiring berjalannya waktu, ada beberapa trend web design yang paling signifikan di tahun 2017 ini. Pada artikel ini, kami akan membagikan daftar trend web design yang paling signifikan di tahun 2017, kemungkinan trend tersebut akan menentukan arah design web yang akan datang di tahun 2018.

Read more

Apakah kalian pernah berpikir, bagaimana sih cara untuk menjadi seorang UX/UI Designer, sedangkan tidak memiliki latar belakang pendidikan design atau menyukai design tetapi tidak tahu apa yang harus dilakukan untuk menjadi seorang UI/UX Designer ? sedangkan anda bukan orang yang mengerti tentang design.

Read more

Bagaimana cara anda untuk tetap disiplin dan tetap fokus ? Bagaimana memaksimalkan waktu anda sebagai freelancer ?. Pada artikel ini, teman-teman akan menemukan berbagai strategi yang berbeda agar anda dapat memaksimalkan waktu anda, belajar dari pengalaman - pengalaman para freelancer lainnya.

Read more

Setiap bidang pekerjaan tentunya memerlukan keahlian tertentu, termasuk bidang UX Design. Artikel kali ini akan membahas tentang apa yang menjadi harapan seorang pemimpin di perusahaan terhadap seorang UX Designer.

Read more

Tingkat kesulitan itu relatif dan tergantung pada bagaimana Anda memahaminya.

Read more

User experience yang baik adalah salah satu faktor kunci keberhasilan model bisnis digital.

Read more

Untuk menjadi seorang designer yang terus berkembang, anda perlu mendorong diri anda untuk keluar dari zona nyaman anda. Read more

Banyak faktor yang menjadikan seorang UX designer lebih baik seperti kerja keras, soft skill, pengalaman, bahkan mungkin karisma.

Read more

Orang suka mendengarkan musik setiap hari, apapun jenis musiknya. Mengingat fakta ini, ada beberapa product music streaming services yang telah di rancang untuk para pencinta musik. Kali ini kami akan membagikan elemen - elemen UI Design yang perlu didesign pada sebuah music streaming services.

Read more

Animasi yang diterapkan pada visual lebih banyak memecahkan masalah fungsional pada sebuah interface dan membuat sebuah interface terasa lebih real dan lebih responsif bagi user. Berikut taktik animasi yang dapat mengimprove fungsional dan mampu memberikan kekuatan emosional pada mobile interface anda.

Read more

4 Langkah Design Thinking

October 16, 2017  ·

  Design

Design thinking adalah proses membuat ide-ide baru dan inovatif yang digunakan untuk memecahkan sebuah masalah. Design thingking tidak terbatas pada industri atau bidang keahlian tertentu

Read more

Saat ini dramatic typography cukup menjadi trend pada interface web. Tujuannya adalah untuk menampilkan display brand, meningkatkan konten text, membuat visual hierarchy yang baik dan membuat kesan yang mengesankan pada sebuah web.
Pada artikel ini , kita akan melihat contoh dramatic typography dalam design web.

 

Read more