Çoğu proje “şu buton buraya yakışır” cümlesiyle yön değiştirir. Oysa bir arayüzün doğru olup olmadığını sadece kullanan kişi söyleyebilir. Bu yüzden UI/UX tasarım sürecimizi, sonunda ölçülebilir bir cevap veren adımlar hâlinde kuruyoruz. Aşağıda her adımda ne yaptığımızı ve size ne teslim ettiğimizi bulacaksınız.
UX araştırması: kararların dayanağı
Araştırma aşaması, elimizdeki bilgiyi tahminden veriye çeviren kısımdır. Kapsamlı bir laboratuvar kurmuyoruz; küçük ama düzenli yöntemler kullanıyoruz. Sahayla temas eden ekiplerle (satış, destek, saha servisi) yaptığımız kısa görüşmeler çoğu zaman en değerli bulguları veriyor, çünkü müşterinin tekrar tekrar sorduğu sorular oradan geliyor.
- Paydaş görüşmeleri: işin gerçekte nasıl yürüdüğünü anlamak için.
- Kullanıcı görüşmeleri: müşterinizin kendi kelimeleriyle ne aradığını dinlemek için.
- Mevcut arayüz incelemesi: elde bir site varsa nerede takılındığını çıkarmak için.
- Rakip arayüz taraması: sektörün alıştığı kalıpları bilmek, gereksiz yere yeniden icat etmemek için.
Bu adımın çıktısı bir sunum değil, bir karar listesidir: hangi içerik önce görünecek, hangi adım kaldırılacak, hangi bilgi form yerine sayfada durabilecek.
Akış haritası ve bilgi mimarisi
Araştırma bittiğinde ziyaretçinin izleyeceği yolu çiziyoruz. Bir kullanıcının “teklif isteme” hedefine kaç adımda ulaştığı, hangi adımda geri dönmek zorunda kaldığı ve hangi sayfanın onu çıkmaza soktuğu bu haritada görünür hâle gelir. Menü yapısı da burada oluşur: kaç ana başlık olacağı, hangi sayfanın alt kırılım olarak yaşayacağı ve adres yapısının nasıl kurulacağı akış haritasından çıkar.
Tel kafes (wireframe): renk yokken hiyerarşi görünür
Tel kafes, sayfanın gri tonlu iskeletidir. Renk, fotoğraf ve marka öğesi olmadan çizildiği için tartışma “bu mavi olmuş” yerine “bu bilgi neden burada” sorusuna odaklanır. Deneyimimize göre en verimli geri bildirim turu bu aşamada yaşanır; çünkü değişiklik yapmak henüz ucuzdur.
Tel kafeslerde her ekranı hem geniş hem dar ekran için çiziyoruz. Mobilde sıralamanın nasıl değişeceğini, hangi bölümün katlanacağını ve sabit çağrı butonunun nerede duracağını bu aşamada kararlaştırıyoruz. Böylece görsel tasarıma geçtiğimizde mobil, sonradan sıkıştırılan bir versiyon olmaktan çıkıyor.
Tıklanabilir prototip: yayına almadan denemek
Onaylanan tel kafesler üzerine görsel dili giydirdikten sonra ekranları birbirine bağlayarak tıklanabilir bir prototip kuruyoruz. Prototip gerçek bir site gibi gezilir: menü açılır, form doldurulur, hata durumu görünür, başarı ekranı gelir. Bu sayede paydaşlar siteyi kod yazılmadan önce deneyimler ve “ben bunu böyle hayal etmemiştim” cümlesi teslim gününe kalmaz.
Prototipte üç şeyi özellikle prova ediyoruz: boş durumlar (henüz veri yokken ekran ne diyor), hata durumları (yanlış doldurulan alan nasıl anlatılıyor) ve bekleme durumları (bir işlem sürerken kullanıcı ne görüyor). Bu üçü çoğu projede atlanır ve yayına girdikten sonra en çok şikâyet edilen kısım olur.
Kullanılabilirlik testi: beş kişi yeter
Prototip hazır olduğunda gerçek kullanıcılarla kısa görevler veriyoruz: “Bu firmadan teklif talebi oluşturun”, “En yakın servis noktasını bulun” gibi. Kişiden sesli düşünmesini istiyor, nerede duraksadığını not alıyoruz. Beş kişilik küçük bir grup bile ciddi sorunların büyük kısmını yüzeye çıkarıyor. Test sonunda bulguları önem sırasına koyup tasarımı revize ediyoruz.
Erişilebilirlik kontrolü de bu aşamada yapılıyor. Klavye ile tüm akışın tamamlanabildiğini, odak halkalarının görünür olduğunu, metin-zemin kontrastının yeterli olduğunu ve ekran okuyucunun form alanlarını doğru okuduğunu tek tek doğruluyoruz. Erişilebilir bir arayüz yalnızca engelli kullanıcılar için değil, güneş altında telefonuna bakan herkes için daha iyi çalışıyor.
Arayüz tasarımı (UI) ve tasarım sistemi
Deneyim kararları netleştikten sonra görsel katman geliyor: tipografi ölçeği, renk sistemi, ikon ailesi, kart ve form bileşenleri, hareket dili. Bunları dağınık ekranlar hâlinde değil, tekrar kullanılabilir bir bileşen kütüphanesi olarak kuruyoruz. Yeni bir sayfa gerektiğinde sıfırdan tasarım beklemiyorsunuz; hazır parçaları birleştiriyorsunuz.
Nereye bağlanıyor? Onaylanan arayüz, web tasarım hizmetleri kapsamında aynı stüdyoda kodlanır. Renk ve tipografi kararları markanızın kurumsal kimliğinden beslenir. Süreçle ilgili ayrıntılar için sık sorulan sorulara bakabilir, kapsamı konuşmak için teklif formunu doldurabilirsiniz.
UI/UX tasarım hakkında kısa sorular
Ölçek küçüldükçe süre kısalır ama aşama tamamen kalkmaz. Beş sayfalık bir sitede araştırma birkaç görüşmeye, test ise üç kişilik kısa bir tura iner. Yine de sayfa sırasını ve çağrı yerleşimini tahminle değil gözlemle belirlemiş olursunuz.
Tasarımları paylaşılabilir bir bağlantı üzerinden geziyorsunuz, ayrıca kaynak dosyaları proje sonunda size devrediyoruz. Yarın başka bir ekiple çalışsanız bile tasarım dosyaları elinizde kalır.
Evet. Yeniden tasarım yapmadan yalnızca inceleme ve test turu da yürütüyoruz. Sonunda önceliklendirilmiş bir bulgu listesi ve ekran görüntüleri üzerinde işaretlenmiş öneriler teslim ediyoruz; uygulamayı isterseniz kendi ekibiniz yapabilir.