Kullanıcı Dostu Web Siteleri

Kullanıcı dostu web siteleri ne demek?

Kullanıcı dostu web siteleri, ziyaretçinin aradığı bilgiye düşünmeden, yorulmadan ve hangi cihazdan gelirse gelsin ulaşabildiği sitelerdir. Güzel bir görünüm bunun bir parçasıdır ama tek başına yetmez. Menünün mantığı, metnin okunabilirliği, sayfanın açılma hızı ve formun kolay doldurulması da aynı deneyimin içindedir.

Bu sayfada odağımız hizmet anlatan, güven veren ve ziyaretçiyi aramaya, yazmaya ya da teklif istemeye yönlendiren kurumsal sitelerdir. Sepet, ödeme ve ürün kataloğu gibi satış akışları ayrı bir uzmanlık ister; bu konuyu e-ticaret siteleri sayfamızda ayrıca ele alıyoruz.

Kullanıcı dostu web sitelerinin ortak işaretleri

Bir sitenin rahat kullanılıp kullanılmadığını anlamak için uzman olmak gerekmez. Aşağıdaki maddelerin çoğu sitenizde geçerliyse doğru yoldasınız:

• Ziyaretçi ana sayfanın ilk ekranında ne iş yaptığınızı anlar.
• Menü başlıkları sizin iç terimlerinizle değil, müşterinin kullandığı kelimelerle yazılmıştır.
• Telefon numarası, adres ve teklif formu her sayfadan kolayca bulunur.
• Sayfa mobil bağlantıda da beklemeden açılır, içerik yüklenirken yerinden kaymaz.
• Metin, telefon ekranında yakınlaştırma yapmadan okunur.
• Klavyeyle ya da ekran okuyucuyla gezinen biri de siteyi kullanabilir.

Kimler için öncelikli?

Müşterisi karar vermeden önce siteye bakan her işletme için kullanılabilirlik önemlidir, ama bazı sektörlerde etkisi daha çabuk hissedilir. Randevuyla çalışan klinikler ve stüdyolar, teklif toplayan üretici ve hizmet firmaları, rezervasyon alan restoran ve oteller bu grubun başındadır. Sitesi yıllar önce masaüstü ekran için yapılmış ve telefonda zorlanan işletmeler de kullanıcı dostu web siteleri çalışmasından en çok fayda görenler arasındadır.

Ziyaretçinin aradığını bulması: içerik ve menü kurgusu

Kullanıcı dostu web siteleri tasarlarken işe renklerden değil, ziyaretçinin siteye neden geldiğinden başlarız. Bir klinik sitesine gelen kişi muayene koşullarını, adresi ya da randevu yolunu arar. Bir üreticinin sitesine gelen satın almacı ise ürün gamını, üretim kapasitesini ve katalog dosyasını görmek ister. Bu soruları listelemek, sayfa yapısının büyük kısmını kendiliğinden ortaya çıkarır.

Ziyaretçi görevlerinden başlamak

İlk görüşmede müşterilerinizin size en sık sorduğu soruları ve sitede yapmasını istediğiniz işleri birlikte yazarız. “Hizmet bölgesini öğrenmek”, “örnek iş incelemek”, “teklif istemek” gibi görevler önem sırasına konur. Her görev için ziyaretçinin kaç adımda sonuca ulaştığını sayar, gereksiz adımları görsel tasarıma geçmeden ayıklarız. Kullanıcı dostu web siteleri bu görev listesinin etrafında kurulur.

Menü ve sayfa hiyerarşisi

Menüde az sayıda ve net başlık tutmak, ziyaretçinin karar yükünü azaltır. “Çözümlerimiz” ya da “Neler yapıyoruz” gibi belirsiz başlıklar yerine hizmetin kendisini anlatan kelimeler kullanırız. Kullanıcı dostu web sitelerinde ziyaretçi hangi sayfada olduğunu ve bir üst bölüme nasıl döneceğini her an görebilir.

Okunabilir metin ve sayfa düzeni

Ekranda metin baştan sona okunmaktan çok taranır. Kısa paragraflar, anlamlı ara başlıklar, maddeli listeler ve yeterli satır aralığı, ziyaretçinin aradığı cümleyi bulmasını kolaylaştırır. Kullanıcı dostu web sitelerinde metni tasarımın sonradan doldurulan bir parçası olarak değil, sayfa düzenini belirleyen ana malzeme olarak görürüz.

