Image

QUICK CONTACT













Image

Tips For Designing Progress Step UI Design Patterns 

08 Sep 2020 by Billy Gani
Langkah proses dari sebuah tindakan dalam website Anda sangat berperan penting dan positif untuk pengalaman pengguna. Anda biasanya dapat menemukan progress step ini pada halaman pendaftaran dan formulir pembayaran di mana pengguna perlu memasukkan data melalui beberapa langkah. Bagaimana Anda dapat merancang struktur progress step yang berfungsi dan efisien untuk website Anda?
 
Berikut ini beberapa tips yang dapat kami berikan untuk Anda:
 
Tambahkan Teks & Label
 
Setiap kali Anda merancang desain dari langkah proses (progress bar), Anda tentunya senantiasa membutuhkan label. Label sangat penting untuk menentukan tampilan antarmuka karena pengguna perlu mengetahui di mana mereka berada dalam suatu proses. Teks dapat dicetak dengan lebih tebal, menggunakan huruf besar, menonjol atau ditempatkan di latar belakang. Pastikan Anda memiliki beberapa teks yang menjelaskan setiap langkah dengan cermat.
 
Label tersebut dapat memberikan pengguna sinopsis tentang bagaimana keseluruhan proses berjalan dan apa saja yang dibutuhkan. Hal ini sangat berguna khususnya untuk halaman checkout yang panjang dimana Anda perlu mempertahankan pengguna hingga transaksi mereka selesai. Tetapi, tidak ada formula magis untuk label yang sempurna. Tetaplah berfokus pada label yang jelas dan padat. Lakukan apapun yang terbaik untuk website atau aplikasi perangkat yang Anda miliki.
 
Ikon = Kejelasan Visual
 
Jika Anda masih memiliki ruang dalam progress step Anda, cobalah untuk memasukkan beberapa ikon ke dalamnya. Ikon tersebut dapat berupa apa saja seperti grafik detail hingga ikon berformat SVG atau campuran keduanya. Tujuannya adalah untuk membantu pengguna agar lebih jelas dalam melihat proses yang sedang mereka lewati.
 
Seperti yang kami sebutkan sebelumnya, teks selalu baik untuk digunakan dalam klarifikasi. Tetapi, tampilan visual senantiasa menjual ide Anda dengan lebih cepat. Itulah mengapa Anda dapat mempertimbangkan penggunaan keduanya dalam desain progress step dengan ruang yang cukup. 
 
Buatlah Tampilan Antarmuka Anda Konsisten
 
Tujuan dari progress step ini adalah untuk memandu pengguna di sepanjang rangkaian halaman website Anda. Anda harus memikirkan hal ini sebagai bagian navigasi yang tetap dalam tempat yang sama setiap saat. Buatlah kehadirannya dengan konsistensi. Anda tidak perlu terlalu khawatir tentang berapa banyak ruang yang Anda gunakan atau seberapa mencolok Anda menampilkan label.
 
Tujuan pertama dan utama Anda adalah merancang desain dari hal yang tetap konsisten dan selalu terlihat. Dengan cara ini pengguna tahu persis kemana mereka harus melihat jika mereka ingin informasi lebih lanjut tentang kemajuan mereka dalam website Anda. Dan jika Anda merancang desain dengan konsistensi, pastikan Anda menjaga estetika yang sama di sepanjang jalan.
 
 
Contohnya, desain dari Moinul Ahsan diatas menggunakan warna teks yang lebih terang untuk langkah-langkah “selanjutnya”. Saat pengguna bergerak dari setiap formulir, setiap bagian akan menjadi gelap dan tetap konsisten dari halaman demi halaman. Anda dapat menggunakan efek ini dengan berbagai cara, tetapi tujuannya selalu sama - memberikan info yang cukup untuk membantu pengguna menentukan seberapa banyak langkah yang telah mereka selesaikan sejauh ini & berapa banyak langkah yang harus mereka tempuh sebelum mereka selesai.
 
Desain Gratis (Design Freebies)
 
Tidak ada alasan untuk tidak memulai desain dari awal jika Anda memiliki aset gratis untuk dikerjakan. Freebies adalah sahabat desainer khususnya untuk UI yang dirancang secara custom. Lihatlah beberapa contoh PSD dari progress step ini dan lihat apakah ada yang bisa Anda gunakan dalam mockup.


 
Gambar berikut merupakan contoh yang dirancang oleh Tahir Yousaf yang membuat progress step singkat dan sederhana. Ikon dasar dengan teks bening dibuat untuk progres step. Perhatikan juga tanda centang pada langkah yang sudah selesai, yang merupakan indikator kemajuan yang baik dalam waktu yang cepat.
 
 
Sebelumnya kami sempat menyebutkan penggunaan ikon garis karena yang sangat mudah untuk dimasukkan ke dalam website manapun. Dengan freebie ini, Anda bisa mendapatkan beberapa ikon garis yang dicampur ke dalam halaman checkout yang lebih baik. Bentuknya sangat mudah untuk dirancang ulang dan Anda bahkan dapat menukar ikon garis tersebut dan menyesuaikannya agar sesuai dengan apa pun yang Anda butuhkan. 
 
 
Berikut adalah beberapa tips yang dapat kami berikan untuk merancang progress step yang lebih baik untuk website Anda. Jika Anda masih baru dalam dunia website dan membutuhkan website yang berkualitas untuk mendorong visibilitas dari bisnis online Anda, kami dapat membantu. 
 
Eannovate sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik dapat membantu anda dalam bidang UI UX Design di Jakarta. Atau juga jika sebenarnya anda hanya memerlukan aplikasi perangkat dan website sederhana yang berkualitas dengan harga yang terjangkau, ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta dengan memberikan website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
 
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk melengkapi bisnis anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
 
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru dan terkini? Anda dapat mengunjungi blog kami, AlterSpace.
 
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta,  jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
 
Email : hello@eannovate.com atau menggunakan contact form.
 
 
 
 
 
Reference: DesignModo

CONTACT US

Let's Work Together

Have cool projects to work on ?

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.

Image
TELEPON
INDONESIA
+62813 8251 8448
Image
E-MAIL
hello@eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm
icon
icon
Free Consultation
icon