Baran Masoumian
Baran Masoumian
خواندن ۶ دقیقه·۴ سال پیش

کدام مدل معماری اطلاعات مناسب سایت/اپلیکیشن من است؟



یکی از سوالای مهمی که در طراحی اپلیکیشن یا سایت پرسیده میشه و یا به عبارت دیگه باید پرسیده بشه، اینه که کدوم یک از مدل‌های معماری اطلاعات برای اپلیکیشن یا سایت ما مناسبه؟

درست مثل وقتی که توی یه مقصد جدید از هواپیما پیاده می‌شید و فورا این سوال‌ها توی ذهنتون شکل می‌گیره که الان توی کدوم قسمت هستید، کجا باید برید و چطور باید به جایی که مد نظرتونه برسید؛ وقتی هم که توی سایت یا اپلیکیشن جدید قرار می‌گیرید این سوال که "چطور به صفحه‌ یا امکانی که مد نظرمه برسم" توی ذهن شما شکل می‌گیره.

انتخاب یه معماری اطلاعات مناسب تعیین می‌کنه که انتظاری که کاربر از سایت یا برنامه داره به خوبی جواب داده می‌شود یا نه. یه معماری اطلاعات نادرست می‌تونه هزینه زیادی، هم برای کاربر و هم صاحب اپلیکیشن/سایت به وجود بیاره.

متاسفانه توی خیلی از ترند‌های دیزاین امروزی به این موضوع برمی‌خوریم که راهبری و پیمایش (Navigation) در بخش‌های مختلف سایت یا اپ، فدای محتوا شده.

موبایل محور شدن سایت‌ها که به معنی کوچیک شدن صفحه‌ نمایش هم هست، باعث شده تا مجبور بشیم بعضی از گزینه‌هایی که قبلا می‌تونسیتم برای هدایت و راهبری کاربر استفاده کنیم رو حذف کنیم. به همین دلیل اهمیت انتخاب یه معماری اطلاعات مناسب خیلی بیشتر از قبل شده.

توی این مطلب بعضی از مدل‌های معماری اطلاعات و کاربردشون رو با هم بررسی می‌کنیم.


سلسله‌ مراتب درختی (Hierarchical Tree)

سلسله مراتب درختی مدلیه که بیشتر ما با اون آشنایی داریم و شناخته شده‌ترین مدل معماری اطلاعاته.
وقتی که سایت ما قراره محتوای زیادی داشته باشه و به اصطلاح content-heavy هست، این مدل، یه مدل استاندارد برای معماری اطلاعات این نوع سایت محسوب میشه.

توی این معماری کاربر می‌تونه به دسته‌بندی‌ها (Category)ی سطح بالا یا اصطلاحا Parent دسترسی پیدا کنه و بعد با پایین اومدن و باز کردن دسته‌ها، محتوا‌ داخل اون دسته‌بندی‌ها رو مشاهده کنه.


مدل معماری اطلاعات سلسله مراتب درختی - hierarchical tree
مدل معماری اطلاعات سلسله مراتب درختی - hierarchical tree


بنابراین وقتی سایتی داریم که محتوا در اون در دسته‌‌ها و زیردسته‌‌های متعددی قرار می‌گیره و حجم زیادی لینک برای نمایش داریم، از این معماری اطلاعات استفاده می‌کنیم، تا محتوا رو تدریجا به کاربر نمایش بدیم و مسیرهای دسترسی رو برای کاربر مشخص کنیم.

از اونجایی که این مدل می‌تونه به لحاظ حجم لینک خیلی سنگین (link-heavy) بشه، برای صفحه‌نمایش‌های کوچیک مناسب نیست، چون مدیریت حجم زیاد لینک‌ها قطعا توی اسکرین‌های کوچیک سخت میشه.


لیست تو در تو (Nested List)

مدل معماری لیست تودرتو یکی از متداول‌ترین انواع پیمایش موبایلیه و اغلب برای مدیریت کردن منوهایی که چندسطحی هستن و آیتم‌های زیادی هم دارن استفاده میشه.

