Tel Çerçeveye Ölüm. Doğrudan Yüksek Sadakat!

UX tasarımı büyüleyici bir disiplindir. Bunu iyi yapmak için, uygulayıcıların çok çeşitli konularda ve becerilerde iyi bilgi sahibi olmaları gerekir. Kullanıcı merkezli tasarım metodolojisini uygulamak ve günlük ürün tasarımı zorluklarına kullanımı kolay, yenilikçi çözümler yaratmak için, bir UX uygulayıcısının zanaatı ve anlayışı, temel çizimden anlatı/yolculuk tasarımına ve bilişsel psikolojiye kadar her şeyi içerir.

UX/UI tasarım sürecinde kullanılan çok çeşitli araçlar, üretilen eserler ve ortaya çıkarılan bulgular vardır ve bunlar çeşitli belgelerde ve hatta bir prototipte yakalanır. En tanınabilir, ekmek ve tereyağı eserimiz, eski güzel tel kafestir.

Tel çerçeveler (genellikle hızlı değerlendirme için oluşturulan tasarımların tek renkli iskeletleri) harikadır. İlişkisiz birçok taraftan gelen girdileri herkesin inceleyebileceği tek bir belgeye çevirmemize izin veriyorlar. Birçok farklı iş işlevi tel kafesleri değerlendirir; iş analistleri, proje yöneticileri, pazarlama yöneticileri, her türlü tasarımcı ve geliştirici, diğer çeşitli satıcılar ve hizmet sağlayıcılar - hatta ürün testi sırasında hedef kitle. Tel kafes, herkesin bireysel ihtiyaçlarının nasıl karşılanacağını görmesine izin verir ve tüm ekibe herhangi bir ağır kaldırma ihtiyacı ortaya çıkmadan önce tüm bükülmeleri çözme şansı verir.

Artıları ve eksileri var, ancak bazı durumlarda tel çerçeveleme aşamasını tamamen atlamak mantıklı. Keşiften hemen sonra veya prototip oluşturmaya hazırlanırken UX ve görsel tasarımı yüksek doğruluk düzeyinde ele alarak çok zaman kazanılabilir. Bu, başkalarına, kullanıcı testi katılımcılarından müşterilere ve iş arkadaşlarına kadar, ürünün hem işlevselliğini hem de görünüşünü ve verdiği hissi aynı anda değerlendirme fırsatı verecektir.

Tel çerçevelerin neden bazen sorunlu olabileceğini, bunları atlamanın mantıklı olduğunu ve tel kafes olmayan bir işlemin bir iş akışına nasıl uyarlanacağını öğrenelim.

Tel Çerçevelerle İlgili Sorun

İster şelale ister çevik ortamda olsun, tipik tasarım süreci araştırma, tanımlama, fikir oluşturma, prototip oluşturma, test etme ve devreye alma aşamalarının yanı sıra bu süreçte paydaşlarla gözden geçirilecek birçok temas noktasını içerir.

Tel kafes tasarımının darboğaz olabileceği örnekler için tasarım sürecine bakalım:

Sebep 1: Müşteriler Neye Baktıklarını Anlamıyor

Tasarım süreci tipik olarak probleme yönelik bir tür araştırma ile başlar. Masa başı araştırması, paydaş görüşmeleri ve kullanıcı görüşmeleri, daha derin bir anlayış kazanmak için gerçekleştirilebilecek faaliyetlerden sadece birkaçıdır. Tasarım ekibi araştırmadan sonra en iyi çözümü bulmak için bir dizi fikir ve konsepti değerlendirmeye başlar.

Bir konsept daha ayrıntılı hale getirildiğinde, tasarım ekibi genellikle bir inceleme oturumu sırasında müşteriyle bir dizi tel çerçeveyi paylaşır.

Sorun şu ki, tel çerçeveler çok soyut.

