8 Prinsip Desain Web yang Masih Berfungsi di Tahun 2020
Diterbitkan: 2021-07-22Desain situs web Anda lebih penting untuk konversi daripada yang Anda pikirkan. Anda dapat menerapkan setiap taktik peningkatan konversi di dunia, tetapi jika desain web Anda terlihat seperti sampah, itu tidak akan banyak membantu Anda.
Desain bukan hanya sesuatu yang dilakukan desainer. Desain adalah pemasaran. Desain adalah produk Anda dan cara kerjanya. Semakin banyak yang saya pelajari tentang prinsip-prinsip desain web, semakin baik hasil yang saya dapatkan.
Kursus UX & Kegunaan gratis
Berangkat dari prinsip ke praktik. Tonton kursus gratis tentang UX & Kegunaan.
Berikut adalah 8 prinsip desain web yang efektif yang harus Anda ketahui dan ikuti.
1. Hirarki Visual
Roda berderit mendapatkan minyak, dan visual yang menonjol mendapatkan perhatian. Hirarki visual adalah salah satu prinsip terpenting di balik desain web yang baik. Ini adalah urutan di mana mata manusia merasakan apa yang dilihatnya.
Olahraga. Harap beri peringkat lingkaran dalam urutan kepentingan:
Tanpa mengetahui apa pun tentang lingkaran ini, Anda dapat memberi peringkat pada mereka
dengan mudah. Itu hierarki visual.
Bagian-bagian tertentu dari situs web Anda lebih penting daripada yang lain (formulir, ajakan bertindak, proposisi nilai, dll.), dan Anda ingin bagian-bagian itu mendapat perhatian lebih daripada bagian yang kurang penting.
Jika menu website Anda memiliki 10 item, apakah semuanya sama pentingnya? Di mana Anda ingin pengguna mengklik? Buat tautan penting lebih menonjol.
Hirarki tidak hanya datang dari ukuran. Amazon membuat tombol ajakan bertindak "Tambahkan ke Keranjang" dan "Beli Sekarang" lebih menonjol dengan menggunakan warna:
Mulailah dengan tujuan bisnis
Anda harus memberi peringkat elemen di situs web Anda berdasarkan tujuan bisnis Anda. Jika Anda tidak memiliki tujuan tertentu, Anda tidak akan tahu apa yang harus diprioritaskan.
Berikut adalah contoh. Ini adalah tangkapan layar yang saya ambil dari situs web Williams-Sonoma. Mereka ingin menjual peralatan masak outdoor.
Penangkap mata terbesar adalah sepotong besar daging (membuat saya menginginkannya), diikuti oleh judul (katakan apa itu), dan ajakan untuk bertindak (dapatkan). Tempat keempat jatuh ke paragraf teks di bawah judul; yang kelima adalah spanduk pengiriman gratis, dan navigasi teratas adalah yang terakhir.
Ini adalah hierarki visual—prinsip desain web yang tak lekang oleh waktu—dilakukan dengan baik.
Olahraga. Jelajahi web dan beri peringkat elemen secara sadar dalam hierarki visual. Kemudian pergi melihat situs Anda. Apakah ada sesuatu yang penting (yaitu informasi penting yang dicari pengunjung) terlalu jauh dalam hierarki? Membuatnya lebih menonjol.
2. Proporsi Ilahi
Rasio Emas adalah angka ajaib 1,618 (φ). Desain yang menggunakan proporsi yang ditentukan oleh rasio emas, diyakini, secara estetika menyenangkan.
Lalu, ada deret Fibonacci. Setiap suku adalah jumlah dari dua suku sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13, 21, dan seterusnya. Hal yang menarik adalah dua topik yang tampaknya tidak berhubungan menghasilkan angka yang sama persis.
Inilah yang terlihat seperti Rasio Emas:
Banyak seniman dan arsitek menggunakan proporsi untuk memperkirakan Rasio Emas. Contoh terkenal adalah Parthenon, dibangun di Yunani Kuno:
Bisakah Rasio Emas bekerja untuk desain web? Anda bertaruh. Berikut Twitternya:
Berikut komentar, dari tahun lalu, oleh direktur kreatif Twitter, Doug Bowman. Pilihan desain tidak disengaja:
Jadi, jika lebar tata letak Anda adalah 960px, bagi dengan 1.618 (=593px). Anda tahu bahwa lebar area konten harus 593px dan sidebar 367px. Jika tinggi situs web adalah 760px, Anda dapat membaginya menjadi potongan 470px dan 290px (760/1.618=~470).
Jika Anda ingin mempelajari lebih lanjut, lihat artikel ini tentang cara menerapkan Rasio Emas pada tipografi.
3. Hukum Hick
Hukum Hick mengatakan bahwa dengan setiap pilihan tambahan meningkatkan waktu yang dibutuhkan untuk mengambil keputusan.
Anda telah mengalami ini berkali-kali di restoran. Menu dengan banyak pilihan membuat sulit untuk memilih makan malam Anda. Jika menawarkan dua pilihan, membuat keputusan akan memakan waktu lebih sedikit. Ini mirip dengan Paradox of Choice—semakin banyak pilihan yang Anda berikan, semakin mudah untuk tidak memilih apa pun. Kedua prinsip ikut bermain dengan desain web.
Semakin banyak opsi yang dimiliki pengguna di situs web Anda, semakin sulit untuk digunakan (jika digunakan sama sekali). Kita perlu menghilangkan pilihan. Untuk membuat desain web yang lebih baik, fokuslah untuk menghilangkan opsi yang mengganggu selama proses desain.
Di era pilihan tak terbatas, orang membutuhkan filter yang lebih baik! Jika Anda menjual produk dalam jumlah besar, tambahkan filter yang lebih baik untuk pengambilan keputusan yang lebih mudah. Perpustakaan Anggur menjual anggur dalam jumlah besar.
Mereka melakukan pekerjaan yang baik dengan filter:
4. Hukum Fitt
Hukum Fitt menetapkan bahwa waktu yang dibutuhkan untuk berpindah ke area target (misalnya mengklik tombol) adalah fungsi dari jarak ke target dan ukuran target. Dengan kata lain, semakin besar suatu objek dan semakin dekat, semakin mudah digunakan.
Spotify membuatnya lebih mudah untuk menekan "Mainkan" daripada tombol lain:
Di aplikasi ponsel, mereka juga menempatkan tombol putar di lokasi yang mudah diketuk.
Lebih besar tidak selalu lebih baik. Tombol yang memenuhi separuh layar bukanlah ide yang bagus, dan kami tidak memerlukan studi matematika untuk memberi tahu kami. Meski begitu, Hukum Fitt adalah logaritma biner. Artinya hasil prediksi kegunaan suatu objek berjalan sepanjang kurva, bukan garis lurus.
Tombol kecil jauh lebih mudah untuk diklik ketika diberi peningkatan ukuran 20%, sedangkan objek yang sangat besar, dengan peningkatan ukuran 20% yang sama, tidak akan memberikan manfaat kegunaan yang sama.
Ini mirip dengan aturan ukuran target. Ukuran tombol harus proporsional dengan frekuensi penggunaan yang diharapkan. Anda dapat menggunakan pelacakan mouse untuk melihat tombol mana yang paling sering digunakan orang, lalu memperbesar tombol populer (lebih mudah untuk ditekan).
Mari kita bayangkan ada formulir yang Anda ingin orang-orang isi. Di akhir formulir, ada dua tombol: "Kirim" dan "Reset" (mengosongkan bidang).
99,9999% ingin menekan "Kirim." Oleh karena itu, tombolnya harus jauh lebih besar daripada 'reset'.
5. Aturan Sepertiga
Sebaiknya gunakan gambar dalam desain Anda. Visual mengomunikasikan ide-ide Anda jauh lebih cepat daripada teks.
Gambar terbaik mengikuti aturan sepertiga: Sebuah gambar harus dibagi menjadi sembilan bagian yang sama dengan dua garis horizontal yang berjarak sama dan dua garis vertikal yang berjarak sama. Elemen komposisi penting harus ditempatkan di sepanjang garis ini atau di persimpangannya.
Di bawah ini, lihat bagaimana gambar di sebelah kanan lebih menarik? Itulah aturan sepertiga dalam tindakan.
Menggunakan gambar besar yang indah berkontribusi pada desain web yang baik. Jika gambar Anda lebih menarik, situs web Anda akan lebih menarik.
6. Hukum Desain Gestalt
Psikologi Gestalt adalah teori tentang pikiran dan otak. Prinsipnya adalah bahwa mata manusia melihat objek secara keseluruhan sebelum mengamati bagian-bagiannya masing-masing.
Inilah yang saya maksud:
Perhatikan bagaimana Anda bisa melihat anjing itu tanpa memusatkan perhatian pada setiap titik hitam yang ada pada anjing itu? Seorang pendiri gestaltisme, Kurt Koffka, menjelaskannya seperti ini: “keseluruhan ada secara independen dari bagian-bagiannya.”
Terkait dengan desain web, orang melihat keseluruhan situs web Anda terlebih dahulu—sebelum mereka membedakan header, menu, footer, dan sebagainya.
Ada delapan apa yang disebut hukum desain gestalt yang memungkinkan kita untuk memprediksi bagaimana orang akan melihat sesuatu. Berikut adalah bagaimana masing-masing berhubungan dengan desain web:
1. Hukum Kedekatan
Orang-orang mengelompokkan hal-hal yang berdekatan dalam ruang. Mereka menjadi satu objek yang dirasakan.
Untuk desain web yang efektif, pastikan bahwa hal-hal yang tidak pergi bersama-sama tidak dirasakan sebagai salah satu. Demikian pula, Anda mengelompokkan elemen desain terkait (menu navigasi, footer, dll.) untuk mengomunikasikan bahwa mereka membentuk keseluruhan.
Craigslist menggunakan undang-undang ini untuk memudahkan memahami subkategori mana yang termasuk dalam "dijual":
2. Hukum Persamaan
Kami mengelompokkan hal-hal serupa bersama-sama. Kesamaan ini dapat terjadi dalam bentuk bentuk, warna, shading, atau kualitas lainnya.
Di sini kita mengelompokkan titik-titik hitam ke dalam satu kelompok dan putih ke dalam kelompok lain, karena titik-titik dengan warna yang sama terlihat mirip satu sama lain.
Seperti apa tampilan ini ketika diterapkan pada desain web? Mixpanel menggunakan desain serupa untuk tautan ke studi kasus, jadi kami melihatnya sebagai satu kelompok, masing-masing memperkuat yang lain:
3. Hukum Penutupan
Kami mencari kelengkapan. Ketika bentuk yang tidak tertutup atau bagian dari gambar hilang, persepsi kita mengisi celah visual. Kita melihat lingkaran dan persegi meskipun tidak ada bentuk yang benar-benar ada pada grafik di bawah ini.
Tanpa hukum penutupan, kita hanya akan melihat garis yang berbeda dengan panjang yang berbeda. Tetapi hukum penutupan menggabungkan garis-garis untuk membentuk keseluruhan bentuk.
Menggunakan hukum penutupan dapat membuat logo atau elemen desain lebih menarik. Contoh yang baik adalah logo World Wide Fund For Nature, yang dirancang oleh Sir Peter Scott pada tahun 1961:
4. Hukum Simetri
Pikiran merasakan objek sebagai simetris, terbentuk di sekitar titik pusat. Sangat menyenangkan untuk membagi objek menjadi sejumlah bagian simetris yang genap.
Ketika kita melihat dua elemen simetris yang tidak terhubung, pikiran secara persepsi menghubungkan mereka untuk membentuk bentuk yang koheren.
Ketika kita melihat gambar di atas, kita cenderung mengamati tiga pasang kurung simetris daripada enam kurung individu.
Orang lebih suka penampilan simetris daripada yang asimetris. Kolom gambar dan teks bergantian, bilah geser di tengah, dan daftar tiga kolom menambah kenikmatan visual dari desain beranda Trello:
5. Hukum Nasib Bersama
Kita cenderung melihat objek sebagai garis yang bergerak di sepanjang jalan. Kami mengelompokkan objek-objek yang memiliki tren gerak yang sama dan, oleh karena itu, berada di jalur yang sama.
Secara mental, orang-orang mengelompokkan tongkat atau mengangkat tangan menunjuk ke suatu tempat karena semuanya menunjuk ke arah yang sama. Dalam desain situs Anda, Anda dapat menggunakan ini untuk memandu perhatian pengguna pada sesuatu (misalnya formulir pendaftaran, proposisi nilai, dll).
Misalnya, jika ada deretan titik, dan separuh titik bergerak ke atas sementara separuh lainnya bergerak ke bawah, kita melihat titik-titik yang bergerak ke atas dan titik yang bergerak ke bawah sebagai dua unit yang berbeda.
6. Hukum Kontinuitas
Orang-orang memiliki kecenderungan untuk melihat sebuah garis sebagai kelanjutan dari arah yang telah ditetapkan. Ketika ada persimpangan antara objek (misalnya garis), kita cenderung menganggap dua garis sebagai dua entitas tunggal yang tidak terputus. Stimulus tetap berbeda bahkan dengan tumpang tindih.
Fixel menggunakan ini untuk menghubungkan wajah ke bios:
Ada juga hukum gestalt lainnya, seperti Gambar dan Dasar atau Hukum Gestalt yang Baik. (Objek cenderung dikelompokkan bersama secara persepsi jika mereka membentuk pola yang teratur, sederhana, dan teratur—seperti cincin Olimpiade.) Namun, yang dibahas di atas adalah prinsip panduan terbaik untuk desain web.
7. Ruang putih dan desain bersih
Ruang putih (juga disebut "ruang negatif") adalah bagian halaman web yang tetap "kosong". Ini adalah ruang antara grafik, margin, talang, ruang antara kolom, ruang antara baris jenis, atau visual.
Ini bukan hanya ruang "kosong"—ini adalah elemen penting dari desain web. Ini memungkinkan objek di dalamnya ada. Ruang putih adalah tentang penggunaan hierarki untuk informasi, tipografi, warna, atau gambar.
Halaman tanpa spasi, penuh dengan teks atau gambar, berisiko tampak sibuk atau berantakan. Biasanya, sulit untuk membaca. (Orang-orang bahkan tidak akan repot.) Inilah sebabnya mengapa situs web sederhana secara ilmiah lebih baik.
Jumlah ruang putih yang tepat membuat situs web terlihat “bersih”. Meskipun desain yang bersih sangat penting untuk mengomunikasikan pesan yang jelas, itu tidak hanya berarti lebih sedikit konten.
Desain yang bersih memanfaatkan ruang yang ada dengan sebaik-baiknya. Untuk membuat desain situs yang bersih, Anda perlu mengetahui cara berkomunikasi dengan jelas dengan menggunakan ruang kosong secara bijaksana. Made.com menggunakan ruang putih dengan baik:
Penggunaan ruang putih yang baik memudahkan untuk fokus pada pesan utama dan visual, dan body copy mudah dibaca. Secara umum, ruang putih meningkatkan keanggunan dan kecanggihan, meningkatkan keterbacaan, dan mendorong fokus.
Baca lebih lanjut tentang ruang putih dan kesederhanaan.
8. Pisau Cukur Occam
Ketika diberikan beberapa hipotesis yang bersaing, pisau cukur Occam mendesak Anda untuk memilih salah satu yang membuat asumsi paling sedikit dan, dengan demikian, menawarkan penjelasan paling sederhana. Untuk memasukkannya ke dalam konteks desain web, Occam's Razor berpendapat bahwa solusi paling sederhana biasanya yang terbaik.
Dalam sebuah posting tentang pengalaman Angelpad mereka, tim Pipedrive menulis:
Tim dan mentor Angelpad menantang kami dalam banyak hal. “Anda memiliki terlalu banyak hal di halaman rumah Anda” adalah sesuatu yang awalnya tidak kami setujui, tetapi kami senang mengujinya. Dan ternyata kami memang salah. Kami menghapus 80% konten, dan meninggalkan satu tombol pendaftaran dan satu tautan Pelajari Lebih Lanjut di beranda. Konversi untuk mendaftar meningkat 300%.
Ini bukan hanya tentang penampilan, tetapi juga tentang cara kerjanya. Beberapa perusahaan—seperti 37Signals—telah mengubah "sederhana" menjadi model bisnis. Berikut kutipan dari buku Rework, yang ditulis oleh pendiri Jason Fried:
Banyak orang membenci kami karena produk kami kurang dari pesaing. Mereka dihina ketika kami menolak untuk memasukkan fitur hewan peliharaan mereka. Tapi kami sama bangganya dengan apa yang tidak dilakukan produk kami seperti halnya kami dengan apa yang mereka lakukan. Kami mendesainnya menjadi sederhana karena kami yakin sebagian besar perangkat lunak terlalu rumit: terlalu banyak fitur, terlalu banyak tombol, terlalu banyak kebingungan.
Sederhana, desain minimalis tidak menjamin desain akan berhasil. Namun, menurut pengalaman saya, sederhana selalu lebih baik daripada sebaliknya—dan, karenanya, kita harus berusaha untuk menyederhanakan desain web kita.
Kesimpulan
Desain web dan seni yang efektif tidaklah sama. Tetapi banyak prinsip psikologis dan desain berlaku untuk situs web. Anda dapat merancang situs web yang hebat dengan menerapkan aspek yang relevan dari undang-undang tersebut ke tata letak, tipografi, dan gambar Anda.
Desain untuk pengguna dan tujuan bisnis Anda. Desain web yang baik dapat memberikan hasil yang estetis dan menguntungkan secara finansial.