سپنتا پویا — طراح محصول

دیاگرام معماری اطلاعات: هم‌پوشانی محتوا، بافت و کاربر
نویسنده: Interaction Design Foundation · منبع: بنیاد طراحی تعامل (IxDF) · ترجمهٔ آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۹ دقیقه

معماری اطلاعات (Information Architecture) چیست؟ راهنمای کامل

💡 این متن ترجمهٔ آزاد است: محتوای مقالهٔ اصلی با نگارش مستقل فارسی و با ذکر منبع بازگو شده و ترجمهٔ کلمه‌به‌کلمه نیست. لینک مقالهٔ اصلی در پایین صفحه آمده است.

تصور کنید وارد یک فروشگاه بزرگ می‌شوید و بی‌آنکه از کسی بپرسید، یک‌راست به‌سمت قفسهٔ تنقلات می‌روید؛ یا در موزهٔ تاریخ طبیعی، فسیل‌های دورهٔ ژوراسیک را کنار هم می‌بینید نه پراکنده در همهٔ سالن‌ها. این «سرِ جای خود بودن» چیزها اتفاقی نیست؛ نتیجهٔ کاری است به‌نام معماری اطلاعات (Information Architecture یا به‌اختصار IA). همان کاری که در فضای فیزیکی مسیر شما را هموار می‌کند، در وب‌سایت‌ها و اپلیکیشن‌ها هم تعیین می‌کند که آیا کاربر آنچه را می‌خواهد پیدا می‌کند یا سرخورده صفحه را می‌بندد.

معماری اطلاعات، دیسیپلینِ «یافتنی و فهمیدنی‌کردن اطلاعات» است: جست‌وجو، مرور، دسته‌بندی و ارائهٔ محتوای مرتبط و متناسب با بافت، تا آدم‌ها هم محیط اطراف‌شان را بفهمند و هم چیزی را که دنبالش هستند پیدا کنند — چه آنلاین، چه در دنیای واقعی. در این نوشته می‌بینیم IA دقیقاً چیست، بر چه ستون‌هایی می‌ایستد، از چه اجزایی ساخته می‌شود و در عصر موبایل چه شکلی به خود می‌گیرد.

معماری اطلاعات دقیقاً یعنی چه؟

در قلب معماری اطلاعات دو نگاه بنیادین نشسته است:

  • - آدم‌ها اطلاعات، محصولات و خدمات را مثل مکان‌هایی ساخته‌شده از زبان درک می‌کنند؛ فضاهایی که در آن‌ها راه می‌روند و می‌گردند.
  • - این «مکان‌های اطلاعاتی» را می‌توان طوری چید و مرتب کرد که یافتنی‌بودن و فهم‌پذیری‌شان به بیشترین حد برسد.

منظور از «زبان» فقط واژه‌ها نیست؛ عناصر بصری، برچسب‌ها، توضیحات، منوها و خودِ محتوا همگی اجزای این زبان‌اند و دست‌به‌دست هم می‌دهند تا کاربر بفهمد کجاست و به کجا می‌تواند برود. به‌همین‌خاطر معماری اطلاعات، هم به وب‌سایت‌ها و اپلیکیشن‌ها ربط دارد و هم به فضاهای فیزیکی مثل موزه و فروشگاه؛ اصلِ ماجرا در هر دو یکی است: نظمی نامرئی که پیداکردن را آسان می‌کند.

سه دایره: محتوا، بافت و کاربر

