- شنبه ۱۳ دی ۱۴۰۴
وب موبایلی چطور باید طراحی شود؟
طراحی تجربه کاربری برای موبایل
جاناتان استارک، نویسندهٔ کتاب پرفروش «فناوری موبایل» میگوید «اگر کسبوکار شما با استفادهٔ موبایلی سازگار نباشد، کسبوکار شما مرده است».
چکیده
دستگاههای تلفن همراه و موبایل اکنون جهان را تسخیر کردهاند و معنای طراحی وبسایت یا اپلیکیشن را تغییر دادهاند. از سوی دیگر، طراحی برای وب موبایلی پر از محدودیتها و ملاحظات منحصربهفردی است که اگر آنها را درک کرده و به آنها تسلط پیدا کنید، میتوانید راهحلهای جدید و نوآورانه برای اثرگذاری بر کاربران پیشنهاد کرده و استفاده از محصول خود را برای آنها سادهتر کنید.
اگر میخواهید محصول خود را برای موبایل طراحی کنید، باید شیوهٔ استفاده از موبایل و ویژگیها خود دستگاه را نیز در نظر بگیرید. برخی اصول کلی وجود دارند که به شما کمک میکنند طراحی برای موبایل را شروع کنید، اما فراموش نکنید که این اصول جایگزین تحقیق کاربری نمیشوند. اینها دستورالعمل هستند نه قوانین مطلق.
برنامهنویسی موبایل از حوزههای بسیار پرطرفدار است و حتی کسانی که مدرک دانشگاهی برنامهنویسی ندارند میتوانند با گذراندن دورههای آموزنده این کار را شروع کنند. دوره جامع برنامهنویسی موبایل در دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران دورهای عمومی است که طی 240 ساعت دانشپذیران را با اصول برنامهنویسی موبایل آشنا میکند. کسانی که مدرک تحصیلات عمومی مانند دیپلم متوسطه و پیشدانشگاهی را دارند میتوانند در این دوره شرکت کنند.
طراحی وب موبایلی
اگر میخواهید محصول خود را برای موبایل طراحی کنید، باید شیوهٔ استفاده از موبایل و ویژگیها خود دستگاه را نیز در نظر بگیرید. برخی اصول کلی وجود دارند که به شما کمک میکنند طراحی برای موبایل را شروع کنید، اما فراموش نکنید که این اصول جایگزین تحقیق کاربری نمیشوند. اینها دستورالعمل هستند نه قوانین مطلق.
هنگام طراحی برای موبایل باید موارد زیادی را در نظر بگیرید. علاوه بر استانداردهای کلی طراحی تجربهٔ کاربری باید ملاحظات خاصی را نیز برای طراحی موبایلی رعایت کنید. برای نمونه باید به این فکر کنید که میخواهید طراحی موبایلی را با طراحی قبلی ادغام کنید یا خیر؛ آیا میخواهید از طراحی واکنشگرا استفاده کنید یا طراحی تطبیقی.
بسیاری از این موارد به بستر شما مرتبط هستند، یعنی زمینهای که کاربران در آن از دستگاههای موبایل خود استفاده میکنند تا کارهایی که در ذهن دارند را انجام دهند. اگر کاربران شما از طریق رایانهٔ رومیزی به وب موبایلی دسترسی داشته باشند بسیار بهتر است، اما بسیاری از کاربران چنین دسترسیای ندارند. آنها از موبایل خود در فروشگاه، هنگام رفتوآمد روزانه و در کافیشاپ و غیره استفاده میکنند.
جاناتان استارک، نویسندهٔ کتاب پرفروش «فناوری موبایل» میگوید «اگر کسبوکار شما با استفادهٔ موبایلی سازگار نباشد، کسبوکار شما مرده است».
فضا و موقعیت (یا همان بستر) باید در ذهن شما در اولویت قرار بگیرد. در این دوره مردم مجبور نیستند برای اینکه به فضای آنلاین دسترسی داشته باشند پشت میز بنشینند و در فضاهای مختلف میتوانند با دستگاههای خود که به اینترنت متصل هستند تعامل کنند. این بدان معناست که باید به این فکر کنید که چگونه میتوانید عوامل حواسپرتی را کاهش دهید و به کاربران کمک کنید بر کارشان تمرکز کنند.
جاش کلارک نویسندهٔ کتاب «طراحی اپلیکیشنهای عالی برای آیفون» دسترسی به وب موبایل را به سه بخش تقسیمبندی کرده است که عبارتاند از
- کارهای کوچک: یعنی وقتی که کاربران برای مدت کوتاهی بهطور فشرده با دستگاه خود تعامل میکنند.
- کارهای محلی: یعنی زمانی که کاربران میخواهند بدانند اطرافشان چه میگذرد.
- کارهای از سر بیحوصلگی: یعنی زمانی که کاربران کار بهتری ندارند و به سراغ دستگاه خود میروند تا سرگرم شوند.
ملاحظات اولیه برای طراحی وب موبایلی
یک. طراحی برای صفحههای کوچک
در دستگاههای موبایل بهاندازهٔ رایانههای شخصی و لپتاپ فضای نمایش در اختیار ندارید. این بدان معناست که معمولاً باید برای صفحه نمایشهای مختلف طراحی جداگانه انجام دهید. نخست باید تصمیم بگیرید که میخواهید از طراحی واکنشگرا استفاده کنید (که در آن تغییرات در نمایش را خود دستگاه مدیریت میکند) یا از طراحی تطبیقی (که در آن تغییرات را سرورهای شما مدیریت میکنند).
باید بر رویکرد «اولویت با موبایل است» تمرکز کنید، یعنی باید طراحی را برای کوچکترین پلتفرمهای موبایل انجام دهید و از آنجا کمکم به پیچیدگی طراحی بیفزایید. یک روش عالی برای این کار این است که مراحل زیر را طی کنید.
- انواع دستگاهها را براساس اندازهٔ صفحهٔ نمایش گروهبندی کنید و سعی کنید گروههای خود را محدود کنید تا کنترل آنها سادهتر باشد.
- قوانینی مربوط به محتوا و انطباق طراحی را تعریف کنید که به شما امکان دهند محتواها را بهخوبی در هر گروه از دستگاهها نمایش دهید.
- سعی کنید هنگام پیادهسازی طرحبندیهای انعطافپذیر تا حد امکان به استانداردهای وب پایبند باشید.
فراموش نکنید که مرورگرهای مختلفی برای وب موبایل وجود دارند و باید بتوانید هرتعداد از آنها را که میتوانید پشتیبانی کنید.
دو. ناوبری را ساده کنید
صفحه کلید و صفحههای لمسی مانند ماوس ناوبری دقیقی ارائه نمیدهند، به همین دلیل باید کارهای زیر را انجام دهید.
- ناوبری را براساس نحوهٔ کارکردن کاربرد با کاربردهای مختلف محصول اولویتبندی کنید و محبوبترین کاربردها را در بالا قرار دهید.
- سطوح ناوبری مربوطه را به حداقل برسانید.
- برچسبگذاری دقیق را برای ناوبری واضح و مختصر فراموش نکنید.
- دسترسی سریع برای کارکردهای مختلف ارائه دهید.
- به یاد داشته باشید که باید برای بخشهای ضربهزدن روی صفحهٔ لمسی فضایی در حدود ۳۰در۳۰ پیکسل اختصاص دهید.
- لینکها را از نظر بصری متمایز کنید و وقتی فعال میشوند آنها را به شیوهٔ جدید نشان دهید.
- تغییر حالت از نسخهٔ موبایل به نسخهٔ کامل وبسایت را ساده کنید (البته اگر میخواهید نسخههای جداگانه طراحی کنید).
سه. محتواها را به حداقل برسانید
کاربران را با محتواهای بیشازحد خسته نکنید و به فضای کوچک صفحهٔ نمایش آنها احترام بگذارید. حداقل محتوا را قرا دهید و ظاهر لوکس را برای پلتفرم دسکتاپ اختصاص دهید (اما همزمان مراقب باشید که اگر نسخهٔ دسکتاپ شما بسیار لوکستر است، کاری نکنید که کاربران حس کنند در مورد نسخهٔ موبایلی کوتاهی کردهاید).
محتواها باید بهطور یکسان در همهٔ دستگاهها خواندنی باشند، وگرنه بهتر است محتوا را نیاورید. توضیحات هر صفحه را مختصر و مفید بنویسید، بهطوری که برای بوکمارکهای مرتبط مناسب باشند.
چهار. ورودی کاربران را کاهش دهید
هرچه کاربران کمتر مجبور باشند برای کار با محصول شما اطلاعات وارد کنند، از استفاده از آن در موبایل خود بیشتر لذت میبرند. برای این منظور موارد زیر را در نظر بگیرید.
- URLها را کوتاه کنید.
- روشهای ورودی متنوع (ویدیویی، صوتی و غیره) ارائه دهید.
- ورودیهای فرمها را به حداقل برسانید (همیشه میتوانید از کاربران هنگام ورود به نسخهٔ دسکتاپ دادههای بیشتری بخواهید).
- اجازهٔ ورود دائمی را به کاربران بدهید (بیشتر گوشیهای هوشمند با رمز عبور یا اثر انگشت باز میشوند و بسیار ایمن هستند و به همین در آنها خطرات ورود غیرمجاز به سیستم در حالت دسترسی دائمی کمتر از دسکتاپ است).
- نیاز به اسکرولکردن را به حداقل برسانید و تنها در یک جهت امکان اسکرولکردن بدهید.
پنج. توجه کنید که اتصال موبایل به اینترنت پایدار نیست
اتصال موبایلی در مناطقی که سرویسدهی ضعیف است دردسر بزرگی است. کارکردن را برای کاربران خود دشوار نکنید. نقشهٔ دسترسی به اینترنت در سرتاسر جهان نشان میدهد که همهٔ مناطق جهان دسترسی سریع به اینترنت موبایل ندارند. برای جبران این نقیصه کارهای زیر را انجام دهید.
- دادهها را حفظ کنید تا در صورت قطع اتصال از بین نروند.
- اندازهٔ صفحه را بهمنظور بارگذاری سریع به حداقل برسانید.
- شبکههای تبلیغاتی و غیره را حذف کنید، زیرا آنها حجم زیادی از پهنای باند و داده را مصرف میکنند.
- تصاویر را به حداقل برسانید و اندازهٔ آنها را کاهش دهید.
- تعداد تصاویر جاسازیشده را به حداقل برسانید (تا سرعت بارگذاری افزایش یابد)
شش. تجربهٔ یکپارچه و مداوم ایجاد کنید
کاربران هم با موبایل و هم با دسکتاپ کار میکنند و اغلب انتظار تجربهٔ مشابهی از این دو دارند. به همین دلیل باید نکات زیر را رعایت کنید.
- تداوم را حفظ کنید
اگر کاربران از طریق موبایل به فروشگاه وب شما وارد میشوند، باید بتوانند پیگیری سفارشات خود را در دسکتاپ خود نیز انجام دهند.
- باثبات طراحی کنید
گزینهٔ جابهجایی بین کاربری موبایلی و دسکتاپی به دلخواه کاربران را به آنها بدهید.
- برند خود را حفظ کنید
ظاهر و حسی که وبسایت شما به کاربران منتقل میکند باید در همهٔ دستگاههای یکسان باشد. هرگونه انحراف از لوگوی اصلی یا موارد مشابه باعث از دسترفتن اعتماد کاربر میشود وپیامدهای ناخوشایندی دارد.
جمعبندی
موبایل با محیط قدیمی دسکتاپ متفاوت است و هنگام طراحی برای دستگاههای موبایل علاوه بر رعایت استانداردهای تجربهٔ کاربری و کاربردپذیری باید ملاحظات خاص طراحی برای موبایل وب را نیز رعایت کنید. این ملاحظات اغلب شامل متعادلسازی کاربرد هستند، زیرا باید ویژگیهای مورد نیاز را از نسخهٔ دسکتاپ برداشته و فشرده کنید و در این مسیر لازم است دادهها را کاهش دهید، اما درعینحال باید مراقب باشید که هویت برند را حفظ کنید تا اعتماد کاربران به شما از دست نرود.
با وجود دشواریهای طراحی موبایل وب، اگر این کار را بهدرستی انجام دهید طراحی خود را تأثیرگذارتر میکنند و میتوانید کاربران را در مکانها و زمانهای مختلف به استفاده از محصول خود ترغیب کنید. میلیاردها کاربر گوشی هوشمند در جهان نشان میدهند که طراحی برای موبایل وب اکنون یکی از کارهای ضروری طراحان است.
برنامهنویسی موبایل از حوزههای بسیار پرطرفدار است و حتی کسانی که مدرک دانشگاهی برنامهنویسی ندارند میتوانند با گذراندن دورههای آموزنده این کار را شروع کنند. دوره جامع برنامهنویسی موبایل در دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران دورهای عمومی است که طی 240 ساعت دانشپذیران را با اصول برنامهنویسی موبایل آشنا میکند. کسانی که مدرک تحصیلات عمومی مانند دیپلم متوسطه و پیشدانشگاهی را دارند میتوانند در این دوره شرکت کنند.
در دنیای کسبوکار امروز، تحصیلات دانشگاهی برای حفظ ارزش شما بهعنوان نیروی کار بااستعداد و کارآمد کافی نیستند. برای اینکه مزیت رقابتی شخصی خود را حفظ کنید، باید بر آموزش مستمر و مادامالعمر خود سرمایهگذاری کنید. خانواده بزرگ مجتمع فنی تهران هرساله به هزاران نفر کمک میکند تا در مسیر شغلی خود پیشرفت کنند.
اگر شاغل هستید و وقت ندارید در دورههای آموزشی حضوری شرکت کنید، مجتمع فنی تهران گزینههایی عالی برای آموزش مجازی، آنلاین، آفلاین و ترکیبی ارائه میدهد. با شرکت در دورههای کوتاهمدت مجتمع فنی تهران و دریافت مدارک معتبر و بینالمللی میتوانید با اعتماد به نفس مسیر ترقی را طی کنید و در سازمان خود به مهرهای ارزشمند تبدیل شود.
منبع: بنیاد طراحی تعاملی (Interaction Design Foundation)
مترجم: بهناز دهکردی
پرسشهای متداول
مراحل طراحی برای وب موبایلی کداماند؟
- انواع دستگاهها را براساس اندازهٔ صفحهٔ نمایش گروهبندی کنید و سعی کنید گروههای خود را محدود کنید تا کنترل آنها سادهتر باشد.
- قوانینی مربوط به محتوا و انطباق طراحی را تعریف کنید که به شما امکان دهند محتواها را بهخوبی در هر گروه از دستگاهها نمایش دهید.
- سعی کنید هنگام پیادهسازی طرحبندیهای انعطافپذیر تا حد امکان به استانداردهای وب پایبند باشید.
فراموش نکنید که مرورگرهای مختلفی برای وب موبایل وجود دارند و باید بتوانید هرتعداد از آنها را که میتوانید پشتیبانی کنید.
برای کاهش ورودیهای کاربران هنگام کار با وبسایت چه کار باید کرد؟
- URLها را کوتاه کنید.
- روشهای ورودی متنوع (ویدیویی، صوتی و غیره) ارائه دهید.
- ورودیهای فرمها را به حداقل برسانید.
- اجازهٔ ورود دائمی را به کاربران بدهید.
- نیاز به اسکرولکردن را به حداقل برسانید و تنها در یک جهت امکان اسکرولکردن بدهید.
چگونه وبسایت را برای کاربرانی که اتصال اینترنت موبایل ضعیف دارند بهینه کنیم؟
- دادهها را حفظ کنید تا در صورت قطع اتصال از بین نروند.
- اندازهٔ صفحه را بهمنظور بارگذاری سریع به حداقل برسانید.
- شبکههای تبلیغاتی و غیره را حذف کنید، زیرا آنها حجم زیادی از پهنای باند و داده را مصرف میکنند.
- تصاویر را به حداقل برسانید و اندازهٔ آنها را کاهش دهید.
- تعداد تصاویر جاسازیشده را به حداقل برسانید (تا سرعت بارگذاری افزایش یابد).
