UX projesine başlarken…
Ürün geliştiricilerden bir fikir geldi, bir şekilde bir ihtiyaç ortaya çıktı ve sizden bir proje için ekranlar isteniyor. Strateji, kullanıcı testleri ve araştırma kısmını geçtikten sonraki bölümden bahsediyorum. Ne yapmalısınız, nereden başlamalısınız ve hangi yolu izlemelisiniz?
Bu yazımda kişisel deneyimlerinden yola çıkarak bir kaç proje örneğiyle işinizi kolaylaştıracak ne tür yöntemler kullanabilirsiniz, neler yapabilirsiniz onlardan bahsedeceğim.
Basit Akış Çıkarmak
Elinize gelen işle ilgili çıkarmanız gereken çok ekran olsun olmasın farketmez öncelikle bir akış çizmek işinizi çok kolaylaştırır. Ekranların bağlantılarının olduğu basit bir akış işinizi görecektir.
Görseldeki akışı yabancı bir firmaya loto oyunu oynatacak ekranları çıkartmadan önce çizmiştim. Hem iç ekibe hem de müşteriye nerden nereye gidileceğini anlatabilmek çok daha kolay oluyor bu basit çizimle. Ben ekranları çalışırken de atlamamak için kendime bir nevi yol haritası yapmış oluyorum. “Screen 1” dediğim ekran, anasayfayı temsil ediyor. Kullanıcı anasayfada menüye tıkladığında loto anasayfasına ulaşılacak, ordan da 2 farklı oyundan birini seçip oynayacak ve işlemi tamamlayacak.
Bu basit akışı çizmemiş olsaydım, toplantılarda konuşurken soyut olarak anlatılan ve kafada tam anlamıyla canlanmayan bir proje olarak konuşacaktık. Bazı ekiplerde bu tür akışları ürün yöneticileri de çıkarabiliyor. Gerçekten fonksiyonel bir çözüm.
Ekranları Gruplamak
Akış çıkartmaya paralel olarak, ekranları ve ihtiyacı görmek için kullandığım başka bir yöntem de ekranları çıkarıp, alt özelliklerini de bunlara ekleyip bir şablon oluşturmak. Özellikle wireframe çizerken işimi kolaylaştıran bir yöntem bu.
Bu çalışmada sosyal platform olan Tribün’ün temel sayfaları ve o sayfalarda yer alacak alt fonksiyonları şablon haline getirmiştim. Tribün, bilyoner.com üyelerinin sosyalleşebileceği ve yaptıkları iddaa kuponlarını paylaşabileceği bir platform.
Büyük kutuları sayfalar, kutuların içinde çıkan yatay satırları da o sayfalardaki alt menü veya tab’ler olarak düşünebilirsiniz. Bu şablonu inceledikten sonra benzer özelliklere sahip birden fazla ekran olduğunu çok rahatlıkla gördüm ve bundan bir sonraki aşamada üretmem gereken sayfa tiplerine çok kolayca karar verdim. Ardından aşağıda görebileceğiniz sayfa türlerini çıkardım.
Aşağıdaki görselde de göreceğiniz üzere çalışma yapmam gereken 9 tip ekranım oldu. Eğer bu çalışmayı yapmasaydım sadece 9 tip ekran çıkarmam gerektiğini bilemeyecektim. Toplamda tüm durumların olduğu 50 küsür sayfaya saldırıp işimi bitirmeye çalışacaktım.
Konusu geçen 9 tip ekran;
1- Hoşgeldin sayfası
Bu sayfa kullanıcıyı karşılayacak ve platform hakkında bilgi verecek sayfa. Burada olan gösterim projenin genelinde başka bir yerde kullanılmıyor.
2- Kupon listenen sayfalar
Kupon listelenecek bir çok sayfa var, onlar için tek bir ekran yetecek bu aşamada. O nedenle tüm benzer sayfaları tek bir başlık altında topluyorum.
3- Kullanıcı listelenen sayfalar
Aynı şekilde kullanıcı listelenecek bir çok sayfa var, onlar için tek bir ekran yetecek bu aşamada. O nedenle tüm benzer sayfaları tek bir başlık altında topluyorum.
4- İstatistik gösterimleri
İstatistiklere ait farklı grafiksel gösterim olan bir sayfa ve onun için ayrıca çalışma yapmak gerekiyor. Ek bir başlık olarak ele alıyorum.
5- Tahmin gösterimi
Spor oyunlarına ait tahminlerin gösterimi hem maç bilgisi (oran, tarih, takım) hem de tahmin sahibinin yorumları olacağı için farklı bir gösterim olarak ele alıyorum.
6- Bildirim gösterimi
Sosyal bir platform olduğu için bildirim takibi farklı bir arayüz olacak ve farklı ele alınıyor.
7- Ayarlar
Bu aslında genel bir form yapısı için ayrılıyor. Eğer platformda başka bir form sayfası olsaydı ayarları ve diğer o sayfaları form olarak gruplardım.
8- Yardım
Direk içerik olarak kullanıcıyı besleyecek ekranlar, tamamen farklı olarak ele alıyorum.
9- Arena
Bilyoner altında farklı bir özellik ve buraya yedirilmesi için ayrıca ele alınıyor.
Bu sayfaların tasvir edilebilmesi ve wireframe aşamasından önce akışların çıkarılması için basit görseller çizmeniz yeterli olur. Hayali bir şeyi anlatıp onun üzerinden ilerlemektense çok zamanınızı almayacak basit ekranlar üzerinden ilerlemek hem yazılımcı, hem tasarımcı, hem de ürün yöneticisi için kolaylık sağlayacaktır.
Ekran ve Komponent Haritası Oluşturmak
Çok fazla etkileşim olan bir uygulama veya web sayfası üretiyorsam sayfalar içerisinde olacak komponentleri çıkarıp kendime liste oluşturabiliyorum. Burada komponentten kastım, form elemanları, landing page’ler, arama elementleri, breadcrumb yapıları, menüler, sosyal paylaşım fonksiyonları ve devamında aklınıza gelebilecek her şey.
Böyle bir şeye neden ihtiyaç duyuyorum? Bunun birkaç sebebi var.
- Benim yapacağım çalışmada temel olarak nelere ihtiyaç var, hangileri olmazsa olmazdır, bunları çıkarmış oluyorum.
- Projenin devamında benden sonra çalışacak olan UI tasarımcısı bir UI Kit oluştururken kolaylık sağlıyor.
- Aynı elementin farklı sayfalarda kullanımı görmüş oluyorum ki bu çok kritik, sayfa özelinde değil de proje özelinde daha standart bir tasarım yapmış oluyorum. Bu madde en önemlisi aslında, çünkü siz sadece tek bir sayfaya göre bir komponenti çalıştığınızda ileride o komponent başka yerde ihtiyaç duyulduğunda uydurmaca ve ek düzenlemeler devreye giriyor. Bu da standartlardan uzaklaşıp kolay öğrenmeyi zorlaştırıyor.
Bu işin faydasını şöyle bir metaforla anlatabilirim. Bir tünelin başındasınız, ilerisi karanlık. 2 tane ışık kaynağı var. Ya basitçe ufak bir fener alıp sadece önünüzü aydınlatıyor ve siz sadece bir iki adım sonrasını görerek elinizdeki imkanları harcayabilirsiniz. Sonrasında derme çatma çözümler üretip tünelden geçebilirsiniz. Ya da biraz uğraşıp daha kaliteli bir ışıldak alıp, en ilerisini görerek tüm adımlarınızı planlarsınız. Tüm çözümleriniz daha tünelin başında bellidir.
Bu iş için ana başlıklarıyla çok detaya inmeden ürününüzdeki sayfaları ve komponentleri çıkarmak yeterli olacaktır.
Yukardaki örnekte bilyoner.com için bir site haritası çalışmıştım. Kullanıcının sürekli etkileşimde olduğu bir site olduğu için bir çok form elementi, breadcrumblar, alt menüler mevcut. İşiniz ne kadar kapsamlı olursa bu liste o kadar büyüyecektir. Ama unutmayın ki bu listeyi baştan çizmezseniz yolda derme çatma çözümlerle -tabiri caizse- uyduruk bir iş çıkarmış olursunuz.
Detaylı User Flow Çıkarmak
Kapsamlı projeler için basit akış işinizi görmeye bilir bu durumda tüm akışı içeren kullanıcının karşılaşacağı tüm durumları ve ekranları barındıran daha kapsamlı bir user flow çıkarmanız size wireframe çizerken yardımcı olacaktır. Tıpkı prototip üretirken eksikleri farkettiğim gibi bu detaylı akışı çizerken de ihtiyaçları ve tüm kullanıcı davranışlarını görebiliyorsunuz.
Örneğin yukardaki akışı “Yeni Üyelik” projesi ile ilgili çizmiştim. Ama dikkatli incelerseniz üye olma işlemi bu akışın sadece belirli bir kısmı. Eğer çizmemiş olsaydım, üyeliğin şifre unutma ve tekrar üye olmaya çalışmayla bağlantısını kestiremeyebilirdim. (Gerçi bu tür farkındalıkları kullanıcı testlerinde ve oturum kayıtlarında da görebiliyoruz.) En çok unuttuğum ekranlar boş ekranlar (empty state) ve hata ekranları oluyor genelde. Bu akışı çizdiğimde onları unutmam imkansız :)
Veya başka bir senaryo, sizden bu tarz bir iş istendiğinde sadece üyelik ekranını form olarak tasarlayıp gönderebilirsiniz. Uğraşır çalışırsınız ve ne iyi iş çıkardım diye kendinizle gurur duyarsınız, sonuç çok eksik bir iş.
Sonuç
Bu işi önemseyip en iyi şekilde yapmaya çalışıyorum, bunun için ne kadar sistematik yöntemler olsa da dahil olduğum projelere göre problem çözümleri üreterek yukarda bahsettiğim yöntemleri keşfettim ve uyguladım. Bunlar tek doğrudur diye bir kural yok, siz de kendi projelerinize göre anlattığım yöntemlerden feyz alarak çözümler üretebilirsiniz. Sonuçta yazıda geçen yöntemler veya çözümler kullanıcı deneyimi tasarlamanın sadece ufak bir bölümünü oluşturuyor.
Daha önceki konferans yazımda da bahsetmiştim. UX, otur ekran çiz, olsun bitsin bir iş değil, kafa patlatmak gerekiyor. Kimse kusura bakmasın ama Linkedin’de Graphic Designer pozisyonunun başından Graphic kelimesini atıp UX eklemekle UX Designer olunmuyor. UX ekibi olmayan bir firmada çalışıyorken kimseye çaktırmadan title’ına UX Lead yazmakla da olunmuyor.
“Kimse değil, sadece ben UX Designer’ım” gibi bir iddiam da yok açıkcası, amacım sadece emek verip üretenle, sırf görüntü olarak bu işi kendine alet edenlerin ayrışmasını sağlayabilmek.
Sevgilerle..
