طراحی سایت موبایل‌محور؛ چک‌لیست تجربهٔ کاربر با گوشی

راهنمای آزمون منو، متن، فرم، لمس و سرعت سایت در گوشی‌های رایج.

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

مهم‌ترین کار را نزدیک نگه دار

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

محتوا را برای خواندن سریع بچین

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

با چند وضعیت واقعی آزمایش کن

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

آزمون پنج دقیقه‌ای با گوشی

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

تحویل موبایل‌محور

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

پرسش‌های پرتکرار

آیا موبایل‌محور یعنی نسخهٔ دسکتاپ ساده باشد؟

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

همهٔ مقاله‌ها · خدمت مرتبط