Ebru Ağbay
Gizem Kabayel Taman

Balsamiq ve Axure Arayüz Tasarım Araçları İncelemesi

Balsamiq ve Axure Arayüz Tasarım Araçları İncelemesi

Giriş

Balsamiq, kullanıcı arayüzü tasarlamak amacıyla wireframe (mockup veya düşük kaliteli prototipler olarak da bilinir) oluşturmaya yönelik bir tasarım aracıdır. Axure da kullanıcı arayüzü tasarlamak amacıyla kullanılan ve düşük veya yüksek kaliteli prototipler oluşturma seçenekleri sunan bir tasarım aracıdır. Bu araçlar, bir uygulama veya web sitesinin yazılım süreçleri başlamadan geliştirilen fikirleri, işlevleri ve kurguları tartışmak ve anlayabilmek için projenin dijital görsel taslağının oluşturulması amacıyla kullanılmaktadır. Yazımızda Balsamiq ve Axure araçları; işlevsellik, kullanım kolaylığı, orijinal tasarıma yakınlık, birlikte çalışabilirlik, raporlama ve değişiklik yönetimi açısından incelenmektedir.

İşlevsellik

Balsamiq

Uygulama Arayüzü gezinti paneli, UI kütüphanesi, araç çubuğu, çalışma alanı (kanvas) ve özellik denetimi bölümlerinden oluşmaktadır (Şekil 1).

Şekil 1 Balsamiq Uygulaması Genel Bakış

Şekil 1 Balsamiq Uygulaması Genel Bakış

Araç çubuğu üzerinden gezinti paneli, UI kütüphanesi, özellik denetimi bölümlerini göster/gizle yapılabilmekte, yeni bir mockup sayfası oluşturulabilmekte, yapılan değişikliklerin geri alınması sağlanabilmekte, kopyala, yapıştır sil, grupla, hizala, yakınlaştır, arama, tam ekran moduna geçiş işlemleri gerçekleştirilebilmektedir.

UI kütüphanesinde yer alan bir öge sürükle bırak veya çift tıklama ile çalışma alanına (kanvasa) eklenebilmektedir. Gezinti panelinde yer alan mockup sayfaları kopyalanabilmekte, yeniden isimlendirilebilmekte, sıralaması düzenlenebilmektedir. Çalışma alanına eklenen bir ögenin boyutu, rengi, yazı tipi ve diğer özellikleri ile pozisyonu özellik denetimi bölümünden kontrol edilebilmektedir. Çalışma alanına eklenen ögelere çift tıklandığında yeniden isimlendirme yapılabilmekte, fare üzerinden sağ tık ile öge arkaya, geriye gönderilebilmekte ve kilitleme seçeneği ile ögenin diğer işlemlerden etkilenmemesi sağlanabilmektedir. Kullanılan ögeler birlikte kullanılacaksa gruplanabilmekte, grup içinde gruplar oluşturulabilmektedir. Grup ögesini güncellemek için çift tıklama ile grup içine girilmesi gerekmektedir. Ayrıca gruplanan ögeler her sayfada kullanılacak özellikte ise gruba isim verilerek projenin sembolleri arasına kaydedilebilmekte ve herhangi bir güncelleme söz konusu olduğunda sembol üzerinden yapılarak kullanılan tüm sayfalarda güncellemesi sağlanabilmektedir. Bu işlev her sayfada standart menü ve üst yazı içeren uygulamaların sayfa tasarım değişikliklerinde kolaylık sağlamaktadır. Özellik denetimi bölümünden mockup sayfaları için notlar oluşturulabilmektedir.

Çalışma alanına eklenen ögelere oluşturulmuş mockup sayfalarının linki eklenebilmekte, böylece sunum modunda ilgili öge tıklandığında link verilen sayfaya yönlendirilebilmektedir. Çalışma alanına resim eklenebilmekte, UI kütüphanesinin gruplamalarından olan Assets sekmesinden eklenen resimlerin hangi mockup sayfasında kullanıldığı bilgisine ulaşılabilmektedir.

Axure

