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