Kapsamlı Bilgi Mimarisi Rehberi

Bu makalenin sesli sürümünü dinleyin

UX sürecinin standart bir parçası olarak tasarımcılar, ürünleri oluştururken bilgi mimarisi oluşturur. Kullanıcıların bir uygulama veya web sitesi üzerinden geçebilecekleri her yolu ve yolu tanımlayan bilgi mimarisi, hangi sayfanın nereye gittiğini gösteren bir site haritasından çok daha fazlasıdır.

Fiziksel yapılardan elektrik ve sıhhi tesisat gibi daha karmaşık iç çalışmalara kadar bir evin her bölümünü inşa etmek için bir plan kullanan bina mimarlarına benzer şekilde, bilgi mimarisi bir web sitesinin veya uygulamanın hiyerarşisini, gezinmesini, özelliklerini ve etkileşimlerini tanımlar. Nasıl ki planlar bir mimarın bir binanın inşasında kullanacağı en değerli belgeyse, bilgi mimarisi de bir tasarımcının cephanesindeki en güçlü araç olabilir.

Ancak, bir özellik geliştirmek, özelliklerin bir listesini bir araya getirmek ve nasıl çalıştıklarını haritalamak kadar basit değildir; hadi süreci inceleyelim.

Bilgi Mimarisi Nedir ve Neden Önemlidir?

Bilgi mimarisi (IA), bir plan gibi, ürünün altyapısının, özelliklerinin ve hiyerarşisinin görsel bir temsilidir. Ayrıntı düzeyi tasarımcıya bağlıdır, dolayısıyla IA ayrıca gezinme, uygulama işlevleri ve davranışları, içerik ve akışları da içerebilir. IA'nın boyutu veya şekli için belirlenmiş bir sınır yoktur; bununla birlikte, ürünün genelleştirilmiş yapısını kapsamalıdır, böylece herkes (teorik olarak) ürünü okuyabilmeli ve ürünün nasıl çalıştığını anlayabilmelidir.

Her iki belgenin amacı hemen hemen aynı olduğundan, plan referansını sıklıkla kullanacağız. IA, tıpkı bir taslak gibi, tasarımcılara (aynı zamanda ürün geliştirme ve mühendislik ekiplerine) tüm ürünün kuşbakışı görünümünü sağlar. Uygulamanın veya web sitesinin nasıl çalıştığına dair basit ve anlaşılır bir sunum sunan tek bir belgeye sahip olmak, yeni özellikler geliştirmek, mevcut olanları güncellemek ve mevcut ürün göz önüne alındığında nelerin mümkün olduğunu görmek için hayati önem taşır.

IA mevcut olduğunda, yeni özellikler ve uygulamalar için önemli kararlar almak, ürün değişiklikleri için zaman çizelgelerini anlamak ve birden çok süreç boyunca kullanıcı davranışını takip etmek önemli ölçüde daha kolay hale geliyor.

Bir IA'nın nasıl oluşturulduğunu görmek için temel bir videoya dalalım.

Bilgi Mimarisi Nasıl Tasarlanır

UX sürecinin bir parçası olarak, IA tasarımı akış şemasına çok benzer kalıpları takip eder: Şekiller ekleyin ve bunları düzenli bir şekilde çizgilerle tek bir belgeye bağlayın. IA oluştururken karşılaşılan zorluk, uygulamanızın veya web sitenizin kullanıcının bakış açısından gerçekte nasıl çalıştığını ve bu bilgilerin okunabilir, okunaklı bir biçimde nasıl düzenleneceğini anlamaktır.

IA'yı fiilen inşa etmek için iki ana gereksinim vardır: onu görsel bir hiyerarşi (yani özellikler, işlevler ve davranış hiyerarşisi) aracılığıyla düzenlemek ve farklı türdeki özellikleri, etkileşimleri ve akışları görüntülemek için bir efsane oluşturmak. Standart bir akış şemasıyla, şekiller belirli gereksinimleri takip eder (dikdörtgenler süreçlerdir, elmaslar karar noktalarıdır, vb.); ancak, bu terminolojiyi takip etmek bir gereklilik değildir.

