1 Userspots UX Almanak 2015

132
1 Userspots UX Almanak 2015

Transcript of 1 Userspots UX Almanak 2015

Page 1: 1 Userspots UX Almanak 2015

1

Userspots UX Almanak 2015

Page 2: 1 Userspots UX Almanak 2015

2

Userspots UX Almanak 2015

Index

UX Temelleri

Yeni Başlayanlar İçin Layout Tasarımı Kullanıcı Deneyimi Araştırmaları UX Çıktılarının Görselleştirilmesi ve İpuçları

2015'in Bize Armağanı: ‘Optimizasyon Servisi ve UX Alive’

Neden Optimizasyon Ekibi Kurduk? Userspots Big 4 A/B Test Örnekleri B-Clear Framework Web Sizin İçin Çalışsın UX Alive

2015 Trendler/Yeniler

2015 UI Trendleri Mobil Optimizasyon 2015 UX Trendleri 2015’in Öne Çıkan IoT Cihazları Mobil’de 2. Round Akıllı E-Ticaret İçin Ödeme Tasarımı

Eğitim/ Kariyer

UX Sürecinde Online Eğitimler UX Kariyer Kartları Userspots UX Kariyer Sürecindeki Ekmek Kırıntıları

Page 3: 1 Userspots UX Almanak 2015

3

Userspots UX Almanak 2015

Merhaba,

Userspots ailesi olarak, dolu dolu geçen bir yılı uğurlarken yeni yılın hepimiz için mutlu, sağlıklı ve bol kazançlı bir yıl olmasını diliyor, yeni yılınızı kutluyoruz.

2014 yılında Dieter Rams ile başladığımız “UX Almanak”’ın ikinci sayısı ile karşınızdayız. Okumak üzere olduğunuz bu almanak, Rams’ın 10 madde ile anlattığı “İyi Tasarım”a ulaşmaya çalışarak geçirdiğimiz bir yılın muhasebesini yapmak, kazandıklarımızı/kaybettiklerimizi, yapabildiklerimizi/yapamadıklarımızı düşünmek için güzel bir fırsat olabilir.

Tasarıma olan bakış açımızı genlerimizde muhafaza ederek, iş yapma şeklimizi daha geniş bir perspektifte şekillendirdik. Bu da 2016 yılında size daha fazla “Veri” den bahsedeceğimiz anlamına geliyor. Bu yıl içerisinde yaptığımız “4 Büyük Proje”yi anlatan reklam kokan içerikler için şimdiden bizi mazur görün, iyi ürün geliştirmenin yöntemlerini keşfedip bunu hayata geçirmişken sizlerle paylaşmamak olmazdı.

İş yapma şeklimizi değiştirmiş olmamızı, bu yılın bize kattığı en büyük değerlerden bir tanesi olarak görüyoruz. İlerleyen zamanlarda bu konuya bol miktarda değiniyor olacağız. Hayatımıza, Optimizasyon’un nasıl girdiğini ve neyi değiştirdiğini anlattığımızda bu değişikliğin altında yatan nedenleri daha iyi tanımlıyor olacağız.

Değişmeyen tek şey değişimin kendisi!

Bu yılın bizi gururlandıran en önemli olaylarının başında UX Alive Konferansı geliyor. Türkiye’de bu önemli organizasyonu gerçekleştirmiş olmak bize büyük bir mutluluk verirken daha iyisi için çalışmamıza da motivasyon kaynağı olduğu bir gerçek. Bu nedenle UX Alive’16 da sizleri çok güzel sürprizler bekliyor olacak.

Bu sayıda bizim dışımızda yazılarıyla katkıda bulunan iki önemli misafirimiz var. Biri Front- end camiasının yakından tanıdığı ve UX Alive’ın konuşmacılarından Vitaly Friedman diğeri ise hepimizin tanıdığı hepsiburada.com’un ürün geliştirme müdürü Gökhan Besen… Katkılarından dolayı her ikisine de teşekkür ediyoruz.

Bu yılın Trendlerini unutmadık, yılın tasarım trendleri, Internet of Things cihazları, pazarlama araçları gibi yılı ve yaşadıklarımızı derleyip toparlayan içerikler ile gönlünüzü almaya çalışacağız. A/B test yapma şansımız yoktu, umarım ROI’si yüksek içerik üretmişizdir.

İyi tasarım arayışının bizi götürdüğü yolu, bu süreçte başımıza gelenleri her daim sizinle paylaşacağız. Mutlulukla dolu bir yıl sizlerle olsun.

Önümüzdeki sayıda görüşmek üzere!

Mustafa Dalcı Userspots Founder

Süleyman DumanContent Editor and Design

Page 4: 1 Userspots UX Almanak 2015

4

Userspots UX Almanak 2015

UX’inTemelleri

Page 5: 1 Userspots UX Almanak 2015

5

Userspots UX Almanak 2015

Yeni Başlayanlar İçinLayout Tasarımı

Geçmiş deneyimlerimden yola çıkarak hazırlamış olduğum “Layout Nasıl Oluşturulur” eğitiminin giriş konusu olan ‘Layout Tasarımında Temel Bilgiler’ bölümünün, tasarıma yeni başlayanlar için faydalı olabileceğine inanıyorum.

Öncelikle Layout’un anlamına bakmak gerekirse; bir işin ve tasarımın gerçekleştirilmesi için uyulması gereken düzen olarak tanımlanabilir. Arayüz elementleri belirli bir düzen içerisinde konumlandırılarak mizanpajı/arayüzü oluşturur.

“Layout Nasıl Oluşturulur?” konusuna başlamadan önce, işin temeline inmek daha doğru olacaktır. Bu noktada kişisel tercihim, klasik anlayıştan farklı olarak layout oluşturmaya direkt çizim yaparak başlamıyorum. Bir Layout’u oluşturmada öncelikli hedefim, kendime sorduğum dört soru ve cevaplarını yazarak ne yapmam gerektiğini tanımlamak oluyor:

- Ekranda kullanıcının hangi fonksiyonları görmesini istiyorum? - Hangi persona grupları bu ekranı kullanacak? - Müşteri bu ekranda neyi ön plana çıkartmak istiyor? - Kullanıcının bu ekrandan beklentisi ne?

Bu soruların cevaplanmasından sonra işin zor kısmı başlamış oluyor. Çünkü, layout oluşturmanın temelinde çok farklı etmenler yatıyor. Bu etmenleri mümkün olduğunca açıklamaya çalışacağım.

Emrah SarıbazUX Strategist

Page 6: 1 Userspots UX Almanak 2015

6

Userspots UX Almanak 2015

Kullanıcılar Ekranı Nasıl Tarar?

Bunlardan birincisi fiziğin de temelini oluşturan yer çekimi kuralıdır. Bu kural aynı zamanda kullanıcıların tarama alışkanlığını da belirleyen fizik kuralıdır. Biz kullanıcılar yukarıdan aşağıya doğru tararız ki bu da bize birinci kuvveti gösterir.

İkinci kuvvet ise, dil yapımıza göre farklılık gösterir. Latin alfabesi kullanıyorsanız okuma yönünüz soldan sağa doğrudur. Arap alfabesinde ise okuma yönü sağdan sola doğrudur. Bu okuma alışkanlıklarımız bizim ikinci tarama kuvvetimizi gösterir.

Bu iki kuvvet fizikten de bildiğiniz üzere birleştirildiğinde sol üstten sağ alta doğru taradığımızı gösteren bir şekil oluşturur. Bu şeklin nasıl anlamlandırıldığını ise şöyle açıklayabiliriz;

Page 7: 1 Userspots UX Almanak 2015

7

Userspots UX Almanak 2015

Öncelikle ekran dört eşit parçaya bölünür. Sol üstte kalan alan kullanıcıların taramaya ilk başladığı, dolayısıyla sizin için de en önemli olan alandır. Sağ üst ve alt alan ise taramanın bittiği ve kullanıcıların yoğunlaştığı diğer iki önemli alan olarak gösterilebilir. En son kalan alan yani sol alt alan ise kullanıcıların en son baktıkları ve önemli bilgileri koymak için çok tercih edilmeyen alandır.

Bu yerleşimi kendiniz test etmek isterseniz, booking.com ana sayfa ve youtube.com video sayfalarını inceleyebilirsiniz.

Burada dikkat edilmesi gereken şey, sadece bu kurallar ışığında ekranı dörde bölerek çalışmamanız. Çünkü, bu kurallar dışında hayatınızı etkileyecek çok daha fazla etmen bulunmaktadır. Bunlardan bir tanesi yine dengeli bir tasarım için tavsiye edilen ve temelleri çok eskiye dayanan “Altın Oran” kuralıdır.

Page 8: 1 Userspots UX Almanak 2015

8

Userspots UX Almanak 2015

Hangi araç için tasarlıyoruz?Temel olarak kullanıcıların nasıl taradığını öğrendiğimizi varsayarsak artık kullanıcının hangi araçta bu Layoutu tarayacağını tanımlamamız gerekiyor. Etkileşim tasarımcısının temel görevlerinden biri de bunu doğru teşhis edebilmesidir. Kullanıcılarınız bu Layout’u web ortamında mı görüntüleyecek yoksa mobil cihazlarda mı kullanacak gibi sorular bu noktada çok önemli. Eğer web ise işiniz biraz daha zor olacak.

Bilgisayar teknolojileri ve talebin büyümesiyle ekran boyutlarındaki değişkenlikte artmaya başladı. Bu nedenle siz de bir tasarımcı olarak verileri takip etmeli, kullanıcılarınızın en çok kullandığı ekran boyutunu ve buna bağlı olarak fold yüksekliğini belirlemelisiniz. Eğer bunu tanımlamadan tasarıma başlarsanız ilerleyen zamanlarda yazılım ve UI aşamalarında birçok problemle karşılaşabilirsiniz.

Örnek vermek gerekirse; Ben yerel verilerde en çok kullanılan ekran boyutu (1366px X 768px) çözünürlüğünü kullanıyorum. Bu da demek oluyor ki (Max. 650px) fold alanım bulunuyor.

Page 9: 1 Userspots UX Almanak 2015

9

Userspots UX Almanak 2015

Her şeyin başı kutularArtık temel bazı kuralları öğrendiğimize göre boş kağıda çizim yapmaya başlayabiliriz. Çizime başlamak demek hemen ekranı çizmeye başlamak anlamına gelmiyor. Çünkü, Layout tümden gelim kavramı üzerine çalışır. Bu nedenle öncelikle sayfanın tamamını oluşturmanız gerekmektedir.

Yazının ilk başında tanımladığımız soruların cevapları doğrultusunda, sayfanın genelini düşünerek işe başlanabilir. Bunu yapmanın en kolay yolu basitten zora doğru gitmektir. Öncelikle tasarımın her dalının temelini oluşturan kutular ile başlayabilirsiniz. Kutular, sizin her alan için tanımladığınız temel element olmalıdır. Kutu çizerek başlamayı alışkanlık haline getirirseniz çok kısa sürede çok fazla opsiyon üretebilirsiniz.

Kutular nasıl anlamlı hale gelir?Kutu çizmek çok basit bir eylem gibi düşünülse de aslında altında iki farklı temel felsefeyi barındırmaktadır. Öncelikle Fold’da ne kadar kutu çizilmeli gibi bir soru ile başlayabiliriz. Bu sorunun cevabı eskilere dayanan pazarlama araştırmaları ile cevaplanabilir.

En ünlü araştırma olan ve literatüre Miller’s kuralı olarak giren (-2) 5 (+2) kuralından bahsetmek istiyorum. Miller pazarlama araştırmalarında kullanıcılara 7’den fazla veya 3’ten az seçenek sunulduğunda karar verme mekanizmalarının doğru ve anlamlı çalışmadığını ortaya koyar. Bu kural online dünya içinde geçerlidir. Kutularınızı çizerken tanımladığınız alanlarda 7’den fazla seçenek varsa ya amacınız kullanıcının kafasını karıştırmaktır ya da pinterest gibi sadece tarama üzerinden kullanıcının zaman geçirmesi istiyorsunuzdur.

Kutular nasıl yan yana gelir?Seçeneklerimizin neler olduğunu çıkarttığımıza göre, kutularımızı yerleştirmeye başlayabiliriz. Bu aşamada ise tasarımın temelini oluşturan kurallardan biri olan ‘Gestalt Kuralı’ devreye giriyor. Kişisel olarak Gestalt’ın tüm kurallarını uygulamasamda temel de uyguladığım yakınlık kuralından bahsedebilirim. Bu kural sayesinde kullanıcıları nasıl yönlendirebileceğinizi de tanımlayabilirsiniz.

Page 10: 1 Userspots UX Almanak 2015

10

Userspots UX Almanak 2015

Örnek olarak;

Altı tane eşit boyutta kutunuz var ve tüm kutular birbirine eşit uzaklıkta ise kullanıcı büyük ih-timalle sol üstteki kutudan taramaya başlayacak ve daha sonra hangi kutuya bakacağı tama-men onun insiyatifine kalacaktır. Tasarımcı olarak biz bu yönü tanımlayabilir, kullanıcıların gitmesi gereken yolu bu kural ile belirleyebiliriz. Üç kutuyu yatayda birbirine yaklaştırır ve diğer üç kutu ile arasındaki mesafeyi açarsanız, yakınlık kuralına uygun olarak kullanıcılarınız öncelikle yatayda tarama yapacak daha sonra da diğer kutu grubuna yönlenecektir. Sadece kutular arasındaki mesafeyi değiştirerek kullanıcıları yönlendirebilir, onları seçim yapmak zo-runda bırakmazsınız.

Bu makaleyi yazmamda bana yardımcı olan içeriklere buradan ulaşabilirsiniz.

Page 11: 1 Userspots UX Almanak 2015

11

Userspots UX Almanak 2015

Kullanıcı DeneyimiAraştırmaları

Tasarım kararlarının ne kadar bilinçli verildiğine bağlı olarak, ortaya çıkan ürünün hikayesi de o kadar güçlü olur. İşte bu noktada tasarım kararlarının bilinçli verildiğinden emin olmak için tasarım süreci boyunca birçok araştırma tekniğinden faydalanırız.

Yaygın düşüncenin aksine araştırma, bir projenin başlangıç adımından ibaret değildir. Araştırma süreci; İlk problemin tanımlandığı ve ilk açıklamanın yapıldığı an başlar ve tasarım süreci boyunca devam eder.

Sıla KaragölUX Strategist/ Userspots

Page 12: 1 Userspots UX Almanak 2015

12

Userspots UX Almanak 2015

AraştırmaGenel olarak bir takım olguların ortaya çıkarılması için ya da bu amaçla yapılan her türlü sistemli çalışmayı içeren inceleme olarak tanımlanır. Tasarım araştırması, projenin türüne, büyüklüğüne ve çevre şartlarının gerekliliklerine göre farklı yöntemlerle sürdürülebilir. Bu süreç içerisinde sezgisel yöntemlere de başvurulabilir. Ancak, kararları bilinçli verebilmek için araştırmanın planlı bir şekilde yürütülmesi ve sistematik yaratıcı eylemlerin göz ardı edilmemesi son derece önemlidir.

Araştırma süreci ise, ilk bulguların elde edilmesi ve sorgulanması ile başlar. Sonrasında, düşüncelerin sentezlenerek ilk tasarım fikirlerinin oluşturulması, ortaya çıkan fikirlerin test edilmesi ve geliştirilmesine kadar projenin tamamına yayılarak devam eder.

Projenin amacı ve araştırma sorularına göre, süreç içerisinde farklı tekniklerin uygulanması gerekebilir. Kullanıcının ilk izlenimlerini ölçmek için yürütülen çalışmalarda belli setler kullanmak gerekirken, davranışlarını ölçmek istediğimizde ise farklı setler kullanmamız gerekebilir. Bu noktada bir tasarım araştırması yaparken en sık kullanılan tekniklere göz atabiliriz.

Page 13: 1 Userspots UX Almanak 2015

13

Userspots UX Almanak 2015

Bire BirGörüşmelerKullanıcıların belli bir ürün veya servis hakkındaki düşüncelerini, ihtiyaçlarını ve beklentilerini öğrenmek, özellikle ürünü kullanırken karşılaştıkları problemleri anlamak için gerçekleştirilen karşılıklı görüşme tekniğidir.

Kullanıcılarla yapılan bu görüşmelerde;

Kullanıcıların ürün ile ilgili geçmiş deneyimleri nedir?

Kullanıcıların belirli bir konu hakkındaki düşünceleri ve söylemleri nelerdir?

gibi sorulara yanıt aranır.

Page 14: 1 Userspots UX Almanak 2015

14

Userspots UX Almanak 2015

GünlükÇalışmasıKullanıcıların belli bir ürünü veya servisi kullanırken belli bir süre içerisinde kendi hareketlerini kayıt altına almaları durumudur. Düzenli aralıklarla bu kayıtlar kullanıcı ile birlikte analiz edilir.

Günlük çalışması sonucunda;

Kullanıcılar rutin hareketlerinde belli davranışları nasıl sergiliyorlar?

