Drill-through، Tooltip، Bookmark، Buttons و Navigation پیشرفته در Power BI

شروع جلسه؛ گزارش را از صفحه ثابت به تجربه تعاملی تبدیل کنیم

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

این فصل درباره ساخت یک Journey داخل Report است؛ نه فقط اضافه کردن چند Button.

۴۰.۱. Interaction Architecture

قبل از ساخت Bookmark و Button، مسیر کاربر را طراحی کن: از کجا شروع می‌کند؟ چه چیزی را انتخاب می‌کند؟ جزئیات را کجا می‌بیند؟ چگونه برمی‌گردد؟

۴۰.۲. مسیر نمونه

۴۰.۳. Drill-down

Drill-down داخل همان Visual و Hierarchy اتفاق می‌افتد؛ مثلاً Year → Quarter → Month.

۴۰.۴. Drill-through

Drill-through کاربر را به یک Page دیگر می‌برد و Context انتخاب‌شده را همراه خودش می‌برد؛ مثلاً از Customer List به Customer 360.

۴۰.۵. Drill-down vs Drill-through

۴۰.۶. ساخت صفحه Drill-through

یک Page جدید بساز، Field موردنظر مثل CustomerKey یا ProductKey را در Drill-through Filters قرار بده و Visualهای جزئیات را بر اساس همان Context طراحی کن.

۴۰.۷. Customer 360

۴۰.۸. Keep all filters

اگر Keep all filters فعال باشد، Filterهای دیگر صفحه مبدأ هم می‌توانند به صفحه Drill-through منتقل شوند. باید تصمیم بگیری این رفتار برای Journey کاربر درست است یا نه.

۴۰.۹. Context بیش از حد

اگر کاربر از Region=North و Year=2026 به Customer 360 می‌رود، آیا می‌خواهی فقط رفتار همان سال/Region را ببیند یا Lifetime Customer را؟ این یک تصمیم تحلیلی است.

۴۰.۱۰. Back Button

صفحه Drill-through باید راه برگشت واضح داشته باشد. Button برگشت را در جای ثابت و قابل پیش‌بینی قرار بده.

۴۰.۱۱. Product Drill-through

از Product Ranking می‌توان به Product 360 رفت: Sales، Profit، Customer Count، Trend، Region و Inventory/Operations در صورت وجود.

۴۰.۱۲. Drill-through از Matrix

کاربر می‌تواند روی Row مناسب Context Menu باز کند و Drill-through را انتخاب کند؛ Field مقصد باید با Context مبدأ سازگار باشد.

۴۰.۱۳. Drill-through Button

می‌توان Button را طوری تنظیم کرد که بعد از انتخاب یک Data Point، کاربر را به Drill-through Page ببرد و UX واضح‌تری نسبت به Right-click ایجاد کند.

۴۰.۱۴. Button State

Button می‌تواند Default، Hover، Press و Disabled State داشته باشد. حالت Disabled باید به کاربر بفهماند هنوز Selection لازم انجام نشده.

۴۰.۱۵. Report Page Tooltip

Tooltip Page یک صفحه کوچک گزارش است که هنگام Hover روی Data Point نمایش داده می‌شود.

۴۰.۱۶. Tooltip چه چیزی نشان دهد؟

اطلاعات ثانویه: مثلاً روی Customer Bar، Sales، Profit، Margin، Last Purchase و Segment.

۴۰.۱۷. Tooltip نباید صفحه دوم باشد

Tooltip برای Context سریع است. اگر ۱۵ Visual داخل Tooltip گذاشتی، بهتر است Drill-through Page بسازی.

۴۰.۱۸. Tooltip Context

Tooltip بر اساس Data Point که روی آن Hover شده Filter می‌شود؛ بنابراین Measureهای داخل آن باید Context-aware باشند.

۴۰.۱۹. Tooltip KPI

۴۰.۲۰. Tooltip Design

سایز کوچک، عنوان واضح، ۳ تا ۵ Metric و یک Mini Trend معمولاً کافی است.

۴۰.۲۱. Dynamic Tooltip Title

Tooltip Title =
"جزئیات — " &
SELECTEDVALUE(DimCustomer[CustomerName], "مشتری")

۴۰.۲۲. Bookmark چیست؟

Bookmark یک State از Report را ذخیره می‌کند؛ می‌تواند Page، Filter/Data State، Display/Visibility و بعضی حالت‌های View را ثبت کند.

۴۰.۲۳. کاربردهای Bookmark

باز/بسته کردن Filter Panel، تغییر Story View، ساخت Help Overlay، جابه‌جایی بین چند حالت Visual و ایجاد Navigation سفارشی.

