UX Tasarım Sürecinizi Mükemmelleştirin - Prototip Tasarım Kılavuzu

Basit tel çerçeveler oluşturmaktan tamamen işlevsel maketleri test etmeye kadar prototip oluşturma süreci, herhangi bir tasarımcının ustalaşabileceği en güçlü ve güçlü becerilerden biridir. Ayrıca, bir sonraki departmana verilecek basit bir çıktı olarak sadece “prototip tasarlamak” yerine sürecin atlandığı işyerlerinde tehlikelerle doludur. Prototipleme konusunda işiniz ne kadar titiz olursa olsun, gerçek süreç genellikle nihai ürününüzü yapabilir veya bozabilir.

Gerçekte bir prototipin nasıl ve neden oluşturulacağı genellikle bir gizemdir. Birçok tasarımcıya sorun, kafaları karışmış köpek yavruları gibi başlarını eğeceklerdir. "Ne demek istedin? Sadece yap," diyecekler. Ve yeterince doğru: Hepimiz bir prototipin nasıl oluşturulacağını biliyoruz. Sadece nasıl bildiğimizi bilmiyoruz.

Bu, prototiplerin genellikle en değerli çıktılar olduğu düşünüldüğünde özellikle kritiktir. Müşteriler ve yöneticiler, bir web sitesi veya fiziksel bir ürün olsun, ne yaptığınızı görmek ister. Denemek, çeşitli unsurları incelemek ve iş akışını anlamak istiyorlar. “Nasıl çalıştığını” görmek istiyorlar.

Bir prototip oluşturmak yeterli değildir; bir ürünün ilk taslaklarını oluşturma sürecini anlamamız gerekir. Bu makale, bir tasarımcının bunu başarmak için bilmesi ve yapması gereken her şeyi derinlemesine ele alacaktır.

Prototip Tasarımı - Prototipler Ne İçindir?

İnsan son derece görseldir. Aslında, serebral korteksimizin yüzde 30'u tamamen vizyona ayrılmıştır. Yani bir prototip gördüğünüzde, onunla ilgili en önemli şey onu görmenizdir ! Müşteri bunu görüntüleyebildiğinde ve ürünle ilgili tüm süreçleri, özellikle de gelecekteki testler için çekişme alanlarını anlayabildiğinde, bu prototip hayata geçer.

Peki prototip nedir? Prototip, etkileşimli tasarım çalışmasının bir smorgasbordunu görselleştirmek için bir araçtır; Aslında, prototipler (neredeyse her aşamada), daha önce gelen tüm çalışmaların tek, görünür, işlevsel bir parça halinde birleştirilmesidir. Bu görsel temsil, ürünün herhangi bir noktada ne yaptığını, etkileşimli öğelerin neler olduğunu ve ürünün gerçek dünyada nasıl işlev göreceğini gösterir.

Prototip tasarımının çeşitli yönleri için (eskiz oluşturmak gibi) pek çok mekanizma olsa da, bazı şeyleri gözden kaçırmak ve hata yapmak kolaydır.

Bu, birçok yönden ürünün amacının nasıl gerçekleştirildiğini tanımladığı için, bir prototipin nasıl oluşturulduğuna ilişkin çalışmayı son derece değerli kılar. Mükemmel değil ve çoğu zaman kesinlikle doğru değil, ancak adından da anlaşılacağı gibi prototipler nihai değil.

Bizi hızlandırmak için yavaşlatıyorlar. Fikirlerimizi prototiplemek için zaman ayırarak, çok erken karmaşık hale gelmek ve zayıf bir fikre çok uzun süre bağlı kalmak gibi maliyetli hatalardan kaçınırız.

IDEO CEO'su ve başkanı Tim Brown

Prototipleri düşünmenin basit bir yolu, işlevselliği göstermek için bir mekanizmadır.

Bir şeyin nasıl çalıştığına dair bu pratik açıklama, aşağıdakiler de dahil olmak üzere bir dizi yüksek değerli faydaya sahiptir:

