4 Prinsip Desain CRAP Untuk UX yang Lebih Baik

Diterbitkan: 2022-10-11

Pengalaman pengguna yang baik adalah kunci keberhasilan situs web atau aplikasi apa pun. Jika Anda ingin memperbaikinya, Anda harus menguasai dasar-dasar prinsip desain CRAP. Ini akan memungkinkan Anda untuk menciptakan pengalaman pengguna yang lebih intuitif dan memuaskan bagi pelanggan Anda dan berhasil di pasar yang kompetitif saat ini.

Menurut statistik , 88% orang yang berbelanja online mengatakan bahwa mereka tidak akan kembali ke situs web jika mengalami pengalaman pengguna yang buruk. Selain itu, hanya 55% perusahaan yang menguji UX untuk tujuan bisnis. Dan sia-sia, karena UX tidak hanya dapat meningkatkan lalu lintas ke situs web Anda, tetapi juga pendapatan bulanan Anda.

Banyak faktor berbeda yang digunakan untuk membuat UX yang baik, tetapi salah satu faktor terpenting adalah menggunakan prinsip desain yang tepat. Mari kita lihat apa itu prinsip desain CRAP dan bagaimana menggunakannya untuk memberikan pengalaman pengguna yang lebih baik bagi pengunjung Anda.

Daftar isi

Apa Arti Prinsip Desain CRAP?

Tidak ada desain yang sempurna, tetapi ada cara untuk membuat desain menjadi lebih baik. Misalnya, untuk meningkatkan kualitas teks, seseorang dapat mengunjungi situs review esai seperti Best Writers Online . Untuk meningkatkan tata letak desain itu sendiri, Anda juga dapat berkonsultasi dengan profesional atau mencoba menyelesaikan masalah menggunakan prinsip desain CRAP.

CRAP adalah akronim yang diciptakan oleh Robin Patricia Williams, mewakili empat prinsip desain grafis: Contrast, Repetition, Alignment, dan Proximity. Dengan memanfaatkan prinsip desain CRAP, Anda dapat secara konsisten memberikan desain yang menarik untuk situs web, spanduk, iklan media sosial, poster, e-book, dll.

Prinsip-prinsip desain CRAP berfungsi sebagai seperangkat pedoman yang dapat Anda gunakan untuk meningkatkan kegunaan situs web Anda . Desainer harus menggunakan prinsip-prinsip tersebut dalam setiap desain yang mereka buat. Mari kita lihat lebih dekat masing-masing dari empat prinsip desain CRAP:

1. Kontras

kontras baik vs buruk
Kontras – yang pertama dari 4 prinsip desain CRAP. Sumber gambar: https://www.lrswebsolutions.com/

Prinsip ini menyatakan bahwa elemen pada halaman harus memiliki kontras yang cukup sehingga mudah dibedakan satu sama lain. Ini penting untuk alasan kegunaan dan aksesibilitas.

Kontras yang buruk dapat mempersulit pengguna untuk membaca teks atau mengklik tautan, dan juga dapat menyebabkan masalah bagi pengguna dengan gangguan penglihatan. Dengan memastikan bahwa ada cukup kontras antara elemen di situs web atau produk Anda, Anda dapat mempermudah semua pengguna untuk menavigasi dan menggunakan situs atau produk Anda.

Juga, ada banyak jenis kontras, tidak terbatas pada kontras warna saja.

Anda dapat membuat kontras dengan membuat elemen tertentu lebih besar atau mungkin lebih kecil. Dimungkinkan untuk menyorot elemen desain dengan meningkatkan jarak dari elemen lain, menyesuaikan ruang putih di sekitarnya, atau mengubah bentuknya menjadi yang menonjol dari desain lainnya. Bahkan menerapkan tekstur yang berbeda bisa menjadi cara untuk menciptakan kontras visual.

Berbagai jenis kontras
Berbagai jenis kontras. Sumber gambar: www.duarte.com