Şeye benzeyen bir şeyi tanımlarlar, ancak inşa edilecek asıl şeyi değil. Bu aşamada, tel çerçeveler aşağıdaki örnekte olduğu gibi yer tutucu görüntüleri ve her türlü TK'yi (gelecek), FPO'ları (yalnızca yerleştirme için) ve TBD'leri (karar verilecek) içerecektir.

Büyük bir açıklama listesinde gösterilecek olan işlevsellik, iş gereksinimleri ve hata işleme hakkında muhtemelen ayrıntılar vardır. Tipik olarak, bunları ayrıntılı bir şekilde taramak için asla yeterli zaman yoktur, bu nedenle müşteri bunları kendi başına okumak için bırakılacaktır.

Tel çerçeve incelemeleri sırasında, müşterilerimizden açıklanan konsepte odaklanmalarını ve bunun iş ve kullanıcı sorunlarını çözüp çözmediğini değerlendirmelerini istiyoruz. Ancak yine de bize alakasız gibi görünen şeyler hakkında sorular alıyoruz. Müşteriler, tel çerçevenin "son kopya" olup olmadığını veya kahraman görüntüsünde gösterilecek fotoğrafların örneklerini veya görsel tasarım, kullanıcı arabirimi prototipleme veya geliştirmede ele alınacak bir şey hakkında başka bir soru görüp göremeyeceğini bilmek ister.

Tel çerçeveler, müşteriler ve hatta iç paydaşlar için etkili bir şekilde değerlendirme yapamayacak kadar soyut olabilir. Tel çerçeveler insanlara bir tasarımın bittiğinde nasıl olacağını söyler, ancak yine de kafalarında bir araya getirmek için zihinsel olarak çok çalışmak zorundalar. Müşterilerimiz görsel düşünürler olabilir veya olmayabilirler ve onlardan bir plana bakmalarını ve başarılı bir ürün veya site hayal etmelerini beklemek çok fazla olabilir.

Açıklamalı görsel tasarımları incelemeyi özellikle talep eden birkaç müşteri vardı, çünkü onlar için noktaları birleştirmeleri çok daha kolay, düşünceli bir tartışma yapmaları ve üzerinde iyi düşünülmüş geri bildirimler vermeleri çok daha kolay.

Sebep 2: Kullanıcı Testi için Her Zaman Uygun Değiller

Umarım, tasarım sürecinde bazı kullanıcı testleri planlanmıştır, çünkü bu, tüm bir konseptin fizibilitesinden bir işlemde görüntülenecek ayrıntı düzeyine kadar her şeyi test etmenin iyi bir yolu.

Bu tür şeyleri test etmenin tipik bir yolu, prototip oluşturmaktır.

Tel çerçeveler prototipleme için çalışabilir ve çalışabilir. Tasarım ekibi yalnızca test akışı ve işlevselliği ile sınırlıdır ve görsel bir tasarım katmanı olmadığı için kullanıcı davranışını etkileyen görsel stiller kolayca göz ardı edilebilir.

Bu akıllıca mı? UX, görsel ve kopya tasarımın tümü birbirini etkiler. Bunları bir test ortamında ayırmak ve izole etmek zordur. Bilimsel bir araştırmaya benzer şekilde, tek başına test edilen bir işlevin sonuçları, vahşi doğada nasıl davranacağını kontrol edemez veya tahmin edemez.

Bazen, tüm bunları bütünsel olarak birlikte test etmek daha etkilidir.

Örnek olay: çok dilli bir ürün veya hizmet. Dillerin, genel tasarımı etkileyebilecek farklı gramer, alfabe ve karakter genişlikleri olabilir.

Ayrıca, kopya içerik UX'i etkilediğinden, çevirinin kendisi UX'i etkileyebilir.

Örneğin, çeşitli kavramların yerel dilde açıklanması gerektiğinden birkaç farklı bilgi mimarisini test etmemiz gereken bir ödevimiz vardı. Arayüzdeki asıl kopyayı test etmeden metin yazarlığı ve çeviri üzerindeki etkisini keşfedemezdik.