Bu yüzden içeriğin taslağını mümkün olduğunca erken isteriz. Gerçek başlıklar ve gerçek paragraflarla çizilen bir sayfa, “buraya metin gelecek” yazan bir taslağa göre çok daha doğru kararlar verdirir.

Formlar ve iletişim yolları

Kurumsal bir sitede dönüşümün çoğu bir form, bir telefon araması ya da bir mesajla gerçekleşir. Yalnızca gerçekten gerekli alanları sormak, her alanın üstünde görünür bir etiket kullanmak ve hata mesajında neyin eksik olduğunu açıkça yazmak formun tamamlanmasını kolaylaştırır. Formu gönderen kişiye bundan sonra ne olacağını söyleyen kısa bir onay mesajı da güven verir.

Mobil uyumlu web tasarımda telefon numarasına dokununca aramanın başlaması, adrese dokununca harita uygulamasının açılması gibi kısa yollar da ziyaretçinin işini kolaylaştırır. Ziyaretçi bazen form doldurmak yerine hemen aramak ister; iki yolu da açık tutmak gerekir.

Güven veren ayrıntılar

Kurumsal sitede ziyaretçi karar vermeden önce sizi tanımak ister. Gerçek ekip ve mekân fotoğrafları, açık adres ve çalışma saatleri, tamamlanmış işlerden örnekler ve sık sorulan soruların yanıtları bu güveni kurar. Kullanıcı dostu web sitelerinde bu bilgiler bir alt sayfanın derinliğine gömülmez, ilgili hizmetin hemen yanında görünür.

Mobil uyumlu web tasarımda dikkat ettiklerimiz

Pek çok sektörde siteye gelen ziyaretlerin önemli bir bölümü telefondan gelir; kendi sitenizdeki oranı analiz araçlarınızdan görebilirsiniz. Bu yüzden mobil uyumlu web tasarım bizim için masaüstü sayfanın sonradan küçültülmüş hâli değildir. Sayfaları önce telefon ekranında kurar, ardından geniş ekranlara doğru genişletiriz. Böylece en dar alanda neyin gerçekten önemli olduğuna baştan karar vermiş oluruz.

Başparmakla kullanım ve dokunma alanları

Telefonda site çoğunlukla tek elle, başparmakla kullanılır. Düğmelerin ve bağlantıların rahatça dokunulabilecek büyüklükte olması ve birbirine çok yakın durmaması yanlış tıklamaları azaltır. WCAG 2.2, AA düzeyinde dokunma hedefleri için kural olarak en az 24×24 CSS piksellik bir alan ya da hedefler arasında buna denk bir boşluk ister. Mobil uyumlu web tasarım sürecinde bu sınırın rahatça üzerinde kalmayı hedefleriz.

Mobilde menü ve sabit iletişim düğmeleri

Telefonda en hassas nokta menüdür. Gizlenen menünün içinde kaybolan bir “İletişim” bağlantısı, ziyaretçinin size ulaşmasını zorlaştırır. Bu yüzden arama, mesaj ya da rezervasyon gibi asıl eylemi ekranda kolay erişilen bir yerde sabit tutmayı tercih ederiz.

Kiev’de yeni açılan bir restoran için hazırladığımız sitede Rezervasyon, Galeri, Menü ve İletişim bölümlerinden oluşan sade bir yapı kurduk. Ziyaretçinin birkaç dokunuşla menüye ve rezervasyona ulaşmasını, sabit bir iletişim düğmesiyle de restorana kolayca yazmasını sağladık. Ayrıntılar Celebrity Kiev projesi sayfasında.

Görseller, tablolar ve uzun içerikler

Masaüstünde etkileyici görünen geniş bir fotoğraf, telefonda anlamsız bir şeride dönüşebilir. Mobil uyumlu web tasarımda görselleri her ekran için ayrı kadrajlarla planlar, tabloları telefonda okunur bir düzene çeviririz. Uzun hizmet sayfalarında açılır kapanır bölümler ve sayfa içi bağlantılar, ziyaretçinin kaydırırken yönünü kaybetmesini önler.

Mobil uyumlu web tasarımı gerçek cihazlarda denemek