Kontras adalah tentang memastikan bahwa berbagai elemen di halaman Anda menonjol satu sama lain. Gunakan kontras untuk menciptakan minat visual dan menyoroti informasi penting.

Bereksperimen dan coba gunakan campuran warna terang dan gelap, tekstur berbeda, bentuk berbeda, kedekatan bergantian, dan font kontras sambil mencoba menguasai yang pertama dari 4 prinsip desain CRAP.

Ingat, selama ada perbedaan yang jelas antara berbagai elemen dan Anda tidak mengorbankan prinsip desain CRAP lainnya, maka Anda melakukannya dengan benar.

2. Pengulangan

prinsip desain pengulangan
Pengulangan – yang kedua dari 4 prinsip desain CRAP. Sumber gambar: ux360.design

Pengulangan adalah pengulangan yang disengaja dari elemen tertentu dalam suatu desain. Pengulangan membantu menciptakan rasa persatuan di halaman Anda. Itu mengikat semuanya bersama dan membuatnya tampak seperti milik bersama. Ini mungkin mengingatkan Anda tentang menulis esai di mana semua kata disusun secara logis untuk mengungkapkan ide.

Sementara tugas menulis dapat didelegasikan kepada para profesional Juri Penulisan , menguasai prinsip-prinsip desain CRAP adalah subjek yang harus Anda pelajari jika Anda ingin menghasilkan desain yang mengagumkan di masa depan.

Menggunakan warna, font , atau bentuk yang sama di seluruh desain Anda membantu menciptakan tampilan kohesif yang mudah dipahami pengguna. Jauh lebih mudah untuk mencari dan menemukan informasi yang relevan ketika paragraf diletakkan dengan cara yang sama di halaman yang berbeda. Selain itu, navigasi menjadi lebih mudah saat elemen navigasi dapat diprediksi dan berulang.

Jika digunakan dengan benar, pengulangan juga dapat membantu menekankan elemen tertentu dan membuat desain lebih berkesan. Misalnya, beberapa atribut merek berupa warna, bentuk, logo, atau tagline dapat diulang-ulang dalam desain, bahkan dalam media yang berbeda.

Anda dapat menggunakannya tidak hanya dalam konteks desain individual tetapi juga menghubungkan semua desain terkait Anda. Itu sebabnya dari semua prinsip desain CRAP, prinsip ini paling banyak digunakan.

3. Penyelarasan

prinsip desain keselarasan
Penyelarasan – yang ketiga dari 4 prinsip desain CRAP. Sumber gambar: www.dribbble.com/MelTaube

Alignment adalah proses mengatur elemen pada halaman web Anda secara terorganisir. Ini mencakup semuanya mulai dari penyelarasan teks pada halaman hingga penempatan gambar dan elemen visual lainnya.

Alignment tidak hanya menyelaraskan elemen ke tengah, kanan, atau kiri. Ini juga melibatkan penyelarasan antara objek terpisah, blok teks, dan semua elemen desain lainnya. Grid dapat digunakan untuk memastikan keselarasan dan urutan yang tepat.

Dari semua prinsip desain CRAP, mungkin yang paling mudah untuk menangkap pelanggaran prinsip desain keselarasan. Otak kita segera mendeteksi ketidakkonsistenan visual yang sangat kecil sekalipun. Kepekaan terhadap anomali yang sangat kecil ini memaksa desainer untuk memberikan banyak perhatian untuk menyelaraskan semua yang ada dalam desain dengan benar. Di sisi lain, desain yang diselaraskan dengan hati-hati memberikan kesan keteraturan dan kenyamanan.

Situs web yang diselaraskan dengan baik akan terlihat lebih profesional dan lebih mudah bagi pengguna untuk memindai dalam hitungan menit, sementara penyelarasan yang buruk dapat membuatnya terasa kacau dan menggelegar. Kekacauan dan ketidakkonsistenan itu bahkan dapat mengalihkan perhatian dari elemen terpenting.

Sebaliknya, ketika elemen disusun dengan cermat, kita tidak memperhatikan semuanya, dan perhatian kita tertuju pada hal yang paling penting – pesan utama.

