2020'de Hala İşe Yarayan 8 Web Tasarım İlkesi
Yayınlanan: 2021-07-22Web sitenizin tasarımı, dönüşümler için düşündüğünüzden daha önemlidir. Dünyadaki her dönüşüm artırıcı taktiği uygulayabilirsiniz, ancak web tasarımınız bok gibi görünüyorsa, size pek faydası olmaz.
Tasarım sadece tasarımcıların yaptığı bir şey değildir. Tasarım pazarlamadır. Tasarım sizin ürününüz ve nasıl çalıştığıdır. Web tasarımının ilkeleri hakkında ne kadar çok şey öğrenirsem, o kadar iyi sonuçlar elde ettim.
Ücretsiz UX ve Kullanılabilirlik kursu
İlkelerden uygulamaya geçin. UX ve Kullanılabilirlik üzerine ücretsiz kursları izleyin.
İşte bilmeniz ve takip etmeniz gereken 8 etkili web tasarım ilkesi .
1. Görsel Hiyerarşi
Gıcırdayan tekerlekler yağı alır ve göze çarpan görseller dikkat çeker. Görsel hiyerarşi, iyi web tasarımının arkasındaki en önemli ilkelerden biridir. İnsan gözünün gördüklerini algılama sırasıdır.
Egzersiz yapmak. Lütfen çevreleri önem sırasına göre sıralayın:
Bu çevreler hakkında hiçbir şey bilmeden onları sıralayabildiniz
kolayca. Bu görsel bir hiyerarşi.
Web sitenizin belirli kısımları diğerlerinden daha önemlidir (formlar, harekete geçirici mesajlar, değer önerisi vb.) ve bunların daha az önemli kısımlardan daha fazla dikkat çekmesini istiyorsunuz.
Web sitenizin menüsünde 10 öğe varsa, hepsi eşit derecede önemli mi? Kullanıcının nereye tıklamasını istiyorsunuz? Önemli bağlantıları daha belirgin hale getirin.
Hiyerarşi sadece boyuttan gelmez. Amazon, renk kullanarak "Sepete Ekle" ve "Şimdi Satın Al" harekete geçirici mesaj düğmelerini daha belirgin hale getirir:
İş hedefiyle başlayın
Web sitenizdeki öğeleri iş hedefinize göre sıralamalısınız. Belirli bir hedefiniz yoksa, neye öncelik vereceğinizi bilemezsiniz.
İşte bir örnek. Williams-Sonoma web sitesinden aldığım bir ekran görüntüsü. Açık hava tencere satmak istiyorlar.
En büyük dikkat çeken şey, büyük et parçası (onu istememe neden oluyor), ardından başlık (ne olduğunu söyle) ve harekete geçirici mesaj (al onu). Dördüncü sıra, başlığın altındaki bir metin paragrafına gider; beşincisi ücretsiz gönderim başlığıdır ve en üstteki gezinme sonuncudur.
Bu görsel hiyerarşidir - web tasarımının zamansız bir ilkesidir - aferin.
Egzersiz yapmak. Web'de gezinin ve görsel hiyerarşideki öğeleri bilinçli olarak sıralayın. O zaman git sitene bak. Hiyerarşide çok aşağıda önemli bir şey (yani ziyaretçilerin aradığı anahtar bilgiler) var mı? Daha belirgin hale getirin.
2. İlahi Oranlar
Altın Oran sihirli sayı 1.618'dir (φ). Altın oran ile tanımlanan orantıları kullanan tasarımların estetik açıdan hoş olduğuna inanılıyor.
Sonra, Fibonacci dizisi var. Her terim önceki iki terimin toplamıdır: 0, 1, 1, 2, 3, 5, 8, 13, 21, vb. İlginç olan, görünüşte alakasız iki konunun aynı kesin sayıyı üretmesidir .
Altın Oran şöyle görünüyor:
Birçok sanatçı ve mimar, Altın Oran'a yaklaşmak için orantıları kullanır. Ünlü bir örnek, Antik Yunanistan'da inşa edilen Parthenon'dur:
Altın Oran web tasarımında işe yarar mı? Emin ol. İşte Twitter:
İşte Twitter'ın yaratıcı yönetmeni Doug Bowman'ın yıllar öncesinden bir yorumu. Tasarım seçimi tesadüfi değildi:
Dolayısıyla, düzen genişliğiniz 960 piksel ise, onu 1,618'e (=593 piksel) bölün. İçerik alanının genişliğinin 593 piksel ve kenar çubuğunun 367 piksel olması gerektiğini biliyorsunuz. Web sitesi yüksekliği 760 piksel uzunluğundaysa, onu 470 piksel ve 290 piksellik parçalara bölebilirsiniz (760/1.618=~470).
Daha fazlasını öğrenmek istiyorsanız, Altın Oran'ın tipografiye nasıl uygulanacağına dair bu makaleye göz atın.
3. Hick Yasası
Hick Yasası, her ek seçimin bir karar almak için gereken süreyi artırdığını söylüyor.
Bunu restoranlarda sayısız kez yaşadınız. Zengin seçeneklere sahip menüler, akşam yemeğinizi seçmeyi zorlaştırıyor. İki seçenek sunsaydı, karar vermek çok daha kısa sürerdi. Bu, Seçim Paradoksuna benzer - ne kadar çok seçenek verirseniz, hiçbir şey seçmemek o kadar kolay olur. Her iki ilke de web tasarımı ile devreye girer.
Bir kullanıcının web sitenizde ne kadar fazla seçeneği varsa, kullanımı o kadar zor olur (eğer kullanılıyorsa). Seçimleri ortadan kaldırmamız gerekiyor. Daha iyi bir web tasarımı yapmak için tasarım süreci boyunca dikkat dağıtıcı seçenekleri ortadan kaldırmaya odaklanın.
Sonsuz seçeneklerin olduğu bir çağda, insanların daha iyi filtrelere ihtiyacı var! Çok sayıda ürün satıyorsanız, daha kolay karar vermek için daha iyi filtreler ekleyin. Şarap Kütüphanesi çok miktarda şarap satıyor.
Filtrelerle iyi bir iş çıkarıyorlar:
4. Fitt Yasası
Fitt yasası, bir hedef alana hareket etmek (örneğin bir düğmeyi tıklamak) için gereken sürenin, hedefe olan mesafenin ve hedefin boyutunun bir fonksiyonu olduğunu şart koşar. Başka bir deyişle, bir nesne ne kadar büyük ve ne kadar yakınsa, kullanımı o kadar kolay olur.
Spotify, “Oynat” a basmayı diğer düğmelerden daha kolay hale getirir:
Cep telefonu uygulamasında, oynat düğmesini dokunması kolay bir konuma da yerleştirirler.
Daha büyük her zaman daha iyi değildir. Ekranın yarısını kaplayan bir düğme iyi bir fikir değil ve bize bunu anlatmak için matematiksel bir çalışmaya ihtiyacımız yok. Öyle olsa bile, Fitt Yasası bir ikili logaritmadır. Bu, bir nesnenin kullanılabilirliğinin tahmin edilen sonuçlarının düz bir çizgi değil bir eğri boyunca ilerlediği anlamına gelir.
Küçücük bir düğme %20'lik bir boyut artışı verildiğinde tıklamak çok daha kolaydır, oysa aynı %20'lik bir boyut artışı verildiğinde çok büyük bir nesne kullanılabilirlik açısından aynı faydaları sağlamayacaktır.
Bu, hedef boyutu kuralına benzer . Bir düğmenin boyutu, beklenen kullanım sıklığıyla orantılı olmalıdır. İnsanların en çok hangi düğmeleri kullandığını görmek için fare izlemeyi kullanabilir, ardından popüler düğmeleri büyütebilirsiniz (basması daha kolay).
İnsanların doldurmasını istediğiniz bir form olduğunu düşünelim. Formun sonunda iki düğme vardır: “Gönder” ve “Sıfırla” (alanları sil).
%99,9999 "Gönder"e basmak istiyor. Bu nedenle, düğme "sıfırla" dan çok daha büyük olmalıdır.
5. Üçte Bir Kuralı
Tasarımınızda görsel kullanmak iyi bir fikirdir. Bir görsel, fikirlerinizi metinden çok daha hızlı iletir.
En iyi görüntüler üçte bir kuralına uyar: Bir görüntü, eşit aralıklı iki yatay çizgi ve eşit aralıklı iki dikey çizgi ile dokuz eşit parçaya bölünmelidir. Önemli kompozisyon öğeleri bu çizgiler boyunca veya kesişme noktalarına yerleştirilmelidir.
Aşağıda, sağdaki görüntünün nasıl daha ilginç olduğunu görüyor musunuz? Bu, eylemde üçte bir kuralıdır.
Güzel, büyük görseller kullanmak, iyi web tasarımına katkıda bulunur. Görselleriniz daha ilgi çekiciyse, web siteniz daha çekici olacaktır.
6. Gestalt Tasarım Yasaları
Gestalt psikolojisi, zihin ve beyin teorisidir. İlkesi, insan gözünün nesneleri tek tek parçalarını algılamadan önce bütün olarak görmesidir.
İşte demek istediğim:
Köpeğin oluşturduğu her bir siyah noktaya odaklanmadan köpeği nasıl görebildiğinize dikkat edin? Gestaltizmin kurucusu Kurt Koffka bunu şu şekilde açıklamıştır: “Bütün, parçalardan bağımsız olarak var olur.”
Web tasarımı ile ilgili olduğu için, insanlar üstbilgi, menü, altbilgi vb. ayırt etmeden önce web sitenizin tamamını görürler.
İnsanların bir şeyi nasıl algılayacağını tahmin etmemizi sağlayan sekiz sözde gestalt tasarım yasası vardır. Her birinin web tasarımıyla ilişkisi şu şekildedir:
1. Yakınlık Yasası
İnsanlar uzayda birbirine yakın olan şeyleri gruplandırır. Tek bir algılanan nesne haline gelirler.
Etkili web tasarımı için, emin birlikte gitme şeyler biri olarak algılanan değildir olun. Benzer şekilde, bir bütün oluşturduklarını bildirmek için ilgili tasarım öğelerini (gezinme menüsü, altbilgi vb.) birlikte gruplandırırsınız.
Craigslist, bu yasayı, hangi alt kategorilerin "satılık" kategorisine girdiğini anlamayı kolaylaştırmak için kullanır:
2. Benzerlik Yasası
Benzer şeyleri birlikte gruplandırıyoruz. Bu benzerlik şekil, renk, gölgeleme veya diğer nitelikler şeklinde ortaya çıkabilir.
Burada siyah noktaları bir grupta ve beyazları başka bir grupta topluyoruz, çünkü aynı renkteki noktalar birbirine benziyor.
Web tasarımına uygulandığında bu nasıl görünüyor? Mixpanel, vaka çalışmalarına bağlantılar için benzer bir tasarım kullanır, bu nedenle onları her biri diğerini güçlendiren tek bir grup olarak görüyoruz:
3. Kapanış Yasası
Bütünlüğü ararız. Kapalı olmayan şekiller veya bir resmin parçaları eksik olduğunda, algımız görsel boşluğu doldurur. Aşağıdaki grafikte aslında hiçbir şekil olmamasına rağmen bir daire ve bir kare görüyoruz.
Kapatma yasası olmasaydı, farklı uzunluklarda farklı çizgiler görürdük. Ancak kapatma yasası, bütün şekilleri oluşturmak için çizgileri birleştirir.
Kapatma yasasını kullanmak, logoları veya tasarım öğelerini daha ilginç hale getirebilir. İyi bir örnek, 1961'de Sir Peter Scott tarafından tasarlanan World Wide Fund For Nature logosudur:
4. Simetri Yasası
Zihin, nesneleri bir merkez noktası etrafında şekillenen simetrik olarak algılar. Nesneleri çift sayıda simetrik parçaya bölmek algısal olarak hoştur.
Birbiriyle bağlantısız iki simetrik öğe gördüğümüzde, zihin onları tutarlı bir şekil oluşturmak için algısal olarak birbirine bağlar.
Yukarıdaki resme baktığımızda, altı ayrı parantez yerine üç çift simetrik parantez gözlemleme eğilimindeyiz.
İnsanlar simetrik görünümleri asimetrik görünümlere tercih ederler. Değişen görüntü ve metin sütunları, ortalanmış kaydırıcılar ve üç sütunlu bir liste, Trello ana sayfa tasarımının görsel keyfine katkıda bulunur:
5. Ortak Kader Yasası
Nesneleri bir yol boyunca hareket eden çizgiler olarak algılama eğilimindeyiz. Aynı hareket eğilimine sahip ve dolayısıyla aynı yolda olan nesneleri birlikte gruplandırırız.
Zihinsel olarak, insanlar sopaları bir araya toplarlar veya bir yeri işaret eden ellerini kaldırırlar çünkü hepsi aynı yönü gösterir. Site tasarımınızda, kullanıcının dikkatini bir şeye yönlendirmek için bunu kullanabilirsiniz (örneğin bir kayıt formu, değer teklifi, vb.).
Örneğin, bir dizi nokta varsa ve noktaların yarısı yukarı, diğer yarısı aşağı hareket ediyorsa, yukarı doğru hareket eden noktaları ve aşağı hareket eden noktaları iki ayrı birim olarak algılarız.
6. Süreklilik Yasası
İnsanlar, bir çizgiyi, yerleşik yönünü devam ettiriyormuş gibi algılamaya meyillidir. Nesneler (örneğin çizgiler) arasında bir kesişim olduğunda, iki çizgiyi iki tek, kesintisiz varlık olarak algılama eğilimindeyiz. Uyaranlar üst üste gelse bile farklı kalır.
Fixel, yüzleri bios'a bağlamak için bunu kullanır:
Şekil ve Zemin veya İyi Gestalt Yasası gibi başka gestalt yasaları da vardır. (Olimpiyat halkaları gibi düzenli, basit ve düzenli bir model oluşturuyorlarsa nesneler algısal olarak birlikte gruplandırılma eğilimindedir.) Bununla birlikte, yukarıda ele alınanlar web tasarımı için en iyi yol gösterici ilkelerdir.
7. Beyaz alan ve temiz tasarım
Beyaz boşluk ("negatif boşluk" olarak da adlandırılır), bir web sayfasının "boş" kalan kısmıdır. Grafikler, kenar boşlukları, oluklar, sütunlar arasındaki boşluk, yazı satırları arasındaki boşluk veya görseller arasındaki boşluktur.
Sadece "boş" alan değil, web tasarımının önemli bir unsurudur. İçindeki nesnelerin var olmasını sağlar. Beyaz boşluk, bilgi, tipografi, renk veya görüntüler için hiyerarşi kullanımı ile ilgilidir.
Beyaz boşluk içermeyen, metin veya grafiklerle dolu, meşgul veya dağınık görünme riski taşıyan bir sayfa. Tipik olarak, okumak zordur. (İnsanlar zahmet etmez bile.) Bu yüzden basit web siteleri bilimsel olarak daha iyidir.
Doğru miktarda beyaz alan, bir web sitesinin "temiz" görünmesini sağlar. Temiz bir tasarım net bir mesaj iletmek için çok önemli olsa da, sadece daha az içerik anlamına gelmez.
Temiz bir tasarım, içinde bulunduğu alanı en iyi şekilde kullanır. Temiz bir site tasarımı oluşturmak için, beyaz alanı akıllıca kullanarak nasıl net bir şekilde iletişim kuracağınızı bilmeniz gerekir. Made.com boşlukları iyi kullanır:
Beyaz boşluğun iyi kullanımı, ana mesaja ve görsellere odaklanmayı kolaylaştırır ve gövde kopyasının okunması kolaydır. Genel olarak, beyaz boşluk zarafeti ve inceliği teşvik eder, okunaklılığı iyileştirir ve odaklanmayı sağlar.
Beyaz boşluk ve basitlik hakkında daha fazla bilgi edinin.
8. Occam'ın Usturası
Birkaç rakip hipotez verildiğinde, Occam'ın usturası sizi en az varsayımda bulunan ve böylece en basit açıklamayı sunan birini seçmeniz için teşvik eder. Web tasarımı bağlamında ifade etmek gerekirse, Occam's Razor, en basit çözümün genellikle en iyisi olduğunu savunuyor.
Pipedrive'ın ekibi Angelpad deneyimleriyle ilgili bir gönderide şunları yazıyor:
Angelpad ekibi ve danışmanları bize birçok yönden meydan okudu. “Ana sayfanızda çok fazla şey var” ilk başta hemfikir olmadığımız bir şeydi, ancak test etmekten mutluluk duyuyoruz. Ve gerçekten de yanıldığımız ortaya çıktı. İçeriğin %80'ini kaldırdık ve ana sayfada bir kayıt düğmesi ve bir Daha Fazla Bilgi bağlantısı bıraktık. Kaydolmak için dönüşüm %300 arttı.
Bu sadece görünüşle ilgili değil, aynı zamanda nasıl çalıştığıyla da ilgili . 37Signals gibi bazı şirketler “basit”i bir iş modeline dönüştürdü. İşte kurucular Jason Fried tarafından yazılan Rework kitabından bir alıntı:
Ürünlerimiz rakiplerimizden daha az performans gösterdiği için birçok insan bizden nefret ediyor. Evcil hayvan özelliklerini dahil etmeyi reddettiğimizde hakarete uğruyorlar. Ancak ürünlerimizin yaptıklarıyla olduğu kadar yapmadıklarıyla da gurur duyuyoruz. Bunları basit olacak şekilde tasarlıyoruz çünkü çoğu yazılımın çok karmaşık olduğuna inanıyoruz: çok fazla özellik, çok fazla düğme, çok fazla karışıklık.
Basit, minimalist tasarım, tasarımın çalışacağını garanti etmez. Ancak deneyimlerime göre, basit her zaman tam tersinden daha iyidir ve bu nedenle web tasarımlarımızı basitleştirmeye çalışmalıyız.
Sonuç
Etkili web tasarımı ve sanat aynı şey değildir. Ancak birçok psikolojik ve tasarım ilkesi web siteleri için geçerlidir. Bu yasaların ilgili yönlerini mizanpajınıza, tipografinize ve resimlerinize uygulayarak harika bir web sitesi tasarlayabilirsiniz.
Kullanıcı ve işletme hedefleriniz için tasarım yapın. İyi web tasarımı, estetik açıdan hoş ve finansal olarak ödüllendirici sonuçlar verebilir.