راهنمای نسبتاً کامل طراحی جدول داده‌ها (data table) در موبایل

نمایش داده های زیاد روی یک نمایشگر کوچک یک چالش ترسناک است! به جز گزینه محدود سازی تعداد ستون ها، چه راهکارهایی برای نمایش جداول بزرگ در موبایل و تبلت وجود دارد؟

بدیهی است نیاز به ثبات محتوا و نمایش ویژگیهای با معنی برای کاربران داریم. بهتر است ابتدا جدول را برای نمایشگرهای بزرگ طراحی کنید، قبل از اینکه آنها را برای نمایشگرهای کوچک تبدیل کنید.

نیاز به اینکه جدول ها در نمایشگرهای کوچک کار کنند، دلیل و انگیزه (یا شاید هم بهانه) خوبی باشه که محتوا و ویژگی‌هایی که در جدول نمایش میدهید را مجددا ارزیابی کنید تا بدون در نظر گرفتن اندازه نمایشگر صفحه، دسترسی به محتوا را برای همه کاربران بهبود دهیم. [+]

از کاربرانتان شروع کنید

ابتدا بدونید برای چه کسی می‌خواهید طراحی می کنید و این کاربر چگونه از داده های جدول استفاده می کند؟(راهنمای ساخت پرسونا)

عملکرد اصلی را مشخص کنید

در نهایت کاربران می خواهند براساس داده ها یک عمل (action) را انجام دهند، پس باید محتوایی که براساس آن عمل صورت می گیرد، دم دست کاربر باشد.

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

کاربران از جدول ها معمولا برای مشاهده یا مقایسه داده‌ها باهم، و انجام یک عمل بر اساس داده ها استفاده می‌کنند.

آیا کاربران می خواند سطرهای جدول را باهم مقایسه کنند؟

اگر جوابمان به سوال خیر هست، یعنی کاربران نیازی به مقایسه سطرهای جدول ندارند و می خواهد فقط داده ها مشاهده کند، پس می توانیم به کاربر اجازه دهیم که خودش انتخاب کند چه داده هایی را نیاز دارد ببنید یا خودمان اینکار را برایش انجام دهیم.

نکته: می توان ستون هایی که مرتب سازی برایشان معنی ندارد کنار داده های یک ستون دیگر قرار دهیم، مثل ستون اول (Company) عکس بالا، که نام کامل شرکت با رنگ کم رنگ تر از نام تجاری آن نوشته است.

الگوهای طراحی رابط کاربری مشاهده جدول داده‌ها

در حالتی که هدف مشاهده محتوا است، جداول را به شکل لیست های کارتی یا داده های غیر ضروری را به شکل آکوردئونی (با کلیک روی هر سطر محتوای آن نمایش و یا جمع شود) تبدیل کنیم.[+]

لیست های کارتی

آکوردئونی برای گروهی از داده ها

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

اگر هدف از جدول مقایسه محتوا است

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

برای همین منظور می توانیم از اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون که باید تمیزدهنده یکتا در جدول باشد، استفاده کنیم.

رویکردی دیگر برای اینکا حذف ستون‌های غیرضروری است. از خودمان بپرسیم آن 3-4 ستون مهم که کاربری که از موبایل استفاده می کند کدام است، که کاربر بتواند به هدف اصلی خود برسد؟

اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون [+]

• حتما یک نشانگر برای دادن سرنخ به کاربر جهت وجود اسکرول افقی قرار دهید. در شکل زیر نقطه های بالا جدول نمایان گر وجود اسکرول افقی است.
• یک یا حداکثر دو ستون مهم را ثابت نگه دارید، تا مقایسه قابل انجام باشد.

حالت حذف ستون های غیرضروری

این الگو شاید بیشتر برای مشاهده اطلاعات استفاده شود، اما در قسمت مطالعه موردی (که پایین تر میخوانید) خواهیم دید که این الگو برای مقایسه هم می تواند مفید باشد.

مقایسه دو به دو آیتم ها

اجازه دهید الگوهای طراحی رابط کاربری بالا در خلال یک مطالعه موردی بررسی کنیم.

مطالعه موردی: ایجاد الگوی طراحی یک جدول پیچیده برای موبایل

فرض کنید از ما خواسته اند که جدول زیر را که 20 ستون دارد برای موبایل بهینه سازی کنیم! 8 ستون رنگی داریم که جهت مقایسه وضعیت های مختلف استفاده می شود. شما چگونه می خواهید این کار را انجام دهید؟

رویکرد طراحی

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

قدم 1: کاربران چگونه از داده های جدول استفاده می کنند؟

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

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

حالت مشاهده کامل افقی یک سطر

• اسکرول و اسکن افقی
• پیداکردن یک مشخص کننده یکتا (نیاز)
• مشاهده ستون های مربوطه (چطوری؟)

حالت مقایسه عمودی ستون‌ها

• انتخاب ستون (چطوری؟)
• اسکرول و اسکن
• مقایسه با مشخص کننده یکتا (نیاز)

قدم 2: کاربران برای رسیدن به هدف خود نیاز به تمامی ستون ها ندارند، پس کمترین داده با ارزش را نمایش دهیم.

منظور از مشخص کننده یکتا جدول، آن داده هایی هستند که کاربر می تواند به وسیله آن تفاوت سطرها را بفهمد. برای مثال ما در اینجا بر اساس نیاز کاربر نام و شناسه را انتخاب کرده ایم.

قدم 3: ارائه راه حل جهت اسکن و مقایسه دو حالت گفته شده.

راه حلی برای حالت مشاهده کامل افقی یک سطر

می توان جزئیات را برای بررسی بیشتر در یک صفحه دیگر نشان دهیم. این یک الگوی جاافتاده است که دقیقا اینجا راه حل مناسب برای این حالت می‌باشد.

راه حل برایی حالت مقایسه عمودی ستون‌ها

برای این حالت می توان از یک Drop down (فارسی؟ انتخابگر) جهت گردش بین ستون های مختلف استفاده کنیم.

اینجا جایی است که الگوی جدید برای کاوش و مشاهده جزئیات یک جدول متولد می‌شود! الگویی که قطعا با شناخت نیاز کاربر و ارائه راه حلی جهت حل مشکل کاربرمان قابل دستیابی است. [بیشتر بدانید]

نحوه انجام یک عمل (action) در حالت موبایل

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

سوایپ (swipe) کشیدن سطر برای حذف

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

رول آپ اکشن‌ها، برای دسترسی سریع

گذاشتن اکشن در حالت اکوردئونی [+]

انجام چند اکشن همزمان روی سطرهای انتخابی

مقایسه الگوهای انجام یک عمل در iOS و Android

در iOS تا جای ممکن سعی بر نمایش حداکثری اکشن ها است و در طراحی می شود که گزینه های جلوی دست کاربر باشد تا به راحتی بتواند عمل خود را انجام دهد. این کار با زدن بیشتر که روی آیتم از لیست است برگه اکشن ها (action sheet) برای کاربر ظاهر می شود یا با کشیدن یک آیتم به سمت چپ جهت حذف آن.

در مقابل در اندروید سعی بر پنهان سازی اکشن‌ها است. از کمه های شناور جهت نمایش چند اکشن مهم و منوهای دارپ داون استفاده می شود.[+]

جمع بندی

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

مطالعه بیشتر

- https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables

- https://medium.muz.li/complex-tables-356826d11861

پانوشت: اگر فکر می کنید می توانید شما هم این نوشته را بهبود دهید، تا همگی از دیدگاه شما استفاده کنیم، لحظه ای درنگ نکنید! دیدگاه خود را در قسمت زیر بنویسید یا با من در تلگرام، یاهو (mmdsharifi) در تماس باشید.