Product Benchmark

Benchmarking, ürün/markanızın rakiplerine kıyasla nasıl bir sıralamada göründüğünü, sektördeki yerini değerlendirmenize yardımcı olur. Şirketler arası karşılaştırmak istediğiniz metrikleri belirleyerek birden fazla özelliği aynı anda karşılaştırabilirsiniz.

Benchmarking yapmak için adımlar:

• Karşılaştırmak için bir ürün, hizmet veya dahili departman seçin,
• Hangi ürünleri kıyaslamanız veya işletmenizi hangi kuruluşlarla karşılaştırmanız gerektiğini belirleyin,
• Şirketinizin/ürününüzün performans derecelerini belirlemek için her iki kuruluşun/ürünün verilerini karşılaştırın,
•En iyi performansa sahip ürünlerin/şirketlerin yürürlükte olan süreçlerini ve politikalarını benimseyin.

Yoğunluk Haritası

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Yoğunluk haritası, ürünler ve özellikleri hakkında karşılaştırma yapmayı, yığılımın olduğu bölgeyi ön plana çıkararak görmemize olanak tanır.

Baeswarm Plot, ürünler ve özellikleri hakkında karşılaştırma yapmayı yığılımın olduğu bölgeyi ön plana çıkararak görmemize olanak tanır. Eğer benchmark yapmak için veri setiniz hazırsa app.rawgraphs.io/ adresinden verilerinizi yükleyip “baeswarm plot” chartını seçerek kendi grafiğinizi oluşturabilirsiniz.

Bubble Chart: Şirketler/ürünler arası karşılaştırmak istediğiniz metrikleri belirleyerek birden fazla özelliği aynı anda karşılaştırabilirsiniz.

Teknolojide çeşitlilik üzerine yapılmış bir benchmark  ile sıralama ve kategorize ayrımının ne kadar anlaşılır göründüğünü buradan inceleyebilirsiniz.

Site Haritası

Site haritası; Bir web sitesindeki sayfaların ve bağlantılarının, düzenlenmiş ve listelenmiş bir modelidir. İsim, kendini çok güzel açıklar: Bir sitenin içerik ve kategorilerinin haritasıdır. Arama motorları ve tarayıcılara yön göstererek içeriğe daha hızlı ve kolay erişilmesini sağlar. İçeriğinde sayfa adreslerini barındıran bir XMLdosyasıdır.

Mevcut sayfaların önem sıralarını, değişiklik ve yenilikleri bildirerek bir sitenin güncel kalmasını sağlar. Site haritası yaratılırken Miro, Octopus, Xmind, Adobe serisi gibi farklı araçlar kullanılabilir. HTML Sitemap, kullanıcıya başlıktan en alt sayfalara kadar site içerisindeki dizilimi gösterir ve yardımcı olur. XML Sitemap, canlıya çıkmış bir sitede, arama motorlarının siteyi doğru bir şekilde taraması için ulaştığı dizindir. Arama motoru optimizasyonu için adres olma özelliği taşır.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Miro Sitemap

Miro, sitemap yaratmak için bireysel ve ekip olarak çalışılabilecek güzel bir tool.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Apple Sitemap

HTML site haritası, bir websitesi içerisindeki sayfaları kategorize ederek kullanıcıya yardımcı olur.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Envirolux Sitemap

Akış diyagramı ile anlatım sağlanan envirolux.com site haritası.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Wikipedia Sitemap

Wikipedia Anasayfa’dan ulaşılabilen sayfaların görselini temsil eden bir site haritası.


Kaynakçalar
Bir UX site haritasında numaranlandırmaların, başlıkların ve akışın kurgusunu daha iyi anlamak için bu Medium yazısını inceleyebilirsiniz.

Site haritası, bilgi mimarisi ve navigasyondan nasıl ayrışıyor? Üç kavramında örneklerle beraber detaylı açıklamasına buradan ulaşabilirsiniz.

Swot Analizi

SWOT analizi aslında bir kısaltmadır. Güçlü yönlerimizi (Strengths), zayıf yönlerimizi (Weakness), daha iyi yerlere gelmek için kullanabileceğimiz fırsatlarımızı (Opportunities) ve bizim önümüzde engel olabilecek tehlikeleri (Threats) ifade etmek için kullanılır. 

