Gelişmiş Prototipler – Neden Axure Kullanılır?

“Tasarım sadece göründüğü ve hissettirdiği şey değildir. Tasarım nasıl çalıştığıdır.” – Steve Jobs

Prototiplerin daha iyi tasarım kararları vermek için çok değerli olduğu kanıtlanmıştır. Yapay eserler olarak prototipler, UX tasarımı ve prototiplemedeki temel çıktılardan biridir ve bir aktivite olarak kullanıcı merkezli tasarım sürecinin merkezinde yer alır. Prototip, hipotezleri doğrulamak ve tasarımları test etmek için kullanılan tek, görsel, işlevsel bir üründe birleştirilen önceki tüm UX tasarım çalışmalarının bir birleşimidir.

Kulağa yeterince kolay geliyor, ancak çok sayıda tasarım aracıyla dolu bir dünyada, doğru prototipleme aracını seçmek, dikkatli düşünmeyi gerektiren küçük bir iş değil. Tasarımcıların maliyetleri, özellikleri, diğer tasarım araçlarıyla entegrasyonu, öğrenme eğrisini, işbirliği özelliklerini ve gözden geçirme ve kullanıcı testi için oynatma platformunu hesaba katmaları gerekir.

İşleri karmaşıklaştırmak için, birçok yeni gelen son zamanlarda sahneye çıktı. Figma, InVision, UXPin, Framer, Marvel, Principle, Origami gibi yalnızca çevrimiçi araçlar vardır ve bazıları, işlevlerinin bir uzantısı olarak yerleşik prototiplemeye sahip Sketch ve Adobe XD gibi geleneksel masaüstü yazılımlarıdır. Hepsinin artıları ve eksileri, özellikleri ve entegrasyonları vardır.

Ama yeni her zaman daha iyi değildir. Savaş alanında hala eski savaş atları var: Axure onlardan biri. Tasarımcılar zengin özelliklere sahip, ayrıntılı prototipler sunmak istediklerinde, Axure başka bir görünüme değer. Axure, yukarıda bahsedilen yeni basılmış araçlar doğmadan yıllar önce bir süredir buralardaydı ve birçok tasarımcı, onu derin yeteneklere sahip tel çerçeveleme ve prototipleme araçlarının büyükbabası olarak görüyor.

Neden Axure Kullanılır?

Günümüzde tasarımcılar çoğunlukla ekranları bağladıkları ve belki birkaç ekran geçişi ekledikleri etkin nokta tabanlı prototip oluşturma araçlarını kullanıyor. Sorun şu ki, bu yöntem, test sırasında genel kullanıcı deneyimini tamamlayan küçük etkileşimleri içermez. Buna karşılık Axure, bir prototipi hayata geçiren ince ayrıntıları ve mikro etkileşimleri kolayca halledebilir.

Tasarımcılar, insanların belirli bir tasarımla nasıl etkileşime gireceğini daha derinlemesine keşfetmek için koşul mantığı, çeşitli kullanıcı girdileri ve prototipin daha gerçekçi görünmesini sağlayan dinamik animasyonlarla prototipler oluşturabilir. Neyin işe yarayıp neyin yaramadığına dair değerli bilgiler edinmenin mükemmel bir yolu.

Çok fazla entegre olmayan tasarım uygulamasından atlamak zorunda kalmak da bir verimsizlik problemini beraberinde getiriyor. Tipik tasarım iş akışı, bir tasarımcının Sketch'te UI'ler oluşturmasını ve InVision veya Marvel gibi başka bir araçta prototip oluşturmasını içerir. Bundan sonra tasarım, Zeplin gibi başka bir araç kullanan geliştiricilere teslim edilir.

Axure, farklı tasarım araçlarını kullanma ihtiyacını ortadan kaldıran tam entegre bir uygulamadır. Örneğin, kullanıcı akışları, müşteri yolculuk haritaları, kişiler, storyboard'lar, site haritaları, bilgi mimarisi ve tel çerçeveler oluşturduktan sonra, tasarımcılar Axure'un içinde karmaşık prototiplere kolayca devam edebilirler. Tasarımcılar projeleri geliştiricilere devrettiğinde, bir şeyin nasıl uygulanması gerektiği konusunda daha iyi bir fikir edinebilir ve kapsamı tahmin etmek ve teknik fizibiliteyi değerlendirmek için ürün yöneticileriyle daha verimli çalışabilirler.