• Gerçekleştirmek – Herhangi bir prototip oluşturulmadan önce, ürün tamamen kavramsaldır! Bu bir süre için sorun değil, ancak sonunda paydaşların ve kullanıcıların eninde sonunda anlayıp takdir edeceği bir şey haline gelmelidir. Bir prototip, kavramsaldan gerçeğe geçişin ilk adımıdır.
• Bir problem üzerinde çalışın – Bazen, çözümü olmayan bir tasarım zorluğumuz olur. Bir beceri olarak prototip oluşturma, sorunu görselleştirmenin ve çözümleri hızla sunmanın harika bir yoludur. İşe yaramazsa, prototipi atın ve tekrar deneyin.
• Yinele - Prototipleme aşamalar halinde gelir, ancak sonuç aynıdır: fikirlerinizi geliştirmek. Eskizlerden hi-fis'e kadar her yeni yineleme, test edilecek çok sayıda davranış ve işlev sunar. Ve daha fazla veriyle hem daha hızlı hem de daha akıllıca yineleme yapabiliriz.
• İstenmeyen senaryoları tespit edin – Bir şey görünür olduğunda, orada ne olması gerektiği ve ne olmaması gerektiği konusunda daha iyi bağlam sağlayan ürünümüzün çalışma için mevcut sınırlamalarına sahibiz!
• Kullanılabilirlik sorunlarını tespit edin – Birçok tasarımcının yaşadığı yer burasıdır: Bir ürün herhangi bir türde prototipe sahip olduğunda, kullanılabilirlik zorluklarını birdenbire fark etmek ve düzeltmek kolay hale gelir.
• Sunum – Herhangi bir aşamadaki prototipler, sunum için bir standarttır. İster bir sayfanın bir sürümünü test ediyor olun ister bir müşteriye bir ürün sunuyor olun, bir şekilde bir prototip orada olmalıdır. Ve değilse, birisinin nerede olduğunu ve neden dahil edilmediğini soracağına bahse girebilirsiniz.

Prototipleme Sürecine Nasıl Başlanır?

Bir müşteriden 50 sayfalık bir gereksinim belgesi aldıktan sonra boş bir tuvale bakmak göz korkutucu olabilir. Müşteri toplantılarından, peçete eskizlerinden ve kirli beyaz tahta fotoğraflarından derlenmemiş düşünceleri gözden geçirmek nadiren yardımcı olur.

Prototipler çok fazla başka bilgi üzerine inşa edildiğinden, kalemi kağıda dökmek için gerekli ayrıntıları önceden toplamak önemlidir. Aşağıdaki kontrol listesini göz önünde bulundurun ve müşteriniz veya yöneticiniz tarafından sağlanan ayrıntıları gözden geçirin:

1. Projenin hedefleri nelerdir?

Büyük resimle başlayın. Ürün gerçek bir ihtiyacı çözüyor mu? Bu ihtiyacı nasıl çözüyor? Ürünün faydasını anlamak, her türlü uygulanabilir çözümü sunmak için kritik öneme sahiptir.

2. İnsanlar şu anda hangi rekabetçi ürünleri kullanıyor?

Güçlü bir rekabet analizi, ürün türü için pazarın durumunun ve günümüz kullanıcılarının beklentilerinin net bir resmini sağlayacaktır.

3. Seyirci kim? Hedefleri neler?

Demografiyi ve kullanıcı ihtiyaçlarını anlamak, bu belirli kullanıcı türlerini sağlamaya ve onların ihtiyaçlarını karşılamaya yönelik ürünler oluşturmak için gerekli bağlamı sağlar.

4. Ne tür bir ürün ve ne (cihaz) için?

Pek çok farklı teknoloji ve çözümle, UX tasarımcılarının ürünün nasıl kullanılacağını (web uygulaması, duyarlı web sitesi, mobil uygulama vb.), hangi cihaz(lar)da ve farklı sürümlerin nasıl bir arada bulunacağını (eğer varsa) bilmesi gerekir. ).

5. İzlenecek görsel emsaller var mı?

Ürün zaten mevcutsa ve proje iyileştirme veya yeniden tasarım amaçlıysa, ürünle ilgili mevcut kullanıcı davranışı dikkate alındığında bazı gereksinimlerin olması mümkündür.

6. Çıktılar nelerdir?

Teslimatlar ve süreçle ilgili beklentileri belirlemek, planlamanız ve iş akışınız için kritik öneme sahiptir. Her proje farklıdır, ancak çıktılar iyi tanımlanmışsa, UX tasarım sürecinin geri kalanının sorunsuz gitme şansı daha yüksektir.