۴۰.۲۴. Bookmark + Selection Pane

۴۰.۲۵. Selection Pane

Selection Pane مشخص می‌کند کدام Visual/Shape/Button Visible است. برای ساخت Panel و Overlay ابزار کلیدی است.

۴۰.۲۶. Group کردن عناصر

Shape، Slicer، Title و Buttonهای یک Filter Panel را Group کن تا مدیریت Visibility ساده‌تر شود.

۴۰.۲۷. Bookmark Filter Panel

دو Bookmark بساز: Filters Open و Filters Closed. Visibility گروه Panel را در هر حالت ذخیره کن.

۴۰.۲۸. Data option در Bookmark

اگر Data روشن باشد، Bookmark می‌تواند وضعیت Filter/Slicer را هم ذخیره کند. برای Bookmarkهایی که فقط Visibility را عوض می‌کنند، این رفتار ممکن است Selection کاربر را ناخواسته Reset کند.

۴۰.۲۹. Display option

برای Show/Hide عناصر، Display بخش مهم Bookmark است.

۴۰.۳۰. Current Page

Bookmark می‌تواند Page را هم در State نگه دارد. اگر فقط یک تعامل داخل صفحه می‌خواهی، تنظیمات Bookmark را آگاهانه انتخاب کن.

۴۰.۳۱. Selected Visuals

به جای اینکه Bookmark روی همه Visualها اثر بگذارد، می‌توان فقط Visualهای انتخاب‌شده را هدف قرار داد؛ برای Interactionهای پیچیده بسیار مفید است.

۴۰.۳۲. All Visuals vs Selected Visuals

۴۰.۳۳. Bookmark Naming

اسم‌هایی مثل Bookmark 1 و Bookmark 2 در پروژه بزرگ دردسر می‌شوند. از نام‌هایی مثل UI_Filter_Open و UI_Filter_Close استفاده کن.

۴۰.۳۴. Bookmark Navigator

Bookmark Navigator می‌تواند مجموعه Bookmarkها را به Navigation قابل کلیک تبدیل کند.

۴۰.۳۵. Page Navigator

Page Navigator برای ساخت Menu بین Pageها مفید است و نگهداری آن از Buttonهای دستی متعدد ساده‌تر می‌شود.

۴۰.۳۶. Navigation Architecture

۴۰.۳۷. Button Action

Button می‌تواند Page Navigation، Bookmark، Drill-through، Back و Actionهای پشتیبانی‌شده دیگر داشته باشد.

۴۰.۳۸. Button Label

به جای Icon مبهم، در Actionهای مهم Label واضح مثل «جزئیات مشتری» یا «بازگشت» اضافه کن.

۴۰.۳۹. Icon-only

Icon تنها زمانی مناسب است که معنی آن برای مخاطب واضح باشد؛ مثل Home یا Back در Design System ثابت.

۴۰.۴۰. Hover UX

Hover State کمک می‌کند کاربر بفهمد عنصر قابل کلیک است.

۴۰.۴۱. Tooltip روی Button

برای Buttonهای کمتر واضح، Tooltip کوتاه توضیح بده که کلیک چه کاری می‌کند.

۴۰.۴۲. Reset Filters

یک Bookmark می‌تواند Default Filter State را ذخیره کند و Button Reset Filters آن را فعال کند.

۴۰.۴۳. خطر Reset Bookmark

اگر بعداً Slicer جدید اضافه کردی ولی Bookmark را Update نکردی، Reset ممکن است State ناقص ایجاد کند. Bookmarkها بخشی از QA هستند.

۴۰.۴۴. Help Overlay

با Shape نیمه‌شفاف، Text و Bookmark می‌توان راهنمای استفاده را روی صفحه باز و بسته کرد.

۴۰.۴۵. Help Overlay چه بگوید؟

تعریف KPI، معنی رنگ‌ها، روش Drill، زمان Refresh و راهنمای کوتاه Interaction.

۴۰.۴۶. Toggle Visual

می‌توان با Bookmark بین دو Visual در یک فضای مشترک جابه‌جا شد؛ مثلاً Sales Trend و Profit Trend.

۴۰.۴۷. اما Field Parameter بهتر نیست؟

در بسیاری از سناریوهای تغییر Metric/Dimension، Field Parameters تمیزتر از مخفی/نمایان کردن چند Visual هستند. Session 41 دقیقاً روی این موضوع تمرکز می‌کند.

۴۰.۴۸. Bookmark Story

برای ارائه مدیریتی می‌توان Bookmarkهایی مثل Overview، Sales Risk و Customer Risk ساخت و با ترتیب مشخص داستان گزارش را ارائه کرد.

