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

نمودار درخت مخروطی (Cone Tree Diagram) چیست؟

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

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

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

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

درخت مخروطی چیست؟

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

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

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

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

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

مسئله‌ای که قرار بود حل شود

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

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

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

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

آناتومی: از ریشه تا زیرمخروط

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

• - ۱. ریشه در بالا: بالاترین تراز سلسله‌مراتب به سقف اتاق مجازی وصل است و نقطهٔ شروع خواندن است.
• - ۲. قاعدهٔ مخروط: فرزندان یک گره، هم‌فاصله از هم روی یک دایره می‌نشینند. هیچ فرزندی جایگاه ممتازی ندارد.
• - ۳. زیرمخروط: هر فرزند خودش نوک یک مخروط تازه است. ساختار بازگشتی است و همین آن را برای هر عمقی قابل تعمیم می‌کند.
• - ۴. کوچک‌شدن تدریجی: قطر مخروط در هر تراز کم می‌شود. بدون این قاعده، ترازهای پایین از قاب بیرون می‌زنند.
• - ۵. چرخش تعاملی: با انتخاب یک گره، مخروط می‌چرخد تا آن شاخه به جلو بیاید. چرخش حدود یک ثانیه طول می‌کشد، و این عدد اتفاقی نیست.

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

چرا سه‌بعدی؟ استدلال ادراکی پارک

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

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

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

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

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

جزء سوم، و مهم‌ترینشان، انیمیشن بود. چرخش یک‌ثانیه‌ای برای زیبایی نبود. اگر یک گره ناگهان جای دیگری ظاهر شود، مغز آن را شیء تازه‌ای فرض می‌کند و کاربر جایش را گم می‌کند. اما اگر همان گره را ببینید که می‌چرخد و می‌رود، مغز آن را همان شیء می‌داند. به این خاصیت «ثبات شیء» می‌گویند.

پس چرا همه‌گیر نشد؟

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

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

سه سازوکار مشخص این شکست را توضیح می‌دهند:

• - ۱. هم‌پوشانی: گره‌های عقب پشت گره‌های جلو پنهان می‌شوند. همان بُعد سومی که قرار بود فضا بخرد، داده را قایم می‌کند. این تناقض، هستهٔ ماجراست.
• - ۲. برچسب‌های ناخوانا: متن در پرسپکتیو کوچک و کج می‌شود. ارزش یک درخت عمدتاً در برچسب‌هایش است، نه در شکل هندسی‌اش.
• - ۳. هزینهٔ چرخش: در درخت تخت کاربر با چشم پویش می‌کند. در درخت مخروطی باید بچرخاند، و چرخش یعنی یک تعامل به‌ازای هر نگاه.

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

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

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

چه چیزی از درخت مخروطی باقی ماند

شکل درخت مخروطی مُرد، اما ایده‌هایش نمردند. دو تایشان امروز در همه‌جا هستند.

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

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

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

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

درس کلی‌تر هم همین‌جاست. بُعد سوم وقتی می‌ارزد که داده خودش فضایی باشد: بدن انسان، ساختمان، مولکول، نقشهٔ شهر. برای دادهٔ انتزاعی مثل یک شبکهٔ پیچیده یا ساختار پوشه‌ها، هزینهٔ سه‌بعدی معمولاً از سودش بیشتر است.

در بافت فارسی

اگر وسوسه شدید چنین چیزی را برای یک محصول فارسی بسازید، چهار نکته را پیش از شروع در نظر بگیرید.

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

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

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

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

جمع‌بندی

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

ارزش دانستنش هم در همین است. استدلالش از نتیجه‌اش بهتر بود، و همان استدلال هنوز درست است. ضمناً الگوی شکستش تکرارشونده است: هر بار کسی پیشنهاد می‌کند دادهٔ انتزاعی را سه‌بعدی کنیم، همان سه مشکل برمی‌گردند.

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