You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
1
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Index<br />
<strong>UX</strong> Temelleri<br />
Yeni Başlayanlar İçin Layout Tasarımı<br />
Kullanıcı Deneyimi Araştırmaları<br />
<strong>UX</strong> Çıktılarının Görselleştirilmesi ve İpuçları<br />
<strong>2015</strong>'in Bize Armağanı:<br />
‘Optimizasyon Servisi ve <strong>UX</strong> Alive’<br />
Neden Optimizasyon Ekibi Kurduk?<br />
<strong>Userspots</strong> Big 4<br />
A/B Test Örnekleri<br />
B-Clear Framework<br />
Web Sizin İçin Çalışsın<br />
<strong>UX</strong> Alive<br />
<strong>2015</strong> Trendler/Yeniler<br />
<strong>2015</strong> UI Trendleri<br />
Mobil Optimizasyon<br />
<strong>2015</strong> <strong>UX</strong> Trendleri<br />
<strong>2015</strong>’in Öne Çıkan IoT Cihazları<br />
Mobil’de 2. Round<br />
Akıllı E-Ticaret İçin Ödeme Tasarımı<br />
Eğitim/ Kariyer<br />
<strong>UX</strong> Sürecinde Online Eğitimler<br />
<strong>UX</strong> Kariyer Kartları<br />
<strong>Userspots</strong> <strong>UX</strong> Kariyer Sürecindeki Ekmek Kırıntıları<br />
2
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Merhaba,<br />
<strong>Userspots</strong> ailesi olarak, dolu dolu geçen bir yılı uğurlarken yeni yılın hepimiz için mutlu,<br />
sağlıklı ve bol kazançlı bir yıl olmasını diliyor, yeni yılınızı kutluyoruz.<br />
2014 yılında Dieter Rams ile başladığımız “<strong>UX</strong> <strong>Almanak</strong>”’ın ikinci sayısı ile karşınızdayız.<br />
Okumak üzere olduğunuz bu almanak, Rams’ın 10 madde ile anlattığı “İyi Tasarım”a ulaşmaya<br />
çalışarak geçirdiğimiz bir yılın muhasebesini yapmak, kazandıklarımızı/kaybettiklerimizi,<br />
yapabildiklerimizi/yapamadıklarımızı düşünmek için güzel bir fırsat olabilir.<br />
Tasarıma olan bakış açımızı genlerimizde muhafaza ederek, iş yapma şeklimizi daha geniş<br />
bir perspektifte şekillendirdik. Bu da 2016 yılında size daha fazla “Veri” den bahsedeceğimiz<br />
anlamına geliyor. Bu yıl içerisinde yaptığımız “4 Büyük Proje”yi anlatan reklam kokan içerikler<br />
için şimdiden bizi mazur görün, iyi ürün geliştirmenin yöntemlerini keşfedip bunu hayata<br />
geçirmişken sizlerle paylaşmamak olmazdı.<br />
İş yapma şeklimizi değiştirmiş olmamızı, bu yılın bize kattığı en büyük değerlerden bir<br />
tanesi olarak görüyoruz. İlerleyen zamanlarda bu konuya bol miktarda değiniyor olacağız.<br />
Hayatımıza, Optimizasyon’un nasıl girdiğini ve neyi değiştirdiğini anlattığımızda bu<br />
değişikliğin altında yatan nedenleri daha iyi tanımlıyor olacağız.<br />
Değişmeyen tek şey değişimin kendisi!<br />
Bu yılın bizi gururlandıran en önemli olaylarının başında <strong>UX</strong> Alive Konferansı geliyor.<br />
Türkiye’de bu önemli organizasyonu gerçekleştirmiş olmak bize büyük bir mutluluk verirken<br />
daha iyisi için çalışmamıza da motivasyon kaynağı olduğu bir gerçek. Bu nedenle <strong>UX</strong> Alive’16<br />
da sizleri çok güzel sürprizler bekliyor olacak.<br />
Bu sayıda bizim dışımızda yazılarıyla katkıda bulunan iki önemli misafirimiz var. Biri Frontend<br />
camiasının yakından tanıdığı ve <strong>UX</strong> Alive’ın konuşmacılarından Vitaly Friedman diğeri ise<br />
hepimizin tanıdığı hepsiburada.com’un ürün geliştirme müdürü Gökhan Besen… Katkılarından<br />
dolayı her ikisine de teşekkür ediyoruz.<br />
Bu yılın Trendlerini unutmadık, yılın tasarım trendleri, Internet of Things cihazları, pazarlama<br />
araçları gibi yılı ve yaşadıklarımızı derleyip toparlayan içerikler ile gönlünüzü almaya<br />
çalışacağız. A/B test yapma şansımız yoktu, umarım ROI’si yüksek içerik üretmişizdir.<br />
İyi tasarım arayışının bizi götürdüğü yolu, bu süreçte başımıza gelenleri her daim sizinle<br />
paylaşacağız. Mutlulukla dolu bir yıl sizlerle olsun.<br />
Önümüzdeki sayıda görüşmek üzere!<br />
Mustafa Dalcı<br />
<strong>Userspots</strong> Founder<br />
Süleyman Duman<br />
Content Editor and Design<br />
3
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong>’in<br />
Temelleri<br />
4
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Yeni Başlayanlar İçin<br />
Layout Tasarımı<br />
Emrah Sarıbaz<br />
<strong>UX</strong> Strategist<br />
Geçmiş deneyimlerimden yola çıkarak hazırlamış olduğum “Layout Nasıl Oluşturulur”<br />
eğitiminin giriş konusu olan ‘Layout Tasarımında Temel Bilgiler’ bölümünün, tasarıma yeni<br />
başlayanlar için faydalı olabileceğine inanıyorum.<br />
Öncelikle Layout’un anlamına bakmak gerekirse; bir işin ve tasarımın gerçekleştirilmesi için<br />
uyulması gereken düzen olarak tanımlanabilir. Arayüz elementleri belirli bir düzen içerisinde<br />
konumlandırılarak mizanpajı/arayüzü oluşturur.<br />
“Layout Nasıl Oluşturulur?” konusuna başlamadan önce, işin temeline inmek daha doğru<br />
olacaktır. Bu noktada kişisel tercihim, klasik anlayıştan farklı olarak layout oluşturmaya direkt<br />
çizim yaparak başlamıyorum. Bir Layout’u oluşturmada öncelikli hedefim, kendime sorduğum<br />
dört soru ve cevaplarını yazarak ne yapmam gerektiğini tanımlamak oluyor:<br />
- Ekranda kullanıcının hangi fonksiyonları görmesini istiyorum?<br />
- Hangi persona grupları bu ekranı kullanacak?<br />
- Müşteri bu ekranda neyi ön plana çıkartmak istiyor?<br />
- Kullanıcının bu ekrandan beklentisi ne?<br />
Bu soruların cevaplanmasından sonra işin zor kısmı başlamış oluyor. Çünkü, layout<br />
oluşturmanın temelinde çok farklı etmenler yatıyor. Bu etmenleri mümkün olduğunca<br />
açıklamaya çalışacağım.<br />
5
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kullanıcılar Ekranı<br />
Nasıl Tarar?<br />
İkinci kuvvet ise, dil yapımıza göre<br />
farklılık gösterir. Latin alfabesi<br />
kullanıyorsanız okuma yönünüz soldan<br />
sağa doğrudur. Arap alfabesinde ise<br />
okuma yönü sağdan sola doğrudur.<br />
Bu okuma alışkanlıklarımız bizim ikinci<br />
tarama kuvvetimizi gösterir.<br />
Bunlardan birincisi fiziğin de temelini<br />
oluşturan yer çekimi kuralıdır. Bu kural<br />
aynı zamanda kullanıcıların tarama<br />
alışkanlığını da belirleyen fizik kuralıdır.<br />
Biz kullanıcılar yukarıdan aşağıya doğru<br />
tararız ki bu da bize birinci kuvveti<br />
gösterir.<br />
Bu iki kuvvet fizikten de bildiğiniz üzere birleştirildiğinde sol üstten sağ alta doğru<br />
taradığımızı gösteren bir şekil oluşturur. Bu şeklin nasıl anlamlandırıldığını ise şöyle<br />
açıklayabiliriz;<br />
6
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Öncelikle ekran dört eşit parçaya bölünür. Sol üstte kalan alan kullanıcıların taramaya ilk<br />
başladığı, dolayısıyla sizin için de en önemli olan alandır. Sağ üst ve alt alan ise taramanın<br />
bittiği ve kullanıcıların yoğunlaştığı diğer iki önemli alan olarak gösterilebilir. En son kalan alan<br />
yani sol alt alan ise kullanıcıların en son baktıkları ve önemli bilgileri koymak için çok tercih<br />
edilmeyen alandır.<br />
Bu yerleşimi kendiniz test etmek isterseniz, booking.com ana sayfa ve youtube.com video<br />
sayfalarını inceleyebilirsiniz.<br />
Burada dikkat edilmesi gereken şey, sadece bu kurallar ışığında ekranı dörde bölerek<br />
çalışmamanız. Çünkü, bu kurallar dışında hayatınızı etkileyecek çok daha fazla etmen<br />
bulunmaktadır. Bunlardan bir tanesi yine dengeli bir tasarım için tavsiye edilen ve temelleri<br />
çok eskiye dayanan “Altın Oran” kuralıdır.<br />
7
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Hangi araç için tasarlıyoruz?<br />
Temel olarak kullanıcıların nasıl taradığını öğrendiğimizi varsayarsak artık kullanıcının hangi<br />
araçta bu Layoutu tarayacağını tanımlamamız gerekiyor. Etkileşim tasarımcısının temel<br />
görevlerinden biri de bunu doğru teşhis edebilmesidir. Kullanıcılarınız bu Layout’u web<br />
ortamında mı görüntüleyecek yoksa mobil cihazlarda mı kullanacak gibi sorular bu noktada<br />
çok önemli. Eğer web ise işiniz biraz daha zor olacak.<br />
Bilgisayar teknolojileri ve talebin büyümesiyle ekran boyutlarındaki değişkenlikte artmaya<br />
başladı. Bu nedenle siz de bir tasarımcı olarak verileri takip etmeli, kullanıcılarınızın en çok<br />
kullandığı ekran boyutunu ve buna bağlı olarak fold yüksekliğini belirlemelisiniz. Eğer bunu<br />
tanımlamadan tasarıma başlarsanız ilerleyen zamanlarda yazılım ve UI aşamalarında birçok<br />
problemle karşılaşabilirsiniz.<br />
Örnek vermek gerekirse; Ben yerel verilerde en çok kullanılan ekran boyutu (1366px X 768px)<br />
çözünürlüğünü kullanıyorum. Bu da demek oluyor ki (Max. 650px) fold alanım bulunuyor.<br />
8
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Her şeyin başı kutular<br />
Artık temel bazı kuralları öğrendiğimize göre boş kağıda çizim yapmaya başlayabiliriz.<br />
Çizime başlamak demek hemen ekranı çizmeye başlamak anlamına gelmiyor. Çünkü, Layout<br />
tümden gelim kavramı üzerine çalışır. Bu nedenle öncelikle sayfanın tamamını oluşturmanız<br />
gerekmektedir.<br />
Yazının ilk başında tanımladığımız soruların cevapları doğrultusunda, sayfanın genelini<br />
düşünerek işe başlanabilir. Bunu yapmanın en kolay yolu basitten zora doğru gitmektir.<br />
Öncelikle tasarımın her dalının temelini oluşturan kutular ile başlayabilirsiniz. Kutular, sizin<br />
her alan için tanımladığınız temel element olmalıdır. Kutu çizerek başlamayı alışkanlık haline<br />
getirirseniz çok kısa sürede çok fazla opsiyon üretebilirsiniz.<br />
Kutular nasıl anlamlı hale gelir?<br />
Kutu çizmek çok basit bir eylem gibi düşünülse de aslında altında iki farklı temel felsefeyi<br />
barındırmaktadır. Öncelikle Fold’da ne kadar kutu çizilmeli gibi bir soru ile başlayabiliriz. Bu<br />
sorunun cevabı eskilere dayanan pazarlama araştırmaları ile cevaplanabilir.<br />
En ünlü araştırma olan ve literatüre Miller’s kuralı olarak giren (-2) 5 (+2) kuralından<br />
bahsetmek istiyorum. Miller pazarlama araştırmalarında kullanıcılara 7’den fazla veya 3’ten<br />
az seçenek sunulduğunda karar verme mekanizmalarının doğru ve anlamlı çalışmadığını<br />
ortaya koyar. Bu kural online dünya içinde geçerlidir. Kutularınızı çizerken tanımladığınız<br />
alanlarda 7’den fazla seçenek varsa ya amacınız kullanıcının kafasını karıştırmaktır ya da<br />
pinterest gibi sadece tarama üzerinden kullanıcının zaman geçirmesi istiyorsunuzdur.<br />
Kutular nasıl yan yana gelir?<br />
Seçeneklerimizin neler olduğunu çıkarttığımıza göre, kutularımızı yerleştirmeye başlayabiliriz.<br />
Bu aşamada ise tasarımın temelini oluşturan kurallardan biri olan ‘Gestalt Kuralı’ devreye<br />
giriyor. Kişisel olarak Gestalt’ın tüm kurallarını uygulamasamda temel de uyguladığım yakınlık<br />
kuralından bahsedebilirim. Bu kural sayesinde kullanıcıları nasıl yönlendirebileceğinizi de<br />
tanımlayabilirsiniz.<br />
9
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Örnek olarak;<br />
Altı tane eşit boyutta kutunuz var ve tüm kutular birbirine eşit uzaklıkta ise kullanıcı büyük ihtimalle<br />
sol üstteki kutudan taramaya başlayacak ve daha sonra hangi kutuya bakacağı tamamen<br />
onun insiyatifine kalacaktır. Tasarımcı olarak biz bu yönü tanımlayabilir, kullanıcıların<br />
gitmesi gereken yolu bu kural ile belirleyebiliriz. Üç kutuyu yatayda birbirine yaklaştırır ve<br />
diğer üç kutu ile arasındaki mesafeyi açarsanız, yakınlık kuralına uygun olarak kullanıcılarınız<br />
öncelikle yatayda tarama yapacak daha sonra da diğer kutu grubuna yönlenecektir. Sadece<br />
kutular arasındaki mesafeyi değiştirerek kullanıcıları yönlendirebilir, onları seçim yapmak zorunda<br />
bırakmazsınız.<br />
Bu makaleyi yazmamda bana yardımcı olan içeriklere buradan ulaşabilirsiniz.<br />
10
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kullanıcı Deneyimi<br />
Araştırmaları<br />
Sıla Karagöl<br />
<strong>UX</strong> Strategist/ <strong>Userspots</strong><br />
Tasarım kararlarının ne kadar bilinçli verildiğine bağlı olarak, ortaya çıkan ürünün<br />
hikayesi de o kadar güçlü olur. İşte bu noktada tasarım kararlarının bilinçli<br />
verildiğinden emin olmak için tasarım süreci boyunca birçok araştırma tekniğinden<br />
faydalanırız.<br />
Yaygın düşüncenin aksine araştırma, bir projenin başlangıç<br />
adımından ibaret değildir. Araştırma süreci; İlk problemin<br />
tanımlandığı ve ilk açıklamanın yapıldığı an başlar ve tasarım süreci<br />
boyunca devam eder.<br />
11
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Araştırma<br />
Genel olarak bir takım olguların ortaya çıkarılması için ya da bu amaçla yapılan her türlü<br />
sistemli çalışmayı içeren inceleme olarak tanımlanır. Tasarım araştırması, projenin türüne,<br />
büyüklüğüne ve çevre şartlarının gerekliliklerine göre farklı yöntemlerle sürdürülebilir. Bu<br />
süreç içerisinde sezgisel yöntemlere de başvurulabilir. Ancak, kararları bilinçli verebilmek<br />
için araştırmanın planlı bir şekilde yürütülmesi ve sistematik yaratıcı eylemlerin göz ardı<br />
edilmemesi son derece önemlidir.<br />
Araştırma süreci ise, ilk bulguların elde edilmesi ve sorgulanması ile başlar. Sonrasında,<br />
düşüncelerin sentezlenerek ilk tasarım fikirlerinin oluşturulması, ortaya çıkan fikirlerin test<br />
edilmesi ve geliştirilmesine kadar projenin tamamına yayılarak devam eder.<br />
Projenin amacı ve araştırma sorularına göre, süreç içerisinde farklı tekniklerin uygulanması<br />
gerekebilir. Kullanıcının ilk izlenimlerini ölçmek için yürütülen çalışmalarda belli setler<br />
kullanmak gerekirken, davranışlarını ölçmek istediğimizde ise farklı setler kullanmamız<br />
gerekebilir. Bu noktada bir tasarım araştırması yaparken en sık kullanılan tekniklere göz<br />
atabiliriz.<br />
12
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Bire Bir<br />
Görüşmeler<br />
Kullanıcıların belli bir ürün veya servis hakkındaki düşüncelerini, ihtiyaçlarını ve beklentilerini<br />
öğrenmek, özellikle ürünü kullanırken karşılaştıkları problemleri anlamak için gerçekleştirilen<br />
karşılıklı görüşme tekniğidir.<br />
Kullanıcılarla yapılan bu görüşmelerde;<br />
Kullanıcıların ürün ile ilgili geçmiş deneyimleri nedir?<br />
Kullanıcıların belirli bir konu hakkındaki düşünceleri ve söylemleri nelerdir?<br />
gibi sorulara yanıt aranır.<br />
13
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Günlük<br />
Çalışması<br />
Kullanıcıların belli bir ürünü veya servisi kullanırken belli bir süre içerisinde kendi hareketlerini<br />
kayıt altına almaları durumudur. Düzenli aralıklarla bu kayıtlar kullanıcı ile birlikte analiz edilir.<br />
Günlük çalışması sonucunda;<br />
Kullanıcılar rutin hareketlerinde belli davranışları nasıl sergiliyorlar?<br />
Kullanıcıların periyodik hareketleri ürünü nasıl etkiliyor?<br />
Kullanıcılar belli bir ürünü belli bir süre içerisinde nasıl kullanıyorlar?”<br />
sorularına yanıt aranır.<br />
14
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Direkt<br />
Gözlem<br />
Bu araştırma tekniğinde, kullanıcıların fiziksel ve sosyal çevreleri ile olan etkileşimleri<br />
gözlemlenir. Kullanıcıların içerisinde bulunduğu çevrelerin ürüne olan etkisi incelenir.<br />
Direkt gözlem sonucunda;<br />
Kullanıcılar belli bir ürünü kullanırken ne yapıyor<br />
Kullanıcılar rutin hareketlerinde belli davranışları nasıl sergiliyorlar?<br />
sorularına yanıt aranır.<br />
15
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Netnografi<br />
Etnografik araştırma tekniklerinin internet ortamında uygulanması olarak tanımlanabilir.<br />
Bu araştırma tekniğinde,<br />
Kullanıcılar belli bir ürün veya konu hakkında ne söylüyor? Ne düşünüyor?<br />
sorularına yanıt aranır.<br />
16
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Rakip<br />
Analizi<br />
Söz konusu tasarım ürününün alternatiflerinin araştırılması durumudur. Bu alternatifler; teknik,<br />
kullanıcı standartları ve arayüz çerçevesinde incelenir.<br />
Analiz sonucunda;<br />
Sektörde ne noktadayız?<br />
Hangi noktalarda öndeyiz/zayıfız?<br />
Ürünümde olmazsa olmaz özellikler neler?<br />
sorularına yanıt aranır.<br />
17
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kullanılabilirlik<br />
Testi<br />
Çalışan veya maket halindeki ürünün gerçek kullanıcıları ile görev bazlı testleri yapılır. Kullanıcılardan<br />
belli görevleri gerçekleştirmeleri istenirken; karşılaşılan problemler, görev başarısı,<br />
görev gerçekleştirme süresi, kullanıcı memnuniyeti ölçülür.<br />
Kullanılabilirlik testi ile,<br />
Kullanıcılar ürünü kullanırken nerelerde zorluk yaşıyorlar?<br />
Ürünün hangi özellikleri etkin kullanılıyor?<br />
Hangi özellikleri çalışmıyor?<br />
Kullanıcıların beklentileri ve davranışları neler?<br />
sorularına yanıt aranır.<br />
18
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kart Gruplama<br />
Çalışması<br />
Kart gruplama çalışması içerisinde, sınıflandırılmak istenen içerik kartlar haline getirilerek<br />
katılımcılardan bu içeriği gruplamaları istenir. Böylelikle kullanıcının gözünden hiyerarşi ile<br />
ilgili bilgi sahibi olunur.<br />
Kart gruplama çalışması sonucunda,<br />
Hangi içerikler bir arada gruplanmalıdır?<br />
Grupladığımız içeriklere ne başlıkları vermeliyiz?<br />
gibi sorulara yanıt aranır.<br />
19
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Ağaç Testi<br />
Sınıflandırılmış içerik ağaç şekilde katılımcılara sunulur ve en alt kırılımda yer alan içeriklerden<br />
bir set oluşturularak kullanıcıların bu içerikleri bulması istenir. Böylelikle sınıflandırmanın,<br />
navigasyonda yer alan başlıkların yapısının ve isimlendirilmesinin doğru olup olmadığı<br />
anlaşılır.<br />
Ağaç testi sonucunda,<br />
Kullanıcılar aradıkları bilgiye kolayca ulaşabiliyorlar mı?<br />
Navigasyonda yer alan başlıklar ne olmalıdır?<br />
sorularına yanıt aranır.<br />
20
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
First Click<br />
Test<br />
Kullanıcılara belli bir görev vererek arayüzün bir sayfasında bu görevi gerçekleştirmeleri<br />
istenir. Görev gerçekleştirme süresi ve tıklama yapılan yerler incelenir.<br />
Test sonucunda,<br />
Kullanıcılar arayüz ile beklenilen etkileşimi gerçekleştirebiliyor mu?<br />
Navigasyonda yer alan başlıklar ne olmalıdır?<br />
sorularına yanıt aranır.<br />
21
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
5 Saniye<br />
Testi<br />
Arayüzün bir sayfası kullanıcılara 5 sn kadar gösterilip ardından, bu sayfa ile ilgili sorular sorulur.<br />
5 sn testi sonucunda;<br />
Kullanıcıların ürün veya belli bir özellik üzerinde ilk izlenimleri ne?”<br />
Ürünün vermek istediği mesaj arayüzde yeterince açık mı?<br />
sorularına yanıt aranır.<br />
22
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Çıktılarının<br />
Görselleştirilmesi ve İpuçları<br />
Mustafa Dalcı<br />
<strong>Userspots</strong> Founder<br />
Kullanıcı Deneyimi çalışmalarımız ve geçmişe dönük tecrübelerimizin, bizi daha iyi ürün<br />
geliştirmek adına önemli noktalara kaydırdığı bir gerçek. Şimdi ise, bu süreç içinde adım<br />
adım değerini fark ettiğimiz ve konu üzerine sürekli düşünüp çalıştığımız<br />
“<strong>UX</strong> Görselleştirmesi”ne değinmek istiyorum.<br />
Bu yazının içeriği, Graz’da World Usability Congress’de yaptığım “<strong>UX</strong> Output Visualization” sunumu<br />
oluşturuyor.<br />
Neden Görselleştirme?<br />
Temel olarak bir <strong>UX</strong> çalışmasının kalitesi, çalışmadan çıkan insightlar ve üretilen tasarım<br />
çözümlerinin yanında çıktıların sunuluş şekliyle belirleniyor. Bu yüzden ne kadar “WOW<br />
Moment”a sahip olan bir içeriğiniz olursa olsun, bunun sunum şekliyle yarattığınız etkiyi başka<br />
boyutlara taşıyorsunuz.<br />
2009–2012 yılları arasında yaptığımız kullanıcı testlerini sunarken hazırladığımız 100+<br />
sayfadan oluşan kullanıcı testi raporların gereksizliği, okunmuyor oluşu, bizi pazarlama<br />
ekiplerinin gözünde “işi bilmeyen ve akademik raporlar içerisinde boğulmuş” kişilere<br />
dönüştürmesi sonucunda tüm eforumuzu, derdimizi daha iyi anlatabilme yollarına adadık. Bu<br />
noktada rapor yazmak yerine sonuçları görselleştirmeyi ön plana çıkardık.<br />
23
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Neleri Görselleştirebiliriz?<br />
Temel amaç, derdimizi daha iyi anlatmak olduğu için aslında her kullanıcı deneyimi çalışması<br />
görselleştirilebilir. Kullanılabilirlik Testi Sonuçları, Persona, Customer Journey, Google<br />
Analytics Verileri ve Benchmark çalışmaları bunların başında geliyor.<br />
Kullanılabilirlik Testi Sonuçları<br />
İlk görselleştirme çalışmalarımızı kullanılabilirlik testleri üzerine yaptık. Özellikle bu çıktıları<br />
alıp hemen uygulamak isteyen e-ticaret siteleri için “Executive Summary” yerine “Infografik”<br />
oluşturmaya başladık.<br />
Tek bir görsel ile demografik bilgiler, alışveriş sürecinin ortalama süresi, anket sonuçları ve<br />
yapılan hataları gösterebildiğimiz bu yapı, test sonuçlarını hap olarak almak isteyen e-ticaret<br />
şirketleri için oldukça faydalı oldu.<br />
Sonrasında finans şirketleriyle çalışmalarımız arttıkça hayatımıza “Single Usability Metric” ve<br />
bu sonuçların görselleştirmesi girdi.<br />
24
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
SUM (Single Usability Metric)<br />
Kullanılabilirlik tanımının ISO standartlarında belirtilen hali: ISO 9241’e göre kullanılabilirlik<br />
“bir ürünün potansiyel kullanıcıları tarafından, belirli bir kullanım bağlamı içinde, amaçlanan<br />
kullanım hedeflerine ulaşmak için, ne derece etkin, verimli ve tatmin edici bir şekilde<br />
kullanılabilmesi” olarak tanımlanmaktadır.<br />
SUM ise bu noktada, bir arayüzün veya bir arayüzde bulunan fonksiyonun ISO standartında<br />
belirlenen istatistikler çerçevesinde ne kadar kolay kullanılabilir olduğunu gösteren rakam<br />
olarak kullandığımız bir veriydi.<br />
Detaylı bilgiye buradan ulaşabilirsiniz.<br />
Biz de yaptığımız karşılaştırmalı benchmark çalışmalarında SUM üzerinden infografikler<br />
oluşturmaya başladık.<br />
Sonunda geldiğimiz noktada ise kullanıcı testi çalışmalarının sonuçlarından videolar üretmeye<br />
başladık.<br />
Buradaki video da bir sitenin eski versiyonu ile yeni versiyonu arasındaki farkların rakamsal<br />
karşılığı bulunuyor.<br />
25
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Persona<br />
Persona hali hazırda görsel tarafı güçlü olan bir <strong>UX</strong> çıktısı ama daha da etkili hale getirmek<br />
için gerçek ve gerçeğe yakın profiller kullanarak özel çekimler yapıyoruz. Stock fotoğraflar<br />
kullandığınız noktada yeteri kadar etki bırakamayabiliyorsunuz.<br />
Customer Journey<br />
Müşterilerin ürün ile yaşadığı etkileşimi ve yolculuğu göstermek adına da farklı görselleştirmeler<br />
kullanıyoruz. Service Blueprint gibi gösterimlerin yanında dairesel kullanımlarda bir<br />
“loop” olarak devam eden yolculuğu anlatmak için ideal bir görselleştirme şekli.<br />
26
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Benchmark<br />
Lokal ve global rakiplerin hangi fonksiyonları kullandığı ve nelere odaklandığını daha net<br />
anlamak için de Sunburst gibi gösterimler dikkat çekici olabiliyor.<br />
Google Analytics Verisi<br />
Çalışmalardan önce yaptığımız Google Analytics analizini bir infografiğe dökmek de verinin<br />
içinde kalmış vurucu noktaları ön plana çıkarmak için faydalı olabiliyor.<br />
Görselleştirmenin detaylarına buradan ulaşabilirsiniz.<br />
27
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Görselleştirme İçin<br />
6 İpucu<br />
1.Excel’in Dışına Çıkın<br />
İstatistikleri Excel’den alıp grafiğe dökmek her zaman kolay ama Excel ve Powerpoint grafik<br />
çıktıları görsel anlamda yaratmak istediğimiz etki için çok faydalı değil.<br />
2. Form Follows Data<br />
Çıktılarımız daha güzel gözüksün derken görselliğin verinin önüne geçmesini de istemeyiz.<br />
Amacımız veriyi daha anlaşılabilir hale getirmek, harika bir görsel ile “Kullanıcılar daha ucuz<br />
olanı alıyor” gibi daha önce hiç duyulmamış bir insight’ı istediğiniz kadar süsleyin, olmayacak.<br />
3. Hedef Kitlenizi Bilin<br />
Görselleştirmeyi sunacağınız kitle yapacağınız görselleştirmeyi de etkiliyor. Eğer CEO<br />
görecekse detaylardan ziyade vurucu noktaları ön plana çıkartmalı, eğer ekibe sunuyorsanız<br />
her detayı görselleştirmeye dahil etmeye çalışmalıyız.<br />
4. Beklentileri Netleştirin<br />
Sunumun ve içeriğin ne olduğu toplantı öncesinde karşı tarafa net iletilmeli.<br />
5. Daima CTA Ekleyin<br />
Her görselleştirme sunumunun net aksiyonları olmalı. Benchmark çalışmasını sunarken<br />
grafiğin ne anlama geldiğini anlatıp sonrasında da bu grafikten çıkarılacak sonuçları da karşı<br />
tarafa iletilmeli.<br />
6. İlham Alın<br />
İlham almak konusuna her daim açık olun. Behance, Dribbble ve Information is Beautiful sizi<br />
bekliyor.<br />
28
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>2015</strong>’in Bize<br />
Armağanı;<br />
Optimizasyon Servisi<br />
ve <strong>UX</strong> Alive<br />
29
Neden Optimizasyon<br />
Ekibi Kurduk?<br />
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>Userspots</strong> olarak, 2009 yılından bu yana Kullanıcı Deneyimi üzerine hizmetler sunuyoruz.<br />
Kullanıcı Deneyimi kavramının çok geniş bir alana yayıldığı ve bünyesinde birçok disiplini<br />
barındırdığı gerçeği çeşitlenen kullanıcı alışkanlıkları ile daha da belirgin hale geliyor.<br />
Bu noktadan hareketle, <strong>2015</strong> yılında hayata geçirdiğimiz Optimizasyon Servisi ile bir tasarım<br />
şirketine dönüştüğümüz sürecin sonunda “Veri Odaklı Tasarım Şirketi” etiketine sahip<br />
olmak için geçmişe dönük çalışmalarımız ve nedenlerimiz var. Bu nedenleri dört başlıkta<br />
açıklayabiliyoruz.<br />
30
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Harika Ürünler Geliştirmenin<br />
3 Temel Noktası<br />
Ürün geliştirme süreçlerinde uzun süre bulunmamızın kazandırdığı deneyimle iyi ürün<br />
geliştirebilmenin temel taşlarını çok iyi biliyoruz.<br />
Product Management<br />
Konu ile alakalı Product Manager’in patrona dahi hayır diyebilmesi, içinde bulunduğu sürece<br />
sahip çıkması, ürünü yaşatacak KPI’ları belirlemesi, “Ben Demiştim” kartlarını cebine koyarak<br />
güvenli alana çekilen ekip üyelerini projeye dahil etmek için verdiği savaş, ürünün hayatta<br />
kalması için olmazsa olmazları arasında yer almaktadır.<br />
Sahipsiz ürün yaşamıyor!<br />
31
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Know How<br />
Bir ürünün KPI’ları, gitmek istediği yer, hedef kitlesinin mevcut deneyimi ve üründen<br />
beklentilerin ortak noktasını bulabilmek için hedef kitlenin tutum ve davranışlarını anlamak<br />
gerekiyor. İşte bu noktada devreye Kullanıcı Deneyimi Çalışmaları giriyor.<br />
Agile Development<br />
Ürünü MVP (Minimum Viable Product) ile hayata geçirdikten sonra, mevcut ürünü veriler ile<br />
birlikte adım adım inşa edebilmek için işleri mikro yapılara kırmak ve bu kırılımlar arasında<br />
çok hızlı önceliklendirmeler yapabilmek hayati bir önem taşıyor. Agile Development bize bu<br />
esnekliği sağlıyor.<br />
Bu üç noktanın orta noktasını bulduğumuzda çoğu zaman “İyi Ürün” ile karşılaşıyoruz. İyi<br />
ürün sürecinin başında doğru ürünü yaptığınızı kanıtlamaya çalıştığınız hareketlerin tamamı<br />
“Lean <strong>UX</strong>” başlığı ile karşımıza geliyor.<br />
Bugüne kadar gördüğüm en iyi Lean <strong>UX</strong> hikayesi, tasarımını <strong>Userspots</strong> olarak staj programı<br />
çerçevesinde yaptığımız Kasko123 adlı kasko şirketine ait olduğunu söyleyebilirim. Kasko123<br />
bizimle çalışmaya başlamadan önce fake bir anasayfa ve fake bir kasko listeleme sayfası<br />
oluşturulduktan sonra adwords ile gelen kullanıcı trafiği izlenmiş, bu gelen trafik üzerinden<br />
kaç kişi “Teklif Al” butonuna tıklamış, kaç kişi gelen fake tekliflerden birine satın almaya<br />
çalışmış istatistikleri tutulmuştu. Bir modelin çalışıp çalışıp çalışmayacağı kanıtlandıktan sonra<br />
modele yatırım yapmak kesinlikle daha doğru bir yöntem.<br />
Tasarım şirketleri olarak bütün yapıyı tasarlayıp müşteriye sunmak ve sonrasında alkışlarla<br />
süreçten ayrılmak bizi iyi ürün hikayesinin bir parçası yapmıyor. İyi ürün hikayesinde<br />
başrolde yer almamız için Optimizasyon servisi sunmaya ihtiyacımız var.<br />
“Kullanıcı Araştırmaları, Tasarım Kararlarını Doğrulamada Yeterli Değil!”<br />
Bir ürünün tasarım sürecinde ne kadar fazla kişiyle görüşürseniz görüşün, beş kullanıcı ile test<br />
yaparak sorunlarınızın %75’ini bulduğunuzu varsayın, etnografik araştırmalarda sayının önemli<br />
olmadığından bahsedin, yine de milyon dolarlık tasarım kararları alırken dönüp dolaşıp aynı<br />
noktaya geliyoruz; Kaç kişiye sordunuz?<br />
Örneğin; Hepsiburada için kategori ağacı çalışması yapıp menüyü soldan üste almak bir çok<br />
kişiye göre milyon dolarlık bir tasarım kararıydı ve sadece 200 kişiyle yapılan kart gruplama<br />
testinin sonuçları ile yeni kategori ağacını hayata geçirmek milyondan fazla kullanıcısı olan bir<br />
yapının iç süreçleri için fazlasıyla riskliydi.<br />
Bu noktada daha geniş kapsamlı bir çalışma devreye girmeliydi ve girdi de. Mobil arayüzde<br />
yapılan A/B testi ile kullanıcıların %50'si eski 22'lik ağacı, %50'si de 9'luk yeni ağacı gördü. Alt<br />
başlık haline geleceği için satışın azalacağı düşünülen kategorilerde beklenilen olmadı ve yeni<br />
ağaç testi başarıyla tamamladı.<br />
Kaç kişiye sordunuz bunu? Sorusunun daha güzel bir cevabı artık var.<br />
32
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
SAHİBİNDEN EMLAK IPAD UYGULAMASI<br />
İLE EMLAK ARAMA SÜRECİ<br />
EMLAK ARAMA DÖNGÜSÜ<br />
Emlak arama süreci sürekli<br />
tekrarlayan bir döngü olarak<br />
gözlenmiştir. Bu nedenle sistemin<br />
tasarımı bu döngü içerisinde birbirini<br />
izleyen aksiyonlara göre<br />
geliştirilmelidir.<br />
1<br />
EMLAK<br />
ARAMA<br />
FİLTRE - KONUM KAYDETME<br />
İstenilen konum ve filtreleme seçeneklerinin<br />
kaydedilerek sonraki aramalarda kullanılması<br />
3<br />
EMLAK<br />
ARAMA<br />
2<br />
EMLAK<br />
ARAMA<br />
ZİYARET ETTİĞİM EVLER<br />
MESAJ BİLDİRİMİ<br />
Önceden belirlenen özelliklerde yeni ilan<br />
eklendiğinde bildirim olarak alma<br />
Daha önceki aramalarda incelenen evlerin harita<br />
üzerinde gösterilmesi<br />
SON ARAMADAN BU YANA EKLENENLER<br />
Son aramadan bu yana eklenen ilanların<br />
gösterilmesi<br />
Satın Alma Yolculuğu Statik Değil!<br />
Tasarladığımız süreçlerin neredeyse tamamı “Uzay Boşluğunda Duran Kullanıcının” sitemize<br />
gelmesi ve istediklerimizi tek seferde yapacak olması varsayımına dayanıyor. İkinci ve üçüncü<br />
ziyaretlerinde artık çoğu şeyi unutmuş bir satışçıya dönüşüyor ve müşterimizi tanımak için<br />
onun bazı hareketler yapmasını bekler hale geliyoruz.<br />
Oysa satın alma yolculuğu hiçbir zaman statik değil. Yolcuğumuz, fiziksel ve dijital kanallar<br />
arasında gidip gelen ve her defasında bir önceki durumdan devam etmesini beklediğimiz bir<br />
yapıya sahip.<br />
Bir emlak sitesi düşünün, eğer siz arama sonuçlarına favorilerinize almıyorsanız sizi<br />
hatırlamayıp her kapıdan içeriye girdiğinizde size “Buyrun neye bakmıştınız?” sorusunu<br />
iletiyor. Oysa siz o aramayı genelde aynı cihaz üzerinden 2 gün — 8 hafta sürecek ev<br />
arayışınız esnasında defalarca kez yapıyorsunuz. Bir önceki arayışınızdan 3 gün sonra tekrar<br />
geldiğinizde size;<br />
“Arama kriterlerinize uygun 43 yeni ev var!”<br />
Yorumunu daha güzel bir ifadeyle iletse, balık hafızalı bir emlakçıdan sizi tanıyan emlakçıya<br />
dönüşecek.<br />
33
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
İş arama süreci de benzer döngülere sahip. Üç gün önce <strong>UX</strong> Designer olarak iş arayan kişinin<br />
bir sonraki gelişinde “Maden Mühendisliği” araması yapmayacağını tahmin edebiliyoruz.<br />
Sonraki ziyaretinde ulaşmak istediği “Ben Burada Yokken Neler Olmuş?” bilgisini kolayca<br />
sunduğunuzda statik olmayan yolculuğa karşı iyi bir deneyim sunan yapıya sahip<br />
oluyorsunuz.<br />
İşin güzeli, artık pazarlama otomasyon araçları “If This Than That” kurgularını kolayca<br />
oluşturabileceğiz yapılara sahip.<br />
Verinin Girdiği Süreçten Ego Çıkıyor!<br />
Verinin olmadığı yerde fikirler çatışmaya başladığında son söz HIPPO (Highest Paid Person’s<br />
Opinion) ’nun oluyor. Optimizasyon süreci şirketlerde ürün geliştirme yapısına dahil olduktan<br />
sonra “Bunun Testini Yapmış mıydık?” sorusunu duymaya başlayacak şekilde bir norma<br />
dönüşüyor. Sürece veri giriyor, ego ve benim dediğim olsunlar çıkıyor.<br />
Mustafa Dalcı<br />
34
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>Userspots</strong><br />
Big 4<br />
Bu yılın bizim için en önemli noktası da yaptığımız 4 büyük projeyi<br />
adlandırdığımız Big 4’dü. Bu yıl boyunca üzerine çalıştığımız, tamamında<br />
mobile dokunduğumuz 4 büyük proje, <strong>Userspots</strong>’un büyük projeleri sonuna<br />
kadar takip eden, ürünün her etkileşiminden sorumlu ve bu işleri yapabilecek<br />
yetkinlikte olduğunu kanıtladı.<br />
35
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Hopi<br />
Daha önce hiç bir ürün tasarım sürecimize CEO (Cem Boyner) ‘nun bu denli katıldığını ve<br />
katkıda bulunduğunu görmemiştik. Alışverişin her noktasına dokunan şu an 2.5 milyon kişiye<br />
ulaşan Hopi’nin kullanıcı deneyimini tasarlamak bu yılı harika hale getirmek için tek başına<br />
yeterli bile.<br />
Hopi’nin tasarım sürecinde, 4 şehirden 9 katılımcı 4 hafta süresinde yaptıkları tüm<br />
alışverişleri(giyim, market, akaryakıt, eğlence…) kayıt altına aldılar.<br />
3 Boyner, 2 YKM, 1 Beymen, 1 Fabrika ve Network mağazası ziyaretlerinde 38 saat gözlem<br />
süresi elde edidi ve farklı reyonlardan 40 satış temsilcisi ile görüşmeler yapıldı. 5 AVM ziyaret<br />
edildi, 30 müşteri ile alışverişleri ile ilgili görüşmeler yapıldı. Tüm kullanım senaryolarının<br />
düşünüldüğü 22 akış detaylandırılarak toplamda 638 ekran çalışıldı.<br />
36
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Bonus Flaş<br />
Üzerine en fazla emek verdiğimiz ve bunu da büyük bir gururla anlattığımız<br />
proje olan Bonus Flaş yıl sonuna doğru hayata geçti. Kullanıcıların alışveriş<br />
alışkanlıkları ile ürün KPI’larını orta noktada buluşturmak konusunu iyi<br />
kotardık.<br />
37
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kullanıcıların kredi kartı kullanım alışkanlıklarını, bonus.com.tr ile olan etkileşimlerini<br />
incelemek için gerçekleştirilen; derinlemesine görüşmeler; kullanılabilirlik<br />
testleri, göz izleme testleri ve Garanti bankası şube, çağrı merkezi, iç ekipler ile<br />
yapılan görüşmelere ek olarak mobil deneyimi incelemek üzerine de bir çalışma<br />
gerçekleştirdik.<br />
Bu çalışmada; 16 Bonus müşterisi ile alışveriş anı da dahil olmak üzere görüşmeler,<br />
Finansal işlem ve kampanya ile ilgili mobil uygulama alışkanlıklarına yönelik bir<br />
netnografi çalışması, Kredi kartı alışverişi günlük çalışması gerçekleştirildi.<br />
Uygulamada kullanıcı deneyimi olarak;<br />
- Finansal Gösterim ve Kampanyaların birleşimi, Aile Geçişi, Özet limit barı,<br />
- Hesap bilgilerinde akıllı ürün satış alanları, kartlar arası hızlı geçiş,<br />
- Akıllı kampanya gösterimi.<br />
- Zaman ve lokasyona bağlı Kampanya Gösterimi.<br />
- Kolay kampanya arama<br />
- Harita Üzerinden Kampanya Bulma<br />
- Kampanya Takip ekranları, ön plana çıkıyor.<br />
38
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Hepsiburada<br />
Checkout grafik tasarımı ile başlayan yolculuğumuz Iphone uygulaması<br />
deneyim tasarımı, Kategori Ağacı, Responsive Web ve Tablet uygulamasıyla<br />
devam etti. Şu an Hepsiburada’nın her noktasına <strong>Userspots</strong>’un önemli bir<br />
katkısı bulunuyor.<br />
39
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
TEB<br />
“Para kadar kolay” diyerek tanıttığımız TEB Kosova, bankacılık işlemleri<br />
hayatında olmayan Kosova’lılara basit bir deneyim yaşatmayı amaçladı.<br />
Basitlik vurgumuz ile World Usability Congress’de<br />
“World Experience Award” aldık.<br />
40
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Pozumuzu da not düşelim:<br />
Bize bu pozu verdiren uygulamayı tasarlarken, hızlı ve maliyeti daha düşük bir anket<br />
gönderip bankacılık deneyimimizden yararlanmak yerine Kosova'yı ziyaret edip, TEB<br />
Kosova'nın iç ve dış müşterileri ile görüşerek Kosova'daki bankacılık ve insanların TEB'e<br />
bakış açısını da gözlemlemeyi tercih ettik. Böylelikle, yeni Teb Kosova Mobil uygulamasını<br />
müşterilerin bankacılıktaki önceliklerinin nasıl farklılaştığını ve kafalarındaki yapıyı görerek<br />
hayata geçirdik. Müşterilerin sık kullandığı ürünler ve işlemler öne çıkarılarak bankacılık<br />
uygulamalarını öğrenmesi kolay ve kullanışlı bir ürün tasarlamaya çalıştık. Kosova'da TEB'in<br />
sektöre getirdiği farklılıklar ve ürünler ile kurduğu yenilikçi banka, teknolojiyi getiren banka<br />
imajını da kullanarak; mobil teknolojinin getirdiği yenilikçi özelliklere uygulamada yer verdik.<br />
(parmak izi, kullanıcıyı hatırlama, ön izleme vs. )<br />
Teb Kosova kullanıcıları için en önemli ihtiyaç, sahip olduğu ürünlere hızlı ulaşım ve bu<br />
ürünler ile ilgili temel aksiyonları aldırabilmekti. Klasik banka uygulamalarından farklı olarak<br />
bu çalışmada fonksiyonlar üzerinden gitmenin kullanıcı açısından faydalı olmayacağı<br />
sonucuna ulaştık. Kullanıcı grubumuz bankacılık uygulamalarına oldukça uzak olduklarını<br />
gördük. Bu nedenle kullanıcıların ihtiyaçları önceden tanımlanmalıydı.<br />
Araştırmalardan çıkan başka bir sonuçta ödemeleri ile ilgili doğru iletişime ihtiyaç<br />
duyulduğuydu. Bu ihtiyaca cevap verebilmek için ana sayfamızda takvim fonksiyonunu<br />
ekledik. Bu sayede kullanıcılar finansal takvimlerini oluşturarak ödemelerini ve varlıklarını<br />
kontrol altında tutabileceklerdi. Bize ödül kazandıran bu çalışmada, tasarımlarımızı bu<br />
ihtiyaçlara göre düzenledik.<br />
41
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
A-B Test<br />
Bir ürünün farklı varyasyonlarından hangisinin ihtiyaca uygun ve verimli olduğunu<br />
ölçümleyebildiğimiz bir test biçimidir. A-B Test Sürecinde, farklı içerik ve tasarım örnekleri<br />
sunularak, en iyi sonucu alma yoluna gidilir. Bu test sonucunda ürün için hangi alanlarda<br />
değişim yapılmak isteniyorsa, değişimlere dair istatistikler ve geri dönüşüm oranları<br />
çıkartılarak hangi versiyon ağırlıklı ise kullanıcıya o sunulur.<br />
42
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
A-B Test Örnekleri<br />
Firma-1<br />
%19<br />
Bir finans şirketi, yatırım planlarını personalar ile<br />
birleştirdiğinde plan satışlarına nasıl etki edeceğini<br />
öğrenmek için A-B testine başvuruyor.<br />
Birinci tasarımda, yatırım planın riskleri ve karlılık<br />
oranları hakkında bilgiler veriliyor.<br />
İkinci tasarımda, bu bilgilere ek olarak<br />
personaların bu plan hakkındaki düşüncelerine de<br />
yer veriliyor.<br />
İkinci tasarım kullanıldığında, müşteriler<br />
personalar ile aralarında bir bağ kuramadığı için<br />
satışların düştüğü saptanmıştır.<br />
Birinci tasarımla satışlarda %19 artış<br />
gözlemlenmiştir.<br />
Firma-2<br />
%7,8<br />
Firma, mobil sitelerinde depolama alanlarının<br />
rezervasyon oranlarını arttırmak için farklı buton<br />
renklerinin etkisini ölçmek üzere A-B testine<br />
başvuruyor.<br />
Orijinal buton rengi mavi. Araştırmalar mavi<br />
rengin insanlarda güven duygusunu çağrıştırdığını<br />
gösteriyor.<br />
Araştırma sonuçlarında turuncu rengin<br />
kullanıcılarda ürünün ucuz olduğu hissini<br />
uyandırdığı gözlemleniyor.<br />
Aynı zamanda turuncu renk, hareket halindeki<br />
kullanıcıda hızlı karar verme dürtüsünü tetikliyor.<br />
Sonuç olarak turuncu buton rezervasyon oranını<br />
%7,8, mobil site trafiğini de %12,3 arttırmıştır.<br />
43
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Firma-3<br />
%23<br />
Bir depo kiralama firmasının mobil giriş<br />
sayfası.<br />
Depo rezervasyonlarını arttırabilmek için<br />
tasarlanan yeni sayfa A-B testine tabi<br />
tutuluyor.<br />
Soldaki tasarım orijinal giriş sayfası.<br />
Yeni tasarım kullanıldığında siteye kayıt ve<br />
çağrı merkezi aramaları %40 artış gösterdi.<br />
Sağ taraftaki tasarımda;<br />
Rezervasyon oranları %23 artış gösterdi.<br />
Firma-4<br />
%5<br />
Bir e-ticaret firması iki farklı arama barı için<br />
A-B testi yapıyor.<br />
Birinci tasarımda sade bir arama barı<br />
kullanılıyor.<br />
İkinci tasarımda öneri sunan bir arama barı<br />
kullanılıyor.<br />
Sitede öneride bulunan arama barı<br />
kullanıldığında, satışlarda %5, site<br />
ziyaretlerinde %8 artış saptanmıştır.<br />
44
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Firma-5<br />
%34,7<br />
Bir e-ticaret sitesinin satışlarını arttırmak<br />
amacıyla giriş sayfası yerleşimini test ettiği bir<br />
A-B testi.<br />
Orijinal giriş sayfasında: üstte yatay, solda<br />
dikey bir navigasyon tasarımı ve kampanyaların<br />
öne çıkarıldığı bir sayfa mevcut.<br />
Yeni tasarımda ise soldaki navigasyon<br />
kaldırılmış ve ürünler sınıflandırılarak<br />
sergilenmiştir.<br />
Daha sade görünen ikinci tasarım satışlarda<br />
%34,7 artış sağlayarak testin kazananı<br />
olmuştur.<br />
Firma-6<br />
%24,4<br />
Bir e-ticaret firması aylık paket planlarının satışını yükseltmek amaçlı A-B teste başvuruyor.<br />
Birinci sıralamada paket fiyatları, büyükten küçüğe sıralanıyor. İkinci sıralamada paket fiyatları, küçükten<br />
büyüğe sıralanıyor.<br />
Araştırmalara göre kullanıcı ilk olarak yüksek fiyatla karşılaştığı zaman düşük fiyatı kabullenmesi daha<br />
kısa sürüyor.<br />
Sonuç olarak firmanın aylık gelirinin %24,4 arttığı gözlemlenmiştir.<br />
<strong>Userspots</strong> Optimizasyon ekibi tarafından hazırlanan<br />
A/B testine katılmak ister misiniz?<br />
45
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
B-CLEAR<br />
FRAMEWORK<br />
Before Start<br />
DEFINE KPI’S<br />
PERSONA<br />
JOURNEY<br />
ANALYTICS<br />
USABILITY REVIEW<br />
HEATMAP<br />
Optimizasyon çalışmasına başlamadan<br />
önce Analiz evresi başlar. Google<br />
Anaytics ya da Adobe Analytics,<br />
Heat map ve mouse tracker araçları<br />
analiz edilir, daha önce yapılmış olan<br />
testlerin sonuçlarından çıkarılan<br />
öğrenimler incelenir, kullanıcı anketleri,<br />
kullanılabilirlik çalışmaları yapılır,<br />
sektör özelinde yapılmış olan A/B Test<br />
çalışmaları ve kullanıcı geribildirimleri<br />
incelenir.<br />
46
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
BANNER<br />
IMAGE<br />
ICON<br />
VIDEO<br />
SHAPE OF BUTTON<br />
BUTTON TO HYPERLINK<br />
FONT<br />
CAROUSEL<br />
FORM ELEMENTS<br />
Change<br />
Web siteleri ve mobil uygulamalarda genel<br />
kabul gören best practiceler her sektör<br />
için geçerli olmayabilir. Hatta genelde<br />
aynı sektörde bile farklı kullanıcı kitleleri<br />
tarafından farklı tasarımlar daha kullanışlı<br />
kabul edilebilir. Websiteniz ya da mobil<br />
uygulamanız için en doğrusunu bulmak<br />
için en doğru yol sayfa içindeki elementler<br />
üzerinden değişiklikler yaparak sürekli test<br />
etmekten geçer.<br />
Change Example:<br />
Bullet vs Slider<br />
47
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
ACTION BUTTON<br />
FOLD<br />
FUNNEL<br />
ONBOARDING<br />
SPLASH SCREEN<br />
PERSONALIZATION<br />
CLICK TO CALL<br />
NOTIFICATION<br />
Look / Analyze<br />
A/B testler yalnızca sayfa elementlerinde yapılacak<br />
değişikliklerden ibaret değildir. Bir funnelı<br />
oluşturan tüm süreç değiştirilebilir, 4 adımdan 2<br />
adıma düşürülen ödeme süreçleri denenebilir, üye<br />
olma süreçleri analiz edilerek alternatif süreçler<br />
test edilebilir.<br />
Look/Analyze Example:<br />
Onboarding<br />
48
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
ELEMENT SIZE<br />
USER REVIEW,<br />
TESTIMONIALS<br />
BORDER<br />
FLAG<br />
LOGO<br />
OFFER<br />
BENEFITS<br />
Emphasize<br />
Bir sayfada kullanıcıları yönlendirmek<br />
istediğiniz birincil CTA’yı, satın aldırmak<br />
istediğiniz paketi, incelenmesini istediğiniz<br />
kampanya görselini, neyi ön plana çıkarmak<br />
istiyorsanız onu belirginleştirmek için<br />
çeşitli tasarım hileleri mevcut. Arkaplanı<br />
değiştirmek, boyutlarda değişiklikler yapmak,<br />
border eklemek, metin rengini ve stilini<br />
değiştirmek akla ilk gelen örneklerden. En iyi<br />
çalışan tasarımı bulmak için ise çeşitli testler<br />
yapabilirsiniz.<br />
Emphasize Example<br />
Ödeme Paketleri<br />
49
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Add<br />
LEAD FORM<br />
POP-UP<br />
ONBOARDING<br />
FEEDBACK FORM<br />
Kullanıcıları birincil CTA’na yönlendirmek için<br />
POP-UP’lar çıkarabilir, formlar ekleyebilirsiniz.<br />
Hatta tekrar tekrar aynı işlemleri yapan<br />
kullanıcılar için özelleşmiş metinler içeren<br />
pop-uplar çıkarılması en sık kullanılan ve test<br />
edilen yöntemlerden.<br />
Add Example:<br />
Since Last Visit<br />
50
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Rearrange<br />
DEFINE KPI’S<br />
PERSONA<br />
JOURNEY<br />
ANALYTICS<br />
USABILITY REVIEW<br />
HEATMAP<br />
A/B testlerin en sık kullanılan<br />
versiyonlarından biri de Split testingtir. Split<br />
test bir sayfanın en baştan tasarlanarak 2<br />
farklı varyasyonun test edilmesi anlamına<br />
gelir. En baştan tasarım yapılma aşamasında<br />
bir önceki sayfadan elde edilen tüm verinin<br />
analiz edilerek kullanılması en sağlıklısı<br />
olacaktır. Sayfa bazlı kalitatif ve kantitatif<br />
veriler incelenerek yeni sayfa tasarımları<br />
hazırlanabilir ve test edilebilir.<br />
Rearrange Example<br />
Redesign<br />
51
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
WEB Sizin için<br />
Çalışsın!<br />
Gelişen ve hızlanan dünyada firmaların bir ürünü ön plana çıkartması, tanıtması ve<br />
satışını yapması her geçen gün daha da zorlaşıyor. Bu nedenle şirketlerin pazarlama<br />
departmanlarına çok iş düşüyor. Fakat bu kadar fazla pazarlama opsiyonun olduğu dijital<br />
dünyada elbette ‘Dijital Pazarlama Araçları’nın varlığı firmalar için vazgeçilmez oluyor.<br />
Pazarlamanın asıl amacını ürün ya da servisin ilgi çekiciliğini arttırmak, hedef kitlenin satın<br />
almaya yönelmesini teşvik etmek olarak tanımlayabiliriz. Bu nedenle de mümkün olduğunca<br />
pazarlanacak ürünü ya da servisi müşteriye özelleştirmek, ona uygun olduğunu hissettirmek<br />
ve bunun için ciddi efor sarfetmek, strateji planlaması yapmak gerekiyor. Otomasyon ise insan<br />
eli değmeden yapılan, tamamen dijital bir sisteme bağlı olarak işleyen sistem anlamını taşıyor.<br />
İşte bu noktada Dijital Pazarlama bu iki birbirinden bağımsız gözüken kavramı bir araya<br />
getiriyor.<br />
E-mail pazarlamasından türeyen dijital pazarlama otomasyonunun asıl amacı, otomatik<br />
tekrarlanan işlerde insan hatasını en aza indirmek olarak tanımlanabilir. Günümüzde<br />
pazarlama otomasyon araçları yalnız e-mail için değil, mobil pazarlama, içerik pazarlama,<br />
sosyal medya pazarlaması, analytics ya da SEO için de kullanılan araçlar haline geldiğini<br />
görüyoruz. Her ne kadar daha çok B2B pazarlama da ihtiyaç duyulsa da B2C’de de kullanımı<br />
oldukça yaygın olarak karşımıza çıkıyor.<br />
52
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Highrise<br />
Highrise, kullanıcının çalışma ekibi ile kontaklarını paylaşmasını kolaylaştıran,<br />
görevlerini, hatırlatıcılarını ve tekliflerini takip etmesini sağlayan otomasyon<br />
aracıdır. Ayrıca, iş kontaklarıyla iletişimlerin yönetmesini de sağlamaktadır.<br />
Pardot<br />
Bir salesforce.com şirketi olan Pardot, satış ve pazarlama ekiplerinin birlikte<br />
maksimum verim ve kazançla çalışmasını sağlayan bir otomasyon aracıdır. Bardot’nun<br />
lead yönetim yazılımı, CRM entegrasyonu, email pazarlaması, lead beslenmesi, lead<br />
skorlanması ve ROI (yatırım getirisi) raporlanması gibi fonksiyonları içermektedir.<br />
53
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Zapier<br />
Zapier, kullanmakta olduğunuz diğer uygulamalara kolayca bağlanır ve görevlerin<br />
otomasyonunu sağlar. Kullanıcı öncelikle kullanmak istediği uygulamayı seçer - bu mail<br />
olabilir, ya da bir salesforce’taki lead oluşturma da olabilir. Ardından bu durumdaki alacağı<br />
aksiyonu belirledikten sonra otomasyon oluşmuş olur. Zapier, kullanıcının tekrarlayacağı işleri<br />
üstlenerek işlemleri gerçekleştirir. Bunun gibi pek çok farklı işlem Zapier yardımıyla yapılabilir.<br />
Ecquire<br />
Ecquire, sosyal ağlardaki profillerden lead ekleme, müşterilerden gelen mail ve mesajları<br />
otomatik olarak saklama, heryerde CRM (müşteri ilişkileri yönetimi) araştırması yapabilme,<br />
en çok kullanılan CRM uygulamaları ve web siteleriyle uyumlu olarak çalışabilme gibi<br />
işlemleri içeren otomasyon aracıdır.<br />
54
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Google Analytics<br />
Pazarlama alanın neredeyse en önemli aracı olan Google Analytics, ortalama %73’lük bir<br />
kitle tarafından tercih edilir. Google Analytics ile web sitesine gelen ziyaretçi trafiği, detaylı<br />
istatiksel bilgiler, sitenin ziyaretçileri hangi siteden sonra kullanıcının sitesine ulaşmış, sitede<br />
ne kadar süre kalmış, ürün alımları, hangi işletim sistemini kullandığı gibi pek çok sorunun<br />
yanıtına ulaşabiliyor. Böylelikle müşterilerin yolculuğu çıkarılarak, daha iyi pazarlama stratejisi<br />
oluşturabilmeyi olanaklı kılıyor.<br />
Optimizely<br />
Optimizely A/B test otomasyonları arasında en çok tercih edilen araçlardan bir tanesi<br />
olarak karşımıza çıkıyor. Optimizely, sitenin içerik ya da tasarım açısından iki farklı örneğinin<br />
karşılaştırılmasına olanak sağlıyor. Böylelikle sitenin dönüşüm oranlarına bakılarak hangi<br />
opsiyonun daha fazla kar ettiği bulunuyor ve site ona göre şekillendiriliyor.<br />
55
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Typeform<br />
Typeform kullanıcının test, anket, form, quiz, landing page gibi daha çok ölçümlenebilir sayfa<br />
oluşturmasına ve bunu MailChimp, Salesforce gibi diğer araçlarla birlikte çalışarak çoklu<br />
gönderilmesine olanak sağlıyor. Etkileşim oranının yüksek olması, Typeform’u sık kullanılır bir<br />
araç olarak ön plana çıkartıyor.<br />
CrazyEgg<br />
Sitelerin sıcaklık haritalarının, tıklanma haritalarının, sayfa kaydırma haritalarının çıkarılmasını<br />
sağlayan Crazy Egg, kullanıcıların sitede nasıl bir yolculuk yaptığını anlamaya yardımcı oluyor.<br />
56
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Unbounce<br />
Hazır şablonlarla Landing Page oluşturmayı kolaylaştıran Unbounce, sitenin kendini domaini<br />
altında yayınlamaya, Landing Page’in A/B testinin yapılmasına ve sonrasında da sayfanın<br />
optimize edilmesine olanak sağlıyor.<br />
HubSpot<br />
Çok sayıda otomasyon işleminin gerçekleşmesine olanak sağlayan HubSpot, içerik<br />
optimizasyon sistemi ile kullanıcılara kişileştirilmiş deneyim sunuyor. Ayrıca, SEO ve Blogging<br />
optimizasyonu süreçlerinde destek sağlıyor. Bunun yanısıra otonomize edilmiş mailing<br />
çalışmalarına ve kişiselleşmiş mail kampanyaları oluşturabilmenize olanak sağlıyor.<br />
57
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Alive<br />
<strong>2015</strong><br />
Süleyman Duman<br />
Content Editor-Marketing/<strong>Userspots</strong><br />
Kullanıcı Deneyiminin<br />
Usta İsimleri <strong>UX</strong> Alive Konferansı ile<br />
İstanbul’da Buluştu.<br />
ExperianceEverywhere ana teması etrafında şekillenen <strong>UX</strong> Alive<br />
Konferansı, Kullanıcı Deneyiminin dokunduğu çoğu sektörden<br />
katılımcı ve konuşmacılara ev sahipliği yaptı.<br />
58
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Alive Konferansı’nda<br />
Neler Oldu?<br />
<strong>Userspots</strong> olarak, Türkiye’de ‘Kullanıcı Deneyimi’ alanında <strong>UX</strong> Alive gibi önemli<br />
bir konferansı gerçekleştirmiş olmak, <strong>2015</strong> yılı içerisinde yaşadığımız büyük<br />
gururlardan bir tanesi oldu. Aynı zamanda gelecek yıllar için motivasyon kaynağı<br />
olduğunu da söyleyebiliriz. Bu motivasyonla ve sizlerden aldığımız destekle bu yıl<br />
daha iyi bir konferans deneyimi yaşatmak adına çok çalışıyoruz. Hem geçen yılı<br />
hatırlamak hem de önümüzdeki konferansta bizleri nelerin beklediğini anlatmak<br />
adına kısa bir derleme yapalım istedik.<br />
Tüylerimizin diken diken olduğu görkemli bir açılış videosu nun ardından<br />
<strong>Userspots</strong>’un kurucusu Mustafa Dalcı’nın yaptığı açılış konuşması ile <strong>UX</strong> Alive<br />
Konferansı başlamış oldu.<br />
Geçen yıl 13-14 Mayıs tarihleri arasında, İstanbul Wyndham Grand Otel’de<br />
gerçekleştirdiğimiz <strong>UX</strong> Alive Konferansı, dünyanın önde gelen firmalarından<br />
tasarımcıları ve <strong>UX</strong> uzmanlarını konuşmalar yapmak ve workshoplar gerçekleştirmek<br />
üzere İstanbul’da bir araya getirdi. Ayrıca konferans, 23 ülkeden 550 katılımcıya ev<br />
sahipliği yaptı. İlk gün konuşmalar ve sunumların olduğu <strong>UX</strong> Alive Konferansı’nda<br />
ikinci gün deneyim odaklı workshoplar uzman isimler eşliğinde gerçekleştirildi.<br />
59
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kimler Katıldı?<br />
Türkiye’den ve dünyadan önemli firmaların katıldığı konferansta genel katılımcı<br />
profili şöyleydi;<br />
Üst Düzey Tasarımcılar ve Ürün Geliştirme Müdürleri (Hepsiburada, çiçeksepeti,<br />
n11, Markafoni, Morhipo, Kliksa,Turkcell, Avea, TTNET…) Banka IT Başkanları ve<br />
Tasarımcılar (Garanti Bankası, İş Bankası, Vakıfbank, Yapıkredi Bankası, A Bank,<br />
Finansbank, ING Bank, Kuveyt Türk Bankası…) Genel Müdür ve Şirket Kurucuları (<br />
Vuslat Doğan Sabancı, Bülent Başaran…) Dijital Basın Temsilcileri ( Hürriyet, Radikal,<br />
Ekonomist, Zaman, Webrazzi…) Yurt Dışı Firmalar ( Google, Apple, IBM, Facebook,<br />
Medium, Foursquare,Uber, Simple, Moven, New York Times, Soundcloud, travelbird,<br />
yandex, Baymard Institute..)<br />
<strong>UX</strong> Alive Konuşmacıları<br />
Türkiye’nin ve dünyanın önde gelen şirketlerinden temsilciler <strong>UX</strong> Alive Konferansı<br />
için özel hazırladıkları sunumları katılımcılarla paylaştı. Birçok büyük firmanın<br />
deneyimlerini nasıl tasarladıkları, nelere dikkat ettikleri ve bizlere sundukları öneriler<br />
dikkate değer bir paylaşım olarak hafızalara kazındı.<br />
60
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Keynote<br />
<strong>UX</strong> Alive’ın Keynote konuşmacıları; Giles Colborne, Elaine Brechin Montgomery<br />
(Facebook), Dustin Senos (Medium), Jambu Palaniappan (Uber)<br />
Konuşmacılar<br />
Christian Holst (Baymard Institute), Ashwin Sodhi, Vitaly Friedman (Smashing<br />
Magazine), Toby Sterrett (Simple), Başak Haznedaroğlu (Foursquare),<br />
Mohamed Khalil (Moven), Alessandra Villaamil (New York Times), Job Jansweijer<br />
(KonneKt Play), Eileen Chang (Odesk), Aras Bilgen (ciceksepeti.com),<br />
Gokhan Besen (hepsiburada), Mehmet Doğan (twofour54), Sophie Kleber (Huge),<br />
Yalçın Pembecioğlu (BiguMigu), Hasan Yalçın, Jeff Romi, Mert Hürtürk (Sendloop),<br />
Mert Yılmaz (dugun.com), Ali Beklen (HotelRunner)<br />
61
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Panel Konuşmacıları<br />
Emrah Olgun (Startup Kitchen), Sean Yu (Parasut), Ali Halabi (Volt), Ari Bencuya<br />
(8digits), Pelin Kenez (Zeplin) <strong>UX</strong> for Startups adı ile düzenledikleri panelde startups<br />
ların tasarım sorunları ve çözüm önerileri üzerinde durdular.<br />
Design Clinic ve <strong>UX</strong> Kariyer Koçluğu<br />
Etkinlik alanına kurduğumuz Dizayn Klinik standı ile katılımcıların kendi seçtikleri<br />
alanlardaki web siteleri ve mobil uygulamaların kullanıcı deneyimi analizleri uzman<br />
görüşleri eşliğinde değerlendirildi. Giles Colborne tüm etkinlik boyunca katılımcıların<br />
tasarım sorularını yanıtlamaya çalıştı, gönüllerimizi fethetti.<br />
Yine etkinlik alanında yer alan Kariyer Koçluğu standımız ile <strong>UX</strong> Kariyerine yön vermek<br />
isteyen veya danışmanlık talep edenler için uzman isimler önerilerde bulundu.<br />
62
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Workshoplar<br />
<strong>UX</strong> Alive’ın workshop yürütücüleri anmadan geçilmez. Giles Colborne, Vitaly<br />
Friedman, Humberto Matas, Can Yükselen, Levent Altunyurt, Gökhan Besen, Hasan<br />
Yalçın, Agnieszka Mozol, Krystian Mrozek. <strong>UX</strong> Alive’a worksoplarıyla renk kattıkları<br />
için sonsuz teşekkürler.<br />
<strong>UX</strong> Alive’ın ikinci gününde düzenlediğimiz workshoplar oldukça keyifli geçti.<br />
Özellikle Vitaly Friedman’ın sempatik yaklaşımı, Giles Colborne’ın etkinliğin her<br />
yerinde olması, Humberto Matas’ın gözümüzün önünde duran ama göremediğimiz<br />
tasarım problemlerine değinmesi, <strong>UX</strong> The Game ekibi ile oyun tadında <strong>UX</strong><br />
yaklaşımları, Hasan Yalçın’ın kağıt ve kalem ile başlattığı tasarım serüveni ile dolu<br />
dolu bir workshop günü geçirmiş olduk.<br />
63
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Online eğitim kanalı olan Udemy <strong>UX</strong> Alive katılımcılarına özel %75 indirim imkanı sundu.<br />
Ayrıca konferansın tüm konuşmaları udemy üzerinden ücretsiz!<br />
<strong>UX</strong> Alive Konferansı’na dair tüm haberleri ve gelişmeleri www.uxalive.com adresinden ayrıca<br />
facebook ve twitter sayfalarımızdan takip edebilirsiniz.<br />
#<strong>UX</strong>AliveTurkey<br />
64
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Tüm dünyadan <strong>UX</strong> alanına ilgi duyan insanları bir araya getirmek bizim için büyük bir<br />
mutluluktu. <strong>UX</strong> Alive’16 için şimdiden haritamız çeşitlenmeye başladı bile.<br />
Ayrıca geçen yıla ait ayrıntılı case sayfamıza buradan ulaşabilirsiniz.<br />
65
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Alive <strong>2015</strong> Sponsorları<br />
Maddi manevi bu konferansın gerçekleşmesini destekleyen tüm sponsorlarımıza çok<br />
teşekkür ederiz.<br />
Kahramanlar Sahnede<br />
<strong>UX</strong> Alive Konferansı’nın gerçekleşmesinde belki de en büyük katkısı olanlar için<br />
sahneye çıkma vakti...<br />
66
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Alive 2016’da<br />
Bizi Neler Bekliyor?<br />
<strong>UX</strong> Alive Konferansı 11-12-13 Mayıs tarihleri arasında İstanbul Wyndham Grand<br />
Otel’de düzenlenecek.<br />
<strong>UX</strong> Alive Konferansı bu yıl 800’ün üzerinde katılımcıya ev sahipliği yapmaya<br />
hazırlanıyor. Ayrıca konferans geçen yılın iki katı alana yayılarak iki büyük salonda<br />
gerçekleşecek.<br />
67
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Workshplar Bu Yıl 2 Gün!<br />
Geçen yıl workshopların çok sevilmesi ve sizlerden gelen talep üzerine bu yıl workshopları<br />
2 gün olarak düzenliyoruz. Kullanıcı Deneyimi noktasında uzman isimlerin düzenleyeceği<br />
workshoplarla daha fazla deneyime dayalı bir konferans sizleri bekliyor olacak.<br />
Premium Workshoplar<br />
Bu yılın yeniliklerinden biri de premium workshoplar. Deneyimi bir tık yukarıya taşıyacak,<br />
spesifik konularda uzmanlarla bire bir öğrenme sürecine girebileceksiniz. Vitaly Friedman ve<br />
sürpriz isimler bu yıl premium workshop yapmak için <strong>UX</strong> Alive Konferansı’na gelecek.<br />
68
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Alive’16 Konferansı’nın<br />
Konuşmacıları Belli Olmaya Başladı.<br />
İşte konferansın belli olan ilk 9 konuşmacısı.<br />
Jenny Gove / Google<br />
Google’daki kariyerine <strong>UX</strong> Researcher olarak başlayan<br />
Jenny Gove, günümüzde Mobil Reklam Ürünlerinde <strong>UX</strong><br />
Lead görevini üstleniyor. Psikoloji backgrounduna sahip<br />
olan Gove, eğitici teknoloji üzerine doktorası var. Google<br />
bünyesinde Mobil Site Tasarım İlkeleri Raporu’nu yazan<br />
ekibin yöneticiliğini yapmıştır. Aynı zamanda kendisinin<br />
Mobil Deneyim odaklı pek çok yayını ve 2002’de aldığı bir<br />
patenti de bulunmaktadır.<br />
Gregg Bernstein / Mailchimp<br />
Gregg Bernstein designer geçmişinin yanısıra Georgia<br />
State Üniversitesi’nde ve Savannah College’da Grafik<br />
Tasarımı üzerine eğitmen olarak görev yapmıştır. Mailchimp<br />
kariyerine ise bundan 5 yıl önce <strong>UX</strong> Araştırmacısı olarak<br />
başlamış ve şu anki pozisyonu Araştırma biriminin<br />
yöneticiliğine hızla yükselmiştir. Kendisi Kullanıcı Deneyimi<br />
Araştırması üzerine pek çok yayının sahibi olmanın yanısıra<br />
aynı zamanda MailChimp’in 2014’te hazırladığı ebook olan<br />
The <strong>UX</strong> Reader'da görev almıştır.<br />
Vitaly Friedman / Smashing Magazine<br />
Front-end topluluğunun yakından tanıdığı konuşmacı,<br />
yazar ve Smashing Magazine’nin genel yayın yönetmeni<br />
Vitaly Friedman, konuşma yapmak ve ‘Premium Workshop’<br />
gerçekleştirmek için bir kez daha <strong>UX</strong>Alive Konferansı’na<br />
geliyor.<br />
Online ve ofline alanlar için kullanıcı deneyimi odaklı workshoplar<br />
düzenleyen Friedman, Smashing Conference’i bir<br />
marka yaparken, dünyada responsive design ve e-ticaret<br />
alanlarında aranan yüzler arasında gösterilmektedir.<br />
69
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Ronel Mor / DropRewiew<br />
Ronel Mor’un 1994 yılında İsrail’de kurduğu <strong>UX</strong> Danışmanlığı<br />
ve Tasarım firması olan Mantis, bölgenin lider firmaları<br />
arasında yer almaktadır. 2014 yılında Google’ın en iyi 100<br />
uygulamalarından biri olan samba.me'nin kurucu ortaklığını<br />
üstlenmiştir. Ronel Mor, kariyeri doğrultusunda bilgi<br />
mimarisi, <strong>UX</strong> Design, Komplex İnternet Ürünleri ve Hücresel<br />
Uygulamalar konusunda uzmanlaşmıştır. Endüstriyel tasarım<br />
ve görsel iletişim tasarımı eğitimine sahip Ronel, halen<br />
İsrail’de Bezalel Akademisi’nde İnteraktif Dizayn Bölümü’nün<br />
başkanlığını yapmakta ve 2012 kurduğu dijital pazarlamada<br />
kullanıcıya kolaylık sağlayan bulut DropReview'ın CEO<br />
görevini yapmaktadır.<br />
Paul Veugen / Human<br />
Girişimcilik kariyeri olan Paul Veugen 2009’da ilk şirketi<br />
Usabilla’yı kurmuştur. Siteler ve mobil uygulamalarda<br />
kullanıcıya geri bildirim yapma olanağı sağlayan araç<br />
Usabilla başarıya ulaştıktan sonra, Paul şirketi emin ellere<br />
bırakarak, Human.co 2012 yılında kurmuştur. Aynı zamanda<br />
üç yıldır startupların ortak hedeflerle birlikte çalışmalarına<br />
olanak sağlayan Rockstart’ın mentorlüğünü de yapmaktadır.<br />
David Peter Simon / World IA Day 2016<br />
Daha önce ThoughtWorks’da Senior Deneyim Danışmanı<br />
olarak görev yapan David Peter Simon, şu sıralar Oxford<br />
İnternet Enstitüsü’nde yüksek lisans araştırmasına devam<br />
etmektedir. Bunun yanısıra fotoğraf etnografçısı, yazar, etkili<br />
bir konuşmacı olan Simone,<strong>UX</strong>Booth, <strong>UX</strong>Mag, <strong>UX</strong>Matters<br />
gibi pek çok dergide yazılarına yer verilmiştir. David<br />
gerçekleştirdiği pek çok projeyle birlikte bu sene World<br />
IA Day 2016 etkinliğinin global yapımcılarından biri olma<br />
görevini de üstlenmiştir.<br />
70
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Adrian Zumbrunnen / <strong>UX</strong> Designer<br />
Adrian Zumbrunnen <strong>UX</strong> Mühendisi ve Designer olarak<br />
Google’da görev yapmaktadır. Zurich’te yaşayan Adrian,<br />
kendisini Kahve tutkunu, yazar ve konuşmacı olarak<br />
nitelendirmektedir. Yazılarını daha çok blogunda paylaşsa<br />
da Medium ve Smashing Magazine’de yayınlanmış pek çok<br />
yazısı da yer almaktadır.<br />
Ramy Nassar / TEDxWaterloo<br />
Toronto’da yaşayan Ramy Nassar, insan odaklı dizaynı<br />
inovasyonla buluşturmayı hedefleyen yazılım firması<br />
Architech'te İnovasyon Servis Departmanının Direktörü<br />
olarak görev yapıyor. Görevi kapsamında projelerin Servis<br />
Dizaynlarını ve Dizayn Stratejilerini belirlemekte ve şirket içi<br />
ekiplere liderlik etmektedir. Aynı zamanda 6 yıldır her sene<br />
gerçekleştirilen TEDxWaterloo'nun da kurucusu ve yönetici<br />
direktörlüğünü üstlenmektedir.<br />
Zoltan Kollin / Ustream<br />
Ustrem'deki Kullanıcı Deneyimi departmanını yöneten Zoltan<br />
Kollin, <strong>UX</strong> dünyasının genel algılarını yıkmayı hedefleyen,<br />
pek çok yayınlanmış araştırmayı da kanıt olarak okuyucuya<br />
sunan <strong>UX</strong> Myths bloğunun yazarlarından biri. Bununla birlikte<br />
kendisi web uygulamaları ve internet bağımlısı.<br />
71
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
72
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>2015</strong><br />
Trendler<br />
73
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>2015</strong><br />
UI Trendleri<br />
Oğuz Arıkan<br />
UI Designer/<strong>Userspots</strong><br />
Türkçe’de tam olarak ‘’akım’’ anlamına gelen Trend, moda, teknoloji ve tasarım başta olmak<br />
üzere birçok alanda kullanılır. Trend, yakın bir geçmişte ya da daha uzun bir süre diliminde<br />
toplumun belli bir kısmı tarafından benimsenen bir davranışı, hareketi ya da tutumu temsil<br />
eder.<br />
Trend Nasıl Oluşur?<br />
Kimi zaman bireylerin birbirini etkilemesi geniş bir kitleye dönüşür. Kimi zaman da, bir birey<br />
ya da bir kurum kitleleri tek başına etkileyebilecek ve yönlendirebilecek trendler yaratabilir.<br />
Bireylerin yaptığı tasarımların sosyal medya ve internet aracılığıyla kitleleri etkilemesi olduğu<br />
gibi, büyük oyuncuların da kitleleri etkilemesi söz konusu olabilir.<br />
2013 yılında ilk örneklerini görmeye başladığımız flat design, tasarım trendi olarak hızlıca<br />
yayıldı ve Microsoft Metro UI iOS 7 ile geniş kitlelere ulaştı. Belki de birçok trend gibi<br />
varolana, yani Skeumorphism’e tepki olarak ortaya çıktı.<br />
74
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kim Kimi Etkiler?<br />
2013 yılında ilk örneklerini<br />
görmeye başladığımız flat design,<br />
tasarım trendi olarak hızlıca<br />
yayıldı ve Microsoft Metro UI iOS 7<br />
ile geniş kitlelere ulaştı.<br />
Flat Design da birçok akımda<br />
olduğu gibi mevcut olan akıma,<br />
yani Skeumorphism’e tepki olarak<br />
ortaya çıktığını söyleyebiliriz.<br />
Joseph Machalani 2014 yılında iOS 7 için<br />
yaptığı bir çalışmayla geniş kitlelerin dikkatini<br />
çekmeyi başardı.<br />
Seçtiğiniz uygulama kısayolunu pinch<br />
hareketiyle büyütebilmenizi ve uygulama<br />
içine girmeden bilgi ve aksiyon alabilmenizi<br />
sağlıyor.<br />
75
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Flat Design<br />
Sessiz harflerin çoğunluğu yüzünden adını telaffuz etmekte çok zorlandığımız<br />
Skeumorphism’e bir isyan olarak doğan flat design, 2012 sonrası ilk örneklerini gördüğümüz<br />
ve Microsoft Metro UI ve Apple’ın iOS 7 güncellemesiyle tüm dünyanın kendisinden haberdar<br />
olduğu bir trend oldu.<br />
Tasarım dünyasında uzunca bir süre yerini koruyacak olan flat design, zaman içinde<br />
evrimleşerek semi-flat ya da flat 2.0 gibi S trendlerle etkisini sürdürüyor.<br />
76
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Flat Tasarımın Faydaları Neler Oldu?<br />
Tüm tasarımcıları daha basit düşünmeye zorladı.<br />
Sayfaların yüklenme hızlarını arttırdı.<br />
Responsive design ve modern framework ile günün ihtiyaçlarına uyumluluk gösterdi.<br />
Kullanıcılar için öğrenmesi ve gezinmesi çok daha kolay ve göz yormayan bir tasarım<br />
sağlanmış oldu.<br />
Semi-Flat Ya da Flat 2.0 Nedir?<br />
Flat tasarımın ilk örnekleri tam anlamıyla tek yüzeye sahipti ve hiçbir boyut algısı yoktu.<br />
Flat 2.0 ya da semi-flat ise, bazı elementleri gözle daha rahat algılanır yapan ve sadece<br />
gölgelerle size ipuçları veren bir trend olarak karşımıza çıkıyor.<br />
77
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Material<br />
Design<br />
Google’ın geçtiğimiz sene duyurduğu Material Design , tam olarak semi-flat diyebileceğimiz<br />
bir tasarım rehberi olarak karşımıza çıktı.<br />
Kağıdın kendisini bir metafor olarak ele alan ve kullanıcıların ana aksiyonlarına vurgun yapan,<br />
teknolojinin gücüyle birlikte animasyonu doğru şekilde yönlendirebilmek için kullanan bir<br />
tasarım rehberi diyebiliriz.<br />
Material design için, flat tasarımla birlikte ‘Z’ eksenini kullanarak oluşturduğu katmanlarla<br />
kullanıcıya ipuçları vermeye çalışan bir rehber olarak özetleyebiliriz.<br />
Tasarım Yaparken Nelere Dikkat Etmeli?<br />
Renk paletini olabildiğince sınırlı tutmaya çalışın ve gerekmedikçe renk eklemeyin.<br />
Flat tasarımlarınızı ikon ve fotoğraflarınızla hareketlendirmeyi unutmayın.<br />
Renk seçimlerinizde, renklerin anlamlarını ve sıcak, soğuk ilişkilerine dikkat edin.<br />
Popüleretesi yüzünden yaşanabilecek benzer çözümlere dikkat edin.<br />
78
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Square<br />
Sanal pos yazılımı sağlayan Square, arayüzünde flat tasarım öğelerini<br />
kullanıyor.<br />
Mavi’nin doygunluğu daha düşük olan flat diyebileceğimiz baskın renk seçimi,<br />
tek renkli ve çerçeveli ikonları, doku, degrade gibi öğeleri barındırmayan sade<br />
arayüzüyle başarılı flat design örneklerinden biri.<br />
79
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Treehouse<br />
Hero bannerında kullandığı tek renk arka plan ve pastel tonların kullanıldığı<br />
illustrasyonlarını beyaz zemin üzerine yerleştiren Treehouse, online eğitim<br />
platformları arasında flat tasarım örneklerinden biri.<br />
80
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Uber<br />
Geçtiğimiz sene Türkiye’de de faaliyetlerine başlayan Uber, hero alanında kullandığı tam sayfa<br />
fotoğrafı üzerine serifsiz yazı tipleriyle verdiği mesajı ve tek renk butonuyla ilk anda tasarımı<br />
hakkında yeterince fikir veriyor.<br />
Uygulamasından ekranlar koyarak yerleştirdiği faydaları incelediğimizde de, uygulamanın da<br />
aynı şekilde flat tasarıma sahip olduğunu görüyoruz.<br />
Siyah, beyaz ve mavi ile sınırlı tuttuğu renk paleti ve ekran içinde yer alan tek bir içerik<br />
konseptiyle Uber’de başarılı örneklerden biri.<br />
81
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Yüksek Çözünürlüklü<br />
Arka Planlar<br />
Bu yılın tasarım trendleri arasında geniş ve etkileyici arka plan görselleri veya videoları yer<br />
alıyor. Geçen yıldan bu yana etkisini kaybetmeyen bu trend, web sitenizi ön plana çıkartmanın<br />
en kolay yollarından bir tanesi olabiliyor. Bu tasarım trendinin iyi uygulanması ise kaliteli içerik<br />
ve doğru yönlendirme ile mümkün olabiliyor.<br />
Web sitesi uygulamalarınızda bu tarzda bir giriş yapacaksanız mutlaka, tipografiyi ön plana<br />
çıkartmalısınız.<br />
82
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
NEF<br />
<strong>Userspots</strong> olarak Kullanıcı Deneyimi Araştırmalarını ve Kullanıcı Arayüzü tasarımlarını<br />
yaptığımız nef.com.tr için büyük görsel kullanımı ile minimalistik bir tasarım gerçekleştirmiş<br />
olduk.<br />
83
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kuveyt Türk/ Seninbankan<br />
<strong>Userspots</strong> olarak Kullanıcı Arayüzünü tasarladığımız seninbankan.com.tr için, Ana Sayfa’da<br />
büyük görsel kullanımı ve tipografiyi ön plana çıkarmaya çalıştık.<br />
84
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Slack<br />
Yüksek çözünürlüklü arkaplan örneklerinden bir diğeri ise, takım içi iletişim ve<br />
paylaşım tool’u Slack. Slack her ziyaretinizde gösterdiği farklı fotoğraflar ile,<br />
Nasa dahil olmak üzere geniş bir yelpazede birçok ekibin Slack kullandığını<br />
öne çıkartıyor. Nasa’nın bile kullandığı bir tool’u siz nasıl kullanmazsınız?<br />
85
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Minimalism<br />
Mimari ve resim gibi diğer sanat disiplinlerinden de aşina olduğumuz bir yaklaşım olan<br />
minimalism, modern web ve uygulama örneklerinde de güçlü bir şekilde karşımıza çıkıyor.<br />
‘Less is More’ mottosuyla konuşma dilimize de yerleşen minimalism, negatif alan yaklaşımı,<br />
sınırlı renk paleti ve sade fontlarıyla zamansız bir trend oluyor.<br />
86
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Mailchimp<br />
E-mail marketing denince sektörün lider konumunda olan mailchimp,<br />
konu sadelik olunca akla gelen ilk örneklerden birisi oluyor.<br />
‘Send Better Email’ mottosu ve panelinden bir ekranla kullanıcılarını karşılayan Mailchimp,<br />
az şey ile çok şey söylüyor. Sadelik temalı sosyal medya çekimlerinde de görmeye alışkın<br />
olduğumuz gündelik hayat objeleriyle yarattığı arkaplanıyla, MailChimp çok temiz bir<br />
tasarıma imza atıyor.<br />
Ana sayfasıyla birlikte alt sayfaları ve paneli ile sadelik temasını sürdüren mailchimp, arayüz<br />
içine yerleştirdiği kolay anlaşılır ve espirili metaforlarıyla da minimalism örnekleri arasında üst<br />
sıralara yerleşiyor.,<br />
87
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Simple<br />
Bir bankacılık uygulaması olan Simple, aslında adıyla da hem kullanıcılarına<br />
yaşatmak istediği deneyimi hem de tasarım konseptini özetlemiş oluyor.<br />
Sınırlı renk paleti, font seçimi ve sadece çerçeve rengine sahip basit ikonlarıyla<br />
minimalism konseptini başarıyla sürdüren Simple, ana sayfasında beyaz<br />
alan ağırlıklı paneline de yer vermeyi ihmal etmiyor.<br />
88
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
UI Kartları<br />
Tüm trendleri incelediğimizde estetik yanlarının yanında teknik gelişmelerin de bu trendlerin<br />
oluşmasında rol oynadığını söyleyebiliriz. Cihaz çözünürlüklerinin artışı ve html5 teknolojisi<br />
görsel ve video kullanımlarını teşvik ederken, flat ve minimalism akımları yükleme sürelerini<br />
hızlandırıp, cihazlar arası responsive tasarımlara da mükemmel bir uyumluluk gösterdi.<br />
Kart tabanlı tasarımlar, tam da mobil cihaz kullanımın ve buna bağlı olarak responsive tasarım<br />
ihtiyacının arttığı bir dönemde trend olan layout çözümlerinden biri oldu.<br />
Kartları biraz tanımlamak gerekirse; data, imaj, button link comment gib iş alanınıza göre<br />
değişkenlik gösterebilecek başlıkları içeren dikdörtgen alanlardır.<br />
Bilginin kartlar halinde gösterilmesi, daha temiz ve rahat taranabilir arayüzler oluşmasına<br />
yardımcı olmaktadır.<br />
Kartlar aynı zamanda farklı etkileşim örnekleriyle de kullanıcılar için pratik çözümler<br />
üretmenize imkan veriyor.<br />
89
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Koçtaş<br />
<strong>Userspots</strong> olarak arayüz tasarımını yaptığımız, koctas.com.tr’de UI Kart örnekleri arasında<br />
gösterilebilir.<br />
90
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Dribbble<br />
Tasarımcıların yakından takip ettiği dribbble’da yine UI Kart tasarımının etkili kullanıldığı bir<br />
web sitesi olarak karşımıza çıkıyor.<br />
Nelere Dikkat Etmeli?<br />
Gösterilecek bilgilerin öncelliklendirilmesi ve kart alanı içinde doğru bilgilerin verilmesi.<br />
Kartların basit tutulması<br />
Kartların çok yüksek olmadığını düşünürsek, iyi görseller ile büyük etki bırakmayı önemseyin.<br />
Doğru etkileşimlerin tasarlanması ile diğer kart örnekleri arasında sıyrılmaya çalışın. Tüm kartı<br />
tıklanabilir kılın.<br />
Marjin ve paddingler ile görsel olarak bütünlüğün ve tarama rahatlığının sağlanmasına dikkat<br />
edilmeli.<br />
91
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
İkon ve İllustrasyon Kullanımı<br />
Bir web sitesinin genelinde ürüne ait bilgilerin ve nasıl çalışır sorularına cevaben<br />
hazırladığı akışlarını anlatırken illustration tercih edilmesi durumudur.<br />
Nelere Dikkat Etmeli?<br />
Doğru stil ve çözümlerle başarılı sonuçlar getirirken, eğer yeteri kadar açıklayıcı ve basit<br />
olamazsa kötü sonuçlar doğurabilir.<br />
Diğer çözümlere göre nispeten daha çok zaman ve işgücü ister. Dolayısıyla böyle bir<br />
çalışmaya başlamadan önce proje takviminizin buna hazır olması gerekir.<br />
Oluşturulan illustrasyon ve ikon dilini tüm site ve iletişim kanallarında devam ettirebilmek<br />
önemlidir. Eğer böyle bir sorumluluğun altına giremeyeceksiniz hiç başlamayın.<br />
Oluşturulma hızına bağlı olarak ölçüme işlemi çok kolay olmayabilir.<br />
92
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Zopim<br />
E-ticaret başta olmak üzere birçok sitede kullanılan canlı chat eklentisi Zopim de, beyaz<br />
alanı iyi kullanan, ekran içinde tek bir anlatının olduğu sade tasarımını yine aynı basitlikteki<br />
illustrasyonlarıyla zenginleştiriyor.<br />
Hero alanında renk paletini baskın olarak kullandığı basit şekiller ve çerçeve renkleriyle<br />
belirginleştirdiği illustrasyonu yer alırken, faydalarını anlatırken tek renk kullanmayı tercih<br />
ediyor.<br />
93
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
PayU<br />
Bu sene içinde yeni tasarımına kavuşan, e-ticaret siteleri için ödeme altyapısı sağlayan Payu,<br />
site genelinde ürünlerini, nasıl çalışır sorularına cevaben hazırladığı akışlarını anlatırken<br />
illüstrasyon tercih eden web sitesi olarak karşımıza çıkıyor.<br />
Ana rengi olan yeşile uyumlu renk paleti, ve basit çizgilerle oluşturulan illustrasyonlar arayüze<br />
zenginlik katıyor. Aynı dilin ve şemaların tekrar eden kullanımları da öğrenme sürecini<br />
hızlandırmayı hedefliyor.<br />
94
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Tasarımlarını gerçekleştirdiğimiz<br />
Bonus Flaş Uygulaması<br />
500.000 +<br />
indirilme sayısına ulaştı.<br />
95
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Mobil<br />
Optimizasyon<br />
Pınar Pelit<br />
Optimizasyon P.M/ <strong>Userspots</strong><br />
Mobil dünyanın önlenemez yükselişi!<br />
Amerika’da 2014’ün birinci çeyreğinde internet kullanımının %55’nin mobilden gerçekleşmiş<br />
olması ile masaüstü web girişlerini geride bıraktığını söyleyebiliriz. Ülkemizde ise ilk kez<br />
yakın tarihte bir e- ticaret sitesinin mobil cirosu, web cirosunu geçmesiyle mobil kullanımının<br />
ülkemizde de ne kadar etkili olduğunu görüyoruz.<br />
Not: Türkiye’de bu olay, mobil “push notification” kampanyalarının tavan yaptığı bir hafta sonu<br />
gerçekleşti.<br />
Bu demek oluyor ki; cross-platform (platformlar arası) optimizasyon hiç olmadığı kadar<br />
hayatımızda yer alacak. O halde Mobil Optimizasyon için bilmeniz gereken birkaç temel<br />
metriğe hızlıca göz atalım<br />
96
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Günlük Aktif Kullanıcı (Daily Active Users - DAU)<br />
DAU uygulamanızın çekiciliği ve kullanıcılarınızın müşteri ömrü değerini (Lifetime Value) ifade<br />
eder. Kullanıcıların mobil uygulamada durma ve etkileşime geçme seviyelerini ölçer. <strong>UX</strong>’de<br />
yapacağınız her değişiklik DAU’yu direkt olarak etkiler.<br />
İndirilme Sayısı<br />
Çoğu kişi tarafından bilinen bir metrik olan ve bir mobil uygulamanın başarısında en önemli<br />
belirleyici olarak görülen uygulamayı indirme maliyetleri, kullanıcı ömrünün değerinden daha<br />
aşağıda kalıyor.<br />
Kaydolma<br />
İndirilme sayısı ile birlikte funnel’ın en üstünde yer alıyor, kaydolma akışının mümkün<br />
olduğunca basitleştirilmesi gerekmektedir.<br />
Retention<br />
Kullanıcıların uygulamayı indirdikten sonra tekrar ziyaret etme oranıdır. DAU/ indirilme sayısı<br />
da diyebiliriz.<br />
Uygulama içi Satın Almalar (In-App Purchases - IAPs)<br />
Doğrudan gelir kaynağıdır ve direkt olarak ölçümlenebilir. Fiyatlandırma modelleri üzerinde<br />
yapılacak olan testler doğrudan kar oranını arttırmaya yönelik olacaktır.<br />
Ortalama Puan & Yorumlar<br />
Kullanıcı ömrü değerinin sayısal karşılığı diyebiliriz. Farklı zamanlarda kullanıcılarınızdan<br />
yorum istemeyi test edebilir ve ortalama puanları ölçümleyebilirsiniz.<br />
Tıklamalar<br />
CTA butonu, formları ya da reklamları olan uygulamalar için etkileşim hatta direkt gelir<br />
kaynağı olarak bile belirlenebilir. Bir içeriği belirginleştirmek, form yapısını değiştirmek, CTA<br />
metin, renk ve şeklini değiştirmek, reklam alanlarında değişiklikler yapmak gibi testler direkt<br />
olarak geliri etkileyecektir.<br />
Mobil deneyimlerde kullanıcıların birbirinden oldukça farklı davranışları olabilir. Uygulamanızı<br />
sürekli test ederek, bu metriklerde artış sağlayabilirsiniz. Bu noktada hemen hangi alanların<br />
test edilebileceği ile ilgili soru işaretleri oluşuyor. İşte en başarılı örnekler:<br />
Birincil CTA’a odaklanın:<br />
Konu mobile geldiğinde az her zaman daha iyidir. Dar bir alanda kullanıcıları yönlendirmenin<br />
en iyi yolu; basit, net bir CTA göstermektir.<br />
97
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kullanıcı deneyiminin basitleştirilmesi, kullanıcıların birincil görevlerini anlamalarını,<br />
benimsemelerini ve sadakatle ona uygun olarak davranmalarını kolaylaştırır.<br />
• Navigasyonu, arama kutusunu, banner alanını kaldırın.<br />
• Bu alanların çok fonksiyonel olduğunu düşünebilirsiniz ancak dikkat dağıtıcı.<br />
CTA’nı sabit bir element olarak alın: Böylece en önemli özelliğin sürekli ekranda kalmasını<br />
sağlayın.<br />
Eventbrite etkinlik akışında, kullanıcıların<br />
arkadaşlarının katıldığı etkinlikleri<br />
bulmasını sağlayan ve “social proof”<br />
niteliğinde olan uygulama sabit bir<br />
“Facebook ile giriş yap” CTA sunuyor.<br />
Eventbrite, sosyal olarak aktif ve<br />
etkinliklere arkadaşlarıyla birlikte<br />
katılmayı seven kullanıcılar için çok<br />
değerli. Dolayısıyla CTA’yi sayfayı<br />
aşağı kaydırma sırasında sabit tutmak<br />
kullanıcıları harekete geçirebilir.<br />
Lyft’in üst başlıkta sabit duran 2 farklı<br />
butonu var; Menü, sürücü ekranı. Ancak<br />
Lyft; referans olduğunuz her arkadaşınız<br />
için 25$’lık bir promosyon veriyor. Bu<br />
özellik menünün içinde gizli ve birçok<br />
kullanıcı bu özelliği farkedemiyor. Lyft’in<br />
birincil başarı metriği uygulamanın<br />
kullanılması ve paylaşılmasını sağlamak<br />
olduğu için sağ üstteki butonu 25$’lık<br />
promosyon kodu CTA’i ile değiştirebilirler.<br />
98
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Kısa / Uzun Ekran<br />
Uzun uzun aşağı inebileceğiniz (Scroll) sayfalar mobil web ve uygulamalarda bir standart<br />
halini aldı. Ancak, bu durum her hedef için aynı oranda optimal olmayabilir. Kullanıcılar 2 ana<br />
sebepten uzun sayfalara adapte oldular. Küçük bir ekranda butona tıklamak zordur ancak<br />
scroll yapmak kullanıcının alabileceği en kolay aksiyondur.<br />
Yeni bir sayfanın yüklenmesini beklemek zorunda kalmadıkları için kullanıcılar rahat bir<br />
şekilde scroll yapabilirler. Örneğin; Hotel Tonight & Airbnb benzer kullanıcıları hedefleseler de<br />
listeleme şekillerinin oldukça farklı olduğunu görüyoruz.<br />
Hotel Tonight, sayfada tek bir otel<br />
gösteriyor ve harita dahil tüm özellikleri<br />
gösteriyor.<br />
Airbnb ise aynı sayfada sonsuz bir scroll’a<br />
izin veriyor ve otel ile ilgili yalnızca en<br />
ilgi çekici özelliklere yer veriyor.<br />
99
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Ürün Keşfi<br />
E-ticaret sitelerinde iki önemli hedef vardır, ürün keşfi ve satın alma. Eğer ürün keşfi süreciniz<br />
çok uzun ve yavaş ise satın alma sürecinde kopmalar meydana gelebilir. Satın almalar<br />
doğrudan ürün keşfine bağlı olduğu için ürün keşfi sürecini kısaltmayı test edebilirsiniz.<br />
Kullanıcılarınızın tıklama yapmadan bir ürünün farklı görsellerini görmesini sağlayabilirsiniz.<br />
Örnek: Zara ve Gilt<br />
Zara, kategori düzeyinde oldukça güzel<br />
bir listeleme düzeni sunuyor, ancak<br />
diğer görselleri görüntülemek için<br />
kullanıcıların tıklama yapması gerekiyor.<br />
Gilt ise image slider özelliğini kullanarak<br />
çok daha fazla keşfetme fonksiyonalitesi<br />
sağlıyor. Ancak bu özelliğin ilk bakışta<br />
farkedilmesi mümkün değil. Ürün<br />
görsellerinin yanına kullanıcıya daha<br />
fazla ürün görseli olduğunu anlatacak<br />
oklar yerleştirilebilir ve kullanılabilirlikleri<br />
test edilebilir.<br />
100
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Üye Olma Aşaması<br />
Bir uygulamanın içeriğine ulaşılabilmesi için üye girişi zorunluluğu kullanıcı için bir engel<br />
oluşturabilir. Kullanıcıların giriş yapması için optimum zamanı bulmalısınız. Doldurulması<br />
gereken alanlarla dolu bir form görünümü; bazı alanların doldurulması opsiyonel olsa bile<br />
uygulamanızın benimsenmesi ve kullanıcının kullanmaya devam etmesinin önündeki engeldir.<br />
Kişisel bilgilerini paylaşmadan önce kullanıcıların uygulamanızı keşfetmesine izin vermeniz<br />
kullanıcıların uygulamanızın fonksiyonlarını öğrenmesini sağlayacak ve kullanıcı etkileşimini<br />
(engagement) arttıracaktır.<br />
Örnek;<br />
Vine ve Vimeo video paylaşımı için hazırlanmış 2 farklı platform örneği, her ikisi de yeni<br />
kullanıcılar ile harika özellikleri arasında giriş bariyerini ekliyorlar. Her iki uygulamanın da<br />
kullanıcılarından kişisel bilgiler istemeden önce kullanıcılarına bir test sürüşü yaşatması<br />
gerekir. Bundan sonra üyelik oluştuma oranlarını ölçümleyebilirler.<br />
101
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Mixbit ve Youtube da benzer bir kullanıcı kitlesini hedefliyorlar ancak kullanıcılarına<br />
uygulamayı keşfetmeleri için giriş yapma engeli koymuyorlar. Ek olarak MixBit yeni<br />
kullanıcılara bir carousel yardımıyla kısa bir oryantasyon sunarak hızlı bir keşif imkanı sunuyor.<br />
Youtube ise kullanıcılarını “What to Watch” mesajı ile karşılıyor ve ziyaretçilerinin dilediklerini<br />
yapmasına izin veriyor.<br />
102
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>2015</strong> <strong>UX</strong><br />
Trendleri<br />
Mustafa Dalcı<br />
Tasarım, <strong>UX</strong> ve yenilikçi ürünler anlamında<br />
<strong>2015</strong>’i parlak olmayan bir yıl olarak<br />
değerlendirebiliriz. Mobil web’in önlenemez<br />
yükselişi mobil uygulamalar için “aslında o<br />
kadar da gerekli mi?” sorusunu karşımıza<br />
getiriyor. Bu yıl hala yeni şarj edilecek aletten<br />
öteye gidemeyen giyilebilir ürünleri ciddi<br />
anlamda sorgulamaya başladık.<br />
<strong>UX</strong> süreçlerinin artık norm haline gelmesi,<br />
bir adım ötesinde microinteraction’ları<br />
tasarlamak için uğraşmaya başlamamız<br />
tasarım anlamında daha iyi bir noktada<br />
olduğumuzun göstergesi. A/B testleri,<br />
kişiselleştirme ve pazarlama otomasyonu ile<br />
artık web’i kodlama bilmeden programlamak<br />
da “süreçleri optimize etmeye verdiğimiz<br />
değeri” gösteriyor.<br />
<strong>2015</strong>’e bir bakış atarken 2016’yı da<br />
etkileyeceğini düşündüğümüz önemli<br />
noktalar şöyle:<br />
Mobil Web ve Click to Call<br />
Mobil cihazlarda uygulama kullanım<br />
oranlarının %80’leri bulması aslında kullanım<br />
hakkında yeterli bir bilgi sunmuyor. Oyun<br />
oynamak ve sosyal ağlarda vakit geçirmek<br />
uygulama dünyasında yaptığımız temel<br />
hareketler. Geri kalan her şey için tarayıcıları<br />
kullanıyoruz. Bu karşılaştırmanın benzer<br />
bir versiyonunu masaüstü dünyasında<br />
yaşamıştık aslında. Şu an oyunlar dışında çok<br />
az uygulama yüklüyoruz, geri kalan bütün<br />
ihtiyaçlarımızı tarayıcı ile web’de karşılıyoruz.<br />
Benzer bir değişimin mobil dünyası için de<br />
geçerli olacağını tahmin etmek güç değil.<br />
Bu noktada mobil web’in trafikteki<br />
önlenemez yükselişi nedeniyle en fazla<br />
sorguladığımız alan olan mobil web’de<br />
uygulamaların aksine kullanıcılar bilgi girişi<br />
vs. konusunda rahat değiller. Bu rahatsızlık<br />
da mobil web’de dönüşüm oranlarının düşük<br />
olması ile karşımıza çıkıyor. O noktada<br />
kullanıcıya bir kanca atıp sıcak lead’i bir<br />
satışa dönüştürmek için bu yıl daha fazla<br />
kullanacağımız bir aracımız var: Click to Call<br />
Click to call ile mobil web’de kullanıcıların<br />
bilgi girmek yerine bizi kolayca aramalarını<br />
sağlamak ve karşısına agent çıkmadan<br />
otomatik süreçlerle işlemini tamamlamak<br />
bu yıl üzerine yatırım yapacağımız konuların<br />
başında.<br />
103
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Şarj Edilecek Bir Cihaz Daha:<br />
Wearable<br />
Çok şık duran ama kullanım senaryoları<br />
konusunda hala net olamadığımız ve<br />
faydasını göremediğimiz cihazlar olan<br />
giyilebilir ürünleri ciddi anlamda sorgulamaya<br />
başladık. Belki de her cihazımızın o kadar<br />
da akıllı olmasına gerek duymuyoruz<br />
veya bize şarj edilecek yeni bir cihaz<br />
külfetini karşılayacak bir faydayla daha<br />
karşılaşamadık. Bu yıl bu faydayı aramaya<br />
devam edeceğiz.<br />
Web’i/Mobil’i Programla<br />
Microinteraction<br />
<strong>UX</strong> süreçlerinin birer norm haline gelmesi<br />
ve artık bir şekilde çalışan ürünleri herkesin<br />
yapabiliyor oluşu, tasarımcıları ve ürün<br />
sahiplerini microinteraction’ları tasarlamak<br />
için daha fazla kafa yormaya itti. Boş sepet<br />
tasarımı, login süreçlerinde basit ve akıllı<br />
hareketler ile kullanıcıyı yormadan süreçlerini<br />
tamamlamaya çalışmak gibi mikro etkileşim<br />
alanlarına odaklanıyoruz. Artık neredeyse<br />
bütün ürünler belirli bir <strong>UX</strong> bilgisi ile hayata<br />
geçiyor, farkı yaratacak bu tarz ufak etkileşim<br />
noktaları.<br />
Pazarlama ekiplerinin IT’ye bağlı kalmadan<br />
ürünlerinde istedikleri değişiklikleri<br />
yapabilmeleri, “If this then that” gibi<br />
kullanıcının hareketine göre değişebilecek<br />
kurguları yapabilmelerini sağlamak kullanıcı<br />
deneyimi adına da önemli. Müşterinin satın<br />
alma yolculuğuna biz bir geliştirme ile<br />
cevap vermeye çalışırken müşterilerin o<br />
alışkanlıktan vazgeçtiklerini görebiliyorduk.<br />
Ürün geliştirme dünyasındaki hıza şu<br />
an için ayak uyduramıyoruz. Web’i<br />
programlayacak araçlar ile bu konuda bir<br />
geliştirme yapmadan çözüm sunmak ve<br />
ürünleri optimize etmeye çalışmak bu yıl<br />
daha fazla yatırım yapacağımız bir alan<br />
olacak. Google’ın da bu alanda mevcut basit<br />
ürünlerinin ötesinde yeni bir ürün veya satın<br />
alma ile daha güçlü bulunacağını gösteren<br />
güçlü işaretler bulunuyor.<br />
104
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>2015</strong>’in Öne Çıkan<br />
IoT Cihazları<br />
Naz Bekpınar<br />
Pazarlama/<strong>Userspots</strong><br />
Google<br />
Nest Camera<br />
Web bağlantılı Akıllı güvenlik kamerası olan Nest Cam ile bizi Google<br />
tanıştırdı. Kullanıcının evin istenilen herhangi bir bölgesini yakından görmek<br />
için zoom imkanı tanıyan, aynı zamanda hareket sensörüyle eve birisi<br />
girdiğinde, bebek uyandığında ya da evcil hayvanın hareketleri gözlenmek<br />
istendiğinde kullanıcının telefonuna direk bildirim gelmesi gibi özelliklere<br />
sahip Google Nest kamera aynı zamanda telefondan sesli bildirim sağlamak<br />
için de kullanılan bir cihaz.<br />
105
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Samsung<br />
SmartThings<br />
Samsung SmartThings Ev görüntüleme kiti pek çok farklı amaçla kullanılabilir.<br />
Kitin içinde yer alan hareket sensörlerini pencerelere ya da kapıya<br />
yerleştirerek, herhangi biri evde olan güvenlik tehdidi karşısında kullanıcı akıllı<br />
telefonuna gelen bildirimle bu durumu öğrenebilinir, kullanıcı evde olmadığı<br />
durumlarda kapının kilidini açıp, kapatabilir. Bunlara ek olarak evin ışık ve<br />
enerji birimlerinin kontrolüne yardımcı olduğundan enerji tasarrufunu sağlıyor<br />
ve kullanıcının internet üzerinden çeşitli müzik sitelerine ulaşarak istediği<br />
müzik dinlemesine olanak sağlıyor, yine kullanıcı uyandığı anda kahvesinin<br />
hazır olmasını sağlıyor.<br />
106
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Dell Edge<br />
Gateway 5000<br />
Dell Edge Gateway 5000 farklı sensör ve ekipmandan gelen bilgilerin toplanıp,<br />
depoladıktan sonra başka yere aktarılmasını sağlıyor. Intel Atom<br />
işlemcisi ise yerel analitik kapasite sağlıyor. Böylelikle anlamlı bilginin<br />
bir sonraki noktaya, yani gateway’e, data center’a ya da buluta ulaşması<br />
gerçekleşiyor. Bunun sonucunda da cihaz pahalı band genişliği kullanımının<br />
ve genel çözüm gecikmesinin minimize edilmesinin sağlıyor.<br />
107
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Dell Edge<br />
Gateway 5000<br />
Philips Hue, normal led lambalara göre kullanıcıya daha farklı bir ışık<br />
deneyimi sunuyor. Günlük yaşamınızın ayrılmaz bir parçası olabilir. Alarmlar,<br />
zamanlayıcılar, uyarılar… Tümü, yönettiğiniz hayata uygun hale getirilmiş. Hue<br />
ile evinizin içerisinde veya iş yerinizde bir takım uyarıları ışık ile alabilirsiniz.<br />
Kendinize göre özelleştirebilirsiniz. Wi-fi ile bağlantı sağlayan Hue, her rengi<br />
kullanıcının deneyimine sunuyor. Hatta Hue’yu IFTTT hizmeti üzerinden veri<br />
beslemeleri ile bile bağlayabilirsiniz. Böylece ışıklarınız size önemli bir e-posta<br />
aldığınızı söyleyebilir.<br />
108
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Parrot<br />
Pot<br />
Parrot Pot, bitkilere gerektiği kadar suyu sıcaklık ve neme göre ayarlayıp<br />
doğru miktarda verebilme özelliğine sahip. 2 litreye kadar suyu bünyesinde<br />
bulundurabilen saksı aynı zamanda indirilen uygulamayla kontrol edilebiliyor.<br />
109
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Roost<br />
Akıllı Batarya<br />
Roost’un Akıllı Bataryası kullanıcıya hiç bir cihazını değiştirmeden akıllı<br />
teknolojiyi evlerine getirme olanağı sunuyor. 9-voltluk Roost bataryası<br />
evlerde bulunan neredeyse tüm duman ve CO detektörleri ile uyumlu. Ürünü<br />
evindeki cihazlara yerleştiren kullanıcı, detektörlerini akıllı telefona indirilen<br />
uygulama ile kontrol etme imkanı bulabiliyor. Bunun yanısıra batarya ile<br />
çalışan alarmlar kapatılabiliyor ya da hangi alarmın ses çıkarıp hangisinin<br />
sesinin durduğu gözlemlenebiliyor.<br />
110
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
2016 Mobil’de<br />
2. Round<br />
Gökhan Besen<br />
Head of Products/hepsiburada.com<br />
Mobil uygulama ve mobil siteler bir süredir hayatımızdaydı. Türünün ilk örneklerini m. subdomianlerinde<br />
görmeye başladığımız mobil siteler 2016’da ciddi bir sınavdan geçecek.<br />
Bunun temel sebebi <strong>2015</strong>’ten itibaren webin büyümesinin tamamının mobilden gelmeye<br />
başladığını görmeye başlamamız diyebilirim. Mobilde bu sene trafik bakımından %80’ler,<br />
ciro bakımından %50’leri gören internet şirketleri, 2016’da mobil trafiğin %75 büyüyeceği<br />
düşünüldüğünde ciddi bir hayatta kalma savaşı verecekler. Eğer <strong>2015</strong>’te responsive ve tek<br />
url yapısına geçtiyseniz işiniz nispeten kolay fakat konu bununla sınırlı değil, çünkü bir de<br />
uygulama dünyası var.<br />
Elmanın iki yarısı mobil uygulama ve<br />
mobil web<br />
Trafikte büyüme mobil webden geldikçe<br />
düşen dönüşüm oranları beraberinde<br />
bir kaygıyı da getirdi. Sonuçta mobil<br />
uygulamalar daha yüksek dönüşüm oranına<br />
sahipti ve herkes uygulama kullanmalıydı.<br />
Bu noktada birkaç şeyi açıklığa kavuşturmak<br />
gerekir;<br />
1- Mobil site ile uygulama müşteri<br />
yolculuğunun farklı noktalarına dokunur;<br />
Bir ürünü merak ettiğinizde cep<br />
telefonunuzdan bir google araması yapıp<br />
sırasıyla sonuçları ziyaret edersiniz.<br />
E-ticarette en önemli faktör olan fiyatı<br />
kontrol edip ürünle ilgili bilgi ve yorumları<br />
alıp oradan ayrılırsınız. Bu size bounce rate<br />
olarak döner, dönüşüm oranını dibe çeken<br />
bir sorundur ama bilinmesi gereken şu<br />
ki o noktada satın alma düşüncesi zaten<br />
oluşmamıştır. Yani mobil siteler araştırma<br />
ağırlıklı kullanılmaktadır. Eğer teklifiniz<br />
rakiplerinizden iyiyse bu sizin masaüstü<br />
sitenize doğrudan trafikle gelen bir satış<br />
olarak yansıyacaktır.<br />
2- Mobil site kullanıcısıyla mobil uygulama<br />
kullanıcısı farklı kitlelerdir<br />
Bir e-ticaret uygulamasını indirdiğinizde<br />
muhtemelen o şirketten daha önce bir<br />
alışveriş yaptığınız veya sipariş takibi<br />
yapmak istediğiniz için indirirsiniz. Elbette<br />
kampanyalar da burada oldukça etkilidir<br />
fakat bu sizi mobil web sitesi kullanıcısından<br />
ayıran bir durumdur ve sizin durumunuzdaki<br />
kullanıcılarla mobil web sitesini kullanan ve<br />
araştırma yapan kullanıcıların satın alma<br />
eğilimleri aynı değildir.<br />
3- Mobil sitenin trafik yapısı ile mobil<br />
uygulamanınki tamamen farklıdır<br />
Cep telefonlarımızda bir ayda ortalama 27<br />
uygulama kullanıyoruz ve 100 farklı web<br />
sitesi ziyaret ediyoruz. Bir uygulamanın<br />
trafik kaynağı yakın geçmişe kadar sizin<br />
o uygulamayı açıp açmamanız kadar net<br />
bir koşula bağlıydı. Bu sorunu adreslemek<br />
için Google re-engagement modeli olan<br />
app indexing ve ona bağlı deep linking<br />
yöntemlerini pazara sundu. Eğer mobil<br />
uygulamanız bir kullanıcıda yüklüyse mobil<br />
arama sonuçlarında doğrudan uygulamayı<br />
açtırabiliyorsunuz. Elbette bu adı üstünde<br />
re-engagement sizin aktif kullanıcılarınızı<br />
111
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
artıracak bir gelişme. Yani o 27 uygulamadan<br />
biri olma ihtimaliniz bu sayede artacaktır.<br />
Bu geliştirmenin getirdiği en önemli<br />
değişikliklerden biri uygulamanızın artık<br />
sadece ana sayfa’dan açılmayacak olmasıdır.<br />
Bu önemli çünkü bir mobil web sitesinin<br />
yaşadığı en büyük sorunlardan biri artık<br />
uygulamanıza da gelmiş bulunuyor. Yukarıda<br />
birinci maddede bahsettiğim fiyat kontrolü<br />
yapıp çıkacaktım diyen kullanım davranışı<br />
şimdi uygulamanızın da dönüşüm oranını<br />
aşağıya çekecek bir güç olarak karşınızda.<br />
Elbette mobil sitede olmayan avantajınız,<br />
yani sadık müşteri avantajı bu olumsuz<br />
etkiyi dengelemenize yardımcı olacaktır<br />
ama bu tek başına yeterli değil. Doğrudan<br />
ürün sayfalarına veya kategori sayfalarına<br />
inen kullanıcılar için daha iyi düşünülmüş<br />
deneyimler sunmalısınız. Yine de erken<br />
sevinmeyin çünkü bu sefer de mobil siteden<br />
alacak olan bir kitleyi uygulamaya çekerek<br />
mobil sitenizin zaten düşük olan dönüşüm<br />
oranına bir darbeyi de siz vurmuş oldunuz.<br />
Bu sebeple mobil dönüşüm oranına bütünsel<br />
bakmak sizi daha doğru bir yere götürecektir.<br />
Peki bitti mi? Hayır aslında yeni başlıyoruz;<br />
2. Round Progressive Web Uygulamaları<br />
Web’in sahibi Google desek pek de<br />
yanlış bir cümle kurmamış oluruz. Fakat<br />
mobile kayan web dünyasında Google’ı<br />
ciddi anlamda tehdit eden bir tehlike var:<br />
Mobil uygulamalar. Apple’ın öncülüğünde<br />
yükselen mobil uygulama trendi Android<br />
tarafının da hızlı yükselişiyle birlikte büyük<br />
bir ivme kazanmıştı. Trafik kaynakları olarak<br />
appstore’lar ve işletim sistemlerine ait arama<br />
mekanizmaları Google’ın bu dünyadaki<br />
egemenliğini ciddi anlamda tehlikeye soktu,<br />
çünkü uygulamalar ile web arasında organik<br />
bir bağ yoktu. Son dönemde art arda çıkan<br />
app indexing, deep linking, app streaming<br />
gibi yeni geliştirmeler Google’ın mobil<br />
web’de üstünlüğünü sürdürme çabasının<br />
örnekleri ve bu çaba bunlarla da sınırlı değil.<br />
Özellikle de mobil sitelerin yapılma şeklini<br />
kökten etkileyecek yeni teknolojilerin de<br />
sunulmaya başlaması mobilde 2. round’un<br />
başlayacağını bize haber verir nitelikte.<br />
Progressive Web Uygulamalarını mümkün kılan<br />
bu yeni teknolojiler temelde bir mobil sitenin<br />
app kadar hızlı ve app yeteneklerine sahip<br />
olmasını sağlıyor. Progressive denmesinin<br />
sebebi bu teknolojileri desteklemeyen<br />
tarayıcılarda çalışmaz fakat destekleyen<br />
tarayıcılarda kendinizi bir uygulamadaymış<br />
gibi hızlı bir deneyimde buluyorsunuz. Birkaç<br />
maddede özetleyecek olursam progressive<br />
web uygulamalarının avantajları;<br />
Web push notifications<br />
Bir sistem özelliği olan push notificationlar<br />
artık web de de kullanılabilecek.<br />
Uygulamaların en can alıcı özelliğinin artık<br />
webden kullanılabilecek olması her şeyi<br />
değiştirebilir. CRM ekiplerinin en seveceği<br />
doğrudan iletişim kanalı şu an keşfedilmeyi<br />
bekliyor. Service worker dediğimiz alt yapılar<br />
sayesinde mobilde bu tip sistem seviyesindeki<br />
fonksyonlara erişim sağlanabiliyor. Webpush<br />
Desktop sitelerde de kullanılabiliyor, how cool<br />
is that!<br />
Hız<br />
100 milisaniyenin altında kullanıcı etkileşimine<br />
cevap veren, 16 milisaniyede animasyonu<br />
tamamlayan, 50 milisaniyede temel javascript<br />
işlerini bitiren ve 1 saniyede yüklenen ekranlar.<br />
Bir uygulama kadar iyi bir mobil site artık<br />
hayal değil.<br />
Güvenlik ve HTTPS<br />
Yukarıda saydığım teknolojileri kullanabilmek<br />
için tüm sayfalarda HTTPS kullanma<br />
zorunluluğu getirilmiş. Sanırım aşılması<br />
gereken en büyük engel bu olsa gerek. Bu,<br />
sistem ekiplerinin pek hoşuna gitmeyecek.<br />
Polymer ve Material Design<br />
Elbette yukarıda saydıklarımı sunabileceğiniz<br />
bir arayüz komponentine de ihtiyaç olduğu<br />
için Google material design’ı referans alarak<br />
bir UI framework’ü de geliştirdi. Ultra hızlı ve<br />
hafif mobil uyumlu bir site yapmanızı ciddi<br />
şekilde destekliyor. Biraz kurcalarsanız çok<br />
eğleneceksiniz: elements.polymer-project.org<br />
112
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Accelerated Mobile Pages (AMP)<br />
Tamamen hız odaklı olarak tasarlanmış açık<br />
kaynak bir framework. Tümü cahelenebilen<br />
ve indexlenebilen, temelde bir HTML web<br />
sayfası.<br />
Google ve Apple arasındaki bu savaşın<br />
galibi aslında belli gibi. Google tarafında geç<br />
kalınmış bir hamle olduğunu düşünmekle<br />
birlikte geç olsun güç olmasın diyerek<br />
söze devam edeyim. Progressive Web<br />
Uygulamaları şu an pazarın %60’tan fazlasına<br />
sahip android / chrome ikilisi tarafından<br />
destekleniyor. Pazarda %15 civarı yer tutan<br />
ios / Safari ikilisinin bu teknolojiye sıcak<br />
bakmadığını tahmin etmişsinizdir. Bir Apple<br />
fanı olmakla birlikte kapalı yazılımların<br />
zaman içinde nasıl çöpe gittiklerini de<br />
görmüş biriyim (Bkz. Flash) Microsoft’un<br />
opensource olması da benzer bir örnektir.<br />
Dolayısıyla web’in doğası olan açık<br />
kaynak tarafında gelişen bu atak ile native<br />
uygulamaların geleceğinin biraz tehlikeye<br />
girdiğini düşünüyorum. Ne yalan söyleyeyim<br />
bu duruma da pek üzüldüğüm söylenemez.<br />
Web’in her zaman olduğu gibi açık ve özgür<br />
bir platform olarak kalmasından yanayım.<br />
Bakalım 2016’da Türkiye mobil pazarında<br />
ne gibi gelişmeler göreceğiz. Heyecanla<br />
bekliyorum.<br />
113
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Akıllı E-Ticaret İçin<br />
Ödeme Tasarımı<br />
Vitaly Friedman<br />
Editor-in-chief and co-founder of<br />
Smashing Magazine<br />
E-Ticaret deneyimi tasarlarken, gerçekten “Nasıl Söylenir?” sorusunu dikkate<br />
almak yerine “Söylemek İstediklerimiz” kısmını önceliklendirmeye yöneliyoruz.<br />
Bu kolay değil çünkü yanlış giden yüzlerce şey olabilir; ürün seçmeden, onları karta eklemeye,<br />
son onay e-postasını almaya, satın alınan ürünün size gelmesine kadar uzun bir süreç<br />
söz konusu. Bu yoldaki her adım, oluşabilecek hataları ve potansiyel yanlış anlaşılmaları<br />
gözleyerek titizlikle tasarlanmalıdır. Bu kargolama (shipping) işleminin gösterimini ya da<br />
alışveriş sepetini terketme mailini etkilediği kadar filtrelerle olan etkileşimi de etkileyecektir.<br />
114
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Dönüşümlerin (Conversion) Artmasını Sağlayacak<br />
En Hızlı Yol Nedir?<br />
E-Ticaret dönüşüm oranları tamamen açıklıkla/netlikle alakalı bir durumdur. Yani kullanıcılara<br />
satın alma işlemini yaptırmak için sağlam argümanlar sunarken aynı zamanda ödeme<br />
için düz ve direk bir akış sağlanması gerekir. Örneğin, misafir ödemesi (checkout) olması<br />
zorunluluktur, hesap oluşturma işlemi bir seçenek olarak dahi düşünülmemelidir, gönderme<br />
adresi ile faturalanma adresinin aynı olması zorunluluktur (default), bu şekilde kullanıcıya<br />
ödediği ücret gösterilebilir ve gizli fiyatlandırmadan (hidden cost) kaçılınabilir. Son olarak<br />
kullanıcılar için dost ve sade arayüz kullanın ve yola kullanıcının hoşuna gidebilecek bir kaç<br />
unsur ekleyin.<br />
Bunlar sadece konuya açıklık getirecek ve kullanıcının satın alma işlemini daha kolay<br />
tamamlamasını sağlayacak bir kaç örnek olarak görebilirsiniz. Aslında, yalnız arayüz<br />
kopyalarının ayarlanması bile yeterlidir. Uygulayın, ölçün, yenileyin ve bazen tamamen<br />
bambaşka bir şey deneyin ve test edin, ardından dönüşümlerin sandığınızdan daha hızlı<br />
arttığını göreceksiniz.<br />
115
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Eğitimleri ve<br />
Kariyer<br />
116
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Kariyer Süreçlerinde<br />
Online Eğitimler<br />
Özge Kırdar<br />
Eğitim Sorumlusu-Pazarlama/<strong>Userspots</strong><br />
Kullanıcı Deneyimi Tasarımı, kullanıcı alışkanlıklarını anlayarak/araştırarak, deneyim tasarlamak<br />
şeklinde tanımlanabilir. Bu tanım da bizlere, tasarım sürecinin kendi içinde yenilenen ve hiç<br />
durmayan bir akışta olduğunu söylüyor diyebiliriz. Kullanıcı alışkanlıkları, çalıştığımız konu<br />
özelinde farklılıklar gösterse de, genel hatlarıyla bir şemaya oturabilen yapıdadır. Bu şemaya<br />
eklenen değişkenler, akışı etkileyip, tasarım sürecini bambaşka bir boyuta taşıyabilir. Bütün<br />
bunlar sebebiyle, kullanıcı deneyimi tasarımcısı hiç bitmeyen bir öğrenme süreci içerisine<br />
girer.<br />
Kullanıcı Deneyimi Tasarımı işine yeni yeni merak salan biriyseniz, öncelikle terminolojiye<br />
oldukça hakim olmanız gerekiyor. Kendinizi eğitim programlarıyla desteklemek de oldukça<br />
önemli. Değişen trendleri takip ederken, bilginin dağınıklığı aklınızı karıştırmasın istiyorsanız<br />
işte size, bilgiyi sizin için bir araya getirip sunan birkaç kaynak:<br />
117
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
The Interaction Design<br />
Foundation<br />
İlk olarak The Interaction Design Foundation olarak bilinen, etkileşim tasarımı vakfının<br />
hazırladığı eğitimlerden bahsedelim. Bir vakıf olduğundan, eğitimler çok çeşitli ve eğitmen<br />
seçeneği de oldukça fazla. UI, Araştırma ve Etkileşim Tasarımı alanında, mobil, web, giyilebilir<br />
teknoloji olarak alt başlıklara kadar farklı eğitimler var. Neredeyse her gün yeni bir ders<br />
açılıyor ve içerik olarak oldukça zengin, mutlaka ilgili konudaki akademik kaynaklarla da<br />
destekleniyor. Literatür zenginliği için çok iyi bir kaynak.<br />
118
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Trydesignlab<br />
Bir başka kaynak da trydesignlab.com. Dersler 3 ana başlıkta, Tasarım, Araştırma&Strateji ve<br />
Etkileşim Tasarımı olarak açılıyor ve her ders 4-6 hafta devam ediyor. Bir mentör eşliğinde<br />
derse devam ediyorsunuz ve dersi bitirebilmek için mutlaka ilgili konuda bir çalışma yaparak<br />
bunu mentörünüze sunmanız gerekiyor. Her hafta, mentörünüzle anlaşarak belirlediğiniz bir<br />
saatte görüşüp, ders ile ilgili sorularınızı ve çalışmanızın o haftaki ilerleyişini paylaştığınız<br />
oturumlar düzenlemeniz gerekiyor.<br />
Norman&Nielsen Group<br />
Dünyanın çeşitli noktalarında düzenlediği eğitimlerle bu konuda en iyi kaynak olma özelliği<br />
taşıyor. Web sitelerinde yayınladıkları blog yazıları ve makaleler ile her daim yararlanılabilir<br />
oldukça zengin bir kaynak olarak uzunca bir süre daha var olacaklar.<br />
119
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
International<br />
Usability and <strong>UX</strong>QB<br />
Uluslararası düzeyde kabul gören ve bir sınav ile sahip olabileceğiniz sertifika programı olan,<br />
yakında Türkiye’de <strong>Userspots</strong> olarak düzenlemeye başlayacağımız International Usability<br />
and <strong>UX</strong>QB(User Experience Qualification Board) eğitimleri ve sınavları, Kullanıcı Deneyimi<br />
alanında sahip olabileceğiniz bir sertifika olacak. Oldukça detaylı ve akademik bilginin<br />
sınandığı bir sınav ile sahip olacağınız sertifika uluslararası düzeyde kabul görüyor. Sınavı<br />
kazanabilmek için oldukça sıkı çalışıp, literatüre hakim olmak gerekiyor. Bu kapsamda eğitim<br />
programını şekillendirmeye ve en kısa zamanda tarihleri de duyurmaya başlayacağız.<br />
120
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
humanfactors.com<br />
Farklı lokasyonlarda sertifikalı eğitim programları bulabileceğiniz oldukça<br />
faydalı bir kaynak. Genellikle 2 ya da 3 günlük eğitimlerden oluşan programlar,<br />
profesyonel eğitmenler eşliğinde devam ediyor ve kariyeriniz için oldukça iyi<br />
bir gelişim olanağı sunuyor.<br />
hackdesign.org<br />
Tasarım konusunda oldukça iddialı bir çevrimiçi eğitim yapısı sunuyor. Nereden<br />
başlayacağınızı bilmiyorsanız, en iyi tasarımcıların eğitimlerinden bir liste sunuyorlar ve<br />
buradan seçim yaparak başlayabiliyorsunuz. Ancak ilk eğitimle başlamanızı ve önerdikleri<br />
muhteşem belgesel filmi izlemenizi öneririz(Objectified). Etkileşimli içeriğiyle eğitimi oldukça<br />
eğlenceli hale getiriyor ve tasarım puzzle’ları ve oyunlaştırılmış yarışmalarla eğlenirken<br />
öğrenmeyi kolaylaştırıyor.<br />
121
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
generalassemb.ly<br />
Hem çevrimiçi hem de çevrimdışı olarak eğitim seçenekleriyle geniş bir yelpaze ile karşımıza<br />
çıkıyor. Lokasyon seçerek eğitimleri listeleyebiliyor, çevrimiçi eğitimleri listeleyip, ilgi duyduğunuz<br />
eğitime yönelebiliyorsunuz. Eğitim öncesinde sunduğu yol haritası ve öğrenme<br />
kazanımlarının bir listesi ile size ders hakkında bir izlenim kazandırıyor.<br />
skillshare.com<br />
Çok çeşitli eğitimler sunuyor ve <strong>UX</strong> Design bu eğitimlerin yalnızca<br />
bir kırılımı. Eğitmen kadrosu, dünyanın önde gelen şirketlerinde çalışan kendini kanıtlamış<br />
isimlerin de dahil olduğu çok geniş bir yelpazeye sahip. Ders içerikleri video ile kurgulanmış<br />
ve farklı üyelik paketleri mevcut.<br />
Yaptığımız araştırmalar ve denemeler sonucunda en işe yarar programları sizlerle paylaşmak<br />
istedik. Bunlar dışında, Udemy, Coursera, uxmastery.com ve uxtraininng.com üzerinden de<br />
eğitimler bulabilir, kendinizi geliştirmeye devam edebilirsiniz.<br />
122
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Kariyer<br />
Kartları<br />
<strong>Userspots</strong> <strong>UX</strong> Kariyer Kartları, <strong>UX</strong> kariyerine atılan ilk adımdan son aşamaya kadar geçen<br />
süreç içerisinde sizler için faydalı olabilecek küçük tavsiyeleri içermektedir. Altı aşamaya<br />
ayırdığımız bu kariyer sürecinde; kitaplar, bloglar, kişiler gibi her adım için farklı tavsiyeler yer<br />
almaktadır. Her karttaki tavsiye listesini bitirdikten sonra bir sonraki adıma geçebilirsiniz. Her<br />
aşaması yeni tavsiyelere açık olan kartlarımız, etkinliklerimizde basılı olarak da sizleri bekliyor<br />
olacak.<br />
123
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Beginner<br />
İlk aşama olan Beginner ile<br />
kariyerine yeni başlayanlar<br />
için mutlaka bilinmesi gereken<br />
noktaların altını çizmeye çalıştık.<br />
Örneğin; Don’t Make Me Think<br />
kitabını mutlaka okunmalı,<br />
N&N Group’u takip etmeli ve<br />
<strong>Userspots</strong>’un <strong>UX</strong> Sözlüğü’ne sahip<br />
olmalısınız.<br />
Junior<br />
Öğrenmeye devam, dünyanın bir<br />
<strong>UX</strong> Hero’ya daha ihtiyacı var!<br />
Junior aşamasında, <strong>Userspots</strong> <strong>UX</strong><br />
Camp’a ve Bilgi Mimarisi Enstitüsü<br />
Topluluğun’a katılmanızı tavsiye<br />
ediyoruz. Ayrıca bu aşamada<br />
Responsive Arayüz hakkında<br />
bilgiye sahip olmalı, Flat dizayn ve<br />
Skeumorphism arasındaki farkları<br />
çözümlemiş olmanız beklenir.<br />
124
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Intermediate<br />
İyi gidiyorsun, daha öğrenecek<br />
çok şey var!<br />
Intermediate aşamasında,<br />
Human-Computer Interaction<br />
Derslerinin yanı sıra The Laws of<br />
Simplicity kitabını okuyabilirsiniz.<br />
Ayrıca <strong>UX</strong> Myths hakkında bilgi<br />
sahibi olmanız faydalı olacaktır.<br />
Skilled<br />
Dördüncü aşamada işler kızışıyor!<br />
<strong>UX</strong> disiplinler arası bir alan ve her<br />
zaman öğrenecek yeni bir şeyler<br />
var.<br />
Skilled aşamasında, Flinto ve<br />
Pixate gibi araçları kullanmayı<br />
öğrenmelisiniz. Ayrıca HTML<br />
101 dersleri almaya başlamalı ve<br />
Customer Experience kitabını<br />
okumanız faydalı olacaktır.<br />
125
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Senior<br />
Senior kartı ise gerçekten emek<br />
istiyor.<br />
Listedeki görevler farklı alt alanları<br />
kapsıyor ve her aşamada olduğu<br />
gibi kendini geliştirme hiç bitmiyor.<br />
Javascript ve grid layout sistemini<br />
öğrenmeli ve Optimizely’de A/B<br />
Test yapmanız gerekiyor.<br />
Mentor<br />
İşte asıl işin başladığı aşama!<br />
Artık Mentor seviyesinde bir<br />
<strong>UX</strong> Designer oldunuz ve sıra<br />
arkanızda kalanlara yardımcı<br />
olmaya ve sektörü geliştirmeye<br />
geldi. <strong>UX</strong> Konferanslarına katılmalı,<br />
zumbara.com gibi platformda<br />
dersler vermeli bir startup’a<br />
danışmanlık yapmalı ve bu<br />
kartların geliştirilmesine yardımcı<br />
olmalısınız.<br />
126
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
<strong>UX</strong> Kariyer Sürecindeki<br />
Ekmek Kırıntıları<br />
Mustafa Dalcı<br />
Web sitesinde navigasyon tasarlarken kullanıcıya sayfada şu 3 sorunun cevabını net<br />
bir şekilde vermelisiniz;<br />
Nereden buraya ulaştım?<br />
Şu an neredeyim?<br />
Nereye gideceğim?<br />
Bu soruları farklı arayüz elementleriyle cevaplarken en fazla başvurduğumuz yöntemlerden<br />
biri de “breadcrumbs” (ekmek kırıntıları) dır.<br />
Sayfaların belirli yerlerinde gördüğümüz<br />
Anasayfa > İletişim > Destek Hattı<br />
gibi yapılar ile navigasyona yardımcı bir unsur barındırır ve 3 soruya cevap vermeye çalışan<br />
bir bütün oluştururuz.<br />
Bu 3 sorunun benzerini kariyerimizde de sürekli kendimize soruyoruz.<br />
Nasıl bir gelişim sağladım, nereden başladım, hangi projelerde görev aldım, ne kattım?<br />
Şu an kişisel kariyerimin ve şirketteki yapılanmanın neresindeyim?<br />
Bundan sonra önümde nasıl bir süreç var?<br />
<strong>Userspots</strong> olarak biz de uzun zamandır bu süreçte bize yardımcı olacak bir yapıyı kurmaya<br />
vakit harcadık ve ortaya kariyer ekmek kırıntılarını çıkardık.<br />
127
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Şirketteki süreci 6 aşamaya bölüyoruz.<br />
İlk Dokunuş<br />
Kişilere dokunduğumuz ilk nokta, staj programı, <strong>UX</strong> camp, etkinlik veya doğrudan iş<br />
başvurusu maili olabilir. Buradaki dokunuştan sonra iş görüşmesinde kişinin bir tasarım<br />
sorusunu çözmesi ve beraber bunun üzerine tartışmamızla şekillenen bir süreç var.<br />
Burada 2 Önemli İpucu Verebilirim<br />
Portfolyonuzu lütfen tasarlayın ve onu bir tasarım sunumu yapıyormuşsunuz gibi gönderin.<br />
Kullandığınız yapı ve tipografi seçimi sizin hakkınızda bize bilgi veriyor.<br />
Bize zaman ayıran kişiyi her daim daha çok seviyoruz. Kampımıza katılmanız, etkinliklerimizi<br />
ve blogumuzu takip etmeniz bizi sevindiriyor.<br />
4 Aylık Trainee Program<br />
İlk dokunuş sonrasında kişiye 4 aylık bir program öneriyoruz. Burada bir parantez açıp iş<br />
yapış şeklimizden bahsetmekte fayda var. Biz, içinde user researcher, interaction designer ve<br />
ui designer’dan oluşan -şimdilik- 3 takımdan oluşuyoruz. Her takım projeleri başından sona<br />
takip eden bir yapıda bulunuyor.<br />
4 aylık programda bu takımlardan birine dahil olup bir mentör eşliğinde projelere dahil<br />
oluyorsunuz. Mentör (özellikle onun değerlendirmesi hayati) ve takım sizi değerlendiriyor ve<br />
bir sonraki aşamaya geçiyorsunuz.<br />
Junior Program<br />
4 aylık süreç sonunda -maksimum 1 yıl sürecek- Jr. programa dahil olup hala bir mentöre dahil<br />
olarak takımdaki projelerde yer alıyorsunuz, sorumluluklarınız giderek artıyor.<br />
Mid-Level Program<br />
Jr. program bittiğinde artık takımda o işi yapacak ana kişi olduğunuz Mid-level<br />
programdasınız. Maksimum 1.5 yıl sürecek olan bu süreçte artık hangi sektörde hangi tip<br />
projelerde yer almanız daha faydalı belirlemiş oluyoruz.<br />
Mentör Program<br />
Artık takımda yanında trainee ve Jr.’lar olan bir mentöre dönüştünüz. Sürecin yönetim ve<br />
strateji tarafına giderek de hakim olmaya başladınız.<br />
Conversion Program<br />
Operasyonel süreçlere daha az hakim olduğunuz ve işin strateji tarafında olduğunuz yapıda<br />
da conversion programına dahil oluyorsunuz.<br />
6 programın da rakamsal karşılıklarını çıkarmak için her projede client, team ve board<br />
notlarını alarak kişilerin gelişimlerini de ölçümlüyoruz. Böylece gelişim sürecinde bir sonraki<br />
programa geçişi de daha objektif hale getirmiş oluyoruz. Her programın maaş skalası ve<br />
şartları da belirli.<br />
3 soruyu da cevaplayarak oluşturduğumuz sisteme dahil olmak için sizi kariyer sayfamıza<br />
bekleriz.<br />
128
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Pardus<br />
<strong>UX</strong>/UI<br />
129
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Filotürk<br />
<strong>UX</strong>/UI<br />
130
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
Koçtaş<br />
<strong>UX</strong>/UI<br />
131
<strong>Userspots</strong> <strong>UX</strong> <strong>Almanak</strong> <strong>2015</strong><br />
IF YOU LOVE<br />
WHAT WE DO<br />
SPREAD YOUR<br />
LOVE FOR<br />
www.uxalive.com<br />
@<strong>UX</strong>AliveTurkey<br />
132
Change language