Bilgisayarda daraltılmış bir tarayıcı penceresi, telefonun yerini tutmaz. Gerçek cihazlarda ekran çentikleri, açılıp kapanan adres çubuğu, yavaş bağlantı ve güneş altında okunabilirlik farklı sonuçlar verir. Bu yüzden mobil uyumlu web tasarım testlerini farklı boyut ve yaşta telefonlarda yaparız; eski bir cihazda akıcı çalışan sayfa, yenisinde de genellikle sorunsuz çalışır.

Tablet ve geniş ekranlar

Mobil öncelikli çalışmak, geniş ekranı ihmal etmek anlamına gelmez. Tablette yatay ve dikey kullanım, büyük monitörde ise satırların aşırı uzaması ayrı ayrı kontrol edilir. Metin sütununu okunur bir genişlikte tutmak, geniş ekranda da rahat bir okuma sağlar. Toplantı odasında büyük ekrandan sunulan bir sayfa ile otobüste telefondan açılan aynı sayfa, iki farklı kullanım anıdır.

Hız: kullanıcı dostu web sitelerinin görünmeyen tarafı

Ziyaretçi sitenin hızını bir özellik olarak fark etmez, ama yavaşlığı hemen fark eder. Google’ın web geliştiricilere yönelik kaynağı web.dev; yükleme, etkileşime tepki ve görsel kararlılık için üç temel ölçüt tanımlar ve bunlara Core Web Vitals adını verir. Kullanıcı dostu web siteleri için bu ölçütleri tasarımın başından itibaren hesaba katarız.

• Largest Contentful Paint (LCP): Sayfanın ana içeriğinin ne zaman göründüğünü ölçer; iyi bir deneyim için 2,5 saniye veya altı önerilir.
• Interaction to Next Paint (INP): Bir dokunuşa ya da tıklamaya sayfanın ne kadar çabuk tepki verdiğini ölçer; önerilen değer 200 milisaniye veya altıdır.
• Cumulative Layout Shift (CLS): İçeriğin yüklenirken yerinden kaymasını ölçer; önerilen değer 0,1 veya altıdır.

Bu eşiklerin ziyaretçilerin çoğunda tutturulduğunu görmek için sayfa yüklemelerinin 75. yüzdelik diliminin, mobil ve masaüstü için ayrı ayrı izlenmesi öneriliyor. Ölçütlerin ayrıntılarını web.dev’in Web Vitals rehberinde bulabilirsiniz.

Hızı belirleyen tasarım kararları

Hız yalnızca sunucu ya da kod meselesi değildir; tasarım kararlarının da doğrudan etkisi vardır. Mobil uyumlu web tasarım sürecinde şu öğeleri projenin başında sizinle birlikte değerlendiririz:

• Ana sayfanın tepesinde kendiliğinden oynayan büyük videolar ve çok slaytlı kaydırıcılar
• Çok sayıda farklı yazı tipi ve yazı ağırlığı
• Ekranda gösterildiği boyuttan çok daha büyük yüklenen fotoğraflar
• Her sayfaya eklenen sohbet, harita ve sosyal medya araçları gibi dış eklentiler
• Yüklenirken yer ayrılmadığı için metni aşağı iten görseller ve duyuru bantları

Bu öğelerin hiçbiri kendi başına yasak değildir; önemli olan her birinin sayfaya ne kattığını ve neye mal olduğunu bilerek seçmektir. Haritayı yalnızca iletişim sayfasında göstermek ya da videoyu ziyaretçi tıkladığında yüklemek, görünümden vazgeçmeden hız kazandıran basit kararlardır.

Hızı ölçmek ve izlemek

Geliştirme sırasında test araçlarıyla ölçüm yaparız, ama asıl tablo yayından sonra gerçek ziyaretçi verisi geldikçe ortaya çıkar. Search Console’daki Core Web Vitals raporu, hangi sayfa grubunun yavaşladığını gösterir. Yeni bir eklenti ya da büyük bir görsel eklendiğinde hızı yeniden kontrol etmek, kullanıcı dostu web sitelerinin zamanla ağırlaşmasını önler.

Erişilebilirlik: herkesin kullanabildiği bir site