SWOT analizi bir kişinin ya da bir firmanın, nerede durduğunu ve daha ileriye gitmek için neler yapmasını gerektiğini anlayabileceği bir strateji planıdır. Karar verme mekanizması olarak kullanılır. Doğru bir SWOT analizi, hem içe dönük hem de dışa dönük bir araştırma gerektirir. Karakterimiz, firmamızın işleyiş biçimi iç unsurlara; rakiplerimiz, içinde bulunduğumuz koşullar ise dış unsurlara örnek verilebilir.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

SWOT analizini en temel haliyle açıklayan bir grafik. Sayı doğrusu mantığıyla açıklanan bu grafik, analiz sonucunda keşfettiğimiz yönlerimizin önceliklendirilmesinde kullanılır. Hangi başlıklar için iç unsurları ele almalı, hangi başlıklar için dış unsurları ele almalıyız sorularına yanıt verir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Renk kodlamaları kullanılarak yapılmış bir sunum şablonu. Renk sayısını artırarak çıktılarımız arasında önceliklendirme yapabiliriz. SWOT analizinin bir karar verme mekanizması olduğundan bahsetmiştik, farklı renklerin farklı renk tonlarıyla gösterilmesi, karar vermeyi kolaylaştırabilir. Eğer bir firma için bu analizi yapıyorsak da farklı paydaşlara analiz sonuçlarımızı anlatmak ve onların anlamasını kolaylaştırmak için kullanılabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Örümcek ağı grafikler ile anlatılan bu SWOT analizinde, çeşitli karşılaştırma konuları belirlenmiş ve rakiplerimize göre o konudaki becerimiz 0-4 arası bir skalada puanlanmış. Puanlama sonrasında her bir rakibin renkler ile kodlanması, grafikteki puan alanına yerleştirilmesi ve noktaların birleştirilmesi ile basit ama etkili bir görselleştirme ortaya çıkmış.

Lucidchart ve Creately içerisinde çeşitli hazır şablonlar bulunduran ve bu şablonları özgürce değiştirmenize imkan veren iki araç. Her iki aracın da 3 dokümana kadar düzenlemeye imkan veren ücretsiz planları mevcut.

Persona

Personalar, hedefleri ve özellikleri daha büyük bir kullanıcı grubunun ihtiyaçlarını temsil eden kurgusal karakterlerdir. Sıkça kullanılan Persona oluşturma metodu, kullanıcılarınızın ihtiyaçlarını, deneyimlerini, davranışlarını ve hedeflerini anlamanıza yardımcı olacak en iyi yollardan biridir. Farklı insanların farklı ihtiyaçları, farklı beklentileri olduğunu anlamanızı ve kullanıcılarınızla özdeşleşmenizi sağlayan personalar, tasarım kararlarını daha az karmaşık hale getirir, fikir oluşturma süreçlerinize rehberlik eder ve hedef kullanıcı grubunuz için iyi bir kullanıcı deneyimi yaratma hedefine ulaşmanıza yardımcı olabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi


Persona oluşturma hakkında yardımcı olabilecek kaynaklara bazı araçlar aşağıda yer almaktadır:

Xtensio: Xtensio, size persona oluşturmanızı sağlayacak yedi bölümden oluşan harika bir şablon sunar. Şablonun düzenini kolayca ayarlamanıza olanak tanıyan araçların yanı sıra şablonu düzenlemek için diğer ekip üyelerini ekleme özelliği de bulunmaktadır.

Hubspot: Pazarlama otomasyon şirketi Hubspot'un kendi persona şablonu oluşturma aracı ile dakikalar içerisinde kendi personanızı yaratabilirsiz.

Uxpressia: Uxpressia’nın sunduğu persona oluşturma hizmeti ile ekibinizle eş zamanlı olarak şablon üzerinden size uygun bir persona yaratabilir, personanızı özelleştirebilir ve yarattığınız personaları karşılaştırabiliriz.

Kart Gruplama

