Daha İyi Taranabilirlik için Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları

Ürün tasarımcıları genellikle kısa sürede çok fazla bilgi iletir. "Taranabilirlik" terimini, yaygın göz izleme kalıplarını ve modern tasarım ilkelerini anlayanlar, kolayca tüketilebilir içerik ve "yapışkan kullanıcı arayüzleri" oluşturmak için daha donanımlıdır.

İnternet her gün yeni uygulamalar, web siteleri, makaleler ve daha fazlasıyla genişliyor. Alakalı bilgileri alakasız içerikten filtrelemeyi zor bulan aşırı bilgi yüklü kullanıcıların dikkatini çekmek giderek zorlaşıyor. Pazarlama uzmanı David Zheng , vakaların %60'ından fazlasının ziyaretçilerin 15 saniyeden daha kısa sürede vazgeçip bir web sitesinden ayrıldığını tespit etti .

Araştırma, kullanıcıların gördükleri her şeyi kelimesi kelimesine okumadıklarını gösteriyor; tarar ve ardından materyalin zaman ayırmaya değer olup olmadığını belirler. Bir ürün tasarımcısı, uygun içeriği anında taranabilir hale getirerek, kısa süreli bir ziyaretçiyi uzun süreli bir kullanıcıya dönüştürebilir. Aşağıda, kullanılabilirlik tasarımının sıklıkla gözden kaçan önemli faktörünü güçlendirmeye yardımcı olacak bir dizi UI tasarımı en iyi uygulamaları yer almaktadır: taranabilirlik .

Taranabilirlik Nedir?

Nielsen Norman Group'taki UX uzmanları şu soruyu yanıtlamak için araştırma yaptı: İnsanlar web'de nasıl okuyor? Bulguları basitti. yapmazlar.

Grup, bir web sitesini ilk kez ziyaret edenlerin yalnızca %16'sının muhtemelen kelime kelime okuduğunu buldu. Diğer %84'ü ise materyalin daha derinlerine inmeye karar vermeden önce başlıklar, cümleler, resimler veya animasyonlar gibi kanca öğelerini hızlıca tarayacaktır. Bu davranış, dijital arabirimlerle sınırlı değildir. Örneğin, insanlar bir gazetedeki her kelimeyi nadiren okurlar. Bunun yerine, zamanlarına neyin layık olduğunu belirlemek için aynı öğeleri (başlıklar, resimler vb.) tararlar.

Bu nedenle, taranabilirlik, içeriğin taranması kolay olacak şekilde düzenlenmesi yaklaşımıdır. Ekrandaki değerli içerikle bir ziyaretçiyi etkilemek için genellikle yalnızca kısa bir süre vardır, bu da kullanıcıların web'de nasıl okuduklarına yönelik bir arayüzün tamamen optimize edilmesini kritik hale getirir. Dijital ürün bir web sitesi, uygulama veya başka bir kullanıcı arayüzü türü olsun, taranabilirlik, kullanıcı dostu tasarımın en önemli faktörlerinden biridir.

Taranabilir Arayüzün Faydaları

Dijital bir ürünün taranabilirliğini belirlemenin ideal yolu, onu kullanıcının bakış açısından gözlemlemek ve şu temel soruları yanıtlamaktır:

1. Sayfanın içeriği izleyici beklentilerine uygun mu?
2. Sayfanın ana mesajı kısa sürede anlaşılması kolay mı?

Taranabilir arayüzlerin üretilmesi çaba gerektirse de, uzun vadede yapışkan bir UI tasarımı oluşturarak karşılığını verir. Nielsen Norman Group'un araştırması, taranabilirlik için optimize edilmiş sayfaların aşağıdaki şekillerde çok daha etkili hale geldiğini gösteriyor:

• Kullanıcılar daha hızlı görev tamamlama sürelerine sahiptir
• Kullanıcılar, içeriğin kendileri için doğru olup olmadığını kolayca tanımlayabilir
• Kullanıcılar hatırlamada daha az hata yapar
• Kullanıcılar bir sayfanın yapısını daha iyi anlar
• Bir site, güvenilirlik ve içerik kalitesi açısından daha olumlu öznel derecelendirmeler alır.
• Hemen çıkma oranları düşürüldü
• Tekrar ziyaret olasılığı artar
• Arama motoru optimizasyonu (SEO) geliştirildi

Tarama Modellerinde Kullanıcı Alışkanlıklarının Gücü