Erişilebilirlik; görme, işitme, hareket ya da algı farklılıkları olan kişilerin de sitenizi kullanabilmesi demektir. Toplu taşımada sesi kapalı video izleyen, güneş altında ekranı zor gören ya da elinde çanta taşıyan herkes de aynı kararlardan fayda görür. Bu yüzden erişilebilirliği kullanıcı dostu web sitelerine sonradan eklenen bir özellik olarak değil, temel bir nitelik olarak ele alırız.

Uluslararası referans, W3C’nin Web İçeriği Erişilebilirlik Yönergeleri’dir (WCAG). W3C’nin Ekim 2023’te yayımladığı WCAG 2.2’de yönergeler algılanabilir, işletilebilir, anlaşılabilir ve sağlam olmak üzere dört ilke altında toplanır; başarı ölçütleri ise A, AA ve AAA olmak üzere üç düzeyde tanımlanır. Ayrıntılar için W3C’nin WCAG 2 tanıtım sayfasını inceleyebilirsiniz.

Tasarımda ve kodda dikkat ettiğimiz noktalar

• Menü, düğme ve formların yalnızca klavyeyle de kullanılabilmesi
• Klavyeyle gezinirken hangi öğede olunduğunu gösteren belirgin bir odak çerçevesi
• Bilgi taşıyan görseller için anlamlı alternatif metinler
• Form alanlarında, yazmaya başlayınca kaybolan yer tutucu yazı yerine kalıcı etiketler
• Bilgiyi yalnızca renkle vermemek; hatalı alanı simge ve metinle de belirtmek
• Metin büyütüldüğünde sayfanın dağılmaması ve başlıkların doğru sırayla kullanılması

Renk kontrastı da bu listenin parçasıdır. Kurumsal renklerinizin metin ve zemin olarak hangi eşleşmelerde okunur kaldığını tasarım aşamasında kontrol eder, gerekirse paletin ekran için uyarlanmış tonlarını öneririz.

Erişilebilirliği test etmek

Otomatik denetim araçları eksik alternatif metin ya da düşük kontrast gibi sorunların bir kısmını yakalar, ama hepsini bulamaz. Bu yüzden kullanıcı dostu web sitelerini yayından önce yalnızca klavyeyle ve telefonun ekran okuyucusuyla da gezeriz. Klavyeyle ulaşılamayan bir menü ya da ekran okuyucuda yalnızca “düğme” diye okunan bir bağlantı, bu testlerde kolayca ortaya çıkar.

Kullanıcı dostu web siteleri için çalışma sürecimiz

Her proje kendi ihtiyacına göre şekillense de adımların sırası benzerdir. Kurumsal web tasarım hizmetimizin genel çerçevesini hizmetler sayfamızda görebilirsiniz; aşağıda kullanılabilirlik odaklı adımları anlatıyoruz.

1. Mevcut sitenin incelenmesi

Bir siteniz varsa önce onu telefonda, tablette ve masaüstünde sıradan bir ziyaretçi gibi kullanırız. Analiz verisi varsa en çok ziyaret edilen ve en hızlı terk edilen sayfalara bakarız. Neyin çalıştığını görmek, yenilemede korunması gerekenleri belirler. Ekibinizin sitede en sık güncellediği bölümleri de bu aşamada öğreniriz, çünkü güncellemesi zor bir yapı zamanla eskiyen bir siteye dönüşür.

2. Site haritası ve tel kafes

Ziyaretçi görevlerine göre sayfa listesini ve menüyü çıkarırız. Ardından renksiz, sade çizimlerle her sayfanın hangi bilgiyi hangi sırayla vereceğini gösteririz. Bu aşamada yapılan bir düzeltme, görsel tasarım bittikten sonra yapılandan çok daha az emek ister.

3. Görsel tasarım

Onaylanan yapı, kurumsal kimliğinizin renkleri, yazı karakterleri ve fotoğraf diliyle görsel tasarıma dönüşür. Mobil uyumlu web tasarım ilkesine bağlı kalarak her sayfayı önce telefon ekranında, sonra geniş ekranlarda sunarız.

4. Geliştirme ve test

Tasarım koda dönüştükten sonra farklı telefon, tarayıcı ve ekran boyutlarında test ederiz. Formların doğru adrese ulaştığını, klavyeyle gezinmenin çalıştığını ve sayfaların hız ölçütlerini yayından önce kontrol ederiz.

5. Yayından sonra gözlem

