طراحی حرفه‌ای Dashboard و اصول UI/UX در Power BI

شروع جلسه؛ داشبورد خوب باید در چند ثانیه فهمیده شود

ممکن است DAX عالی، مدل داده تمیز و KPIهای دقیق داشته باشی؛ ولی اگر صفحه شلوغ باشد، مدیر باز هم گزارش را کنار می‌گذارد. UI/UX در Power BI یعنی اطلاعات را طوری بچینیم که چشم کاربر مسیر درست را پیدا کند.

در این فصل هدفمان «قشنگ کردن» گزارش نیست؛ هدف این است که گزارش سریع‌تر فهمیده شود و تصمیم گرفتن راحت‌تر شود.

۳۹.۱. اول سؤال، بعد Visual

قبل از انتخاب Bar Chart یا Card بپرس: کاربر با این صفحه چه تصمیمی می‌خواهد بگیرد؟ هر Visual باید برای جواب دادن به یک سؤال مشخص باشد.

۳۹.۲. Audience

۳۹.۳. یک صفحه برای همه نساز

صفحه CEO و Analyst نباید یکسان باشد. هرچه سطح مدیریتی بالاتر می‌رود، Summary بیشتر و جزئیات اولیه کمتر می‌شود.

۳۹.۴. Visual Hierarchy

۳۹.۵. بالای صفحه چه باشد؟

عنوان، Context انتخاب‌شده، Last Data Date و مهم‌ترین KPIها. کاربر نباید برای فهمیدن وضعیت اصلی Scroll یا جست‌وجو کند.

۳۹.۶. Grid

یک Grid ذهنی یا واقعی برای صفحه داشته باش. Visualها باید روی خطوط مشترک Align شوند؛ فاصله‌های تصادفی ظاهر گزارش را آماتور می‌کند.

۳۹.۷. Alignment

Cardهایی که هم‌اندازه‌اند باید Width/Height یکسان و فاصله منظم داشته باشند. Align و Distribute را جدی بگیر.

۳۹.۸. White Space

فضای خالی اتلاف فضا نیست. White Space کمک می‌کند گروه‌های اطلاعاتی از هم جدا شوند و چشم خسته نشود.

۳۹.۹. Container Thinking

اطلاعات مرتبط را در یک ناحیه بصری قرار بده؛ مثلاً Financial KPIs، Customer KPIs و Operational Exceptions.

۳۹.۱۰. تعداد Visual

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

۳۹.۱۱. Card

Card برای عدد Headline خوب است؛ نه برای هر Measure موجود در مدل.

۳۹.۱۲. Bar Chart

برای مقایسه Categoryها معمولاً Bar/Column بسیار خواناست. اگر Labelها طولانی‌اند، Bar افقی اغلب بهتر جواب می‌دهد.

۳۹.۱۳. Line Chart

برای Trend زمانی انتخاب طبیعی است. محور زمان باید مرتب و قابل فهم باشد.

۳۹.۱۴. Combo Chart

برای Actual vs Target یا Sales + Margin می‌تواند مفید باشد، ولی دو محور با Scale متفاوت را با احتیاط استفاده کن.

۳۹.۱۵. Pie/Donut

برای تعداد کمی Category و سهم‌های واضح قابل استفاده است. برای ۱۲ Category با سهم نزدیک، Bar Chart خواناتر است.

۳۹.۱۶. Table و Matrix

وقتی کاربر نیاز به عدد دقیق، مقایسه چند KPI یا Drill Hierarchy دارد، Table/Matrix هنوز یکی از مهم‌ترین Visualهاست.

۳۹.۱۷. Scatter

برای کشف رابطه بین دو Measure و شناسایی Outlierها عالی است؛ مثل Sales vs Profit برای Customerها.

۳۹.۱۸. Map

فقط وقتی Location واقعاً در تصمیم اهمیت دارد از Map استفاده کن. Map تزئینی فضای زیادی می‌گیرد.

۳۹.۱۹. Gauge

Gauge فضای زیادی برای یک عدد مصرف می‌کند. در بسیاری از Executive Dashboardها Card + Target + Variance جمع‌وجورتر است.

۳۹.۲۰. انتخاب Visual بر اساس سؤال

۳۹.۲۱. رنگ؛ کمتر بهتر

یک Palette محدود داشته باش. اگر هر Visual رنگ خودش را داشته باشد، رنگ دیگر معنی اطلاعاتی ندارد.

۳۹.۲۲. Semantic Color

