منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۹ دقیقه

تصویرسازی دادهٔ سلسله‌مراتبی (Hierarchical Data Visualization) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

یک پوشه در پوشهٔ دیگر است، و آن هم در یکی دیگر. این ساده‌ترین ساختار داده‌ای است که هر روز با آن کار می‌کنیم — و کشیدنش روی صفحه، از آنچه به‌نظر می‌رسد سخت‌تر است.

تعریف

تصویرسازی دادهٔ سلسله‌مراتبی، دادهٔ سلسله‌مراتبی را با اصل دربرگیری نمایش می‌دهد، نه با اصل اتصال.

و دادهٔ سلسله‌مراتبی خودش شکل خاصی از دادهٔ شبکه‌ای است.

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

و همین تمایز دربرگیری از اتصال، مهم‌ترین نکتهٔ این بحث است. در دادهٔ شبکه‌ای می‌پرسیم «چه چیزی به چه چیزی وصل است؟» و در دادهٔ سلسله‌مراتبی می‌پرسیم «چه چیزی داخل چه چیزی است؟»

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

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

و همین است که نقشهٔ درختی را ممکن می‌کند. در دادهٔ شبکه‌ای نمی‌شود چنین کاری کرد، چون یک گره می‌تواند به چند گره تعلق داشته باشد — و یک مستطیل نمی‌تواند هم‌زمان داخل دو مستطیل باشد.

پنج شکل نمایش

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

و اصطلاح «نمودار درختی» را نوآم چامسکی در ۱۹۶۵ در کتاب «جنبه‌هایی از نظریهٔ نحو» ساخت.

نمودار درخت مخروطی. مدل سه‌بعدی سلسله‌مراتب، که در زیراکس پارک در دههٔ ۱۹۹۰ توسعه یافت.

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

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

نمودار نقشهٔ درختی. اختراع بن اشنایدرمن از دانشگاه مریلند در ۱۹۹۰.

از مستطیل‌های تودرتو استفاده می‌کند که اندازه‌شان متناسب با مقدار داده است. کل فضای موجود را کارآمد به‌کار می‌گیرد، و برای مقایسهٔ گره‌ها و یافتن الگو مفید است.

سامانهٔ فایل و پوشه. رایج‌ترین نمونهٔ روزمرهٔ سلسله‌مراتب، با نمایش بصری تعاملی و جایگزین متنی در پوستهٔ فرمان.

کدام را کِی

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

و انتخاب میانشان به یک چیز برمی‌گردد: می‌خواهید ساختار را نشان دهید یا اندازه را؟

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

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

و یک قاعدهٔ کمکی هم دارد: نمودار درختی با عمق زیاد بهتر کار می‌کند و نقشهٔ درختی با عرض زیاد.

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

راهنمای طراحی

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

و چارچوب پنج‌گامی ریکاردو مازا هم مسیر طراحی را می‌دهد:

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

و پشتوانهٔ ادراکی‌اش هم یک عدد است: مغز می‌تواند یک تصویر کامل را در کمتر از ۱۳ میلی‌ثانیه پردازش کند — بسیار سریع‌تر از خواندن واژه و عدد.

و ارزش دارد این عدد را درست بخوانیم، چون اغلب بد استفاده می‌شود.

سیزده میلی‌ثانیه، زمان تشخیص است، نه زمان فهم. مغز در آن مدت می‌فهمد که تصویری دیده — و اینکه آن تصویر چه می‌گوید، بسیار بیشتر طول می‌کشد.

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

پس اگر کاربر شما دنبال یک مقدار مشخص می‌گردد، نمودار به او کمکی نمی‌کند. نمودار وقتی می‌ارزد که پرسش «کدام؟» یا «چه شکلی؟» باشد، نه «چقدر؟»

محدودیت‌ها

و صریح‌ترین محدودیتش این است: نمودار درختی می‌تواند به‌سرعت آن‌قدر پیچیده شود که دیگر کارکردی نداشته باشد. و همین انگیزهٔ ساختن درخت گیاه‌شناختی بود.

و محدودیت دوم فیزیکی است: نمایشگر تخت برای تعداد زیاد گره جا ندارد — که درخت مخروطی برای همین ساخته شد.

و دو محدودیت دیگر هم هست که ارزش افزودن دارد.

سه: نقشهٔ درختی مقایسهٔ دقیق را ممکن نمی‌کند. چشم انسان در مقایسهٔ طول خوب است و در مقایسهٔ مساحت بد. دو مستطیل با نسبت ۱ به ۱٫۵ در نقشهٔ درختی تقریباً هم‌اندازه به‌نظر می‌رسند.