Yerel dilde benzer kavramları tanımlamak için daha fazla kelimeye ihtiyaç olduğunu ve bu dil için gereken ayrıntılı ifadeleri barındırmak için küresel olarak düğme boyutlarını ve şekillerini değiştirmemiz gerektiğini keşfettik. UI'deki gerçek görsel bileşenleri test ederken metin sorunlarına odaklanmadan, düğmelerin mobil ekranın tüm genişliğini alması gerektiğini keşfedemezdik, bu da UX tasarımımızı ileriye götürdü.

Anahtar teslimi: Özellikle çok dilli bir proje için, başlangıçtan itibaren yüksek kaliteli UI'ler hazırlamak mantıklıdır.

Sebep 3: Geliştiriciler ve QA için Hayatı Cehenneme Dönüştürüyorlar

Görsel tasarım aşamasında kaçınılmaz olarak olan şey, her şeyin hareket etmesidir. Yığılmış görüntüler karo haline gelir. Ortalanmış metin sola hizalı hale gelir. Akordeon tetik simgeleri + ve - idi, ancak şimdi onlar birkaç köşeli çift ayraç.

Bu, görsel tasarım sürecinin normal bir parçasıdır. Ayrıca normal olan, görsel tasarımda yapılan herhangi bir değişikliğin tel kafeslere "imzalanmış" olduğu için tel kafeslere yansıtılmamasıdır.

Tüm görseller onaylandığında, her şeyi geliştiricilere teslim etme zamanı. Çoğu durumda, bir stil kılavuzu ile birlikte bir dizi ayrıntılı, açıklamalı tel çerçeve ve bir dizi güzel görsel tasarım alırlar. Şimdi bu iki belge arasında çapraz referans yapmak ve hepsini hayata geçirmek onlara kalmış.

Bu, tasarım sürecinin gerçekten başarısız olabileceği bir alandır. Geliştiricilere başvurmaları için çok fazla belge veriyoruz ve hangi bilgilerin öncelikli olduğunu belirleme işini onlara bırakıyoruz. Bu, destek çağrıları ve KG için gereken süreyi artırır ve doğal olarak bir ürünün veya güncellemenin pazara sunulması için gereken süreyi etkiler.

Neden geliştiricilere her şeyi içeren tek bir doğru belge vermiyorsunuz? Çoğu müşteri, iş için tam bir referans olarak kullanmak için bir kopyayı da takdir edecektir.

Çözüm: Tel Çerçeveleri Atlayın

Açıkçası, tam bir tel kafes aşamasının gerekli olduğu zamanlar vardır ve olmadığı zamanlar vardır. Doğrudan yüksek kaliteye geçmenin tel kafes aşamasını tamamen geride bıraktığı zamanlar bile vardır.

Bunlardan herhangi biri doğruysa tel kafes aşamasını atlamayı düşünebilirsiniz:

Yerinde sağlam referans materyali var.

Mevcut çalışmalara bir göz atın. Halihazırda ayrıntılı kullanıcı arayüzü referansları mevcut olabilir. Mevcut bir web sitesinde güncellemeler yapıyorsanız veya mevcut bir uygulamaya yeni bir özellik ekliyorsanız, yeniden kullanılacak kalıpları ve stilleri bulmak için mevcut web sitesine ve uygulamaya bakın.

Mevcut çalışma için kaynak dosyalara erişiminiz olsaydı daha da iyi olurdu. Geliştirme sürecinde, tabir caizse çeviri sırasında bazı özellikler ve öğeler kaybolmuş olabilir ve bu özelliğin nasıl yapılması gerektiğini görmek için kaynak dosyaya başvurabilirsiniz.

Mevcut bir ürüne veya siteye ek olarak (veya yoksa), yerinde bir stil kılavuzu veya desen kitaplığı olup olmadığını kontrol edin. Müşteri, bazı markalaştırma ve görsel tasarım çalışmaları için zaten ödeme yapmış olabilir ve bu kaynaklar projeniz için yeniden kullanılabilir.

