UI Design - Nafhan Raissa Syandana

Create Wireframe and Mockups:

Membuat wireframe dan mockup adalah langkah awal dalam proses desain UI yang membantu memvisualisasikan struktur dan layout dari suatu aplikasi atau halaman web sebelum proses development dimulai.

Berikut merupakan beberapa poin terkait dengan wireframe dan mockup dari design yang saya buat dan terapkan khususnya pada fitur edit profil beserta responsive page-nya:

> Struktur Halaman:
Layout yang bersih dan terstruktur dengan baik. Terdapat sidebar di sisi kiri untuk navigasi profil, ubah profil, riwayat konseling, dan log out, serta juga area utama di sebelah kanan untuk formulir ubah profil.

> Komponen User Interface:

Input fields untuk berbagai informasi pribadi. Tombol "Simpan" untuk menyimpan perubahan. Kemudian juga terdapat desain responsif yang ditunjukkan pada gambar kedua, memastikan tampilan yang konsisten di berbagai perangkat.

Berikut merupakan tampilan design untuk fitur edit profil page:

Kemudian berikut merupakan tampilan design untuk fitur edit profil khususnya untuk responsive page-nya:

Implementing Nielsen’s 10 Usability Heuristics:

Nielsen's 10 Usability Heuristics merupakan guiding principle yang digunakan untuk mengevaluasi kegunaan sistem. Berikut merupakan contoh implementasi beberapa prinsip heuristik tersebut pada design ini:

1. Visibility of System Status:

Status profil dari pengguna ditampilkan dengan jelas pada sidebar.

2. Match Between System and the Real World:

Penggunaan bahasa yang sederhana dan familiar seperti "Nama Lengkap", "Email", dll tentunya akan membantu memudahkan pengguna untuk mengetahui input yang harus dimasukkan dengan tepat.

3. User Control and Freedom:

Adanya tombol "Cancel" untuk membatalkan perubahan yang tidak diinginkan sehingga ada tindakan preventif yang membuat pengguna tidak mengubah field yang seharusnya tidak ingin untuk diubah.

4. Consistency and Standards:

Konsistensi dalam penggunaan warna, font, serta juga elemen User interface pada seluruh halaman termasuk dengan halaman-halaman yang lainnya.

5. Error Prevention:

Form diatur dengan jelas untuk mengurangi kemungkinan kesalahan input data.

6. Recognition Rather than Recall:

Informasi yang relevan selalu tersedia dan tidak memerlukan pengguna untuk mengingat informasi dari satu bagian ke bagian lainnya. Hal ini merupakan salah satu tujuan utama mengapa dibuat halaman edit profil ini, yaitu agar pengguna tidak perlu untuk mengulang tahapan-tahapan yang sama berulang kali ketika ingin melakukan booking session, sehingga mereka tidak perlu untuk mengisi field yang sama berulang kali.

7. Flexibility and Efficiency of Use:

Desain responsif yang memastikan penggunaan yang efisien baik di desktop maupun perangkat mobile.

8. Aesthetic and Minimalist Design:

Desain yang sederhana dan tidak berlebihan dengan berfokus pada fungsionalitas utama.

9. Help Users Recognize, Diagnose, and Recover from Errors:

Akan terlihat error message yang muncul ketika pengguna salah memasukkan input, hal ini juga tentunya sudah ditangani pada bagian back end-nya juga, misal untuk input nomor WhatsApp maka akan memastikan bahwa input-nya adalah berupa angka.

10. Help and Documentation:

Adanya bagian "Hubungi Kami" yang dapat digunakan pengguna jika memerlukan bantuan lebih lanjut atau jika pengguna membutuhkan informasi yang lebih lanjut untuk memastikan suatu hal tentang informasi tertentu.

Sehingga dengan memperhatikan poin-poin di atas, desain front-end untuk fitur edit profil ini dapat lebih optimal dalam segi fungsionalitas dan juga user experience. Desain responsif yang konsisten dan perhatian terhadap detail kegunaan akan membantu dalam menciptakan aplikasi yang intuitif dan efisien.