اگر به تصویر این مدل نگاه کنید متوجه می‌شید که بهترین جایگزین برای پیاده‌سازی مدل معماری سلسله مراتب درختی توی موبایله و کاربر به راحتی با ضربه زدن (tap) یا کشیدن (swipe) می‌تونه بین منوها پیمایش
کنه.

مدل معماری اطلاعات لیست تو در تو - nested list‌
مدل معماری اطلاعات لیست تو در تو - nested list‌


مزیت این مدل معماری اطلاعات اینه که به کاربر کمک می‌کنه تا بتونه بهتر روی محتوای هر بخش تمرکز کنه. اما هرچقدر که این مدل توی پیمایش عمقی خوب عمل می‌کنه و به بهترین نحو کاربر رو بین منوها جابه‌جا میکنه توی پیمایش جانبی ضعیفه و کاربر برای اینکه سکشن رو تغییر بده باید مسیر رفته رو برگرده و بعد بخش دیگه‌ای رو باز کنه.


مرکز و پره (Hub and Spoke)

این مدل رو به نام‌های دیگه‌ای مثل قطب و اقمار و یا به صورت مخفف H&S هم میشناسن.
توی این مدل معماری اطلاعات، ما یه صفحه به عنوان صفحه‌ی مرکزی (hub) داریم و به واسطه‌ی پیوندهای موجود توی این صفحه، به بخش‌هایی که کاملا از هم مستقل هستن دسترسی داریم. وقتی داخل یک بخش هستیم امکان دسترسی به بخش دیگه‌ای رو نداریم و برای این کار اول باید به صفحه مرکزی برگردیم و بعد بخش دیگه‌ای که موردنظرمون هست رو انتخاب کنیم.

این مدل هم مثل مدل Nested List توی افزایش تمرکز کاربر روی محتوا خیلی خوب عمل می‌کنه. چون بعد از وارد شدن به هر بخش مستقل، از ناوبری کلی برنامه خبری نیست و در عوض دکمه‌ی بازگشت رو می‌بینیم که به نحوی برجسته شده تا بتونیم مسیر برگشت رو به راحتی پیدا کنیم. این مدل برای سایت یا برنامه‌های تسک محور خیلی مناسبه.

مدل معماری اطلاعات مرکز و پره - hub and spoke‌
مدل معماری اطلاعات مرکز و پره - hub and spoke‌


برای مثال Google Play از این معماری اطلاعات داخل دسته‌های اصلیش استفاده می‌کنه. بنابراین وقتی که وارد صفحه‌ یه محصول می‌شیم اولین چیزی که توجه ما رو جلب می‌کنه دکمه دانلود یا آپدیت برنامه‌ست.

یه مثال دیگه میتونه بخش تنظیمات موبایلتون باشه.که هر کدوم از تنظیمات یه سکشن جدا هستند و تنظیمات مخصوصی رو انجام میدن و برای تغییر تنظیمات قسمت دیگه‌ای از موبایل، باید به صفحه اصلی تنظیمات برگردید و بخش مورد نظرتون رو انتخاب کنید.

اگر به برنامه‌هایی که ازشون استفاده می‌کنید دقت کنید این معماری اطلاعات رو می‌تونید توی تعداد زیادیشون پیدا کنید.


بنتو باکس (bento box‌)

اسم این مدل معماری اطلاعات از روی یه جعبه غذای جمع و جور ژاپنی که مخصوص بیرون بردن غذاست گرفته شده.

جعبه غذای بنتو (از ظروف سنتی ژاپن)
جعبه غذای بنتو (از ظروف سنتی ژاپن)


هدف از دیزاین این مدل معماری، افزایش بهره‌وری و استفاده بهینه از فضا بوده.
همه‌ی آیتم‌ها با اینکه در یک صفحه و یکجا نمایش داده میشن در عین حال از هم جدا هستند و به طور واضح کارایی خودشون رو نمایش میدن.

این مدل شبیه به این هست که از مدل Hub & Spoke استفاده کنیم ولی برای برنامه یا سایتی که استایل یک داشبورد رو داره؛ که محتوا رو به صورت پویا از منابعی که براش تعریف شده میخونه و نمایش میده.

