UX tasarımcı nasıl olunur?

Kısaca

UX tasarımcısı, bir ürünü kullanan kişinin işini zahmetsizce bitirmesinden sorumludur. Önce kimin neyi neden yapmak istediğini öğrenir. Sonra bu işi en az adımla bitiren ekranları ve akışları tasarlar.

Don Norman ve Jakob Nielsen kullanıcı deneyimini, kullanıcının bir şirketle, onun hizmetleri ve ürünleriyle olan etkileşiminin her yönü diye tanımlar. Onlara göre iyi bir deneyimin ilk şartı, müşterinin ihtiyacını uğraştırmadan karşılamaktır. UX tasarımcısı her gün bu şartı yerine getirmeye çalışır.

İlanlarda bu rol "UX designer" ya da "UI/UX tasarımcı" diye geçer, bazı şirketler ürün tasarımcısı der. Arayüz (UI) işin görünen yüzüdür. UX ise o yüzün arkasındaki kararları da kapsar: hangi adım gerekli, hangisi akıştan çıkarılmalı?

UX tasarımcısı ne yapar

Bir UX tasarımcısının günü çoğu zaman ekrandan çok konuşmayla geçer. Ürün yöneticisiyle hedefi, geliştiriciyle teknik sınırları konuşur. Bir de kullanıcılarla görüşür, ürünü kullanırken onları izler.

Bir haftada yaptığı işler aşağı yukarı şöyle:

İş	Ne üretir
Kullanıcı görüşmesi	Notlar ve tekrar eden sorunların listesi.
Akış çizimi	Adım adım akış ve kaba ekran taslakları.
Prototip	Tıklanabilir, test edilebilir bir taslak.
Kullanılabilirlik testi	Kullanıcının takıldığı yerlerin listesi.
Ekip toplantısı	Öncelik kararı ve onaylanan tasarım.
Geliştiriciye teslim	Ölçüleri, durumları ve hata halleri yazılmış ekranlar.

Bir örnek

Bir belediye uygulamasında kullanıcıların su faturasını ödemeden çıktığını düşünün. UX tasarımcısı önce analitikte hangi adımda çıktıklarını bulur. Diyelim ki abone numarası alanında.

Sonra birkaç kullanıcıyla konuşur ve numarayı faturada nerede bulacaklarını bilmediklerini öğrenir. Alanın altına "Faturanızın sol üst köşesinde yazar" ipucunu koyan bir prototip hazırlar. Bunu yeniden test eder, işe yararsa geliştiriciye teslim eder.

Bu döngü, NN/g'nin tasarım odaklı düşünme (design thinking) çerçevesine benzer. Sarah Gibbons çerçeveyi altı adımda anlatır: empati, tanımlama, fikir üretme, prototip, test ve uygulama. Gibbons son adımı, yani çözümün hayata geçirilmesini, en önemli kısım sayar.

Ekibin büyüklüğü işi değiştirir

Benim gördüğüm kadarıyla büyük ekiplerde araştırma, arayüz ve yazı ayrı kişilerdedir. Küçük bir girişimde ise hepsini tek kişi yapar. İlanlarda "UI/UX tasarımcı" diye geçen rol çoğu zaman budur.

İki durumda da işin merkezi aynı kalır. Tasarımcı, kullanıcının sorununu ekibe görünür kılar ve çözümü kanıtla savunur.

Gereken beceriler

UI UX designer olmak için gerekenleri beş başlıkta topluyorum. Hepsini aynı düzeyde bilmeniz gerekmez. Ama hiçbirine tamamen yabancı kalmayın.

1. Araştırma

Araştırma, kullanıcının ne yaptığını ve neden yaptığını öğrenmektir. Susan Farrell'in NN/g'deki listesi, araştırma yöntemlerini aşamalara göre ayırır. Listede saha çalışması, kart sıralama, görüşme, anket ve analitik gibi yöntemler var.

Başlangıçta hepsini bilmeniz gerekmez. Mevcut bir sistemi iyileştirmek için tek bir yöntem seçecekseniz, Farrell sesli düşünmeli kullanılabilirlik testini öneriyor. Yeni başlayanlara ben de önce bunu öğrenin derim.

Jakob Nielsen'e göre beş katılımcıyla yapılan ilk çalışma, kullanılabilirlik sorunlarının yüzde 85'ini bulur. Nielsen bütçeyi tek büyük çalışmaya harcamak yerine birçok küçük teste yaymayı önerir. Bence ilk testiniz için büyük bir bütçe beklemenize gerek yok.

2. Etkileşim tasarımı

Etkileşim tasarımı, kullanıcının bir işi hangi adımlarla bitireceğine karar vermektir. Hangi ekran önce gelir, hata olunca kullanıcı ne görür? Bunu önce kaba bir wireframe ile, sonra tıklanabilir bir prototip ile çalışırsınız.

