Olağanüstü Web Tasarımı ve Kullanılabilirlik İçin En İyi Uygulamalar

Bir web sitesini tasarlamak veya yeniden tasarlamak söz konusu olduğunda, estetiğe takılmak kolaydır. Mavinin bu tonu doğru görünüyor mu? Logo ekranın sağında mı yoksa solunda mı olmalı? Sayfanın ortasına dev bir animasyonlu GIF koyarsak ne olur?

Bununla birlikte, insanların potansiyel olarak girebilecekleri 1,8 milyardan fazla web sitesine sahip olduğu bir dünyada, sizinkinin sadece güzel bir yüzü olmadığından emin olmanız gerekir. Kullanılabilirlik, web sitenizin kullanımının ne kadar kolay olduğu ve kullanıcı deneyimi (UX), web sitenizle etkileşim kurmanın ne kadar keyifli olduğu için tasarlanmalıdır.

Şimdi, bu disiplinlerin tüm ayrıntılarını inceleyerek yıllarınızı harcayabilirsiniz. Ancak size bir başlangıç ​​noktası vermek adına, bir sonraki web sitenizin yeniden tasarımında veya web sitenizde uygulayabileceğiniz temel yönergelerin ve en iyi uygulamaların bir listesini oluşturduk. Ardından, bu önerileri hayata geçirmek için sitenizde ihtiyaç duyacağınız 10 özelliği inceleyeceğiz. Hadi bakalım.

Web Sitesi Tasarım Yönergeleri

1. Sadelik
2. Görsel Hiyerarşi
3. gezilebilirlik
4. Tutarlılık
5. Duyarlılık
6. Ulaşılabilirlik
7. geleneksellik
8. güvenilirlik
9. Kullanıcı Odaklılık

1. Sadelik

Web sitenizin görünümü kesinlikle önemli olsa da, çoğu insan tasarımın ne kadar şık olduğunu değerlendirmek için sitenize gelmiyor. Bir eylemi tamamlamak veya belirli bir bilgi parçasını bulmak istiyorlar.

Bu nedenle, gereksiz tasarım öğeleri (yani, işlevsel bir amaca hizmet etmeyenler) yalnızca bunaltır ve ziyaretçilerin başarmaya çalıştıkları şeyi başarmalarını zorlaştırır.

Kullanılabilirlik ve kullanıcı deneyimi açısından basitlik en iyi arkadaşınızdır. Gerekli tüm sayfa öğelerine sahipseniz, çok basit olması zordur. Bu prensibi çeşitli farklı şekillerde kullanabilirsiniz, örneğin:

• Renkler: Temel olarak, çok fazla kullanmayın. Bilgisayar-İnsan Etkileşimi El Kitabı, tasarımınızda en fazla beş (artı veya eksi iki) farklı renk kullanmanızı önerir.
• Yazı Tipleri: Seçtiğiniz yazı tipleri son derece okunaklı olmalıdır, bu nedenle hiçbir şey çok gösterişli olmamalı ve varsa çok az betik yazı tipi olmalıdır. Metin rengi için yine minimum düzeyde tutun ve her zaman arka plan rengiyle kontrast oluşturduğundan emin olun. En fazla üç farklı boyutta ve en fazla üç farklı yazı tipi kullanılması yaygın bir öneridir.
• Grafikler: Yalnızca bir kullanıcının bir görevi tamamlamasına veya belirli bir işlevi gerçekleştirmesine yardımcı oluyorsa grafikleri kullanın (isterseniz ister istemez grafik eklemeyin).

2. Görsel Hiyerarşi

Sadelik ilkesine sıkı sıkıya bağlı olan görsel hiyerarşi, ziyaretçilerin doğal olarak önce en önemli öğelere yönelmesi için web sitesi öğelerinin düzenlenmesi ve organize edilmesi anlamına gelir.

Kullanılabilirlik ve kullanıcı deneyimi için optimizasyon söz konusu olduğunda, hedefin ziyaretçileri istenen bir eylemi doğal ve eğlenceli hissettirecek şekilde tamamlamaya yönlendirmek olduğunu unutmayın. Belirli öğelerin konumunu, rengini veya boyutunu ayarlayarak sitenizi, görüntüleyenlerin önce bu öğelere çekileceği şekilde yapılandırabilirsiniz.