Temelde bir kategorize etme yöntemi olan kart gruplamayı genellikle ürünün bilgi mimarisini oluşturmak için kullanırız. Bu yöntem sayesinde bir sitede bulunan içeriklerin birbirleriyle nasıl ilişkileneceğini öngörerek, akışını tasarlayabilir ve sistemin yapısını kurabiliriz. Kart gruplama yapmak kullanıcıların beklentilerini anlamanızı sağlayacağından; web sitenizin yapısını oluşturmak ve kategorileri seçmek açısından size tasarım aşamasında kolaylık sağlayacaktır. Her karta içerikler tek tek yazılır ve genellikle kullanıcı kitlesinden oluşan katılımcılardan bu kartları anlamlı şekilde gruplamaları istenir.

Yaygın olarak Açık Kart Gruplama ve Kapalı Kart  Gruplama olarak 2 çeşidi kullanılır.

Açık Kart Gruplama

Açık kart gruplama, katılımcıların web sitenizdeki içerik konularını kendine anlamlı gelecek şekilde gruplara ayırıp bunları kendisinin isimlendirmesiyle oluşturulur. Kullanıcı tamamen serbesttir.

Kapalı Kart Gruplama

Kapalı kart gruplandırmada ise, kullanıcı içerikleri aynı şekilde gruplandırma işlemi yapar fakat bu sefer grupları kendisi isimlendirmez. Önceden tanımlanmış kategorilerin altına kartları yerleştirmeleri istenir.
Uygulaması kolay, maliyeti düşük ve kullanıcıyı sürece dahil eden bu yöntem oldukça erişilebilirken gerçeğe yakın sonuçlar almanıza da yardımcı olacaktır. Bir kart gruplaması yapmak için gerçek kartlar, kağıt parçaları veya bazı çevrimiçi kart sıralama araçlarını kullanabilirsiniz.

Optimal Workshop

Çevrimiçi kart sıralama aracı alan Optimal Workshop web sitenizi varsayımlara değil verilere dayalı olarak oluşturmanızı sağlar. Hızlı ve kolay bilgi toplar, insanlarla içgörülerinizi paylaşabilirsiniz.

Mental Model Haritası

Mental modeller dünyayı nasıl anladığımızdır. Sadece ne düşündüğümüzü ve nasıl anladığımızı şekillendirmekle kalmaz, aynı zamanda gördüğümüz bağlantıları ve fırsatları da şekillendirirler.

Mental Model Haritası

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Mental Model Haritalarında kullanıcının günlük yolculuğunda hangi adımlara dokunduğu ve o adımlarda hangi ürünlerle etkileşime geçtiğine yer verilebilir.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Mental model haritalarında renk kodları ile görselleştirmeler yapılabilir. Daha detaylı buradan inceleyebilirsiniz.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Working Adult - Seeking Financial Aid

Mental model haritalarında deneyimlenen adımlar ve o adımların alt başlıklarına yer verilirken, kullanıcının deneyim adımlarını anlayış şekline de yer verilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Mental model haritalarında belirli kullanıcı kitlelerine odaklanılsa da haritada yer alan adımlarda farklı renkler kullanılarak o kullanıcılara yer verilebilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Bazı mental model haritalarında belirlenen adımlar ve alt adımlarda kullanıcının anlayışına ve deneyimine yer verilebilir.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Mental model haritalarında bazı adımların fazla ögeye sahip olmasından dolayı görselleştirilmesinde büyütülerek sunulmasına dikkat edilebilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Kavramsal gruplara yer verilirken belirli task'ları belli etmek için farklı gösterim biçimleri kullanılabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Zihinsel model haritalarında ilişkilendirmeler kullanılırken dallandırmalardan yararlanılabilir. Buradan detaylı inceleyebilirsiniz.

Ağaç Testi