۴۰.۴۹. Personal Bookmark

در Power BI Service کاربران می‌توانند در سناریوهای پشتیبانی‌شده View شخصی خودشان را ذخیره کنند؛ این موضوع با Bookmark طراحی‌شده توسط Report Author متفاوت است.

۴۰.۵۰. Persistent Filters

در Service ممکن است تجربه کاربر با Filterهای قبلی‌اش ادامه پیدا کند. Default/Reset UX را طوری طراحی کن که کاربر بتواند به حالت استاندارد برگردد.

۴۰.۵۱. Sync Slicers

اگر Period و Region باید در چند Page یکسان بمانند، Sync Slicers می‌تواند Journey را منسجم کند.

۴۰.۵۲. Sync Slicer Visibility

Slicer می‌تواند روی Page دیگر Sync باشد ولی Visible نباشد؛ این رفتار باید برای کاربر قابل پیش‌بینی باشد.

۴۰.۵۳. Filter Context Indicator

در Page مقصد Selectionهای مهم را در Subtitle یا Card نمایش بده.

۴۰.۵۴. Selected Region Label

Selected Region Label =
"منطقه: " &
SELECTEDVALUE(DimBranch[Region], "همه")

۴۰.۵۵. Selected Period Label

Selected Period Label =
"دوره: " &
COALESCE(SELECTEDVALUE(DimDate[YearMonth]), "چند دوره")

۴۰.۵۶. Multi-select

SELECTEDVALUE در Multi-select ممکن است Default برگرداند. Labelهای Dynamic را برای حالت چندانتخابی طراحی کن.

۴۰.۵۷. Edit Interactions

مشخص کن انتخاب یک Visual روی کدام Visualها Filter یا Highlight اعمال کند.

۴۰.۵۸. Highlight vs Filter

Highlight سهم Selection را در کل نگه می‌دارد؛ Filter فقط بخش انتخاب‌شده را نشان می‌دهد. انتخاب رفتار به سؤال تحلیلی بستگی دارد.

۴۰.۵۹. Disable Interaction

بعضی KPIهای Global نباید با کلیک روی یک Chart تغییر کنند. Interaction را برای آن‌ها خاموش کن اگر منطق Business همین است.

۴۰.۶۰. UX Feedback

بعد از کلیک کاربر باید بفهمد چه چیزی تغییر کرده. Title، Selection State، Button State و Visual response باید Feedback بدهند.

۴۰.۶۱. Hidden Filter Problem

یکی از بدترین تجربه‌ها این است که Report Filter شده ولی کاربر نمی‌داند چرا. Context Indicator و Reset Button کمک می‌کنند.

۴۰.۶۲. Drill-through و RLS

Drill-through امنیت را دور نمی‌زند. کاربر فقط داده‌ای را می‌بیند که مدل و RLS اجازه می‌دهد؛ RLS را در Session 42 کامل بررسی می‌کنیم.

۴۰.۶۳. Tooltip و Performance

Tooltip Page هم Query اجرا می‌کند. Hover روی Visual نباید باعث اجرای ده‌ها Measure سنگین شود.

۴۰.۶۴. Bookmark و Performance

Visualهای Hidden همیشه به معنی صفر شدن همه هزینه‌های طراحی/Query نیستند. تعداد Visualها و Stateهای پیچیده را کنترل کن و Performance را تست کن.

۴۰.۶۵. Navigation و Mobile

در Mobile Layout، Menu Desktop ممکن است مناسب نباشد. Journey موبایل را جدا تست کن.

۴۰.۶۶. Keyboard/Accessibility

Navigation را فقط بر اساس رنگ یا Hover نساز. Label و ترتیب منطقی عناصر برای Accessibility مهم‌اند.

۴۰.۶۷. پروژه شرکت هانا؛ Navigation

۴۰.۶۸. پروژه شرکت هانا؛ Filter Panel

Panel شامل Period، Region، Category و Segment باشد. Button Filters آن را باز کند و Apply/Close تجربه را تمیز نگه دارد.

۴۰.۶۹. پروژه شرکت هانا؛ Customer Tooltip

روی Customer Bar، Tooltip شامل Sales، Profit، Margin، RFM Segment و Days Since Last Purchase باشد.

۴۰.۷۰. پروژه شرکت هانا؛ Customer 360

Header پویا، KPIها، Monthly Trend، Product Mix، RFM، Lifecycle و Transaction Table.

۴۰.۷۱. پروژه شرکت هانا؛ Product 360

Sales، Profit، Margin، Customer Count، Region Distribution، Rank و Trend.

۴۰.۷۲. Interaction Map