Axure mockup sayfaları oluşturmaya yarayan bir araçtır. Şekil 2’de görüldüğü üzere toolbar ve menüsünde pek çok özellik ve işlev bulunmaktadır. Bunların en önemlilerinin başında Interactions (Etkileşimler) menüsü ve Dynamic Panel (Dinamik Panel) özellikleri gelmektedir. Interactions menüsünden mockup sayfaları arasında ve hatta aynı mockup sayfasında bulunan ögeler arasında etkileşim sağlanabilmektedir. Örneğin; mockup sayfası içinde bir ögeye tıklandığında başka bir ögenin görünüp kaybolabilmesi, bir mockup sayfasından diğerine geçiş yapılabilmesi veya o ögenin renginin değişebilmesi gibi birçok etkileşim kurulabilmektedir. Üstelik bunların birçoğu tanımlı olarak öneriler şeklinde sunulmaktadır. Bunun yanı sıra, çeşitli vakıalar (case) manuel olarak da tanımlanabilmektedir.

Şekil 2 Axure Uygulaması Genel Bakış

Dynamic Panel özelliği ile aynı mockup sayfasının içinde farklı durumları (state) yönetme imkanı sunulmaktadır. Burada sayfalar arasında geçiş yapmak veya aynı sayfayı ayrı bir sayfa olarak tekrar tasarlamak yerine tek sayfada farklı görünüm ve fonksiyonlar elde edilebilmektedir. Örneğin; bir başvuru ekranı oluşturulmak istendiğinde adım adım bilgilerin doldurulması ve bir başlık için bilgiler doldurulduğunda bir sonraki aşamaya ilerletilmesi istendiğinde, her bir başlık için ayrı mockup sayfası oluşturmak yerine tek sayfada Dynamic Panel aracılığıyla farklı durumlar tanımlanarak başvuru tamamlatılabilmektedir.

Axure’da oluşturulan mockup sayfaları veya tanımlanan ögeler için notlar alınabilmekte, bu notlar sayfaların oluşturulması esnasında görülebileceği gibi, sayfanın kullanıcıya nasıl görüleceğini görüntüleyebildiğimiz önizlemede (preview) de görülebilmektedir.

Kullanım Kolaylığı

Balsamiq

Balsamiq düşük kalite arayüz tasarım olanağı sunduğundan öğrenmesi ve uygulaması kolay özellikler içermektedir. UI kütüphanesinde mockup sayfalarında kullanılacak butonlar, formlar, ikonlar ve semboller gibi ögeler hazır olarak yer almaktadır. Ayrıca bu ögelerin tasarımı özelleştirilebilmekte ve yeni bir öge oluşturulup kütüphaneye eklenebilmektedir. Bu ögeler sürükle bırak yöntemiyle kolaylıkla çalışma alanına eklenerek kullanılabilmektedir.

Balsamiq kullanıcılarının oluşturduğu sembol ve tasarım şablonlarına da https://wireframestogo.com/ sayfasından erişilebilmektedir. Import Controls from Wireframes to Go işlemiyle proje üzerinden bu sayfada arama yapılabilmekte ve seçilen şablon ya da öge Import into Project (Projeye Aktar) butonuyla mockup sayfasında kullanılabilmektedir.

Axure

Axure işlevselliğinin yanı sıra, zengin bir kütüphaneyi de beraberinde getirmektedir. Kütüphanesinde bulunan hazır şablonlar, ikonlar, formlar, vb. ögeler ile tasarlamak istediğiniz sayfa için elverişli bir altlık sunmaktadır. Üstelik bu hazır gelen ögeler üzerinde hala güncelleme ve kendi tasarımınızı yansıtma ve hatta yeni işlevler ekleme imkanı bulunmaktadır. Kütüphaneye yeni bileşenler (component) eklemek de mümkündür. Kütüphanede tanımlanan bütün ögeler sürüklenip sayfaya bırakılarak doğrudan çalışmaya başlanabilmektedir. Kütüphane özelliği, uygulamayı kullanmak için de hızlı bir başlangıç yapmayı sağlayacağından yeni başlayanlar için bir hayli zaman kazandıracaktır.

