Geniş bir perspektiften bakılarak, makro düzeyde, bilgi mimarisi ve etkileşimin nasıl olacağı yapılandırılır. İskelet oluşturma aşaması ise bu yapıların detaylandırılmasını ve mikro düzeyde tanımlanarak her bir bileşene tek tek bakmayı ve bileşenler arasındaki ilişkinin oluşturulmasını içerir. Bu aşama; arayüz tasarımı, navigasyon tasarımı ve bilgi tasarımı boyutlarını içerir. Bu üç boyut, birbiri ile yakından ilişkilidir ve aralarındaki sınırlar zaman zaman bulanıklaşabilir. Bazen bilgi tasarımı sürecindeki problemler gezinim tasarımında su yüzüne çıkabilir. Bu boyutlar arasındaki ayrımlar bulanıklaşsa da üçü de ayrı birer iş ve süreçtir. İyi bir gezinim tasarımı, kötü bir bilgi tasarımı problemini çözmez. O bakımdan eğer bu süreçler ayrı ayrı tanımlanmazsa sorunların doğru bir şekilde belirlenmesi mümkün olmaz. Kullanıcının işlevsel özellikleri kullanımı arayüz tasarımıyla, istediği yere ulaşması gezinim tasarımıyla sağlanır. Bilgi tasarımıysa sınıflanan bilgilerin nasıl sunulacağı ile ilgilidir. Örneğin istatistik bazlı bir verinin metin olarak mı yoksa grafik olarak mı sunulacağı bilgi tasarımı sürecinde kararlaştırılır.
Arayüz Tasarımı
Kullanıcı arayüzlerinin kolay anlaşılması ve kolay kullanılması gerekir. Bir kullanıcı arayüzü, hedeflenen kullanıcıya hitap edebilecek kadar basit aynı zamanda sahip olduğu tüm işlevlerini kullanıcıya sunabilecek kadar bütünleşik olmalıdır.
Arayüzde kullanılacak bileşenler belirlenirken kullanıcının tanıdığı ve belirli yollarla öğrenmiş olduğu bileşenlere bağlı kalınmalı ve tutarlı olunmalıdır. Kullanıcılar aşina oldukları arayüzleri daha çabuk tanımlar ve kolayca kullanmaya başlarlar.
Butonlar, listeler, yazı alanları ve bunun gibi bileşenler girdi alanları olarak adlandırılır. Arama kutucuğu, etiketler, ikonlar ve buna benzer diğer bileşenler gezinim bileşenleri olarak adlandırılır. Bunlar kullanıcının arayüz üzerinde kolayca hareket edebilmesini ve site içerisinde aradıklarını bulabilmesini sağlar. Bildirim kutucukları, özel bilgilendirici araçlar ve diğer bilgi sunan elementler bilgi bileşenleri olarak adlandırılır. Bunların temel amacı kullanıcıyı doğru bir biçimde yönlendirmektir. Bazı durumlarda bu bileşenlerin tümü bazı durumlarda birkaçı bir arada kullanılabilir. Temel amaç kullanıcının aradığını bulabilmesinin sağlanması ve içeriği sunduğunuz arayüzün onların ihtiyaçlarını karşılamasıdır.
Navigasyon Tasarımı
Navigasyon tasarımını kullanıcıların gereksiz tıklamalar yapmadan ve kafa karışıklığına maruz kalmadan aradıkları şeyi kolayca bulabilmelerini sağlayan yapıyı kurgulamak olarak tanımlamak mümkündür.
Navigasyon tasarımının amacı, kullanıcıların site veya uygulama içerisinde yolunu kolayca bulabilmesi, nerede olduğunu konumlandırabilmesi ve kaybolmamasıdır. Fikir olarak alışveriş merkezleri, otoyollar, hava alanları, şehir içi bilgilendirme tabelaları gibi insanın fiziksel çevresindeki yön bulma ve en hızlı şekilde ulaşmak istenen yere varılması için yapılan yönlendirme tasarımlarından gelir. Web sistemlerinde kullanıcıların nerede olduklarını anlamaları ve ulaşmak istedikleri yere en kolay nasıl gidebileceklerine dair yönlendirmeleri en etkili biçimde yapmak için arayüz ve bilgi tasarımı ile birlikte kullanılır.
Navigasyon tasarımında evrensel, yerel, tamamlayıcı ve bağlamsal olmak üzere dört temel yaklaşım bulunmaktadır.
Evrensel navigasyon: Bir düğümden sistem içerisindeki diğer bütün ana düğümlere ulaşılabilme durumudur.
Yerel navigasyon: Bir düğümden sadece o düğümün bağlantılı olduğu düğümlere ulaşabilecek şekilde sistemin tasarlanmasıdır. Genellikle hiyerarşik yapılarda kullanılır.
Tamamlayıcı navigasyon: En son noktadaki bir düğümden ilgili düğümlere bağlantı verilen durumdur.
Bağlamsal navigasyon: Bağlantıların içeriğin içine gömüldüğü durumdur. Sayfadaki metinde geçen bazı kelimelere bağlantı tanımlamak örnek olarak verilebilir. Burada amaç kullanıcıyı daha fazla bilgi almak isteyebileceği içeriğe yönlendirmektir.
Arayüzdeki yönlendirmelerin yanı sıra site haritaları ve indeksler de navigasyon tasarımının bir parçası olarak kullanılabilir. Site haritası, kullanıcılara tek sayfada bütün site içeriğine ulaşabilecekleri öz bilgiyi sağlar. Site içeriği hiyerarşik bir ana hat şeklinde sunulur ancak genellikle ağaç yapısındaki dallanma ikinci düzeydeki başlıklarda bırakılır, üç ve daha sonraki düzeyleri içermez. İndeks, konu başlıklarının ilgili bağlantıları içerecek şekilde alfabetik olarak listelenmesidir. Yoğun bilgi içeren ve geniş konu çeşitliliğine sahip sitelerde daha işlevseldir.
Bir kullanıcı aradığını ne kadar hızlı bir biçimde bulabiliyorsa ve arayüz üzerinde ne kadar rahat geziniyorsa navigasyon tasarımı o kadar doğru yapılmış demektir. Navigasyon tasarımı için uzmanlar tarafından kabul gören evrensel bir doğrudan söz etmek mümkün değildir. Her ne kadar deneyimler sonucunda önerilen genel geçer yaklaşımlar olsa da her ürün veya hizmet kendine özgü yaklaşımlar geliştirmek durumunda kalabilir.
Bilgi Tasarımı
Bilgi tasarımı, bilginin kullanıcıya nasıl sunulacağı ile ilgilidir. Zaman zaman bilgi görsel olarak sunulur, zaman zaman da kullanıcının daha kolay anlayabilmesi için çeşitli gruplama ve sınıflamalarla sunulur.
Bilgi görselleştirmesinde yoğun olarak grafikler kullanılır. Bunlar metnin içerisinde tek tek verilebileceği gibi bir bütün hâlinde de verilebilir.
Bilgi gruplanarak sunulduğunda daha kolay ilişkilendirildiği için algılanması kolaylaşır.
Diğer bütün aşamalarda olduğu gibi bilgi tasarımı yapılırken de kullanıcı ihtiyaçları ve stratejik hedefler göz önünde bulundurulmalıdır.
Wireframe Oluşturma
İskelet oluşturma aşamasının sonunda sunulacak ürün veya hizmetin taslağı ortaya çıkar. Sistemi ayakta tutacak taşıyacak kemik yapı belirlenmiş olur. Bu yapının gösterimi ve görselleştirilmesi için wireframe kullanılır. Wireframe, sitenin işleyişini, görsel bileşenlerin nasıl yerleşeceği ve etkileşim nasıl olacağını gösteren iki boyutlu çizimlerdir. Bilgi mimarisini görselleştirir. İskelet oluşturma aşamasında alınan bütün kararları gösteren belgeyi oluşturur.
Ana taslağı oluşturduğu için herhangi bir renklendirme veya görsel tasarım çalışması bu dokümanda yer almaz. Wireframe bitmiş tasarım ögeleri içermez, tasarımın nasıl olacağı hakkında yönlendirmede bulunmaz. İçerik ( fotoğraf, video, metin) hakkında öngörü sağlar.
Siteden siteye değişse de genellikle bir wireframe aşağıdaki bileşenleri içerir:
- Logo
- Menü başlıkları
- Birinci ikinci metin düzey başlıklar
- Gövde metni
- Görseller
- Arama alanı
- İletişim bilgileri
- Alt ve üst bilgiler
- Wireframe oluşturmak için kalem kâğıt kullanabileceğiniz gibi aşağıda bazı örnekleri verilen çeşitli yazılımlardan da yararlanabilirsiniz. Wireframe oluşturmak için kullanılabilecek yazılımlardan bazıları:
Cacoo http://www.cacoo.com
Balsamiq http://www.balsamiq.com
Gomockingbird https://gomockingbird.com
Hotgloo http://www.hotgloo.com
Mock Flow http://www.mockflow.com
Evolus http://www.evolus.vn/Pencil/Home.html
Pidoco https://pidoco.com/en
Protoshare http://www.protoshare.com
İPlotz http://iplotz.com
Gliffy http://www.gliffy.com
JumpChart https://www.jumpchart.com
Just Proto http://www.justproto.com/en
Creately http://creately.com