Yüksek kaliteli çıktılarınızın mümkün olduğunca doğru olması için bulabildiğiniz kadar çok stil ve desen kullanın.

Yol boyunca birçok yinelemeli prototipleme ve test planladınız.

Prototip oluşturma ve test etme haftaları boyunca kendinize biraz çaba gösterin. Belgenizi ilk kez dikkatli bir şekilde ayarlarsanız ve tekrarlanan stilleri, desenleri ve sembolleri akıllıca kullanırsanız, artımlı güncellemeleri yüksek doğrulukla kolayca yapabilir ve bunları doğrudan prototip oluşturma iş akışınızda yayınlayabilirsiniz. Tel çerçevelemeye gerek yok.

Büyük bir artı olarak, bir taşla iki kuş vurabilirsiniz. UX geri bildiriminizin yanı sıra görsel ve UI geri bildirimi alabilir ve tüm bu değişiklikleri tek seferde yapabilirsiniz.

Test katılımcılarınız çok gerçekçi.

Müşterileriniz ve iş arkadaşlarınız bazen somut örneklere ihtiyaç duyabileceği gibi projenizin hedef kitlesi de buna ihtiyaç duyabilir.

Son zamanlardaki bir iş, düşük okuryazarlık hedef kitlesi için finansal ekranlar tasarlamamı sağladı. Okuduğunu anlama tek sorun değildi - soyut kavramları ele almak genellikle çok zordu. Bu hedef kitlenin genellikle somut örnekler kullanarak finansal kavramları tartışması gerekiyordu; aksi takdirde, konuşmayı gerçekten takip edemediler.

Finansal kavramları anlamak için, bu hedef kitledeki test katılımcılarının gerçekten işlem yapıyormuş gibi hissetmeleri gerekiyordu. Ve ürünün nasıl çalıştığını anlamak için gerçek bir uygulama gibi görünmesi ve hissettirmesi gerekiyordu.

Bunun gibi bir izleyici kitlesi için tel kafesleri unutun! Sonunda bunların ne olduğunu açıklamak için çok zaman harcayacaksınız ve hedef kitleniz görevlere veya onlar hakkında nasıl hissettiklerine odaklanmayacak çünkü hayatlarında çok tanıdık olmayan bir şeyi kullanmakla ilişki kuramayacaklar.

Müşterinizin sınırlı zamanı ve/veya bütçesi var.

Zamanın, kaynakların ve bütçenin sizin lehinize olması nadirdir. Kendinizi genellikle kapsamı ve fiyatı düşürmeye çalışırken ya da nerede kıyabileceğinizi ve tasarruf edebileceğinizi görmek için çabalarken ve yine de müşterinize harika bir hizmet sunmaya çalışırken bulabilirsiniz.

Tam bir UX çalışmasına parası yetmeyen (veya satın alması muhtemel olmayan) bir müşteriniz varsa, tel çerçeveleme süresini kısaltmanızı önerebilir miyim? Gerekirse dahili olarak oluşturun, ancak projeyi müşteriniz için devam ettirin. Gerçek, somut tasarımları test edin ve müşterinizin gerçek çalışmaya tepki vermesini sağlayın.

Tel Çerçeve Aşaması Nasıl Öldürülür

Bu kısım, kişisel iş akışınıza ve müşterinizin özel ihtiyaçlarına bağlı olacağından oldukça özneldir.

Bununla birlikte, bu, başlangıçta iş akışınıza uyum sağlamayı deneyebileceğiniz ve daha sonra bu şekilde daha fazla pratik yaptıkça ince ayar yapabileceğiniz bir süreç "şablonu".

Adım 1: Her zamanki araştırma ve keşif sürecinizle başlayın.

