Ketika datang untuk merancang atau mendesain ulang situs web, mudah untuk terpaku pada estetika. Apakah warna biru itu terlihat benar? Haruskah logo berada di sisi kanan layar, atau kiri? Bagaimana jika kita meletakkan GIF animasi raksasa di tengah halaman?
Namun, di dunia di mana orang-orang memiliki lebih dari 1.8 miliar situs web yang berpotensi mereka mendaratkan, Anda perlu memastikan milik Anda bukan hanya wajah yang cantik. Ini harus dirancang untuk kegunaan, betapa mudahnya situs web Anda digunakan, dan pengalaman pengguna (UX), betapa menyenangkannya berinteraksi dengan situs web Anda.
Sekarang, Anda dapat menghabiskan waktu bertahun-tahun mempelajari seluk beluk disiplin ilmu ini Tetapi demi memberi Anda titik awal, kami telah menyusun daftar pedoman dasar dan praktik terbaik yang dapat Anda terapkan ke desain ulang situs web atau peluncuran situs web Anda berikutnya. Kemudian, kami akan meninjau 10 fitur yang Anda perlukan di situs Anda untuk mempraktikkan rekomendasi ini. Mari selami.
- Kesederhanaan
- Hierarki Visual
- Kemampuan navigasi
- Konsistensi
- Respons
- Aksesibilitas
- Konvensionalitas
- Kredibilitas
- Berpusat pada Pengguna
1. Kesederhanaan
Meskipun tampilan situs web Anda tentu saja penting, kebanyakan orang tidak datang ke situs Anda untuk mengevaluasi seberapa apik desainnya. Mereka ingin menyelesaikan beberapa tindakan, atau untuk menemukan beberapa informasi tertentu.
Oleh karena itu, elemen desain yang tidak perlu (yaitu, elemen yang tidak memiliki tujuan fungsional) hanya akan membanjiri dan membuatnya lebih sulit bagi pengunjung untuk mencapai apa yang ingin mereka capai.
Dari perspektif kegunaan dan UX, kesederhanaan adalah teman terbaik Anda. Jika Anda memiliki semua elemen halaman yang diperlukan, sulit untuk menjadi terlalu sederhana. Anda dapat menggunakan prinsip ini dalam berbagai bentuk yang berbeda, seperti:
- Warna: Pada dasarnya, jangan gunakan banyak. Buku Pegangan Interaksi Komputer-Manusia merekomendasikan penggunaan maksimal lima (plus atau minus dua) warna berbeda dalam desain Anda.
- Tipografi: Tipografi yang Anda pilih harus sangat terbaca, jadi tidak ada font skrip yang terlalu berseni dan sangat minimal, jika ada. Untuk warna teks, sekali lagi, tetap minimal dan selalu pastikan itu kontras dengan warna latar belakang. https://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html Rekomendasi umum adalah menggunakan maksimal tiga tipografi berbeda dalam maksimal tiga ukuran berbeda.
- Grafik: Hanya gunakan grafik jika mereka membantu pengguna menyelesaikan tugas atau melakukan fungsi tertentu (jangan hanya menambahkan grafik willy-nilly).
Berikut adalah contoh yang bagus dari desain beranda yang sederhana namun efektif dari HERoines Inc:
2. Hierarki Visual
Terkait erat dengan prinsip kesederhanaan, hierarki visual berarti mengatur dan mengatur elemen situs web sehingga pengunjung secara alami tertarik pada elemen yang paling penting terlebih dahulu.
Ingat, ketika datang untuk mengoptimalkan kegunaan dan UX, tujuannya adalah untuk mengarahkan pengunjung untuk menyelesaikan tindakan yang diinginkan, tetapi dengan cara yang terasa alami dan menyenangkan. Dengan menyesuaikan posisi, warna, atau ukuran elemen tertentu, Anda dapat menyusun situs Anda sedemikian rupa sehingga pemirsa akan tertarik pada elemen-elemen tersebut terlebih dahulu.
Dalam contoh di bawah ini dari Spotify, Anda dapat melihat bahwa judul utama “Dapatkan 3 bulan Premium gratis” berada di atas hierarki visual dengan ukuran dan posisi halamannya. Ini menarik perhatian Anda ke misi mereka sebelum hal lain. Ini diikuti oleh CTA “Dapatkan 3 Bulan Gratis”, yang meminta tindakan. Pengguna dapat mengklik CTA ini, atau memindai item menu di atas untuk tindakan lebih lanjut.
Merencanakan navigasi intuitif di situs Anda sangat penting untuk membantu pengunjung menemukan apa yang mereka cari. Idealnya, pengunjung harus mendarat di situs Anda dan tidak perlu berpikir secara ekstensif tentang di mana harus mengklik selanjutnya. Bergerak dari titik A ke titik B harus tanpa gesekan mungkin.
Berikut adalah beberapa tips untuk mengoptimalkan navigasi situs Anda:
- Jaga agar struktur navigasi utama Anda tetap sederhana (dan di dekat bagian atas halaman Anda).
- Sertakan navigasi di footer situs Anda.
- Pertimbangkan untuk menggunakan remah roti di setiap halaman (kecuali beranda Anda) sehingga pengguna mengingat jejak navigasi mereka.
- Sertakan bilah pencarian di dekat bagian atas situs Anda sehingga pengunjung dapat mencari berdasarkan kata kunci.
- Jangan menawarkan terlalu banyak opsi navigasi per halaman. Sekali lagi, kesederhanaan!
- Sertakan tautan dalam salinan halaman Anda, dan perjelas ke mana perginya tautan tersebut.
- Jangan membuat pengguna menggali terlalu dalam. Coba buat peta wireframe dasar dari semua halaman situs Anda yang disusun seperti piramida: Beranda Anda ada di bagian atas, dan setiap halaman yang ditautkan dari sebelumnya membentuk lapisan berikutnya. Dalam kebanyakan kasus, yang terbaik adalah menjaga peta Anda tidak lebih dari tiga tingkat dalam. Ambil peta situs HubSpot, misalnya.
Satu petunjuk lagi: Setelah Anda menentukan navigasi utama (atas) situs Anda, jaga agar tetap konsisten. Label dan lokasi navigasi Anda harus tetap sama di setiap halaman.
Ini membawa kita dengan baik ke dalam prinsip kita selanjutnya …
4. Konsistensi
Selain menjaga navigasi Anda tetap konsisten, tampilan dan nuansa keseluruhan situs Anda harus serupa di semua halaman situs Anda. Latar belakang, skema warna, tipografi, dan bahkan nada tulisan Anda adalah semua area di mana konsistensi memiliki dampak positif pada kegunaan dan UX.
Itu tidak berarti setiap halaman harus mengikuti tata letak yang sama. Sebagai gantinya, buat tata letak yang berbeda untuk jenis halaman tertentu (misalnya, halaman arahan, halaman informasi, dll.). Dengan menggunakan tata letak tersebut secara konsisten, Anda akan memudahkan pengunjung untuk memahami jenis informasi apa yang mungkin mereka temukan di halaman tertentu.
Dalam contoh di bawah ini, Anda dapat melihat bahwa airbnb.com/help Airbnb menggunakan tata letak yang sama untuk semua halaman “Bantuan” -nya, sebuah praktik umum. Bayangkan bagaimana jadinya dari sudut pandang pengunjung jika setiap halaman “Bantuan” memiliki tata letaknya sendiri yang unik. Mungkin akan ada banyak bahu yang mengangkat bahu.
5. Responsivitas
Menurut Statista, 48% tampilan global halaman berasal dari perangkat seluler seperti smartphone dan tablet. Dan menurut penelitian kami, 93% orang telah meninggalkan situs web karena tidak ditampilkan dengan benar di perangkat mereka.
Takeaway di sini: Untuk memberikan pengalaman pengguna yang benar-benar hebat, situs Anda harus kompatibel dengan banyak perangkat berbeda yang digunakan pengunjung Anda. Dalam dunia teknologi, ini dikenal sebagai desain responsif.
Desain responsif berarti berinvestasi dalam struktur situs web yang sangat fleksibel. Di situs responsif, konten secara otomatis diubah ukurannya dan dirombak agar sesuai dengan dimensi perangkat apa pun yang kebetulan digunakan pengunjung. Ini dapat dicapai dengan template HTML yang ramah seluler, atau dengan membuat situs seluler khusus.
Pada akhirnya, lebih penting untuk memberikan pengalaman hebat di berbagai perangkat daripada terlihat identik di seluruh perangkat tersebut.
Di samping keramahan seluler, ada baiknya Anda menguji kompatibilitas lintas-lintas browser situs web Anda. Kemungkinan besar, Anda hanya melihat situs Anda di satu browser web, baik itu Google Chrome, Safari, Firefox, atau yang lainnya.
Sekarang adalah waktu untuk membuka halaman Anda di masing-masing browser ini dan mengevaluasi bagaimana elemen Anda muncul. Idealnya, tidak akan ada banyak perbedaan dalam presentasi, tetapi Anda tidak dapat mengetahui dengan pasti sampai Anda melihatnya sendiri.
6. Aksesibilitas
Tujuan aksesibilitas web adalah untuk membuat situs web yang dapat digunakan siapa saja, termasuk penyandang disabilitas atau batasan yang memengaruhi pengalaman menjelajah mereka. Sebagai perancang situs web, tugas Anda adalah memikirkan pengguna ini dalam paket UX Anda.
Seperti responsivitas, aksesibilitas berlaku untuk seluruh situs Anda: struktur, format halaman, visual, dan konten tertulis dan visual. Pedoman Aksesibilitas Konten Web (WCAG),, yang dikembangkan oleh Inisiatif Aksesibilitas Web dan Konsorsium World Wide Web, menetapkan panduan untuk aksesibilitas web. Dalam arti luas, pedoman ini menyatakan bahwa situs web harus:
- Dapat dipahami: Pengunjung mengetahui konten di situs Anda.
- Dapat dioperasikan: Fungsionalitas situs web Anda harus dimungkinkan dengan berbagai cara.
- Dapat dimengerti: Semua konten dan peringatan dapat dengan mudah dipahami.
- Kuat: Situs web Anda dapat digunakan di berbagai teknologi, perangkat, dan browser bantu.
Untuk menyelam lebih dalam ke topik ini, lihat Panduan Utama kami untuk Aksesibilitas Web.
7. Konvensionalitas
Tantangan besar dalam desain web adalah menyeimbangkan orisinalitas dengan harapan Anda. Sebagian besar dari kita adalah pengguna internet ahli, dan ada konvensi khusus yang sudah biasa kita gunakan dari waktu ke waktu. Konvensi tersebut meliputi:
- Menempatkan navigasi utama di bagian atas (atau sisi kiri) halaman.
- Menempatkan logo di kiri atas (atau tengah) halaman.
- Membuat logo dapat diklik, sehingga selalu membawa pengunjung kembali ke beranda.
- Memiliki tautan dan tombol yang berubah warna/tampilan saat Anda mengarahkan kursor ke atasnya.
- Menggunakan ikon keranjang belanja di situs e-niaga. Ikon ini juga memiliki lencana angka yang menandakan jumlah item dalam keranjang.
- Memastikan penggeser gambar memiliki tombol yang dapat diklik pengguna untuk memutar slide secara manual.
Sementara beberapa orang mungkin memilih untuk membuangnya ke luar jendela demi keunikan, ini adalah kesalahan. Masih ada banyak ruang untuk kreativitas dalam batasan konvensionalitas web.
Mari kita pertimbangkan secara singkat bidang desain lain, arsitektur. Kode bangunan dipasang sehingga orang dapat dengan mudah dan aman menghuni ruang. Seorang arsitek tidak mengeluh tentang kode-kode ini atau melanggarnya karena, selain dari dampak hukum, mereka menjamin keamanan dan kenyamanan tamu. Tidak peduli seberapa mempesona bangunan itu — jika Anda tersandung di tangga yang tidak rata atau Anda tidak bisa keluar dalam api, Anda mungkin lebih suka tinggal di luar.
Dengan cara yang sama, Anda dapat membuat pengalaman yang tak terlupakan sambil memenuhi harapan pengguna. Jika Anda melanggar apa yang diantisipasi pengguna, mereka mungkin merasa tidak nyaman atau bahkan frustrasi dengan situs Anda.
8. Kredibilitas
Tetap berpegang pada konvensi web memberikan kredibilitas situs Anda. Dengan kata lain, ini meningkatkan tingkat kepercayaan yang disampaikan situs Anda. Dan jika Anda berusaha untuk membangun situs yang memberikan pengalaman pengguna terbaik, kredibilitas sangat membantu.
Salah satu metode terbaik untuk meningkatkan kredibilitas Anda adalah dengan jelas dan jujur tentang produk atau layanan yang Anda jual. Jangan membuat pengunjung menggali puluhan halaman untuk menemukan apa yang Anda lakukan. Bersikaplah di depan di beranda Anda, dan dedikasikan beberapa real estat untuk menjelaskan nilai di balik apa yang Anda lakukan.
Tip kredibilitas lainnya: Miliki halaman harga, juga ditautkan di beranda. Daripada memaksa orang untuk menghubungi Anda untuk mempelajari lebih lanjut tentang harga, cantumkan harga Anda dengan jelas di situs Anda. Ini membuat bisnis Anda tampak lebih dapat dipercaya dan sah.
Berikut adalah contoh halaman harga efektif dari situs web Box:
9. Berpusat pada Pengguna
Pada akhirnya, kegunaan dan pengalaman pengguna bergantung pada preferensi pengguna akhir. Lagi pula, jika Anda tidak mendesain untuk mereka, untuk siapa Anda mendesain?
Jadi, meskipun prinsip-prinsip yang dirinci dalam daftar ini adalah titik awal yang bagus, kunci terakhir untuk meningkatkan desain situs Anda adalah melakukan pengujian pengguna, mengumpulkan umpan balik, dan menerapkan perubahan berdasarkan apa yang telah Anda pelajari.
Dan jangan repot-repot menguji kegunaan sendiri. Anda telah menginvestasikan banyak waktu ke dalam desain Anda, yang membawa bias Anda sendiri ke dalam persamaan. Dapatkan penguji yang belum pernah melihat situs Anda sebelumnya, sama seperti pengunjung pertama kali.
Berikut adalah beberapa alat pengujian pengguna untuk membantu Anda memulai:
- Website Grader: Alat gratis kami mengevaluasi situs web Anda berdasarkan beberapa faktor: seluler, desain, kinerja, SEO, dan keamanan. Ini kemudian menawarkan saran yang disesuaikan untuk perbaikan. Anda dapat mempelajari lebih lanjut tentang Website Grader di posting blog khusus kami.
- Crazy Egg: Lacak beberapa domain di bawah satu akun dan temukan wawasan tentang kinerja situs Anda menggunakan empat alat kecerdasan yang berbeda – peta panas, peta gulir, overlay, dan confetti.
- Loop11: Gunakan alat ini untuk membuat tes kegunaan dengan mudah – bahkan jika Anda tidak memiliki pengalaman HTML.
- Pengguna Mabuk: Bayar Richard Littauer untuk mabuk dan meninjau situs Anda. Tidak percaya padaku? Kami mencobanya.
Untuk opsi yang lebih bermanfaat, lihat daftar alat pengujian pengguna terbaik kami.
Semoga panduan ini bermanfaat dalam menginformasikan struktur halaman web dan website Anda secara keseluruhan. Tapi, bagaimana seseorang menerapkan pedoman ini? Mari kita lihat beberapa praktik terbaik yang dapat ditindaklanjuti yang dapat Anda ikuti selama proses desain.
- Pilih tipografi yang mudah dibaca dan dibaca sekilas.
- Pilih skema warna yang sesuai dengan merek Anda.
- Gunakan ruang putih untuk memecah teks dan elemen lainnya.
- Gunakan tekstur untuk menambah kepribadian dan kedalaman.
- Tambahkan gambar untuk melibatkan dan memberi tahu pembaca.
- Sederhanakan navigasi Anda.
- Jadikan CTA Anda menonjol.
- Optimalkan untuk seluler.
- Batasi opsi yang disajikan kepada pengguna.
1. Pilih tipografi yang mudah dibaca dan dibaca sekilas.
Tipografi mengacu pada bagaimana jenis — yang berarti huruf dan karakter — disusun dan disajikan di halaman. Karena tipografi situs web tidak hanya memengaruhi cara kita membaca tetapi juga bagaimana perasaan kita tentang teks di halaman web, penting untuk memilih dengan cermat.
Idealnya, Anda menginginkan jenis huruf yaitu:
- mudah dibaca
- mudah untuk membaca sekilas
- dapat diakses oleh semua pengguna
- terbaca di beberapa perangkat dan ukuran layar
Anda juga ingin itu sesuai dengan tampilan dan nuansa merek Anda. Misalnya, merek fesyen mewah Burberry menyegarkan logonya untuk pertama kalinya dalam 20 tahun pada 2018. Itu menggantikan jenis huruf serif lama dengan huruf tebal, semua topi, sans serif dan menjatuhkan lambang ksatria. Hasilnya adalah logo yang lebih sederhana dan tampak lebih modern yang lebih mudah dibaca di layar mana pun — dan itu mencerminkan perubahan di perusahaan untuk menjadi lebih transparan dan menarik bagi generasi muda.
2. Pilih skema warna yang sesuai dengan merek Anda.
Seperti tipografi, warna tidak hanya dapat memengaruhi cara kita memahami dan berinteraksi dengan konten, tetapi juga bagaimana perasaan kita tentang hal itu. Oleh karena itu, skema warna Anda harus mencentang kotak yang sama dengan tipografi situs web Anda. Itu harus:
- memperkuat identitas merek Anda
- membuat situs Anda mudah dibaca dan dinavigasi
- membangkitkan emosi
- terlihat bagus
Buzzfeed, misalnya, menggunakan warna primer kuning dan merah untuk menarik perhatian pengguna dan membuat mereka bersemangat tentang konten tersebut. Ini mencadangkan penggunaan warna biru utama — yang dikaitkan dengan kepercayaan — khusus untuk tautan dan tombol CTA. Kedua emosi tersebut ideal untuk dibangkitkan untuk sebuah situs media.
3. Gunakan ruang putih untuk memecah teks dan elemen lainnya.
Spasi putih mengacu pada area negatif dalam komposisi apa pun. Whitespace memberi pengguna jeda visual saat mereka memproses desain atau konten situs web, yang tidak hanya menyenangkan secara estetika. Dengan meminimalkan gangguan, spasi putih memudahkan pengguna untuk fokus, memproses informasi, dan memahami apa yang penting.
Itu berarti Anda dapat menggunakan spasi putih untuk menghindari menyebabkan kelebihan informasi atau kelumpuhan analisis — dan untuk menekankan elemen penting pada halaman. Ini dapat membantu membujuk pengguna untuk mengambil tindakan tertentu, seperti mendaftar untuk buletin, berbelanja koleksi terbaru Anda, dan banyak lagi.
Misalnya, Eb &flow Yoga Studio menggunakan spasi putih untuk mengarahkan pengguna ke tindakan tertentu: untuk mendaftar selama tiga minggu kelas. Perhatikan bahwa spasi putih tidak berarti tidak adanya warna atau citra. Sebaliknya, ini berarti bahwa setiap elemen pada halaman diposisikan secara strategis, dengan banyak ruang di antaranya, untuk menghindari pengunjung yang kewalahan atau membingungkan.
4. Gunakan tekstur untuk menambah kepribadian dan kedalaman.
Menyerupai permukaan tiga dimensi, taktil, tekstur jaring bertujuan untuk meniru sensasi fisik sentuhan dengan sensasi lain – penglihatan. Mereka adalah alternatif desain yang bagus untuk latar belakang warna solid, terutama jika Anda ingin menambahkan kepribadian dan kedalaman ke situs Anda.
Lihatlah tekstur di beranda untuk restoran Mony’s Tacos yang berbasis di Santa Barbara di bawah ini. Sepertinya kapur yang digambar di papan tulis, bukan? Saya tidak tahu tentang Anda tetapi saya hampir bisa merasakan kapur di jari-jari saya hanya dari melihatnya. Ini adalah tampilan yang sempurna untuk restoran yang bertujuan untuk menjadi pilihan Zona Funk pilihan California untuk kesenangan Meksiko.
5. Tambahkan gambar untuk melibatkan dan menginformasikan pembaca.
Menyeimbangkan antara teks dan gambar sangat penting dalam desain situs web. Menggabungkan visual dapat membuat konten Anda lebih informatif, menarik, dan mudah diingat. Anda mungkin pernah mendengar statistik bahwa orang hanya mengingat 20% dari apa yang mereka baca, tetapi 80% dari apa yang mereka lihat? Sementara persentase yang tepat diperdebatkan, ide dasarnya tidak. Lebih mudah bagi sebagian orang untuk belajar dan memproses informasi secara visual.
Berikut adalah contoh unik dari memecah teks dengan gambar dari situs web perusahaan kosmetik. Ini menunjukkan betapa tak terbatasnya kemungkinan memasukkan citra ke dalam desain situs web Anda.
Navigasi adalah salah satu elemen desain terpenting di situs web. Ini berdampak pada apakah pengunjung tiba di beranda Anda dan menjelajah, atau klik tombol “Kembali”. Itulah mengapa penting untuk membuatnya sesederhana mungkin.
Banyak situs web memilih bilah navigasi horizontal. Gaya navigasi ini mencantumkan halaman utama secara berdampingan dan ditempatkan di header situs web.
Ambil bilah navigasi di Blavity sebagai contoh. Bagian yang ditampilkan mencakup tiga kategori konten — “Berita”, “Op-Eds”, dan “Gaya Hidup” — serta tautan ke halaman pengiriman dan halaman pendaftaran mereka. Ini memberi pengunjung akses mudah ke halaman yang mungkin mereka cari. Item nav lainnya ditempatkan di menu tarik-turun berlabel “Lainnya” sehingga masih mudah ditemukan tetapi tidak berantakan ke navigasi tingkat atas. Akhirnya, bilah navigasi lengket sehingga pengunjung tidak perlu menggulir ke atas dan ke bawah halaman untuk menelusuri situs.
7. Buat CTA Anda menonjol.
CTA adalah elemen pada halaman web, iklan, atau konten lain yang mendorong audiens untuk melakukan sesuatu. Ajakan bertindak bisa berupa mendaftar, berlangganan, memulai uji coba gratis, atau mempelajari lebih lanjut, di antara banyak lainnya.
Anda ingin CTA Anda muncul dalam desain situs web Anda. Untuk mewujudkannya, pertimbangkan bagaimana Anda menggunakan warna serta elemen lain seperti warna latar belakang, gambar di sekitarnya, dan teks di sekitarnya.
Square memberikan contoh ajakan bertindak yang sangat baik. Menggunakan satu gambar untuk menunjukkan kesederhanaan menggunakan produk mereka, Square menggunakan tipografi yang berani untuk juga menunjukkan betapa unik dan berorientasi masa depan produk mereka. Dengan latar belakang dramatis ini, CTA “Get Started” biru menunggu klik Anda.
8. Optimalkan untuk seluler.
Kami telah membahas betapa pentingnya bagi situs web Anda untuk responsif. Tetapi karena perangkat seluler menyumbang 59% dari kunjungan mesin pencari organik pada tahun 2021, kami menggandakan betapa pentingnya merancang situs web Anda agar ramah seluler. Itu mungkin berarti mengubah atau menghapus beberapa elemen yang akan mengacaukan ukuran layar yang lebih kecil atau berdampak negatif pada waktu buka.
Untuk contoh salah satu desain situs web seluler terbaik, bandingkan beranda Etsy di desktop vs seluler. Di desktop, Anda akan melihat navbar dengan kategori. Mengarahkan kursor ke setiap kategori akan menampilkan menu tarik-turun.
Di ponsel, ini runtuh di belakang tombol hamburger, yang meningkatkan tampilan dan kinerja situs seluler. Anda juga akan melihat bahwa gambarnya lebih besar — sempurna untuk mengetuk dengan jari Anda di layar ponsel.
9. Batasi opsi yang disajikan kepada pengguna.
Menurut Hick’s Law, meningkatkan jumlah dan kompleksitas pilihan akan meningkatkan waktu yang dibutuhkan seseorang untuk membuat keputusan. Ini adalah berita buruk dalam desain situs web. Jika pengunjung situs web disajikan dengan terlalu banyak opsi, mereka mungkin frustrasi dan terpental — atau mereka mungkin memilih opsi yang tidak Anda inginkan, seperti meninggalkan keranjang mereka. Itulah mengapa penting untuk membatasi jumlah opsi yang disajikan kepada pengguna.
Misalnya, pengunjung yang mendarat di beranda Shawn Michelle’s Ice Cream akan memiliki tiga pilihan: untuk mempelajari lebih lanjut tentang perusahaan, rasa, atau bahan-bahannya. Tetapi alih-alih menyajikan ketiga opsi secara bersamaan, mereka disajikan satu per satu dalam slider. Ini adalah contoh yang bagus untuk menerapkan Hukum Hick dalam desain UX.
Sekarang kami memahami prinsip-prinsip dan praktik terbaik yang seharusnya memandu Anda selama proses desain. Di bagian selanjutnya, mari kita jalankan elemen halaman penting yang harus Anda pertimbangkan dengan kuat termasuk dalam rencana desain Anda.
- Header dan Footer
- Navigasi Menu
- Bilah Pencarian
- Branding
- Palet Warna
- Header
- Hapus Label
- Visual dan Media
- Ajakan Bertindak (CTA)
- Spasi
Header dan footer adalah pokok dari hampir setiap situs web modern. Cobalah untuk memasukkannya di sebagian besar halaman Anda, dari beranda Anda, ke posting blog Anda, dan bahkan halaman “Tidak ada hasil yang ditemukan”.
Header Anda harus berisi branding Anda dalam bentuk logo dan nama organisasi, navigasi menu, dan mungkin CTA, dan / atau bilah pencarian jika berjarak baik dan minimal. Di sisi lain, footer Anda adalah tempat banyak pengguna secara naluriah akan menggulir untuk informasi penting. Di footer Anda, tempatkan informasi kontak, formulir pendaftaran, tautan ke halaman umum Anda, kebijakan hukum dan privasi, tautan ke versi terjemahan situs Anda, dan tautan media sosial.
Baik itu daftar tautan di header atau tombol hamburger yang rapi dan ringkas di sudut, setiap situs web memerlukan panduan untuk navigasi yang diposisikan di bagian atas setidaknya beranda Anda dan halaman penting lainnya. Menu yang bagus membatasi jumlah klik untuk menjangkau bagian mana pun dari situs web Anda hanya beberapa.
Untuk mengurangi kekacauan, Anda dapat mempertimbangkan untuk menjadikan beberapa atau semua opsi menu sebagai menu tarik-turun dengan tautan di dalamnya, seperti yang dapat dilihat di beranda HubSpot.
3. Bilah Pencarian
Selain navigasi menu, sangat pertimbangkan untuk menempatkan bilah pencarian di bagian atas halaman Anda, sehingga pengguna dapat menelusuri situs Anda untuk konten berdasarkan kata kunci. Jika menggabungkan fungsi ini, pastikan hasil Anda relevan, memaafkan kesalahan ketik, dan mampu memperkirakan pencocokan kata kunci. Sebagian besar dari kita menggunakan mesin pencari berkualitas tinggi setiap hari, baik itu Google, Amazon, YouTube, atau di tempat lain. Ini semua menetapkan standar untuk penelusuran situs Anda sendiri.
4. Merek
Ingat konvensi yang telah kita bahas? Salah satu yang Anda lihat praktis di mana-mana adalah logo di sudut kiri atas. Pada pendaratan pertama, banyak mata pengunjung secara naluriah akan beralih ke wilayah ini untuk memeriksa bahwa mereka berada di tempat yang tepat. Jangan biarkan mereka tergantung.
Untuk memperkuat gagasan ini, gabungkan branding perusahaan Anda ke dalam setiap elemen yang Anda tambahkan, konten yang Anda posting, dan skema warna yang Anda buat. Itulah mengapa kami sarankan untuk menetapkan pedoman merek jika Anda belum melakukannya — lihat panduan gaya kami untuk referensi.
5. Palet Warna
Pilihan warna memainkan peran utama dalam kegunaan dan UX situs Anda juga. Keputusan ini cenderung lebih subjektif daripada persyaratan lain dalam daftar ini. Tapi, seperti semua hal lain yang telah kita bahas, cobalah untuk menyederhanakan — batasi pilihan warna Anda hingga paling banyak 3-4 warna menonjol.
Memulai palet warna dari awal bisa sangat sulit untuk pertama kalinya. Kami tampaknya secara intuitif mengambil warna mana yang bekerja sama dengan baik dan mana yang tidak, tetapi kami tersandung ketika mencoba memilih dari kombinasi tak terbatas yang tersedia.
Solusinya? Coba palet warna yang telah terbukti berfungsi di situs web lain. Ambil pengaruh dari situs favorit Anda, dan lihat daftar skema warna situs web favorit kami untuk memulai.
6. Judul
Judul adalah kunci untuk menetapkan hierarki visual yang kita bahas sebelumnya, terutama pada halaman yang penuh teks. Saat pengguna membaca sekilas halaman Anda apa yang Anda butuhkan, judul yang jelas dan to-the-point memperingatkan pembaca untuk berhenti menggulir setelah menemukan apa yang mereka inginkan. Gunakan hanya judul sebanyak mungkin karena ada bagian berbeda dari halaman Anda, karena terlalu banyak teks yang diledakkan dan dicetak tebal akan mengurangi efek ini.
7. Label Yang Jelas
Setiap kali pengguna mengambil tindakan di situs web Anda, harus jelas persis apa yang mereka lakukan dan / atau ke mana mereka akan pergi. Semua tombol harus memiliki teks atau ikon yang jelas untuk menandakan tujuannya dengan tepat dan ringkas. Hal yang sama berlaku untuk tautan dalam teks dan widget (elemen interaktif sederhana, seperti dropdown dan formulir teks).
Misalnya, tombol yang menautkan ke halaman harga seharusnya hanya bertuliskan “Harga” — apa pun di luar itu (misalnya, “Lihat harga kami”, “Lihat halaman harga untuk kesepakatan”) berlebihan. Bilah / tombol pencarian hanya membutuhkan ikon kaca pencarian (🔍), dan mungkin juga kata “Cari”, untuk menunjukkan tujuannya.
Pengujian pengguna dapat menjadi bantuan utama di sini. Meskipun Anda sendiri tahu apa yang dilakukan semua elemen halaman interaktif Anda, hal yang sama tidak dapat dikatakan untuk pengguna baru. Pengujian akan memberikan wawasan berharga tentang apa yang menurut pengguna arti label Anda di luar perspektif Anda sendiri.
8. Visual dan Media
Saat memasukkan gambar statis, gif, video, dan media lain ke dalam halaman Anda, ingatlah untuk konsisten dan disengaja dalam pilihan Anda. Elemen-elemen ini akan menarik perhatian daripada sebagian besar teks lain dan kemungkinan akan tetap ada di benak pengguna, jadi pilihlah dengan bijak.
Berikut ini hanya salah satu contoh media yang efektif di beranda. Perhatikan bagaimana setiap gambar melengkapi estetika halaman dan mendukung tawaran pelatihan kebugaran yang dipersonalisasi dengan hasil.
Selain itu, semua gambar dan video harus dioptimalkan untuk mesin pencari dan menyertakan teks alt deskriptif untuk aksesibilitas.
9. Ajakan Bertindak (CTA)
Memiliki situs web yang menyenangkan itu bagus, tetapi bagaimana Anda tahu apakah pengunjung Anda benar-benar melakukan apa yang Anda inginkan? Apakah mereka terlibat dengan konten Anda? Di sinilah CTA berperan.
CTA adalah elemen halaman apa pun yang meminta tindakan pengguna. Tindakan ini bisa berupa menambahkan produk ke kartu, mengunduh penawaran konten, atau mendaftar ke daftar email. Jadikan elemen CTA anda menonjol dalam hierarki visual (ingat contoh Spotify kami), tetapi tidak mengganggu atau mengganggu seperti yang cenderung dilakukan oleh banyak iklan klik-tayang.
Jika Anda memerlukan ide untuk CTA ramping yang mendorong lebih banyak konversi, lihat daftar contoh CTA kami.
10. Spasi putih
Seperti disebutkan di atas, terkadang ini tentang elemen yang tidak Anda sertakan. Setelah membaca pedoman dan persyaratan ini, Anda mungkin merasa tergoda untuk mengisi halaman Anda dengan semua bit dan bob yang diperlukan untuk UX yang sempurna. Jangan lupa bahwa pemirsa Anda memerlukan ruang untuk mencerna semua info baru ini, jadi beri elemen Anda ruang untuk bernapas.
Tapi, berapa banyak spasi putih yang harus Anda miliki? Itu panggilan pribadi lainnya, dan bervariasi dari satu situs ke situs lain. Jadi, pengujian pengguna juga berguna di sini. Apa yang menjadi fokus orang? Apakah mereka merasa kewalahan dengan kepadatan konten? Sekali lagi, itu semua terkait kembali ke pedoman pertama kami, kesederhanaan.
Desain yang Mengutamakan Pengguna
Memang, desain web sebagian besar subjektif — tampilan dan pengalaman situs web Anda tidak akan menyenangkan semua orang. Namun, ada juga prinsip-prinsip UX yang telah dicoba dan benar yang, ketika dipertimbangkan dan dimasukkan dengan cermat, membantu pengunjung merasa lebih betah.
Menurut Amazon Web Services, 88% pengunjung situs web cenderung tidak kembali ke situs web setelah pengalaman yang buruk. Dan bagaimana Anda bisa menyalahkan mereka? Kami pasti semua pernah ke sana.
Jadi, sebagai bagian terakhir dari kegunaan/ kebijaksanaan UX, mulailah lebih peduli! Bayangkan diri Anda menyukai sepatu (atau, lebih tepatnya, jendela browser) pengunjung Anda, dan ingatlah setiap langkah proses desain.