Axure’da bir diğer kullanım kolaylığı sağlayan özellik de oluşturulan ögelerin isimlendirilmesi ve gruplandırılabilmesidir. Böylece ögelere isimlendirme yapıldığında o isimle kolaylıkla arama yapılabilmekte, onlar üzerinden de etkileşimler tanımlanabilmektedir. Bunun yanı sıra, birkaç öge birlikte gruplandırılarak da isimlendirme yapılabilmektedir. Bu özellik de yine etkileşimlerin birkaç ögeyi kapsayacak şekilde tanımlanması ve ögelerin konumlarının değiştirilmesi açısından da kolaylık sağlamaktadır.

Orijinal Tasarıma Yakınlık

Balsamiq

Balsamiq, yazılım geliştirme süreçleri başlamadan geliştirilecek uygulamaya yönelik düşük kalite prototipler hazırlanmasına olanak sağlamaktadır. Düşük kalite prototiplerin proje başında henüz son tasarım netleşmeden oluşturulmasının daha az maliyetli olması, daha hızlı oluşturulmasından dolayı test sonuçlarına göre daha kolay tekrarlanabilir olması gibi birçok avantajı bulunmaktadır. Balsamiq mockup sayfalarında amaç estetik değil, müşterinin fonksiyonel gereksinimlerini arayüz tasarımına hızlı ve değişime açık bir şekilde yansıtabilmektir. Yüksek kalite prototiplerin proje başında oluşturulması bu tasarım son ekran tasarımı değildir gibi bir sorumluluk reddi beyanını zorunlu kılmaktadır.

Axure

Axure’da oluşturmak istenilen ekranı görünüm açısından birebir tanımlamak mümkündür. Style menüsünden sayfa boyutları, sayfa stilleri, hizalaması değiştirilebilmektedir. Sayfanın aslına uygunluk seviyesi düşük olarak seçildiğinde karikatürize bir görünüm elde edilebilmektedir. Sayfadaki ögeler ve etkileşimler tanımlanırken bunların yazı tipleri (font), renkleri, ögeler arası geçiş stilleri gibi görünüm özellikleri de tanımlanabilmektedir.

Birlikte Çalışabilirlik

Balsamiq

Balsamiq Cloud versiyonu ile gerçek zamanlı birlikte çalışabilirlik sağlanmaktadır. Üzerinde çalışılan bir projeye üye ekleyerek ve yetkilerini (görüntüleme, düzenleme ve yorum yapma) düzenleyerek ortak çalışma alanı yönetilebilmektedir. Yetkili üyeler çalışma alanındaki ilgili yerleri işaretleyip yorum yaparak geri bildirimde bulunabilmekte ve yorumların okunma durumları da takip edilerek gerekli işlemlerin gerçekleştirilip gerçekleştirilmediği tespit edilebilmektedir. Proje üyelerinin yaptığı her değişiklik gerçek zamanlı olarak diğer üyelerin çalışma alanlarına yansıtılmaktadır. Bunun yanı sıra, proje üyeleri dışındaki anonim kullanıcılar ile proje bağlantısını paylaşarak projenin incelenmesine ve üzerinde yorum yapılabilmesine olanak tanınmaktadır.

Axure

Axure’da bireysel olarak çalışabilmenin yanı sıra, takım olarak çalışabilmek de mümkündür. Team menüsünden takım projesi oluşturulabilmekte ve çalışma alanı tanımlanabilmektedir. Oluşturulan alan ve projeye giriş yapacak ve takıma dahil olacak kişiler davet edilebilmekte, onların yetkileri için de seçim yapılabilmektedir. Dolayısıyla birlikte çalışabilecek ortam hazırlanabilmekte, bir projeye takım olarak katkı sunulabilmektedir.

Raporlama

Balsamiq