Kullanıcıların periyodik hareketleri ürünü nasıl etkiliyor?

Kullanıcılar belli bir ürünü belli bir süre içerisinde nasıl kullanıyorlar?”

sorularına yanıt aranır.

Page 15: 1 Userspots UX Almanak 2015

15

Userspots UX Almanak 2015

DirektGözlemBu araştırma tekniğinde, kullanıcıların fiziksel ve sosyal çevreleri ile olan etkileşimleri gözlemlenir. Kullanıcıların içerisinde bulunduğu çevrelerin ürüne olan etkisi incelenir.

Direkt gözlem sonucunda;

Kullanıcılar belli bir ürünü kullanırken ne yapıyor

Kullanıcılar rutin hareketlerinde belli davranışları nasıl sergiliyorlar?

sorularına yanıt aranır.

Page 16: 1 Userspots UX Almanak 2015

16

Userspots UX Almanak 2015

NetnografiEtnografik araştırma tekniklerinin internet ortamında uygulanması olarak tanımlanabilir.

Bu araştırma tekniğinde,

Kullanıcılar belli bir ürün veya konu hakkında ne söylüyor? Ne düşünüyor?

sorularına yanıt aranır.

Page 17: 1 Userspots UX Almanak 2015

17

Userspots UX Almanak 2015

RakipAnaliziSöz konusu tasarım ürününün alternatiflerinin araştırılması durumudur. Bu alternatifler; teknik, kullanıcı standartları ve arayüz çerçevesinde incelenir.

Analiz sonucunda;

Sektörde ne noktadayız?

Hangi noktalarda öndeyiz/zayıfız?

Ürünümde olmazsa olmaz özellikler neler?

sorularına yanıt aranır.

Page 18: 1 Userspots UX Almanak 2015

18

Userspots UX Almanak 2015

KullanılabilirlikTestiÇalışan veya maket halindeki ürünün gerçek kullanıcıları ile görev bazlı testleri yapılır. Kul-lanıcılardan belli görevleri gerçekleştirmeleri istenirken; karşılaşılan problemler, görev başarısı, görev gerçekleştirme süresi, kullanıcı memnuniyeti ölçülür.

Kullanılabilirlik testi ile,

Kullanıcılar ürünü kullanırken nerelerde zorluk yaşıyorlar?

Ürünün hangi özellikleri etkin kullanılıyor?

Hangi özellikleri çalışmıyor?

Kullanıcıların beklentileri ve davranışları neler?

sorularına yanıt aranır.

Page 19: 1 Userspots UX Almanak 2015

19

Userspots UX Almanak 2015

Kart GruplamaÇalışmasıKart gruplama çalışması içerisinde, sınıflandırılmak istenen içerik kartlar haline getirilerek katılımcılardan bu içeriği gruplamaları istenir. Böylelikle kullanıcının gözünden hiyerarşi ile ilgili bilgi sahibi olunur.

Kart gruplama çalışması sonucunda,

Hangi içerikler bir arada gruplanmalıdır?

Grupladığımız içeriklere ne başlıkları vermeliyiz?

gibi sorulara yanıt aranır.

Page 20: 1 Userspots UX Almanak 2015

20

Userspots UX Almanak 2015

Ağaç TestiSı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 bir set oluşturularak kullanıcıların bu içerikleri bulması istenir. Böylelikle sınıflandırmanın, navigasyonda yer alan başlıkların yapısının ve isimlendirilmesinin doğru olup olmadığı anlaşılır.

Ağaç testi sonucunda,

Kullanıcılar aradıkları bilgiye kolayca ulaşabiliyorlar mı?

Navigasyonda yer alan başlıklar ne olmalıdır?

sorularına yanıt aranır.

Page 21: 1 Userspots UX Almanak 2015

21

Userspots UX Almanak 2015

First ClickTestKullanıcılara belli bir görev vererek arayüzün bir sayfasında bu görevi gerçekleştirmeleri istenir. Görev gerçekleştirme süresi ve tıklama yapılan yerler incelenir.

Test sonucunda,

Kullanıcılar arayüz ile beklenilen etkileşimi gerçekleştirebiliyor mu?

Navigasyonda yer alan başlıklar ne olmalıdır?

sorularına yanıt aranır.

Page 22: 1 Userspots UX Almanak 2015

22

Userspots UX Almanak 2015

5 SaniyeTestiArayüzün bir sayfası kullanıcılara 5 sn kadar gösterilip ardından, bu sayfa ile ilgili sorular soru-lur.

5 sn testi sonucunda;

Kullanıcıların ürün veya belli bir özellik üzerinde ilk izlenimleri ne?”

Ürünün vermek istediği mesaj arayüzde yeterince açık mı?

sorularına yanıt aranır.

Page 23: 1 Userspots UX Almanak 2015

23

Userspots UX Almanak 2015

UX ÇıktılarınınGörselleştirilmesi ve İpuçları

Kullanıcı Deneyimi çalışmalarımız ve geçmişe dönük tecrübelerimizin, bizi daha iyi ürün geliştirmek adına önemli noktalara kaydırdığı bir gerçek. Şimdi ise, bu süreç içinde adım adım değerini fark ettiğimiz ve konu üzerine sürekli düşünüp çalıştığımız“UX Görselleştirmesi”ne değinmek istiyorum.

Bu yazının içeriği, Graz’da World Usability Congress’de yaptığım “UX Output Visualization” sunumu oluşturuyor.

Neden Görselleştirme?Temel olarak bir UX çalışmasının kalitesi, çalışmadan çıkan insightlar ve üretilen tasarım çözümlerinin yanında çıktıların sunuluş şekliyle belirleniyor. Bu yüzden ne kadar “WOW Moment”a sahip olan bir içeriğiniz olursa olsun, bunun sunum şekliyle yarattığınız etkiyi başka boyutlara taşıyorsunuz.

2009–2012 yılları arasında yaptığımız kullanıcı testlerini sunarken hazırladığımız 100+ sayfadan oluşan kullanıcı testi raporların gereksizliği, okunmuyor oluşu, bizi pazarlama ekiplerinin gözünde “işi bilmeyen ve akademik raporlar içerisinde boğulmuş” kişilere dönüştürmesi sonucunda tüm eforumuzu, derdimizi daha iyi anlatabilme yollarına adadık. Bu noktada rapor yazmak yerine sonuçları görselleştirmeyi ön plana çıkardık.

Mustafa DalcıUserspots Founder

Page 24: 1 Userspots UX Almanak 2015

24

Userspots UX Almanak 2015

Neleri Görselleştirebiliriz?Temel amaç, derdimizi daha iyi anlatmak olduğu için aslında her kullanıcı deneyimi çalışması görselleştirilebilir. Kullanılabilirlik Testi Sonuçları, Persona, Customer Journey, Google Analytics Verileri ve Benchmark çalışmaları bunların başında geliyor.

Kullanılabilirlik Testi Sonuçlarıİlk görselleştirme çalışmalarımızı kullanılabilirlik testleri üzerine yaptık. Özellikle bu çıktıları alıp hemen uygulamak isteyen e-ticaret siteleri için “Executive Summary” yerine “Infografik” oluşturmaya başladık.

Tek bir görsel ile demografik bilgiler, alışveriş sürecinin ortalama süresi, anket sonuçları ve yapılan hataları gösterebildiğimiz bu yapı, test sonuçlarını hap olarak almak isteyen e-ticaret şirketleri için oldukça faydalı oldu.

Sonrasında finans şirketleriyle çalışmalarımız arttıkça hayatımıza “Single Usability Metric” ve bu sonuçların görselleştirmesi girdi.

Page 25: 1 Userspots UX Almanak 2015

25

Userspots UX Almanak 2015

SUM (Single Usability Metric)Kullanılabilirlik tanımının ISO standartlarında belirtilen hali: ISO 9241’e göre kullanılabilirlik “bir ürünün potansiyel kullanıcıları tarafından, belirli bir kullanım bağlamı içinde, amaçlanan kullanım hedeflerine ulaşmak için, ne derece etkin, verimli ve tatmin edici bir şekilde kullanılabilmesi” olarak tanımlanmaktadır.

SUM ise bu noktada, bir arayüzün veya bir arayüzde bulunan fonksiyonun ISO standartında belirlenen istatistikler çerçevesinde ne kadar kolay kullanılabilir olduğunu gösteren rakam olarak kullandığımız bir veriydi.

Detaylı bilgiye buradan ulaşabilirsiniz.

Biz de yaptığımız karşılaştırmalı benchmark çalışmalarında SUM üzerinden infografikler oluşturmaya başladık.

Sonunda geldiğimiz noktada ise kullanıcı testi çalışmalarının sonuçlarından videolar üretmeye başladık.

Buradaki video da bir sitenin eski versiyonu ile yeni versiyonu arasındaki farkların rakamsal karşılığı bulunuyor.

Page 26: 1 Userspots UX Almanak 2015

26

Userspots UX Almanak 2015

PersonaPersona hali hazırda görsel tarafı güçlü olan bir UX çıktısı ama daha da etkili hale getirmek için gerçek ve gerçeğe yakın profiller kullanarak özel çekimler yapıyoruz. Stock fotoğraflar kullandığınız noktada yeteri kadar etki bırakamayabiliyorsunuz.

Customer JourneyMüşterilerin ürün ile yaşadığı etkileşimi ve yolculuğu göstermek adına da farklı görselleştir-meler kullanıyoruz. Service Blueprint gibi gösterimlerin yanında dairesel kullanımlarda bir “loop” olarak devam eden yolculuğu anlatmak için ideal bir görselleştirme şekli.

Page 27: 1 Userspots UX Almanak 2015

27

Userspots UX Almanak 2015

Benchmark

Lokal ve global rakiplerin hangi fonksiyonları kullandığı ve nelere odaklandığını daha net anlamak için de Sunburst gibi gösterimler dikkat çekici olabiliyor.

Google Analytics VerisiÇalışmalardan önce yaptığımız Google Analytics analizini bir infografiğe dökmek de verinin içinde kalmış vurucu noktaları ön plana çıkarmak için faydalı olabiliyor.

Görselleştirmenin detaylarına buradan ulaşabilirsiniz.

Page 28: 1 Userspots UX Almanak 2015

28

Userspots UX Almanak 2015

UX Görselleştirme İçin 6 İpucu1.Excel’in Dışına Çıkın

İstatistikleri Excel’den alıp grafiğe dökmek her zaman kolay ama Excel ve Powerpoint grafik çıktıları görsel anlamda yaratmak istediğimiz etki için çok faydalı değil.

2. Form Follows Data

Çıktılarımız daha güzel gözüksün derken görselliğin verinin önüne geçmesini de istemeyiz. Amacımız veriyi daha anlaşılabilir hale getirmek, harika bir görsel ile “Kullanıcılar daha ucuz olanı alıyor” gibi daha önce hiç duyulmamış bir insight’ı istediğiniz kadar süsleyin, olmayacak.

3. Hedef Kitlenizi Bilin

Görselleştirmeyi sunacağınız kitle yapacağınız görselleştirmeyi de etkiliyor. Eğer CEO görecekse detaylardan ziyade vurucu noktaları ön plana çıkartmalı, eğer ekibe sunuyorsanız her detayı görselleştirmeye dahil etmeye çalışmalıyız.

4. Beklentileri Netleştirin

Sunumun ve içeriğin ne olduğu toplantı öncesinde karşı tarafa net iletilmeli.

5. Daima CTA Ekleyin

Her görselleştirme sunumunun net aksiyonları olmalı. Benchmark çalışmasını sunarken grafiğin ne anlama geldiğini anlatıp sonrasında da bu grafikten çıkarılacak sonuçları da karşı tarafa iletilmeli.

6. İlham Alın

İlham almak konusuna her daim açık olun. Behance, Dribbble ve Information is Beautiful sizi bekliyor.

Page 29: 1 Userspots UX Almanak 2015

29

Userspots UX Almanak 2015

2015’in BizeArmağanı;

Optimizasyon Servisi ve UX Alive

Page 30: 1 Userspots UX Almanak 2015

30

Userspots UX Almanak 2015

Neden OptimizasyonEkibi Kurduk?Userspots olarak, 2009 yılından bu yana Kullanıcı Deneyimi üzerine hizmetler sunuyoruz. Kullanıcı Deneyimi kavramının çok geniş bir alana yayıldığı ve bünyesinde birçok disiplini barındırdığı gerçeği çeşitlenen kullanıcı alışkanlıkları ile daha da belirgin hale geliyor.

Bu noktadan hareketle, 2015 yılında hayata geçirdiğimiz Optimizasyon Servisi ile bir tasarım şirketine dönüştüğümüz sürecin sonunda “Veri Odaklı Tasarım Şirketi” etiketine sahip olmak için geçmişe dönük çalışmalarımız ve nedenlerimiz var. Bu nedenleri dört başlıkta açıklayabiliyoruz.

Page 31: 1 Userspots UX Almanak 2015

31

Userspots UX Almanak 2015

Harika Ürünler Geliştirmenin3 Temel NoktasıÜrün geliştirme süreçlerinde uzun süre bulunmamızın kazandırdığı deneyimle iyi ürün geliştirebilmenin temel taşlarını çok iyi biliyoruz.

Product ManagementKonu ile alakalı Product Manager’in patrona dahi hayır diyebilmesi, içinde bulunduğu sürece sahip çıkması, ürünü yaşatacak KPI’ları belirlemesi, “Ben Demiştim” kartlarını cebine koyarak güvenli alana çekilen ekip üyelerini projeye dahil etmek için verdiği savaş, ürünün hayatta kalması için olmazsa olmazları arasında yer almaktadır.

Sahipsiz ürün yaşamıyor!

Page 32: 1 Userspots UX Almanak 2015

32

Userspots UX Almanak 2015

UX Know HowBir ürünün KPI’ları, gitmek istediği yer, hedef kitlesinin mevcut deneyimi ve üründen beklentilerin ortak noktasını bulabilmek için hedef kitlenin tutum ve davranışlarını anlamak gerekiyor. İşte bu noktada devreye Kullanıcı Deneyimi Çalışmaları giriyor.

Agile Development

Ürünü MVP (Minimum Viable Product) ile hayata geçirdikten sonra, mevcut ürünü veriler ile 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 çok hızlı önceliklendirmeler yapabilmek hayati bir önem taşıyor. Agile Development bize bu esnekliği sağlıyor.

Bu üç noktanın orta noktasını bulduğumuzda çoğu zaman “İyi Ürün” ile karşılaşıyoruz. İyi ürün sürecinin başında doğru ürünü yaptığınızı kanıtlamaya çalıştığınız hareketlerin tamamı “Lean UX” başlığı ile karşımıza geliyor.

Bugüne kadar gördüğüm en iyi Lean UX hikayesi, tasarımını Userspots olarak staj programı çerçevesinde yaptığımız Kasko123 adlı kasko şirketine ait olduğunu söyleyebilirim. Kasko123 bizimle çalışmaya başlamadan önce fake bir anasayfa ve fake bir kasko listeleme sayfası oluşturulduktan sonra adwords ile gelen kullanıcı trafiği izlenmiş, bu gelen trafik üzerinden kaç kişi “Teklif Al” butonuna tıklamış, kaç kişi gelen fake tekliflerden birine satın almaya çalışmış istatistikleri tutulmuştu. Bir modelin çalışıp çalışıp çalışmayacağı kanıtlandıktan sonra modele yatırım yapmak kesinlikle daha doğru bir yöntem.

Tasarım şirketleri olarak bütün yapıyı tasarlayıp müşteriye sunmak ve sonrasında alkışlarla süreçten ayrılmak bizi iyi ürün hikayesinin bir parçası yapmıyor. İyi ürün hikayesinde başrolde yer almamız için Optimizasyon servisi sunmaya ihtiyacımız var.

“Kullanıcı Araştırmaları, Tasarım Kararlarını Doğrulamada Yeterli Değil!”

Bir ürünün tasarım sürecinde ne kadar fazla kişiyle görüşürseniz görüşün, beş kullanıcı ile test yaparak sorunlarınızın %75’ini bulduğunuzu varsayın, etnografik araştırmalarda sayının önemli olmadığından bahsedin, yine de milyon dolarlık tasarım kararları alırken dönüp dolaşıp aynı noktaya geliyoruz; Kaç kişiye sordunuz?

Örneğin; Hepsiburada için kategori ağacı çalışması yapıp menüyü soldan üste almak bir çok kişiye göre milyon dolarlık bir tasarım kararıydı ve sadece 200 kişiyle yapılan kart gruplama testinin sonuçları ile yeni kategori ağacını hayata geçirmek milyondan fazla kullanıcısı olan bir yapının iç süreçleri için fazlasıyla riskliydi.

Bu noktada daha geniş kapsamlı bir çalışma devreye girmeliydi ve girdi de. Mobil arayüzde 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 başlık haline geleceği için satışın azalacağı düşünülen kategorilerde beklenilen olmadı ve yeni ağaç testi başarıyla tamamladı.

Kaç kişiye sordunuz bunu? Sorusunun daha güzel bir cevabı artık var.

