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

کتاب جامع Power BI — آموزش پروژه‌محور، تصویری و کاربردی

مقدمه؛ داشبورد باید در چند ثانیه قابل فهم باشد

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

در این فصل علاوه بر متن، نمونه‌های گرافیکی و Wireframe هم داریم تا طراحی صفحه فقط تئوری نباشد.

۸.۱. از Wireframe شروع کن، نه از رنگ

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

شکل ۸-۱ — Wireframe پیشنهادی برای صفحه Executive

این روش جلوی شلوغ‌کاری را می‌گیرد و باعث می‌شود اول معماری اطلاعات را حل کنیم.

۸.۲. Grid و Alignment

Visualها باید روی یک شبکه نامرئی منظم قرار بگیرند. فاصله Cardها، عرض نمودارها و حاشیه صفحه اگر بی‌قاعده باشد، حتی گزارش فنی خوب هم آماتور دیده می‌شود.

نکته: فاصله‌ها را تصادفی انتخاب نکن؛ یک سیستم فاصله‌گذاری ثابت داشته باش.

۸.۳. Visual Hierarchy

همه چیز نباید با یک شدت دیده شود. KPI اصلی باید سریع‌تر از جدول جزئیات دیده شود.

شکل ۸-۲ — ترتیب اهمیت عناصر صفحه

این سلسله‌مراتب کمک می‌کند چشم کاربر از خلاصه مدیریتی به تحلیل و بعد جزئیات حرکت کند.

۸.۴. Typography و اعداد

برای عنوان صفحه، عنوان Visual، KPI و متن توضیحی اندازه‌های مشخص و ثابت تعریف کن. عدد KPI باید واضح باشد، ولی عنوان و واحد هم باید نزدیک آن دیده شوند.

۸.۵. رنگ؛ کم، ثابت و معنی‌دار

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

قرمز و سبز را فقط تزئینی استفاده نکن؛ اگر سبز معنی «خوب» دارد، در تمام گزارش همین معنی را حفظ کن.

۸.۶. White Space

فضای خالی هدررفت فضا نیست. White Space باعث می‌شود گروه‌بندی عناصر بهتر فهمیده شود و صفحه نفس بکشد.

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

۸.۷. طراحی KPI Card

Card حرفه‌ای می‌تواند مقدار، عنوان، تغییر نسبت به دوره قبل و یک نشانه کوچک از وضعیت را کنار هم داشته باشد.

Total Sales
147.2 B
▲ 12.4% vs LY

اما Card را تبدیل به یک داشبورد کوچک شلوغ نکن؛ اطلاعات ثانویه را می‌توان در Tooltip قرار داد.

۸.۸. عنوان‌های سؤال‌محور

به جای «Sales by Month» می‌توانیم بنویسیم «فروش در ۱۲ ماه گذشته چه روندی داشته؟». عنوان خوب به کاربر می‌گوید چرا باید Visual را ببیند.

۸.۹. طراحی برای مدیرعامل

صفحه Executive باید روی چند KPI اصلی، روند، انحراف از هدف و نقاط نیازمند توجه تمرکز کند. جزئیات تراکنشی را به صفحات بعد منتقل کن.

۸.۱۰. Progressive Disclosure

همه اطلاعات را از ابتدا نشان نده. خلاصه را روی صفحه اصلی بگذار و جزئیات را با Tooltip، Drill Through و صفحات تخصصی در دسترس قرار بده.

Overview → Branch → Product → Detail

۸.۱۱. Navigation ثابت

اگر گزارش چند صفحه دارد، جای منو و دکمه Back باید قابل پیش‌بینی باشد. تغییر محل Navigation در هر صفحه تجربه کاربری را خراب می‌کند.

۸.۱۲. طراحی Mobile Layout

نسخه موبایل فقط کوچک‌کردن نسخه Desktop نیست. روی موبایل باید اولویت اطلاعات را دوباره بچینیم و Visualهای کم‌اهمیت را حذف یا پایین‌تر ببریم.

شکل ۸-۳ — نمونه چیدمان عمودی برای موبایل

در موبایل KPIها و روند اصلی باید زودتر دیده شوند و تعامل با Slicerها ساده باشد.

۸.۱۳. Accessibility

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

۸.۱۴. Theme و یکپارچگی

برای پروژه سازمانی بهتر است Theme مشخص داشته باشیم تا فونت، رنگ‌ها و سبک Visualها بین صفحات یکدست بماند.

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

۸.۱۵. طراحی صفحه شرکت هانا؛ نسخه نهایی

HEADER:  عنوان + دوره گزارش + Navigation

ROW 1 :  Sales | Profit | YoY Growth | Achievement
ROW 2 :  Monthly Trend + Target
ROW 3 :  Branch Ranking | Product Performance
FOOTER:  Last Refresh + Data Source Note

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

۸.۱۶. Last Refresh

کاربر باید بداند داده تا چه زمانی به‌روز است. نمایش زمان آخرین Refresh اعتماد به گزارش را بیشتر می‌کند و جلوی سوءبرداشت را می‌گیرد.

۸.۱۷. جزئیات بصری که گزارش را حرفه‌ای‌تر می‌کند

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

سایه، Border و Shape را فقط وقتی استفاده کن که ساختار صفحه را بهتر کنند.

۸.۱۸. چه چیزهایی را حذف کنیم؟

لوگوی خیلی بزرگ، عنوان‌های تکراری، Legend غیرضروری، Gridlineهای شدید، Data Labelهای زیاد، Borderهای سنگین و Visualهای تزئینی معمولاً اولین کاندیدهای حذف هستند.

۸.۱۹. خطاهای رایج UI/UX

خطای اول: رنگ زیاد و بدون سیستم.

خطای دوم: همه KPIها با یک اهمیت بصری.

خطای سوم: فاصله‌های نامنظم.

خطای چهارم: فونت‌های متعدد.

خطای پنجم: صفحه Desktop را بدون بازطراحی به Mobile منتقل کردن.

خطای ششم: نمایش همه جزئیات در صفحه اول.

خطای هفتم: نداشتن Last Refresh و Context زمانی.

۸.۲۰. تمرین پایه

صفحه Executive فصل قبل را فقط با تمرکز بر Alignment، فاصله و اندازه‌ها بازطراحی کن. هیچ Measure جدیدی نساز.

۸.۲۱. تمرین متوسط

برای گزارش یک Design System کوچک تعریف کن: اندازه عنوان، اندازه KPI، فاصله Cardها، سبک Border و قواعد استفاده از رنگ.

۸.۲۲. تمرین کاربردی

نسخه Mobile صفحه Executive را طراحی کن. فقط Visualهایی را نگه دار که مدیر در موبایل واقعاً نیاز دارد.

۸.۲۳. پروژه نهایی فصل؛ Redesign شرکت هانا

سه صفحه فصل قبل را از نظر UI/UX بازطراحی کن: Executive، Branch و Product.

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

جمع‌بندی فصل هشتم

UI/UX در Power BI یعنی اطلاعات درست را با اولویت درست و کمترین اصطکاک به کاربر برسانیم. گرافیک باید به تحلیل کمک کند، نه اینکه خودش تبدیل به هدف شود.

Data + Model + DAX
        ↓
Information Architecture
        ↓
Visual Hierarchy + UX
        ↓
Professional Dashboard

در فصل بعد سراغ Power BI Service می‌رویم: Publish، Workspace، Semantic Model، Refresh، Gateway، اشتراک‌گذاری و مدیریت گزارش در محیط سازمانی.