Hazırlanan mockup sayfaları Balsamiq Proje menüsünden farklı formatlarda dışa aktarılabilmekte ve raporlanabilmektedir. Etkileşimli tasarlanan mockup sayfalarındaki linkler PDF çıktı formatlarında aktif durumda bulunmakta ve PDF formatında çözünürlük ayarlaması yapılabilmektedir. Ayrıca, bütün mockup sayfaları ya da aktif olan mockup sayfası ya da seçilen mockup sayfaları görüntü dosya formatlarından PNG dosyası olarak dışarı aktarılabilmektedir. Bunun yanı sıra, mockup sayfa görüntülerinden bağlantı linkleri oluşturulup paylaşılabilmektedir. Bu linkler doğrudan görüntü bağlantılarını destekleyen uygulamalara gömülebilmekte ve projede yapılan güncellemeler eş zamanlı olarak ilgili linklerdeki görüntülere yansıyabilmektedir.

Axure

Ekran tasarlarken önemli konulardan biri de yapılan çalışmadan nasıl bir çıktı elde edileceğidir. Bu noktada Axure, uygulamayı kullananlara birçok imkan sunmaktadır. Yapılan çalışmanın sayfaları ayrı ayrı veya bütün sayfalar birlikte PNG, JPG, GIF, BMP formatında görüntüye dönüştürülebilmektedir. Sayfaların, formatı üzerinde düzenlemeler yapma imkanıyla birlikte, doğrudan basılarak çıktısı da alınabilmektedir. Bunların yanı sıra, sayfalar Word, PDF veya HTML formatında dosyalara da dönüştürebilmektedir. Ayrıca yapılan çalışmanın linki üretilerek, bilgisayarında uygulama yüklü olmayanlar için de bulut üzerinden çalışmayı deneyimleme imkanı sunulmaktadır.

Değişiklik Yönetimi

Balsamiq

Balsamiq projesinde yapılan her değişiklik kayıt altına alınmaktadır. Örneğin, yapılan düzenlemeler, kullanıcı izinlerindeki değişiklikler, eklenen ve silinen kullanıcılar, manuel oluşturulan anlık görüntüler proje geçmişinde listelenmektedir. Proje üyeleri istenilen zaman dilimindeki versiyona Restore işlemi ile geri dönebilmektedirler.

Anlık görüntüler (snapshots), proje sürecinde belirli aşamalarda (her saat başı otomatik olarak ya da istenilen zamanda manuel olarak) yapılan yedeklemelerdir. Üzerinde çalışılan projenin daha önceki bir versiyonuna geri dönülmek istendiğinde oluşturulan anlık görüntüler kullanılabilmektedir. Anlık görüntüler kullanılmaya başlandığında tüm aktif kullanıcılar bilgilendirilmekte ve güncellenmiş versiyonu otomatik olarak çevrimiçi tüm kullanıcılara ulaşmaktadır. Anlık görüntüler kalıcı olarak kaydedilmediği sürece sadece 30 gün boyunca saklanmaktadır.

Axure

Axure’da değişiklik yönetimi, versiyon kontrolüyle yapılmaktadır. Birlikte çalışılan projelerde uygulamayı kullanan takım üyeleri, check in-check out özellikleri ile birbirlerinin çalışmalarını ezmeden tek sayfada, birçok sayfada veya tüm sayfalar üzerinde değişiklik yapabilmekte ve bunları diğer takım üyelerinin kullanımına açarak güncel versiyonu oluşturabilmektedir. Bunun yanı sıra, sayfalar içindeki ögelerde yapılacak değişiklikler için de tek seferde bir sözcüğün veya yazı karakterinin geçtiği her yerde değişiklik yapma özelliği de bulunmaktadır.

Sonuç

Balsamiq ve Axure araçları; işlevsellik, kullanım kolaylığı, orijinal tasarıma yakınlık, birlikte çalışabilirlik, raporlama ve değişiklik yönetimi açısından ele alınmıştır. Sonuç olarak; araç seçiminde ihtiyacın ne olduğu ve aracın bu ihtiyacı karşılama seviyesi birlikte değerlendirilmelidir. Yazılım süreçleri başlamadan müşteri gereksinimlerini karşılayan işlevlerin arayüz tasarımına yansıtılmasında kullanılan bu araçlardan daha hızlı, düşük kalitede ve çevik değişime açık olması yeterli ise Balsamiq aracı, orijinal tasarıma yakın ve etkileşimi yüksek olması bekleniyorsa Axure aracının kullanımı önerilmektedir.

Kaynakça