3. Gezilebilirlik

Sitenizde sezgisel gezinmeyi planlamak, ziyaretçilerin aradıklarını bulmalarına yardımcı olmak için çok önemlidir. İdeal olarak, bir ziyaretçi sitenize gelmeli ve bir sonraki adımda nereye tıklayacağı konusunda kapsamlı bir şekilde düşünmek zorunda kalmamalıdır. A noktasından B noktasına hareket mümkün olduğunca sorunsuz olmalıdır.

Sitenizin gezinmesini optimize etmek için birkaç ipucu:

• Birincil gezinme yapınızı basit ve sayfanızın üst kısmına yakın tutun.
• Sitenizin alt bilgisine navigasyon ekleyin.
• Kullanıcıların gezinme izlerini hatırlamaları için her sayfada (ana sayfanız hariç) içerik haritaları kullanmayı düşünün.
• Ziyaretçilerin anahtar kelimelere göre arama yapabilmesi için sitenizin üst kısmına yakın bir arama çubuğu ekleyin.
• Sayfa başına çok fazla gezinme seçeneği sunmayın.
• Sayfanıza metin içi bağlantılar ekleyin ve bu bağlantıların nereye gittiğini açıkça belirtin.
• Kullanıcıları çok derine inmeye zorlamayın. Bir piramit gibi düzenlenmiş tüm site sayfalarınızın temel bir müşteri yolculuğu haritasını yapmayı deneyin: Ana sayfanız en üstte ve bir öncekinden bağlantılı her sayfa bir sonraki katmanı oluşturmalı. Çoğu durumda, haritanızı en fazla üç seviyeden daha derin tutmamanız en iyisidir.

Sitenizin ana (üst) navigasyonunun ne olacağına karar verdikten sonra, onu tutarlı tutun. Gezinmenizin etiketleri ve konumu her sayfada aynı kalmalıdır. Bu bizi güzel bir şekilde bir sonraki prensibimize götürür: Tutarlılık!

4. Tutarlılık

Gezinmenizi tutarlı tutmanın yanı sıra, sitenizin genel görünümü ve verdiği his, sitenizin tüm sayfalarında benzer olmalıdır. Arka planlar, renk şemaları, yazı biçimleri ve hatta yazınızın tonu, tutarlılığın kullanılabilirlik ve kullanıcı deneyimi üzerinde olumlu bir etkiye sahip olduğu alanlardır.

Bu, her sayfanın aynı düzeni izlemesi gerektiği anlamına gelmez. Bunun yerine, belirli sayfa türleri (ör. açılış sayfaları, bilgi sayfaları vb.) için farklı düzenler oluşturun. Bu düzenleri tutarlı bir şekilde kullanarak, ziyaretçilerin belirli bir sayfada ne tür bilgiler bulabileceklerini anlamalarını kolaylaştıracaksınız.

5. Duyarlılık

Küresel sayfa görüntülemelerinin %48'i akıllı telefonlar ve tabletler gibi mobil cihazlardan geliyordu. Araştırmamıza göre, insanların %93'ü, cihazlarında düzgün görüntülenmediği web sitelerinden 2 saniye içinde ayrıldı.

Buradaki çıkarım: Gerçekten harika bir kullanıcı deneyimi sağlamak için web sitenizin, ziyaretçilerinizin kullandığı birçok farklı cihazla uyumlu olması gerekir. Teknoloji dünyasında buna duyarlı tasarım denir.

Duyarlı tasarım, oldukça esnek bir web sitesi yapısına yatırım yapmak anlamına gelir. Duyarlı bir sitede, içerik otomatik olarak yeniden boyutlandırılır ve bir ziyaretçinin kullanmakta olduğu cihazın boyutlarına uyacak şekilde yeniden karıştırılır. Bu, mobil uyumlu HTML şablonlarıyla veya özel bir mobil site oluşturarak gerçekleştirilebilir.

Sonuç olarak, farklı cihazlarda harika bir deneyim sağlamak, bu cihazlarda aynı görünmekten daha önemlidir.