Page 33: 1 Userspots UX Almanak 2015

33

Userspots UX Almanak 2015

SAHİBİNDEN EMLAK IPAD UYGULAMASI İLE EMLAK ARAMA SÜRECİ

SON ARAMADAN BU YANA EKLENENLER

Son aramadan bu yana eklenen ilanlarıngösterilmesi

MESAJ BİLDİRİMİÖnceden belirlenen özelliklerde yeni ilan

eklendiğinde bildirim olarak alma

ZİYARET ETTİĞİM EVLER

Daha önceki aramalarda incelenen evlerin harita üzerinde gösterilmesi

FİLTRE - KONUM KAYDETME İstenilen konum ve filtreleme seçeneklerinin kaydedilerek sonraki aramalarda kullanılması

Emlak arama süreci sürekli tekrarlayan bir döngü olarak

gözlenmiştir. Bu nedenle sistemin tasarımı bu döngü içerisinde birbirini

izleyen aksiyonlara göre geliştirilmelidir.

EMLAK ARAMA DÖNGÜSÜ

EMLAKARAMA

1

EMLAKARAMA

3EMLAKARAMA

2

Satın Alma Yolculuğu Statik Değil!Tasarladığımız süreçlerin neredeyse tamamı “Uzay Boşluğunda Duran Kullanıcının” sitemize gelmesi ve istediklerimizi tek seferde yapacak olması varsayımına dayanıyor. İkinci ve üçüncü ziyaretlerinde artık çoğu şeyi unutmuş bir satışçıya dönüşüyor ve müşterimizi tanımak için onun bazı hareketler yapmasını bekler hale geliyoruz.

Oysa satın alma yolculuğu hiçbir zaman statik değil. Yolcuğumuz, fiziksel ve dijital kanallar arasında gidip gelen ve her defasında bir önceki durumdan devam etmesini beklediğimiz bir yapıya sahip. Bir emlak sitesi düşünün, eğer siz arama sonuçlarına favorilerinize almıyorsanız sizi hatırlamayıp her kapıdan içeriye girdiğinizde size “Buyrun neye bakmıştınız?” sorusunu iletiyor. Oysa siz o aramayı genelde aynı cihaz üzerinden 2 gün — 8 hafta sürecek ev arayışınız esnasında defalarca kez yapıyorsunuz. Bir önceki arayışınızdan 3 gün sonra tekrar geldiğinizde size;

“Arama kriterlerinize uygun 43 yeni ev var!”

Yorumunu daha güzel bir ifadeyle iletse, balık hafızalı bir emlakçıdan sizi tanıyan emlakçıya dönüşecek.

Page 34: 1 Userspots UX Almanak 2015

34

Userspots UX Almanak 2015

İş arama süreci de benzer döngülere sahip. Üç gün önce UX Designer olarak iş arayan kişinin bir sonraki gelişinde “Maden Mühendisliği” araması yapmayacağını tahmin edebiliyoruz. Sonraki ziyaretinde ulaşmak istediği “Ben Burada Yokken Neler Olmuş?” bilgisini kolayca sunduğunuzda statik olmayan yolculuğa karşı iyi bir deneyim sunan yapıya sahip oluyorsunuz.İşin güzeli, artık pazarlama otomasyon araçları “If This Than That” kurgularını kolayca oluşturabileceğiz yapılara sahip.

Verinin Girdiği Süreçten Ego Çıkıyor!

Verinin olmadığı yerde fikirler çatışmaya başladığında son söz HIPPO (Highest Paid Person’s Opinion) ’nun oluyor. Optimizasyon süreci şirketlerde ürün geliştirme yapısına dahil olduktan sonra “Bunun Testini Yapmış mıydık?” sorusunu duymaya başlayacak şekilde bir norma dönüşüyor. Sürece veri giriyor, ego ve benim dediğim olsunlar çıkıyor.

Mustafa Dalcı

Page 35: 1 Userspots UX Almanak 2015

35

Userspots UX Almanak 2015

UserspotsBig 4

Bu yılın bizim için en önemli noktası da yaptığımız 4 büyük projeyi adlandırdığımız Big 4’dü. Bu yıl boyunca üzerine çalıştığımız, tamamında mobile dokunduğumuz 4 büyük proje, Userspots’un büyük projeleri sonuna kadar takip eden, ürünün her etkileşiminden sorumlu ve bu işleri yapabilecek yetkinlikte olduğunu kanıtladı.

Page 36: 1 Userspots UX Almanak 2015

36

Userspots UX Almanak 2015

Hopi

Daha önce hiç bir ürün tasarım sürecimize CEO (Cem Boyner) ‘nun bu denli katıldığını ve katkıda bulunduğunu görmemiştik. Alışverişin her noktasına dokunan şu an 2.5 milyon kişiye ulaşan Hopi’nin kullanıcı deneyimini tasarlamak bu yılı harika hale getirmek için tek başına yeterli bile.

Hopi’nin tasarım sürecinde, 4 şehirden 9 katılımcı 4 hafta süresinde yaptıkları tüm alışverişleri(giyim, market, akaryakıt, eğlence…) kayıt altına aldılar.

3 Boyner, 2 YKM, 1 Beymen, 1 Fabrika ve Network mağazası ziyaretlerinde 38 saat gözlem süresi elde edidi ve farklı reyonlardan 40 satış temsilcisi ile görüşmeler yapıldı. 5 AVM ziyaret edildi, 30 müşteri ile alışverişleri ile ilgili görüşmeler yapıldı. Tüm kullanım senaryolarının düşünüldüğü 22 akış detaylandırılarak toplamda 638 ekran çalışıldı.

Page 37: 1 Userspots UX Almanak 2015

37

Userspots UX Almanak 2015

Bonus FlaşÜzerine en fazla emek verdiğimiz ve bunu da büyük bir gururla anlattığımız proje olan Bonus Flaş yıl sonuna doğru hayata geçti. Kullanıcıların alışveriş alışkanlıkları ile ürün KPI’larını orta noktada buluşturmak konusunu iyi kotardık.

Page 38: 1 Userspots UX Almanak 2015

38

Userspots UX Almanak 2015

Kullanıcıların kredi kartı kullanım alışkanlıklarını, bonus.com.tr ile olan etkileşimlerini incelemek için gerçekleştirilen; derinlemesine görüşmeler; kullanılabilirlik testleri, göz izleme testleri ve Garanti bankası şube, çağrı merkezi, iç ekipler ile yapılan görüşmelere ek olarak mobil deneyimi incelemek üzerine de bir çalışma gerçekleştirdik.

Bu çalışmada; 16 Bonus müşterisi ile alışveriş anı da dahil olmak üzere görüşmeler, Finansal işlem ve kampanya ile ilgili mobil uygulama alışkanlıklarına yönelik bir netnografi çalışması, Kredi kartı alışverişi günlük çalışması gerçekleştirildi.

Uygulamada kullanıcı deneyimi olarak;

- Finansal Gösterim ve Kampanyaların birleşimi, Aile Geçişi, Özet limit barı,- Hesap bilgilerinde akıllı ürün satış alanları, kartlar arası hızlı geçiş, - Akıllı kampanya gösterimi.- Zaman ve lokasyona bağlı Kampanya Gösterimi.- Kolay kampanya arama- Harita Üzerinden Kampanya Bulma - Kampanya Takip ekranları, ön plana çıkıyor.

Page 39: 1 Userspots UX Almanak 2015

39

Userspots UX Almanak 2015

HepsiburadaCheckout grafik tasarımı ile başlayan yolculuğumuz Iphone uygulaması deneyim tasarımı, Kategori Ağacı, Responsive Web ve Tablet uygulamasıyla devam etti. Şu an Hepsiburada’nın her noktasına Userspots’un önemli bir katkısı bulunuyor.

Page 40: 1 Userspots UX Almanak 2015

40

Userspots UX Almanak 2015

TEB“Para kadar kolay” diyerek tanıttığımız TEB Kosova, bankacılık işlemleri hayatında olmayan Kosova’lılara basit bir deneyim yaşatmayı amaçladı. Basitlik vurgumuz ile World Usability Congress’de“World Experience Award” aldık.

Page 41: 1 Userspots UX Almanak 2015

41

Userspots UX Almanak 2015

Pozumuzu da not düşelim:

Bize bu pozu verdiren uygulamayı tasarlarken, hızlı ve maliyeti daha düşük bir anket gönderip bankacılık deneyimimizden yararlanmak yerine Kosova'yı ziyaret edip, TEB Kosova'nın iç ve dış müşterileri ile görüşerek Kosova'daki bankacılık ve insanların TEB'e bakış açısını da gözlemlemeyi tercih ettik. Böylelikle, yeni Teb Kosova Mobil uygulamasını müşterilerin bankacılıktaki önceliklerinin nasıl farklılaştığını ve kafalarındaki yapıyı görerek hayata geçirdik. Müşterilerin sık kullandığı ürünler ve işlemler öne çıkarılarak bankacılık uygulamalarını öğrenmesi kolay ve kullanışlı bir ürün tasarlamaya çalıştık. Kosova'da TEB'in sektöre getirdiği farklılıklar ve ürünler ile kurduğu yenilikçi banka, teknolojiyi getiren banka imajını da kullanarak; mobil teknolojinin getirdiği yenilikçi özelliklere uygulamada yer verdik. (parmak izi, kullanıcıyı hatırlama, ön izleme vs. )

Teb Kosova kullanıcıları için en önemli ihtiyaç, sahip olduğu ürünlere hızlı ulaşım ve bu ürünler ile ilgili temel aksiyonları aldırabilmekti. Klasik banka uygulamalarından farklı olarak bu çalışmada fonksiyonlar üzerinden gitmenin kullanıcı açısından faydalı olmayacağı sonucuna ulaştık. Kullanıcı grubumuz bankacılık uygulamalarına oldukça uzak olduklarını gördük. Bu nedenle kullanıcıların ihtiyaçları önceden tanımlanmalıydı.

Araştırmalardan çıkan başka bir sonuçta ödemeleri ile ilgili doğru iletişime ihtiyaç duyulduğuydu. Bu ihtiyaca cevap verebilmek için ana sayfamızda takvim fonksiyonunu ekledik. Bu sayede kullanıcılar finansal takvimlerini oluşturarak ödemelerini ve varlıklarını kontrol altında tutabileceklerdi. Bize ödül kazandıran bu çalışmada, tasarımlarımızı bu ihtiyaçlara göre düzenledik.

Page 42: 1 Userspots UX Almanak 2015

42

Userspots UX Almanak 2015

Bir ürünün farklı varyasyonlarından hangisinin ihtiyaca uygun ve verimli olduğunu ölçümleyebildiğimiz bir test biçimidir. A-B Test Sürecinde, farklı içerik ve tasarım örnekleri sunularak, en iyi sonucu alma yoluna gidilir. Bu test sonucunda ürün için hangi alanlarda değişim yapılmak isteniyorsa, değişimlere dair istatistikler ve geri dönüşüm oranları çıkartılarak hangi versiyon ağırlıklı ise kullanıcıya o sunulur.

A-B Test

Page 43: 1 Userspots UX Almanak 2015

43

Userspots UX Almanak 2015

A-B Test ÖrnekleriFirma-1

Firma-2

Bir finans şirketi, yatırım planlarını personalar ile birleştirdiğinde plan satışlarına nasıl etki edeceğini öğrenmek için A-B testine başvuruyor.

Birinci tasarımda, yatırım planın riskleri ve karlılık oranları hakkında bilgiler veriliyor.

İkinci tasarımda, bu bilgilere ek olarak personaların bu plan hakkındaki düşüncelerine de yer veriliyor.

İkinci tasarım kullanıldığında, müşteriler personalar ile aralarında bir bağ kuramadığı için satışların düştüğü saptanmıştır.

Birinci tasarımla satışlarda %19 artış gözlemlenmiştir.

Firma, mobil sitelerinde depolama alanlarının rezervasyon oranlarını arttırmak için farklı buton renklerinin etkisini ölçmek üzere A-B testine başvuruyor.

Orijinal buton rengi mavi. Araştırmalar mavi rengin insanlarda güven duygusunu çağrıştırdığını gösteriyor.

Araştırma sonuçlarında turuncu rengin kullanıcılarda ürünün ucuz olduğu hissini uyandırdığı gözlemleniyor.

Aynı zamanda turuncu renk, hareket halindeki kullanıcıda hızlı karar verme dürtüsünü tetikliyor.

Sonuç olarak turuncu buton rezervasyon oranını %7,8, mobil site trafiğini de %12,3 arttırmıştır.

%19

%7,8

Page 44: 1 Userspots UX Almanak 2015

44

Userspots UX Almanak 2015

Bir depo kiralama firmasının mobil giriş sayfası.

Depo rezervasyonlarını arttırabilmek için tasarlanan yeni sayfa A-B testine tabitutuluyor.

Soldaki tasarım orijinal giriş sayfası.

Yeni tasarım kullanıldığında siteye kayıt ve çağrı merkezi aramaları %40 artış gösterdi.

Sağ taraftaki tasarımda;Rezervasyon oranları %23 artış gösterdi.

Bir e-ticaret firması iki farklı arama barı için A-B testi yapıyor.

Birinci tasarımda sade bir arama barı kullanılıyor.

İkinci tasarımda öneri sunan bir arama barı kullanılıyor.

Sitede öneride bulunan arama barı kullanıldığında, satışlarda %5, site ziyaretlerinde %8 artış saptanmıştır.

Firma-3

Firma-4

%23

%5

Page 45: 1 Userspots UX Almanak 2015

45

Userspots UX Almanak 2015

Bir e-ticaret sitesinin satışlarını arttırmak amacıyla giriş sayfası yerleşimini test ettiği bir A-B testi.

Orijinal giriş sayfasında: üstte yatay, solda dikey bir navigasyon tasarımı ve kampanyaların öne çıkarıldığı bir sayfa mevcut.

Yeni tasarımda ise soldaki navigasyon kaldırılmış ve ürünler sınıflandırılarak sergilenmiştir.

Daha sade görünen ikinci tasarım satışlarda %34,7 artış sağlayarak testin kazananı olmuştur.

Firma-5

Firma-6

Bir e-ticaret firması aylık paket planlarının satışını yükseltmek amaçlı A-B teste başvuruyor. Birinci sıralamada paket fiyatları, büyükten küçüğe sıralanıyor. İkinci sıralamada paket fiyatları, küçükten büyüğe sıralanıyor.

Araştırmalara göre kullanıcı ilk olarak yüksek fiyatla karşılaştığı zaman düşük fiyatı kabullenmesi daha kısa sürüyor.

Sonuç olarak firmanın aylık gelirinin %24,4 arttığı gözlemlenmiştir.

%34,7

%24,4

Userspots Optimizasyon ekibi tarafından hazırlanan A/B testine katılmak ister misiniz?

Page 46: 1 Userspots UX Almanak 2015

46

Userspots UX Almanak 2015

B-CLEARFRAMEWORK

DEFINE KPI’S

PERSONA

JOURNEY

ANALYTICS

USABILITY REVIEW

HEATMAP

Before StartOptimizasyon çalışmasına başlamadan önce Analiz evresi başlar. Google Anaytics ya da Adobe Analytics, Heat map ve mouse tracker araçları analiz edilir, daha önce yapılmış olan testlerin sonuçlarından çıkarılan öğrenimler incelenir, kullanıcı anketleri, kullanılabilirlik çalışmaları yapılır, sektör özelinde yapılmış olan A/B Test çalışmaları ve kullanıcı geribildirimleri incelenir.

Page 47: 1 Userspots UX Almanak 2015

47

Userspots UX Almanak 2015

BANNER

IMAGE

ICON

VIDEO

SHAPE OF BUTTON

BUTTON TO HYPERLINK

FONT

CAROUSEL

FORM ELEMENTS

Change

Web siteleri ve mobil uygulamalarda genel kabul gören best practiceler her sektör için geçerli olmayabilir. Hatta genelde aynı sektörde bile farklı kullanıcı kitleleri tarafından farklı tasarımlar daha kullanışlı kabul edilebilir. Websiteniz ya da mobil uygulamanız için en doğrusunu bulmak için en doğru yol sayfa içindeki elementler üzerinden değişiklikler yaparak sürekli test etmekten geçer.

Change Example: Bullet vs Slider

Page 48: 1 Userspots UX Almanak 2015

48

Userspots UX Almanak 2015

ACTION BUTTON

FOLD

FUNNEL

ONBOARDING

SPLASH SCREEN

PERSONALIZATION

CLICK TO CALL

NOTIFICATION

Look / AnalyzeA/B testler yalnızca sayfa elementlerinde yapıla-cak değişikliklerden ibaret değildir. Bir funnelı oluşturan tüm süreç değiştirilebilir, 4 adımdan 2 adıma düşürülen ödeme süreçleri denenebilir, üye olma süreçleri analiz edilerek alternatif süreçler test edilebilir.

Look/Analyze Example: Onboarding

Page 49: 1 Userspots UX Almanak 2015

49

Userspots UX Almanak 2015

