Tips menyusun layout UI untuk app atau website

Salah satu proses dalam mendesain sebuah User Interface adalah mendesain tata letak atau layout. Berikut adalah studi kasus sebuah konsep aplikasi saat proses pembuatan layout.

1. Taruh semua Komponen yang diperlukan

Langsung taruh semua komponen yang diperlukan. Pada konsep aplikasi ini komponen yang diperlukan pada halaman ini diantaranya: Nama Restaurant, Alamat, Rating, Komentar dan lainnya.

Taruh saja semua komponen tanpa harus memikirkan bentuk dan letaknya. Untuk foto profil atau icon menu kita bisa menggunakan lingkaran dan taruh tulisan di dekatnya untuk mengingatkan kita apa maksud lingkaran itu.

Dengan langsung menaruh semua komponen yang diperlukan pada satu halaman akan membuat kita tidak melewatkan semua komponen itu.

2. Pilih mana yang komponen utama dan pendukung 

Pertimbangkan informasi apa yang paling penting untuk dilihat oleh user. Informasi yang paling penting akan menjadi komponen utama dan selain itu akan menjadi komponen pendukung.

komponen utama bisa kita buat lebih menonjol agar user mudah mencari atau membaca. Komponen pendukung bisa kita buat tidak terlalu mencolok agar tidak menjadi gangguan bagi user saat membaca.

Pada design kali ini komponen utama ditandai dengan text bold dan selain itu akan menjadi komponen pendukung

3. Ubah setiap komponen menjadi elemen UI

Kini saatnya merubah setiap komponen menjadi elemen UI. Ingat… untuk komponen yang penting harus lebih menonjol daripada komponen pendukung.

4. Setelah semua komponen selesai diubah menjadi elemen UI, kini saatnya untuk bermain puzzle.

Bayangkan Anda sebagai user dan sedang mengakses halaman ini, kira-kira informasi apa yang ingin segera Anda lihat.

Susun elemen elemen UI tadi sesuai dengan urutan kebutuhan dari user.

Dan jangan ragu untuk menambahkan elemen lainnya seperti mengganti background, menggunakan konsep “card” untuk memperjelas pembacaan informasi, pengelompokan informasi ataupun memperjelas hirarki.

5. Pertimbangkan Faktor Scalability

Tidak selamanya nama restaurant selalu pendek, ada nama restaurant yang mungkin bisa sampai 2 baris.

Tidak selamanya alamat restaurant selalu pendek, ada alamat yang panjang dan sangat mungkin hingga 2 baris.

Tidak selamanya hal hal yang kita design sesuai dengan kondisi di dunia nyata. Maka dari itu design yang kita buat harus bisa menghandle hal hal tersebut.

Pada design kali ini, kita mencoba menguji dengan menggunakan nama restaurant dan alamat yang cukup panjang. Dan ternyata layout seperti ini masih bisa menghandle hal tersebut

6. Persiapkan layout untuk semua kondisi

Akan ada kondisi dimana foto yang tersedia dari sebuah restaurant hanya satu.

Akan ada kondisi dimana sebuah restaurant belum memiliki review atau komentar.

Persiapkan design untuk semua kondisi yang akan terjadi. Hal ini akan membuat setiap kondisi yang terjadi selalu memiliki design bagus. 

Bayangkan jika kita tidak membuat design untuk semua kondisi. Ketika restaurant hanya memiliki satu foto dan belum punya komentar, maka yang terjadi akan seperti ini

6. Minta Feedback

Tunjukkan designmu dan mintalah feedback kepada rekan satu tim atau rekan yang lain. Feedback sangat penting, karena kita bisa mendapatkan cara pandang baru terhadap design yang sedang kita kerjakan. Dimana hal itu bisa berpengaruh positif pada saat proses iterasi atau membuat design selanjutnya.