طراحی ریسپانسیو ( Responsive ) از ایده تا اجرا !

با شنیدن نام ریپسپانسیو ( responsive ) یا واکنش گرا این تصویر برای ما تداعی میشود که وب سایتی که واکنش‌گراست از طریق موبایل و سایر دیوایس‌ها در دسترس است، ولی واقعا چند درصد از این وب سایتهای ریسپانسیو قابل استفاده هستند؟!

یکی از مشکلات عمده اشخاصی که در حوزه UI/UX و فرانت‌اند کار می‌کنند پیاده سازی وبسایتی ریسپانسیو و کارا مطابق نظر مشتری یا صاحب پروژه است که با وجود عدم آشنایی با این مفهوم قصد دارد همه موارد داخل وبسایت که از طریق دسکتاپ قابل دسترس است روی موبایل و تبلت هم وجود داشته باشد!

قبلا در مقاله نوشته بودم که همیشه حق با مشتری نیست!

نکته : پروژه‌ای که ما برای کارفرما پیاده‌سازی می‌کنیم قطعا باید مورد پسند کارفرما باشد ولی این به این معنا نیست که هر چیزی که کارفرما درخواست داشت درست است، باید این اعتماد را ایجاد کنیم که کاری که انجام می‌شود بر اساس تجربه و دانشی است که در نهایت به نفع کارفرما تمام می‌شود و رابطه‌ی کاری برد-برد را مدنظر داریم در واقع این هنر توسعه دهنده است که چطور کارفرما را قانع کند.

پرسش و پاسخ برای درک یک واقعیت!

بیایید با طرح دو سوال به سبکی بهتر به موضوع بپردازیم :

  • چرا هنگام چک کردن و یا انتقال وجه از حساب بانکی خود از  وب‌سایت اصلی بانک موردنظر استفاده نمی کنید؟
  • چرا اپلیکیشن بانک مورد نظر را دانلود و از آن برای بررسی موجودی و …. استفاده می‌کنید؟

پاسخ ۱ : به این‌خاطر که فقط اطلاعات کاربردی و موردنیاز نمایش داده میشود و کار کردن با آن بسیار راحتتر از وب سایت برروی موبایل است.

پاسخ ۲ : به این خاطر که وب‌سایت فونت ریزی داره و اطلاعات اضافی زیادی وجود دارد.

پاسخ ۳ : سرعت بارگذاری پایین است، امکان انتخاب منو‌ها و آیتم‌ها سخت است و….

در واقع در نسخه ریسپانسیو فقط و فقط اطلاعاتی که موردنیاز کاربر است بر اساس نیاز نه سلیقه شخصی به نمایش بذاریم.

لازم است تاکید کنم هر پروژه ای بر اساس ماهیتی که دارد سبک اجرای آن متفاوت است، برای مثال وقتی پروژه مورد نظر ما یک وبلاگ است که درآمد این وبلاگ از تبلیغ هایی است که قرار می‌دهد قطعا ساختار طرح ریسپانسیو آن متفاوت خواهد بود با پروژه‌‌های دیگر.

یک سوال که اینجا مطرح می‌شود این است که این نیاز کاربران را از کجا تشخیص دهیم؟

 

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

در واقع ما وب‌سایت و پروژه را باید برای مشتری طراحی کنیم نه کارفرما! چونکه مشتری کارفرما رو به هدفی که می‌خواهد می‌رساند که این هدف می‌تواند پول و درآمد بیشتر باشد.

برای مثال یکی از دوستان من که در یکی از شرکت‌های بزرگ فروشگاهی فعالیت داشت، اظهار داشت که فروش محصولات فروشگاهی نسبت به بازدید صفحات محصول کمتر از مقدار مورد انتظار بود. بعد از تحلیل و بررسی رفتار کاربران و تغییر رنگ دکمه خرید و مکان دکمه خرید فروش محصولات را به میزان ۲۰ درصد افزایش دادند و این یعنی موفقیت در پروژه.