Mobil uyumluluğun yanı sıra, web sitenizin tarayıcılar arası uyumluluğunu test etmeye değer. Büyük olasılıkla, sitenizi Google Chrome, Safari, Firefox veya Opera gibi yalnızca bir web tarayıcısında görüntülediniz.

Şimdi sayfalarınızı bu tarayıcıların her birinde açma ve öğelerinizin nasıl göründüğünü değerlendirme zamanı. İdeal olarak, sunumda çok fazla fark olmayacaktır, ancak kendiniz görene kadar kesin olarak bilemezsiniz.

6. Erişilebilirlik

Web erişilebilirliğinin amacı, tarama deneyimlerini etkileyen engelleri veya sınırlamaları olan kişiler de dahil olmak üzere herkesin kullanabileceği bir web sitesi oluşturmaktır. Bir web sitesi tasarımcısı olarak, bu kullanıcıları UX planınızda düşünmek sizin işiniz.

Duyarlılık gibi erişilebilirlik de sitenizin tamamı için geçerlidir: yapı, sayfa formatı, görseller ve hem yazılı hem de görsel içerik. Web Erişilebilirlik Girişimi ve World Wide Web Konsorsiyumu tarafından geliştirilen Web İçeriği Erişilebilirlik Yönergeleri (WCAG), web erişilebilirliği için yönergeleri belirler. Geniş anlamda, bu yönergeler web sitelerinin aşağıdaki hedeflere sahip olmasını önerir.

• Algılanabilir: Ziyaretçiler sitenizdeki içeriğin farkındadır.
• Çalıştırılabilir: Web sitenizin işlevselliği farklı şekillerde mümkün olmalıdır.
• Anlaşılabilir: Tüm içerik ve uyarılar kolayca anlaşılabilir.
• Sağlam: Web siteniz farklı yardımcı teknolojiler, cihazlar ve tarayıcılarda kullanılabilir.

7. Geleneksellik

Web tasarımında büyük bir zorluk, orijinalliği beklentilerinizle dengelemektir. Çoğumuz uzman internet kullanıcılarıyız ve zamanla alıştığımız belirli kurallar var. Bu tür ortak kültür şunları içerir:

• Ana gezinmeyi bir sayfanın üstüne (veya sol tarafına) yerleştirmek.
• Bir sayfanın sol üstüne (veya ortasına) bir logo yerleştirme.
• Logoyu tıklanabilir yapmak, böylece her zaman bir ziyaretçiyi ana sayfaya geri getirir.
• Fareyle üzerine geldiğinizde renk/görünüm değiştiren bağlantılara ve düğmelere sahip olmak.
• Bir e-ticaret sitesinde alışveriş sepeti simgesi kullanma. Simgede ayrıca sepetteki öğelerin sayısını gösteren bir numara rozeti bulunur.
• Görüntü kaydırıcılarının, kullanıcıların slaytları manuel olarak döndürmek için tıklayabileceği düğmelere sahip olmasını sağlama.

Bazıları benzersizlik uğruna bunları uygulamamayı tercih etse de, bu bir hatadır. Web konvansiyonelliğinin kısıtlamaları dahilinde hala yaratıcılık için bolca yer var.

Bir başka tasarım alanı olan mimariyi kısaca ele alalım. Bina kodları, insanların alanlarda kolayca ve güvenli bir şekilde yaşayabilmesi için konur. Bir mimar bu kurallardan şikayet etmez veya onları ihlal etmez çünkü yasal sonuçları bir yana misafirlerin güvenliğini ve rahatını sağlarlar. Binanın ne kadar göz kamaştırıcı göründüğü önemli değil - engebeli merdivenlerde takılırsanız veya yangında dışarı çıkamıyorsanız, dışarıda kalmayı tercih edebilirsiniz.

Aynı şekilde, kullanıcı beklentilerini karşılarken unutulmaz bir deneyim yaratabilirsiniz. Kullanıcıların beklentilerini ihlal ederseniz, web sitenizden rahatsızlık duyabilir ve hatta hüsrana uğrayabilirler.

8. Güvenilirlik