Bu becerinin temeli Nielsen'in 10 kullanılabilirlik ilkesidir. Bir de menülerin ve içeriğin nasıl gruplandığını anlatan bilgi mimarisi var. Kullanıcının bir ekrandan beklediği davranışı ise zihinsel model açıklar.

3. Görsel tasarım

Görsel tasarım, ekrandaki öğelerin okunma sırasını kurar. Neyin önce görüleceğini boyut, boşluk ve renk belirler. Bu işin büyük kısmını bir ızgara ve tutarlı bir yazı ölçeği karşılar.

Renk kararları erişilebilirliğe de dokunur. W3C'nin WCAG belgeleri, web içeriğinin engelli kişiler için nasıl daha erişilebilir olacağını anlatır. Standardın 2.2 sürümü 5 Ekim 2023'te yayımlandı.

Örneğin 1.4.3 Kontrast (Minimum) ölçütü AA seviyesindedir ve metin için en az 4,5:1 kontrast oranı ister. Renk çiftlerinizi kontrast hesaplayıcı ile deneyebilirsiniz.

Araç olarak Figma ile başlamanızı öneririm. Google'ın UX sertifika programı da Figma'yı öğretiyor.

4. Arayüz yazısı

Buton etiketleri, hata mesajları ve boş ekran metinleri tasarımın parçasıdır. "İşlem başarısız" yazan bir hata, kullanıcıya ne yapacağını söylemez. "Abone numarası 8 haneli olmalı" ise söyler.

Jared Spool'un 2009'da anlattığı vakada büyük bir e-ticaret sitesi, sepet ile ödeme arasındaki "Kayıt ol" butonunu kaldırdı. Yerine "Devam" butonu ve hesap açmadan alışveriş yapılabileceğini söyleyen bir mesaj koydu. Spool'a göre satın alan müşteri sayısı yüzde 45 arttı.

Vakanın ayrıntısını 300 milyon dolarlık buton sayfasında anlattım. Benim için dersi şu: bir butonun yazısı ve akıştaki yeri, ekranın rengiyle aynı önemde bir tasarım kararıdır.

5. Temel kod

UX tasarımcısının yazılımcı olması gerekmez. Ama HTML ve CSS'in temelini bilen tasarımcı, çizdiği şeyin tarayıcıda nasıl davranacağını önceden görür. Uzun bir isim ya da küçük bir ekran artık sürpriz olmaz.

Bu konudaki kendi deneyimimi aşağıda "Benim notum" bölümünde yazdım.

Beceri	Neyle başlarsınız	Nasıl gösterirsiniz
Araştırma	Kısa kullanıcı görüşmesi.	Görüşme notları ve çıkan bulgular.
Etkileşim	Kâğıtta akış çizimi.	Wireframe ve tıklanabilir prototip.
Görsel	Tek bir ekranı ızgarayla yeniden çizmek.	Önce ve sonra ekranları.
Yazı	Bir hata mesajını yeniden yazmak.	Eski ve yeni metin yan yana.
Kod	Bir formu HTML ve CSS ile yapmak.	Çalışan bir sayfa bağlantısı.

Yol haritası: adım adım

UI UX tasarımcısı nasıl olunur diye soranlara önerdiğim sıra aşağıda. Her adım bir öncekinin çıktısını kullanır. Sonunda elinizde gösterebileceğiniz bir iş olur.

1. Temel kavramları öğrenin. Kullanıcı merkezli tasarım, kullanılabilirlik ve 10 ilke ile başlayın. Bunlar ileride her tasarım kararını savunurken kullanacağınız dil olacak.

2. Bir araç seçip ekran çizin. Figma'da kullandığınız bir uygulamanın tek ekranını birebir kopyalayın. Bu adımın tek amacı, aracı elinize alıştırmak.

3. Küçük bir araştırma yapın. İki ya da üç kişiyle bir işi nasıl yaptıklarını konuşun. Örneğin e-Devlet'te bir belgeyi nasıl aldıklarını anlatsınlar.

4. Bir akışı yeniden tasarlayın. Görüşmede çıkan sorunlardan birini seçin ve o akışı adım adım yeniden çizin. Kamuya açık bir arayüz seçin ve eleştirinizi adil tutun.

5. Test edin ve yeniden çizin. Prototipi beş kişiye verin, takıldıkları yerleri düzeltin. İkinci sürüm, portfolyonuzun en değerli parçası olur.

6. Temel HTML ve CSS öğrenin. Tasarladığınız bir formu kodlayın. Etiket, odak ve hata durumlarının tarayıcıda nasıl göründüğünü kendiniz görün.

7. Vaka çalışmasını yazın. Sorunu, sürecinizi ve sonucu tek bir sayfada anlatın. Bu sayfanın nasıl kurulacağını aşağıdaki portfolyo bölümünde anlatıyorum.