Mülakatlar, saha gözlemleri, masa başı araştırması, rekabet analizleri - normalde yaptığınız (veya yapmayı planladığınız) her ne ise, bu aşamayı normalde yaptığınız gibi tamamlayın.

Adım 2: Yol boyunca biraz çizin.

Araştırma yaparken muhtemelen faydalı düzenler ve desenler, ilgi çekici akışlar ve benzerleri için bazı fikirler edinirsiniz. Bunları genellikle yaptığınız şekilde kaydedin. Defterimde, yanlarında yazılı notlar olan küçük resimler yapmayı seviyorum. Bir beyaz tahta üzerinde çizim yapmayı veya ilginç UI modellerinin ekran görüntülerini almayı tercih edebilirsiniz. İyi fikirleri hatırlamanıza yardımcı olan neyse onu yapın.

3. Adım: Yüksek kaliteli belgenizi hazırlayın

Seçtiğiniz tasarım aracını açın ve belgenizi uygun şekilde ayarlayın. Bazı çalışma yüzeyi boyutları seçin ve tekrarlanabilir şekiller, gruplar ve semboller oluşturmaya başlayın.

Marka renk paletini ayrı renk örnekleri olarak kaydetmek için zaman ayırın, yazı stilleri oluşturun ve düzenleyin ve gerektiğinde tüm şekillere uygulayabileceğiniz standart alt gölgeler ve filtreler yapın.

Sembollerinizi tam olarak doğru yapmak için çok zaman harcayın. Durumuna bağlı olarak dört farklı renge sahip olabilen bir düğmeniz olabilir. Farklı renkleri ve metin etiketlerini gerektiği gibi kolayca uygulayabilmeniz için, mümkünse, simge geçersiz kılmalarından yararlanın.

Kullanılan herhangi bir özel simge varsa, bunları kare bir çalışma yüzeyinde (veya hangi şekil uygunsa) ayrı semboller olarak kaydedin. Bu şekilde, uygun boşluk ve hizalamayı korurken bunları yukarı ve aşağı ölçeklendirmeniz kolay olacaktır.

Adım 4: Tasarlamaya başlayın.

Bu şekilde çalışmaya ve stil kılavuzunuzun nerede durduğunu (ve nerede olmadığını) görmeye alıştıkça, ilk turunuz biraz zor olabilir. Halihazırda tanımlanmış bir stili olmayan desenler için çözümler oluşturmanın yanı sıra, tüm stilleri doğru bir şekilde elde etmek için biraz ince ayar yapmayı bekleyin.

Bu süreç boyunca, iyi bir “kopyalama yönü” ile veya varsa gerçek kopya ile devam edin. “Sayfa başlığı buraya gelir” diyen başlıklar yapmayın. İzleyiciye, gerçek olsaydı burada ne olacağına dair bir fikir verin.

Aynı şekilde, 555-1212 telefon numarasıyla John Smith diyen isimlerden oluşan bir liste oluşturmayın. Farklı adlar ve numaralar oluşturmak için rastgele bir liste oluşturucu veya eklenti kullanın veya görüntülemeniz gereken veri kümesini oluşturun. Bu fazla abartılmış gibi görünebilir, ancak düzen ve karakter genişlikleriyle ilgili sorunları çözmenize olanak tanır ve izleyicinizin bu beş girişin hepsinin farklı olduğunu anlamasına yardımcı olur.

Adım 5: Tasarlamayı ne zaman durduracağınızı bilin.

Bu noktada dikkat etmemeniz gereken bazı detaylar var çünkü bunlar gerçekten çok uzun sürecek. Belki de bir kahramana gitmek için tam görüntüyü seçmek veya bir indirme durumunu belirtmek için özel bir simge tasarlamaktır. Bunlar, yer tutucu bir resim veya simge kullanmayı seçebileceğiniz ve gerçek görüntüleri veya ikonografiyi daha sonraki bir tarihte test edebileceğiniz bazı durumlardır.