در نهایت لازم است تاکید کنم راه تشخیص اینکه کدام مورد بهتر و بهینه‌تر است تست و تحلیل نتایج است، یکی از راههایی که خیلی میتواند کمک کند A/B Testing است که مثلا به صورت رندم برای برخی کاربران استایل به یک سبکی نمایش داده شود و نتایج بررسی شود. این مورد مخصوصا در ایمیل مارکتینگ بسیار کاربردی و تاثیرگذار است که با استفاده از ابزارهایی همچون میل چیمپ و میلرلایت و … میتوان این موارد را تست کرد.

معرفی ابزارهایی برای آنالیز و تحلیل وب‌سایت و رفتار کاربران :

شما می‌توانید از ابزارهایی که وب‌سایت‌های زیر ارائه می‌دهند استفاده نمائید تا روند بهبود و رشد وب‌سایت خود را فرآهم کنید.

۱. گوگل آنالیتیک –  Google Analytics

۲. هات‌جار – Hotjar

۳. کریزی اِگ – Crazy Egg

در صورت تمایل می‌توانید کلمه Heat Map را در گوگل جستجو نمائید تا در رابطه با این موارد بیشتر مطالعه کنید.

 

دیباگ وب سایت روی گوشی موبایل

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

چند لینک مفید :

در مورد مفاهیم واکنش گرا بودن وب سایت و اصول آن قبلا مقالاتی را در این زمینه نوشتم که می توانید آنها را مطالعه نمائید :

توصیه هایی برای ایجاد وب سایت های بهینه شده برای گوشی های هوشمند

طراحی سایت واکنش گرا : ۶ نکته برای ارتقای عملکرد

اصول نویگیشن واکنش‌گرا در وب سایت های پیچیده

در این مقاله قصد دارم ابزاری را معرفی کنم که برای خود من بسیار جذاب بود و مشکلات زیادی را برای من حل کرد.

البته لازم است تاکید کنم که این ابزار برای دیباگ نهایی که وب سایت شما روی هاسته و به صورت آنلاین قابل مشاهده است کاربرد داره، در غیر اینصورت من خودم شخصا با Inspector گوگل کروم همه حالتهای واکنش گرایی ( responsive ) وب سایت را انجام میدم.

Google Chrome Inspector Element

دیباگ وبسایت به صورت آنلاین با مرورگر سافاری :

در صورتیکه گوشی آیفون داشته باشید، در قسمت تنظیمات مرورگر سافاری امکانی برای دولوپرها وجود داره به نام Web Inspector که در قسمت Advanced میتوانید آن را فعال نمائید.

پس از فعال کردن آن روی مرورگر لپ تاپ و تنظیمات گوشی موبایلتون، با کابل گوشی خود را به لپ تاپ وصل کنید، در قسمت زیرمنوی تب Develop نام گوشی موبایل شما نمایش داده میشود وقتی ماوس را روی آن قراردهید وبسایتی که در حال حاضر روی گوشی شما باز است را نشان می دهد که با کلیک روی آن ، Inspector باز میشه و با تغییر روی آن میتوانید کلیه قسمت ها را دیباگ کنید و مستقیم روی گوشی شما هم نمایش داده میشه که کمک فوق العاده ای به دولوپرها میکنه.

بعد از وصل کردن گوشی موبایل به لپ تاپ، وب سایتهایی که روی گوشی موبایل باز هستند را میبینیم که یکی از انها را انتخاب میکنیم.

safari developer tools

بعد از انتخاب وب سایت ، اینسپکتور سافاری بر روی لپ تاپ باز میشه که با تغییر بر روی آن میتوان تغییرات را بر روی گوشی موبایل مشاهده کرد.

developer tools iphone

با تغییر ساده بالا، تغییرات را بر روی گوشی موبایل میبینیم :

safari inspector develop tools

نکته : من این امکان را روی لپ تاپ مک و گوشی آیفون چک کردم و نمیدونم برای اندروید در دسترس است یا خیر.

دیباگ وبسایت به صورت آنلاین بر روی گوشی اندروید

برای کسانی که از گوشی اندروید استفاده میکنند خبر خوب این است که موزیلا فایرفاکس همچین امکانی را فرآهم نموده است که می توانید آن را مشاهده نمائید.

Debugging Firefox for Android over USB

شاد باشید.