رنگ را به معنی وصل کن: Critical، Warning، Positive، Neutral. تعریف رنگ باید در کل گزارش ثابت باشد.

۳۹.۲۳. رنگ Brand

رنگ سازمان می‌تواند در Header، Accent و عناصر انتخابی استفاده شود؛ ولی لازم نیست تمام نمودارها با رنگ لوگو پر شوند.

۳۹.۲۴. Accessibility

قرمز و سبز را تنها علامت وضعیت نگذار. متن، Icon یا Shape هم اضافه کن.

۳۹.۲۵. Contrast

متن خاکستری خیلی روشن روی Background سفید شاید مدرن به نظر برسد ولی خوانایی را خراب می‌کند.

۳۹.۲۶. Typography

حداکثر چند سطح مشخص داشته باش: Page Title، Section Title، KPI Value، Label و Detail.

۳۹.۲۷. Font Size

اندازه Font باید Hierarchy بسازد. اگر همه چیز Bold و بزرگ باشد، هیچ چیز مهم‌تر دیده نمی‌شود.

۳۹.۲۸. عدد مهم‌تر از Label

در KPI Card معمولاً Value باید سریع‌تر از Label دیده شود؛ ولی Label آن‌قدر کوچک نباشد که معنی عدد گم شود.

۳۹.۲۹. Number Formatting

۳۹.۳۰. واحد را روشن کن

اگر گزارش ریال، تومان، میلیون یا میلیارد است، واحد را در عنوان یا Subtitle مشخص کن.

۳۹.۳۱. عنوان خوب

به جای «Chart 1» بنویس «روند فروش ماهانه در مقایسه با هدف».

۳۹.۳۲. عنوان Dynamic

Sales Chart Title =
"روند فروش — " &
SELECTEDVALUE(DimBranch[Region], "همه مناطق")

۳۹.۳۳. Context در عنوان

اگر کاربر Region یا Period را تغییر می‌دهد، عنوان Dynamic احتمال سوءبرداشت را کم می‌کند.

۳۹.۳۴. Storytelling

۳۹.۳۵. داستان صفحه

صفحه باید بگوید: وضعیت چیست؟ چه تغییری کرده؟ چرا؟ کدام بخش مشکل دارد؟ قدم بعدی کجاست؟

۳۹.۳۶. Z-Pattern و F-Pattern

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

۳۹.۳۷. RTL در گزارش فارسی

در گزارش فارسی، ترتیب عنوان‌ها، Slicerها و Groupها را با تجربه راست‌به‌چپ هماهنگ کن؛ اما نمودار زمانی همچنان باید ترتیب منطقی زمان را حفظ کند.

۳۹.۳۸. Slicerها

Slicer فقط چیزهایی را نشان بده که واقعاً برای تصمیم لازم‌اند. ۱۵ Slicer در بالای صفحه UX را خراب می‌کند.

۳۹.۳۹. Slicer Panel

برای فیلترهای زیاد می‌توان Panel باز/بسته‌شونده با Bookmark طراحی کرد؛ جزئیات Bookmark را در Session بعدی عمیق‌تر می‌خوانیم.

۳۹.۴۰. Slicer Hierarchy

فیلترهای اصلی مثل Period و Region در دسترس باشند؛ فیلترهای کم‌کاربرد در پنل ثانویه.

۳۹.۴۱. Default State

گزارش باید هنگام باز شدن حالت مفیدی داشته باشد. صفحه‌ای که با Blank یا Selection عجیب باز می‌شود اعتماد کاربر را کم می‌کند.

۳۹.۴۲. Cross-filtering

Interaction بین Visualها را تست کن. کلیک روی یک Bar نباید سه Visual دیگر را به شکلی گیج‌کننده Blank کند.

۳۹.۴۳. Edit Interactions

برای هر Visual مشخص کن چه چیزی باید Filter، Highlight یا Ignore شود.

۳۹.۴۴. Tooltip

Tooltip جای خوبی برای اطلاعات ثانویه است؛ یعنی چیزی که لازم نیست همیشه روی صفحه باشد.

۳۹.۴۵. Tooltip بد

اگر Tooltip خودش یک Dashboard شلوغ کوچک باشد، مشکل را فقط پنهان کرده‌ای.

۳۹.۴۶. Conditional Formatting

در Matrix از Data Bar، Icon یا Background برای برجسته کردن Exception استفاده کن، نه برای رنگ‌آمیزی تمام سلول‌ها.

