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

راهنمایی برای ایجاد یک تجربه کابری بهتر از جدول داده ها در موبایلنمایش داده های زیاد روی یک نمایشگر کوچک یک چالش ترسناک است! به جز گزینه محدود سازی تعداد ستون ها، چه راهکارهایی برای نمایش جداول بزرگ در موبایل و تبلت وجود دارد؟ بدیهی است نیاز به ثبات محتوا و نمایش ویژگیهای با معنی برای کاربران داریم. بهتر است ابتدا جدول را برای نمایشگرهای بزرگ طراحی کنید، قبل از اینکه آنها را برای نمایشگرهای کوچک تبدیل کنید.نیاز به اینکه جدول ها در نمایشگرهای کوچک کار کنند، دلیل و انگیزه (یا شاید هم بهانه) خوبی باشه که محتوا و ویژگی‌هایی که در جدول نمایش میدهید را مجددا ارزیابی کنید تا بدون در نظر گرفتن اندازه نمایشگر صفحه، دسترسی به محتوا را برای همه کاربران بهبود دهیم. [+]از کاربرانتان شروع کنیدابتدا بدونید برای چه کسی می‌خواهید طراحی می کنید و این کاربر چگونه از داده های جدول استفاده می کند؟(راهنمای ساخت پرسونا)پرسونا/های کاربر خود را بسازیدعملکرد اصلی را مشخص کنیددر نهایت کاربران می خواهند براساس داده ها یک عمل (action) را انجام دهند، پس باید محتوایی که براساس آن عمل صورت می گیرد، دم دست کاربر باشد.کاربران ما چه استفاده ای از جدول داده ها می کند؟کاربران از جدول ها معمولا برای مشاهده یا مقایسه داده‌ها باهم، و انجام یک عمل بر اساس داده ها استفاده می‌کنند.آیا کاربران می خواند سطرهای جدول را باهم مقایسه کنند؟اگر جوابمان به سوال خیر هست، یعنی کاربران نیازی به مقایسه سطرهای جدول ندارند و می خواهد فقط داده ها مشاهده کند، پس می توانیم به کاربر اجازه دهیم که خودش انتخاب کند چه داده هایی را نیاز دارد ببنید یا خودمان اینکار را برایش انجام دهیم.کاربر می تواند ستون های مورد نیاز خود را انتخاب کند، نکته: می توان ستون هایی که مرتب سازی برایشان معنی ندارد کنار داده های یک ستون دیگر قرار دهیم، مثل ستون اول (Company) عکس بالا، که نام کامل شرکت با رنگ کم رنگ تر از نام تجاری آن نوشته است.الگوهای طراحی رابط کاربری مشاهده جدول داده‌هادر حالتی که هدف مشاهده محتوا است، جداول را به شکل لیست های کارتی یا داده های غیر ضروری را به شکل آکوردئونی (با کلیک روی هر سطر محتوای آن نمایش و یا جمع شود) تبدیل کنیم.[+]لیست های کارتیتغییر نوع نمایش داده های جدول داده ها به کارتآکوردئونی برای گروهی از داده هاداده هایی که به لحاظ منطقی می توان گروه بندی کرد، می توانیم از اکوردئونی استفاده کنیمبه نظر شما معایب و مزایا هر کدام از این حالات چیست؟اگر هدف از جدول مقایسه محتوا استاگر کاربر نیاز به مقایسه بین سطرهای جدول دارد، پس باید رویکرد طراحی خود را به شکلی تغییر دهیم که کاربر بتواند سریع و آسان به هدف خود برسد.برای همین منظور می توانیم از اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون که باید تمیزدهنده یکتا در جدول باشد، استفاده کنیم. رویکردی دیگر برای اینکا حذف ستون‌های غیرضروری است. از خودمان بپرسیم آن 3-4 ستون مهم که کاربری که از موبایل استفاده می کند کدام است، که کاربر بتواند به هدف اصلی خود برسد؟ اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون [+]اسکرول افقی جهت مقایسه داده هاحتما یک نشانگر برای دادن سرنخ به کاربر جهت وجود اسکرول افقی قرار دهید. در شکل زیر نقطه های بالا جدول نمایان گر وجود اسکرول افقی است.یک یا حداکثر دو ستون مهم را ثابت نگه دارید، تا مقایسه قابل انجام باشد.حالت حذف ستون های غیرضروریاین الگو شاید بیشتر برای مشاهده اطلاعات استفاده شود، اما در قسمت مطالعه موردی (که پایین تر میخوانید) خواهیم دید که این الگو برای مقایسه هم می تواند مفید باشد.آن 3-4 ستون مهم که کاربری که از موبایل استفاده می کند کدام است، که کاربر بتواند به هدف اصلی خود برسد؟مقایسه دو به دو آیتم هاحالت مقایسه دو به دو برای ویژگی های یک کالااجازه دهید الگوهای طراحی رابط کاربری بالا در خلال یک مطالعه موردی بررسی کنیم.مطالعه موردی: ایجاد الگوی طراحی یک جدول پیچیده برای موبایلفرض کنید از ما خواسته اند که جدول زیر را که 20 ستون دارد برای موبایل بهینه سازی کنیم! 8 ستون رنگی داریم که جهت مقایسه وضعیت های مختلف استفاده می شود. شما چگونه می خواهید این کار را انجام دهید؟حالت دسکتاپ جدول داده ها، با قابلیت های مختلف بدون مشکلی به دلیل داشتن فضای کافی قابل استفاده است.رویکرد طراحیهمانطور که گفتیم باید بدانیم برای چه کسی طراحی می کنیم و کاربر خود را باید بشناسیم و نیز درک کنیم که چه استفاده ای از جدول می کند؟ فقط داده ها را میخواهد ببیند، آنها را مقایسه کند؟ و اینکه براساس داده ها چه عملی را می‌خواهد انجام دهد؟قدم 1: کاربران چگونه از داده های جدول استفاده می کنند؟کاربر ما چگونه از داده های جدول استفاده می‌کند؟بعد از شناخت استفاده کاربر از جدول در اینجا دو حالت که کاربر می‌خواهد اطلاعات یک سطر را باهم مقایسه کند (افقی) یا بر اساس یک ستون (عمودی) می‌خواهد آنها را باهم مقایسه کند، را بررسی می کنیم.حالت مشاهده کامل افقی یک سطرمورد استفاده 1: حالت مقایسه افقی یک سطراسکرول و اسکن افقیپیداکردن یک مشخص کننده یکتا (نیاز)مشاهده ستون های مربوطه (چطوری؟)حالت مقایسه عمودی ستون‌هامورد استفاده 2: حالت مقایسه عمودی یک ستونانتخاب ستون (چطوری؟)اسکرول و اسکنمقایسه با مشخص کننده یکتا (نیاز)قدم 2: کاربران برای رسیدن به هدف خود نیاز به تمامی ستون ها ندارند، پس کمترین داده با ارزش را نمایش دهیم.منظور از مشخص کننده یکتا جدول، آن داده هایی هستند که کاربر می تواند به وسیله آن تفاوت سطرها را بفهمد. برای مثال ما در اینجا بر اساس نیاز کاربر نام و شناسه را انتخاب کرده ایم.انتخاب دوستون به عنوان تمییز دهنده یکتا جدول قدم 3: ارائه راه حل جهت اسکن و مقایسه دو حالت گفته شده.راه حلی برای حالت مشاهده کامل افقی یک سطرمی توان جزئیات را برای بررسی بیشتر در یک صفحه دیگر نشان دهیم. این یک الگوی جاافتاده است که دقیقا اینجا راه حل مناسب برای این حالت می‌باشد. ارایه یک راه حل جهت بررسی دقیق جزئیات یک سطر از جدولراه حل برایی حالت مقایسه عمودی ستون‌هابرای این حالت می توان از یک Drop down (فارسی؟ انتخابگر) جهت گردش بین ستون های مختلف استفاده کنیم.مقایسه عمودی با امکان انتخاب ستون توسط کاربراینجا جایی است که الگوی جدید برای کاوش و مشاهده جزئیات یک جدول متولد می‌شود! الگویی که قطعا با شناخت نیاز کاربر و ارائه راه حلی جهت حل مشکل کاربرمان قابل دستیابی است. [بیشتر بدانید]نحوه انجام یک عمل (action) در حالت موبایلهمانطور که گفتیم، کاربران برای مشاهده یا مقایسه و انجام یک عمل بر اساس داده ها از جدول داده ها استفاده می‌کنند. الگوهای طراحی رابط کاربری زیر در پلتفرم های مختلف به ما دید لازم را جهت انتخاب یک الگو مناسب بر اساس نیاز کاربران به ما می‌هند.سوایپ (swipe) کشیدن سطر برای حذفحذف با کشیدن یک آیتمباتوجه به نبود هیچ نشانه ای جهت دادن سرنخ به کاربر ممکن است واضح نبودن عملیات که کاربر با کشیدن انجام می دهد کاربر را گیج کند.البته چون یک الگوی جا افتاده بین کاربران است و بیشتر کاربران آن را یاد گرفته اند، می توان از آن فقط برای انجام یک عمل و آن هم برای حذف استفاده شود. باید در طراحی این اینتراکشن دقت بیشتری کرد و راهنمایی های مربوط به آن را مطالعه کنیم.رول آپ اکشن‌ها، برای دسترسی سریعیک نمونه اپ رستورانی - انجام عملیات روی یک میزدر پلتفرم های مختلف. سمت راست iOS، سمت چپ Androidگذاشتن اکشن در حالت اکوردئونی [+]انجام چند اکشن همزمان روی سطرهای انتخابیجیمیل یک نمونه خوب برای استفاده از اکشن بار است.الگو اکشن بار برای کاربران iOS هم آشنا است.مقایسه الگوهای انجام یک عمل در iOS و Androidدر iOS تا جای ممکن سعی بر نمایش حداکثری اکشن ها است و در طراحی می شود که گزینه های جلوی دست کاربر باشد تا به راحتی بتواند عمل خود را انجام دهد. این کار با زدن بیشتر که روی آیتم از لیست است برگه اکشن ها (action sheet) برای کاربر ظاهر می شود یا با کشیدن یک آیتم به سمت چپ جهت حذف آن.انجام یک عمل در سیستم عامل iOSدر مقابل در اندروید سعی بر پنهان سازی اکشن‌ها است. از کمه های شناور جهت نمایش چند اکشن مهم و منوهای دارپ داون استفاده می شود.[+]انجام یک عمل در سیستم عامل Androidجمع بندیبا همدلی و شناخت کاربرانمان، نیازه و مشکلات را شناسایی کنیم و متوجه شویم که چگونه می‌خواهد از جدول داده ها استفاده کند.با استفاده از الگوهای گفته شده می توانید راه‎‌حل خود ارائه کنید یا اینکه در تعامل به کاربر الگوهای جدیدی را خلق کنید.از راه حل‌های خودتان نمونه اولیه بسازید و اجازه دهید کاربرانتان با آن کار کنند و با استفاده از بازخوردشان طرح خود را بهبود دهید.مطالعه بیشتر- https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables- https://medium.muz.li/complex-tables-356826d11861پانوشت: اگر فکر می کنید می توانید شما هم این نوشته را بهبود دهید، تا همگی از دیدگاه شما استفاده کنیم، لحظه ای درنگ نکنید! دیدگاه خود را در قسمت زیر بنویسید یا با من در تلگرام، یاهو (mmdsharifi) در تماس باشید.