۴۰.۷۳. Interaction Documentation

در پروژه سازمانی یک Interaction Map کوچک نگه دار. وقتی تعداد Bookmarkها و Pageها زیاد می‌شود، نگهداری بدون مستندات سخت می‌شود.

۴۰.۷۴. Naming Convention

۴۰.۷۵. Selection Pane Naming

نام Rectangle 27 و Text box 14 را در پروژه حرفه‌ای نگه ندار. اسم عناصر مهم را معنادار کن.

۴۰.۷۶. QA Drill-through

از چند Visual مختلف Drill-through را تست کن؛ Single Selection، Multi-selection، Filterهای مختلف و Back را بررسی کن.

۴۰.۷۷. QA Bookmark

هر Bookmark را بعد از تغییر Layout دوباره تست و در صورت نیاز Update کن.

۴۰.۷۸. QA Reset

تمام Slicerها را تغییر بده، Drill کن، برگرد و Reset را بزن. باید دقیقاً به State تعریف‌شده برسد.

۴۰.۷۹. QA Tooltip

روی Data Pointهای مختلف Hover کن و Blank، Long Text و Extreme Valueها را بررسی کن.

۴۰.۸۰. خطای رایج؛ Bookmark با Data ناخواسته

کاربر Filter را انتخاب می‌کند، Panel را می‌بندد و ناگهان Selection Reset می‌شود؛ معمولاً Bookmark State درست تنظیم نشده.

۴۰.۸۱. خطای رایج؛ Button بی‌معنی

ده Icon بدون Label کاربر را مجبور به حدس زدن می‌کند.

۴۰.۸۲. خطای رایج؛ Page Maze

اگر کاربر بعد از سه Navigation نمی‌داند کجاست، Information Architecture مشکل دارد.

۴۰.۸۳. خطای رایج؛ Drill-through بدون Context

صفحه Detail باید واضح بگوید مربوط به کدام Customer/Product و کدام Period است.

۴۰.۸۴. خطای رایج؛ Tooltip سنگین

Tooltip باید سریع و مختصر باشد.

۴۰.۸۵. خطای رایج؛ Bookmark Explosion

برای هر تغییر کوچک Bookmark نساز. اگر ۸۰ Bookmark داری، بررسی کن آیا Field Parameter، Page Navigation یا طراحی ساده‌تر بهتر نیست.

۴۰.۸۶. Best Practiceها

Journey کاربر را قبل از Button طراحی کن.

Drill-through را برای Detail واقعی استفاده کن.

Tooltip را کوتاه نگه دار.

Bookmarkها را Naming Convention بده.

برای UI-only Bookmark، Data State را آگاهانه مدیریت کن.

Selection Pane را Group و نام‌گذاری کن.

Reset Filters بساز.

Context انتخاب‌شده را نمایش بده.

Navigation را بین صفحات ثابت نگه دار.

تمام Interactionها را QA کن.

Mobile و Accessibility را فراموش نکن.

۴۰.۸۷. تمرین ۱

یک Customer 360 Drill-through Page بساز و از Customer Ranking به آن برو.

۴۰.۸۸. تمرین ۲

یک Report Page Tooltip برای Product طراحی کن که Sales، Profit، Margin و Rank را نشان دهد.

۴۰.۸۹. تمرین ۳

Filter Panel باز/بسته‌شونده با Selection Pane و دو Bookmark بساز.

۴۰.۹۰. تمرین ۴

Reset Filters Button بساز و مطمئن شو Default State دقیقاً برمی‌گردد.

۴۰.۹۱. تمرین ۵

Page Navigator برای Overview، Sales، Customer و Product بساز.

۴۰.۹۲. تمرین ۶

یک Help Overlay با Bookmark بساز که تعریف KPIها و راهنمای Drill-through را نمایش دهد.

۴۰.۹۳. تمرین چالشی

یک Journey کامل بساز: Executive → Customer Analysis → Customer 360 → Back. Region و Period را Sync کن و Context را در همه صفحات نمایش بده.

۴۰.۹۴. پروژه Session؛ Interactive Report Experience Pack

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

جمع‌بندی Session 40

تعامل خوب یعنی کاربر بدون آموزش طولانی بتواند از خلاصه به علت و از علت به جزئیات برسد. Bookmark و Button هدف نیستند؛ ابزار ساخت Journey هستند.

Overview → Context → Explore → Drill → Understand → Return

Session 41: Field Parameters، Dynamic Measures، Dynamic Dimensions و Dynamic Visuals؛ ساخت گزارش‌هایی که با انتخاب کاربر شکل تحلیلشان تغییر می‌کند.