۳۹.۴۷. Heatmap

برای Cohort و Matrixهای تحلیلی عالی است؛ Scale و Legend باید قابل فهم باشند.

۳۹.۴۸. Reference Line

Target، Average یا Threshold را روی Chart نشان بده تا کاربر بدون محاسبه ذهنی عملکرد را مقایسه کند.

۳۹.۴۹. Data Label

همه Pointهای Line Chart را Label نزن. فقط وقتی ارزش خواندن مستقیم دارد Label اضافه کن.

۳۹.۵۰. Legend

اگر Legend به خاطر ۲۰ Category تبدیل به لیست رنگ شده، Visual مناسب نیست.

۳۹.۵۱. Sort

Bar Chart مقایسه‌ای را اغلب بر اساس Measure مرتب کن، مگر اینکه ترتیب Business مشخصی مثل مراحل فرآیند داشته باشد.

۳۹.۵۲. Zero Baseline

برای Bar/Column، قطع کردن محور صفر می‌تواند تفاوت‌ها را اغراق‌آمیز نشان دهد. Scale را آگاهانه انتخاب کن.

۳۹.۵۳. Dual Axis

دو محور Y می‌تواند برداشت اشتباه ایجاد کند. فقط وقتی رابطه دو Metric روشن است استفاده کن.

۳۹.۵۴. Small Multiples

برای مقایسه Trend چند Region یا Category بدون شلوغی Lines متعدد، Small Multiples می‌تواند انتخاب خوبی باشد.

۳۹.۵۵. Visual Density

Density یعنی حجم اطلاعات در فضای صفحه. هدف نه کمینه کردن اطلاعات است نه بیشینه کردن؛ هدف بیشترین اطلاعات قابل فهم است.

۳۹.۵۶. Progressive Disclosure

اول Summary، بعد با Drill/Tooltip/Page Navigation جزئیات را آشکار کن.

۳۹.۵۷. Executive Page

Executive Page باید Summary + Trend + Drivers + Exceptions داشته باشد.

۳۹.۵۸. Analytical Page

صفحه Analyst می‌تواند Slicer بیشتر، Matrix عمیق‌تر و Breakdownهای دقیق‌تر داشته باشد.

۳۹.۵۹. Detail Page

برای Transaction-level detail یک صفحه جدا بساز؛ آن را وسط صفحه CEO نریز.

۳۹.۶۰. Navigation

صفحات را بر اساس Journey کاربر مرتب کن: Overview → Sales → Customer → Product → Operations → Detail.

۳۹.۶۱. Navigation Label

اسم Pageها کوتاه و قابل فهم باشد. «Page 7» یا «Analysis 2» UX مناسبی نیست.

۳۹.۶۲. Home Page

در گزارش بزرگ، Home/Overview می‌تواند نقطه شروع و Navigation Hub باشد.

۳۹.۶۳. Consistency

جای Navigation، عنوان، Slicer و KPI Cardها بین صفحات تا حد امکان ثابت بماند.

۳۹.۶۴. Theme

Theme برای استاندارد کردن Font، Color و Style مفید است و باعث می‌شود گزارش‌های تیمی ظاهر منسجم‌تری داشته باشند.

۳۹.۶۵. Design System

۳۹.۶۶. Background

Background خیلی شلوغ یا تصویر تزئینی خوانایی را کم می‌کند. سطح‌های ساده و Contrast مناسب معمولاً حرفه‌ای‌ترند.

۳۹.۶۷. Shadow

Shadow زیاد گزارش را شبیه مجموعه کارت‌های شناور می‌کند. برای Separation ظریف استفاده کن، نه روی همه چیز.

۳۹.۶۸. Border

برای جدا کردن همه Visualها Border ضخیم لازم نیست. White Space اغلب Separation بهتری می‌دهد.

۳۹.۶۹. Logo

لوگو باید حضور Brand را نشان دهد، نه اینکه یک‌چهارم صفحه را اشغال کند.

۳۹.۷۰. Mobile Layout

Mobile فقط کوچک کردن Desktop نیست. ترتیب KPI، Trend و Exception را برای صفحه عمودی دوباره طراحی کن.

۳۹.۷۱. Touch Target

Button و Navigation در موبایل باید اندازه مناسب لمس داشته باشند.

۳۹.۷۲. Performance و UX

گزارشی که ۱۵ ثانیه Load می‌شود UX خوبی ندارد، حتی اگر زیبا باشد. Design و Performance از هم جدا نیستند.

