1007 MEDYA • UI/UX REHBERİ

Kolay Kullanılabilir Arayüz

Kullanıcı bir web sitesine girdiğinde arayüzü öğrenmek zorunda kalmamalı. Menü nerede, hangi buton ne yapıyor, forma nasıl ulaşılır ve bir önceki adıma nasıl dönülür gibi soruların cevabı tasarımın içinde doğal olarak anlaşılmalıdır.

KULLANICI AKIŞI

Bul

Kullanıcı aradığı alanı hızlıca görür.

Anla

Ne sunulduğunu ve seçenekleri kolayca yorumlar.

Harekete Geç

İletişim, teklif veya satın alma adımını tamamlar.

KULLANILABİLİRLİK NEDİR?

İyi arayüz, kullanıcıya sürekli düşünme yükü bindirmez.

Kolay kullanılabilir arayüz, ziyaretçinin web sitesini ilk kez görse bile temel görevleri fazla düşünmeden tamamlayabilmesini hedefler. Kullanıcı bir hizmeti bulmak, fiyat görmek, ürün filtrelemek, teklif istemek veya iletişim bilgisine ulaşmak için sayfanın çalışma mantığını çözmeye uğraşmamalıdır.

Kullanılabilirlik yalnızca menünün sade olmasıyla sınırlı değildir. Buton isimleri, form etiketleri, hata mesajları, arama kutusu, mobil düzen, içerik sırası ve geri bildirimler aynı kullanıcı yolculuğunun parçalarıdır.

Arayüz tasarımında önemli olan “tasarımcı ne göstermek istiyor?” sorusundan önce “kullanıcı burada ne yapmaya çalışıyor?” sorusunu cevaplamaktır.

5 SANİYELİK TEST

Bu sorulara ilk bakışta cevap verilemiyorsa arayüzde sadeleştirme gerekebilir.

ARAYÜZÜN 4 TEMEL GÖREVİ

Kullanıcıya yol gösteren bir sistem kurun.

Yön Bulma

Menü, breadcrumb ve sayfa başlıkları kullanıcının nerede olduğunu ve nereye gidebileceğini açıkça göstermelidir.

Anlama

Metinler, ikonlar ve görsel hiyerarşi sayfanın ne anlattığını hızlıca kavratmalıdır.

Etkileşim

Buton ve form alanları ne yapılacağını açıkça ifade etmeli, tıklanabilir öğeler görsel olarak ayırt edilmelidir.

Geri Bildirim

Form gönderildi, ürün sepete eklendi veya işlem başarısız oldu gibi durumlar kullanıcıya anında bildirilmelidir.

KULLANICI YOLCULUĞU

Arayüzü sayfa sayfa değil, görev adımlarıyla düşünün.

Kullanıcının sitenize gelişinden hedef aksiyona kadar geçen süreci kesintisiz bir yolculuk gibi tasarlayın.

Giriş

Arama sonucu, reklam, sosyal medya veya doğrudan ziyaret.

Keşif

Hizmet, ürün veya bilgi alanlarının taranması.

Değerlendirme

Fayda, fiyat, referans ve detayların karşılaştırılması.

Aksiyon

Teklif, arama, form, sepet veya randevu.

Onay

İşlemin başarıyla tamamlandığının net biçimde bildirilmesi.

MENÜ VE NAVİGASYON

Menü, şirket organizasyonunu değil kullanıcı ihtiyacını yansıtmalı.

Kurumsal yapılarda menü hazırlanırken şirket içindeki departman isimlerini aynen kullanmak her zaman kullanıcı için anlamlı olmayabilir. Ziyaretçi kendi ihtiyacına karşılık gelen ifadeyi arar. Bu nedenle menü başlıkları kısa, tanıdık ve amaca uygun seçilmelidir.

Çok geniş sitelerde mega menü, kategori yapısı veya site içi arama kullanılabilir. Küçük bir kurumsal sitede ise onlarca ana menü öğesi kullanıcıyı gereksiz karar vermeye zorlar.

Mobil menü ayrıca test edilmelidir. Alt menülerin açılması, kapatma düğmesi, telefon ve CTA alanları küçük ekranda rahat kullanılmalıdır.

MENÜ KONTROLÜ

BUTON VE CTA TASARIMI