Herkes içeriği farklı şekilde tüketir. Bununla birlikte, araştırma yoluyla, iyi tanımlanmış göz izleme kalıpları ortaya çıktı. Kullanıcıların ilk birkaç saniye içinde arayüzlerle nasıl etkileşime girdiğini bilmek, tasarımcıların içeriğe öncelik vermesine, önemli bilgileri birincil görünür alanlara yerleştirmesine ve güçlü bir görsel hiyerarşi oluşturmasına yardımcı olabilir.

Nielsen Norman Group'a göre, kullanıcıların bir arayüzü taradığı yedi yaygın model vardır:

• Ünlü F Modeli: Keşfedilmesinden on iki yıl sonra, bu model, mobil arayüzleri tararken bile hala en yaygın tarama modelidir. Göz, okuma sırasında olduğu gibi yatay olarak hareket eder ve ardından aşağıdaki içeriğe atlar. Bu, yavaş ve sistematik olarak veya daha hızlı bir ısı haritası ile hızlı bir şekilde yapılabilir.
• Z Modeli: Zig-zag modeli, tek tip bilgi sunumuna ve zayıf bir görsel hiyerarşiye sahip web sayfalarında tipiktir.
• Katmanlı Pasta Kalıbı: Kullanıcılar, aradıkları bilgilerin sayfada nerede (ve eğer) bulunabileceğini hızlı bir şekilde belirlemek için başlıkları ve alt başlıkları tararken bu kalıbı takip ederler.
• Benekli Desen: Yaratıcılar genellikle, belirli bir bilgi parçasını bulmak için büyük metin parçalarını atladıkları ve renk, şekiller ve orantı anormallikleri gibi görsel bileşenleri taradıkları bu tarama modelini takip ederler.
• İşaretleme Modeli: Dönerken dengede kalmak için bir nesneye sabitlenen bir dansçı gibi, kullanıcılar kaydırma yaparken gözü tek bir yere odaklar - mobil UX için çok yaygın bir model.
• Bypassing Modeli: Bir listedeki birden çok metin satırının tümü aynı kelime(ler) ile başladığında, kullanıcılar kasıtlı olarak satırın ilk kelimelerini atlarlar.
• Taahhüt Modeli: Bu nadir bir kalıptır ve yalnızca bir kullanıcı içeriğe oldukça ilgi duyduğunda ve hepsini tüketmeye motive olduğunda ortaya çıkar.

Kullanıcı tarafından benimsenen kalıplar, öncelikle web sayfasını ziyaret etme motivasyonuyla ilgili olacaktır: Ne tür bilgiler arıyorlar? Onu bulmak için ne kadar zaman ayırmaya istekliler? Bu bilgileri daha hızlı sağlayabilecek başka web siteleri var mı?

Kullanıcı Araştırması ve Tarama Modelleri Yoluyla Değer Sunma

“ Kullanıcı merkezli tasarım ” terimini ortaya atan bilişsel bilim araştırmacısı Dr. Donald Norman, “İşleyen, anlaşılır ve kullanılabilir ürünler üretmemiz yeterli değil, aynı zamanda neşe ve heyecan getiren ürünler de üretmemiz gerekiyor. , zevk ve eğlence ve evet, insanların hayatlarına güzellik.”

Kullanıcı araştırması, kullanıcı merkezli tasarım ve UI tasarımı en iyi uygulamalarının temel taşıdır. Daha sonra, bir dijital arayüzün taranabilirliğini geliştirmek için bir tasarımcının son kullanıcıyı anlaması gerekir. UI kalıpları son kullanıcının bakış açısıyla tasarlandığında, doğal ve sezgisel bir deneyim ortaya çıkar.

Etkili çözümler soyutlamalardan oluşmaz. Aşağıda güzel, uygulanabilir ve sürdürülebilir bir dizi dijital ürün bulunmaktadır. Her tasarım ekibi, ana hedef kitleyi tanımladı, göz izleme modellerini kullandı ve yapışkan bir kullanıcı arayüzü oluşturmak için içerik düzenleri tasarladı.

Instacart, UI tasarım kalıpları aracılığıyla kullanıcı merkezli tasarımdan yararlanır. Kitlelerinin önemli bir kısmı yaşlılardan ve görme bozukluğu olan kullanıcılardan oluşuyor, bu nedenle öğeler ana CTA'lara açıkça vurgu yapılarak yüksek kontrastlı bir ızgarada listeleniyor. Tasarım, Spotted Pattern tarama modunun uzun süreli ziyaretçileri barındırmasına olanak tanır.