Web kurallarına bağlı kalmak, sitenize güvenilirlik kazandırır. Başka bir deyişle, sitenizin ilettiği güven düzeyini artırır. Ve mümkün olan en iyi kullanıcı deneyimini sağlayan bir site oluşturmaya çalışıyorsanız, güvenilirlik uzun bir yol kat eder.

Güvenilirliğinizi artırmanın en iyi yöntemlerinden biri, sattığınız ürün veya hizmet hakkında açık ve dürüst olmaktır. Ne yaptığınızı bulmak için ziyaretçileri düzinelerce sayfayı incelemeye zorlamayın. Ana sayfanızda açık olun ve yaptığınız şeyin arkasındaki değeri açıklamaya biraz zaman ayırın.

Başka bir güvenilirlik ipucu: Ana sayfada da bağlantılı bir fiyatlandırma sayfanız olsun. İnsanları fiyatlandırma hakkında daha fazla bilgi edinmek için sizinle iletişime geçmeye zorlamak yerine, fiyatlarınızı sitenizde açık bir şekilde listeleyin. Bu, işletmenizin daha güvenilir ve meşru görünmesini sağlar.

9. Kullanıcı odaklılık

Günün sonunda kullanılabilirlik ve kullanıcı deneyimi, son kullanıcıların tercihlerine bağlıdır. Sonuçta, onlar için tasarlamıyorsanız, kimin için tasarlıyorsunuz?

Bu nedenle, bu listede ayrıntıları verilen ilkeler harika bir başlangıç ​​noktası olsa da, sitenizin tasarımını iyileştirmenin son anahtarı, kullanıcı testi yapmak, geri bildirim toplamak ve öğrendiklerinize dayalı olarak değişiklikleri uygulamaktır.

Kullanılabilirliği kendi başınıza test etmeye zahmet etmeyin. Zaten tasarımınıza çok fazla zaman harcadınız, bu da kendi önyargılarınızı denkleme dahil ediyor. Sitenizi daha önce hiç görmemiş test kullanıcılarını ilk kez ziyaret edenlerle aynı şekilde edinin.

İşte başlamanıza yardımcı olacak kullanıcı test araçları:

• Crazy Egg: Birden fazla alanı tek bir hesap altında izleyin ve dört farklı zeka aracını (ısı haritası, kaydırma haritası, yer paylaşımı ve konfeti) kullanarak sitenizin performansıyla ilgili içgörüleri ortaya çıkarın.
• Loop11: Herhangi bir HTML deneyiminiz olmasa bile kolayca kullanılabilirlik testleri oluşturmak için bu aracı kullanın.

Umarız bu yönergeler, web sayfalarınızın ve bir bütün olarak web sitenizin yapısını bilgilendirmede yararlıdır. Ancak, bu yönergeler nasıl uygulamaya konur? Tasarım sürecinde izleyebileceğiniz bazı eyleme dönüştürülebilir en iyi uygulamalara bir göz atalım.

Web Sitesi Tasarımı En İyi Uygulamaları

1. Okuması ve Gözden Geçirmesi Kolay Bir Tipografi Seçin.

Tipografi, yazının - yani harflerin ve karakterlerin - sayfada nasıl düzenlendiğini ve sunulduğunu ifade eder. Web sitesi tipografisi yalnızca nasıl okuduğumuzu değil, aynı zamanda bir web sayfasındaki metin hakkında ne hissettiğimizi de etkilediğinden, dikkatli bir şekilde seçmek önemlidir.

İdeal olarak, şu özelliklere sahip bir yazı tipi istersiniz:

• okuması kolay
• gözden geçirmek kolay
• tüm kullanıcılar tarafından erişilebilir
• birden fazla cihazda ve ekran boyutunda okunabilir

Ayrıca markanızın görünümüne ve hissine uymasını da istersiniz. Örneğin lüks moda markası Burberry, 20 yıl aradan sonra ilk kez logosunu 2018'de yeniledi. Eski serif yazı tipini kalın, tamamı büyük, sans serif yazı tipiyle değiştirdi ve şövalye amblemini kaldırdı. Sonuç, daha basit ve daha modern görünen, herhangi bir ekranda okunması daha kolay olan ve şirketteki değişiklikleri yansıtan, daha şeffaf ve daha genç bir nesle hitap eden bir logo oldu.