Burada neyin uygun olduğuna karar vermeniz gerekecek, çünkü bu, projenin hedeflerine ve projede ne kadar ilerlediğinize bağlı olacaktır.

Çalışmayı doğru bir şekilde değerlendirmek için kullanıcı test katılımcılarınızın neye ihtiyacı olduğuna bağlı olabileceğini unutmayın. Yukarıda bahsettiğim düşük okuryazarlık hedef kitlesi için hiçbir şey çok fazla detay değildi. Her katılımcı için, uygulamanın gerçekten "onların" olduğunu hissettirmesi için, kullanılan gerçek adları ve telefon numaralarıyla birlikte prototipin bir varyantını yaptım. Ne kadar az varsaymak zorunda kalırlarsa, takip etmeleri o kadar kolay ve sonuçlarım o kadar iyi oldu.

6. Adım: Yüksek kaliteli geri bildirimin ve test sonuçlarının keyfini çıkarın.

Tasarımlarınızı, seçtiğiniz prototipleme aracında yayınlayın ve test için sahaya getirin. Artık işlevsellikten daha fazlası hakkında geri bildirim alabilirsiniz. Renk kontrastı veya okunabilirlik sorunları gibi olası görsel sorunları ortaya çıkarabilir ve kopyalama yönü veya çeviri ile ilgili sorunları keşfedebilirsiniz. Ayrıca, kullanıcıların görünüm ve his ya da marka hakkında sahip olabilecekleri olumlu ya da olumsuz duyguları da ortaya çıkarabilirsiniz.

Bunların hepsi, görsel tasarım aşamasına geldiğinizde muhtemelen geri bildirim alacağınız şeyler. Neden tüm bu geri bildirimleri şimdi almıyorsunuz? Görsellerle ilgili geri bildirimlerin bazıları UX'i doğrudan etkileyebilir ve bunun tersi de olabilir, bu nedenle mümkünse bunların hepsini aynı anda halletmek iyidir.

Toplama

Kuşkusuz, projenin başarısı için tam bir tel kafes aşamasının gerekli olduğu birçok durum vardır. Duyarlı bir web uygulaması gibi karmaşık bir tasarım, tel çerçevelere ayrı ve özel bir odaklanma gerektirir. Tüm iş gereksinimlerini, uç durumları ve hata işlemeyi tel kafes aşamasında çözmek, tam bir görsel katmanın önceden tasarlanmış ve uygulanmış olmasına kıyasla zamandan ve paradan tasarruf sağlayacaktır.

Ancak, doğru durumlarda, doğrudan yüksek kaliteye geçmek sürecinizi iyileştirebilir:

• Paydaş geri bildirimlerini iyileştirin . Hedef kitleden müşteriler, geliştiriciler, diğer tasarımcılar ve test katılımcıları tam olarak ne elde edeceklerini görebilir ve daha kaliteli geri bildirim vermelerini sağlar.
• Prototip oluşturma iş akışınızı hızlandırın . Tasarımlarınız hemen test edilmeye hazır olmakla kalmaz, aynı anda birçok şey hakkında geri bildirim alabilirsiniz: UX, kopya ve görseller.
• İstemcilere ve geliştiricilere tek bir belge sunun . Bir düğmenin nasıl çalışması gerektiğini anlamak için çapraz referans ve çeşitli belgeleri kontrol etme ihtiyacını ortadan kaldırın. Bu aynı zamanda müşterinizin size daha fazla geri bildirim alması için işi dahili paydaşlarıyla tartışması için harika bir yoldur.
• Zamandan ve paradan tasarruf edin . Ve bu hemen hemen her zaman iyi bir şeydir!

Bir dahaki sefere, referans verecek bazı mevcut tasarım malzemelerinizin olduğu veya işin düşük veya yüksek kalitede olması durumunda izleyicileriniz için büyük bir fark yaratacağı bir projeniz olduğunda bu yaklaşımı bir deneyin.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır