Tidak ada cara yang tepat untuk merancang UI situs web. Tidak ada templat penyembuhan semua untuk Anda pasang di merek Anda dan tekan “kirim.” Setiap situs memiliki tujuan, motif, strategi, dan gaya artistik masing-masing. Ini bukan artikel yang menguraikan seperangkat aturan pasti untuk merancang situs web yang sempurna setiap saat. Ini adalah artikel yang menjelaskan beberapa pola desain yang efektif sehingga Anda dapat memilih dan memodifikasi sesuai kebutuhan.
Kontrol input
Sifat dasar dari kontrol input adalah untuk memungkinkan pengguna Anda berinteraksi lebih dalam dengan situs. Tapi ada paradoks di sini: para pengguna biasanya ingin lebih banyak kontrol, tetapi setiap kontrol baru menyulitkan UI dan mengacaukan layar. Salah satu cara terbaik untuk mencapai keseimbangan yang sempurna adalah dengan mengendalikan permintaan.
Idenya adalah untuk menghemat ruang layar dengan menyembunyikan kontrol Anda alih-alih menyingkirkannya. Ini adalah solusi win-win dan bukti efektivitasnya terlihat pada bagaimana hampir semua situs web profil tinggi mengadopsinya. Kontrol dapat disembunyikan dan diungkapkan dengan mengarahkan ke konten yang terpengaruh ( Pinterest ), disembunyikan di menu drop-down yang diciutkan melalui tab ( Google Documents ), atau gabungan keduanya, seperti dengan contoh CollabFinder di atas.
Tetapi kontrol input tidak selalu merupakan kontrol yang tepat. Bidang input teks, misalnya, bisa menjadi alat yang berharga, tetapi banyak desainer menganggapnya sebagai hal yang wajar; mereka menggunakan bidang teks generik dan lupa itu ada di sana. Menyesuaikan kotak teks Anda tidak hanya akan menanamkan kepribadian ke situs Anda, tetapi juga membuat Anda berbeda dari situs lain. Ini bagus untuk dilihat, terutama jika warna kotak default tidak cocok dengan warna situs Anda.
Jika situs Anda berpusat di sekitar satu bidang input tunggal, atau jika input merupakan langkah pertama yang diperlukan, menetapkan fokus otomatis pada bidang input tersebut akan menjadi langkah cerdas. Fokus otomatis adalah ketika kursor dimulai di dalam bidang secara otomatis, yang paling terkenal digunakan oleh Google. Segera setelah Anda masuk ke Google, Anda cukup mulai mengetik permintaan Anda tanpa harus mengklik di mana pun.
Seperti dijelaskan dalam Pola UI Web 2014 , Google juga memasukkan nilai default dan pelengkapan otomatis, yang secara signifikan mempercepat tindakan pengguna dan membantu pengguna menjelajahi topik dan tema tambahan.
Jika Anda memerlukan sedikit bantuan dengan spesifik tentang cara mengubah kotak bidang teks, situs ini akan memberi Anda beberapa bantuan dengan pengkodean .
Navigasi
Salah satu elemen penting untuk desain UI adalah platform navigasi yang berfungsi penuh. Ini benar-benar diperlukan untuk setiap situs – tidak masalah seberapa hebat sisa situs Anda jika pengguna Anda tidak dapat menemukan apa pun.
Karena navigasi sangat penting, ada beberapa aturan universal yang dapat diterapkan ke setiap situs. Collis Ta’eed, salah satu pendiri Envato, memberi kita dua aturan utama navigasi:
- Pengguna harus selalu tahu lokasi mereka di situs (orientasi) – Untuk membuat pengguna Anda merasa nyaman, mereka perlu merasa seperti mereka dapat dengan percaya diri bergerak di sekitar situs Anda dan merampingkan situs di ujung mereka. Ada beberapa cara untuk mencapai ini, paling umum: item menu yang disorot, jalur remah roti dan judul.
- Sistem navigasi seharusnya tidak berubah (konsistensi) – Dengan kata lain, jangan gerakkan bilah menu Anda. Dengan menjaga sistem yang sama untuk navigasi, pengguna Anda akan dapat menemukan cara untuk menemukan jalan pulang, bahkan jika mereka tersesat.
Sumber: Praktik Terbaik UI Web
Komponen utama dalam navigasi adalah konten itu sendiri – lagi pula, tidak ada gunanya merancang sistem navigasi jika tidak ada yang peduli dengan apa yang mereka temukan. Seperti yang akan Anda lihat di atas, Google Maps API , menyediakan navigasi primer dengan menu horisontal sederhana, sedangkan navigasi sekunder diberikan prioritas lebih rendah di sisi kanan. (Dari perspektif standar, tempat yang paling terlihat untuk menambahkan menu navigasi adalah horizontal dan vertikal.) Tetapi Anda akan melihat konten menempati ruang paling banyak. Navigasi utama dimatikan dengan font kecil dan warna terang, memungkinkan konten untuk berbicara sendiri.
Navigasi tidak perlu mencolok atau bahkan menarik perhatian, seperti yang bisa kita lihat dari situs Proyek REI 1440 . Menu tiga pilihan minimal mereka lebih kecil daripada logo perusahaan. Seluruh navigasi didasarkan secara horizontal, memungkinkan konten untuk berputar dari kiri ke kanan saat pengguna memfilter berdasarkan waktu, aktivitas, atau lokasi. Tapi itu tidak berarti navigasi horizontal mengalahkan vertikal setiap kali …
Situs Supreme Sound Skullcandy , misalnya, memanfaatkan navigasi vertikal dengan baik dengan pendekatan gulir yang tidak lazim. Layar berputar saat Anda mengikuti kabel headphone di bawah halaman. Ini hanya dapat berfungsi karena menu navigasi di sebelah kanan tetap kokoh, menjangkar dan mengarahkan pengguna saat mereka menjelajah.
Untuk lebih banyak contoh navigasi horisontal dan vertikal, lihat kumpulan pola UI navigasi ini .
Pengaturan default
Pengguna jarang mengubah pengaturan default, bahkan jika mereka memiliki opsi untuk. Itu berarti Anda harus melakukannya dengan benar pertama kali.
Meskipun ini tampak seperti banyak tanggung jawab, ada sisi positifnya. Anda dapat memilih pengaturan default untuk tindakan yang Anda ingin pengguna ikuti. Ambil contoh, Living Social – audiens default untuk transaksi email adalah “semua orang,” yang mendorong pengguna untuk meneruskan penawaran ke lebih banyak orang.
Meskipun tergoda untuk mengambil kendali penuh atas pengaturan pengguna Anda, penting bagi UX bahwa Anda memberikan kebebasan kepada pengguna Anda. Membuat proses berbelit-belit untuk menjaga pengguna pada pengaturan default hanya akan membuat mereka frustrasi dan mendorong mereka menjauh.
Pengaturan default paling baik digunakan ketika Anda dapat membuat tebakan yang berkualitas tentang preferensi pengguna. Jika Anda tidak mengenal pengguna target Anda dengan baik, merencanakan pengaturan default mungkin lebih berbahaya daripada baik.
Faktor lain yang perlu dipertimbangkan adalah bidang input. Jangan gunakan default untuk apa pun yang memerlukan pemikiran pengguna, seperti mendaftar untuk buletin atau menerima ketentuan penggunaan. Artikel ini memiliki informasi lebih rinci tentang pengaturan default, termasuk contoh.
Tindakan yang dipandu
Sementara pengaturan default dapat membuat orang tidak nyaman dengan tingkat kontrol mereka, cara yang jauh lebih lembut untuk memandu tindakan mereka adalah kekuatan saran. Tindakan yang dipandu memungkinkan Anda mendorong keterlibatan, interaksi, dan bahkan umpan balik yang lebih dalam – selama tindakan yang Anda sarankan tidak merepotkan.
Sumber: LinkedIn, melalui 99 Desain
LinkedIn adalah salah satu contoh terbaik dalam hal menggunakan tindakan yang dipandu. Saat membuka halaman, pengguna biasanya akan melihat tindakan yang diminta, misalnya, mendukung keterampilan koneksi Anda. Sudah menjadi sifat manusia untuk menikmati membantu teman, jadi mendorong tindakan yang dipandu ini berhasil karena itu adalah sesuatu yang ingin mereka lakukan, tetapi mungkin tidak memikirkannya sendiri. Manfaat bagi LinkedIn adalah mendorong keterlibatan lebih dalam dengan situs mereka, meningkatkan investasi dan pengalaman pengguna.
Tindakan yang dipandu dapat digunakan pada tingkat yang lebih halus daripada LinkedIn. Dengan secara visual menekankan fungsi-fungsi utama, kontrol, dan tombol, seorang perancang dapat menyarankan dan menarik perhatian pada tindakan-tindakan yang disukai, banyak dengan cara yang sama seperti ajakan bertindak ditekankan.
Seperti yang Anda lihat di atas, lihat saja seberapa buruk Spotify ingin Anda mengunduhnya dibandingkan dengan, katakanlah, lihat fitur-fiturnya. Pola Web UI 2014 memiliki lebih banyak contoh cara diam-diam untuk menggunakan tindakan yang dipandu.
Kesimpulan
Elemen desain UI seperti kontrol input, navigasi, pengaturan default, dan tindakan yang dipandu adalah semua komponen UI yang sukses; Namun, itu adalah pilihan Anda tentang bagaimana Anda menerapkannya. Semua elemen ini serba guna dan dapat digunakan dengan fleksibel. Keputusan yang Anda buat dalam elemen desain UI seperti apa yang akan memengaruhi kepribadian situs Anda secara keseluruhan, jadi berhati-hatilah dalam memilih mana yang akan mewakili Anda secara tepat.
Untuk saran praktis tentang membangun antarmuka web berdasarkan contoh dari perusahaan top seperti AirBnB, Wufoo, Linkedin, dan lainnya, lihat Praktik Terbaik Web UI .
sumber:99designs.com
