Ürün yönetimi eğitimlerinizden ya da iş arkadaşlarınızdan veya meslektaşlarınızdan tel kafes oluşturmanın faydalarını duyduğunuzdan eminim. Ürününüzde de bir tür tel kafes oluşturma süreci uygulamaya çalıştığınızı varsayıyorum.
Peki, süreciniz iyi işliyor mu? Tel kafeslerinizi mevcut uygulama şeklinizle en verimli biçimde kullanabiliyor musunuz? Aslında bu, kullandığınız sürece bağlıdır.
Tel kafes oluşturmanın etkililiğini artırmanıza yardımcı olmak için deneyimlerimi paylaşmak ve şimdiye kadar en iyi tel kafes oluşturma süreci olduğunu düşündüğüm süreçten bahsetmek istiyorum.
Tel Kafes Oluşturma, UX Tasarım Sürecinin Vazgeçilmez Bir Parçasıdır
Tel kafesler, ürününüzün nasıl görünmesini ve çalışmasını istediğinizi göstermek için kullanabileceğiniz, ürününüzün üst düzey görsel temsilleridir. Bu görseller sayesinde, mühendislerinizden sürece dahil olup geliştirmeye başlamalarını istemeden önce fikrinizi test edip yineleyebilirsiniz; böylece zamandan ve paradan tasarruf edersiniz.
NN/g'deki kullanıcı deneyimi uzmanlarının tel kafes oluşturma tanımını gerçekten beğeniyorum; çünkü bu tanım, bundan elde edeceğiniz temel faydayı ortaya koyuyor.
Eskizler ve kâğıt kullanarak önemli kullanılabilirlik sorunlarını erken aşamada belirlemeye yarayan hızlı ve uygun maliyetli bir tekniktir. Çevik ve Yalın süreçler için mükemmel bir seçimdir.
Hangi tel kafes oluşturma yöntemini seçtiğinizden (kâğıda çizim yapmak kesinlikle uygundur!) veya hangi tel kafes oluşturma aracını kullanmaya karar verdiğinizden bağımsız olarak (bunun için en iyi tel kafes oluşturma araçları listemize göz atabilirsiniz), neredeyse tüm tel kafes oluşturma süreçlerini denedikten sonra en iyi olduğunu düşündüğüm bu süreci uygulamanızı öneririm.
1. Adım: Kullanıcılarınızı Yeterince İyi Tanıdığınızdan Emin Olun
Harika tasarım, kullanıcılarını iyi tanıyan bir ekiple başlar. Sonuçta tasarımınız ve onun görselleştirdiği ürün, tasarımın hedeflediği kişilerin ihtiyaçlarını gerektiği gibi karşılayamıyorsa kimin işine yarar? Bu nedenle tel kafes oluşturmaya başlamadan önce atmanız gereken en önemli adım kullanıcı araştırması yapmaktır.
Aslında kullanıcı araştırması, tel kafes oluşturma sürecinizin tüm yaşam döngüsü boyunca (hatta sonrasında da) devam etmelidir; ancak şimdilik, gelecekteki müşterilerinizin ihtiyaçlarını ve günlük yaşamlarındaki gerçekliği anlamaya çalıştığınız başlangıç aşamasına odaklanalım.
Bu aşamada gerçekleştirmenizi önerdiğim önemli faaliyetlerden bazıları şunlardır:
Keşif Amaçlı Görüşmeler: Kullanıcılarınızın ne istediğini bilmek mi istiyorsunuz? Öyleyse bunu onlara doğrudan sormaya ne dersiniz? Kullanıcılarınızın yaşadıkları sorunlar ve bu sorunları çözmek için kullandıkları çözümler hakkında konuşmasına yardımcı olacak sorulardan oluşan bir liste hazırlayarak başlayabilirsiniz.
Ardından sosyal medya, Userinterviews veya Respondent gibi özel platformlar aracılığıyla potansiyel kullanıcılara ulaşabilir ve onları araştırmaya dahil edebilir ya da onlarla ticaret fuarlarında tanışabilirsiniz.
Son olarak görüşmeyi ya bir kayıt cihazıyla (böylece daha sonra analiz edebilirsiniz) ya da yanınızda oturup not alan bir görüşme yardımcısıyla gerçekleştirirsiniz.
Not: İdeal olarak ikisini de yapmalısınız.
Anketler: Görüşmeler, kullanıcı ihtiyaçlarının ve davranışlarının ardındaki nedenleri ortaya çıkarmaya yardımcı olan harika bir nitel veri kaynağıyken anketler, nitel ve nicel verilerin bir karışımını elde etmenizi sağlayarak bulguları istatistiksel anlamlılıkla doğrulamanıza olanak tanır.
Burada konuya fazla ayrıntılı girmeyeceğim; çünkü inceleyebileceğiniz anket soruları hakkında kapsamlı bir rehberimiz var.
Saha Çalışmaları: Bu durumda kullanıcılarınızı “doğal ortamlarında” gözlemlersiniz. Yani hedef kullanıcılarınızın çözmek istediğiniz sorunları yaşadığı ortamda sanal olarak veya fiziksel biçimde bulunursunuz.
Örneğin sosyal medya videolarını düzenlemeyi kolaylaştıracak bir araç geliştirdiğinizi düşünelim. Saha çalışmanız, bir sosyal medya içerik üreticisinin TikTok videosu çekme, videoyu düzenleme ve kanalına yükleme sürecini gözlemlemek olacaktır.
Saha çalışmalarını düzenlemek nispeten zor olsa da (kullanıcıların tümü günlük faaliyetlerini gözlemlemenizden rahatsızlık duymayabilir), size kullanıcılarınız hakkında en zengin bağlamı ve içgörüleri sağlar.
Paydaşlarla Keşif Atölyeleri: Evet, harika kullanıcı deneyimi tasarımı kullanıcıların ihtiyaçları etrafında şekillenir; ancak kilit paydaşlarınızı da unutmayalım. Kullanıcılarınız da paydaş olsa da bu terimi kurucularınızı/üst yönetiminizi, yatırımcılarınızı, birlikte çalışmanız gereken tüm yasal veya düzenleyici kurumları vb. ifade etmek için kullanacağım.
Bazen tasarım kararlarını kullanıcı ihtiyaçlarına göre değil, şu unsurları göz önünde bulundurarak verirsiniz:
- Vizyonunuz ve stratejiniz: Apple kullanıcıları kabloları ve kablolu bağlantıları seviyor; ancak Apple'ın vizyonu kablosuz bir gelecek—bu nedenle bağlantı noktalarını kaldırmaya devam ediyorlar. (Artık biliyorsunuz!)
- Yasal ortamınız: Çok sayıda çerez seçeneği sunmak kullanıcı dostu bir arayüz değildir; ancak yasal olarak göstermek zorunda olduğunuz bir şey olabilir.
Kullanıcılarınızı iyi tanıyor olmanıza rağmen, bir tasarım tercihi yapmak için kendi sezginize başvurabileceğinizden, sezgi için de bir durum söz konusudur.
Araştırmanın kavramı ve türleri netleştiğine göre, bunun gerçek hayatta nasıl görüneceğini bir örnekle açıklayalım.
Have an account? Log In
Örnek 1: Bir UI Profesyoneli İçin Tel Kafes Oluşturma Aracı Geliştirmek
Bir tel kafes oluşturma aracı (Balsamiq'e benzer bir şey) geliştirmekten sorumlu olduğunuzu ve hedef kullanıcılarınızın (bu durumda tasarım ekipleri) bu aracı tam olarak nasıl kullanacağını ve hangi sorunları çözmeyi umduğunu öğrenmek istediğinizi düşünün.
Bunu öğrenmek için, bir görüşme sırasında kullanıcılarımıza sormak istediğimiz sorulardan oluşan bir anket hazırlayabiliriz. Ankete şunları dahil edebiliriz:
Şimdi, geri bildirimlerin çoğunun belirli bir ürün tel kafesinin belirli bir bölümü hakkında yapılan yorumlar şeklinde olduğunu ve ürün yöneticisinin tel kafes tasarımını onaylaması gerektiğini öğrendiğimizi varsayalım. Bunlar, tel kafes hakkında yorum yapma ve onu onaylama iş akışı ile kullanıcı arayüzünü tasarlamamız gerektiğinden, tasarımımızı doğrudan etkileyecek iki bulgudur.
Özetlemek gerekirse, keşif araştırması yürütmek tel kafes oluşturma sürecinizin en önemli kısmıdır ve bunu atlamanızı kesinlikle önermem. Şimdi, tüm öğrendikleriniz elinizde olduğuna göre, tel kafes oluşturma sürecimizdeki bir sonraki adıma geçelim.
2. Adım: Kullanıcı Akışlarınızı Oluşturun
Ekranları/sayfaları oluşturmadan ve formlar, kartlar, görseller, düğmeler vb. bileşenlerinizi bunların üzerine yerleştirmeden önce, kullanıcılarınızın izleyeceğini düşündüğünüz adımların sırasını anlamanız gerekir.
Bu diziler kullanıcı akışları olarak da bilinir ve kullanıcılarınızın hedeflerine ulaşmak için izleyebileceği tüm olası yolları temsil eder. Bu hedefler, kaydolmak veya şifrelerini değiştirmek gibi sıradan ve “yönetimsel” bir işlem olabileceği gibi, temel özelliklerinizi de temsil edebilir (örneğin Spotify'da müzik aramak ve müzik dinlemek).
Her iki durumda da kullanıcı akışları oluşturmak önemlidir; çünkü bu, tasarlamak istediğiniz tüm ekranları/sayfaları ve her birinde ihtiyaç duyduğunuz içeriği daha iyi görselleştirmenize yardımcı olur.
Akışları daha iyi anlamak için Flowmapp adlı bir akış şeması aracı kullanarak bir örnek göstereyim.
Örnek 2: Flowmapp Kullanarak Bir Web Tasarım Aracının Kullanıcı Akışını Görselleştirmek
Webflow gibi sürükle ve bırak özellikli bir web tasarım aracı geliştirdiğinizi varsayalım. Kullanıcılarınız kodsuz web tasarımcıları ve web sayfalarına arka plan görseli eklemek için izleyecekleri adımları görselleştirmek istiyorsunuz.
Bu özellik için bir kullanıcı akışının Flowmapp'te nasıl görüneceği aşağıdaki gibidir:
Gördüğümüz gibi, bir kullanıcı akışında vurgu, sayfalardan ve bunların tasarımından çok kullanıcının gerçekleştirdiği eylemler ile bunlar arasındaki sıra/nedensellik üzerindedir.
Bu örnekte, kullanıcının galeriden bir görsel seçebilmesini veya galeriye bir görsel yükleyip ekleyebilmesini istiyoruz. Ayrıca aracımız görseli kullanıcımızın web sayfasının arka planı olarak uygulamadan önce kullanıcının görseli önizleyebilmesini istiyoruz.
Buradaki akışa baktığımızda, kullanıcının aynı sayfada (web sayfası düzenleyicisinde) kalacağını ve görsel galerisini açılır pencere biçiminde gösteren başka bir ekran görebileceğini anlıyoruz.
Dolayısıyla, ilgili tasarım öğeleri ve özellikleriyle birlikte tasarlanması gereken bir sayfa ve bir açılır pencere vardır.
Ürünümüzde kullanıcıların hedeflerine ulaşmak için attığı adımlara genel bir bakış elde ettiğimize göre, nihayet tel kafesin kendisini oluşturmaya başlayabiliriz.
3. Adım: Düşük Ayrıntı Düzeyli Bir Tel Kafesle Başlayın
Evet, tel kafes oluşturmak bu sürecin üçüncü adımıdır. Ancak inanın bana, önceki iki adımı uygulamak tel kafesinizin kalitesini bambaşka bir seviyeye taşıyacak ve bu adımlara zaman ayırmaya kesinlikle değecektir.
Wireframe'in kendisiyle ilgili olarak, düşük ayrıntı düzeyli bir wireframe ile başlamanızı öneririm. Düşük ayrıntı düzeyli bir wireframe, sayfalarınızın ve ekranlarınızın doğru renkleri, boyutları ve diğer tasarım özellikleri gibi belirli ayrıntıları içermez. Gerçek görseller ve metinler de bulunmaz. Bunun yerine, her ikisi için de yer tutucularınız olur.
Düşük ayrıntı düzeyli bir wireframe'in bu şekilde olmasının ve onunla başlamanız gerektiğinin iyi bir nedeni var—düşük ayrıntı düzeyli wireframe'ler hızlı bir şekilde oluşturulabilir ve düzenlenebilir.
Tasarımınızda oldukça önemli bir şeyi gözden kaçırmış olma ihtimaliniz yüksektir. Tasarımınız hakkında geri bildirim toplarken (bunu bir sonraki adımda ayrıntılı olarak ele alacağız), değiştirilmesi gereken çok sayıda öğe ve akış olduğunu anlayabilirsiniz.
Eksiksiz bir tasarımınız olsaydı, bu değişiklikleri yapmak günlerinizi alırdı. Ancak düşük ayrıntı düzeyli bir wireframe ile düzenlemelerinizi yapabilir ve tasarımınızı birkaç saat içinde veya daha kısa sürede bir geri bildirim turu daha almak üzere sunabilirsiniz.
Öyleyse, düşük ayrıntı düzeyli wireframe'leri bu kadar övdüğümüze göre, popüler bir wireframe oluşturma aracı olan Balsamiq'i kullanarak bunların nasıl göründüğüne bakalım.
Örnek 3: Web Sitesi Wireframe'i Oluşturma
Wireframe oluşturmaya, özellikle de düşük ayrıntı düzeyli wireframe'ler oluşturmaya özel tasarım araçlarının güzelliği, her öğeyi sıfırdan çizmek zorunda olmamanızdır.
Bunun yerine, bu araçlar genellikle tasarımı sizin için özellikle hızlı hâle getiren sürükle ve bırak kontrolleriyle birlikte, önceden hazırlanmış çeşitli temel arayüz öğeleri (ör. görseller, menüler, içerik haritaları, düğmeler vb.) sunar. Balsamiq kullanarak oluşturduğum bir örneği burada görebilirsiniz.
Düşük ayrıntı düzeyli wireframe'lerin doğası gereği, bunlar genellikle gri tonlamalıdır veya üzerlerine çok az renk ve görsel tasarım eklenmiştir. Bunun yerine, tasarımınızdaki arayüz öğelerinin genel görünümünü, bunların yerleşimini ve bilgi mimarisini görebilirsiniz.
Artık düşük ayrıntı düzeyli wireframe'iniz hazırsa, onu ilk inceleme turuna sunmanın zamanı geldi.
4. Adım: Düşük Ayrıntı Düzeyli Tasarımınızı Dahili Olarak Yineleyin
Nihai ürün tasarımınızı oluşturmak için zaman ve emek harcamadan önce, tasarımda birçok şeyi yanlış yaptığımızı veya dikkate almayı unuttuğumuzu varsayalım ve düşük ayrıntı düzeyli wireframe'imizi çalışma arkadaşlarımıza ve paydaşlarımıza göstermeye başlayalım.
Elbette bu tasarımı kullanıcılarınıza da gösterebilirsiniz. Ancak tasarımınızı incelemeye veya kullanılabilirlik testi yapmaya istekli kullanıcıları bulmanın ne kadar zor olduğunu düşündüğümüzde, onların değerli zamanlarını çalışma arkadaşlarınızın kolayca fark edebileceği sorunları belirtmekle harcamak yerine daha yüksek ayrıntı düzeyli tasarımları incelemeye ayırmanızı öneririm.
Ancak bu aşamaya paydaşlarınızı dâhil etmenizi kesinlikle öneririm. Bunun iki temel nedeni şunlardır:
- Paydaşları erken aşamalardan itibaren sürece dâhil ederek, ürünün geliştirilmesini sağlayan ekip üyeleriyle aralarındaki “mesafeyi” azaltmak.
- İleride zaman kazanmak için stratejik uyumla ilgili tasarım sorunlarını erken aşamalarda düzeltmek.
Son olarak, çalışma arkadaşlarınızdan ve paydaşlarınızdan geri bildirim alır almaz, düşük ayrıntı düzeyli wireframe'inizi bu geri bildirim doğrultusunda düzeltebilir, düzeltmeleri onlarla doğrulayabilir ve ürününüz için gerçek görsel tasarımı oluşturmaya geçebilirsiniz.
5. Adım: Yüksek Ayrıntı Düzeyli Bir Wireframe ve Tıklanabilir Bir Prototip Hazırlayın
Tasarımınızın genel olarak nasıl görüneceğini doğru şekilde anladığınıza göre, artık tasarımınızın görsel kısımlarını oluşturmaya ve onu geliştirmeyi amaçladığınız hâle en çok benzediği duruma getirmeye güvenle yatırım yapabilirsiniz.
Bu tasarım aşamasında dijital wireframe'iniz şunları içerecektir:
- Arayüz tasarımınız: doğru renkler, gölgeler, tipografi ve yazı tipleri, kenar boşlukları vb. dâhil.
- Görsel içeriğiniz: sayfalarınızda görseller, illüstrasyonlar, videolar veya diğer grafik öğelerini kullanmayı planlıyorsanız, bunları eklemeniz gereken zaman budur.
- Sayfanızın metinleri: arayüz öğelerinizdeki, düğmelerinizdeki, başlıklarınızdaki vb. metinleri kastediyoruz.
- İçeriğinizin temsili bir örneği: tasarımınız kullanıcı tarafından oluşturulan herhangi bir içerik veya size ait içerik barındırıyorsa, bunun temsili bir sürümünü de eklemelisiniz. (Örneğin, gerçek kullanıcılarınızın yazacağı bir yorumun tipik boyutuna ve içeriğine sahip bir gönderinin altındaki yorum tasarımı.)
Tasarımını temel alarak ürününüzü geliştirecek mühendislik ekibinize sunulacak temel çıktı olmasının yanı sıra, yüksek ayrıntı düzeyli wireframe, gerçek kullanıcılarınızla gerçekleştirilecek kullanılabilirlik testleri için de harika bir araç olabilir.
Test için doğrudan yüksek ayrıntı düzeyli wireframe'i kullanabilir veya etkileşim tasarımı ekleyerek onu tıklanabilir bir prototipe dönüştürüp bir adım ileri taşıyabilirsiniz.
Burada sözünü ettiğim terimleri (yüksek kaliteli tel çerçeveler, etkileşimli prototipler vb.) birbirine karıştırmak gerçekten çok kolaydır. Bu nedenle, birkaç örnek göstermekle birlikte bunları sizin için açıklığa kavuşturayım.
More Articles
Tel Çerçeve Türlerini Ayırt Etme: Maketler ve Yüksek Kaliteli Tel Çerçeveler ile Tıklanabilir Prototipler
Bu üç kavram birbirine oldukça benzer ve ne yazık ki insanlar bunları birbirinin yerine kullanıyor; bu da ürün ve tasarım alanlarında henüz yeni olanlar arasında kafa karışıklığına yol açıyor.
Her bir terimin anlamı şöyle:
Yüksek kaliteli tel çerçeve: Bu konuya yukarıda zaten değinmiştik. Bu nedenle bunun yerine size nasıl göründüğünü göstereyim.
Bu etkileyici tasarım, sizin için üst düzey yemekler hazırlamaları üzere özel şefler kiralamanıza olanak tanıyan bir hizmete ait. Gördüğümüz gibi bu tasarım, son görsellerden renklere ve konumlara kadar her şeyi içeriyor. Ayrıca sayfadaki profesyonel bir şefin referansını temsil etmek üzere üzerinde biraz “lorem ipsum” metni de bulunuyor.
Maket: Benzerinin aksine maket yalnızca son tasarımı içermez, aynı zamanda bu tasarımın göründüğü ortamı da gösterir. Ürün maketi oluşturucuları bu bağlamsal görsellerin oluşturulmasına yardımcı olabilir. Örneğin antetli kâğıt tasarlıyorsanız maket, üzerinde tasarımınızın bulunduğu bir kâğıt parçasını masanın üzerinde gösterir.
Bir mobil uygulama söz konusu olduğunda maketiniz, tasarımınızın ekranda göründüğü bir iPhone veya Android cihazının silüetini gösterir.
Prototip: Prototip, yüksek kaliteli bir tel çerçeveye benzer; ancak son görünümün yanı sıra ürünün işlevselliğini de taklit etmeye çalışır.
Tıklanabilir prototiplerle veya 3D prototipleme araçlarıyla kaydırma, animasyonlar, düğmelere tıklama, uygulama içinde gezinme gibi temel etkileşimler ekleyebilirsiniz.
Prototipler, ürününüzün etkileşimini taklit ederek özelliklerinizin geliştirmeden önce istediğiniz şekilde çalışıp çalışmayacağını test etmenizi sağlar.
Ayrıca yüksek kaliteli prototiplerinizi kullanıcılarınıza verip ürününüzle nasıl etkileşime girdiklerini, sorunlarını nasıl çözdüklerini veya tasarımınızda yollarını nasıl bulmaya çalıştıklarını gözlemleyerek kullanıcı testleri gerçekleştirebilirsiniz.
Tel Çerçeve Oluşturma, Test Etme ve Yineleme Oyunudur
Tel çerçevelerin yinelemeli yapısı, hatalarınızı düzeltmek için harcayacağınız büyük miktarda çabadan tasarruf etmenizi sağlar. Ayrıca bunun gibi bir tel çerçeve oluşturma sürecinden geçerek kullanıcılarınızın ihtiyaçlarına en iyi şekilde hizmet edecek bir ürün elde etmesini sağlamış olursunuz.
Şirketinizde farklı bir tel çerçeve oluşturma süreci mi kullanıyorsunuz? Bunu merak ediyorum; aşağıya bir yorum bırakıp nasıl yaptığınızı bize anlatın!
Umarım bu rehberi beğenmiş ve faydalı bulmuşsunuzdur. Ürün yönetimi alanındaki en iyi profesyonellerden bazıları tarafından yazılmış diğer rehberlere de mutlaka göz atın:
- Ürün Vizyonu ve Stratejisi arasındaki fark — Kerstin Exner.
- Ürünün 3P'si — Benoit des Ligneris.
- Ürün Gereksinimleri Belgeleri — Sarah Tolle.
Son olarak bültenimize abone olabilirsiniz; biz de ilgi çekici içerikleri gelen kutunuza gönderelim.