İyi tasarlanmış ürün ve hizmetler sunmanın önündeki en büyük engel, kullanıcılarımızı anlamamaktır. Jared Spool, UIE (Kullanıcı Arayüzü Mühendisliği)

Diğer tasarım araçlarına benzer şekilde, Axure hızlı bir şekilde alınabilir ve hızlı bir şekilde kullanılabilir. Programcı olmayanların bile anlamlandırabileceği dinamik etkileşimler oluşturmak için yerleşik widget'lar, etkileyici etkileşimler için hemen kullanılabilir. Daha derine inmek ve uygulamayı öğrenmek için zaman ayırmak isteyen tasarımcılar, karmaşık etkileşimlerle karmaşık, gerçekçi web siteleri ve uygulamalar oluşturabilir.

Gerçek Hayat Axure Prototip Örnekleri

Tasarımcılar her zaman zamansızdır ve incelemelerde belirli kullanıcı akışlarının nasıl çalışacağını göstermeleri ve ürün tasarımlarını kullanıcılarla erkenden test etmeleri gerekir. Tasarımcılar diğer tasarım araçlarından görüntüleri hızla etkileşimli prototiplere dönüştürebildiğinden, Axure'un temel yetenekleri bu senaryolarda öne çıkabilir.

Aşağıdaki B2B ürün örneğinde, OmniGraffle'dan PNG'ler olarak bir dizi ekran dışa aktarıldı. Görüntüler kırpıldı, maskelendi ve Axure'da katmanlara yerleştirildi. Ardından, zengin, işlevsel bir prototip oluşturmak için Axure widget kitaplığından açılır menüler ve form alanları gibi etkin noktalar ve etkileşimli bileşenler eklendi. Ürünün özellikleri ve işlevleri daha sonra uzaktan, yönetilen kullanıcı testleri kullanılarak test edildi ve bu da kullanıcı geri bildirimlerine dayalı olarak hızlı tasarım yinelemelerine yol açtı.

Başka bir örnekte, tasarım ve mühendislik ekipleri, karmaşık bir B2B ürünü için özellikle zor iki widget tasarlamanın en iyi yolunu bulabildiler. Amaç, kullanılabilirliği artıracak ve teknik olarak da uygulanabilir olan veri ağırlıklı bir tablo için gelişmiş filtreler ve özel bir sütun seçici tasarlamaktı.

Bu senaryoda, Sketch'ten farklı durumların görüntüleri dışa aktarıldı ve hızlı etkileşimler Axure'da eklenip canlandırıldı. Etkileşimleri ve etkilerini göstermek için düğmeler ve onay kutuları gibi UI bileşenleri eklendi. Ekipler, gözden geçirilen ve test edilen birkaç yinelemeden geçti. Diğer prototipleme araçlarıyla bu çaba çok daha uzun sürmüş olabilir.

Axure'un Özellikleri ve Faydaları

Geçenlerde, yalnızca InVision ile oluşturulan temel ekrandan ekrana prototipleri kullanan ve hiçbir zaman fazla kullanıcı testi yapmamış bir şirkette çalıştım. Yaklaşan bir ana ürün özelliğini test etmek için ayrıntılı bir ürün prototipi oluşturmakla görevlendirildim. Bu yeni özellikten çok fazla yararlanıldı ve paydaşlar bunu doğru yapmak istedi.

Axure'da farklı durumlar ve ürünün farklı senaryolar altında nasıl davranacağını gösteren çok sayıda mikro etkileşim içeren ayrıntılı bir prototip oluşturmam iki günden kısa sürdü. Beklenmeyen bir fayda olarak, tasarım ekibinin ele alabildiği birçok uç vaka ortaya çıktı.