معماری اطلاعاتِ خوب از دلِ سه عامل به‌هم‌وابسته بیرون می‌آید. لوئیس روزنفلد، پیتر مورویل و خورخه آرانگو در کتاب کلاسیک «معماری اطلاعات برای وب جهانی» این سه عامل را «بوم‌شناسی اطلاعات» (Information Ecology) می‌نامند — تصویری از وابستگی‌های پیچیده‌ای که هر محیط اطلاعاتی را می‌سازند:

  • - محتوا (Content): چه اطلاعاتی در دسترس است؟ چه نوع سندها و داده‌هایی داریم، حجم‌شان چقدر است، چه ساختاری از پیش دارند و چه ربطی به کاربر پیدا می‌کنند؟
  • - بافت (Context): کاربر کجا، کِی، چرا و چگونه سراغ محتوا می‌آید؟ این دایره به اهداف کسب‌وکار، فرهنگ سازمان، فناوری، سیاست‌ها، بودجه و محدودیت‌ها گره خورده است.
  • - کاربر (User): چه کسی محتوا را مصرف می‌کند؟ چه ارزشی از آن می‌گیرد، چه انتظارات و تجربه‌های پیشینی دارد و چطور به‌دنبال اطلاعات می‌گردد؟

نکتهٔ کلیدی این است که هیچ‌کدام از این سه دایره ثابت نیستند؛ همه در حال تغییرند و به‌هم وابسته‌اند. معماری اطلاعاتِ خوب جایی متولد می‌شود که هر سه هم‌زمان دیده شوند — نه اینکه فقط محتوا را دسته‌بندی کنیم و کاربر و بافت را فراموش کنیم. همین‌جاست که IA به شناخت عمیق کاربر گره می‌خورد؛ چیزی که ابزارهایی مثل مدل‌های ذهنی و نقشهٔ سفر مشتری به آن کمک می‌کنند.

اجزای معماری اطلاعات

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

  • - سیستم‌های سازمان‌دهی (Organization): تعیین می‌کند اطلاعات چطور دسته‌بندی و ساختاردهی شود تا کاربر بتواند حدس بزند هر چیزی کجاست.
  • - سیستم‌های برچسب‌گذاری (Labeling): اینکه اطلاعات و گزینه‌های ناوبری با چه واژه‌ها و نشانه‌هایی نمایش داده شوند تا فهمیدنی و یافتنی باشند.
  • - سیستم‌های ناوبری (Navigation): کاربر را در دلِ ساختار راه می‌برد؛ به او می‌گوید الان کجای سایت یا اپ است و چطور به مقصد بعدی برسد.
  • - سیستم‌های جست‌وجو (Search): به کاربر امکان می‌دهد اطلاعات مشخصی را سریع پیدا کند — به‌ویژه در محصولات پرمحتوا که مرور صرف کافی نیست.

برچسب‌گذاری روشن و ناوبری ساده همان چیزی است که در کاربردپذیری هم قلب ماجراست؛ کاربر نباید برای فهمیدن اینکه یک دکمه او را کجا می‌برد، انرژی ذهنی هدر بدهد.

معماری اطلاعات و طراحی تجربهٔ کاربری

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

خروجی‌های ملموسی که یک معمار اطلاعات معمولاً تحویل می‌دهد عبارت‌اند از:

  • - نقشهٔ سایت (Sitemap): تصویر سلسله‌مراتبی از کل ساختار.
  • - وایرفریم‌ها: اسکلت کم‌جزئیاتِ صفحه‌ها که چیدمان اطلاعات را نشان می‌دهد.
  • - سلسله‌مراتب‌ها (Hierarchies): نظم بالا‌به‌پایینِ محتوا.
  • - ناوبری و متادیتا: مسیرها و برچسب‌هایی که محتوا را قابل‌ردیابی می‌کنند.

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

از کجا شروع کنیم؟ نقش مرتب‌سازی کارت

فرایند طراحی معماری اطلاعات با دو کار موازی آغاز می‌شود: شناخت نیاز کاربر (از راه تحقیق کاربر برای فهم رفتارها، ترجیح‌ها و هدف‌ها) و ارزیابی محتوا (اینکه چه محتوایی داریم، چقدر مرتبط است و چطور باید سازمان بگیرد). اما چطور بفهمیم کاربر خودش دوست دارد اطلاعات چطور دسته‌بندی شوند؟ اینجاست که مرتب‌سازی کارت (Card Sorting) وارد می‌شود.