پس نقشهٔ درختی برای دیدن الگو عالی است و برای خواندن مقدار ضعیف. اگر عدد دقیق مهم است، برچسب بگذارید.

چهار: سلسله‌مراتب عمیق، تعامل لازم دارد. هیچ نمایش ایستایی نمی‌تواند ده سطح را هم‌زمان خوانا نگه دارد. و اگر تعامل ممکن نیست — مثلاً در یک گزارش چاپی — باید سلسله‌مراتب را قبل از تصویرسازی ساده کنید، نه بعدش.

سه اشتباه رایج

و در عمل، سه چیز بیشتر از بقیه این نمودارها را خراب می‌کند.

یک: رنگ‌آمیزی بی‌معنا. در نقشهٔ درختی، رنگ یک بُعد اضافه است که رایگان در دسترس شماست — و اغلب هدر می‌رود.

رنگ‌های تصادفی برای تفکیک بخش‌ها، هیچ اطلاعاتی اضافه نمی‌کنند (مستطیل‌ها خودشان از هم جدا هستند). و همان رنگ اگر به یک متغیر دوم وصل شود — رشد، سود، تغییر نسبت به دورهٔ قبل — نمودار را از یک‌بُعدی به دوبُعدی می‌برد.

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

و قاعدهٔ عملی‌اش این است: دو سطح در هر لحظه، به‌علاوهٔ مسیری که نشان دهد کجا هستید.

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

و همین دربارهٔ نمودار درختی هم صادق است: ترتیب فرزندها اگر معنایی نداشته باشد، باید الفبایی یا عددی باشد — نه ترتیبی که پایگاه داده برگردانده.

در بافت فارسی

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

و برای نمودار عمودی، مسئله‌ای نیست: ریشه در بالا و شاخه در پایین، جهت‌مستقل است. پس اگر شک دارید، عمودی امن‌تر است.

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

و راه‌حلش کوچک‌کردن قلم نیست — که خوانایی خط فارسی را زودتر از لاتین از بین می‌برد. راه‌حل، کوتاه‌کردن خودِ برچسب و آوردن نام کامل در راهنمای شناور است.

سه: اعداد در برچسب، جهت را می‌شکنند. «فروش: ۱۲۳٬۴۵۶ تومان» داخل یک مستطیل کوچک، اگر جهت‌دهی درست نباشد، به‌هم می‌ریزد.

و همان‌طور که در رابط گرافیکی نوشتم، این رایج‌ترین باگ بصری رابط‌های فارسی است — و در تصویرسازی داده، که فضا تنگ است، بیشتر دیده می‌شود.

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

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

جمع‌بندی

• - تصویرسازی دادهٔ سلسله‌مراتبی از اصل دربرگیری استفاده می‌کند، نه اتصال · شبکه می‌پرسد چه به چه وصل است و سلسله‌مراتب می‌پرسد چه داخل چه است
• - ساختارش: یک ریشه با دست‌کم یک فرزند، و هر فرزند با صفر یا چند فرزند
• - پنج شکل: نمودار درختی (اصطلاحش از چامسکی، ۱۹۶۵) · درخت مخروطی (زیراکس پارک، دههٔ ۱۹۹۰) · درخت گیاه‌شناختی (آیندهوون) · نقشهٔ درختی (اشنایدرمن، دانشگاه مریلند، ۱۹۹۰) · و سامانهٔ فایل و پوشه
• - انتخاب میانشان: ساختار مهم است یا اندازه؟ · درختی برای عمق زیاد، نقشهٔ درختی برای عرض زیاد
• - راهنما: قوانین گشتالت · ویژگی‌های پیشاتوجهی · سه سطح تعامل · آزمون با کاربر · و چارچوب پنج‌گامی مازا
• - مغز یک تصویر کامل را در کمتر از ۱۳ میلی‌ثانیه پردازش می‌کند
• - محدودیت: پیچیده‌شدن سریع نمودار درختی · محدودیت نمایشگر تخت · ضعف چشم در مقایسهٔ مساحت · و نیاز سلسله‌مراتب عمیق به تعامل
• - و در فارسی: نمودار عمودی جهت‌مستقل و امن‌تر است · برچسب فارسی بلندتر است پس کوتاهش کنید نه قلم را · جهت‌دهی عدد در برچسب · و سلسله‌مراتب‌های عمیق‌تر ما، نقشهٔ درختی را انتخاب اشتباهی می‌کنند