2. Markanıza Uygun Bir Renk Şeması Seçin.

Tipografi gibi, renk de yalnızca içeriği nasıl anladığımızı ve içerikle nasıl etkileşim kurduğumuzu değil, aynı zamanda içerik hakkında nasıl hissettiğimizi de etkileyebilir. Bu nedenle renk şemanız, web sitenizin tipografisiyle aynı kutuları işaretlemelidir:

• marka kimliğinizi güçlendirin
• sitenizi okunması ve gezinmesi kolay hale getirin
• duygu uyandırın
• iyi görünün

Örneğin Buzzfeed, kullanıcıların dikkatini çekmek ve onları içerik konusunda heyecanlandırmak için sarı ve kırmızı ana renkleri kullanır. Güvenle ilişkilendirilen mavi ana rengin kullanımını yalnızca bağlantılar ve CTA (call to action, eylem) düğmeleri için saklı tutar. Her iki duygu da bir medya sitesi için uyandırmak için idealdir.

3. Metni ve Diğer Öğeleri Ayırmak İçin Beyaz Boşluğu Kullanın.

Boşluk, herhangi bir kompozisyondaki negatif alanları ifade eder. Whitespace, kullanıcılara bir web sitesinin tasarımını veya içeriğini işlerken yalnızca estetik açıdan hoş olmayan görsel molalar sağlar. Boşluk, dikkat dağıtıcı unsurları en aza indirerek kullanıcıların odaklanmasını, bilgileri işlemesini ve neyin önemli olduğunu anlamasını kolaylaştırır.

Bu, aşırı bilgi yüklemesine veya analiz felcine neden olmamak ve sayfadaki önemli öğeleri vurgulamak için boşluk kullanabileceğiniz anlamına gelir. Bu, kullanıcıları bir haber bültenine kaydolmak, en son koleksiyonunuzu satın almak ve daha fazlası gibi belirli bir eylemi gerçekleştirmeye ikna etmeye yardımcı olabilir.

4. Kişilik ve Derinlik Eklemek İçin Doku Kullanın.

Üç boyutlu, dokunsal bir yüzeye benzeyen ağ dokuları, dokunmanın fiziksel hissini başka bir his olan görme ile çoğaltmayı amaçlar. Özellikle sitenize kişilik ve derinlik katmak istiyorsanız, düz renkli arka planlara harika bir tasarım alternatifidir.

5. Okuyucuların İlgisini Çekecek ve Bilgilendirecek Görüntüler Ekleyin.

Web sitesi tasarımında metin ve resimler arasında bir denge kurmak çok önemlidir. Görselleri birleştirmek, içeriğinizi daha bilgilendirici, ilgi çekici ve akılda kalıcı hale getirebilir. İnsanların okuduklarının sadece %20'sini, gördüklerinin ise %80'ini hatırladığına dair istatistikleri muhtemelen duymuşsunuzdur. Kesin yüzdeler tartışılırken, temel fikir değil. Bazı insanlar için bilgiyi görsel olarak öğrenmek ve işlemek daha kolaydır.

6. Gezinmenizi Basitleştirin.

Gezinme, bir web sitesindeki en önemli tasarım öğelerinden biridir. Ziyaretçilerin ana sayfanıza gelip göz atmalarını veya "Geri" düğmesini tıklamalarını etkiler. Bu yüzden mümkün olduğunca basit tutmak önemlidir.

Birçok web sitesi yatay gezinme çubuğunu tercih eder. Bu gezinme stili, ana sayfaları yan yana listeler ve web sitesi başlığına yerleştirilir.

7. Eylem Düğmelerinizi (CTA) Öne Çıkarın.

CTA'lar, bir web sayfasında, reklamda veya başka bir içerikte yer alan ve izleyiciyi bir şeyler yapmaya teşvik eden öğelerdir. Harekete geçirici mesaj, kaydolmak, abone olmak, ücretsiz bir deneme başlatmak veya daha fazlasını öğrenmek olabilir.