Dengan memperhatikan prinsip ini, Anda dapat membuat desain yang enak dipandang dan berfungsi dengan baik pada tataran praktis.

4. Kedekatan

prinsip desain kedekatan
Kedekatan – keempat dari 4 prinsip desain CRAP. Sumber gambar: www.uxplanet.org

Prinsip kedekatan menyatakan bahwa elemen-elemen yang berhubungan harus berdekatan satu sama lain sehingga pengguna dapat dengan mudah melihat hubungan di antara elemen-elemen tersebut. Begitu juga sebaliknya, Anda dapat membedakan item yang tidak terkait dengan membuat jarak di antara item tersebut.

Penerapan yang benar dari prinsip ini membantu mengurangi kekacauan pada halaman dan memudahkan pengguna menemukan apa yang mereka cari. Kedekatan dapat dicapai dengan mengelompokkan item terkait menggunakan spasi putih, daftar, dan elemen desain lainnya.

Namun, waspadalah terhadap konsekuensi yang tidak diinginkan saat mencoba menerapkan prinsip desain ini. Kedekatan memiliki tempat khusus di antara prinsip-prinsip desain CRAP karena memiliki kekuatan untuk mengalahkan tiga prinsip desain CRAP lainnya. Kedekatan begitu tertanam dalam persepsi kita sehingga memiliki efek yang jauh lebih kuat daripada fitur visual lainnya seperti warna, bentuk, kecerahan, dll.

Lihat pada gambar di bawah bahwa kita melihat objek yang berdekatan sebagai kelompok meskipun memiliki karakteristik visual yang sangat jelas berbeda.

kedekatan mengalahkan fitur lainnya
Kedekatan – keempat dari 4 prinsip desain CRAP. Sumber gambar: www.uxmisfit.com

Anda dapat secara efektif mengkomunikasikan hubungan antara potongan informasi yang berbeda dengan memasukkan rasa kedekatan ke dalam desain Anda. Ini dapat membantu mengatur dan memahami desain Anda dengan lebih baik.

Dengan memahami dan menerapkan prinsip desain CRAP ini, desainer dapat membuat komposisi yang menarik.

Mengapa Menggunakan Prinsip Desain CRAP?

Prinsip desain CRAP penting karena memberikan panduan tentang cara membuat desain visual yang efektif dan enak dipandang:

  • Kontras itu penting karena membantu menciptakan ketertarikan visual dan menyoroti elemen-elemen penting;
  • Pengulangan membantu menciptakan rasa persatuan dan memperkuat keseluruhan pesan;
  • Penyelarasan memastikan bahwa elemen ditempatkan dengan cara yang logis dan kohesif;
  • Kedekatan membantu mengelompokkan elemen terkait dan menekankan hubungan di antara mereka.

Dengan menggunakan prinsip desain CRAP ini, Anda dapat memastikan bahwa desain Anda menarik secara visual dan mudah dipahami oleh konsumen akhir.

Validasi konsep Anda untuk kinerja selama tahap desain dengan analitik perhatian yang dihasilkan AI

Coba gratis selama 7 hari Pesan panggilan demo

Cara Menggunakan Prinsip Desain CRAP dengan Benar

Dengan menggunakan prinsip desain CRAP, Anda dapat membuat situs web yang lebih ramah pengguna yang mudah dinavigasi dan terlihat lebih profesional. Prinsip-prinsip ini dapat diterapkan ke semua jenis halaman web, apakah itu halaman arahan atau situs e-niaga.

Perlu diingat bahwa kontras, pengulangan, keselarasan, dan kedekatan merupakan faktor penting dalam menciptakan desain yang efektif. Jadi, coba gunakan keempat prinsip desain CRAP di setiap aspek desain situs web Anda. Mari kita lihat bagaimana Anda dapat menggunakannya untuk membuat UX yang lebih baik untuk situs web Anda:

1. Buat Desain Kontras Tinggi

kontras tombol cta yang baik dan buruk
Sumber gambar: www.admiral.digital

