خلاصه: Treemap یک تجسم داده های پیچیده و مبتنی بر منطقه برای داده های سلسله مراتبی است که تفسیر دقیق آن دشوار است. در بسیاری از موارد ، تجسم ساده تر مانند نمودارهای نوار ارجح است.
توسط صفحه Laubheimer
در تاریخ 2019-09-29 29 سپتامبر 2019
مباحث:
- طراحی برنامه کاربردی طراحی ،،،
این مقاله را به اشتراک بگذارید:
Treemaps یک تکنیک تصویری داده برای مجموعه داده های بزرگ و سلسله مراتبی است. آنها دو نوع اطلاعات را در داده ها ضبط می کنند: (1) مقدار نقاط داده های فردی.(2) ساختار سلسله مراتب.
تعریف: Treemaps تجسم برای داده های سلسله مراتبی است. آنها از یک سری مستطیل های تو در تو در اندازه متناسب با مقدار داده مربوطه ساخته شده اند. یک مستطیل بزرگ شاخه ای از یک درخت داده را نشان می دهد ، و به مستطیل های کوچکتر تقسیم می شود که نشان دهنده اندازه هر گره در آن شاخه است.
یک نمودار درخت سلسله مراتبی ، ساختار S& P 500 را نشان می دهد. این ساختار اساس Treemap است که در زیر نشان داده شده است. نقشه Finviz از بازار از یک treemap متناسب با ساختار درخت مجموعه داده S& P 500 که در بالا به تصویر کشیده شده است ، استفاده می کند. موارد رنگی به رنگ زرد و مشخص شده (a) ، (b) ، (c) ، (d) مطابق با مواردی است که با آن حروف در نمودار درخت در بالا نشان داده شده است.(الف) کل S& P 500 را نشان می دهد و همان ریشه درخت است. مستطیل (ب) بخش فناوری است. در بخش فناوری ، یک مستطیل کوچکتر تجهیزات ارتباطی (C) است. سرانجام ، در مستطیل تجهیزات ارتباطی ، همه مستطیل های کوچکتر نمایانگر شرکت های فردی در آن بخش هستند ، مانند سیستم های سیسکو (D) ، Qualcomm و غیره. رنگ هر مستطیل نشان می دهد که آیا مقدار آن سهام به سمت بالا یا پایین حرکت می کند - قرمز بسیار روشن نشانگر یک تغییر بزرگ به سمت پایین است ، و سبز بسیار روشن نشانگر تغییر بزرگ به سمت بالا است. اندازه هر مستطیل نشان دهنده سرمایه گذاری بازار (ارزش) آن سهام ، صنعت یا بخش است. در پایین ترین سطح سلسله مراتب (شرکت های انفرادی) ، Google (E) دارای کلاه بازار بزرگتر از Facebook (F) است ، بنابراین مستطیل های نسبی آنها به اندازه مناسب است. یک سطح در سلسله مراتب (صنعت) ، کل ارائه دهندگان اطلاعات اینترنتی (G) از نرم افزار کاربردی (H) بزرگتر است و مستطیل های آنها به اندازه مناسب است تا نشان دهد که تفاوت ها نیز وجود دارد.
کاربردهای کلیدی Treemaps
Treemaps معمولاً در داشبورد داده ها یافت می شود. طراحان اغلب آنها را برای اضافه کردن انواع بصری در داشبورد متراکم انتخاب می کنند. با این حال ، Treemaps یک تجسم پیچیده است و موانع بسیاری را برای درک سریع ارائه می دهد (که این نیاز اصلی برای هر اطلاعاتی است که در داشبورد نمایش داده می شود).
Treemaps اغلب برای داده های فروش استفاده می شود ، زیرا آنها اندازه های نسبی از دسته بندی داده ها را ضبط می کنند و امکان درک سریع مواردی را که در هر گروه مشارکت زیادی دارند ، امکان پذیر می کند. رنگ می تواند مواردی را که در مقایسه با خواهران و برادران خود از همان دسته قرار دارند ، تحت تأثیر قرار دهند (یا بیش از حد عملکرد). به همین دلیل است که نقشه بازار Finviz نمونه ای ماندگار از Treemaps است: به کاربران این امکان را می دهد تا شرکت هایی را که بهتر از همسالان صنعت خود هستند ، شناسایی کنند ، حتی اگر ارزش کلی سهام آنها بسیار ناچیز باشد.
وقتی داده های سلسله مراتبی شما دارای 2 بعد اصلی هستند که می خواهید تجسم کنید ، Treemaps به خوبی کار می کند:
- یک مقدار کمی مثبت ، که به عنوان منطقه مستطیل بیان می شود (از آنجا که منطقه نمی تواند منفی باشد ، شما نمی توانید از Treemaps برای تجسم متغیرهایی مانند افزایش/از دست دادن استفاده کنید ، که می تواند مقادیر مثبت و منفی داشته باشد.)
- یک مقدار کمی طبقه بندی یا دوم ، که به عنوان رنگ مستطیل های فردی بیان می شود. اگر از رنگ برای بیان مقدار کمی استفاده می شود ، به شدت تشویق می شود که فقط از یک رنگ استفاده کنید (اگر همه اعداد مثبت باشند) یا دو رنگ (یکی برای منفی و دیگری برای مثبت) ، و شدت رنگ را برای بیان ارزش دقیق تغییر می دهدبشراز آنجا که انسان رنگ ها را برای داشتن نظم ذاتی درک نمی کند ، ما اکیداً توصیه می کنیم که از چندین رنگ برای نشان دادن طیف وسیعی از اعداد استفاده نکنید.
اگر رنگ یک متغیر طبقه بندی شده را نشان می دهد ، استفاده از رنگ های مختلف برای مقادیر مختلف ممکن است ، زیرا نیازی به کاربران نیست که یک رنگ خاص را به عنوان "بالاتر" یا "پایین" از دیگری تفسیر کنند. با این حال ، مانند هر استفاده از رنگ در تجسم داده ، محدودیت در تعداد رنگ ها به شدت توصیه می شود!
صرف نظر از نحوه استفاده از رنگ در یک treemap ، اسکان دسترسی زیر را برای کاربران کور رنگ ایجاد کنید:
- از استفاده از هر دو رنگ قرمز و سبز در همان treemap (به ویژه برای مقادیری که باید سریع متمایز شوند) خودداری کنید.
- از پالت های رنگی استفاده کنید که برای افراد کور رنگ بی خطر است.
- طراحی خود را با ابزاری آزمایش کنید که به شما امکان می دهد تجربه کاربر کور رنگ را شبیه سازی کنید
- برای جنبه داده ضبط شده از طریق رنگ از یک سیگنال ثانویه (مانند متن در مستطیل یا ظاهر شدن در شناور) استفاده کنید
در اینجا چند دستورالعمل دیگر برای ایجاد Treemaps قابل استفاده وجود دارد:
- مرزهای بصری متمایز در اطراف دسته های سطح بالاتر به کاربران کمک می کند تا گروه های سطح بالا را شناسایی کنند. تضمین می کند که افراد می توانند برچسب های داخل مستطیل های Treemap را بخوانند.
- یک حالت منتخب بصری متمایز ، هنگامی که کاربران یک مستطیل را معلق می کنند (یا ضربه می زنند) ، به کاربران کمک می کند تا تأیید کنند که به نقطه داده مناسب می پردازند.
- جزئیات بیشتر در مورد یک مستطیل انتخاب شده (ظاهر در یک روکش) ، مانند نام ، مقدار متغیرها به کاربران امکان می دهد تا داده ها را وارد کنند.

