سیر تکاملی طراحی واکنشگرا

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

پیدایش M.DOT

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

افت سایتهای M.DOT

با اینکه سایتهای M.DOT مسائل مربوط به تجربه موبایل رو هدف گرفته بودند اما به همه نکات مرتبط با رزولوشن نمایشگر کوچیک توجه نداشتند. بعضی از مشکلات این سایتها عبارت بودند از:
1- بازدیدکننده رو به یه URL دیگه ریدایرکت میکردند. سایتهای M.dot در واقع ماهیتی جدا از نسخه دسکتاپی داشتند.
2- اولین زمان بارگذاری اونها کند بود. چون باید به یه آدرس دیگه ریدایرکت میشدند، تا عناصر جدید روی سایت بارگذاری بشن طول میکشید.
3- بخاطر ریدایرکت مشکلات تکمیلی سئو بوجود میومد. گوگل از ریدایرکت خوشش نمیاد.
4- اشتراک گذاری اجتماعی رو پیچیده میکردند. اگه بخواهید یه آدرس M.dot رو به اشتراک بذارید و یه نفر این آدرسو از کامپیوترش باز کنه، باز هم به سایت موبایلی ریدایرکت میشد.

کشف یک راه بهتر

یه وبسایت امریکایی محاسبه کرده که از دی ماه 95 تا فروردین 96، هر امریکایی بصه طور متوسط ماهی 87 ساعت با گوشی هوشمندش داشته اینترنت گردی میکرده. تازه فقط وبگردی که نیست، خرید آنلاین با دستگاه های کوچیک تر به بیش از 50% رسیده. 
با توجه به اینکه این اعداد و ارقام روز به روز دارن بیشتر میشن، زیبا بودن و در عین حال قابل درک بودن وبسایتها اهمیت بیشتری پیدا کردند. یعنی باید تصوری که از وبسایت داریم رو به کلی تغییر بدیم. 
اینجاست که طراحی واکنشگرا معرفی میشه.

طراحی برای یک تجربه بهتر

اهمیت طراحی واکنشگرا

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

طراحی برای کارایی و نرخ تبدیل

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

طراحی برای ستونی شدن و جریان

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

انعطاف پذیری

سلسله مراتب باید دست نخورده بمونه، راحت بشه وبسایت رو دنبال کرد و ساده باشه. وقتی دارید وبسایت رو مطابق نمایشگر کاربر مناسب سازی میکنید باید این چهار نکته رو مد نظر قرار بدید:

فونت و سرفصلها:

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

تصاویر و فیلمها:

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

سورس:طراحی سایت دارکوب sitedar.com

سیر تکاملی طراحی واکنشگرا