Menggunakan warna kontras tinggi adalah salah satu cara termudah untuk memastikan situs web Anda mudah dibaca. Teks hitam dengan latar belakang putih adalah standar untuk sebagian besar situs web, tetapi Anda juga dapat bereksperimen dengan kombinasi warna lain untuk melihat mana yang paling cocok untuk situs Anda. Pastikan ada cukup kontras di antara warna sehingga pengguna dapat dengan mudah membaca teks Anda.

Misalnya, jika Anda ingin menyorot tombol ajakan bertindak, Anda akan menggunakan warna yang sangat kontras dengan warna latar belakang situs web Anda. Dengan menggunakan kontras, Anda dapat mengarahkan mata pengguna ke elemen terpenting di halaman Anda dengan membuat penekanan dan membantu mereka memahami konten Anda dengan lebih baik.

Salah satu cara untuk menciptakan penekanan warna dapat menggunakan warna suhu yang berbeda. Anda dapat menciptakan efek yang cukup dramatis dengan mengontraskan warna merah, jingga, atau kuning bersuhu hangat dengan biru dan hijau dingin. Teknik ini digunakan dalam desain pada gambar di bawah ini.

contoh kontras suhu warna tombol cta
contoh kontras suhu warna pratinjau peta panas tombol cta

Desain web dan peta panas perhatiannya. Sumber gambar: www.dribbble.com/NpaulFlavius

Spasi teks dan kontras ukuran yang baik memastikan bahwa teks terkecil pun terlihat (lihat tampilan peta panas perhatian), dan kontras tinggi warna tombol CTA membuatnya sulit untuk dilewatkan. Hotspot di atas elemen-elemen tersebut dalam peta panas perhatian, yang menunjukkan di mana orang akan melihat pertama kali, mengonfirmasi hal itu. Warna kuning cerah sangat menonjol pada latar belakang kebiruan yang lebih sejuk dan mengarahkan perhatian kami tidak hanya ke tombol CTA tetapi juga ke gambarnya.

Selain itu, karena keseimbangan antara warna kuning pada gambar dan tombol, dan fakta bahwa kedua warna sedikit bergeser ke ujung yang lebih dingin, desainnya tetap terlihat harmonis dan kohesif.

Cara lain untuk menciptakan kontras warna adalah dengan menyesuaikan saturasi warna. Warna saturasi 100% berada dalam kondisi paling terang dan paling intens. Menggabungkan warna yang sangat jenuh dengan warna yang redup dan kurang jenuh bisa menjadi cara yang bagus untuk menarik perhatian ke elemen penting. Desain web pada gambar di bawah ini menunjukkan contoh cemerlang dari hal itu.

Contoh desain kontras saturasi warna
peta panas desain web buck wild

Desain web dan peta panas perhatiannya. Sumber gambar: www.dribbble.com/greenchameleon

Itu menunjukkan tajuk kemerahan yang sangat jelas dan jenuh pada pemandangan hutan hijau pucat. Efek ganda dimainkan dalam contoh kontras warna ini. Fakta bahwa kedua warna itu saling melengkapi membuat mereka sangat kontras. Selain itu, peningkatan saturasi warna merah dan hijau redup meningkatkan efek dramatis.

Seperti yang bisa kita lihat di peta panas perhatian, ada hotspot merah besar di atas huruf merah. Artinya, tajuk tersebut menarik cukup banyak perhatian pemirsa seperti yang dimaksudkan. Kontras warna menggunakan saturasi berfungsi untuk menekankan elemen tertentu dengan sempurna.

Bahkan ada lebih banyak cara untuk menciptakan kontras. Anda juga dapat menggunakan warna cerah dan gelap, berbagai bentuk dan tekstur, orientasi, tipografi, skala, tingkat kerumitan, dan fitur lain untuk menciptakan kontras yang diinginkan antar elemen.