Diğer bir deyişle, IA'nızı oluşturmanın en önemli faktörleri, mimarinin bireysel bileşenlerinin (hiyerarşik olarak) nereye yerleştirildiği ve nasıl etiketlenip görüntülendiğidir.

Görsel Hiyerarşiyi Anlamak ve Göstermek

Yeni bir bilgi mimarisi yaratmanın en zorlu yönü neredeyse her zaman onu hiyerarşik olarak inşa etmektir. IA'nın “yukarıdan aşağıya” inşa edilmesi gerektiği yaygın bir yanılgıdır. Yukarıdaki videoda olduğu gibi mevcut bir ürün olmadığı sürece bunu yapmak neredeyse her zaman daha zordur.

IA'yı sıfırdan oluştururken, web siteniz veya uygulamanız standart bir formatı takip etmedikçe, en üst seviyeden sonra herhangi bir şey çizmek çok zordur. Bu, bir tamirciden bir arabayı parçalar halinde yapmak yerine yukarıdan aşağıya doğru yapmasını istemek gibi bir şey. Her parça kendi araştırma, tasarım ve geliştirme zamanı ile önceden inşa edilmelidir. Aynı şey IA için de geçerlidir.

Görsel hiyerarşiyi görüntülemek, yalnızca okuyucu için daha iyi bağlam sağladığı için değil, aynı zamanda ürünün önemli bölgelerini genelleştirdiği için IA için değerli bir varlıktır. Uygulamanızın en önemli özelliği, ana sayfadan yapılabilen bir yolculuk (bir Uber veya Lyft olarak) sipariş etmekse, o sayfa en fazla temas noktasına ve ürün için en yüksek değere sahip olacaktır. Aynısı görsel hiyerarşi için de geçerli olacaktır.

Site haritaları, sayfaları sayısal olarak düzenlediklerinden (1.0 Ana Sayfa, 2.0 Ödeme, 2.1 Ödeme Yöntemi Ekleme vb.) hiyerarşiyi anlamak için kullanışlıdır. Veya Duke Üniversitesi'nin kütüphane web sitesi için aşağıdaki resimdeki örneği göz önünde bulundurun; burada üst gezinme yalnızca üstte değil, aynı zamanda tüm uygulama boyunca görünür olacak şekilde vurgulanmıştır.

Şekillerin, Renklerin ve Diğer Görsel Öğelerin Hiyerarşisi

Hiyerarşinin yanı sıra, yukarıdaki mimari başka bir şeyi daha iyi yapıyor: Gerektiğinde her etkileşim noktasını basit bir açıklama ve birkaç anahtar kelime ile benzersiz bir şekilde görüntüler. Gösterge, sayfa ve içerik türünü belirtir ve şekillerin renkleri arasındaki farklılıkları belirtir. Bu önemlidir, çünkü Duke'ün sitesi oldukça basit görünse de, IA yalnızca üç seviye derinliğe iner. Her sarı dikdörtgen bir uygulamayı ifade eder, bu nedenle bu kutuların her birinin içindeki işlemler bu belgeye dahil edilmemiştir!

Bu parçalar mevcut olmasa bile, yapı öyledir ki, yalnızca IA aracılığıyla web sitesinde nasıl gezineceğimizi anlayabiliriz. Bu, web sitesindeki bir uygulamaya ulaştığımızda durur - zorunda değildir.

Aşağıdaki IA bir oyun içindir. Dört şekil, renksiz ve akıllıca yerleştirilmiş metin parçacıkları kullanarak, her büyük etkileşim prototip olmadan anlaşılabilir ve daha da önemlisi, üzerinde çalışan herkes tarafından anlaşılabilir.

