کاربر موبایل وقت اضافه ندارد.

طراحی موبایل از اول پروژه آغاز می‌شود

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

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

عنوان و متن باید قابل اسکن باشند

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

دکمه‌ها باید برای لمس طراحی شوند

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

فرم کوتاه‌تر، تکمیل بیشتر

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

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

سرعت را با ظاهر معامله نکنید

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

همه چیز را روی دستگاه واقعی آزمایش کنید

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

معیار موفقیت، انجام کار است

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