Untuk memastikan bahwa Anda aman mengenai kontras desain Anda, pertimbangkan untuk mencoba alat Rasio Kontras . Bereksperimenlah dengan berbagai warna dan periksa apakah kontras kombinasi warna Anda tidak berada di bawah rasio kontras yang disarankan , yaitu setidaknya 4,5:1 .

Jika Anda menyukai desain berbasis data , Anda dapat memeriksa ulang apakah kontras yang dibuat memiliki efek pada perhatian pemirsa. Anda dapat dengan mudah melakukannya dalam hitungan detik dengan alat peta panas AI yang menghasilkan peta panas perhatian yang serupa dengan yang Anda lihat di atas. Saat Anda mencoba membuat titik fokus dalam desain menggunakan kontras, peta panas perhatian dapat terungkap jika upaya Anda cukup atau jika Anda perlu lebih meningkatkan kontras.

2. Gunakan Elemen yang Sama di Seluruh Situs Web Anda

Mengulangi elemen tertentu dalam desain membantu memberikan tampilan dan nuansa yang menyatu pada situs web Anda. Misalnya, jika Anda menggunakan font yang sama untuk semua judul, semua desain Anda akan terasa terhubung, dan pengguna akan mulai mengaitkan font tersebut dengan merek Anda.

Faktanya, prinsip-prinsip seperti hierarki visual, ritme, dan kesatuan sangat bergantung pada pengulangan. Tanpa pengulangan yang konsisten dari elemen berukuran sama dan struktur serupa, akan sangat sulit untuk membuat hierarki visual di web Anda atau desain lainnya. Pemirsa akan kesulitan memperhatikan struktur hierarkis jika semua elemennya berbeda dan unik.

Elemen berulang membantu menciptakan tampilan yang konsisten untuk situs web Anda dan memudahkan pengguna untuk bernavigasi. Anda dapat mengulangi elemen seperti font, ikon, logo, gambar, warna, pola, dan tata letak halaman. Penting untuk tidak berlebihan dengan pengulangan, tetapi menggunakannya dengan hemat dapat membantu menyatukan semua elemen yang berbeda di situs Anda.

Mari kita lihat beberapa contoh. Dalam infografik di bawah ini, Anda bisa melihat penggunaan pengulangan yang cukup halus. Bagian yang berbeda memiliki grafik pita yang sama untuk memuat judulnya. Judul mempertahankan tipografi dan warna font yang sama.

infografis prakiraan pencapaian
Sumber gambar: www.venngage.com

Juga, warna yang sama diulang di seluruh infografis. Akibatnya, meskipun setiap bagian terlihat sangat berbeda, kesamaan ini mengikat semuanya menjadi satu kesatuan. Semua variasi tata letak, bentuk, dan ukuran ini tampaknya bekerja secara harmonis.

Bagaimana dengan pengulangan warna saja? Seperti apa bentuknya? Lihatlah bagaimana Coca-Cola mengulangi warna merah pokoknya di halamannya.

desain web coca cola amerika serikat
Tangkapan layar sebagian situs web Coca-Cola di bawah bagian lipatan.

Warna merah muncul di spanduk, teks, tombol, dan label botol. Penggunaan berulang dari warna merek utama yang sama ini menciptakan kesatuan merek dalam semua desainnya. Strategi seperti itu secara tidak sadar membuat Anda semakin mengasosiasikan warna merah dengan merek mereka dengan setiap eksposisi pada desain mereka.

Pengulangan warna juga bisa dilakukan dengan lebih halus. Sebagai ilustrasi, mari kita lihat desain web organisasi nirlaba Heroines di bawah ini. Sebagai skema warna untuk situs web mereka, mereka memilih palet warna feminin yang sama dengan merek mereka.

Situs web Heroines di atas tangkapan layar lipat
Cuplikan layar situs web Heroine bagian paruh atas.

Konsistensi warna-warna lembut ini memungkinkan halaman mereka menghasilkan keputusan desain yang berani seperti asimetri yang kuat dan spanduk bergulir. Pada akhirnya, itu menarik perhatian dan lembut dengan tampilan profesional.