در مرتب‌سازی کارت، از شرکت‌کننده‌ها می‌خواهیم محتوا را در دسته‌هایی که برای خودشان معنا دارد سازمان بدهند. نتیجه، پنجره‌ای است به‌سوی انتظارات و مدل‌های ذهنی کاربر: می‌فهمیم آدم‌ها چه چیزهایی را «هم‌خانواده» می‌بینند و چه ساختاری برایشان طبیعی است. این روش را می‌توان حضوری یا با ابزارهای آنلاین (مثل OptimalSort) اجرا کرد، و داده‌اش مستقیماً به ساختِ یک معماریِ کاربرمحور کمک می‌کند. در کنارش ابزارهایی مثل نرم‌افزارهای نقشهٔ سایت (XMind، Lucidchart) و وایرفریم (Figma، Adobe XD) به تصویرکردن و آزمودن ساختار کمک می‌کنند.

معماری اطلاعات در برابر استراتژی محتوا

این دو مفهوم را زیاد با هم اشتباه می‌گیرند، اما تفاوت‌شان ساده است:

  • - معماری اطلاعات با سازمان و ساختار اطلاعات سروکار دارد: چیدمان محتوا، دسته‌بندی و طراحی ناوبری شهودی. یعنی «چارچوبی که اطلاعات در آن مرتب می‌شود».
  • - استراتژی محتوا با خلق، تحویل و راهبری محتوا سروکار دارد: چه محتوایی تولید شود، چطور نگه‌داری، به‌روزرسانی و در نهایت بایگانی شود، و چطور هم نیاز کاربر را برآورده کند هم هدف کسب‌وکار را.

به‌بیان دیگر، IA می‌گوید «اطلاعات چطور چیده شود» و استراتژی محتوا می‌گوید «چه محتوایی ارائه شود و در طول زمان چطور مدیریت شود». هر دو برای یک تجربهٔ منسجم لازم‌اند، اما به دو وجه متفاوت از تعامل کاربر با محصول می‌پردازند.

معماری اطلاعات در عصر موبایل

دیاگرام معماری اطلاعات موبایل از پیتر مورویل
© Peter Morville، لایسنس CC BY 2.0

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

۱) به «هزینهٔ کلیک» فکر کنید

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

۲) اصل «ساده نگهش دار» (KISS)

هرچه چیزها ساده‌تر باشند، تجربه کم‌دردسرتر است. انتخاب‌های کاربر را محدود کنید و اگر تحقیق نشان داد بخشی از محتوا برای کاربر موبایل ارزشی ندارد، حذفش کنید. چند قاعدهٔ عملی برای ساده‌نگه‌داشتن IA موبایل:

  • - دسته‌ها را کم کنید: آدم‌ها هرچه عمیق‌تر در لایه‌ها فرو بروند بیشتر گم می‌شوند. اگر روی دسکتاپ پنج سطح کافی است، روی موبایل کمتر هدف بگیرید.
  • - محتوا و دسته را کنار هم نگه دارید: صفحهٔ خالی و لینکِ بی‌مقصد ممنوع. اگر کاربر روی یک آیتم ناوبری کلیک کرد، باید محتوای مرتبطی هم ببیند.
  • - تعداد لینک‌ها را منطقی نگه دارید: کاربر را زیر ده‌ها لینک دفن نکنید؛ در حالت ایده‌آل کمتر از ۱۰ لینک هم‌زمان نشان دهید.
  • - بر اساس محبوبیت اولویت‌بندی کنید: هرچه چیزی پرکاربردتر است، دسترسی به آن باید آسان‌تر باشد. فقط حواس‌تان باشد که این کار، یافتنِ ویژگی‌ها و محتوای تازه را سخت‌تر می‌کند؛ باید تعادلی برقرار کنید.
  • - برچسب‌ها را روشن و کوتاه بنویسید: این نکته روی صفحه‌های خیلی کوچک اهمیت مضاعف دارد.

۳) به دستگاه ورودی فکر کنید

گوشی با صفحه‌کلید فیزیکی به‌عنوان دستگاه ورودی غیرلمسی
© Asim18، لایسنس CC BY 3.0