Bu model mükemmel değildir, ancak uygulama hiyerarşisini net bir şekilde düzenler ve kullanıcının herhangi bir noktada ne gördüğünü veya ne yaptığını betimler.

En İyi Bilgi Mimarisi Araçları

Bir IA oluşturmaya izin veren çok sayıda yazılım uygulaması vardır, ancak çok azı deneyimi keyifli hale getirecek kadar basit ve hızlıdır. Ya da en azından yönetimi kolay.

Yukarıdaki videoda kullanılan Draw.io, kişisel ve profesyonel kullanım için tamamen ücretsizdir ve otomatik olarak Google Drive'a bağlanır. Ayrıca Confluence ve JIRA ile ücretli entegrasyonları vardır. Draw.io, akış şeması oluşturmak, kullanıcı akışları ve bilgi mimarisi oluşturmak için mükemmeldir ve Drive işleviyle birden fazla kişi aynı belge üzerinde çalışabilir ve değişiklikleri canlı olarak görebilir. Ayrıca ücretsiz bir çevrimdışı sürümü var.

Lucidchart, Draw.io'dan biraz daha iyi bir deneyim sağlayan ve önceden oluşturulmuş şablonlar, daha birçok entegrasyon, bir mobil uygulama (App Store'da 2,5 yıldızla derecelendirilmiş) ve kurumsal destek gibi ek avantajlara sahip başka bir harika araçtır.

Omnigraffle ve Visio uzun süredir endüstrinin temel dayanaklarıdır ve bir IA tasarımı oluşturmak ve sürdürmek için mükemmel bir şekilde çalışırlar, ancak Visio yalnızca çevrimiçi (eski çevrimdışı sürüm yalnızca Windows içindir), Omnigraffle ise yalnızca Mac'tir ve MacOS ve iOS için ayrı satın alma gerektirir sürümler. OmniGraffle, çoğu tasarımcı için gereksiz olabilecek JavaScript ve AppleScript otomasyonu sağlamasıyla büyük rakiplerine göre bir avantaja sahiptir, ancak tipik olarak tam zamanlı bilgi mimarları bunu takdir eder.

Yukarıda listelenen araçların tümü, özellikle bilgi mimarisiyle neredeyse aynı ilkeleri izleyen akış şeması etrafında hız ve kullanım kolaylığı için yapılmıştır. Balsamiq, MindMeister, MindManager veya XMind gibi diğer uygulamaların tümü benzer tarzda davranışlar sunar, ancak prototip oluşturma veya zihin haritalama gibi diğer ana amaçlar için oluşturulmuştur.

Bilgi Mimarisi En İyi Uygulamaları

Bilgi mimarisini neyin oluşturduğuna ilişkin birkaç tanımlı kural olsa da, süreçten geçerken aşağıdakileri göz önünde bulundurun:

Hiyerarşiye Odaklanma, Yapıya Odaklanın

Hiyerarşi ayarlanabilir. Ana sayfa her zaman ana sayfa olacaktır, ancak nereye gittiği, kullanıcıların bu yerlere nasıl ulaştığı ve aradaki ve ötesindeki her şey daha sonra belirlenir.

Tüm Süreçler Mantıklı Olmalıdır

UX sürecindeki IA, kullanıcı etkileşimleri için olsa da, yolun her adımı mantıklı olmalıdır. Kayıt ekranları ayarlara gitmemeli, bir kamera işlevi harita görünümüne atlamamalı… liste uzayıp gidiyor.

UX Sürecini Hatırlayın

Yaygın bir hata, kaynaklar, araştırma veya diğer varlıklar veya işler olmadan yalnızca IA yapmaktır . Bu, bir yazara ana hatları olmadan bir kitap yazmasını veya bir programcıya prototipleri olmayan bir uygulamayı kodlamasını söylemek gibidir.

sen haritacısın

Haritacılar, dağ sıralarından eyalet sınırlarına kadar bir haritayla ilgili her şeyi dikkate alır. Tıpkı harita yapımcıları gibi, tasarımcılar da IA ​​tasarımına ne gireceğini belirler. Bireysel sayfalar, belirli kullanıcı davranışları, karar noktaları için bağlam… vb.