Ada banyak lagi cara untuk menggunakan pengulangan. Eksperimen untuk menemukan mana yang paling sesuai dengan desain Anda Juga, jangan lupakan prinsip desain CRAP lainnya.

3. Jaga agar Situs Web Anda Teratur

penyelarasan situs web
Sumber gambar: www.uxengineer.com

Memastikan bahwa semua yang ada di situs web Anda selaras dengan benar akan menciptakan perasaan teratur, yang membantu pengguna merasa lebih nyaman saat menjelajahi situs Anda. Tidak ada yang suka merasa tersesat atau bingung saat mereka mencoba menemukan sesuatu di situs web, jadi meluangkan waktu untuk menyelaraskan semuanya dengan benar dapat membuahkan hasil dalam hal pengalaman pengguna.

Penjajaran teks yang tepat di situs web memungkinkan pembaca untuk memindainya lebih cepat dan, pada gilirannya, menemukan informasi yang mereka butuhkan lebih cepat. Di sisi lain, penyelarasan yang tidak tepat membuat tugas ini lebih sulit bagi pengunjung. Mari kita lihat contoh keselarasan amatir ini.

halaman web dengan perataan teks amatir
Contoh halaman web dengan perataan teks amatir. Sumber gambar: www.vanseodesign.com

Tidak mudah untuk memindai halaman dengan cepat. Perataan tengah bukanlah pilihan yang tepat bila Anda memiliki blok teks yang lebih besar. Setiap baris teks dimulai di tempat yang berbeda. Inkonsistensi spasial ini membuat mata kita lebih banyak mengembara dan menciptakan beban kognitif yang lebih besar bagi otak kita yang berusaha menemukan titik awal setiap baris, paragraf, atau bagian di tempat yang berbeda.

Ketika Anda menyelaraskan teks ke kiri dan dengan rapi mengatur semua bagian agar sejajar satu sama lain, otak kita akan memiliki lebih sedikit pekerjaan yang harus dilakukan.

halaman web dengan teks yang disejajarkan dengan benar
Contoh halaman web dengan perataan teks yang tepat. Sumber gambar: www.vanseodesign.com

Sekarang mata kita perlu menempuh jarak yang lebih pendek karena awal setiap baris yang jauh lebih dapat diprediksi – awal setiap baris disejajarkan ke kiri. Juga, otak kita memiliki waktu yang jauh lebih mudah, memungkinkan kita untuk tidak membuang energi tambahan untuk tugas yang tidak perlu itu. Ini, pada gilirannya, menciptakan perasaan pengalaman yang lebih nyaman memindai dan membaca situs web ini.

Prinsip yang sama juga berlaku untuk detail yang lebih kecil. Contoh kami berikutnya di bawah ini akan membuktikannya. Opsi di sebelah kiri tidak buruk atau terlalu buruk, tetapi ada yang terasa tidak benar.

keselarasan kesaksian - baik dan buruk
Contoh yang baik dan buruk tentang penyelarasan kesaksian. Sumber gambar: www.balsamiq.com

Itu karena teks sejajar dengan tanda kutip dan tanda hubung. Di opsi kanan, teks disejajarkan dengan teks dan bukan dengan simbol lainnya. Penyesuaian kecil ini membuatnya sedikit lebih mudah dibaca oleh pemirsa dan juga terlihat sedikit lebih baik.

Alat yang berguna untuk tugas mengatur segala sesuatu secara visual ini bisa berupa kisi-kisi. Anda dapat menemukannya di aplikasi desain sebagai fitur yang mempermudah proses penyelarasan. Salah satu yang paling populer adalah kisi 12 kolom.

Halaman beranda WeWork
Beranda WeWork dengan kisi

Beranda WeWork tanpa kisi (di sebelah kiri) dan dengan kisi dan batas elemen dan bagian yang disorot (di sebelah kanan). Sumber gambar: www.uxdesign.cc

Pada contoh di atas, Anda dapat melihat dua tangkapan layar beranda WeWork – satu tanpa kisi dan satu lagi dengan kisi overlay serta batas elemen dan bagian.