CTA'larınızın web sitesi tasarımınızda görünmesini istiyorsunuz. Bunu gerçekleştirmek için rengi ve arka plan rengi, çevreleyen resimler ve çevreleyen metin gibi diğer öğeleri nasıl kullandığınızı düşünün.

8. Mobil İçin Optimize Edin.

Web sitenizin duyarlı olmasının ne kadar önemli olduğunu zaten tartışmıştık. Ancak 2021'de organik arama motoru ziyaretlerinin %59'unu mobil cihazlar oluşturduğundan, web sitenizi mobil uyumlu olacak şekilde tasarlamanın önemini iki katına çıkarıyoruz. Bu, daha küçük ekran boyutlarını karıştıracak veya yükleme süresini olumsuz yönde etkileyecek bazı öğelerin değiştirilmesi veya kaldırılması anlamına gelebilir.

En iyi mobil web sitesi tasarımlarından birine örnek olarak, Etsy'nin masaüstü ve mobil ana sayfasını karşılaştırın. Masaüstünde kategorileri olan bir gezinme çubuğu göreceksiniz. Her kategorinin üzerine gelindiğinde bir açılır menü görüntülenir.

9. Kullanıcılara Sunulan Seçenekleri Sınırlandırın.

Hick Yasasına göre, seçimlerin sayısı ve karmaşıklığı arttıkça, kişinin karar vermesi için gereken süre de artacaktır. Bu, web sitesi tasarımında kötü bir haber. Bir web sitesi ziyaretçisine çok fazla seçenek sunulursa, hayal kırıklığına uğrayabilir ve geri dönebilir veya sizin istemediğiniz bir seçeneği seçebilir, örneğin alışveriş sepetini terk edebilir. Bu nedenle, bir kullanıcıya sunulan seçeneklerin sayısını sınırlamak önemlidir.

Profesyonel İpucu: Kurallara uyacak zamanınız yok mu? Siteniz için sağlam bir temel sağlayacak önceden oluşturulmuş bir web sitesi şablonlarını her zaman kullanabilirsiniz.

Artık tasarım süreci boyunca size yol göstermesi gereken ilkeleri ve en iyi uygulamaları anlıyoruz. Bir sonraki bölümde, tasarım planınıza dahil etmeyi kesinlikle düşünmeniz gereken temel sayfa öğelerini listeleyelim.

Web Sitesi Tasarım Gereksinimleri