Web siteleri genellikle bir hiyerarşiye göre düzenlenir.  Sitedeki başlıkların ayrıldığı her yeni başlık, onun da ayrıldığı diğer küçük başlıklar… Dallanarak devam eden bu sistem aslında bir ağaç modeli oluşturur. Ağaç testi, bir web sitesindeki başlıkların/konuların bulunabilirliğini değerlendirmek için kullanılan bir yöntemdir. Bu teknik, insanların web sitenizdeki bilgileri ne kadar kolay bulabileceğini ve tam olarak nerede kaybolabileceklerini söyler. Ters kart gruplama olarak da bilinir. Kart gruplama egzersizlerinizden çıkan sonuçları doğrulamanın iyi bir yoludur. Boxes and Arrows'a göre; "açık kart sıralama iyi bir dedektiflik tekniği olsa da, nihai site yapısını sağlamaz - sadece ipuçları ve fikirler sağlar." Ağaç testinin devreye girdiği yer de tam olarak burasıdır. Diğer bilgi mimarisi testlerinden farklı olarak, ağaç testi kullanıcılarına gerçekçi görev senaryoları sunduğu için gerçek dünyadaki davranışlar hakkında daha fazla bilgi edinebilirsiniz.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

User Zoom
İster web sitesi üzerinden, isterseniz de mobil app üzerinden uygulayabileceğiniz Ağaç testi uygulamasıdır. Bunun yanı sıra kullanılabilirlikle alakalı birçok testi bu site üzerinden gerçekleştirmek mümkün.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

TreeJack
Adından da anlaşılacağı üzere TreeJack online Ağaç Testi platformudur. Sezgisel bir bilgi mimarisi oluşturmak için ihtiyaç duyduğunuz bilgileri elde etmek için kullanabileceğiniz efektif bir araçtır. Hiçbir işi size bırakmaz elde ettiğiniz çıktıları hızlı bir şekilde analiz eder.

Customer Journey Map

Müşteri Yolculuğu Haritaları (CJM),  bir şirketle müşteri ilişkisini, hizmetlerini ve zaman içindeki ürünlerini gösteren görseller veya grafiklerdir.

B2B Deneyim Haritası

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Müşteri Yolculuğu Haritaları'nda B2B (Business to Business) deneyimlerde kullanıcıların temas noktalarına ve duygu değişim durumlarına yer verilir.

Persona + Deneyim Haritası

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Müşteri Yolculuğu Haritalarında personalara yer vererek hangi kitlenin yolculuğunu anlattığımız daha net bir şekilde aktarılabilir.

Kullanıcı Yolculuğu

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Bazı kullanıcı deneyimlerini hayata geçirmek için üç boyutlu (3D) görselleştirmelere yer verilebilir. Akışı daha iyi anlatmak için bunun gibi 3D karakterler ve ögeler kullanılabilir.

Temas Noktası Envanteri

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Dijital temas noktaları belirlenen adımlara göre haritalandırılabilir. Renk kodlarıyla bu temas noktalarına dair notlar alınabilir.

Deneyim Haritası- Userspots

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Müşteri Deneyimi Haritasında yer verilen akış ve cihazlar belirlenip görselleştirilebilir. Bunun yanında haritalara özel Güzel Hareketler, Fırsatlar, Sıkıntılar alanları haritalandırma işleminde kendine özel isim kazanması görselleştirmeye katkı sağlar.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Service Blueprint

Müşteri Yolculuğu Haritalarında personalara yer vererek hangi kitlenin yolculuğuna yer verdiğimiz daha net bir şekilde aktarılabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Günlük Deneyim Haritası

Günlük olarak anlamak istenen deneyimler döngüsel bir şemaya oturtularak görselleştirme yapılabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Senaryolu Deneyim Haritası

Deneyim haritalarında yer alan aksiyonlar kısmında senaryolaşan adımlar akışı anlamamıza yardımcı olabilir ve deneyim haritasını okumayı kolaylaştırabilir.


Customer Journey Map Araçları

Deneyim haritası oluşturmak için birçok online araç bulunmaktadır. Birçoğu ücretsiz hesap oluşturup daha fazla özellik kullanmak istediğinizde ücret talep eden siteler olmasına rağmen ücretsiz versiyonları da kullanılabilir. Onun dışında Sketch, Adobe Illustrator gibi programlarla da kendi haritanızı tasarlayabilirsiniz. Miro'nun sunduğu hazır taslakları doldurarakta kendi deneyim haritanızı ortaya çıkartabilirsiniz.

Online araçlar;
Canvanizer, UXPressia, Smaply, Custellence