بنابراین بنتو باکس یه دیزاین تک صفحه‌ای چند منظوره‌ست که با باز کردن هر بخش لایه‌های جدیدی از محتوا رو به کاربر نشون میده.
این مدل برای سایت‌هایی که کاربر در اونها با داده سروکار داره انتخاب خیلی مناسبیه.
توی اکثر موارد این داده‌ها از منابع مختلفی تامین میشن. مثلا داده‌های آماری از یه منبع، داده‌های ویدئویی از یه منبع دیگه و...

برای مثال توی عکس پایین، اگر منو رو انتخاب کنیم به بخش منو هدایت میشیم، اگر قسمت نموداری رو انتخاب کنیم وارد بخش نمایش داده‌های مربوط به اون میشیم، انتخاب ویدئوها ما رو به سکشن پیش‌نمایش وید‌ئوها می‌بره و با انتخاب گزینه تنظیمات، آپشن‌هایی که میتونیم تغییر بدیم به ما نمایش داده میشه.

مدل معماری اطلاعات بنتو باکس - bento box‌
مدل معماری اطلاعات بنتو باکس - bento box‌


نمای فیلتر شده (Filtered View)

برخلاف داشبورد که مثل یه مرکز کنترل برای تعامل با داده‌های مختلف عمل میکنه. این سیستم یه مجموعه داده‌ی واحد و از یک جنس رو نمایش میده، و اطلاعات می‌تونن در اون به روش‌های متفاوتی جستجو و مرتب سازی بشن.

کاربر در این سیستم‌ها گزینه‌های زیادی برای مرتب‌سازی و شیوه‌ی نمایش اطلاعات داره.
اگر موزیک پلیر تلفن همراهتون رو باز کنید این مدل معماری اطلاعات رو میتونید ببینید.
شما توی موزیک پلیرتون می‌تونید موزیک‌ها رو بر اساس آرتیستشون، آلبوم‌هاشون، سبکشون و... ببینید. یا بر اساس محبوب‌ترین، جدیدترین، اخیرا پخش شده و... مرتب کنید.
مشابه چیزی که توی تصویر زیر اتفاق میفته.

مدل معماری اطلاعات نمای فیلتر شده - filtered view
مدل معماری اطلاعات نمای فیلتر شده - filtered view


مدل‌های ترکیبی (Combined IA Models)

در نهایت مدل‌های مختلف معماری اطلاعات برای اهداف مختلف و بر اساس نیاز ما میتونن با همدیگه ترکیب بشن و معماری اطلاعاتی که مناسب سایت یا برنامه ما هست رو بسازن.

برای مثال کاربر می‌تونه وارد یه سایت بشه که از مدل درختی استفاده می‌کنه و بعد از لاگین کردن به یک سیستم کاملا جداگانه و صفحه‌ای هدایت بشه که به عنوان صفحه‌ی مرکزی مدل Hub & Spoke هست و با این مدل تعامل کنه.

همینطور حالت‌های خیلی زیادی که انواع مدل‌ها میتونن با ترکیب شدنشون به وجود بیارن. برای مثال ما سیستم فیلترینگ رو به اشکال مختلف در خیلی از سایت‌ها داریم.
نکته‌ای که باید بهش دقت بشه اینه که ترکیب چند مدل داخل یک سایت میتونه گیج‌کننده باشه و استفاده از مدل‌های ترکیبی باید بر اساس انتظارات کاربر و نوع محتوا باشه.

مدل معماری اطلاعات ترکیبی - combined IA models
مدل معماری اطلاعات ترکیبی - combined IA models



ممنونم که همراه من شدید و خوشحال میشم نظرتون رو با من به اشتراک بگذارید.
در پست‌های آتی بیشتر و بیشتر درمورد انواع مدل‌ها و جزئیاتشون میگم و با هم مدل‌ها رو عمیق‌تر و جزئی‌تر بررسی می‌کنیم.



معماری اطلاعاتتجربه کاربری
طراح رابط و تجربه کاربری. عاشق پادکست، سینما و انیمه‌های کلاسیک. علاقه‌مند به یاد گرفتن و یاد دادن.
شاید از این پست‌ها خوشتان بیاید