Beberapa Elemen yang Sering Terlewat Saat Mendesain Aplikasi
Thursday, June 21, 2018
Selamat siang teman-teman semua. Kali ini saya kembali akan membagikan artikel menarik yang saya dapatkan dari Teknologi.id mengenai beberapa elemen yang sering terlewat saat mendesain aplikasi. Artikel ini tentunya akan sangat bermanfaat bagi teman-teman yang berminat menggeluti bidang UI/UX design atau yang sudah bekerja di ranah tersebut. Semoga bermanfaat.
1. Loading
Elemen loading ini berfungsi agar user tahu bahwa aplikasi sedang dalam proses. Loading ini bisa diimplementasikan saat:
- Berpindah dari satu halaman ke halaman lain
- Memproses suatu data
- Mengupload foto
- etc
[size={defaultattr}]Jika tidak menampilkan elemen loading, besar kemungkinan user mengira aplikasi nya crash atau error. Karena tampilannya hanya kosong atau pada halamannya tidak terjadi perubahan.[/size]
[img]https://cdn-images-1.medium.com/max/1000/1*GlNnFDljsobuTkTTHrnozg.png[/img]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.
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.
[img]https://cdn-images-1.medium.com/max/800/1*R0fxdOS6UpmYj3Wb31yUOw.png[/img]Error State menunjukkan dimana letak kesalahan.
[img]https://cdn-images-1.medium.com/max/800/1*E7beTGKuDFLtVGA_LBC4aA.png[/img]Success State memberitahukan langkah selanjutnya yang harus dilakukan oleh user.
[img]https://cdn-images-1.medium.com/max/800/1*rKzRYIeoLR6U3H-thAzM5g.png[/img]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.
[size={defaultattr}]
[img]https://cdn-images-1.medium.com/max/800/1*Cwq1m1eljc_v0nDh3E9ptw.png[/img]
[/size]
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.
[img]https://cdn-images-1.medium.com/max/1000/1*8ZZAkZ9WoTykp1SVxSK-tA.png[/img]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 actionnya 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).
[img]https://cdn-images-1.medium.com/max/1000/1*fJdKMefCh5JnhWd319-lPA.png[/img]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
Semoga bermanfaat.
Artikel ini sudah pernah tayang di Teknologi.id.