For IoS;
Graffletopia, Touchpoint Dashboard

Miro Templates
Template by Hanan , Template Fly UX

Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projelere yönelik kaynaklar, tasarım ilhamları ve daha fazlasını üyelere ulaştıran bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl!
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.

Wireframe

Kullanıcı odaklı tasarımın bir parçası olarak wireframe, tasarım sürecinin başında kullanılır. Fiziksel ürün tasarımcısına benzer olarak tasarım sürecinin başındaki eskizlerle karşılaştırılabilir. Dijital bir ürünü tasarlarken proporsiyonlar, hiyerarşik düzenlemeler ve ilişkiler ele alınarak, bütüne varmadan önce ürünü oluşturan iskelet bu süreçte şeklini alır.

Zaman tasarrufu:
Hızlı ve basit çizimlerle oluşturulabilir ve karşılaşılabilecek hatalardan erken dönülmesini sağlar.

Geri bildirim:
Arayüzü tasarımcısı ve deneyim tasarımcısı için son kullanıcı geri bildirimi çok önemlidir. Bunun en iyi enstrümanı renkten arındırılmış fonksiyon odaklı yapısı ile wireframe’dir.

Net tasarımlar:
Farklı türde wireframe yapıları, tasarımcıların net taslaklara ulaşmasını sağlar.
Tasarımcı bu taslaklar ile her içeriği doğru yerleştirebilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Genel olarak  Lo-Fi (Low Fidelity) Wireframe, Mi-Fi (Medium Fidelity) Wireframe ve Hi-Fi (High Fidelity) Wireframe üç ana türde ele alınabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Low Fidelity Wireframes (Lo-Fi)

Ayrıntılı piksel, ölçek hizalama içermeyen, kağıt üzerinde hızlı yaratılmış ve yaklaşık fikir verebilen çizimlerdir. Fonksiyonlar, içerik, başlık gibi bileşenler ham bir şekilde yerleştirilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Mid Fidelity Wireframes (Mi-Fi)

Bu tür genelde müşteri sunumları ve son kullanıcı ile iletişim sağlamak üzere kullanılır. Bu noktadan itibaren ayrıntılı piksel, ölçek ve hizalara dikkat edilir. Tasarımcılar arasında en sık kullanılan tür olarak sayılabilir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

High Fidelity Wireframes (Hi-Fi)

Lo-Fi ve Mi-Fi wireframe içeriklerinde görmediğimiz yazılar ve görseller bu türde yavaş yavaş kendini göstermeye başlar. Hi-Fi wireframe arayüz tasarımına en yaklaşmış, en kesin taslak olarak kabul edilir.



Wireframe Araçları

Basitçe elde çizilebilseler de çoğu zaman tasarımcılar taslaklarını, Adobe XD, Balsamiq, Figma, Justinmind, Sketch ve Miro gibi araçlarla dijital ortamda hazırlayabiliyor. Bu uygulamalar kullanılarak taslaklar interaktif olarak sunulabilir, kullanıcı testi ya da sezgisel analiz gibi yöntemler ile gerçek ortamlarında değerlendirilebilir.

Figma Community paylaşımları ile tasarım sürecini hızlandırmak mümkün.
Miro’da hızlı bir şekilde wireframe yapmak için wireframe menüsü bulunuyor.

User flow

User Data Flow Map
Bir veri akış diyagramı herhangi bir işlem veya sistem için bilgi akışını haritalandırır. Veri girişlerini, çıkışlarını ve hedefler arasındaki rotaları göstermek için kullanılır. Tüm iyi diyagramlar gibi, user data flow map'ler de genellikle kelimelerle açıklanması zor olan şeyleri görsel olarak açıklar. Hem teknik hem de teknik olmayan meslek grupları için kullanımı oldukça yaygın ve basittir.

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

User Flow-Phase One: Consideration

User flow, bir sistemdeki kullanıcıların kararlarını tanımlamak, bütün bir ürünün/hizmetin mantık akışını göstermek veya kullanıcıların ürün veya hizmetteki bir hedefe ulaşırken yapabilecekleri tüm eylemleri belirlemek için kullanılan akış türüdür. Ana amaç; kullanıcının neyi yapması gerektiğine ve bunu mümkün olan en etkili şekilde nasıl sunacağımıza odaklanmaktır. Böylece kullanıcıyı tasarım sürecinin merkezine yerleştirdiğimiz için daha iyi kullanıcı deneyimlerini tasarlayabiliriz.


