UI / UX Tasarımı

UI UX tasarım nedir?

UI UX tasarım, bir web sitesinin ya da uygulamanın hem nasıl çalışacağını (UX, kullanıcı deneyimi) hem de nasıl görüneceğini ve dokunulduğunda nasıl davranacağını (UI, kullanıcı arayüzü) birlikte tasarlamaktır. Amaç, kullanıcının gelme nedeni olan işi en az zahmetle tamamlamasıdır.

Kullanıcı deneyimi tasarımı ekranda başlamaz. Önce kullanıcının kim olduğu, hangi bağlamda geldiği ve neyi başarmak istediği anlaşılır. Arayüz ise bu kararları görünür kılar: hangi bilginin öne çıkacağı, butonun nerede duracağı, bir hata olduğunda ne söyleneceği.

İkisini ayrı ekiplerde, ayrı zamanlarda yürütmek sık görülen bir hatadır. Akışı bilmeden çizilen ekran güzel ama işlevsiz olur; görsel dili düşünmeden kurulan akış da markadan kopuk bir deneyim üretir.

UI ve UX farkı: bir form üzerinden örnek

Farkı en iyi tek bir ekran üzerinden görmek mümkün. Bir klinik için online randevu formu tasarladığımızı düşünelim. UX tarafında sorulan sorular şunlardır: randevu kaç adımda alınmalı, hangi bilgi gerçekten zorunlu, kullanıcı önce doktoru mu yoksa tarihi mi seçmeli, uygun saat yoksa ne olacak?

UI tarafında ise sorular değişir: tarih seçici nasıl görünecek, dolu saatler nasıl ayırt edilecek, buton metni “Gönder” mi “Randevuyu onayla” mı olacak, hata mesajı hangi renkte ve alanın neresinde çıkacak? Aynı form, iki ayrı katmanda iki ayrı karar dizisi taşır.

Aynı ayrım kurumsal bir web sitesinde de geçerlidir. Menüde hangi başlıkların olacağı, ürünlerin sektöre mi yoksa kullanım alanına mı göre gruplanacağı UX kararıdır; menünün açılış biçimi, yazı boyutu ve vurgu rengi ise UI kararı.

Sonuç ancak ikisi birlikte doğru olduğunda gelir. Mükemmel çizilmiş bir tarih seçici, kullanıcıyı gereksiz üç adımdan geçirmeyi telafi etmez; kusursuz bir akış da okunması zor bir arayüzde kaybolur.

Kullanıcı deneyimi tasarımı süreci adım adım

Her projede aynı ağırlıkla uygulanmasa da kullanıcı deneyimi tasarımı genellikle aynı mantıkla ilerler: önce anlamak, sonra kaba hâliyle denemek, en son ayrıntıyı işlemek. Erken aşamadaki değişiklik ucuzdur; kod yazıldıktan sonra yapılan değişiklik pahalı.

Araştırma her zaman uzun bir çalışma anlamına gelmez. Mevcut analitik verisi, müşteri hizmetlerine en sık gelen sorular ve satış ekibinin duyduğu itirazlar çoğu zaman sorunun nerede olduğunu gösterir.

Prototip aşaması bu sürecin en verimli kısmıdır. Kullanıcıdan bir görevi tamamlamasını isteyip nerede durakladığını, neyi yanlış anladığını izlemek, toplantı odasında saatlerce tartışmaktan daha net bir cevap verir. Bulunan sorun o anda, henüz birkaç ekranı değiştirmek kadar ucuzken düzeltilir.

Geliştirici ekibi sürece en sonda değil, wireframe aşamasında dahil olduğunda daha az sürprizle karşılaşılır. Teknik olarak pahalı bir etkileşim erken fark edilir ve aynı ihtiyacı karşılayan daha sade bir çözüm, tasarım henüz esnekken bulunur.

• Mevcut verinin okunması: analitik, destek talepleri, kullanıcı geri bildirimi
• Kullanıcı görevlerinin ve önceliklerinin tanımlanması
• Akış şeması: her görev için başlangıçtan sona adımlar
• Wireframe: renksiz, görselsiz ekran iskeletleri
• Tıklanabilir prototip ve kısa kullanıcı testleri
• Arayüz tasarımı ve geliştiriciye teslim

İyi bir arayüzü ne belirler?

İyi arayüzün ölçüsü zevk değil, kullanıcının tereddüt etmeden doğru hamleyi yapabilmesidir. Bunu sağlayan ilkeler sektörden sektöre pek değişmez; değişen, hangisinin o üründe en kritik olduğudur.

Erişilebilirlik bu ilkelerin ayrı bir başlığı değil, temelidir. Yeterli renk kontrastı, klavyeyle gezilebilen menüler ve ekran okuyucuların anlayabileceği etiketler, görme ya da hareket kısıtı olan kullanıcılar kadar güneş altında telefona bakan herkes için de deneyimi iyileştirir. Referans olarak WCAG yönergelerini kullanıyoruz.

Cihaz farkı da ilkelerin uygulanışını değiştirir. Masaüstünde fareyle üzerine gelince beliren ipuçları mobilde yoktur; orada aynı bilgi ya doğrudan görünür olmalı ya da açıkça işaretlenmiş bir dokunuşla açılmalıdır. Bu yüzden önemli ekranları her iki cihazda ayrı ayrı düşünüyoruz.

• Tutarlılık: aynı işi yapan öğe her yerde aynı görünür ve aynı davranır
• Geri bildirim: her tıklamanın ardından sistemin ne yaptığı görünür
• Okunabilirlik: metin boyutu, satır uzunluğu ve kontrast küçük ekranda da yeterli
• Mikro metin: buton ve uyarı metinleri ne olacağını açıkça söyler
• Dokunma alanları: mobilde parmakla rahatça seçilebilecek büyüklükte hedefler

Sitenizde UX sorunu olduğunu nasıl anlarsınız?

UX sorunları genellikle doğrudan şikâyet olarak gelmez; dolaylı işaretlerle kendini gösterir. Kullanıcı vazgeçer, telefonla arar ya da aynı soruyu e-postayla sorar. Bu işaretleri bir arada okumak, yeniden tasarımın nereden başlayacağını belirler.

Bu işaretlerden birini gördüğünüzde ilk iş, sorunu tek bir akışa indirgemektir. “Site eski görünüyor” gibi genel bir şikâyet yerine “teklif formunun ikinci adımında ziyaretçi ayrılıyor” gibi somut bir tespit, hem çözümü hem de çözümün işe yarayıp yaramadığını ölçmeyi mümkün kılar.

• Formun belirli bir adımında ziyaretçilerin toplu hâlde ayrılması
• Sitede cevabı olan soruların müşteri hizmetlerine tekrar tekrar gelmesi
• Mobil ziyaretçilerin masaüstüne göre belirgin biçimde daha az işlem yapması
• Site içi aramada aynı kelimelerin sürekli aranması
• İç ekibin sistemi kullanmak için kendi kestirme yollarını bulması