8. Gerçek bir işe yaklaşın. Gönüllü bir proje, staj ya da küçük bir işletmenin sitesi olabilir. Gerçek kısıtlarla çalışmak, kendi kurduğunuz projede öğrenemeyeceğiniz şeyleri öğretir.

Sertifika şart mı?

Bir programla ilerlemek isterseniz Google UX Design Professional Certificate bir seçenek. Coursera'daki resmi sayfasına göre program başlangıç seviyesinde ve deneyim ya da diploma istemiyor. Sayfa süreyi haftada 10 saatle yaklaşık 6 ay olarak veriyor.

Ben sertifikayı bir çalışma planı olarak görüyorum. İşe alımda asıl bakılan yer portfolyo. Bunu aşağıda kaynağıyla anlatıyorum.

Ne kadar sürer?

Bu soruya tek bir süre veremem, çünkü başlangıç noktanız ve ayırabildiğiniz zaman belirler. Ben süreyi çıktıyla ölçüyorum. Test edilmiş ve yazıya dökülmüş bir akışınız olduğunda ilk başvurunuzu yapabilirsiniz.

Düzenli çalışmak, uzun ama seyrek oturumlardan daha çok işe yarar. Her hafta küçük bir şey bitirin, örneğin bir görüşme ya da tek bir ekran. Bitmiş küçük işler birikince portfolyo kendiliğinden oluşur.

Kendi listenizi çıkarın

Aşağıdaki listede yol haritasındaki işleri beceri alanlarına göre böldüm. Yaptıklarınızı işaretleyin. Başlangıç noktanıza göre sıradaki adım değişir.

Yol haritası kontrol listesi

Nereden başlıyorsunuz?

Sıfırdan başlıyorum. Tasarım ya da kod geçmişim yok.Grafik tasarımcıyım. Görsel tarafı biliyorum.Yazılımcıyım. Kod yazıyorum, tasarıma geçmek istiyorum.

Bunlardan hangilerini yaptınız?

• AraştırmaBir kullanıcıyla görüşme yaptım ve notlarımı toparladım.
• EtkileşimBir akışı adım adım wireframe olarak çizdim. Sıradaki
• GörselIzgarası ve yazı ölçeği olan düzenli bir ekran tasarladım.
• EtkileşimTıklanabilir bir prototip hazırladım.
• YazıBir hata mesajını ve buton yazılarını yeniden yazdım.
• AraştırmaBeş kişiyle bir kullanılabilirlik testi yaptım.
• KodBasit bir formu HTML ve CSS ile kodladım.
• PortfolyoBir vaka çalışması yazdım.

Sıradaki adım: Bir fatura ödeme akışını kâğıtta adım adım çizin. Her ekranda kullanıcının tek bir işi olsun.

Sıfırdan başlıyorsanız ilk iş bir akış çizmektir.

Başlangıç noktanızı seçin, sonra yaptıklarınızı işaretleyin. Sıradaki adım, seçtiğiniz başlangıca göre değişir ve listede turuncu çerçeveyle görünür. Sıralama benim önerim, resmi bir müfredat sayılmaz.

Grafik tasarımcıya önce araştırmayı öneriyorum, çünkü görsel tarafı zaten güçlüdür. Yazılımcıya da kodu sona bırakmasını söylüyorum. Kod becerisi onda var. Eksik olan, kullanıcıyla konuşmak.

Portfolyo

Portfolyo, işe alan kişinin sizi tanıdığı ilk yerdir. NN/g'den Rachel Krause'un 2019 tarihli portfolyo yazısı, işe alımdan sorumlu 204 UX uzmanına yapılan bir ankete dayanır. Yazıdan benim çıkardığım ana mesaj şu: işe alanlar bitmiş ürüne giden dağınık süreci de görmek istiyor.

Krause, 3 ila 5 ayrıntılı vaka çalışmasını öneriyor ve nicelik yerine niteliği öne koyuyor. Her vaka çalışmasında şunlar olmalı:

• Sorun ya da hipotez.
• Rolünüz ve ekiple nasıl çalıştığınız.
• Çözüme nasıl vardığınız.
• Çözümün sorunu nasıl çözdüğü.
• Karşılaştığınız zorluklar ve vazgeçtiğiniz fikirler.
• Kullanıcıya ve işe etkisi.
• Öğrendikleriniz.

Krause'a göre işe alanlar portfolyoyu nadiren kelime kelime okur. Bu yüzden vaka çalışması göz gezdirerek anlaşılmalı ve kolay takip edilmeli. Hikayeyi kaba çizimler, araştırma notları ve bitmiş ekranlar gibi görsellerle anlatın.