ELEMENT SIZE

USER REVIEW,

TESTIMONIALS

BORDER

FLAG

LOGO

OFFER

BENEFITS

Emphasize

Bir sayfada kullanıcıları yönlendirmek istediğiniz birincil CTA’yı, satın aldırmak istediğiniz paketi, incelenmesini istediğiniz kampanya görselini, neyi ön plana çıkarmak istiyorsanız onu belirginleştirmek için çeşitli tasarım hileleri mevcut. Arkaplanı değiştirmek, boyutlarda değişiklikler yapmak, border eklemek, metin rengini ve stilini değiştirmek akla ilk gelen örneklerden. En iyi çalışan tasarımı bulmak için ise çeşitli testler yapabilirsiniz.

Emphasize ExampleÖdeme Paketleri

Page 50: 1 Userspots UX Almanak 2015

50

Userspots UX Almanak 2015

LEAD FORM

POP-UP

ONBOARDING

FEEDBACK FORM

Add

Kullanıcıları birincil CTA’na yönlendirmek için POP-UP’lar çıkarabilir, formlar ekleyebilir-siniz. Hatta tekrar tekrar aynı işlemleri yapan kullanıcılar için özelleşmiş metinler içeren pop-uplar çıkarılması en sık kullanılan ve test edilen yöntemlerden.

Add Example:Since Last Visit

Page 51: 1 Userspots UX Almanak 2015

51

Userspots UX Almanak 2015

DEFINE KPI’S

PERSONA

JOURNEY

ANALYTICS

USABILITY REVIEW

HEATMAP

RearrangeA/B testlerin en sık kullanılan versiyonlarından biri de Split testingtir. Split test bir sayfanın en baştan tasarlanarak 2 farklı varyasyonun test edilmesi anlamına gelir. En baştan tasarım yapılma aşamasında bir önceki sayfadan elde edilen tüm verinin analiz edilerek kullanılması en sağlıklısı olacaktır. Sayfa bazlı kalitatif ve kantitatif veriler incelenerek yeni sayfa tasarımları hazırlanabilir ve test edilebilir.

Rearrange ExampleRedesign

Page 52: 1 Userspots UX Almanak 2015

52

Userspots UX Almanak 2015

WEB Sizin için Çalışsın!

Gelişen ve hızlanan dünyada firmaların bir ürünü ön plana çıkartması, tanıtması ve satışını yapması her geçen gün daha da zorlaşıyor. Bu nedenle şirketlerin pazarlama departmanlarına çok iş düşüyor. Fakat bu kadar fazla pazarlama opsiyonun olduğu dijital dünyada elbette ‘Dijital Pazarlama Araçları’nın varlığı firmalar için vazgeçilmez oluyor.

Pazarlamanın asıl amacını ürün ya da servisin ilgi çekiciliğini arttırmak, hedef kitlenin satın almaya yönelmesini teşvik etmek olarak tanımlayabiliriz. Bu nedenle de mümkün olduğunca pazarlanacak ürünü ya da servisi müşteriye özelleştirmek, ona uygun olduğunu hissettirmek ve bunun için ciddi efor sarfetmek, strateji planlaması yapmak gerekiyor. Otomasyon ise insan eli değmeden yapılan, tamamen dijital bir sisteme bağlı olarak işleyen sistem anlamını taşıyor. İşte bu noktada Dijital Pazarlama bu iki birbirinden bağımsız gözüken kavramı bir araya getiriyor.

E-mail pazarlamasından türeyen dijital pazarlama otomasyonunun asıl amacı, otomatik tekrarlanan işlerde insan hatasını en aza indirmek olarak tanımlanabilir. Günümüzde pazarlama otomasyon araçları yalnız e-mail için değil, mobil pazarlama, içerik pazarlama, sosyal medya pazarlaması, analytics ya da SEO için de kullanılan araçlar haline geldiğini görüyoruz. Her ne kadar daha çok B2B pazarlama da ihtiyaç duyulsa da B2C’de de kullanımı oldukça yaygın olarak karşımıza çıkıyor.

Page 53: 1 Userspots UX Almanak 2015

53

Userspots UX Almanak 2015

Highrise, kullanıcının çalışma ekibi ile kontaklarını paylaşmasını kolaylaştıran, görevlerini, hatırlatıcılarını ve tekliflerini takip etmesini sağlayan otomasyon aracıdır. Ayrıca, iş kontaklarıyla iletişimlerin yönetmesini de sağlamaktadır.

Highrise

Pardot

Bir salesforce.com şirketi olan Pardot, satış ve pazarlama ekiplerinin birlikte maksimum verim ve kazançla çalışmasını sağlayan bir otomasyon aracıdır. Bardot’nun lead yönetim yazılımı, CRM entegrasyonu, email pazarlaması, lead beslenmesi, lead skorlanması ve ROI (yatırım getirisi) raporlanması gibi fonksiyonları içermektedir.

Page 54: 1 Userspots UX Almanak 2015

54

Userspots UX Almanak 2015

Zapier

Zapier, kullanmakta olduğunuz diğer uygulamalara kolayca bağlanır ve görevlerin otomasyonunu sağlar. Kullanıcı öncelikle kullanmak istediği uygulamayı seçer - bu mail olabilir, ya da bir salesforce’taki lead oluşturma da olabilir. Ardından bu durumdaki alacağı aksiyonu belirledikten sonra otomasyon oluşmuş olur. Zapier, kullanıcının tekrarlayacağı işleri üstlenerek işlemleri gerçekleştirir. Bunun gibi pek çok farklı işlem Zapier yardımıyla yapılabilir.

Ecquire, sosyal ağlardaki profillerden lead ekleme, müşterilerden gelen mail ve mesajları otomatik olarak saklama, heryerde CRM (müşteri ilişkileri yönetimi) araştırması yapabilme, en çok kullanılan CRM uygulamaları ve web siteleriyle uyumlu olarak çalışabilme gibi işlemleri içeren otomasyon aracıdır.

Ecquire

Page 55: 1 Userspots UX Almanak 2015

55

Userspots UX Almanak 2015

Pazarlama alanın neredeyse en önemli aracı olan Google Analytics, ortalama %73’lük bir kitle tarafından tercih edilir. Google Analytics ile web sitesine gelen ziyaretçi trafiği, detaylı istatiksel bilgiler, sitenin ziyaretçileri hangi siteden sonra kullanıcının sitesine ulaşmış, sitede ne kadar süre kalmış, ürün alımları, hangi işletim sistemini kullandığı gibi pek çok sorunun yanıtına ulaşabiliyor. Böylelikle müşterilerin yolculuğu çıkarılarak, daha iyi pazarlama stratejisi oluşturabilmeyi olanaklı kılıyor.

Google Analytics

Optimizely

Optimizely A/B test otomasyonları arasında en çok tercih edilen araçlardan bir tanesi olarak karşımıza çıkıyor. Optimizely, sitenin içerik ya da tasarım açısından iki farklı örneğinin karşılaştırılmasına olanak sağlıyor. Böylelikle sitenin dönüşüm oranlarına bakılarak hangi opsiyonun daha fazla kar ettiği bulunuyor ve site ona göre şekillendiriliyor.

Page 56: 1 Userspots UX Almanak 2015

56

Userspots UX Almanak 2015

Typeform

Typeform kullanıcının test, anket, form, quiz, landing page gibi daha çok ölçümlenebilir sayfa oluşturmasına ve bunu MailChimp, Salesforce gibi diğer araçlarla birlikte çalışarak çoklu gönderilmesine olanak sağlıyor. Etkileşim oranının yüksek olması, Typeform’u sık kullanılır bir araç olarak ön plana çıkartıyor.

Sitelerin sıcaklık haritalarının, tıklanma haritalarının, sayfa kaydırma haritalarının çıkarılmasını sağlayan Crazy Egg, kullanıcıların sitede nasıl bir yolculuk yaptığını anlamaya yardımcı oluyor.

CrazyEgg

Page 57: 1 Userspots UX Almanak 2015

57

Userspots UX Almanak 2015

Unbounce

HubSpot

Hazır şablonlarla Landing Page oluşturmayı kolaylaştıran Unbounce, sitenin kendini domaini altında yayınlamaya, Landing Page’in A/B testinin yapılmasına ve sonrasında da sayfanın optimize edilmesine olanak sağlıyor.

Çok sayıda otomasyon işleminin gerçekleşmesine olanak sağlayan HubSpot, içerik optimizasyon sistemi ile kullanıcılara kişileştirilmiş deneyim sunuyor. Ayrıca, SEO ve Blogging optimizasyonu süreçlerinde destek sağlıyor. Bunun yanısıra otonomize edilmiş mailing çalışmalarına ve kişiselleşmiş mail kampanyaları oluşturabilmenize olanak sağlıyor.

Page 58: 1 Userspots UX Almanak 2015

58

Userspots UX Almanak 2015

Kullanıcı DeneyimininUsta İsimleri UX Alive Konferansı ile İstanbul’da Buluştu.

UX Alive2015

ExperianceEverywhere ana teması etrafında şekillenen UX Alive Konferansı, Kullanıcı Deneyiminin dokunduğu çoğu sektörden katılımcı ve konuşmacılara ev sahipliği yaptı.

Süleyman Duman Content Editor-Marketing/Userspots

Page 59: 1 Userspots UX Almanak 2015

59

Userspots UX Almanak 2015

Userspots olarak, Türkiye’de ‘Kullanıcı Deneyimi’ alanında UX Alive gibi önemli bir konferansı gerçekleştirmiş olmak, 2015 yılı içerisinde yaşadığımız büyük gururlardan bir tanesi oldu. Aynı zamanda gelecek yıllar için motivasyon kaynağı olduğunu da söyleyebiliriz. Bu motivasyonla ve sizlerden aldığımız destekle bu yıl daha iyi bir konferans deneyimi yaşatmak adına çok çalışıyoruz. Hem geçen yılı hatırlamak hem de önümüzdeki konferansta bizleri nelerin beklediğini anlatmak adına kısa bir derleme yapalım istedik.

Tüylerimizin diken diken olduğu görkemli bir açılış videosu nun ardından Userspots’un kurucusu Mustafa Dalcı’nın yaptığı açılış konuşması ile UX Alive Konferansı başlamış oldu.

Geçen yıl 13-14 Mayıs tarihleri arasında, İstanbul Wyndham Grand Otel’de gerçekleştirdiğimiz UX Alive Konferansı, dünyanın önde gelen firmalarından tasarımcıları ve UX uzmanlarını konuşmalar yapmak ve workshoplar gerçekleştirmek üzere İstanbul’da bir araya getirdi. Ayrıca konferans, 23 ülkeden 550 katılımcıya ev sahipliği yaptı. İlk gün konuşmalar ve sunumların olduğu UX Alive Konferansı’nda ikinci gün deneyim odaklı workshoplar uzman isimler eşliğinde gerçekleştirildi.

UX Alive Konferansı’ndaNeler Oldu?

Page 60: 1 Userspots UX Almanak 2015

60

Userspots UX Almanak 2015

Kimler Katıldı?Türkiye’den ve dünyadan önemli firmaların katıldığı konferansta genel katılımcı profili şöyleydi;

Üst Düzey Tasarımcılar ve Ürün Geliştirme Müdürleri (Hepsiburada, çiçeksepeti, n11, Markafoni, Morhipo, Kliksa,Turkcell, Avea, TTNET…) Banka IT Başkanları ve Tasarımcılar (Garanti Bankası, İş Bankası, Vakıfbank, Yapıkredi Bankası, A Bank, Finansbank, ING Bank, Kuveyt Türk Bankası…) Genel Müdür ve Şirket Kurucuları ( Vuslat Doğan Sabancı, Bülent Başaran…) Dijital Basın Temsilcileri ( Hürriyet, Radikal, Ekonomist, Zaman, Webrazzi…) Yurt Dışı Firmalar ( Google, Apple, IBM, Facebook, Medium, Foursquare,Uber, Simple, Moven, New York Times, Soundcloud, travelbird, yandex, Baymard Institute..)

UX Alive Konuşmacıları

Türkiye’nin ve dünyanın önde gelen şirketlerinden temsilciler UX Alive Konferansı için özel hazırladıkları sunumları katılımcılarla paylaştı. Birçok büyük firmanın deneyimlerini nasıl tasarladıkları, nelere dikkat ettikleri ve bizlere sundukları öneriler dikkate değer bir paylaşım olarak hafızalara kazındı.

Page 61: 1 Userspots UX Almanak 2015

61

Userspots UX Almanak 2015

Keynote

UX Alive’ın Keynote konuşmacıları; Giles Colborne, Elaine Brechin Montgomery (Facebook), Dustin Senos (Medium), Jambu Palaniappan (Uber)

KonuşmacılarChristian Holst (Baymard Institute), Ashwin Sodhi, Vitaly Friedman (Smashing Magazine), Toby Sterrett (Simple), Başak Haznedaroğlu (Foursquare),Mohamed Khalil (Moven), Alessandra Villaamil (New York Times), Job Jansweijer (KonneKt Play), Eileen Chang (Odesk), Aras Bilgen (ciceksepeti.com),Gokhan Besen (hepsiburada), Mehmet Doğan (twofour54), Sophie Kleber (Huge), Yalçın Pembecioğlu (BiguMigu), Hasan Yalçın, Jeff Romi, Mert Hürtürk (Sendloop), Mert Yılmaz (dugun.com), Ali Beklen (HotelRunner)

Page 62: 1 Userspots UX Almanak 2015

62

Userspots UX Almanak 2015

Panel Konuşmacıları

Emrah Olgun (Startup Kitchen), Sean Yu (Parasut), Ali Halabi (Volt), Ari Bencuya (8digits), Pelin Kenez (Zeplin) UX for Startups adı ile düzenledikleri panelde startups ların tasarım sorunları ve çözüm önerileri üzerinde durdular.

Design Clinic ve UX Kariyer KoçluğuEtkinlik alanına kurduğumuz Dizayn Klinik standı ile katılımcıların kendi seçtikleri alanlardaki web siteleri ve mobil uygulamaların kullanıcı deneyimi analizleri uzman görüşleri eşliğinde değerlendirildi. Giles Colborne tüm etkinlik boyunca katılımcıların tasarım sorularını yanıtlamaya çalıştı, gönüllerimizi fethetti.

Yine etkinlik alanında yer alan Kariyer Koçluğu standımız ile UX Kariyerine yön vermek isteyen veya danışmanlık talep edenler için uzman isimler önerilerde bulundu.

Page 63: 1 Userspots UX Almanak 2015

63

Userspots UX Almanak 2015

Workshoplar

UX Alive’ın workshop yürütücüleri anmadan geçilmez. Giles Colborne, Vitaly Friedman, Humberto Matas, Can Yükselen, Levent Altunyurt, Gökhan Besen, Hasan Yalçın, Agnieszka Mozol, Krystian Mrozek. UX Alive’a worksoplarıyla renk kattıkları için sonsuz teşekkürler.

UX Alive’ın ikinci gününde düzenlediğimiz workshoplar oldukça keyifli geçti. Özellikle Vitaly Friedman’ın sempatik yaklaşımı, Giles Colborne’ın etkinliğin her yerinde olması, Humberto Matas’ın gözümüzün önünde duran ama göremediğimiz tasarım problemlerine değinmesi, UX The Game ekibi ile oyun tadında UX yaklaşımları, Hasan Yalçın’ın kağıt ve kalem ile başlattığı tasarım serüveni ile dolu dolu bir workshop günü geçirmiş olduk.

Page 64: 1 Userspots UX Almanak 2015

64

Userspots UX Almanak 2015

Online eğitim kanalı olan Udemy UX Alive katılımcılarına özel %75 indirim imkanı sundu.Ayrıca konferansın tüm konuşmaları udemy üzerinden ücretsiz!

UX Alive Konferansı’na dair tüm haberleri ve gelişmeleri www.uxalive.com adresinden ayrıca facebook ve twitter sayfalarımızdan takip edebilirsiniz.

#UXAliveTurkey

Page 65: 1 Userspots UX Almanak 2015

65

Userspots UX Almanak 2015

Tüm dünyadan UX alanına ilgi duyan insanları bir araya getirmek bizim için büyük bir mutluluktu. UX Alive’16 için şimdiden haritamız çeşitlenmeye başladı bile.

Ayrıca geçen yıla ait ayrıntılı case sayfamıza buradan ulaşabilirsiniz.

Page 66: 1 Userspots UX Almanak 2015

66

Userspots UX Almanak 2015

UX Alive 2015 Sponsorları

Maddi manevi bu konferansın gerçekleşmesini destekleyen tüm sponsorlarımıza çok teşekkür ederiz.

Kahramanlar SahnedeUX Alive Konferansı’nın gerçekleşmesinde belki de en büyük katkısı olanlar için sahneye çıkma vakti...

Page 67: 1 Userspots UX Almanak 2015

67

Userspots UX Almanak 2015

UX Alive 2016’da Bizi Neler Bekliyor?

UX Alive Konferansı 11-12-13 Mayıs tarihleri arasında İstanbul Wyndham Grand Otel’de düzenlenecek.