یک مثال خوب از استفاده از یک مرز بصری متمایز در اطراف یک بخش منتخب از Finviz Treemap ، به همراه جزئیات بیشتر در مورد این بخش در یک پنجره بازشو.
نزونه های Treemaps
مقایسه ها دشوار است
مغز انسان قادر به پردازش برخی از اطلاعات بصری به صورت مقدماتی است: ویژگی هایی مانند طول را می توان به سرعت و با دقت درک کرد و مقادیر برای چنین ویژگی هایی را می توان تقریباً با هیچ تلاش شناختی مقایسه کرد. متأسفانه ، منطقه یکی از این ویژگی های پیش از این نیست. Treemaps برای رمزگذاری مقدار یک متغیر به منطقه (و احتمالاً رنگ) متکی است ، و بنابراین ، اگرچه Treemaps می تواند روابط کلی را در یک مجموعه داده بزرگ منتقل کند ، اما آنها برای کارهای مربوط به مقایسه دقیق مناسب نیستند.
این داشبورد شامل یک treemap است که سطح تولید محصولات مختلف تولید شده در چهار کارخانه را نشان می دهد. از رنگ برای تعیین کارخانه های مختلف استفاده می شود و اندازه برای نشان دادن خروجی های تولید استفاده می شود. در حالی که این تجسم داده های زیادی را در یک فضای کوچک فشرده می کند ، اطلاعاتی که آن را به طور کارآمد منتقل می کند بسیار سطح بالایی است-برای مثال ، شناسایی مجریان برتر در هر گروه آسان است. با این حال ، تعیین پنج مجری برتر کلی دشوار و وقت گیر است. نمودار نوار این اطلاعات را با دقت و سریعتر از Treemap ارتباط می دهد. نمای بزرگنمایی از تصویر داشبورد در بالا: کدام بزرگتر است ، (الف) یا (ب)؟از آنجا که این تجسم از منطقه برای برقراری ارتباط با اندازه متغیر استفاده می کند ، به راحتی امکان مقایسه خاص بین موارد را فراهم نمی کند. انجام این مقایسه نیاز به معلق در یک بخش دارد ، منتظر ظاهر شدن یک ابزار با این مقدار است و سپس نگه داشتن آن اطلاعات در حافظه کوتاه مدت شخص در حالی که همان فرآیند را در بخش دیگر تکرار می کنید.
برای داده هایی که سلسله مراتبی نیستند ناکارآمد است
اگر داده های شما سلسله مراتبی نباشد ، نباید از Treemaps استفاده شود: در آن موقعیت ها ، آنها از نظر عملکردی با نمودار پای معادل هستند-به سادگی یک رابطه قطعات به کل را نشان می دهند.(نمودارهای پای نیز تجسم خوبی نیستند - مانند Treemaps ، آنها بر اساس منطقه و زاویه ، ویژگی هایی که از نظر پیش بینی کننده نیستند است. آنها فقط برای برقراری ارتباط استفاده می شوند که یک یا دو مورد بسیار بزرگتر از بقیه هستند ، و نه برای مقایسه نسبیاندازه برش های پای.)
از نظر بصری قریب به اتفاق
Treemaps اغلب برای تجسم مجموعه داده های بسیار بزرگ ، با صدها یا هزاران مورد استفاده می شود. این مقدار از اطلاعات می تواند از نظر بصری کاربران را تحت الشعاع قرار دهد - Treemap تبدیل به دریایی از مستطیل های کوچک می شود ، بسیار کوچک برای داشتن یک برچسب متن. علاوه بر این ، در Treemaps پیچیده ، سلسله مراتب کلی به راحتی می تواند غیرقابل تشخیص باشد. راه حل یک treemap کوسن است که از بافت استفاده می کند تا هر مستطیل در مرکز مانند یک کوسن "بلند" شود و به لبه ها برسد. این اثر بصری از تمایل انسان به تفسیر این نوع سایه ها به عنوان یک سطح بلند استفاده می کند ، و این باعث می شود سریعتر برای شناسایی مستطیل های مختلف.