۳۹.۷۳. Visualهای غیرضروری

هر Visual Query ایجاد می‌کند. حذف Visual کم‌ارزش هم UX را بهتر می‌کند هم ممکن است Performance را بهتر کند.

۳۹.۷۴. Custom Visual

Custom Visual فقط وقتی ارزش دارد که نیاز مشخصی را حل کند. Security، Support و Performance آن را هم بررسی کن.

۳۹.۷۵. Dashboard Wireframe

قبل از ساخت نهایی، با کاغذ، Figma، PowerPoint یا Shapeهای ساده Wireframe بساز. اول جای اطلاعات را حل کن، بعد Format.

۳۹.۷۶. Wireframe شرکت هانا

۳۹.۷۷. Design Review

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

۳۹.۷۸. Five-second Test

گزارش را پنج ثانیه نشان بده و بپرس: مهم‌ترین پیام چه بود؟ اگر کاربر پیام اصلی را نگرفت، Hierarchy را اصلاح کن.

۳۹.۷۹. سؤال‌های QA

۳۹.۸۰. خطای رایج؛ همه چیز در یک صفحه

گزارش ۳۰ Visualه معمولاً نشانه نبود Information Architecture است.

۳۹.۸۱. خطای رایج؛ Rainbow Dashboard

رنگ‌های زیاد باعث می‌شوند هیچ رنگی اهمیت نداشته باشد.

۳۹.۸۲. خطای رایج؛ Pie زیاد

مقایسه Angle و Area برای تعداد زیاد Category سخت‌تر از طول Bar است.

۳۹.۸۳. خطای رایج؛ Font کوچک

اگر مدیر برای خواندن عدد Zoom می‌کند، استفاده از فضای صفحه درست نبوده.

۳۹.۸۴. خطای رایج؛ تزئین بیشتر از اطلاعات

Gradient، Shadow، Icon و Shape باید در خدمت اطلاعات باشند.

۳۹.۸۵. خطای رایج؛ Context پنهان

کاربر نباید حدس بزند عدد مربوط به کدام سال یا Region است.

۳۹.۸۶. خطای رایج؛ Scroll افقی

برای Dashboard مدیریتی Desktop، Scroll افقی معمولاً تجربه ضعیفی ایجاد می‌کند.

۳۹.۸۷. Best Practiceها

قبل از ساخت Wireframe بکش.

هر صفحه یک هدف اصلی داشته باشد.

Visual Hierarchy بساز.

از Grid و Spacing ثابت استفاده کن.

رنگ را Semantic نگه دار.

Number Format را ساده کن.

Context را واضح نشان بده.

Summary و Detail را جدا کن.

Interactionها را تست کن.

Mobile Layout را جدا طراحی کن.

با کاربر واقعی Usability Test انجام بده.

۳۹.۸۸. تمرین ۱

یک Dashboard قدیمی را انتخاب کن و همه Visualهایی که سؤال مشخصی جواب نمی‌دهند حذف کن.

۳۹.۸۹. تمرین ۲

برای Executive Dashboard شرکت هانا یک Wireframe چهارردیفه طراحی کن.

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

یک Design System کوچک تعریف کن: Typography، Spacing، KPI Card، رنگ Status و Number Format.

۳۹.۹۱. تمرین ۴

یک Bar Chart، Line Chart و Matrix را با اصول این فصل بازطراحی کن و قبل/بعد را مقایسه کن.

۳۹.۹۲. تمرین ۵

برای همان Dashboard یک Mobile Layout مستقل طراحی کن.

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

یک صفحه CEO بساز و Five-second Test انجام بده. اگر کاربر نتوانست سه پیام اصلی را بگوید، صفحه را دوباره طراحی کن.

۳۹.۹۴. پروژه Session؛ Executive UI/UX Pack

هدف پروژه این نیست که Dashboard فقط زیبا شود؛ باید مدیر سریع‌تر وضعیت را بفهمد و با کلیک کمتر به علت مسئله برسد.

جمع‌بندی Session 39

UI/UX خوب در Power BI یعنی کم کردن اصطکاک بین داده و تصمیم. هر Pixel باید یا اطلاعات بدهد، یا ساختار ایجاد کند، یا کاربر را به اقدام بعدی هدایت کند.

Question → Hierarchy → Visual → Context → Insight → Action

Session 40: Drill-through، Report Page Tooltip، Bookmark، Buttons، Navigation و Interactionهای پیشرفته.