همهٔ گوشی‌ها لمسی نیستند. برای کاربران لمسی، «قابلیت لمس» آیتم‌های ناوبری را حفظ کنید (دست‌کم حدود ۳۰ پیکسل تا انگشت راحت روی هدف بنشیند)؛ و برای کاربران غیرلمسی، میان‌بُرهای سریع بگذارید — مثلاً کلیدهای عددی ۰ تا ۹ به‌جای ۱ تا ۱۰، چون با چیدمان اعداد روی گوشی هماهنگ‌ترند.

۴) نشانه‌های ناوبری روشن بدهید

ناوبری روی موبایل پیچیده‌تر از دسکتاپ است، پس نشانه‌ها را صریح کنید: «خرده‌نان‌ها» (breadcrumbs) را واضح نمایش دهید، روی دکمهٔ بازگشت برچسب بگذارید تا کاربر بداند او را کجا می‌برد، و یک آیکون خانهٔ روشن و متمایز بگذارید که همیشه کاربر را به نقطهٔ آغاز برگرداند. جمعِ کلام اینکه معماری اطلاعات موبایل تفاوت دراماتیکی با دسکتاپ ندارد؛ فقط باید بیشتر تحقیق کنی که چه چیزی روی موبایل به‌درد کاربر می‌خورد و همه‌چیز را تا می‌توانی ساده و قابل‌مدیریت نگه داری.

جمع‌بندی

  • - معماری اطلاعات یعنی یافتنی و فهمیدنی‌کردن اطلاعات؛ همان نظم نامرئی که در فروشگاه، موزه یا اپلیکیشن مسیر آدم‌ها را هموار می‌کند.
  • - IA خوب از هم‌پوشانی سه دایره بیرون می‌آید: محتوا، بافت و کاربر — که هر سه در حال تغییر و به‌هم وابسته‌اند.
  • - چهار جزء اصلی آن سیستم‌های سازمان‌دهی، برچسب‌گذاری، ناوبری و جست‌وجو هستند.
  • - فرایند با شناخت کاربر و ارزیابی محتوا شروع می‌شود؛ مرتب‌سازی کارت به کشف مدل ذهنی کاربر کمک می‌کند و خروجی‌ها نقشهٔ سایت، وایرفریم و ناوبری‌اند.
  • - IA با استراتژی محتوا فرق دارد: یکی ساختار را می‌سازد، دیگری خودِ محتوا را مدیریت می‌کند.
  • - روی موبایل، سادگی حرف اول را می‌زند: هزینهٔ کلیک، اصل KISS، توجه به دستگاه ورودی و نشانه‌های ناوبری روشن.

منبع

این نوشته ترجمه‌ای آزاد است از مقالهٔ What is Information Architecture (IA)? منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF)، با ارجاع به آثار Louis Rosenfeld، Peter Morville و Jorge Arango.

متن نسخهٔ اصلی و دیاگرام‌های بنیاد طراحی تعامل تحت لایسنس CC BY-SA 4.0 منتشر شده و این ترجمه نیز با ذکر منبع ارائه می‌شود. تصاویر: دیاگرام معماری اطلاعات © بنیاد طراحی تعامل (CC BY-SA 4.0)، دیاگرام موبایل © Peter Morville (CC BY 2.0) و عکس دستگاه ورودی © Asim18 (CC BY 3.0). مقالهٔ اصلی نمونه‌ها و تصاویر بیشتری هم دارد (از جمله نقشهٔ سایت یک فروشگاه کتاب که با لایسنس محدود منتشر شده) که در نسخهٔ اصلی قابل مشاهده‌اند.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - معماری اطلاعات یعنی چه؟
  • - سه دایره: محتوا، بافت، کاربر
  • - اجزای معماری اطلاعات
  • - IA و طراحی تجربهٔ کاربری
  • - مرتب‌سازی کارت
  • - IA در برابر استراتژی محتوا
  • - معماری اطلاعات در عصر موبایل

برچسب‌ها

  • معماری اطلاعات
  • ناوبری
  • UX
  • ترجمه