Yelp, kesinlikle en iyi restoranları, alışverişi, gece hayatını, yemekleri vb. arayan kullanıcılara hizmet eder. İnsanların yorumları kendi kişisel kriterlerine ve kapsamlı araştırmalarına göre değerlendirmesi muhtemeldir ve bu da F Modelini en uygun tarama modeli haline getirir. Bu nedenle Yelp, derecelendirmeler, resimler ve adresler gibi belirli öğelere vurgu yaparak içeriği kolayca taranabilir bir şekilde sunar.

Airbnb, tartışmasız en sevilen uygulamalardan biridir ve büyük ölçüde kullanıcı araştırmalarından kaynaklanmaktadır. Kullanıcılarının genellikle mobil cihazlarda olduğunu bildiklerinden, Markalama Modeline uyum sağlayacak şekilde tasarım yaparlar. Büyük, tam genişlikte daire resimlerini vurgulamak için temiz ve sezgisel arayüz düzenlenmiştir. Kullanıcının zamanını doğru bir şekilde ayırabilmesi ve listenin dikkatlerini çekip çekmediğini görebilmesi için ekran başına kapak resmi sayısını kasıtlı olarak iki ile sınırlı tuttular.

Dijital bir ürünün taranabilirliğini geliştirirken akılda tutulması gereken bir faktör, üzerinde görüntüleneceği cihazın türünü tanımlamaktır. Airbnb'nin mobil platformu önemli miktarda trafik alıyor. Başparmak kullanımının ısı haritasında görüldüğü gibi, Airbnb "Keşfet" ve "Kayıtlı Aramalar" gibi en sık kullanılan UI öğelerini kaydırma ve tarama sırasında kolay erişime stratejik olarak yerleştirdi.

Daha İyi Taranabilirlik için Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları

Uygun Bir Görsel Hiyerarşi Oluşturun

Dijital bir arabirimin görsel hiyerarşisi, kullanıcıların istenen bilgileri hızlı bir şekilde tarayabilmeleri için önem düzeylerini iletmek için UI tasarım öğelerinin düzenlenmesi ve sunulması anlamına gelir. Uygun görsel hiyerarşiye sahip bir düzen tasarlamanın birkaç faktörü vardır:

• Boyut
• Renk
• Zıtlık
• yakınlık
• hizalama
• Olumsuz boşluk
• Tekrarlama

Bir tasarımcı, bir UI yerleşim tasarımı oluştururken bu UI tasarım modellerini dikkate alarak, nihai ürünün harika görünümlü, uyumlu ve sezgisel olarak taranabilir bir düzene sahip olmasını sağlayacaktır.

Google'ın arama sonuçları sayfası, taranabilirliği artırmak için tüm görsel hiyerarşi faktörlerini kullanır. Başlıklar renk, boyut ve ardından kontrast kullanılarak vurgulanır. Her başlığı çevreleyen negatif boşluk, bir kullanıcının tarayacağı ilk şey olmasına katkıda bulunur.

Bir kullanıcı ilgili bir başlık bulduğunda, bağlantının güvenilirliğini kontrol edebilir; bu, renk ve yakınlık nedeniyle kolayca tanınabilen bir unsurdur. Ardından, sonucu daha iyi değerlendirmek için renk, boyut ve yakınlık açısından tutarlı olan içerik kopyasını incelerler. Bu faktörlere ek olarak, tekrarlama ve hizalama, Google arama sonuçlarının genel olarak taranmasını kolaylaştırır.

Negatif Alandan Yararlanın

Parlak Claude Debussy bir keresinde, "Müzik, notalar arasındaki boşluktur" demişti. Aynı duygu, taranabilirlik için de geçerlidir; bir düzeni başarılı kılan öğeler arasındaki negatif boşluktur. UI öğelerinin etrafındaki uygun miktarda negatif (beyaz) boşluk, öğelerin kendilerine odaklanmasını sağlar. İçeriği vurgular ve düzenin dağınık olmamasını sağlamak için gerekli nefes alma alanını sağlar. Nefes alma alanı olmadığında, insan beyninin ilgi alanlarını tarama olasılığı daha düşüktür ve kafa karışıklığı daha olasıdır.

İçeriği Özetlemek için Alt Başlıkları Kullanın

İnsanlar genellikle büyük metin parçalarına olumsuz yanıt verir. Paragrafın ilgi alanlarına uymaması durumunda zaman kaybedecekleri varsayımını tetikleyebilir. UI tasarımı en iyi uygulamaları bu soruna bir çözüm sunar. Kullanıcı, uzun makalelerin başına kısa alt başlıklar ekleyerek, konuyla ilgili nihai fikir sahibi olur.