UX Alive Konferansı bu yıl 800’ün üzerinde katılımcıya ev sahipliği yapmaya hazırlanıyor. Ayrıca konferans geçen yılın iki katı alana yayılarak iki büyük salonda gerçekleşecek.

Page 68: 1 Userspots UX Almanak 2015

68

Userspots UX Almanak 2015

Workshplar Bu Yıl 2 Gün!

Premium Workshoplar Bu yılın yeniliklerinden biri de premium workshoplar. Deneyimi bir tık yukarıya taşıyacak,spesifik konularda uzmanlarla bire bir öğrenme sürecine girebileceksiniz. Vitaly Friedman ve sürpriz isimler bu yıl premium workshop yapmak için UX Alive Konferansı’na gelecek.

Geçen yıl workshopların çok sevilmesi ve sizlerden gelen talep üzerine bu yıl workshopları 2 gün olarak düzenliyoruz. Kullanıcı Deneyimi noktasında uzman isimlerin düzenleyeceği workshoplarla daha fazla deneyime dayalı bir konferans sizleri bekliyor olacak.

Page 69: 1 Userspots UX Almanak 2015

69

Userspots UX Almanak 2015

UX Alive’16 Konferansı’nınKonuşmacıları Belli Olmaya Başladı.

İşte konferansın belli olan ilk 9 konuşmacısı.

Jenny Gove / Google

Google’daki kariyerine UX Researcher olarak başlayan Jenny Gove, günümüzde Mobil Reklam Ürünlerinde UX Lead görevini üstleniyor. Psikoloji backgrounduna sahip olan Gove, eğitici teknoloji üzerine doktorası var. Google bünyesinde Mobil Site Tasarım İlkeleri Raporu’nu yazan ekibin yöneticiliğini yapmıştır. Aynı zamanda kendisinin Mobil Deneyim odaklı pek çok yayını ve 2002’de aldığı bir patenti de bulunmaktadır.

Gregg Bernstein / Mailchimp

Gregg Bernstein designer geçmişinin yanısıra Georgia State Üniversitesi’nde ve Savannah College’da Grafik Tasarımı üzerine eğitmen olarak görev yapmıştır. Mailchimp kariyerine ise bundan 5 yıl önce UX Araştırmacısı olarak başlamış ve şu anki pozisyonu Araştırma biriminin yöneticiliğine hızla yükselmiştir. Kendisi Kullanıcı Deneyimi Araştırması üzerine pek çok yayının sahibi olmanın yanısıra aynı zamanda MailChimp’in 2014’te hazırladığı ebook olan The UX Reader'da görev almıştır.

Vitaly Friedman / Smashing Magazine

Front-end topluluğunun yakından tanıdığı konuşmacı, yazar ve Smashing Magazine’nin genel yayın yönetmeni Vitaly Friedman, konuşma yapmak ve ‘Premium Workshop’ gerçekleştirmek için bir kez daha UXAlive Konferansı’na geliyor.

Online ve ofline alanlar için kullanıcı deneyimi odaklı work-shoplar düzenleyen Friedman, Smashing Conference’i bir marka yaparken, dünyada responsive design ve e-ticaret alanlarında aranan yüzler arasında gösterilmektedir.

Page 70: 1 Userspots UX Almanak 2015

70

Userspots UX Almanak 2015

Ronel Mor / DropRewiew Ronel Mor’un 1994 yılında İsrail’de kurduğu UX Danışmanlığı ve Tasarım firması olan Mantis, bölgenin lider firmaları arasında yer almaktadır. 2014 yılında Google’ın en iyi 100 uygulamalarından biri olan samba.me'nin kurucu ortaklığını üstlenmiştir. Ronel Mor, kariyeri doğrultusunda bilgi mimarisi, UX Design, Komplex İnternet Ürünleri ve Hücresel Uygulamalar konusunda uzmanlaşmıştır. Endüstriyel tasarım ve görsel iletişim tasarımı eğitimine sahip Ronel, halen İsrail’de Bezalel Akademisi’nde İnteraktif Dizayn Bölümü’nün başkanlığını yapmakta ve 2012 kurduğu dijital pazarlamada kullanıcıya kolaylık sağlayan bulut DropReview'ın CEO görevini yapmaktadır.

Paul Veugen / Human

Girişimcilik kariyeri olan Paul Veugen 2009’da ilk şirketi Usabilla’yı kurmuştur. Siteler ve mobil uygulamalarda kullanıcıya geri bildirim yapma olanağı sağlayan araç Usabilla başarıya ulaştıktan sonra, Paul şirketi emin ellere bırakarak, Human.co 2012 yılında kurmuştur. Aynı zamanda üç yıldır startupların ortak hedeflerle birlikte çalışmalarına olanak sağlayan Rockstart’ın mentorlüğünü de yapmaktadır.

David Peter Simon / World IA Day 2016

Daha önce ThoughtWorks’da Senior Deneyim Danışmanı olarak görev yapan David Peter Simon, şu sıralar Oxford İnternet Enstitüsü’nde yüksek lisans araştırmasına devam etmektedir. Bunun yanısıra fotoğraf etnografçısı, yazar, etkili bir konuşmacı olan Simone,UXBooth, UXMag, UXMatters gibi pek çok dergide yazılarına yer verilmiştir. David gerçekleştirdiği pek çok projeyle birlikte bu sene World IA Day 2016 etkinliğinin global yapımcılarından biri olma görevini de üstlenmiştir.

Page 71: 1 Userspots UX Almanak 2015

71

Userspots UX Almanak 2015

Adrian Zumbrunnen / UX Designer

Adrian Zumbrunnen UX Mühendisi ve Designer olarak Google’da görev yapmaktadır. Zurich’te yaşayan Adrian, kendisini Kahve tutkunu, yazar ve konuşmacı olarak nitelendirmektedir. Yazılarını daha çok blogunda paylaşsa da Medium ve Smashing Magazine’de yayınlanmış pek çok yazısı da yer almaktadır.

Ramy Nassar / TEDxWaterloo

Toronto’da yaşayan Ramy Nassar, insan odaklı dizaynı inovasyonla buluşturmayı hedefleyen yazılım firması Architech'te İnovasyon Servis Departmanının Direktörü olarak görev yapıyor. Görevi kapsamında projelerin Servis Dizaynlarını ve Dizayn Stratejilerini belirlemekte ve şirket içi ekiplere liderlik etmektedir. Aynı zamanda 6 yıldır her sene gerçekleştirilen TEDxWaterloo'nun da kurucusu ve yönetici direktörlüğünü üstlenmektedir.

Zoltan Kollin / Ustream

Ustrem'deki Kullanıcı Deneyimi departmanını yöneten Zoltan Kollin, UX dünyasının genel algılarını yıkmayı hedefleyen, pek çok yayınlanmış araştırmayı da kanıt olarak okuyucuya sunan UX Myths bloğunun yazarlarından biri. Bununla birlikte kendisi web uygulamaları ve internet bağımlısı.

Page 72: 1 Userspots UX Almanak 2015

72

Userspots UX Almanak 2015

Page 73: 1 Userspots UX Almanak 2015

73

Userspots UX Almanak 2015

2015Trendler

Page 74: 1 Userspots UX Almanak 2015

74

Userspots UX Almanak 2015

2015UI Trendleri

Türkçe’de tam olarak ‘’akım’’ anlamına gelen Trend, moda, teknoloji ve tasarım başta olmak üzere birçok alanda kullanılır. Trend, yakın bir geçmişte ya da daha uzun bir süre diliminde toplumun belli bir kısmı tarafından benimsenen bir davranışı, hareketi ya da tutumu temsil eder.

Trend Nasıl Oluşur?

Kimi zaman bireylerin birbirini etkilemesi geniş bir kitleye dönüşür. Kimi zaman da, bir birey ya da bir kurum kitleleri tek başına etkileyebilecek ve yönlendirebilecek trendler yaratabilir.

Bireylerin yaptığı tasarımların sosyal medya ve internet aracılığıyla kitleleri etkilemesi olduğu gibi, büyük oyuncuların da kitleleri etkilemesi söz konusu olabilir.

2013 yılında ilk örneklerini görmeye başladığımız flat design, tasarım trendi olarak hızlıca yayıldı ve Microsoft Metro UI iOS 7 ile geniş kitlelere ulaştı. Belki de birçok trend gibi varolana, yani Skeumorphism’e tepki olarak ortaya çıktı.

Oğuz ArıkanUI Designer/Userspots

Page 75: 1 Userspots UX Almanak 2015

75

Userspots UX Almanak 2015

2013 yılında ilk örneklerini görmeye başladığımız flat design, tasarım trendi olarak hızlıca yayıldı ve Microsoft Metro UI iOS 7 ile geniş kitlelere ulaştı.

Flat Design da birçok akımda olduğu gibi mevcut olan akıma, yani Skeumorphism’e tepki olarak ortaya çıktığını söyleyebiliriz.

Kim Kimi Etkiler?

Joseph Machalani 2014 yılında iOS 7 için yaptığı bir çalışmayla geniş kitlelerin dikkatini çekmeyi başardı.

Seçtiğiniz uygulama kısayolunu pinch hareketiyle büyütebilmenizi ve uygulama içine girmeden bilgi ve aksiyon alabilmenizi sağlıyor.

Page 76: 1 Userspots UX Almanak 2015

76

Userspots UX Almanak 2015

Flat DesignSessiz harflerin çoğunluğu yüzünden adını telaffuz etmekte çok zorlandığımız Skeumorphism’e bir isyan olarak doğan flat design, 2012 sonrası ilk örneklerini gördüğümüz ve Microsoft Metro UI ve Apple’ın iOS 7 güncellemesiyle tüm dünyanın kendisinden haberdar olduğu bir trend oldu.

Tasarım dünyasında uzunca bir süre yerini koruyacak olan flat design, zaman içinde evrimleşerek semi-flat ya da flat 2.0 gibi S trendlerle etkisini sürdürüyor.

Page 77: 1 Userspots UX Almanak 2015

77

Userspots UX Almanak 2015

Flat Tasarımın Faydaları Neler Oldu?

Tüm tasarımcıları daha basit düşünmeye zorladı. Sayfaların yüklenme hızlarını arttırdı. Responsive design ve modern framework ile günün ihtiyaçlarına uyumluluk gösterdi. Kullanıcılar için öğrenmesi ve gezinmesi çok daha kolay ve göz yormayan bir tasarım sağlanmış oldu.

Semi-Flat Ya da Flat 2.0 Nedir?

Flat tasarımın ilk örnekleri tam anlamıyla tek yüzeye sahipti ve hiçbir boyut algısı yoktu. Flat 2.0 ya da semi-flat ise, bazı elementleri gözle daha rahat algılanır yapan ve sadece gölgelerle size ipuçları veren bir trend olarak karşımıza çıkıyor.

Page 78: 1 Userspots UX Almanak 2015

78

Userspots UX Almanak 2015

Google’ın geçtiğimiz sene duyurduğu Material Design , tam olarak semi-flat diyebileceğimiz bir tasarım rehberi olarak karşımıza çıktı.

Kağıdın kendisini bir metafor olarak ele alan ve kullanıcıların ana aksiyonlarına vurgun yapan, teknolojinin gücüyle birlikte animasyonu doğru şekilde yönlendirebilmek için kullanan bir tasarım rehberi diyebiliriz.

Material design için, flat tasarımla birlikte ‘Z’ eksenini kullanarak oluşturduğu katmanlarla kullanıcıya ipuçları vermeye çalışan bir rehber olarak özetleyebiliriz.

Material Design

Tasarım Yaparken Nelere Dikkat Etmeli?

Renk paletini olabildiğince sınırlı tutmaya çalışın ve gerekmedikçe renk eklemeyin.

Flat tasarımlarınızı ikon ve fotoğraflarınızla hareketlendirmeyi unutmayın.

Renk seçimlerinizde, renklerin anlamlarını ve sıcak, soğuk ilişkilerine dikkat edin.

Popüleretesi yüzünden yaşanabilecek benzer çözümlere dikkat edin.

Page 79: 1 Userspots UX Almanak 2015

79

Userspots UX Almanak 2015

Square

Sanal pos yazılımı sağlayan Square, arayüzünde flat tasarım öğelerini kullanıyor.

Mavi’nin doygunluğu daha düşük olan flat diyebileceğimiz baskın renk seçimi, tek renkli ve çerçeveli ikonları, doku, degrade gibi öğeleri barındırmayan sade arayüzüyle başarılı flat design örneklerinden biri.

Page 80: 1 Userspots UX Almanak 2015

80

Userspots UX Almanak 2015

Treehouse

Hero bannerında kullandığı tek renk arka plan ve pastel tonların kullanıldığı illustrasyonlarını beyaz zemin üzerine yerleştiren Treehouse, online eğitim platformları arasında flat tasarım örneklerinden biri.

Page 81: 1 Userspots UX Almanak 2015

81

Userspots UX Almanak 2015

Uber Geçtiğimiz sene Türkiye’de de faaliyetlerine başlayan Uber, hero alanında kullandığı tam sayfa fotoğrafı üzerine serifsiz yazı tipleriyle verdiği mesajı ve tek renk butonuyla ilk anda tasarımı hakkında yeterince fikir veriyor.

Uygulamasından ekranlar koyarak yerleştirdiği faydaları incelediğimizde de, uygulamanın da aynı şekilde flat tasarıma sahip olduğunu görüyoruz. Siyah, beyaz ve mavi ile sınırlı tuttuğu renk paleti ve ekran içinde yer alan tek bir içerik konseptiyle Uber’de başarılı örneklerden biri.

Page 82: 1 Userspots UX Almanak 2015

82

Userspots UX Almanak 2015

Yüksek ÇözünürlüklüArka Planlar

Bu yılın tasarım trendleri arasında geniş ve etkileyici arka plan görselleri veya videoları yer alıyor. Geçen yıldan bu yana etkisini kaybetmeyen bu trend, web sitenizi ön plana çıkartmanın en kolay yollarından bir tanesi olabiliyor. Bu tasarım trendinin iyi uygulanması ise kaliteli içerik ve doğru yönlendirme ile mümkün olabiliyor.

Web sitesi uygulamalarınızda bu tarzda bir giriş yapacaksanız mutlaka, tipografiyi ön plana çıkartmalısınız.

Page 83: 1 Userspots UX Almanak 2015

83

Userspots UX Almanak 2015

Userspots olarak Kullanıcı Deneyimi Araştırmalarını ve Kullanıcı Arayüzü tasarımlarını yaptığımız nef.com.tr için büyük görsel kullanımı ile minimalistik bir tasarım gerçekleştirmiş olduk.

NEF

Page 84: 1 Userspots UX Almanak 2015

84

Userspots UX Almanak 2015

Userspots olarak Kullanıcı Arayüzünü tasarladığımız seninbankan.com.tr için, Ana Sayfa’da büyük görsel kullanımı ve tipografiyi ön plana çıkarmaya çalıştık.

Kuveyt Türk/ Seninbankan

Page 85: 1 Userspots UX Almanak 2015

85

Userspots UX Almanak 2015

Slack

Yüksek çözünürlüklü arkaplan örneklerinden bir diğeri ise, takım içi iletişim ve paylaşım tool’u Slack. Slack her ziyaretinizde gösterdiği farklı fotoğraflar ile, Nasa dahil olmak üzere geniş bir yelpazede birçok ekibin Slack kullandığını öne çıkartıyor. Nasa’nın bile kullandığı bir tool’u siz nasıl kullanmazsınız?

Page 86: 1 Userspots UX Almanak 2015

86

Userspots UX Almanak 2015

MinimalismMimari ve resim gibi diğer sanat disiplinlerinden de aşina olduğumuz bir yaklaşım olan minimalism, modern web ve uygulama örneklerinde de güçlü bir şekilde karşımıza çıkıyor.

‘Less is More’ mottosuyla konuşma dilimize de yerleşen minimalism, negatif alan yaklaşımı, sınırlı renk paleti ve sade fontlarıyla zamansız bir trend oluyor.

Page 87: 1 Userspots UX Almanak 2015

87

Userspots UX Almanak 2015

Mailchimp

E-mail marketing denince sektörün lider konumunda olan mailchimp,konu sadelik olunca akla gelen ilk örneklerden birisi oluyor.

‘Send Better Email’ mottosu ve panelinden bir ekranla kullanıcılarını karşılayan Mailchimp, az şey ile çok şey söylüyor. Sadelik temalı sosyal medya çekimlerinde de görmeye alışkın olduğumuz gündelik hayat objeleriyle yarattığı arkaplanıyla, MailChimp çok temiz bir tasarıma imza atıyor.

Ana sayfasıyla birlikte alt sayfaları ve paneli ile sadelik temasını sürdüren mailchimp, arayüz içine yerleştirdiği kolay anlaşılır ve espirili metaforlarıyla da minimalism örnekleri arasında üst sıralara yerleşiyor.,

Page 88: 1 Userspots UX Almanak 2015

88

Userspots UX Almanak 2015

Simple