Task Flows
Task Flows, bir kullanıcının bir görevi tamamlamak veya bir hedefi gerçekleştirmek için motivasyonlarını ve gerçekleştirilmesi gereken birincil adımları gösterir. Her gösterim çeşidinde olduğu gibi bu yöntemin de bazı incelikleri var. Örneğin odaktaki kullanıcının hedefine nasıl ulaştığını göstermek için minimum temas noktası kullanılmalıdır. Yalnızca gerektiğinde ürün veya hizmet ekosisteminin dışındaki temas noktaları dahil edilmelidir. En önemli adımlardan biri de kullanıcının hedefine ulaşmak için kullandığı birincil yola odaklanmaktır. Uç durumları daha sonraki aşamalarda tanımlayabiliriz.

Sketches - Paper Prototyping

Birçok harika tasarım, ürün, web sitesi veya uygulama kağıt ve kalemle başlar. Kağıt ve kalem ile çalışmak fikirlerinizi oluştururken tasarımınızı bir yandan deneyimleyerek bir yandan da geliştirebilmenizi sağlar.

Dijital temsillerinin yerine kağıt üzerinde ekran görüntülerinin çizimi olarak tanımlayabileceğimiz Paper Prototyping, erken aşama kavramsallaştırma için mükemmeldir. Hızı, kolaylığı ve basitliği, yeni fikirleri denemek için daha karmaşık dijital prototiplere göre Paper Prototyping’i çok daha uygun hale getirir.

Günümüzde kağıt üzerinde prototip oluşturmanın popülaritesi nedeniyle, süreci kolaylaştırmak için birkaç gelişmiş araç mevcuttur. Düğmeleri ve simgeleri hızlı ve doğru bir şekilde yeniden oluşturmak için şablonlar kullanabilir ve hatta ürün formunun nasıl görüneceğini daha iyi tasvir etmek için telefon kılıflarını taklit edebilirsiniz.


Paper Prototyping hakkında yardımcı olabilecek bazı toollar aşağıda yer almaktadır:

POP - Prototyping on Paper: POP, kalem ve kağıt ile oluşturduğunuz fikirlerinizi etkileşimli bir iPhone veya Android prototipine dönüştürmenize yardımcı olur.

UX Pin: UX Pin uygulaması, kağıt prototipinizin fotoğraflarını yüklemenize, hızlı etkileşimler eklemenize ve ardından uzaktaki ekip üyelerinden geri bildirim almanıza olanak tanır.

Sneakpeekit: Sneakpeekit’te birbirinden farklı birçok format ve cihaz için indirilebilir şablonlar bulunur.

Kullanılabilirlik Testi

Kullanılabilirlik testleri, adı üstünde bir ürünün gerçek bir kullanıcı tarafından ne kadar kullanılabilir olduğunu test ettiğimiz yöntemdir. Ürünün, kullanıcının önceki deneyimleri ile ne kadar örtüştüğünü ya da nerelerde neden örtüşmediğini anlamak için önemlidir.
 
Tasarım sürecinde sık kullanılan bu metot, doğru şekilde uygulandığında ürünün geliştirilmesine çok büyük katkıda bulunur. Bu metodun doğru uygulanabilmesi için testi yürütecek olan kişinin ya da kişilerin test öncesi, sırası ve sonrasında çeşitli sorumlulukları yerine getirmesi gerekmektedir.

Test öncesi planlama yapmak, test sırasında iyi gözlemlemek, test sonrasında iyi analiz yapmak ve bu analizleri en kolay anlaşılacak şekilde aktarmak bu sorumluluklardan bazıları. Aşağıda, sorumluluklarınızı yerine getirirken size yardımcı olabilecek bazı örnekleri paylaştık:

1- Önceliklendirme

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Bu örnekteki yöntem Rainbow Spreadsheet olarak anılıyor. Basit bir excel dosyasının sol tarafında test sırasında gözlemlenen bulgular listeleniyor, sağ tarafında ise kullanıcı numaraları ve onlara atanmış birer renk bulunuyor. Sıra, ne kadar renklenmiş ise o problem o kadar sık tekrar edilmiş demek oluyor.

2- Bulut

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Bu örnekte sıkça tekrar eden konuların daha büyük bir alan kapladığını görüyor ve bu konular hakkında daha çabuk aksiyon alınması gerektiğini anlıyoruz. Dikkatimiz hemen büyük alanlara ve canlı renklere kayıyor. Bu bulut yapısı tasarımın direkt içinde bulunmayan ancak empati yapması gereken paydaşlara (örneğin; patronlar ve onay vermesi gereken üst kıdemli kişilere) çıktıları anlatmak için iyi bir yol olabilir.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Bu örnekte görev takip uygulaması olarak ünlenen Trello’nun başka bir kullanım alanını görüyoruz. Kullanıcı yorumlarını gruplamak, etiketlemeler ve çeşitli çıkarımlar yapmak Trello ile oldukça kolaylaşabilir.

3- Planlama

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Kullanılabilirlik testini planlama aşamasında kullanılabilecek bir şablon. İçeriğinde katılımcı adları, görüşmelerin zamanı ve lokasyonu, kullanılacak ekipmanlar, görüşme konuları gibi temel ancak önemli başlıklara yer verilmiş.

Böyle bir şablonu kullanılabilirlik testlerimiz için kullanmak hem bizim kendi işlerimizi daha rahat toparlamamızı hem de ekip arkadaşlarımızla daha rahat koordine olmamızı sağlar. Test adımlarının birer birer yazılması bile kullanılabilirlik testlerinin standardizasyonu ve verim açısından oldukça önemli.

Örnekteki şablonun formatı, başlıklar ve başlıkların yerleşimi açısından ideal gözükse de proje büyüklüğüne ya da ekip içindeki dinamiklere göre değişebilir. Google Docs üzerinde tablolar çizerek ya da Miro üzerinde post-it'ler oluşturarak aynı işlevi gören yapıları kendinize en uygun şekilde oluşturabilirsiniz.

4- Sunum

userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi
Kullanılabilirlik testinden elde edilen kantitatif verileri daha ilgi çekici hale getirmek için Sunburst grafiği kullanılmış. Başlıklar ve başarı oranları verilen bu grafiği okumak da takip etmek de oldukça kolay. 
Bu tarz bir grafik çeşidi, uzun sunumlarda bilgilerin toplu halde gösterimini sağlamak ve özetlemek ya da farklı alanlar arasında karşılaştırma yapmak için kullanılabilir. Gerektiğinde daha renkli ve detaylı versiyonlarını oluşturabilmemize imkan sağlaması da bu grafiğin avantajlarından.
userspots-bulten-ux-cıktılarının-farklı-gorsellestirilmeleri-product-benchmark-site-haritası-swot-analizi-persona-kart-gruplama-mental-model-haritası-customer-journey-map-wireframe-userflow-sketches-kullanılabilirlik-testi-kullanıcı-deneyimi-tasarimi

Xtensio, sunum hazırlamak ve ekip arkadaşlarınızla iletişim için kullanabileceğiniz bir araç. Bu görsel, kullanılabilirlik testlerini sunum haline getirmek için oluşturdukları bir template. Xtensio websitesi üzerinden buna benzer başka templateler bulabilir, düzenleyebilir ve sunumlarınızda kullanabilirsiniz.

Searchness, kullanılabilirlik testlerinizi yürütürken kullanabileceğiniz bir araç. Görüşmelerin video kayıtlarını tutabilir, sonuçları istatistikler halinde görebilirsiniz. Kategorisindeki birçok araç ile benzerlikleri var ancak kullanıcı yorumlarını gruplayabilmeniz, alıntıların yanına o anı gösteren video kesitini iliştirebilmeniz gibi özellikleriyle benzerlerinden bir adım öne çıkıyor.
Bültenler
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlası hakkında içerikler paylaşıyoruz.

USERSPOTS SPACE

Bülten Yazılarımız

Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.