UX ve UI Tasarım Araçları: Hangi Aşamada Hangisi
Tasarım aracı seçimi genelde araç karşılaştırmasıyla başlar, oysa doğru soru şu: proje hangi aşamada tıkanıyor? Fikri kağıda dökerken mi, prototipi anlatırken mi, yoksa tasarımı koda geçirirken mi? Aşağıdaki araçlar popülerlik sırasına göre değil, bu üç darboğaza göre ayrıldı.
Tasarım süreci üç ayrı işten oluşur
Bir arayüz fikrinin ekrana çıkana kadar geçtiği yol kabaca üçe bölünür. Önce yapı kurulur: hangi ekran neyi yapıyor, kullanıcı nereden nereye gidiyor. Sonra bu yapı tıklanabilir bir şeye dönüşür. En sonda da tasarımın işe yarayıp yaramadığı gerçek kullanıcılarla sınanır.
Araçlar bu üç işten birinde iyidir. Üçünü birden yapmaya çalışan araç, birinde iyi olandan genelde daha yavaş çalışır.
Yapı kurma: Balsamiq, kağıt, beyaz tahta
Wireframe arayüzün iskeletidir: kutular, etiketler, yerleşim. Renk yok, gerçek metin yok, ikon yok. Amacı ekranı güzel göstermek değil, akışın mantıklı olup olmadığını erken görmek.
Balsamiq'in çizimleri elle çizilmiş gibi durur ve bu kasıtlı bir tercihtir. Erken aşamada Balsamiq'i Figma'dan daha yararlı bulurum, çünkü ekran bitmemiş göründüğü sürece gelen geri bildirim yapı hakkında olur; ekran cilalandığı anda toplantı font ve renk tartışmasına kayar, akış hiç konuşulmadan kapanır.
Etkileşim: Figma ve Axure
Figma bulut tabanlı çalışır, aynı dosyayı birden fazla kişi eş zamanlı açar. Bileşen ve stil sistemi sayesinde tekrar eden parçalar tek yerden yönetilir. Çoğu ekipte prototipleme ihtiyacının tamamını karşılar.
Axure RP farklı bir yerde durur. Koşullu mantık kurabilir, değişken tutabilir, form doğrulaması gibi durum taşıyan akışları gerçekten çalışır halde gösterebilirsiniz. Sigorta başvurusu ya da çok adımlı bir kayıt akışı gibi dallanan işlerde bunun karşılığı var. Tek sayfalık bir tanıtım sitesi için ise fazla ağır kalır.
Sketch macOS'a bağlıdır ve tek kullanıcı etrafında kurgulanmıştır. Eklenti ekosistemi hâlâ güçlü, sembol ve stil yapısı temiz. Ama dosyayı üç kişi birden açacaksa Figma'nın çalışma modeli daha az sürtünme üretir.
Sınama: anket, ısı haritası, oturum kaydı
Google Forms ve SurveyMonkey soru sorar, Hotjar ne yapıldığını gösterir, UserTesting ve Lookback kullanıcının ekranını ve sesini kaydeder. Üçü farklı soruya cevap verir: anket niyeti, ısı haritası davranışı, oturum kaydı da nedeni yakalar. Biri diğerinin yerine geçmez.
Beş kullanıcıyla yapılan bir oturum, on kişilik bir toplantıda üretilen tahminlerin tamamından fazla bilgi verir. Bunun için pahalı bir platform da şart değil. Ekran paylaşımı açık bir görüşme, bir de not tutan ikinci kişi çoğu durumda yetiyor.
Seçerken bakılacaklar
Öğrenme süresi, ekip büyüklüğü ve lisans maliyeti bilinen kriterler. Çoğu listede atlanan dördüncüsü tasarım dosyasından koda geçiş.
Bir tasarım sistemi tasarım aracının içinde yaşar, ürün ise koddaki bileşen kütüphanesinden çalışır. Bu ikisi ayrı yerlerde tutulduğu sürece kaçınılmaz olarak ayrışır; altı ay sonra Figma'daki buton ile üründeki buton aynı şey olmaz. Renk, boşluk ve tipografi değerlerinin dışa aktarılabilmesi (design token) ve bu değerlerin kod tarafında derlenmesi, tutarlılığı toplantı yerine derleyicinin korumasını sağlar. Araç seçerken buna bakın: dışa aktarım makine tarafından okunabilir bir çıktı mı veriyor, yoksa ekran görüntüsü ve ölçü notu mu?
Uygulamada işe yarayan birkaç alışkanlık
- Izgara ve boşluk ölçeğini projenin başında sabitleyin, sonra tartışmaya açmayın.
- Katman ve sayfa isimlerini kod tarafındaki bileşen adlarıyla eşleştirin.
- Kontrast, odak sırası ve etiket kontrolünü tasarım aşamasında yapın; koda girdikten sonra düzeltmesi katbekat pahalı.
- Prototipte gerçek metin kullanın. Lorem ipsum, taşma sorunlarını yayına kadar saklar.
Kaynaklar