Bir bankacılık uygulaması olan Simple, aslında adıyla da hem kullanıcılarınayaşatmak istediği deneyimi hem de tasarım konseptini özetlemiş oluyor.

Sınırlı renk paleti, font seçimi ve sadece çerçeve rengine sahip basit ikonlarıylaminimalism konseptini başarıyla sürdüren Simple, ana sayfasında beyazalan ağırlıklı paneline de yer vermeyi ihmal etmiyor.

Page 89: 1 Userspots UX Almanak 2015

89

Userspots UX Almanak 2015

UI Kartları

Tüm trendleri incelediğimizde estetik yanlarının yanında teknik gelişmelerin de bu trendlerin oluşmasında rol oynadığını söyleyebiliriz. Cihaz çözünürlüklerinin artışı ve html5 teknolojisi görsel ve video kullanımlarını teşvik ederken, flat ve minimalism akımları yükleme sürelerini hızlandırıp, cihazlar arası responsive tasarımlara da mükemmel bir uyumluluk gösterdi.

Kart tabanlı tasarımlar, tam da mobil cihaz kullanımın ve buna bağlı olarak responsive tasarım ihtiyacının arttığı bir dönemde trend olan layout çözümlerinden biri oldu.

Kartları biraz tanımlamak gerekirse; data, imaj, button link comment gib iş alanınıza göre değişkenlik gösterebilecek başlıkları içeren dikdörtgen alanlardır.

Bilginin kartlar halinde gösterilmesi, daha temiz ve rahat taranabilir arayüzler oluşmasına yardımcı olmaktadır.

Kartlar aynı zamanda farklı etkileşim örnekleriyle de kullanıcılar için pratik çözümler üretmenize imkan veriyor.

Page 90: 1 Userspots UX Almanak 2015

90

Userspots UX Almanak 2015

Koçtaş

Userspots olarak arayüz tasarımını yaptığımız, koctas.com.tr’de UI Kart örnekleri arasında gösterilebilir.

Page 91: 1 Userspots UX Almanak 2015

91

Userspots UX Almanak 2015

DribbbleTasarımcıların yakından takip ettiği dribbble’da yine UI Kart tasarımının etkili kullanıldığı bir web sitesi olarak karşımıza çıkıyor.

Nelere Dikkat Etmeli?

Gösterilecek bilgilerin öncelliklendirilmesi ve kart alanı içinde doğru bilgilerin verilmesi. Kartların basit tutulmasıKartların çok yüksek olmadığını düşünürsek, iyi görseller ile büyük etki bırakmayı önemseyin.Doğru etkileşimlerin tasarlanması ile diğer kart örnekleri arasında sıyrılmaya çalışın. Tüm kartı tıklanabilir kılın.Marjin ve paddingler ile görsel olarak bütünlüğün ve tarama rahatlığının sağlanmasına dikkat edilmeli.

Page 92: 1 Userspots UX Almanak 2015

92

Userspots UX Almanak 2015

İkon ve İllustrasyon Kullanımı

Nelere Dikkat Etmeli?

Doğru stil ve çözümlerle başarılı sonuçlar getirirken, eğer yeteri kadar açıklayıcı ve basit olamazsa kötü sonuçlar doğurabilir.

Diğer çözümlere göre nispeten daha çok zaman ve işgücü ister. Dolayısıyla böyle bir çalışmaya başlamadan önce proje takviminizin buna hazır olması gerekir.

Oluşturulan illustrasyon ve ikon dilini tüm site ve iletişim kanallarında devam ettirebilmekönemlidir. Eğer böyle bir sorumluluğun altına giremeyeceksiniz hiç başlamayın.

Oluşturulma hızına bağlı olarak ölçüme işlemi çok kolay olmayabilir.

Bir web sitesinin genelinde ürüne ait bilgilerin ve nasıl çalışır sorularına cevaben hazırladığı akışlarını anlatırken illustration tercih edilmesi durumudur.

Page 93: 1 Userspots UX Almanak 2015

93

Userspots UX Almanak 2015

ZopimE-ticaret başta olmak üzere birçok sitede kullanılan canlı chat eklentisi Zopim de, beyaz alanı iyi kullanan, ekran içinde tek bir anlatının olduğu sade tasarımını yine aynı basitlikteki illustrasyonlarıyla zenginleştiriyor.Hero alanında renk paletini baskın olarak kullandığı basit şekiller ve çerçeve renkleriyle belirginleştirdiği illustrasyonu yer alırken, faydalarını anlatırken tek renk kullanmayı tercih ediyor.

Page 94: 1 Userspots UX Almanak 2015

94

Userspots UX Almanak 2015

PayU

Bu sene içinde yeni tasarımına kavuşan, e-ticaret siteleri için ödeme altyapısı sağlayan Payu, site genelinde ürünlerini, nasıl çalışır sorularına cevaben hazırladığı akışlarını anlatırken illüstrasyon tercih eden web sitesi olarak karşımıza çıkıyor.

Ana rengi olan yeşile uyumlu renk paleti, ve basit çizgilerle oluşturulan illustrasyonlar arayüze zenginlik katıyor. Aynı dilin ve şemaların tekrar eden kullanımları da öğrenme sürecini hızlandırmayı hedefliyor.

Page 95: 1 Userspots UX Almanak 2015

95

Userspots UX Almanak 2015

Tasarımlarını gerçekleştirdiğimizBonus Flaş Uygulaması 500.000 +indirilme sayısına ulaştı.

Page 96: 1 Userspots UX Almanak 2015

96

Userspots UX Almanak 2015

MobilOptimizasyon

Mobil dünyanın önlenemez yükselişi!Amerika’da 2014’ün birinci çeyreğinde internet kullanımının %55’nin mobilden gerçekleşmiş olması ile masaüstü web girişlerini geride bıraktığını söyleyebiliriz. Ülkemizde ise ilk kez yakın tarihte bir e- ticaret sitesinin mobil cirosu, web cirosunu geçmesiyle mobil kullanımının ülkemizde de ne kadar etkili olduğunu görüyoruz.

Not: Türkiye’de bu olay, mobil “push notification” kampanyalarının tavan yaptığı bir hafta sonu gerçekleşti.

Bu demek oluyor ki; cross-platform (platformlar arası) optimizasyon hiç olmadığı kadar hayatımızda yer alacak. O halde Mobil Optimizasyon için bilmeniz gereken birkaç temel metriğe hızlıca göz atalım

Pınar PelitOptimizasyon P.M/ Userspots

Page 97: 1 Userspots UX Almanak 2015

97

Userspots UX Almanak 2015

Günlük Aktif Kullanıcı (Daily Active Users - DAU)

DAU uygulamanızın çekiciliği ve kullanıcılarınızın müşteri ömrü değerini (Lifetime Value) ifade eder. Kullanıcıların mobil uygulamada durma ve etkileşime geçme seviyelerini ölçer. UX’de yapacağınız her değişiklik DAU’yu direkt olarak etkiler.

İndirilme Sayısı

Çoğu kişi tarafından bilinen bir metrik olan ve bir mobil uygulamanın başarısında en önemli belirleyici olarak görülen uygulamayı indirme maliyetleri, kullanıcı ömrünün değerinden daha aşağıda kalıyor.

Kaydolma

İndirilme sayısı ile birlikte funnel’ın en üstünde yer alıyor, kaydolma akışının mümkün olduğunca basitleştirilmesi gerekmektedir.

Retention

Kullanıcıların uygulamayı indirdikten sonra tekrar ziyaret etme oranıdır. DAU/ indirilme sayısı da diyebiliriz.

Uygulama içi Satın Almalar (In-App Purchases - IAPs)

Doğrudan gelir kaynağıdır ve direkt olarak ölçümlenebilir. Fiyatlandırma modelleri üzerinde yapılacak olan testler doğrudan kar oranını arttırmaya yönelik olacaktır.

Ortalama Puan & Yorumlar

Kullanıcı ömrü değerinin sayısal karşılığı diyebiliriz. Farklı zamanlarda kullanıcılarınızdan yorum istemeyi test edebilir ve ortalama puanları ölçümleyebilirsiniz.

Tıklamalar

CTA butonu, formları ya da reklamları olan uygulamalar için etkileşim hatta direkt gelir kaynağı olarak bile belirlenebilir. Bir içeriği belirginleştirmek, form yapısını değiştirmek, CTA metin, renk ve şeklini değiştirmek, reklam alanlarında değişiklikler yapmak gibi testler direkt olarak geliri etkileyecektir.

Mobil deneyimlerde kullanıcıların birbirinden oldukça farklı davranışları olabilir. Uygulamanızı sürekli test ederek, bu metriklerde artış sağlayabilirsiniz. Bu noktada hemen hangi alanların test edilebileceği ile ilgili soru işaretleri oluşuyor. İşte en başarılı örnekler:

Birincil CTA’a odaklanın: Konu mobile geldiğinde az her zaman daha iyidir. Dar bir alanda kullanıcıları yönlendirmenin en iyi yolu; basit, net bir CTA göstermektir.

Page 98: 1 Userspots UX Almanak 2015

98

Userspots UX Almanak 2015

Kullanıcı deneyiminin basitleştirilmesi, kullanıcıların birincil görevlerini anlamalarını, benimsemelerini ve sadakatle ona uygun olarak davranmalarını kolaylaştırır.

• Navigasyonu, arama kutusunu, banner alanını kaldırın. • Bu alanların çok fonksiyonel olduğunu düşünebilirsiniz ancak dikkat dağıtıcı.

CTA’nı sabit bir element olarak alın: Böylece en önemli özelliğin sürekli ekranda kalmasını sağlayın.

Eventbrite etkinlik akışında, kullanıcıların arkadaşlarının katıldığı etkinlikleri bulmasını sağlayan ve “social proof” niteliğinde olan uygulama sabit bir “Facebook ile giriş yap” CTA sunuyor. Eventbrite, sosyal olarak aktif ve etkinliklere arkadaşlarıyla birlikte katılmayı seven kullanıcılar için çok değerli. Dolayısıyla CTA’yi sayfayı aşağı kaydırma sırasında sabit tutmak kullanıcıları harekete geçirebilir.

Lyft’in üst başlıkta sabit duran 2 farklı butonu var; Menü, sürücü ekranı. Ancak Lyft; referans olduğunuz her arkadaşınız için 25$’lık bir promosyon veriyor. Bu özellik menünün içinde gizli ve birçok kullanıcı bu özelliği farkedemiyor. Lyft’in birincil başarı metriği uygulamanın kullanılması ve paylaşılmasını sağlamak olduğu için sağ üstteki butonu 25$’lık promosyon kodu CTA’i ile değiştirebilirler.

Page 99: 1 Userspots UX Almanak 2015

99

Userspots UX Almanak 2015

Kısa / Uzun EkranUzun uzun aşağı inebileceğiniz (Scroll) sayfalar mobil web ve uygulamalarda bir standart halini aldı. Ancak, bu durum her hedef için aynı oranda optimal olmayabilir. Kullanıcılar 2 ana sebepten uzun sayfalara adapte oldular. Küçük bir ekranda butona tıklamak zordur ancak scroll yapmak kullanıcının alabileceği en kolay aksiyondur.

Yeni bir sayfanın yüklenmesini beklemek zorunda kalmadıkları için kullanıcılar rahat bir şekilde scroll yapabilirler. Örneğin; Hotel Tonight & Airbnb benzer kullanıcıları hedefleseler de listeleme şekillerinin oldukça farklı olduğunu görüyoruz.

Hotel Tonight, sayfada tek bir otel gösteriyor ve harita dahil tüm özellikleri gösteriyor.

Airbnb ise aynı sayfada sonsuz bir scroll’a izin veriyor ve otel ile ilgili yalnızca en ilgi çekici özelliklere yer veriyor.

Page 100: 1 Userspots UX Almanak 2015

100

Userspots UX Almanak 2015

Ürün KeşfiE-ticaret sitelerinde iki önemli hedef vardır, ürün keşfi ve satın alma. Eğer ürün keşfi süreciniz çok uzun ve yavaş ise satın alma sürecinde kopmalar meydana gelebilir. Satın almalar doğrudan ürün keşfine bağlı olduğu için ürün keşfi sürecini kısaltmayı test edebilirsiniz. Kullanıcılarınızın tıklama yapmadan bir ürünün farklı görsellerini görmesini sağlayabilirsiniz. Örnek: Zara ve Gilt

Zara, kategori düzeyinde oldukça güzel bir listeleme düzeni sunuyor, ancak diğer görselleri görüntülemek için kullanıcıların tıklama yapması gerekiyor.

Gilt ise image slider özelliğini kullanarak çok daha fazla keşfetme fonksiyonalitesi sağlıyor. Ancak bu özelliğin ilk bakışta farkedilmesi mümkün değil. Ürün görsellerinin yanına kullanıcıya daha fazla ürün görseli olduğunu anlatacak oklar yerleştirilebilir ve kullanılabilirlikleri test edilebilir.

Page 101: 1 Userspots UX Almanak 2015

101

Userspots UX Almanak 2015

Üye Olma AşamasıBir uygulamanın içeriğine ulaşılabilmesi için üye girişi zorunluluğu kullanıcı için bir engel oluşturabilir. Kullanıcıların giriş yapması için optimum zamanı bulmalısınız. Doldurulması gereken alanlarla dolu bir form görünümü; bazı alanların doldurulması opsiyonel olsa bile uygulamanızın benimsenmesi ve kullanıcının kullanmaya devam etmesinin önündeki engeldir. Kişisel bilgilerini paylaşmadan önce kullanıcıların uygulamanızı keşfetmesine izin vermeniz kullanıcıların uygulamanızın fonksiyonlarını öğrenmesini sağlayacak ve kullanıcı etkileşimini (engagement) arttıracaktır.

Örnek;Vine ve Vimeo video paylaşımı için hazırlanmış 2 farklı platform örneği, her ikisi de yeni kullanıcılar ile harika özellikleri arasında giriş bariyerini ekliyorlar. Her iki uygulamanın da kullanıcılarından kişisel bilgiler istemeden önce kullanıcılarına bir test sürüşü yaşatması gerekir. Bundan sonra üyelik oluştuma oranlarını ölçümleyebilirler.

Page 102: 1 Userspots UX Almanak 2015

102

Userspots UX Almanak 2015

Mixbit ve Youtube da benzer bir kullanıcı kitlesini hedefliyorlar ancak kullanıcılarına uygulamayı keşfetmeleri için giriş yapma engeli koymuyorlar. Ek olarak MixBit yeni kullanıcılara bir carousel yardımıyla kısa bir oryantasyon sunarak hızlı bir keşif imkanı sunuyor.

Youtube ise kullanıcılarını “What to Watch” mesajı ile karşılıyor ve ziyaretçilerinin dilediklerini yapmasına izin veriyor.

Page 103: 1 Userspots UX Almanak 2015

103

Userspots UX Almanak 2015

2015 UX TrendleriMustafa Dalcı

Tasarım, UX ve yenilikçi ürünler anlamında 2015’i parlak olmayan bir yıl olarak değerlendirebiliriz. Mobil web’in önlenemez yükselişi mobil uygulamalar için “aslında o kadar da gerekli mi?” sorusunu karşımıza getiriyor. Bu yıl hala yeni şarj edilecek aletten öteye gidemeyen giyilebilir ürünleri ciddi anlamda sorgulamaya başladık.

UX süreçlerinin artık norm haline gelmesi, bir adım ötesinde microinteraction’ları tasarlamak için uğraşmaya başlamamız tasarım anlamında daha iyi bir noktada olduğumuzun göstergesi. A/B testleri, kişiselleştirme ve pazarlama otomasyonu ile artık web’i kodlama bilmeden programlamak da “süreçleri optimize etmeye verdiğimiz değeri” gösteriyor.

2015’e bir bakış atarken 2016’yı da etkileyeceğini düşündüğümüz önemli noktalar şöyle:

Mobil Web ve Click to Call

Mobil cihazlarda uygulama kullanım oranlarının %80’leri bulması aslında kullanım hakkında yeterli bir bilgi sunmuyor. Oyun oynamak ve sosyal ağlarda vakit geçirmek uygulama dünyasında yaptığımız temel hareketler. Geri kalan her şey için tarayıcıları kullanıyoruz. Bu karşılaştırmanın benzer bir versiyonunu masaüstü dünyasında yaşamıştık aslında. Şu an oyunlar dışında çok az uygulama yüklüyoruz, geri kalan bütün ihtiyaçlarımızı tarayıcı ile web’de karşılıyoruz. Benzer bir değişimin mobil dünyası için de geçerli olacağını tahmin etmek güç değil.

Bu noktada mobil web’in trafikteki önlenemez yükselişi nedeniyle en fazla sorguladığımız alan olan mobil web’de

uygulamaların aksine kullanıcılar bilgi girişi vs. konusunda rahat değiller. Bu rahatsızlık da mobil web’de dönüşüm oranlarının düşük olması ile karşımıza çıkıyor. O noktada kullanıcıya bir kanca atıp sıcak lead’i bir satışa dönüştürmek için bu yıl daha fazla kullanacağımız bir aracımız var: Click to Call

Click to call ile mobil web’de kullanıcıların bilgi girmek yerine bizi kolayca aramalarını sağlamak ve karşısına agent çıkmadan otomatik süreçlerle işlemini tamamlamak bu yıl üzerine yatırım yapacağımız konuların başında.

Page 104: 1 Userspots UX Almanak 2015

104

Userspots UX Almanak 2015

Şarj Edilecek Bir Cihaz Daha: Wearable

Çok şık duran ama kullanım senaryoları konusunda hala net olamadığımız ve faydasını göremediğimiz cihazlar olan giyilebilir ürünleri ciddi anlamda sorgulamaya başladık. Belki de her cihazımızın o kadar da akıllı olmasına gerek duymuyoruz veya bize şarj edilecek yeni bir cihaz külfetini karşılayacak bir faydayla daha karşılaşamadık. Bu yıl bu faydayı aramaya devam edeceğiz.

Web’i/Mobil’i Programla

Pazarlama ekiplerinin IT’ye bağlı kalmadan ürünlerinde istedikleri değişiklikleri yapabilmeleri, “If this then that” gibi kullanıcının hareketine göre değişebilecek kurguları yapabilmelerini sağlamak kullanıcı deneyimi adına da önemli. Müşterinin satın alma yolculuğuna biz bir geliştirme ile cevap vermeye çalışırken müşterilerin o alışkanlıktan vazgeçtiklerini görebiliyorduk. Ürün geliştirme dünyasındaki hıza şu an için ayak uyduramıyoruz. Web’i programlayacak araçlar ile bu konuda bir geliştirme yapmadan çözüm sunmak ve ürünleri optimize etmeye çalışmak bu yıl daha fazla yatırım yapacağımız bir alan olacak. Google’ın da bu alanda mevcut basit ürünlerinin ötesinde yeni bir ürün veya satın alma ile daha güçlü bulunacağını gösteren güçlü işaretler bulunuyor.

Microinteraction

UX süreçlerinin birer norm haline gelmesi ve artık bir şekilde çalışan ürünleri herkesin yapabiliyor oluşu, tasarımcıları ve ürün sahiplerini microinteraction’ları tasarlamak için daha fazla kafa yormaya itti. Boş sepet tasarımı, login süreçlerinde basit ve akıllı hareketler ile kullanıcıyı yormadan süreçlerini tamamlamaya çalışmak gibi mikro etkileşim alanlarına odaklanıyoruz. Artık neredeyse bütün ürünler belirli bir UX bilgisi ile hayata geçiyor, farkı yaratacak bu tarz ufak etkileşim noktaları.

Page 105: 1 Userspots UX Almanak 2015

105

Userspots UX Almanak 2015

2015’in Öne Çıkan IoT Cihazları

GoogleNest Camera

Web bağlantılı Akıllı güvenlik kamerası olan Nest Cam ile bizi Google tanıştırdı. Kullanıcının evin istenilen herhangi bir bölgesini yakından görmek için zoom imkanı tanıyan, aynı zamanda hareket sensörüyle eve birisi girdiğinde, bebek uyandığında ya da evcil hayvanın hareketleri gözlenmek istendiğinde kullanıcının telefonuna direk bildirim gelmesi gibi özelliklere sahip Google Nest kamera aynı zamanda telefondan sesli bildirim sağlamak için de kullanılan bir cihaz.

Naz BekpınarPazarlama/Userspots

Page 106: 1 Userspots UX Almanak 2015

106

Userspots UX Almanak 2015

SamsungSmartThings

Samsung SmartThings Ev görüntüleme kiti pek çok farklı amaçla kullanılabilir. Kitin içinde yer alan hareket sensörlerini pencerelere ya da kapıya yerleştirerek, herhangi biri evde olan güvenlik tehdidi karşısında kullanıcı akıllı telefonuna gelen bildirimle bu durumu öğrenebilinir, kullanıcı evde olmadığı durumlarda kapının kilidini açıp, kapatabilir. Bunlara ek olarak evin ışık ve enerji birimlerinin kontrolüne yardımcı olduğundan enerji tasarrufunu sağlıyor ve kullanıcının internet üzerinden çeşitli müzik sitelerine ulaşarak istediği müzik dinlemesine olanak sağlıyor, yine kullanıcı uyandığı anda kahvesinin hazır olmasını sağlıyor.

Page 107: 1 Userspots UX Almanak 2015

107

Userspots UX Almanak 2015

Dell Edge Gateway 5000

Dell Edge Gateway 5000 farklı sensör ve ekipmandan gelen bilgilerin to-planıp, depoladıktan sonra başka yere aktarılmasını sağlıyor. Intel Atom işlemcisi ise yerel analitik kapasite sağlıyor. Böylelikle anlamlı bilginin bir sonraki noktaya, yani gateway’e, data center’a ya da buluta ulaşması gerçekleşiyor. Bunun sonucunda da cihaz pahalı band genişliği kullanımının ve genel çözüm gecikmesinin minimize edilmesinin sağlıyor.

Page 108: 1 Userspots UX Almanak 2015

108

Userspots UX Almanak 2015

Dell Edge Gateway 5000

Philips Hue, normal led lambalara göre kullanıcıya daha farklı bir ışık deneyimi sunuyor. Günlük yaşamınızın ayrılmaz bir parçası olabilir. Alarmlar, zamanlayıcılar, uyarılar… Tümü, yönettiğiniz hayata uygun hale getirilmiş. Hue ile evinizin içerisinde veya iş yerinizde bir takım uyarıları ışık ile alabilirsiniz. Kendinize göre özelleştirebilirsiniz. Wi-fi ile bağlantı sağlayan Hue, her rengi kullanıcının deneyimine sunuyor. Hatta Hue’yu IFTTT hizmeti üzerinden veri beslemeleri ile bile bağlayabilirsiniz. Böylece ışıklarınız size önemli bir e-posta aldığınızı söyleyebilir.

Page 109: 1 Userspots UX Almanak 2015

109

Userspots UX Almanak 2015

ParrotPot

Parrot Pot, bitkilere gerektiği kadar suyu sıcaklık ve neme göre ayarlayıp doğru miktarda verebilme özelliğine sahip. 2 litreye kadar suyu bünyesinde bulundurabilen saksı aynı zamanda indirilen uygulamayla kontrol edilebiliyor.

Page 110: 1 Userspots UX Almanak 2015

110

Userspots UX Almanak 2015

RoostAkıllı Batarya

Roost’un Akıllı Bataryası kullanıcıya hiç bir cihazını değiştirmeden akıllı teknolojiyi evlerine getirme olanağı sunuyor. 9-voltluk Roost bataryası evlerde bulunan neredeyse tüm duman ve CO detektörleri ile uyumlu. Ürünü evindeki cihazlara yerleştiren kullanıcı, detektörlerini akıllı telefona indirilen uygulama ile kontrol etme imkanı bulabiliyor. Bunun yanısıra batarya ile çalışan alarmlar kapatılabiliyor ya da hangi alarmın ses çıkarıp hangisinin sesinin durduğu gözlemlenebiliyor.

Page 111: 1 Userspots UX Almanak 2015

111

Userspots UX Almanak 2015

Elmanın iki yarısı mobil uygulama ve mobil web

Trafikte büyüme mobil webden geldikçe düşen dönüşüm oranları beraberinde bir kaygıyı da getirdi. Sonuçta mobil uygulamalar daha yüksek dönüşüm oranına sahipti ve herkes uygulama kullanmalıydı.

Bu noktada birkaç şeyi açıklığa kavuşturmak gerekir;

1- Mobil site ile uygulama müşteri yolculuğunun farklı noktalarına dokunur;

Bir ürünü merak ettiğinizde cep telefonunuzdan bir google araması yapıp sırasıyla sonuçları ziyaret edersiniz. E-ticarette en önemli faktör olan fiyatı kontrol edip ürünle ilgili bilgi ve yorumları alıp oradan ayrılırsınız. Bu size bounce rate olarak döner, dönüşüm oranını dibe çeken bir sorundur ama bilinmesi gereken şu ki o noktada satın alma düşüncesi zaten oluşmamıştır. Yani mobil siteler araştırma ağırlıklı kullanılmaktadır. Eğer teklifiniz rakiplerinizden iyiyse bu sizin masaüstü sitenize doğrudan trafikle gelen bir satış olarak yansıyacaktır.

2- Mobil site kullanıcısıyla mobil uygulama kullanıcısı farklı kitlelerdir

Bir e-ticaret uygulamasını indirdiğinizde muhtemelen o şirketten daha önce bir alışveriş yaptığınız veya sipariş takibi yapmak istediğiniz için indirirsiniz. Elbette kampanyalar da burada oldukça etkilidir fakat bu sizi mobil web sitesi kullanıcısından ayıran bir durumdur ve sizin durumunuzdaki kullanıcılarla mobil web sitesini kullanan ve araştırma yapan kullanıcıların satın alma eğilimleri aynı değildir.

3- Mobil sitenin trafik yapısı ile mobil uygulamanınki tamamen farklıdır

Cep telefonlarımızda bir ayda ortalama 27 uygulama kullanıyoruz ve 100 farklı web sitesi ziyaret ediyoruz. Bir uygulamanın trafik kaynağı yakın geçmişe kadar sizin o uygulamayı açıp açmamanız kadar net bir koşula bağlıydı. Bu sorunu adreslemek için Google re-engagement modeli olan app indexing ve ona bağlı deep linking yöntemlerini pazara sundu. Eğer mobil uygulamanız bir kullanıcıda yüklüyse mobil arama sonuçlarında doğrudan uygulamayı açtırabiliyorsunuz. Elbette bu adı üstünde re-engagement sizin aktif kullanıcılarınızı

2016 Mobil’de2. RoundGökhan BesenHead of Products/hepsiburada.com

Mobil uygulama ve mobil siteler bir süredir hayatımızdaydı. Türünün ilk örneklerini m. sub-domianlerinde görmeye başladığımız mobil siteler 2016’da ciddi bir sınavdan geçecek. Bunun temel sebebi 2015’ten itibaren webin büyümesinin tamamının mobilden gelmeye başladığını görmeye başlamamız diyebilirim. Mobilde bu sene trafik bakımından %80’ler, ciro bakımından %50’leri gören internet şirketleri, 2016’da mobil trafiğin %75 büyüyeceği düşünüldüğünde ciddi bir hayatta kalma savaşı verecekler. Eğer 2015’te responsive ve tek url yapısına geçtiyseniz işiniz nispeten kolay fakat konu bununla sınırlı değil, çünkü bir de uygulama dünyası var.

Page 112: 1 Userspots UX Almanak 2015

112

Userspots UX Almanak 2015

artıracak bir gelişme. Yani o 27 uygulamadan biri olma ihtimaliniz bu sayede artacaktır. Bu geliştirmenin getirdiği en önemli değişikliklerden biri uygulamanızın artık sadece ana sayfa’dan açılmayacak olmasıdır. Bu önemli çünkü bir mobil web sitesinin yaşadığı en büyük sorunlardan biri artık uygulamanıza da gelmiş bulunuyor. Yukarıda birinci maddede bahsettiğim fiyat kontrolü yapıp çıkacaktım diyen kullanım davranışı şimdi uygulamanızın da dönüşüm oranını aşağıya çekecek bir güç olarak karşınızda. Elbette mobil sitede olmayan avantajınız, yani sadık müşteri avantajı bu olumsuz etkiyi dengelemenize yardımcı olacaktır ama bu tek başına yeterli değil. Doğrudan ürün sayfalarına veya kategori sayfalarına inen kullanıcılar için daha iyi düşünülmüş deneyimler sunmalısınız. Yine de erken sevinmeyin çünkü bu sefer de mobil siteden alacak olan bir kitleyi uygulamaya çekerek mobil sitenizin zaten düşük olan dönüşüm oranına bir darbeyi de siz vurmuş oldunuz.

Bu sebeple mobil dönüşüm oranına bütünsel bakmak sizi daha doğru bir yere götürecektir. Peki bitti mi? Hayır aslında yeni başlıyoruz;

2. Round Progressive Web Uygulamaları

Web’in sahibi Google desek pek de yanlış bir cümle kurmamış oluruz. Fakat mobile kayan web dünyasında Google’ı ciddi anlamda tehdit eden bir tehlike var: Mobil uygulamalar. Apple’ın öncülüğünde yükselen mobil uygulama trendi Android tarafının da hızlı yükselişiyle birlikte büyük bir ivme kazanmıştı. Trafik kaynakları olarak appstore’lar ve işletim sistemlerine ait arama mekanizmaları Google’ın bu dünyadaki egemenliğini ciddi anlamda tehlikeye soktu, çünkü uygulamalar ile web arasında organik bir bağ yoktu. Son dönemde art arda çıkan app indexing, deep linking, app streaming gibi yeni geliştirmeler Google’ın mobil web’de üstünlüğünü sürdürme çabasının örnekleri ve bu çaba bunlarla da sınırlı değil. Özellikle de mobil sitelerin yapılma şeklini kökten etkileyecek yeni teknolojilerin de sunulmaya başlaması mobilde 2. round’un başlayacağını bize haber verir nitelikte.

Progressive Web Uygulamalarını mümkün kılan bu yeni teknolojiler temelde bir mobil sitenin app kadar hızlı ve app yeteneklerine sahip olmasını sağlıyor. Progressive denmesinin sebebi bu teknolojileri desteklemeyen tarayıcılarda çalışmaz fakat destekleyen tarayıcılarda kendinizi bir uygulamadaymış gibi hızlı bir deneyimde buluyorsunuz. Birkaç maddede özetleyecek olursam progressive web uygulamalarının avantajları;

Web push notifications

Bir sistem özelliği olan push notificationlar artık web de de kullanılabilecek. Uygulamaların en can alıcı özelliğinin artık webden kullanılabilecek olması her şeyi değiştirebilir. CRM ekiplerinin en seveceği doğrudan iletişim kanalı şu an keşfedilmeyi bekliyor. Service worker dediğimiz alt yapılar sayesinde mobilde bu tip sistem seviyesindeki fonksyonlara erişim sağlanabiliyor. Webpush Desktop sitelerde de kullanılabiliyor, how cool is that!

Hız

100 milisaniyenin altında kullanıcı etkileşimine cevap veren, 16 milisaniyede animasyonu tamamlayan, 50 milisaniyede temel javascript işlerini bitiren ve 1 saniyede yüklenen ekranlar. Bir uygulama kadar iyi bir mobil site artık hayal değil.

Güvenlik ve HTTPS

Yukarıda saydığım teknolojileri kullanabilmek için tüm sayfalarda HTTPS kullanma zorunluluğu getirilmiş. Sanırım aşılması gereken en büyük engel bu olsa gerek. Bu, sistem ekiplerinin pek hoşuna gitmeyecek.

Polymer ve Material Design

Elbette yukarıda saydıklarımı sunabileceğiniz bir arayüz komponentine de ihtiyaç olduğu için Google material design’ı referans alarak bir UI framework’ü de geliştirdi. Ultra hızlı ve hafif mobil uyumlu bir site yapmanızı ciddi şekilde destekliyor. Biraz kurcalarsanız çok eğleneceksiniz: elements.polymer-project.org

Page 113: 1 Userspots UX Almanak 2015

113

Userspots UX Almanak 2015

Accelerated Mobile Pages (AMP)

Tamamen hız odaklı olarak tasarlanmış açık kaynak bir framework. Tümü cahelenebilen ve indexlenebilen, temelde bir HTML web sayfası.

Google ve Apple arasındaki bu savaşın galibi aslında belli gibi. Google tarafında geç kalınmış bir hamle olduğunu düşünmekle birlikte geç olsun güç olmasın diyerek söze devam edeyim. Progressive Web Uygulamaları şu an pazarın %60’tan fazlasına sahip android / chrome ikilisi tarafından destekleniyor. Pazarda %15 civarı yer tutan ios / Safari ikilisinin bu teknolojiye sıcak bakmadığını tahmin etmişsinizdir. Bir Apple fanı olmakla birlikte kapalı yazılımların zaman içinde nasıl çöpe gittiklerini de görmüş biriyim (Bkz. Flash) Microsoft’un opensource olması da benzer bir örnektir. Dolayısıyla web’in doğası olan açık kaynak tarafında gelişen bu atak ile native uygulamaların geleceğinin biraz tehlikeye girdiğini düşünüyorum. Ne yalan söyleyeyim bu duruma da pek üzüldüğüm söylenemez. Web’in her zaman olduğu gibi açık ve özgür bir platform olarak kalmasından yanayım.

Bakalım 2016’da Türkiye mobil pazarında ne gibi gelişmeler göreceğiz. Heyecanla bekliyorum.

Page 114: 1 Userspots UX Almanak 2015

114

Userspots UX Almanak 2015

Akıllı E-Ticaret İçin Ödeme Tasarımı

E-Ticaret deneyimi tasarlarken, gerçekten “Nasıl Söylenir?” sorusunu dikkate almak yerine “Söylemek İstediklerimiz” kısmını önceliklendirmeye yöneliyoruz.