1. Başlık ve altbilgi
2. Menüde Gezinme
3. Arama çubuğu
4. Markalaşma
5. Renk paleti
6. Başlıklar
7. Etiketleri Temizle
8. Görseller ve Medya
9. Harekete Geçirici Mesajlar (CTA'lar)
10. Beyaz boşluk

1. Üstbilgi ve Altbilgi

Üst bilgi ve alt bilgi, hemen hemen her modern web sitesinin temelini oluşturur. Bunları, ana sayfanızdan blog yazılarınıza ve hatta "Sonuç bulunamadı" sayfanıza kadar sayfalarınızın çoğuna dahil etmeye çalışın.

Başlığınız, markanızı bir logo ve kuruluş adı, menüde gezinme ve belki bir CTA ve/veya iyi aralıklı ve minimum düzeydeyse bir arama çubuğu biçiminde içermelidir. Öte yandan, altbilginiz, birçok kullanıcının temel bilgileri içgüdüsel olarak kaydıracağı yerdir. Altbilginize, iletişim bilgilerini, bir kayıt formunu, ortak sayfalarınıza bağlantılar, yasal ve gizlilik politikaları, sitenizin çevrilmiş sürümlerine bağlantılar ve sosyal medya bağlantıları yerleştirin.

2. Menüde Gezinme

Başlıktaki bağlantıların bir listesi veya köşedeki derli toplu ve kompakt bir hamburger düğmesi olsun, her web sitesinin en azından ana sayfanızın ve diğer önemli sayfaların en üstüne yerleştirilmiş bir gezinme kılavuzuna ihtiyacı vardır. İyi bir menü, web sitenizin herhangi bir bölümüne ulaşmak için tıklama sayısını yalnızca birkaçıyla sınırlar.

Dağınıklığı azaltmak için, modern web sitelerinin ana sayfasında görülebileceği gibi, bazı veya tüm menü seçeneklerini içinde bağlantılar bulunan bir açılır menü yapmayı düşünebilirsiniz.

3. Arama Çubuğu

Menüde gezinmeye ek olarak, kullanıcıların sitenizde anahtar kelimeye göre arama yapabilmesi için sayfalarınızın üst kısmına bir arama çubuğu yerleştirmeyi kesinlikle düşünün. Bu işlevi dahil ediyorsanız, sonuçlarınızın alakalı olduğundan, yazım hatalarını affettiğinden ve yaklaşık anahtar kelime eşleme yeteneğine sahip olduğundan emin olun. Google, Amazon, YouTube veya başka bir yerde, çoğumuz her gün yüksek kaliteli bir arama motoru kullanıyoruz. Bunların hepsi, kendi site aramanız için standardı belirler.

4. Markalaşma

Tartıştığımız gelenekleri hatırlıyor musunuz? Hemen hemen her yerde gördüğünüz, sol üst köşedeki bir logodur. İlk inişte, birçok ziyaretçinin gözleri doğru yerde olup olmadıklarını kontrol etmek için içgüdüsel olarak bu bölgeye kayar. Onları boş bırakmayın.

Bu kavramı güçlendirmek için, şirket markanızı eklediğiniz her öğeye, yayınladığınız içeriğe ve oluşturduğunuz renk şemasına dahil edin. Bu nedenle, henüz oluşturmadıysanız marka yönergeleri oluşturmanızı öneririz — referans için stil kılavuzumuza göz atın.

5. Renk Paleti

Renk seçimi, sitenizin kullanılabilirliği ve kullanıcı deneyiminde de önemli bir rol oynar. Bu karar, bu listedeki diğer gerekliliklerden daha öznel olma eğilimindedir. Ancak, tartıştığımız diğer her şey gibi, basitleştirmeye çalışın - renk seçiminizi en fazla 3-4 belirgin renkle sınırlayın.

Bir renk paletini sıfırdan başlatmak, ilk seferinde şaşırtıcı derecede zor olabilir. Hangi renklerin birlikte iyi çalıştığını ve hangilerinin çalışmadığını sezgisel olarak anlıyor gibiyiz, ancak mevcut sonsuz kombinasyonlar arasından seçim yapmaya çalışırken tökezliyoruz.

Çözüm? Diğer web sitelerinde çalıştığı gösterilen bir renk paletini deneyin. En sevdiğiniz sitelerden etkilenin ve başlamak için en sevdiğimiz web sitesi renk şemaları listemize bakın.

6. Başlıklar

Başlıklar, özellikle metin ağırlıklı sayfalarda daha önce tartıştığımız görsel hiyerarşiyi oluşturmanın anahtarıdır. Kullanıcılar ihtiyacınız olan şeyleri sayfalarınızda gözden geçirirken, net ve isabetli bir başlık, okuyucuları istediklerini bulduktan sonra kaydırmayı bırakmaları konusunda uyarır. Çok fazla şişirilmiş ve koyu yazılmış metin bu etkiyi azaltacağından, yalnızca sayfanızın farklı bölümleri olduğu kadar çok başlık kullanın.

7. Etiketleri Temizle

Bir kullanıcı web sitenizde bir işlem yaptığında, tam olarak ne yaptıkları ve/veya nereye gittikleri açık olmalıdır. Tüm düğmeler, amaçlarını tam ve öz bir şekilde belirtmek için açık metin veya bir simgeye sahip olmalıdır. Aynı şey metin içi bağlantılar ve widget'lar (açılır menüler ve metin formları gibi basit etkileşimli öğeler) için de geçerlidir.

Örneğin, bir fiyatlandırma sayfasına bağlantı veren bir düğmede "Fiyatlandırma" yazmalıdır - bunun ötesindeki herhangi bir şey (örneğin, "Fiyatlarımızı görün", "Bir anlaşma için fiyatlandırma sayfasına göz atın") gereksizdir. Bir arama çubuğu/düğmesi, amacını belirtmek için yalnızca bir arama camı simgesine ve belki de "Ara" sözcüğüne ihtiyaç duyar.

Kullanıcı testi burada büyük bir yardımcı olabilir. Tüm etkileşimli sayfa öğelerinizin ne işe yaradığını kendiniz bilseniz de, yeni bir kullanıcı için aynı şey söylenemez. Test, kullanıcıların etiketlerinizin ne anlama geldiğine dair kendi bakış açınızın ötesinde değerli bilgiler sağlayacaktır.

8. Görseller ve Medya

Sayfalarınıza statik resimler, gifler, videolar ve diğer ortamları dahil ederken, seçimlerinizde tutarlı ve bilinçli olmayı unutmayın. Bu öğeler, diğer metinlerin çoğuna göre dikkat çekecek ve muhtemelen kullanıcıların akıllarında kalacak, bu nedenle akıllıca seçim yapın.

İşte bir ana sayfadaki etkili medyaya yalnızca bir örnek. Her görüntünün sayfa estetiğini nasıl tamamladığına ve kişiselleştirilmiş fitness eğitimi teklifini sonuçlarla nasıl desteklediğine dikkat edin.

Ayrıca, tüm resimler ve videolar arama motorları için optimize edilmeli ve erişilebilirlik için açıklayıcı alternatif metin içermelidir.

9. Harekete Geçirici Mesajlar (Cta)

Hoş bir web sitesine sahip olmak harikadır, ancak ziyaretçilerinizin gerçekten istediğinizi yapıp yapmadığını nasıl anlarsınız? İçeriğinizle ilgileniyorlar mı? CTA'ların devreye girdiği yer burasıdır.

Bir CTA, kullanıcı eylemini isteyen herhangi bir sayfa öğesidir. Eylem, bir karta ürün eklemek, bir içerik teklifini indirmek veya bir e-posta listesine kaydolmak olabilir. Harekete geçirici mesaj öğelerinizi görsel hiyerarşide belirgin hale getirin (Spotify örneğimizi hatırlayın), ancak çoğu tıklama reklamının genellikle olduğu gibi müdahaleci veya dikkat dağıtıcı değil.

Daha fazla dönüşüm sağlayan şık CTA'lar için fikirlere ihtiyacınız varsa, CTA örnekleri listemize bakın.

10. Boşluk

Yukarıda belirtildiği gibi, bazen dahil etmediğiniz unsurlarla ilgilidir. Bu yönergeleri ve gereksinimleri okuduktan sonra, sayfalarınızı kusursuz bir kullanıcı deneyimi için gereken tüm ayrıntılarla doldurmak isteyebilirsiniz. İzleyicilerinizin tüm bu yeni bilgileri sindirmek için alana ihtiyacı olduğunu unutmayın, bu nedenle öğelerinize nefes alacak alan bırakın.

Ancak, ne kadar boşluk bırakmalısınız? Bu başka bir kişisel görüşme ve siteden siteye değişir. Bu nedenle, kullanıcı testi burada da kullanışlıdır. İnsanlar neye odaklanıyor? İçeriğin yoğunluğundan bunalmış hissediyorlar mı? Bir kez daha, her şey ilk kuralımız olan sadelikle bağlantılı.

Önceliği Kullanıcıya Veren Tasarım

Aslında, web tasarımı büyük ölçüde özneldir - web sitenizin görünümü ve deneyimi herkesi memnun etmeyecektir. Bununla birlikte, dikkatlice düşünüldüğünde ve birleştirildiğinde ziyaretçilerin kendilerini evlerinde hissetmelerine yardımcı olan, denenmiş ve gerçek kullanıcı deneyimi ilkeleri de vardır.

Amazon Web Services'e göre, web sitesi ziyaretçilerinin %88'inin kötü bir deneyimden sonra bir web sitesine geri dönme olasılığı daha düşük. Ve onları nasıl suçlayabilirsin? Kesinlikle hepimiz oradaydık.

Bu nedenle, kullanılabilirlik/UX bilgeliğinin son bir parçası olarak, daha fazla önemsemeye başlayın! Kendinizi ziyaretçilerinizin yerine (veya daha doğrusu tarayıcı pencerelerine) koyun ve tasarım sürecinin her adımında onları aklınızda tutun.