Test ederken, kullanıcıların tasarımla nerede ve neden mücadele ettiğini görebildik, ki bu statik ekranlarla oluşturulmuş daha az ayrıntılı bir prototiple mümkün olmazdı. Sonuç olarak, bulduğumuz sorunları hızla çözebildik.

Ayrıca prototipi geliştiricilere, duyarlı tasarım kesme noktalarının nerede olduğunu, odak veya hata durumlarının nasıl görünmesi gerektiğini ve tahmine dayalı aramanın nasıl çalışması gerektiğini göstermek için ilettim.

Ön uç geliştiriciler prototipi ellerine alabildiklerinde, hayatlarını da çok daha kolay hale getirdi. Arka uç geliştiriciler bile, nihai ürünün nasıl çalışması gerektiğini görebildikleri için prototipi takdir ettiler.

Yeni bir ürün özelliğinin bu tür hızlı prototiplenmesi, test edilmesi ve uygulanması, daha önce dahil oldukları diğer tüm özellik geliştirmelerinden çok daha hızlıydı ve QA aşamasına geldiğinde daha az sorun ortaya çıktı.

Her şey söylenip yapıldığında, ekipteki herkes detaylı prototipin ne kadar yararlı olduğundan bahsetti ve bu tür prototipleme sürecinin daha sık yapılmasını istedi. Ayrıntılı bir prototip oluşturmak, incelemek ve test etmek büyük bir fark yaratabilir. Tüm ekip, kullanıcılar için anlamlı olan temel, kapsamlı etkileşimleri görebiliyordu.

Axure, en karmaşık kullanım durumları dahil her şeyi test etmemizi sağlar. Prototiplerimiz gerçek gibi görünür ve hareket eder. Julie, Kullanıcı Deneyimi Laboratuvarı

Axure'un Özellikleri ve Güçlü Yönleri

Tasarımcıların Axure'da karmaşık, dinamik, zengin özelliklere sahip prototipler oluşturmak için nasıl kod yazılacağını bilmesine gerek yoktur. Sofistike ve karmaşık etkileşimler, Etkileşimler paneli kullanılarak basit "eğer öyleyse, o zaman" ifadeleriyle kurulabilir. Aşağıda bazı ek Axure özelliklerinin bir listesi bulunmaktadır:

Temel ve Gelişmiş Prototipleme

• Hızlı tel çerçeveleme ve prototip oluşturma için yerleşik widget'lar
• Sürükle ve bırak ortamı
• Kodlama olmadan tarayıcı tabanlı prototipler oluşturma
• Sketch varlıklarından etkileşimler oluşturma
• Mobil emülasyon ve mobil cihaz görüntüleme
• Kullanıcı girişi sağlayan çalışma formu alanları
• Koşullu mantık, değişkenler ve ifadeler ekleme
• Dinamik içerik ve uyarlanabilir görünümlerle çalışma
• Animasyon efektleri ekleme
• Çevrimdışı prototip görüntüleme
• Özel widget kitaplıkları
• Adobe XD entegrasyonu ve eklentileri
• Bir tarayıcıda görüntülenebilen prototipleri Axure Cloud üzerinde paylaşma

Birlikte yazma ve İşbirliği

• Axure RP ve Axure Cloud, birden fazla kişinin aynı proje üzerinde aynı anda çalışmasına olanak tanır.

Paylaşılan Varlıklar

• Etkileşimli bileşen kitaplıkları oluşturun ve paylaşın ve varlıkları Sketch'ten içe aktarın.

Geliştirici Aktarımı

• Otomatik redlines artı CSS ve görüntü dışa aktarma için tasarımları RP ve Sketch'ten Axure Cloud'a yayınlayın.

Dokümantasyon ve Spesifikasyon

• Süreç akışları, ürün ayırmaları ve görsel özellikler oluşturun.

Axure Prototipleme Mini Vaka Çalışması