Bu kolay değil çünkü yanlış giden yüzlerce şey olabilir; ürün seçmeden, onları karta eklemeye, son onay e-postasını almaya, satın alınan ürünün size gelmesine kadar uzun bir süreç söz konusu. Bu yoldaki her adım, oluşabilecek hataları ve potansiyel yanlış anlaşılmaları gözleyerek titizlikle tasarlanmalıdır. Bu kargolama (shipping) işleminin gösterimini ya da alışveriş sepetini terketme mailini etkilediği kadar filtrelerle olan etkileşimi de etkileyecektir.

Vitaly FriedmanEditor-in-chief and co-founder ofSmashing Magazine

Page 115: 1 Userspots UX Almanak 2015

115

Userspots UX Almanak 2015

Dönüşümlerin (Conversion) Artmasını Sağlayacak En Hızlı Yol Nedir?

E-Ticaret dönüşüm oranları tamamen açıklıkla/netlikle alakalı bir durumdur. Yani kullanıcılara satın alma işlemini yaptırmak için sağlam argümanlar sunarken aynı zamanda ödeme için düz ve direk bir akış sağlanması gerekir. Örneğin, misafir ödemesi (checkout) olması zorunluluktur, hesap oluşturma işlemi bir seçenek olarak dahi düşünülmemelidir, gönderme adresi ile faturalanma adresinin aynı olması zorunluluktur (default), bu şekilde kullanıcıya ödediği ücret gösterilebilir ve gizli fiyatlandırmadan (hidden cost) kaçılınabilir. Son olarak kullanıcılar için dost ve sade arayüz kullanın ve yola kullanıcının hoşuna gidebilecek bir kaç unsur ekleyin.

Bunlar sadece konuya açıklık getirecek ve kullanıcının satın alma işlemini daha kolay tamamlamasını sağlayacak bir kaç örnek olarak görebilirsiniz. Aslında, yalnız arayüz kopyalarının ayarlanması bile yeterlidir. Uygulayın, ölçün, yenileyin ve bazen tamamen bambaşka bir şey deneyin ve test edin, ardından dönüşümlerin sandığınızdan daha hızlı arttığını göreceksiniz.

Page 116: 1 Userspots UX Almanak 2015

116

Userspots UX Almanak 2015

UX Eğitimleri veKariyer

Page 117: 1 Userspots UX Almanak 2015

117

Userspots UX Almanak 2015

UX Kariyer SüreçlerindeOnline Eğitimler

Kullanıcı Deneyimi Tasarımı, kullanıcı alışkanlıklarını anlayarak/araştırarak, deneyim tasarlamak şeklinde tanımlanabilir. Bu tanım da bizlere, tasarım sürecinin kendi içinde yenilenen ve hiç durmayan bir akışta olduğunu söylüyor diyebiliriz. Kullanıcı alışkanlıkları, çalıştığımız konu özelinde farklılıklar gösterse de, genel hatlarıyla bir şemaya oturabilen yapıdadır. Bu şemaya eklenen değişkenler, akışı etkileyip, tasarım sürecini bambaşka bir boyuta taşıyabilir. Bütün bunlar sebebiyle, kullanıcı deneyimi tasarımcısı hiç bitmeyen bir öğrenme süreci içerisine girer.

Kullanıcı Deneyimi Tasarımı işine yeni yeni merak salan biriyseniz, öncelikle terminolojiye oldukça hakim olmanız gerekiyor. Kendinizi eğitim programlarıyla desteklemek de oldukça önemli. Değişen trendleri takip ederken, bilginin dağınıklığı aklınızı karıştırmasın istiyorsanız işte size, bilgiyi sizin için bir araya getirip sunan birkaç kaynak:

Özge KırdarEğitim Sorumlusu-Pazarlama/Userspots

Page 118: 1 Userspots UX Almanak 2015

118

Userspots UX Almanak 2015

İlk olarak The Interaction Design Foundation olarak bilinen, etkileşim tasarımı vakfının hazırladığı eğitimlerden bahsedelim. Bir vakıf olduğundan, eğitimler çok çeşitli ve eğitmen seçeneği de oldukça fazla. UI, Araştırma ve Etkileşim Tasarımı alanında, mobil, web, giyilebilir teknoloji olarak alt başlıklara kadar farklı eğitimler var. Neredeyse her gün yeni bir ders açılıyor ve içerik olarak oldukça zengin, mutlaka ilgili konudaki akademik kaynaklarla da destekleniyor. Literatür zenginliği için çok iyi bir kaynak.

The Interaction DesignFoundation

Page 119: 1 Userspots UX Almanak 2015

119

Userspots UX Almanak 2015

Bir başka kaynak da trydesignlab.com. Dersler 3 ana başlıkta, Tasarım, Araştırma&Strateji ve Etkileşim Tasarımı olarak açılıyor ve her ders 4-6 hafta devam ediyor. Bir mentör eşliğinde derse devam ediyorsunuz ve dersi bitirebilmek için mutlaka ilgili konuda bir çalışma yaparak bunu mentörünüze sunmanız gerekiyor. Her hafta, mentörünüzle anlaşarak belirlediğiniz bir saatte görüşüp, ders ile ilgili sorularınızı ve çalışmanızın o haftaki ilerleyişini paylaştığınız oturumlar düzenlemeniz gerekiyor.

Trydesignlab

Norman&Nielsen GroupDünyanın çeşitli noktalarında düzenlediği eğitimlerle bu konuda en iyi kaynak olma özelliği taşıyor. Web sitelerinde yayınladıkları blog yazıları ve makaleler ile her daim yararlanılabilir oldukça zengin bir kaynak olarak uzunca bir süre daha var olacaklar.

Page 120: 1 Userspots UX Almanak 2015

120

Userspots UX Almanak 2015

Uluslararası düzeyde kabul gören ve bir sınav ile sahip olabileceğiniz sertifika programı olan, yakında Türkiye’de Userspots olarak düzenlemeye başlayacağımız International Usability and UXQB(User Experience Qualification Board) eğitimleri ve sınavları, Kullanıcı Deneyimi alanında sahip olabileceğiniz bir sertifika olacak. Oldukça detaylı ve akademik bilginin sınandığı bir sınav ile sahip olacağınız sertifika uluslararası düzeyde kabul görüyor. Sınavı kazanabilmek için oldukça sıkı çalışıp, literatüre hakim olmak gerekiyor. Bu kapsamda eğitim programını şekillendirmeye ve en kısa zamanda tarihleri de duyurmaya başlayacağız.

International Usability and UXQB

Page 121: 1 Userspots UX Almanak 2015

121

Userspots UX Almanak 2015

humanfactors.com

Farklı lokasyonlarda sertifikalı eğitim programları bulabileceğiniz oldukça faydalı bir kaynak. Genellikle 2 ya da 3 günlük eğitimlerden oluşan programlar, profesyonel eğitmenler eşliğinde devam ediyor ve kariyeriniz için oldukça iyi bir gelişim olanağı sunuyor.

hackdesign.org

Tasarım konusunda oldukça iddialı bir çevrimiçi eğitim yapısı sunuyor. Nereden başlayacağınızı bilmiyorsanız, en iyi tasarımcıların eğitimlerinden bir liste sunuyorlar ve buradan seçim yaparak başlayabiliyorsunuz. Ancak ilk eğitimle başlamanızı ve önerdikleri muhteşem belgesel filmi izlemenizi öneririz(Objectified). Etkileşimli içeriğiyle eğitimi oldukça eğlenceli hale getiriyor ve tasarım puzzle’ları ve oyunlaştırılmış yarışmalarla eğlenirken öğrenmeyi kolaylaştırıyor.

Page 122: 1 Userspots UX Almanak 2015

122

Userspots UX Almanak 2015

generalassemb.ly Hem çevrimiçi hem de çevrimdışı olarak eğitim seçenekleriyle geniş bir yelpaze ile karşımıza çıkıyor. Lokasyon seçerek eğitimleri listeleyebiliyor, çevrimiçi eğitimleri listeleyip, ilgi duy-duğunuz eğitime yönelebiliyorsunuz. Eğitim öncesinde sunduğu yol haritası ve öğrenme kazanımlarının bir listesi ile size ders hakkında bir izlenim kazandırıyor.

skillshare.com

Çok çeşitli eğitimler sunuyor ve UX Design bu eğitimlerin yalnızca bir kırılımı. Eğitmen kadrosu, dünyanın önde gelen şirketlerinde çalışan kendini kanıtlamış isimlerin de dahil olduğu çok geniş bir yelpazeye sahip. Ders içerikleri video ile kurgulanmış ve farklı üyelik paketleri mevcut.

Yaptığımız araştırmalar ve denemeler sonucunda en işe yarar programları sizlerle paylaşmak istedik. Bunlar dışında, Udemy, Coursera, uxmastery.com ve uxtraininng.com üzerinden de eğitimler bulabilir, kendinizi geliştirmeye devam edebilirsiniz.

Page 123: 1 Userspots UX Almanak 2015

123

Userspots UX Almanak 2015

Userspots UX Kariyer Kartları, UX kariyerine atılan ilk adımdan son aşamaya kadar geçen süreç içerisinde sizler için faydalı olabilecek küçük tavsiyeleri içermektedir. Altı aşamaya ayırdığımız bu kariyer sürecinde; kitaplar, bloglar, kişiler gibi her adım için farklı tavsiyeler yer almaktadır. Her karttaki tavsiye listesini bitirdikten sonra bir sonraki adıma geçebilirsiniz. Her aşaması yeni tavsiyelere açık olan kartlarımız, etkinliklerimizde basılı olarak da sizleri bekliyor olacak.

UX KariyerKartları

Page 124: 1 Userspots UX Almanak 2015

124

Userspots UX Almanak 2015

İlk aşama olan Beginner ile kariyerine yeni başlayanlar için mutlaka bilinmesi gereken noktaların altını çizmeye çalıştık. Örneğin; Don’t Make Me Think kitabını mutlaka okunmalı, N&N Group’u takip etmeli ve Userspots’un UX Sözlüğü’ne sahip olmalısınız.

Öğrenmeye devam, dünyanın bir UX Hero’ya daha ihtiyacı var!

Junior aşamasında, Userspots UX Camp’a ve Bilgi Mimarisi Enstitüsü Topluluğun’a katılmanızı tavsiye ediyoruz. Ayrıca bu aşamada Responsive Arayüz hakkında bilgiye sahip olmalı, Flat dizayn ve Skeumorphism arasındaki farkları çözümlemiş olmanız beklenir.

Beginner

Junior

Page 125: 1 Userspots UX Almanak 2015

125

Userspots UX Almanak 2015

Intermediate

Skilled

Intermediate aşamasında,Human-Computer Interaction Derslerinin yanı sıra The Laws of Simplicity kitabını okuyabilirsiniz. Ayrıca UX Myths hakkında bilgi sahibi olmanız faydalı olacaktır.

İyi gidiyorsun, daha öğrenecekçok şey var!

Dördüncü aşamada işler kızışıyor! UX disiplinler arası bir alan ve her zaman öğrenecek yeni bir şeyler var.

Skilled aşamasında, Flinto ve Pixate gibi araçları kullanmayı öğrenmelisiniz. Ayrıca HTML 101 dersleri almaya başlamalı ve Customer Experience kitabını okumanız faydalı olacaktır.

Page 126: 1 Userspots UX Almanak 2015

126

Userspots UX Almanak 2015

Senior kartı ise gerçekten emek istiyor.

Listedeki görevler farklı alt alanları kapsıyor ve her aşamada olduğu gibi kendini geliştirme hiç bitmiyor. Javascript ve grid layout sistemini öğrenmeli ve Optimizely’de A/B Test yapmanız gerekiyor.

Senior

Mentorİşte asıl işin başladığı aşama!

Artık Mentor seviyesinde bir UX Designer oldunuz ve sıra arkanızda kalanlara yardımcı olmaya ve sektörü geliştirmeye geldi. UX Konferanslarına katılmalı, zumbara.com gibi platformda dersler vermeli bir startup’a danışmanlık yapmalı ve bu kartların geliştirilmesine yardımcı olmalısınız.

Page 127: 1 Userspots UX Almanak 2015

127

Userspots UX Almanak 2015

UX Kariyer SürecindekiEkmek KırıntılarıMustafa Dalcı

Web sitesinde navigasyon tasarlarken kullanıcıya sayfada şu 3 sorunun cevabını net bir şekilde vermelisiniz;

Nereden buraya ulaştım?Şu an neredeyim?Nereye gideceğim?

Bu soruları farklı arayüz elementleriyle cevaplarken en fazla başvurduğumuz yöntemlerden biri de “breadcrumbs” (ekmek kırıntıları) dır.

Sayfaların belirli yerlerinde gördüğümüz

Anasayfa > İletişim > Destek Hattı

gibi yapılar ile navigasyona yardımcı bir unsur barındırır ve 3 soruya cevap vermeye çalışan bir bütün oluştururuz.

Bu 3 sorunun benzerini kariyerimizde de sürekli kendimize soruyoruz.

Nasıl bir gelişim sağladım, nereden başladım, hangi projelerde görev aldım, ne kattım?Şu an kişisel kariyerimin ve şirketteki yapılanmanın neresindeyim?Bundan sonra önümde nasıl bir süreç var?

Userspots olarak biz de uzun zamandır bu süreçte bize yardımcı olacak bir yapıyı kurmaya vakit harcadık ve ortaya kariyer ekmek kırıntılarını çıkardık.

Page 128: 1 Userspots UX Almanak 2015

128

Userspots UX Almanak 2015

Şirketteki süreci 6 aşamaya bölüyoruz.

İlk Dokunuş

Kişilere dokunduğumuz ilk nokta, staj programı, UX camp, etkinlik veya doğrudan iş başvurusu maili olabilir. Buradaki dokunuştan sonra iş görüşmesinde kişinin bir tasarım sorusunu çözmesi ve beraber bunun üzerine tartışmamızla şekillenen bir süreç var.

Burada 2 Önemli İpucu Verebilirim

Portfolyonuzu lütfen tasarlayın ve onu bir tasarım sunumu yapıyormuşsunuz gibi gönderin. Kullandığınız yapı ve tipografi seçimi sizin hakkınızda bize bilgi veriyor.Bize zaman ayıran kişiyi her daim daha çok seviyoruz. Kampımıza katılmanız, etkinliklerimizi ve blogumuzu takip etmeniz bizi sevindiriyor.

4 Aylık Trainee Program

İlk dokunuş sonrasında kişiye 4 aylık bir program öneriyoruz. Burada bir parantez açıp iş yapış şeklimizden bahsetmekte fayda var. Biz, içinde user researcher, interaction designer ve ui designer’dan oluşan -şimdilik- 3 takımdan oluşuyoruz. Her takım projeleri başından sona takip eden bir yapıda bulunuyor.

4 aylık programda bu takımlardan birine dahil olup bir mentör eşliğinde projelere dahil oluyorsunuz. Mentör (özellikle onun değerlendirmesi hayati) ve takım sizi değerlendiriyor ve bir sonraki aşamaya geçiyorsunuz.

Junior Program

4 aylık süreç sonunda -maksimum 1 yıl sürecek- Jr. programa dahil olup hala bir mentöre dahil olarak takımdaki projelerde yer alıyorsunuz, sorumluluklarınız giderek artıyor.

Mid-Level Program

Jr. program bittiğinde artık takımda o işi yapacak ana kişi olduğunuz Mid-level programdasınız. Maksimum 1.5 yıl sürecek olan bu süreçte artık hangi sektörde hangi tip projelerde yer almanız daha faydalı belirlemiş oluyoruz.

Mentör Program

Artık takımda yanında trainee ve Jr.’lar olan bir mentöre dönüştünüz. Sürecin yönetim ve strateji tarafına giderek de hakim olmaya başladınız.

Conversion Program

Operasyonel süreçlere daha az hakim olduğunuz ve işin strateji tarafında olduğunuz yapıda da conversion programına dahil oluyorsunuz.6 programın da rakamsal karşılıklarını çıkarmak için her projede client, team ve board notlarını alarak kişilerin gelişimlerini de ölçümlüyoruz. Böylece gelişim sürecinde bir sonraki programa geçişi de daha objektif hale getirmiş oluyoruz. Her programın maaş skalası ve şartları da belirli.3 soruyu da cevaplayarak oluşturduğumuz sisteme dahil olmak için sizi kariyer sayfamıza bekleriz.

Page 129: 1 Userspots UX Almanak 2015

129

Userspots UX Almanak 2015

PardusUX/UI

Page 130: 1 Userspots UX Almanak 2015

130

Userspots UX Almanak 2015

FilotürkUX/UI

Page 131: 1 Userspots UX Almanak 2015

131

Userspots UX Almanak 2015

KoçtaşUX/UI

Page 132: 1 Userspots UX Almanak 2015

132

Userspots UX Almanak 2015

IF YOU LOVE WHAT WE DOSPREAD YOUR LOVE FOR

www.uxalive.com @UXAliveTurkey