Nihayetinde haritacı, kullanıcı ihtiyaçlarına göre haritada ne olacağına karar verir. Aynısı tasarımcılar için de geçerlidir, bu nedenle IA'yı son kullanıcı, yani ürün geliştirme ve tasarım ekipleri için oluşturun.

Bilgi Mimarisi Sürekli Değişiyor ve Gelişiyor

Noktayı bir kez daha delmek için, tüm IA'lar değişim için yapılmıştır. Ürünler gelişir, tasarımlar değişir, kullanıcılar uyum sağlar ve döngü tekrar tekrar devam eder. Çok ciddiye almayın ve her zaman iyileştirme için yer olacağını bilin. Mükemmelliği hedeflemeyin; basit, uyarlanabilir bir IA oluşturun.

Bilgi Mimarlığım Yapıldı… Şimdi Ne Olacak?

Herhangi bir tasarım çalışmasının asla gerçekten yapılmadığı yaygın bir anlayıştır ve bu kesinlikle bilgi mimarisi için geçerlidir. Ürünlerimiz gibi büyürler, küçülürler ve değişirler. Bir bina için bir plandan farklı olarak, IA her zaman kullanıcı ihtiyaçlarından yeni özelliklere veya bir ürün revizyonuna kadar her şeye bağlı olarak gelişecektir. Yapının çoğu aynı kalabilir ve kullanıcıların kafasının karışmaması için sürümler arasında tutarlılık sağlayabilir.

Ve bu iyi bir şey. IA'nın akıcı bir belge (muhtemelen haftalık, hatta bazen günlük olarak değişen) olduğunu bilmek, koda dokunmadan veya yeni prototipler oluşturmadan uygulamanızın veya web sitenizin genel yapısını korumanın güçlü bir yoludur. Ürün geliştirme ekibinin tamamı IA'yı ne kadar iyi bilirse , herkes neyin mümkün olup olmadığını ve herhangi bir sözde “kolay işin” gerçekte ne kadar ciddi olduğunu o kadar hızlı anlayacaktır.

Bu da bizi bilgi mimarisinin gerçek güzelliğine getiriyor: Önceden tanımlanmış bir başlangıç ​​noktası yok. Geleneksel UX tasarım süreci, IA'nın yeterli kullanıcı akışı tamamlandıktan sonra oluşturulmasını zorunlu kılarken; Çok sayıda kullanıcı ve rekabet araştırması ile donanmış, aynı zamanda yapılan ilk şey olabilir… veya son. Prototip oluşturma süreci genellikle, mantıksal veya hayal gücünden yoksun bir IA'dan hayal edilmesi zor olan belirli davranışların veya eylemlerin nasıl gerçekleşmesi gerektiği hakkında bilgi getirir.

Sürekli gelişen bir uygulama olarak, IA tasarımı bir beceri olduğu kadar bir sanattır, bu nedenle büyük şirketlerin bilgi mimarı pozisyonlarına sahip olmalarının bir nedeni de budur. Bu tasarımcılar, büyük sistemlerin bekçileridir ve zaman içinde ürün büyümesine ilişkin anlayışlarıyla, ürün, tasarım ve mühendislik ekiplerinin yıllar içinde doğru kararları vermelerine yardımcı olurlar. Bu organizasyon ölçeği tüm tasarımcılar için değildir, ancak her tasarımcı basit, anlaşılır bir bilgi mimarisi oluşturabilir.

• • •

Bilgi Mimarisi Hakkında Önerilen Okuma

Web ve Ötesi için IA

Herhangi Bir Karışıklık Nasıl Anlaşılır: Herkes İçin Bilgi Mimarisi

Bilgi Mimarisi Temelleri

Bilgi Mimarisi ve UX Tasarımı Arasındaki Fark

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır