طراحی جدول‌های داده برای موبایل: وقتی صفحه کوچیکه ولی اطلاعات بزرگ!

در دنیای امروز، همه‌چیز از خرید و پرداخت گرفته تا مدیریت هزینه‌ها، روی گوشی‌هامون اتفاق می‌افته. این یعنی طراحی تجربه‌ی کاربری موبایل دیگه یه گزینه نیست، یه ضرورته.
یکی از بدقلق‌ترین چالش‌ها برای طراح‌ها، طراحی جدول‌هایی‌ست که پر از داده‌ان. چیزی که توی دسکتاپ با کلی فضای خالی و ستون‌های مرتب خیلی خوب کار می‌کنه، توی موبایل خیلی راحت تبدیل می‌شه به یه صفحه‌ی شلوغ، درهم، و ناخوانا.
تو یکی از پروژه‌های اخیرم که یه وبسایت مدیریت هزینه‌های ساختمان هست، دقیقاً با این چالش روبه‌رو شدم. جداول پر از تراکنش، مبلغ، تاریخ و… که توی نسخه دسکتاپ عالی کار می‌کردن، توی موبایل شبیه جا دادن یه پازل ۱۰۰ تکه‌ای توی جعبه کبریت بودن! این شد که رفتم سراغ راه‌حل‌ها، الگوهای طراحی، تجربه‌های بقیه، و حتی کمک گرفتن از هوش مصنوعی.

توی این مقاله، قراره اون چیزهایی که یاد گرفتم و واقعاً جواب دادن رو باهاتون به اشتراک بذارم.

مشکل از کجاست؟ چرا جدول‌ها توی موبایل تا این حد دردسرسازن؟

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

راه‌حل‌ها: چطور از جدول‌های دسکتاپ تجربه‌های کاربرمحور موبایلی بسازیم؟

وقتی عمق مشکل طراحی جدول برای موبایل رو درک کردم، رفتم سراغ پیدا کردن راه‌حل. شروع کردم به بررسی طراحی‌های الهام‌بخش در دریبل و فایل‌های کامیونیتی فیگما.  هم‌زمان، مقاله‌ها و راه‌حل‌هایی رو که حتی اشاره‌ای به این موضوع داشتن، خوندم و اطلاعات مفیدی ازشون استخراج کردم. از دستیارهای هوش مصنوعی مولد هم کمک گرفتم تا از خلاقیتشون استفاده کنن و راهکارهایی با محوریت کاربر پیشنهاد بدن. توجه ویژه‌ای هم به نحوه‌ی تعاملات در جدول‌ها داشتم، مثل فیلتر کردن، مرتب‌سازی و دیدن جزئیات، اون هم به شکلی که مناسب لمس با انگشت باشه. خیلی زود مشخص شد که صرفاً کوچک‌ کردن جدول‌های دسکتاپ، هیچ‌وقت جواب نمی‌ده. اینجا ۸ راه‌حلی که پیدا کردم رو به ترتیب از پایه‌ای‌ترین تا مؤثرترین الگوها برات می‌نویسم:

۱. کمتر نشون بده، بهتر نشون بده!

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

۲. اسکرول افقی: فقط وقتی واقعاً جایگزین دیگه‌ای نداریم

یکی از رویکردها اینه که عنوان‌های ستون‌ها رو به‌صورت عمودی قرار بدی و اسکرول افقی بین ردیف‌ها رو فعال کنی، در حالی که ستون اول (که نقش عنوان فیلدها رو داره) ثابت باقی بمونه.
اما این روش فقط وقتی قابل قبوله که دو شرط برقرار باشه:

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

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

۳. کوتاه‌نویسی برای صرفه‌جویی در فضا

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

• • تاریخ‌ها: به‌جای «۱۵ دی ماه ۱۴۰۴»، از «۱۵ دی» یا حتی «۱۵/۱۰/۰۴» استفاده کن. برای تاریخ‌های نزدیک، «شنبه» می‌تونه به «ش» خلاصه بشه.
  • زمان: «۳:۳۰ بعد از ظهر» می‌تونه بشه «۳:۳۰ ب.ظ» یا «۱۵:۳۰». در بیشتر موارد، ثانیه‌ها اصلاً نیازی نیستن.
  • واحدها: : استفاده از «ک.م» به جای «کیلومتر» و «۱۵۰ت» به جای «۱۵۰ تومان». برای اعداد بزرگ هم «۱.۵ م.ت» به جای «۱‌٫۵۰۰٫۰۰۰ تومان» استفاده بشه بهتره.
  • وضعیت:  به جای «محصول موجود است» فقط «موجود» کافیه.

با این کارا، جدول هم خلوت‌تر می‌شه، هم همچنان قابل فهم می‌مونه.

۴. استفاده از آیکون‌ها برای درک سریع‌تر

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

۵. ترکیب فیلدهای مرتبط برای صرفه‌جویی بیشتر

یکی از روش‌های مؤثر برای صرفه‌جویی در فضا و ساده‌سازی جدول‌های موبایلی، ترکیب فیلدهای مرتبط با همدیگه است. در بسیاری از موارد، اطلاعاتی که کنار هم میان می‌تونن به‌جای نمایش در ستون‌های جدا، در یک ستون ادغام بشن. مثلاً به‌جای دو ستون مجزا برای تاریخ و ساعت، از یک فیلد با فرمت «۰۳/۱۰ ۱۵:۳۰» استفاده کن. یا برای مقدار و ارز، چیزی مثل «۱۵۰ ت» یا «€25.50» کافی و گویاست. حتی در موارد خاص مثل جهت و سرعت باد یا وضعیت حساب و مبلغ هم می‌شه این روش رو به‌کار برد. با این رویکرد، نه‌تنها جدول منسجم تر و خواناتر می‌شه، بلکه تجربه کاربر هم روان‌تر و قابل درک‌تر خواهد بود.

۶. ارائه امکان شخصی‌سازی ستون‌ها

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

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

حالا، به مؤثرترین راه‌حل می‌رسیم؛ رویکردی که تا حد زیادی معایب تکنیک‌های قبلی را برطرف می‌کنه:

۷. الگوی نمای کارتی: نجات‌دهنده واقعی موبایل

هر ردیف از جدول دسکتاپ رو به یک کارت تبدیل کن. فیلد اصلی (مثل ID) رو عنوان کارت بذار، عملیات مثل “ویرایش” و “حذف” رو به‌صورت آیکون در سربرگ  کارت قرار بده و باقی اطلاعات رو در بدنه‌ی کارت نشون بده. توی این مدل:

• • اسکرول افقی حذف می‌شه.
  • همه اطلاعات در یک نمایش عمودی، ساختاریافته و واضح نشون داده می‌شن.
  • نیازی به طراحی صفحه‌ی «مشاهده جزئیات» نیست چون میتونی همه چیو تو کارت جا بدی.
  • دسترسی به عملیات راحت‌تره.

تنها ایراد این روش اینه که نمی‌تونی تعداد زیادی رکورد رو همزمان ببینی. اما چون کاربر به‌طور طبیعی در موبایل به اسکرول عمودی عادت داره، این یه تریدآف قابل قبوله. برای بهینه‌تر کردن تجربه می‌تونی مثلاً ۵ یا ۶ کارت رو نمایش بدی و دکمه‌ای مثل «موارد بیشتر» پایینشون بذاری تا کاربر در صورت نیاز رکوردهای جدید رو بارگذاری کنه و مجبور نباشه برای رسیدن به بخش‌های پایینی وبسایت، بی پایان اسکرول کنه.

اما صبر کن! اگر تمام بهترین روش‌ها رو برای ساده‌سازی جدول به‌کار گرفته باشی، ولی هنوز تعداد ستون‌ها اون‌قدر زیاده که وقتی جدول رو به نمای کارتی تبدیل می‌کنی، با کارت‌هایی خیلی بلند و شلوغ مواجه بشی چی؟ این‌جاست که «کارت‌های توسعه‌یافته» به کمکمون میان!

۸. پیاده‌سازی نماهای کارتی توسعه‌یافته

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

چک‌لیست نهایی

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

نتیجه‌گیری

نمایش داده‌های جدولی در موبایل، یه چالش جهانیه. اما با طراحی کاربرمحور، اولویت‌بندی هوشمندانه و استفاده از الگوهای مؤثر مثل کارت‌ها، می‌تونیم تجربه‌ای بسازیم که نه‌تنها قابل استفاده باشه، بلکه لذت‌بخش هم باشه. در نظر داشته باش، هدف فقط “نمایش دادن داده‌ها” نیست؛ هدف اینه که کاربر بتونه از اون داده‌ها به راحتی استفاده کنه.