دردسر نمایش در همه سایزها! موضوعی که روزبه‌روز مهم‌تر می‌شود

نگاهی به موضوع

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

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

یکی از جمله‌هایی که هنوز هم در جلسات طراحی و توسعه زیاد شنیده می‌شود این است: «اصلاً چه کسی با این رزولوشن سایت را می‌بیند که روی آن وقت بگذاریم؟!»

این سؤال در نگاه اول منطقی به نظر می‌رسد. چرا باید برای رزولوشنی وقت بگذاریم که شاید سهم کوچکی از کاربران را تشکیل می‌دهد؟ اما واقعیت این است که بسیاری از این اندازه‌ها، برخلاف تصور ما، هر روز توسط تعداد زیادی از کاربران استفاده می‌شوند؛ فقط نه به شکلی که انتظار داریم.

Zoom ،Scale و...؛ عاملی که همه چیز را تغییر می‌دهد

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

نمایشگرهای امروزی، به‌ویژه لپ‌تاپ‌ها و مانیتورهای ۴K، تراکم پیکسلی بسیار بالایی دارند. اگر سیستم‌عامل همه چیز را با اندازه واقعی پیکسل‌ها نمایش دهد، متن‌ها و دکمه‌ها آن‌قدر کوچک می‌شوند که استفاده از دستگاه دشوار خواهد بود.

به همین دلیل سیستم‌عامل‌ها قابلیتی به نام Scale یا Display Scaling یا Zoom را ارائه کرده‌اند.

برای مثال در ویندوز، در بخش Display Settings می‌توان مقدار Scale را روی 125٪، 150٪ یا حتی بیشتر قرار داد. بسیاری از لپ‌تاپ‌های امروزی نیز به‌صورت پیش‌فرض روی 100٪ نیستند و معمولاً از مقادیر 125٪ یا 150٪ استفاده می‌کنند.

در نتیجه اگرچه نمایشگر دستگاه ممکن است رزولوشن 1080×1920 داشته باشد، اما فضای قابل استفاده برای رابط کاربری چیزی نزدیک به 1536 پیکسل یا حتی کمتر خواهد بود. از دید مرورگر، این دستگاه دیگر یک نمایشگر Full HD معمولی نیست؛ بلکه رفتاری شبیه یک رزولوشن کاملاً متفاوت دارد.

در تلفن‌های همراه نیز شرایط مشابهی وجود دارد. برای مثال بسیاری از گوشی‌های سامسونگ در بخش Display گزینه‌ای با عنوان Screen Zoom دارند که کاربر می‌تواند اندازه عناصر رابط کاربری را تغییر دهد. علاوه بر آن، امکان بزرگ‌تر کردن اندازه فونت نیز در بیشتر سیستم‌عامل‌های موبایل وجود دارد.

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

در نهایت، آنچه برنامه ما با آن روبه‌رو می‌شود، دیگر همان رزولوشنی نیست که روی جعبه دستگاه نوشته شده است؛ بلکه ترکیبی از رزولوشن واقعی، تراکم پیکسلی و تنظیمات شخصی کاربر است.

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

این مشکلات معمولاً زمانی خود را نشان می‌دهند که فقط روی چند اندازه متداول تست کرده باشیم.

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

فضای واقعی مرورگر، همیشه برابر با رزولوشن نمایشگر نیست

نکته دیگری که معمولا در محاسبات نادیده گرفته می‌شود، این است که مرورگر بخشی از صفحه را به نوار آدرس، تب‌ها، نوار نشانک‌ها (Bookmarks)، دکمه‌های کنترلی و سایر اجزای رابط کاربری خود اختصاص می‌دهد. بنابراین حتی اگر کاربر از نمایشگر 1080×1920 پیکسل بدون هیچ Scale یا Zoom استفاده کند، فضای واقعی (Viewport) که وب‌سایت در آن نمایش داده می‌شود، معمولاً از این مقدار کمتر است.

اگر قابلیت Scale یا Zoom سیستم‌عامل را نیز به این موضوع اضافه کنیم، اختلاف بیشتر هم می‌شود. برای مثال ممکن است یک لپ‌تاپ با رزولوشن 1080×1920 و Scale برابر با 125٪، در عمل Viewport نزدیک به 1536 پیکسل یا حتی کمتر در اختیار وب‌سایت قرار دهد. اگر کاربر نوار نشانک‌های مرورگر را نیز فعال کرده باشد و طبیعتا پنجره مرورگر را تمام‌صفحه نکرده باشد، این مقدار باز هم کاهش پیدا می‌کند.

به همین دلیل، هنگام طراحی نباید تنها به رزولوشن اسمی دستگاه‌ها تکیه کنیم؛ بلکه باید Viewport واقعی را معیار قرار دهیم. این همان فضایی است که رابط کاربری ما واقعاً در آن نمایش داده می‌شود.

کاربران همیشه از مرورگر تمام‌صفحه استفاده نمی‌کنند

یکی دیگر از فرض‌های اشتباه در طراحی رابط کاربری این است که تصور می‌کنیم کاربر همیشه مرورگر را به‌صورت تمام‌صفحه (Full Screen) باز کرده است.

در عمل، به‌ویژه در ویندوز، بسیاری از کاربران برای انجام چند کار به‌صورت هم‌زمان، دو پنجره را کنار هم (Split Screen) قرار می‌دهند یا گاهی صفحه را بین چند برنامه تقسیم می‌کنند. در این حالت، حتی اگر مانیتور با رزولوشن بالا داشته باشد، ممکن است مرورگر تنها 900 یا حتی 700 پیکسل فضا در اختیار داشته باشد.

این موضوع دیگر فقط به دسکتاپ محدود نیست. بسیاری از گوشی‌ها و تبلت‌های امروزی نیز از قابلیت Split Screen یا Multi Window پشتیبانی می‌کنند. کاربر ممکن است مرورگر را در نیمه صفحه باز کند و هم‌زمان در نیمه دیگر با یک پیام‌رسان، نرم‌افزار یادداشت‌برداری یا ویرایشگر متن کار کند. در چنین شرایطی، عرض واقعی رابط کاربری گاهی به اندازه یک موبایل کوچک یا حتی کمتر می‌شود.

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

تست در اندازه‌های مختلف، بخشی از فرایند توسعه است

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

یکی از ساده‌ترین ابزارها برای این کار، Device Toolbar در ابزارهای توسعه مرورگر Chrome است. با استفاده از آن می‌توان عرض‌ها و دستگاه‌های مختلف را شبیه‌سازی کرد و رفتار رابط کاربری را در شرایط گوناگون مشاهده کرد.

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

این دردسر، بخشی از واقعیت دنیای امروز است

هیچ طراح یا توسعه‌دهنده‌ای از صرف زمان برای رفع ایرادهای مربوط به اندازه‌های مختلف لذت نمی‌برد. طبیعی است که این کار زمان‌بر و گاهی خسته‌کننده باشد.

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

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

در نهایت، Responsive Design تنها به تغییر چیدمان بین موبایل و دسکتاپ خلاصه نمی‌شود؛ بلکه محصول شما باید بتواند با دنیای متنوع دستگاه‌ها و تنظیمات کاربران سازگار باشد؛ دنیایی که هر روز متنوع‌تر از گذشته می‌شود.