Gerçek ziyaretçiler siteyi kullanmaya başladığında, nerede takıldıklarını veriler gösterir. Yarıda bırakılan bir form ya da hiç tıklanmayan bir düğme, küçük düzeltmelerle iyileştirilebilir. Hedefleri baştan birlikte belirler, sonuçları düzenli olarak raporlarız.

Kapsamı belirleyen etkenler

Kullanıcı dostu web siteleri için süreyi ve bütçeyi ihtiyaçlarınızı dinlemeden söylemek doğru olmaz. Teklif hazırlarken şu başlıkları sizinle tek tek netleştiririz:

• Sayfa sayısı ve içerik türlerinin çeşitliliği
• Metin, fotoğraf ve videoların hazır olup olmadığı
• Çok dilli yapı ihtiyacı
• Randevu sistemi, teklif formu ya da müşteri yönetim yazılımı gibi bağlantılar
• Mevcut sitenin taşınması ve eski adreslerin yönlendirilmesi

Kullanılabilirlikte sık yapılan hatalar

• Siteyi yalnızca büyük ekranda inceleyip onaylamak
• Ana sayfayı her bölümün kendini tanıttığı uzun bir vitrine dönüştürmek
• İletişim bilgisini yalnızca sayfanın en altına koymak
• Açılır pencerelerle ziyaretçinin içeriği görmesini engellemek
• Hız ve erişilebilirliği yayından sonraya bırakmak

Başlamadan önce hazırlamanız gerekenler

• Müşterilerinizin size en sık sorduğu sorular
• Ziyaretçinin sitede yapmasını istediğiniz en önemli üç eylem
• Logonuz, kurumsal renkleriniz ve varsa marka kılavuzunuz
• Kullanırken rahat ettiğiniz ve zorlandığınız örnek siteler
• Varsa mevcut sitenizin analiz verilerine erişim

Sık sorulan sorular

Kullanıcı dostu web siteleri ile modern görünen siteler arasındaki fark nedir?

Modern görünüm ilk izlenimi etkiler. Kullanıcı dostu web siteleri ise ziyaretçinin aradığı bilgiye ve iletişim yoluna zahmetsizce ulaşmasını sağlar; iyi bir site ikisini birlikte sunar.

Mobil uyumlu web tasarım için ayrı bir mobil site gerekir mi?

Hayır. Duyarlı (responsive) yaklaşımla kurulan mobil uyumlu web tasarımda aynı site, ekran boyutuna göre düzenini değiştirir. İçerik ve adres tek kalır, güncellemeler de tek yerden yapılır.

Mevcut sitemi yenilemeden kullanıcı deneyimini iyileştirebilir miyim?

Altyapı sağlamsa çoğu zaman evet. Menüyü sadeleştirmek, formları kısaltmak, görselleri küçültmek ve iletişim düğmelerini görünür kılmak, yenilemeye gerek kalmadan fark yaratabilir.

Site hızı Google sıralamasını etkiler mi?

Google, Core Web Vitals ölçütlerinin sıralama sistemlerinde kullanıldığını belirtir; ancak iyi bir puan tek başına üst sıra garantisi değildir. Hız her şeyden önce ziyaretçinin siteyi terk etmeden kullanabilmesi için önemlidir.

Erişilebilirlik küçük işletmeler için de gerekli mi?

Erişilebilir bir site, daha fazla kişinin sizinle iletişime geçebilmesi demektir. Klavyeyle gezinme, alternatif metin ve okunur kontrast gibi temel adımlar, tasarımın başında planlandığında sonradan düzeltmekten çok daha kolaydır.

Bir sitenin kullanıcı dostu olup olmadığı nasıl anlaşılır?

Formların tamamlanma oranı, telefondan gelen ziyaretçilerin davranışı ve hız ölçütleri iyi birer göstergedir. Birkaç müşterinizden siteyi kullanırken ne düşündüklerini sesli anlatmalarını istemek de hızlı ve öğretici bir testtir.

Sitenizi birlikte gözden geçirelim

Mevcut sitenizi ya da yeni sitenizden beklentilerinizi paylaşın; ziyaretçilerinizin nerede zorlandığını ve hangi adımlarla daha rahat bir deneyim kurulabileceğini birlikte değerlendirelim. Görüşme talebiniz için iletişim sayfamızdan bize yazabilirsiniz.