Yeni bir ekran tasarlarken ayrıntılı bir görselle başlamak cazip gelebilir. Ancak henüz içeriğin sırası veya akışın adımları net değilse erken verilen kararları tekrar tekrar değiştirmeniz gerekebilir. Çalışma biçimini seçerken önce hangi belirsizliği çözmek istediğinizi düşünün.
Wireframe: Yapıyı ve içerik önceliğini tartışın
Wireframe, bir ekranın yerleşimini ve temel bileşenlerini gösteren taslaktır. Başlıkların, içerik alanlarının, gezinmenin ve eylemlerin nerede olacağını tartışmak için kullanılabilir. Çizimin sade olması, içeriğin de rastgele seçilmesi gerektiği anlamına gelmez.
Örnek bir eğitim detayında önce başlık, ön koşullar, takvim, fiyat ve kayıt eylemi için alan ayırın. Kişinin karar sırasına göre bunları yerleştirin. Gerçekçi bir başlık ve birkaç program maddesi kullanarak sayfanın ne anlattığını değerlendirebilirsiniz.
Mockup: Görsel kararları görünür kılın
Mockup sözcüğü ekiplerde farklı kapsamlarla kullanılabilir; bu yazıda ekranın görsel görünümünü anlatan statik tasarım için kullanıyoruz. Renkler, tipografi, boşluklar, görseller ve bileşen stilleri bu çıktıda daha belirgin hâle gelir.
Aynı eğitim ekranında tarih ile fiyatın nasıl ayrıştığına, uzun başlığın satırlara nasıl dağıldığına ve butonun hiyerarşideki yerine bakabilirsiniz. Ekranın görsel olarak tamamlanmış görünmesi, bütün durumlarının veya etkileşimlerinin çözüldüğü anlamına gelmez; eksikleri ayrıca not edin.
Prototip: Davranışı ve geçişleri deneyin
Prototip, tasarım fikrinin davranışını araştırmanıza yardımcı olan modeldir. Ekranlar arası geçişleri, bir alanın açılmasını veya bir işlemin sonucunu canlandırabilir. Kâğıt üzerinde de hazırlanabilir, etkileşimli bir araçta veya kodla da oluşturulabilir.
Nielsen Norman Group, prototiplerin ayrıntı düzeyini görsel görünüm, içerik ve etkileşim gibi boyutlarla ele alır. Çok ayrıntılı çizilmiş bir ekranın az etkileşimi olabilir; sade bir prototip ise bir akışın davranışını araştırmaya yeterli olabilir.
Aynı ekran için üç çalışma
Örnek: Wireframe’de takvim ve fiyatın sırasını tartışın. Mockup’ta bu iki bilginin tipografi ve boşlukla nasıl ayrıştığını inceleyin. Prototipte kişinin bir program seçmesini, bilgileri gözden geçirmesini ve yanlış seçimden geri dönebilmesini canlandırın. Her çıktı farklı bir soruya hizmet eder.
Çıktıyı araştırdığınız soruya göre seçin
Bilgi sırasını mı, görsel vurguyu mu, yoksa bir işlemin anlaşılmasını mı incelemek istiyorsunuz? Bu soruyu dosyanızın başına yazın. Görsel kararların etkisini inceleyecekseniz gerçekçi bir görünüm hazırlayın; bir akıştaki geri dönüşü inceleyecekseniz gerekli etkileşimleri kurun.
Terimleri ekip içinde kısaca tanımlayın. Birinin prototip diyerek yalnızca tıklanabilir birkaç ekranı, diğerinin çalışan bütün ürünü kastetmesini önleyin. Hangi yolların çalıştığını ve hangilerinin temsilî olduğunu dosyanızda görünür tutun.
Tek bir ekranın ötesini düşünün
Bir başvuru formunu örnek alalım. İlk görünümün yanında eksik bilgi, geçersiz veri, gönderme, başarı ve bağlantı sorunu durumlarını da tartışabilirsiniz. Hangilerini prototipe ekleyeceğinizi araştırma amacınız belirlesin; kullanıcıyı çalışmayan bir yola yanlışlıkla yönlendirmeyin.
Birden fazla ekranın ilişkisini göstermek için basit ekran taslaklarını oklarla bağlayabilirsiniz. Nielsen Norman Group’un wireflow yaklaşımı bu tür akış ve yerleşim birleşimini tarif eder. Örneğinizde seçimin nerede yapıldığını, nerede onaylandığını ve nasıl değiştirildiğini izleyin.
Çalışmayı bir sonraki karara bağlayın
Bir değerlendirmeden sonra yalnızca beğenilen veya beğenilmeyen ekranları listelemeyin. Hangi soruya yanıt bulduğunuzu ve hangi gözlemin tasarımı değiştirdiğini kaydedin. Örneğin kişi seçtiği programı doğrulayamıyorsa, özet alanının yerini ve içeriğini yeniden değerlendirebilirsiniz.
Her projede üç çıktıyı da sırayla üretmek zorunda değilsiniz. Mevcut bir bileşen sistemiyle çalışırken doğrudan etkileşimli bir deneme hazırlayabilirsiniz. Gerekli ayrıntı düzeyini, ekibin ihtiyacına ve araştırdığınız belirsizliğe göre belirleyin.
Aklınızda kalsın
Wireframe yapıyı, mockup görsel kararları, prototip ise davranışı tartışmanıza yardımcı olabilir. Önce soruyu belirleyin; sonra o soruyu incelemeye yetecek içerik, görünüm ve etkileşimi hazırlayın.
Kaynaklar
İlgili yazılar
Öğrendiklerini pratiğe taşı.
UX/UI Tasarım Eğitimi
Araştırmadan arayüz tasarımına, becerilerini gerçek projelerle geliştir.