در یک Treemap کوسن ، هر مستطیل از لبه ها به مرکز شیب کمی دارد. این اثر به شناسایی بصری موارد کوچک و همچنین دسته های بزرگتر متشکل از چندین مستطیل کمک می کند.
نه برای درختان متعادل
Treemaps همچنین گزینه های ضعیفی برای مجموعه داده ها با موارد نزدیک به اندازه (یعنی درختان متعادل) است. در این موارد ، هدف اصلی یک Treemap (شناسایی سریع بزرگترین موارد در یک گروه خاص) بسیار دشوار می شود. سرانجام ، الگوریتم استاندارد مورد استفاده برای ایجاد Treemap تلاش می کند تا مستطیل ها را تا حد امکان مربع بسازد تا مقایسه اندازه ها کمی آسان تر و مستعد خطا باشد. با این حال ، در تجسم های تعاملی که در آن تغییر با گذشت زمان نشان داده می شود ، مصنوعات این الگوریتم این است که مستطیل ها ممکن است با تغییر اندازه آنها حرکت کنند. در نتیجه ، پیگیری یک مورد خاص به مرور زمان بسیار دشوار می شود.
گزینه های دیگری برای treemaps
در بسیاری از موارد ، Treemaps را می توان با نمودارهای نوار جایگزین کرد (برای داده هایی که یک متغیر کمی و یک متغیر طبقه بندی دارند) یا توطئه های پراکندگی (برای داده هایی با دو متغیر کمی) که نشان دهنده متغیرهای مورد علاقه است.
با این حال، این فرآیند نیاز به درک وظایف اصلی کاربران شما دارد. برای مدیرانی که تلاش می کنند محصولاتی را شناسایی کنند که هم حجم فروش بالایی دارند و هم حاشیه سود زیادی دارند تا آنها را به شدت تبلیغ کنند، یک پراکندگی دوبعدی بهتر از یک نقشه درختی است. اما اگر کاربر در درجه اول به فروش کلی اهمیت می دهد، نمودار میله ای مرتب شده انتخاب بهتری نسبت به نقشه درختی است.(مرتب سازی اغلب نادیده گرفته می شود، اما یکی از ساده ترین راه ها برای آسان کردن شناسایی مواردی با بزرگترین و کوچک ترین مقادیر است.)