Prototiplerinizi Çizin

Verilerimiz mevcut ve organize edildiğinde, bir sonraki adım çizime başlamaktır. Pek çok tasarımcı, görsel tasarımın belirli öğelerinin yerleşimi, yapısı ve hatta nereye ait olduğu konusunda daha çizim yapmadan önce bir fikre sahip olacaktır. Sorun değil, ancak ilk eskizlerin amacı, neyin mümkün olduğunu ve daha da önemlisi, neyin mümkün olmadığını vurgulamak için mevcut alanı keşfetmektir.

Kalem ve kağıt ya da beyaz tahta ve keçeli kalem olsun, tercih ettiğiniz yazı gereçlerini toplayın. Eskiz süreci, bir yazarın serbest yazısına veya bir müzisyenin tıngırdatmasına benzer; Önceden yaptığınız tüm çalışmalara dayanarak ve aşağıdaki parçaları göz önünde bulundurarak hissettiklerinizi çizin:

01 | Kullanıcı Akışları – Tanımlayıcı kullanıcı akışlarını izleyin. Kullanıcıların hedeflerine nasıl ulaştıklarını ve sistem içinde nasıl etkileşim kurduklarını görün.

02 | Bilgi varlıkları – Her kullanıcı akışı, bazı kullanıcı girdilerini ve çıktılarını gösterecektir. Ne olduklarını, kullanıcı davranışı ve beklentileriyle nasıl ilişkili olduklarını, hangi etkileşimlere dahil olduklarını ve nasıl çalıştıklarını belirleyin.

03 | İlk skeçler – Sistemi kimin kullanacağı, ne yapacakları ve ne ile ilgili bir fikir edindikten sonra, nasıl yapılacağını görmenin zamanı geldi. Kullanıcı akışlarınızı çizin; henüz düzeni oluşturmanıza gerek yok, yalnızca işlevselliğin çözülmesini sağlayın.

04 | İlkel bir yapı çizin – Kullanıcı akışlarınız çizildikten sonra, ürün için en iyi yerleşim düzeni hakkında daha iyi bir fikre sahip olacaksınız. Bu, temel kutular veya karalamalar olarak görünecek içeriği (metin, fotoğraflar, video vb.) içerecektir. Elle yazıldığında boyuta sığmazlar, bu nedenle tüm yapı ve içerik gerçek kullanım için değil, yalnızca görselleştirme içindir.

Ek bir ipucu, çizim yaparken daha net tel çerçeveler yapmak için eskiz defterleri, özel olarak formüle edilmiş kağıt veya araçlar kullanmaktır. Söz konusu görüntü alanı için temel düzeni sağlarlar, oldukça düşük maliyetlidirler ve uygun şablonla eskizlerin daha temiz görünmesini sağlarlar. Bunlar, akıllı telefonlar ve web tarayıcıları için doğru en-boy oranlarını ve kılavuz çizgilerini sağladıkları için dağınık bir çekmece iseniz çok faydalıdır.

Bu süreç istediğiniz kadar devam edebilir, ancak bir kullanıcı akışı tamamlandıktan ve bu akışı tamamlama süreci netleştikten sonra bir sonraki adıma geçme zamanı. Temel olarak süreci yaratıcı tutmak için, çizim yapmak ve dijital tel çerçeveler oluşturmak arasında gidip gelmek iyi bir fikirdir. Daha fazla akışta ilerledikçe, ürün daha somut hissedecek ve doğal olarak eskizden uzaklaşacaksınız.

Dijitale Geçiş (Düşük-Yüksek Kaliteli Prototipler)

İlerlemek için yeterince eksiksiz eskiz olduğunda, onları dijitalleştirme zamanı. Adobe XD veya Sketch, Framer veya Flinto veya tamamen başka bir şey olsun, eskizlerin dijital versiyonlarını oluşturmak onları resmileştirmenin ilk adımıdır. Bu nedenle odak, gerekli unsurları yaratıcı bir şekilde eklemekten tasarımlar içinde varlıkları ve yapıyı düzenlemeye kayar.

Prototipler daha pratik hale geldikçe ve elemanlar daha yapısal hale geldikçe ürün şekilleniyor. Dijital prototiplere geçerken, aslına uygunluk etkileşim düzeyi, görsel tasarım ve içerik tarafından belirlenir. Bir prototip, bu alanlarda bireysel olarak düşük veya yüksek sadakat olabilir, ancak hi-fis her üçünü de en üst düzeyde içerir.