Alt başlığı yazarken, konunun üzerinde durmak çok önemlidir. Aşağıdaki içeriğin sunduğu temel mesajı iletmeniz yeterlidir.

Madde İşaretli ve Numaralı Listeler Oluşturun

İnsan beyni çok sistematiktir; içeriği gözlemler ve ardından onu anlamlı birimler halinde gruplandırır. Bu nedenle, bir kullanıcının madde işaretli veya numaralı bir listeyi anlaması, metinsel bir paragrafta birleştirilmiş birkaç nokta yerine daha olasıdır.

Listelerin oluşturduğu negatif boşluk, kullanıcının taramasını kolaylaştırır, bu nedenle fırsatlara dikkatlice bakmakta fayda vardır. Bir metinde birbirine paralel ikiden fazla nokta varsa ve her birinin betimlenmesi için ikiden fazla cümle gerekmiyorsa, bu liste için güçlü bir adaydır. Nielsen Norman Group, madde işaretli dijital içerik oluşturma konusunda daha da fazla bilgi sağlar.

İçeriği Görselleştirin

Modern dijital kullanıcılar doğal olarak görseldir ve metin içeriğine her zaman iyi yanıt vermeleri olası değildir (mükemmel şekilde yapılandırılmış olsa ve ideal taranabilirlik için tüm UI tasarım ipuçlarını takip etse bile). Dış ortamlar her zaman bir faktör olacaktır. Bu nedenle, metin ağırlıklı yerleşimleri dengelemek için resim ve grafiklerin kullanımı hem bilgilendirici hem de duygusal açıdan çekici görsel aralar sunar. Söylediği gibi, bir resim bin kelimeye bedeldir!

Orijinal görseller (illüstrasyonlar, ilgi çekici fotoğraflar vb.) kullanıcının dikkatini kolayca çekebilir ve genel stil konseptini destekleyebilir. Dahası, görsel hiyerarşiyi iyileştirebilir ve metnin daha kolay sindirilmesini sağlayabilirler. Ancak, bir grafiğin doğru kullanılmadığı takdirde karşı etkiye neden olma tehlikesi vardır. Ana fikirleri grafiğe dönüştürmeden önce, tasarımcıların tasarladıkları içeriği tamamen anlamaları çok önemlidir.

CTA'lara Uygun Vurgu Yapın

Dijital deneyimlerin çoğu, kullanıcıdan belirli bir eylemi ortaya çıkarmayı amaçlar. Harekete geçirici mesaj (CTA) düğmeleri genellikle çok basit görünse de, kullanıcının satın alma, sepete ekleme veya başka bir sayfaya gitme gibi bir işlemi tamamlamasına yardımcı olmak için stratejik olarak tasarlanmıştır.

UI tasarımı en iyi uygulamaları, CTA'yı eylemi açıklayan içeriğe yakın konumlandırmayı önererek kullanıcı için sezgisel hale getirir. CTA'nın iyi orantılı, renkli ve konumlandırılmış olup olmadığını test etmenin etkili bir yolu, nihai tasarımı geçici olarak gri tonlamaya dönüştürmektir. CTA belirgin bir şekilde görünür ve vurgulu kalırsa, yapışkan kullanıcı arayüzü iyi yapılır.

Taranabilirliğin Önemi

Bir UI düzeni tasarımının insanlar tarafından iyi karşılanıp karşılanmayacağını belirleyen içerik alaka düzeyi, rakip çözümler ve iş mantığı gibi birçok unsur vardır. Forbes'a göre taranabilirlik, içerik pazarlamasının en çok gözden kaçan faktörü olabilir. Taranabilir içerik oluşturarak, kısa süreli bir ziyaretçi, uzun süreli bir kullanıcı haline gelebilir.

Taranabilir içerik, son kullanıcıya zamanlarının değerli olduğunu gösterir ve yalnızca bir yerleşim tasarımına göz atarak temel mesajı anlama fırsatı sunar. Viral blog yazarı ve gazetecilik profesörü Kim Keller, tasarımcılara “müşteri olarak istediğiniz biriyle konuşmaya başlıyorsunuz. Bu bir ilişki ve birlikte vakit geçirmediğiniz sürece hiçbir ilişki ayakta kalamaz. Zamanlarına saygı gösterin ve değerli hale getirin.”

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar
• Boş Durumlar – UX'in En Çok Gözden Geçirilen Yönü
• Basitlik Anahtardır – Minimal Web Tasarımını Keşfetmek
• Mobil Arayüzler için Sezgisel İlkeler
• Okunabilirlik için Tasarım – Web Tipografisi Kılavuzu