نمودار پراکندگی اغلب انتخاب بهتری نسبت به نقشه درختی برای تجسم داده ها با 2 متغیر کمی است، زیرا سیستم بینایی انسان می تواند به سرعت و با دقت موقعیت دوبعدی را تشخیص دهد. این نمودار پراکنده همچنین یک متغیر دسته بندی سوم را اضافه می کند که به صورت رنگ بیان می شود.
خلاصه
در حالی که نقشه درختی می تواند برای تجسم انواع خاصی از مجموعه داده های پیچیده و سلسله مراتبی مفید باشد، اغلب تفسیر آنها دشوار است. اگر از نقشه درختی استفاده می کنید، دسته بندی های مختلف سطح بالا را به صورت بصری جدا کنید، از استفاده از چندین رنگ برای بیان مقادیر عددی خودداری کنید و با در نظر گرفتن کاربران کوررنگ طراحی کنید. آخرین و مهم تر از همه، درک کنید که کاربران شما باید با داده های شما چه کاری انجام دهند و در نظر بگیرید که آیا تجسم های دیگر (مانند نمودار میله ای یا نمودار پراکندگی) می توانند جایگزین یا تقویت نقشه درختی شوند.
منابع
بن اشنایدرمن: "تجسم درخت با نقشه های درختی: رویکرد پر کردن فضا دو بعدی"، ACM Transactions on Graphics، 11،1، 92-99.(1992)
Jarke J. van Wijk و Huub van de Wetering: "Cushion Treemaps: Visualization of Hierarchical Information," IEEE Symposium on Information Visualization (INFOVIS'99)، سانفرانسیسکو، (25-26 اکتبر 1999)
- این مقاله را به اشتراک بگذارید: ||
درباره نویسنده
Page Laubheimer یک متخصص ارشد تجربه کاربری در گروه Nielsen Norman است. او به سازمان ها کمک می کند تا برای دستیابی به اهداف استراتژیک خود، بر ارائه تجربه کاربری برجسته تمرکز کنند. او تخصص خود را در قابلیت استفاده از وب سایت با تجربه مدیریت تیمی از طراحان و توسعه دهندگان ترکیب می کند تا با موفقیت بهترین شیوه های UX را در طیف وسیعی از پلتفرم ها پیاده سازی کند.
در خبرنامه ایمیل Alertbox ما مشترک شوید:
آخرین مقالات در مورد قابلیت استفاده رابط، طراحی وب سایت و تحقیقات UX از گروه نیلسن نورمن.
پلتفرمهای تجاری...
ما را در سایت پلتفرمهای تجاری دنبال می کنید
برچسب :
نویسنده : حامد بهداد
بازدید : 59
تاريخ : شنبه
27 اسفند
1401 ساعت: 17:55