Kullanıcı ihtiyaçlarına ulaşma konusunda hiyerarşiyi göz önünde bulundurun. Her eskiz, bir kullanıcı akışına ve hikayesine bağlanır ve eskizler, bir ürünün düzenini ve yapısını belirlemeye yönelik ilk adımdır. Günümüzün dijital araçları, örneğin tüm sayfalar için geçerli olan ana öğelerin ve sayfa türleri için şablonların ayarlanması gibi, bunun çoğunu hızlandırabilir.

Her yeni bağlantı ve yineleme ile iki önemli soru sorun: Bu sayfa, daha geniş kullanıcı akışındaki amacını açıklıyor mu? Ve etkileşim anlamlı mı (yani kullanıcı eylemi nasıl tamamlayacağını anladı mı)? Bu soruları çok soruyoruz. Ne kadar çok yaparsak, her yeni yinelemenin prototipleri nihai bir taslağa yaklaştırma olasılığı o kadar artar.

Dijital prototiplerin test edilmesi de çok daha kolay çünkü sadece daha okunaklı değiller, aynı zamanda toplu olarak yeniden üretilmeleri ve yinelenmeleri daha hızlı. InVision ve Proto.io gibi UX prototipleme araçlarının tıklanabilir prototipler oluşturmak için çok kullanışlı olduğu yer burasıdır. Tıklanabilir olduğunda, tek tek düğmelerden tüm akışlara kadar çeşitli yönlerin kullanılabilirliğini test etmek kolaylaşır.

Tıklanabilir prototip oluşturma, InVision gibi programların kullanım kolaylığı sayesinde son birkaç yılda özellikle popüler hale geldi. Artık her büyük prototipleme aracının mobil kabloları doğrudan bir test cihazında görmek veya test etmek için bir yol sağladığı mobil cihazlar için daha da değerlidir.

Justinmind veya Axure gibi bazı mühendislik bilgileri veya daha güçlü araçlarla, yalnızca tıklamanın ötesinde etkileşimli olan işlevsel prototipler oluşturmak da mümkündür. Kullanıcılar, formları doldurma, basit veya karmaşık görevleri yerine getirme ve uygulamayı gerçekten kullanılması gerektiği gibi kullanma gibi şeyleri gerçekten oluşturmadan test edebilir. Birçok Toptal tasarımcısı da dahil olmak üzere, insan bilgisayar etkileşimi (HCI) tasarımı eğitimi almış tasarımcılar, düzenli olarak işlevsel prototipler oluşturur ve test eder.

Etkileşimli prototipler, animasyonları, uygulama içindeki kullanıcı işlemlerini ve bazen işlevsel bir eylem olmadan test edilemeyen daha üst düzey işlevleri test etmek için mükemmeldir.

Amaçlı Prototip

Prototiplemenin güzelliği ve zorluğu süreç içinde. Hemen hemen her şey için aynı şeyi söyleyebiliriz, ancak prototipler bir amaçla başlar ve biter. Belirli bir ekranın neden belirli bir şekilde davranması gerektiğini, bir özelliğin nasıl çalışması gerektiğini veya kullanıcıların bir huniye ihtiyacı olup olmadığını bilmeden yapılan prototip geliştirilmez; çizilir ve sonra özel olarak oluşturulur.

Yine de, yapılan her bir tel kafes çok akıllıca yapılsa bile, yol boyunca sorulan sorular, ilgili her kullanıcı hikayesi dikkate alındığında ve bir harita olarak kullanılan bilgi mimarisiyle, bazı şeyleri kaçırmak hala mümkündür. Prototip tasarımının zorluğu budur: Müşteriler, yöneticiler ve hatta tasarımcılar prototiplerin nihai olmadığını unuturlar. Onlar sadece bir taslak, bir sonraki versiyona kadar bir yineleme. Hepsi UX tasarım sürecinin bir parçası.

Bu nedenle, bir sonraki prototip setinizi oluştururken, en az bir çok önemli soru sormayı unutmayın: Bu, istenen sonucu veriyor mu? Değilse, yeni bir sürüm taslağı hazırlamak için başka bir fırsat.

• • •

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