“Tıklayın” yerine ne olacağını söyleyin.

Buton metni kullanıcıya işlem sonucunu anlatmalıdır. “Gönder” veya “Tıkla” gibi belirsiz ifadeler yerine “Teklif İste”, “Randevu Oluştur” veya “Sepete Ekle” gibi eylemi açıklayan ifadeler daha anlaşılırdır.

Zayıf

Ne olacağını açıklamıyor.

Daha açık

İşlemin sonucunu açıkça anlatıyor.

FORM KULLANILABİLİRLİĞİ

Kullanıcıyı formda gereksiz bilgi vermeye zorlamayın.

İletişim veya teklif formları dönüşümün en kritik noktalarından biridir. Kullanıcının ilk temas için ihtiyaç olmayan onlarca alanı doldurması istenirse form terk edilebilir. Alan sayısı ihtiyaca göre azaltılmalı ve her alanın neden gerektiği düşünülmelidir.

Etiketler input kutusunun içinde kaybolmamalı; hata mesajı “Bir hata oluştu” demek yerine hangi alanın nasıl düzeltilmesi gerektiğini anlatmalıdır. Gönderim sonrası da işlemin başarıyla tamamlandığı açık biçimde gösterilmelidir.

İyi form deneyimi

MOBİL KULLANILABİLİRLİK

Parmakla kullanılan arayüz, fareyle kullanılan arayüzden farklıdır.

Dokunma Alanı

Buton ve ikonlar birbirine çok yakın yerleştirilmemeli. Kullanıcı yanlış öğeye basmadan rahatça işlem yapabilmelidir.

Başparmak Erişimi

Sık kullanılan aksiyonların mobil ekranda ulaşılması zor köşelerde veya içerik arkasında kalmaması gerekir.

Kaydırma Akışı

İçerik sırası mobilde yeniden değerlendirilmelidir. Önemli CTA ve bilgi masaüstündeki kolon sırasına körü körüne bağlı kalmamalıdır.

ERİŞİLEBİLİRLİK + GERİ BİLDİRİM

Arayüz sadece ideal koşullardaki kullanıcı için tasarlanmamalı.

Düşük kontrastlı metinler, sadece renkle verilen hata işaretleri veya açıklamasız ikonlar bazı kullanıcılar için ciddi kullanım sorunları yaratabilir. Arayüzde kontrast, klavye erişimi, anlamlı etiketler ve görünür odak durumları düşünülmelidir.

KULLANILABİLİRLİK TESTİ

Arayüzü tahminle değil, görevlerle test edin.

“Site güzel olmuş mu?” sorusu yerine kullanıcılara gerçek görevler verin ve nerede zorlandıklarını gözlemleyin.

Görev Verin

“İletişim formunu bul”, “X hizmetinin detayına git” veya “ürünü sepete ekle” gibi gerçek hedefler belirleyin.

Müdahale Etmeyin

Kullanıcı takıldığında hemen yol göstermeyin. Sorunun hangi noktada oluştuğunu not edin.

Süreyi Ölçün

Görevin ne kadar sürdüğünü ve kaç gereksiz adım bulunduğunu karşılaştırın.

Düzeltip Tekrar Test Edin

Tek bir test sonucuyla bitirmeyin. Değişiklik sonrası aynı görevi yeniden kontrol edin.

İLGİLİ İÇERİKLER

Arayüzü tasarım ve teknik kaliteyle birlikte düşünün.

Görsel Olarak Etkileyici Tasarım

Renk, tipografi, hiyerarşi ve görsel sistemin tasarım kalitesindeki rolünü inceleyin.

Kurumsal Web Sitesi Özellikleri

Kurumsal bir web sitesinde bulunması gereken temel teknik ve içerik unsurlarını inceleyin.

Mobil Uyumlu Web Tasarım

Mobil cihazlarda kullanım, düzen ve performans yaklaşımını inceleyin.

UI/UX ODAKLI WEB TASARIM

Ziyaretçinin kaybolmadığı, ne yapacağını bildiği bir web sitesi tasarlayalım.

Mevcut sitenizde menü, mobil kullanım, form veya dönüşüm akışı sorunları varsa arayüzü kullanıcı gözüyle yeniden değerlendirebiliriz.