Önünüzde, üzerinde çalışmaya başlamanızı bekleyen yeni bir proje var. Sizden yeni bir görsel arabirim için wireframe'leri oluşturmanız bekleniyor. Peki, bu wireframe'de ne kadar detaya girmelisiniz? Ortaya çıkacak wireframe, final arabirimin aslına ne kadar uygun olmalı?
Bir kullanıcı deneyimi tasarımcısısınız ve işinizin büyük bölümü araştırmalar ve etkileşim tasarımları yapmaktan ibaret. Önünüzde, üzerinde çalışmaya başlamanızı bekleyen yeni bir proje var. Sizden yeni bir görsel arabirim için wireframe’leri oluşturmanız bekleniyor. Peki, bu wireframe’de ne kadar detaya girmelisiniz? Ortaya çıkacak wireframe, final arabirimin aslına ne kadar uygun olmalı?
Bu makalemizde low-fidelity ve high-fidelity wireframe’lerden; bu ikisinin faydalarından ve farklarından söz edelim istedik.
Nedir bu “fidelity” dedikleri şey?
İşe öncelikle fidelity sözcüğünün ne anlama geldiğini hatırlayarak başlayalım. Fidelity, tasarımın detaylılık seviyesini; diğer bir deyişle tasarımın aslına ne kadar uygun olacağını tanımlıyor. Her proje için tek ve kesin çözüm olmasa da, aslına uygun yüksek detaylı wireframe’lere, yani high-fidelity wireframe’lere ihtiyaç duyduğumuz çokça durumla karşı karşıya geliyoruz.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Yüksek detay içeren (high-fidelity) wireframe’ler, esasen düşük detaylı (low-fidelity) wireframe’lerdeki boşlukları doldurmayı ve final ürüne en yakın çıktıyı sunmayı amaçlıyor. Örneğin; düşük detaylı wireframe’leri geçici görsel ve metinsel öğelerle oluştururken, yüksek detaylı wireframe’lerde gerçek logoyu, gerçek içeriği hatta bazen renkleri de tasarıma dahil etmek mümkün.
Peki, hazırladığımız her wireframe’in yüksek detaylı olması gerekiyor mu? Bunun aksini savunan çok sayıda görüş bulunsa da gelin, yüksek detaylı wireframe’lerin bizlere neler sunduğunu 5 maddede ele alalım:
1. Yüksek detaylı wireframe’ler, düşük detaylı olanlara göre çok daha fazlası bilgi sunar
Düşük detaylı wireframe’ler yer tutucu öğeler içerirken, yüksek detaylı wireframe’ler gerçek içeriklerden yararlanır. Bunun iyi mi, yoksa kötü bir özellik mi olduğu tartışmasını bir kenara bırakıp, yüksek detaylı wireframe’lerin bize neler sunduğuna bir bakalım:
Çok daha fazla ayrıntı gösterirler.
Gerçek UI tasarım öğelerinin neye benzeyeceğine yakın, daha iyi bir fikir verirler.
Yazılımcılar ile daha iyi iletişim kurmak konusunda işe yararlar.
2. Düşük detaylı wireframe ihtiyacını ortadan kaldırmazlar
High-fidelity wireframe’ler, low-fidelity wireframe’lerin bir alternatifi değildir ve farklı amaçlara hizmet ederler. Hatta, bazı durumlarda proje sürecini sıkıntıya bile sokabilirler.
Burada iki sorun vardır:
High-fidelity wireframe’ler, müşteri için karışıklık yaratan bir neden olabilir.
Müşteriniz, ona sunduğunuz yüksek detaylı wireframe’leri projenin final arayüz tasarımı olduğunu düşünebilir. (Eminim, sizin de wireframe sunarken “Harika olmuş. Sadece şu renklere takıldık. Onları güncelleyip yazılım geliştirme sürecine geçebiliriz.” diyen müşterileriniz olmuştur.)
Yüksek detaylı wireframe’ler, iterasyonlara dayalı bir sürecin verimliliğinden yararlanmanızı engelleyebilir. Düşük detaylı wireframeler sunarken, müşterinizin değerlendirme sürecinden ve görüşlerinden daha fazla verim alabilirsiniz.
3. Detay ne kadar artarsa, form ve işlev de o kadar anlaşılır hale gelir
Wireframe gerçek çıktılar değildir ve son kullanıcılar wireframe’leri asla görmez. Aksine, wireframe’ler arayüz tasarımcıları ve yazılımcılara rehber olması için kullanılır. Yani wireframe’in birincil amacı; tasarımcıların ve yazılımcıların, müşterinin vizyonunu anlayabilmesini sağlamaktır.
Bir diğer deyişle, grafik tasarımcılar wireframe’lerden yararlanarak daha doğru ve nokta atışı çıktılar üretebilirler. Yüksek detaylı wireframe’ler bunu çok daha kolay hale getirir. Bazı tasarımcılar çoğu zaman yüksek detaylı wireframe’leri tercih ederler; böylece tasarlayacakları kullanıcı arabiriminde herhangi bir detayı atlamadıklarından emin olabilirler.
Bazıları, yüksek detaylı wireframe’lerin görsel arabirim tasarımcısına pek fazla iş bırakmadığını düşünebilir, fakat işin aslında tasarımcı yüksek detaylı wireframe’ler sayesinde detayları tasarlama imkanı bulabilir.
4. Müşteriye, final tasarım konusunda iyi bir fikir verir
High fidelity wireframe’ler müşteriye, final tasarımdan ve yazılım geliştirme sürecinden önce ürünün nasıl görüneceğiz hakkında iyi bir fikir verebilir.
Bazı durumlarda müşteriler için düşük detaylı bir wireframe’i inceleyerek projenin sonunda ortaya çıkacak ürünü hayal etmek zor olabilir. Yüksek detaylı wireframe’ler müşterinin hayal gücüne daha az ihtiyaç yaratır; böylece müşterinin tasarım özelliklerini onaylamasını ya da reddetmesini kolaylaştırır.
5. Doğru yapıldığında, daha fazla zaman gerektirirler
High-fidelity wireframe yapmak uzun zaman alır. Bu hem iyi, hem de kötü olabilir. Proje paydaşlarını ikna etmek istediğinizde ya da müşterinizi etkilemek istediğinizde onlara yüksek detaylı bir wireframe sunmak hayatınızı kurtarabilir.
Gel gelelim, high-fidelity wireframe’in tamamlanması için gereken süre ve harcanan daha büyük efor nedeniyle, işvereniniz daha çok para harcayacaktır. Bu genellikle büyük bir sorun olmayabilir çünkü, müşteriler genellikle saat bazlı tutarlar üzerinden ödeme yaparlar.
Peki, hangi yolu seçmeliyiz?
Sizin ve müşterinizin proje süreci dahilinde zamanı varsa, high-fidelity wireframe ile ilerleyebilirsiniz. Evet, daha uzun sürecektir ve müşteriye maliyeti daha fazla olacaktır fakat müşterinizin projenin başlangıcında ve ortasında daha mutlu olmasını sağlayacaktır.
Müşterinizin bütçesi ve zamanı kısıtlıysa eğer, low-fidelity wireframe ilerlemek daha uygun olacaktır. Aslında, biz kullanıcı deneyimi tasarımcıları, bizden yüksek detaylı wireframe’ler talep edilmediği sürece çoğunlukla düşük-detaylı wireframe yolunu seçeriz.
Bir kullanıcı deneyimi tasarımcısı olarak, detaylı bir wireframe sürecine başlamadan önce artılarını ve eksilerini düşünmesi gerekmektedir. Eninde sonunda bu tercih projeye ve müşterinizin ihtiyacına bağlıdır.