Krause sık görülen bir yanılgıya da dikkat çekiyor: portfolyonun yalnızca bitmiş arayüz ekranlarını göstermesi gerektiği düşüncesi. Ona göre erken çizimler, araştırma belgeleri ve sürdürülmeyen fikirler de portfolyoda yer almalı. Kısıtları açıkça anlatmanızı da öneriyor.

Örnek bir vaka çalışması iskeleti

Yukarıdaki su faturası örneğini bir vaka çalışmasına dönüştürelim. Başlıklar Krause'un listesini izliyor, içerik tamamen örnek.

• Sorun: Belediye uygulamasında fatura ödemeye başlayanların bir kısmı abone numarası adımında çıkıyor.
• Rolüm: Görüşmeleri ben yaptım, akışı ben çizdim. Ekipteki geliştiriciyle alanın doğrulama kurallarını birlikte belirledik.
• Süreç: Dört kullanıcıyla görüştüm. Hepsi numarayı faturada aramak zorunda kaldı, ikisi yanlış numarayı girdi.
• Vazgeçtiğim fikir: Önce numarayı kamerayla okutmayı denedim. Testte kullanıcılar faturayı yanlarında taşımadıkları için bu fikri bıraktım.
• Çözüm: Alanın altına numaranın faturadaki yerini gösteren bir ipucu ve küçük bir fatura görseli ekledim.
• Öğrendiğim: Kullanıcının elinde ne olduğunu sormadan çözüm önermemek.

Bu iskelette en çok işe yarayan satır, vazgeçilen fikirdir. Okuyan kişi orada sizin nasıl düşündüğünüzü görür.

Benim önerim, ilk vaka çalışmanızı yol haritasındaki dördüncü ve beşinci adımdan çıkarmanız. Görüşmeden çıkan sorun ile testten sonraki ikinci sürüm bir aradaysa hikayenin iskeleti hazırdır.

Sık hatalar

Bu yola yeni girenlerin en çok düştüğü hatalar bence şunlar.

Araçla başlamak. Figma'nın her özelliğini öğrenmek sizi tasarımcı yapmaz. Araç, ne çizeceğinizi bildiğinizde işe yarar. Portfolyoda on araç adı saymak da bir şey kanıtlamaz.

Yalnızca güzel ekranlar göstermek. Araştırması ve testi olmayan bir yeniden tasarım, bir görsel çalışmadır. İşe alan kişi kararlarınızın nereden geldiğini göremez.

Kendi zevkini kullanıcı ihtiyacı sanmak. "Bu daha şık oldu" bir gerekçe sayılmaz; her değişikliği bir kullanıcı sorununa ya da bir ilkeye bağlayın.

Test etmeden bitti saymak. Kendi tasarımınızın sorunlarını göremezsiniz, çünkü nasıl çalıştığını zaten biliyorsunuz. Beş kişilik küçük bir test bile bu körlüğü kırar.

Geliştiriciyle konuşmamak. Yapılamayan bir tasarım, ne kadar iyi olursa olsun ekranda yer bulmaz. Hata halleri ve boş durumlar çizilmezse geliştirici onları kendi tahminine göre yapar.

Her şeyi aynı anda öğrenmeye çalışmak. Beş beceriyi birden kovalayan kişi hiçbirinde ilerleyemez. Bir akışı baştan sona bitirmek, yarım kalmış on kurstan daha çok şey öğretir.

Geri bildirimden kaçmak. İlk taslağı kimseye göstermeden bitirmeye çalışan kişi, aynı hatayı haftalarca büyütür. Kaba bir taslağı erken göstermek, bitmiş bir tasarımı baştan yapmaktan ucuzdur.

Erişilebilirliği sona bırakmak. Düşük kontrastlı bir renk paleti sonradan düzeltilirse tüm ekranlar yeniden elden geçer. Kontrastı ve klavye kullanımını ilk taslaktan itibaren düşünün.

Benim notum

Ben tasarımı kodla birlikte yapıyorum ve bunun bana en büyük faydası kararları hızlı denemek oldu. Bir etkileşimin doğru olup olmadığını çizimde tartışmak yerine tarayıcıda deniyorum. Beş dakikalık bir deneme, uzun bir toplantıdan daha net cevap veriyor.

İkinci faydası, tasarımın kenarlarını görmek. Statik bir ekranda her isim kısadır ve her liste doludur. Kod yazınca uzun isimler ve boş listeler hemen ortaya çıkıyor.

Size tam bir yazılımcı olun demiyorum. HTML ve CSS ile basit bir formu kendiniz yapın, yeter. Tasarladığınız şeye bir kez tarayıcıda dokunduğunuzda çizim alışkanlıklarınız değişir.

Kendi ürününüzde tasarım ya da UX kararları konusunda takıldığınız bir yer varsa, UX audit rehberi nereye bakacağınızı adım adım anlatır.