Anda dapat melihat bahwa halaman ini dirancang menggunakan kisi 12 kolom ini. Semuanya terlihat bagus dan teratur dan menciptakan perasaan yang harmonis. Ini adalah efek dari keselarasan yang tepat dalam sebuah desain.

4. Kelompokkan Barang Serupa Bersama

Saat Anda mengelompokkan item dengan benar, Anda mempermudah pengguna untuk menemukan apa yang mereka cari dengan cepat dan mudah. Ini sangat penting untuk situs web e-niaga di mana pengguna harus dapat menemukan produk dengan cepat dan efisien tanpa merasa frustrasi.

contoh prinsip kedekatan dalam e-commerce
Contoh bagaimana kedekatan dapat diterapkan ke kisi produk. Sumber gambar: www.uxmisfit.com

Pada gambar di atas, di sebelah kiri, Anda dapat melihat gambar rangka halaman e-niaga dengan gambar mini, judul, dan semua hal lain yang dijejalkan tanpa spasi di antaranya. Sulit bagi mata untuk membedakan tombol mana yang berhubungan dengan thumbnail mana.

Namun, di sebelah kanan, ketika prinsip kedekatan diterapkan dengan benar, semuanya menjadi lebih jelas. Setiap thumbnail dengan elemen yang dimiliki dipisahkan dari thumbnail lainnya menggunakan spasi putih.

Sekarang setiap thumbnail dengan judul, deskripsi, dan tombol terkait berfungsi sebagai grup terpisah. Otak kita dapat lebih cepat mengenali bahwa unsur-unsur dalam kelompok itu saling terkait. Ini menghilangkan gesekan mental yang tidak perlu dan membuat pengalaman pengguna lebih lancar.

Namun, tidak hanya situs web e-niaga yang mendapat manfaat dari prinsip desain kedekatan. Prinsip kedekatan yang diterapkan dengan baik sangat berharga dalam setiap jenis desain.

Mengelompokkan item serupa bersama-sama adalah cara yang bagus untuk mengurangi kekacauan di situs Anda dan membuatnya lebih menarik secara visual. Ini dapat mengurangi kompleksitas dan mempermudah proses halaman web yang lebih panjang dan kompleks.

Misalnya, jika Anda memiliki banyak jenis konten berbeda di situs web Anda, Anda akan mengelompokkannya berdasarkan kategori daripada menyebarkannya secara acak di sekitar halaman. Anda dapat melihat contoh prinsip kedekatan yang diterapkan dengan benar dalam dua gambar rangka berikut (gambar di bawah).

prinsip kedekatan dalam wireframe
Dua gambar rangka halaman web yang menggambarkan penggunaan prinsip kedekatan. Sumber gambar: www.medium.muz.li

Ini adalah dua opsi yang memungkinkan tentang bagaimana jenis konten yang berbeda dapat diatur pada halaman dengan mengelompokkan item serupa menjadi satu. Objek terkait diposisikan lebih dekat bersama, membentuk bagian yang berbeda, dan bagian tersebut dipisahkan dengan spasi putih.

Mata dapat menavigasi halaman ini dengan mudah. Bayangkan betapa berantakannya jika semua elemen tersebar tanpa struktur ini dan tanpa spasi di antara mereka. Prinsip desain CRAP memungkinkan Anda menghindari hasil seperti itu.

Prinsip-prinsip desain CRAP dirangkum

Prinsip desain CRAP adalah cara terbaik untuk meningkatkan kegunaan situs web Anda dan menciptakan pengalaman pengguna yang lebih baik secara keseluruhan. Dengan menggunakan warna kontras tinggi, mengulangi elemen tertentu di seluruh situs Anda, menjaga agar semuanya tetap selaras, dan mengelompokkan item serupa, Anda dapat membantu memastikan bahwa pengguna memiliki pengalaman positif saat menjelajahi situs Anda, yang akan menghasilkan lebih banyak konversi di situs Anda. jangka panjang.