Axure'un basit ekrandan ekrana prototiplerin ötesine geçen yeteneklerini sergilemek için, mevcut bir e-ticaret sitesi olan Zalando için ince etkileşimli birkaç ekran oluşturdum. Tamamlandığında, bu prototip dizilerinin tümü HTML'ye aktarıldı ve Axure Cloud kullanılarak herhangi bir yerde herhangi biri tarafından bir tarayıcıda incelenebilirdi.

İlk olarak, bir mega menü, arama, ürünler arasında yatay kaydırma, favorilere ekleme ve bir bültene kaydolmayı gösteren birkaç site etkileşimi oluşturdum.

Bir ürün listeleme sayfasında, ürünü farklı renklerde göstermek için ana ürün resminin altındaki küçük resimlerde fareyle üzerine gelme efektleri oluşturdum (fareyle üzerine gelindiğinde resimleri değiştirerek). Ayrıca bir ürünü tekrar favorilere ekleme ve bir fiyat aralığı belirleyerek ürün listeleme sayfasını filtrelemek için bir açılır pencere aracı ekledim.

Ardından, yukarıdaki ekranla aynı şekilde, bir ürün detay sayfasında küçük resimlerin üzerine gelindiğinde farklı ürün resimlerini değiştirmeyi göstermek istedim. Ayrıca, alışveriş yapanların ürün açıklamasını, beden ve kalıpla ilgili bilgileri, teslimatı ve incelemeleri görebilmeleri için başka bir fareyle üzerine gelme işlevi ekledim. Son olarak, bir beden seçici ekledim ve ürünü alışveriş sepetine ekledim.

Aşağıdaki kullanıcı akışını göstererek, ince slaytlar, soldurmalar ve öğe değiştirme animasyonlarını kullanarak bir alışveriş sepetini yönetmenin (örneğin, bir ürünü sepetten çıkarma) nasıl işleyeceğini göstermek istedim. Bu ince mikro etkileşimleri oluşturmak için hiçbir kod kullanılmadı.

Son olarak, insanlar yanlış oturum açma bilgileri girdiğinde ve hangi hata mesajının görüntüleneceğini oturum açma ekranında ince UI dönüşümlerini göstermek istedim.

Bu ince etkileşimler ve UI dönüşümleri, ürün özelliklerini test ederken kullanışlıdır çünkü tasarımcılar ve kullanıcı araştırmacıları daha ayrıntılı kullanıcı testleri yapabilir ve insanların bir e-Ticaret sitesine verdiği tepkiler hakkında daha derin bilgiler edinebilir. Diğer prototip oluşturma araçlarıyla oluşturulması mümkün olmayan veya çok zor olabilecek belirli, sofistike bir görünüm ve his sergilerler.

Özet

Tasarımcılar en yeni ve en iyi tel çerçeveleme ve prototip oluşturma araçlarını ararken bazen zamana direnen yerleşik, yetenekli araçları gözden kaçırırlar.

Tasarımcılar Axure'a başka bir görünüm vermeli. Derinliği, özellik seti ve esnekliği nedeniyle Axure, diğer çözümlere kıyasla yetenekli, sağlam bir araçtır ve şirket, bir tasarım aracı olarak uygunluğunu sürdürmek için onu güncellemeye devam ediyor.

Axure'un ücretsiz deneme sürümü indirilebilir. Tasarımcılar, kullanıcı arayüzlerini Sketch'ten dışa aktarabilir, Axure'a aktarabilir ve gerçekçi görünümlü prototipler oluşturabilir. Ayrıca her tür proje için (YouTube ve Axure'nin sitesinde) çok sayıda eğitim mevcuttur ve kullanıma hazır Axure widget'ları da yaygın olarak indirilebilir (ücretsiz ve ücretli).

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• UX Tasarım Sürecinizi Mükemmelleştirin - Prototip Tasarım Kılavuzu
• En İyi Tasarımcıların Kullandığı 10 UX Çıktısı
• UX Mitleri - Prototipleme, Kullanıcı Testi ve UX Teslim Edilebilir Öğeleri
• Framer Eğitimi: Çarpıcı Etkileşimli Prototipler Nasıl Oluşturulur
• Bu En İyi UX Araçları ile İşinizde Ustalaşın