انعطاف پذیری فقط به رقصنده ها و بالرین ها و ژیمناست ها کمک نمی کند بلکه برای طراحان UX هم بسیار مهم است که عضلات منعطفی داشته باشند تا طرح  زیبا و کارآمدی را خلق کنند البته طراحان باید بیشتر روی انعطاف عضله مغزشان کار کنند! طراحی adaptive و responsive که به ترتیب به آن طراحی تطابق پذیر و تعاملی هم گفته می شود با هم تفاوت هایی دارند که در ادامه به تشریح آن خواهیم پرداخت.

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

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

قبل از اینکه بتوانیم از طریق تلفن های همراه و تبلت ها به اینترنت دسترسی پیدا کنیم، همه چیز ساده تر بود. حضور آنلاین به معنای طراحی وب سایتی بود که فقط نیاز به نمایش روی صفحه دسکتاپ  و شاید لپ تاپ داشت.  اما الان باید اندازه های زیادی از صفحه نمایش رومیزی و لپ تاپ گرفته تا صفحات کوچکتر تلفن همراه و تبلت  را در نظر گرفت و اگر صفحه وب به درستی روی صفحه نمایش داده نشود، کاربر به سرعت صفحه را ترک می کند. دو روش برای اطمینان از بهینه سازی وب سایت برای موبایل ، تبلت ، لپ تاپ و کامپیوتر وجود دارد: طراحی واکنش گرا ( responsive) و طراحی تطبیقی ( adaptive) در حالی که هر دو برای حل یک مشکل در نظر گرفته شده اند، از استراتژی های متفاوتی استفاده می کنند.

دانستن تفاوت بین این دو رویکرد به شما کمک می کند تصمیم بگیرید که کدام یک برای پروژه UX بعدی شما بیشتر منطقی است.
در این مقاله ما طراحی adaptive و طراحیresponsive (که طراحی پاسخگو و سازگار هم در برخی متون ترجمه شده است) را تعریف کرده و سپس جوانب مثبت و منفی هر یک را بررسی می کنیم. پس تا انتها با مقاله “طراحی adaptive در مقایسه با طراحی  responsive” که از سری مقالات آموزش طراحی تجربه کاربری آکادمی آمانج است همراه باشید.

بیشتر بخوانید: “۸ متد تحقیقات کیفی در UX“

طراحی responsive چیست؟ ;  طراحی واکنش گرا

وب سایتی که با طراحی responsive ریسپانسیو ایجاد شده است یک سایت را برای هر دستگاهی به درستی ارائه می دهد ، یعنی آن سایت روان است و بر اساس اندازه و جهت دستگاه ، طرح و ظاهر آن تغییر می کند.

توسعه دهندگان از CSS استفاده می کنند تا اطمینان حاصل شود که هر صفحه از سایت می تواند بر اساس اندازه نمای  کاربر (viewport) دوباره قالب بندی شود و فقط باید یک پایگاه کد برای سایت ایجاد کنند. آنها از چیزی به نام نقاط شکست breakpoints استفاده می کنند تا به سایت بگویند چه زمانی باید تنظیم شوند تا اندازه های مختلف صفحه نمایش را در خود جای دهد.

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

به گفته Amy Schade از گروه Nielsen Norman، طراحان UX که در ایجاد یک طراحی responsive مشارکت دارند ، باید از نزدیک با توسعه دهندگان همکاری کنند تا مطمئن شوند که طرح در اندازه های مختلف صفحه قابل استفاده است. تجربه کاربر همراه با عناصر صفحه تغییر می کند ، بنابراین برای طراح UX مهم است که اطمینان حاصل کند که سایت در هنگام تغییر شکل ، قابلیت استفاده خود را حفظ می کند. یک راه برای انجام این کار این است که مطمئن شوید مهمترین محتوا در دستگاه های مختلف اولویت بندی شده است ، به ویژه در کوچکترین اندازه صفحه نمایش.

طراحی adaptive چیست؟ (طراحی تطبیقی)

در طراحی adaptive ، طرح وب سایت متفاوتی برای صفحه هر دستگاه ایجاد می شود. با بارگیری، وب سایت اندازه صفحه را تشخیص می دهد و طرح مورد نظر برای آن  viewport را ارائه می دهد. در واقع  می توانید برای هر یک از شش اندازه صفحه نمایش معمولی از بسیار کوچک تا بسیار بزرگ ، تجربه کاربری متفاوتی ایجاد کنید: 320 پیکسل ، 480 پیکسل ، 760 پیکسل ، 960 پیکسل ، 1200 پیکسل و 1600 پیکسل.

با این حال به دلیل اینکه طراحی وب سایت برای شش اندازه مختلف صفحه نمایش بسیار وقت گیر است، می توان با مراجعه به تجزیه و تحلیل کاربران برای نسخه موجود وب سایت، خود را به اندازه صفحه نمایش را که کاربران بیشتر به آن دسترسی دارند ، محدود کرد. به عنوان مثال  اگر تجزیه و تحلیل نشان می دهد که اکثر کاربران از این سایت در Apple iPad و تلفن همراه Samsung Galaxy خود استفاده می کنند ، شما تجربه کاربری را برای این دو اندازه صفحه به طور خاص به جای هر شش اندازه صفحه نمایش ممکن طراحی می کنید.

مزایای طراحی responsive

از دیدگاه طراح UX بزرگترین مزیت طراحی responsive این است که به میزان قابل توجهی کار کمتر نسبت به طراحی adaptive نیاز دارد، هم برای ایجاد آن در ابتدا و هم برای حفظ آن.

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

 سایت های responsive نیز در رتبه بندی موتورهای جستجو بهتر عمل می کنند، زیرا برای موبایل مناسب هستند.

معایب طراحی responsive

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

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

مزایای طراحی adaptive

برای یک طراح UX می توان طرح بندی های مختلف مورد نیاز برای یک طراحی  adaptive  ​​را آسان تر کرد زیرا به سادگی نیاز به ایجاد wireframes برای عرض ثابت هر اندازه صفحه دارد. این بدان معناست که طراح UX کنترل کاملی بر روی هر چیدمان دارد و می تواند اطمینان حاصل کند که تجربه کاربر برای هر اندازه صفحه نمایش بهینه است.

 در نتیجه اگر طراح UX معتقد باشد که محتوا های مختلف برای اندازه های مختلف صفحه نمایش نشان دهد، می تواند این کار را انجام دهد. به عنوان مثال  یک سایت adaptive برای خدمات تحویل غذا ممکن است شامل یک صفحه اصلی برای یک رایانه رومیزی باشد که گزینه های رستوران و دسته های مختلف غذا را به همراه ویژگی جستجوی مکان رستوران نشان می دهد. در همین حال  صفحه اصلی همان سایت در تلفن همراه ممکن است فقط دارای ویژگی جستجوی مکان رستوران باشد. پیاده سازی سایت های adaptive ​​برای توسعه دهندگان آسان تر است چون فقط کد لازم برای اندازه صفحه نمایش داده شده را ارائه می دهند ، مدت زمان  بارگزاری بسیار سریعتر از سایت های responsive دارند. گفته می شود  طراحی adaptive ​​می تواند برای طراح UX بسیار مفید باشد.

معایب طراحی adaptive

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

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

۶ نکته کلیدی طراحی adaptive در مقایسه با طراحی  responsive

اکنون باید درک اساسی از طراحی responsive و طراحی adaptive و مزایا و معایب هر دو رویکرد داشته باشید. همانطور که تصمیم می گیرید کدام روش برای پروژه UX بعدی شما بهتر جواب می دهد، به یاد داشته باشید که:

۱- یک طراحی responsive می تواند طرح و ظاهر صفحه را بر اساس اندازه صفحه نمایش دستگاهی که به آن دسترسی دارید تغییر دهد، از یک رایانه رومیزی بزرگ به یک تلفن همراه کوچک.

۲- طراحی adaptive ​​مستلزم ایجاد یک طرح بندی متفاوت برای هر دستگاهی است که وب سایت به آن دسترسی پیدا می کند.

۳- طراحی responsive اغلب برای ایجاد یک طراح UX کار کمتری می طلبد، اما آنها مجبورند با توسعه دهنده همکاری کنند تا مطمئن شوند که طراحی سایت در هر اندازه صفحه نمایش قابل استفاده است.

۴- طراحی adaptive ​​نیاز به یک طراح UX دارد که حداکثر شش نسخه مختلف از یک وب سایت را برای صفحه های با اندازه های مختلف ایجاد کند. در حالی که این کار بسیار زیادی می برد، طراح UX را قادر می سازد تا تجربه کاربری را برای هر دستگاهی که این طرح بندی ها را پوشش می دهد، بهینه کند.

۵- طراحی responsive اغلب برای سایت های بزرگتر که از ابتدا طراحی می شوند بهترین گزینه است.

۶- طراحی adaptive ​​اغلب برای سایت های کوچکتر که در حال بازخوانی هستند بهترین گزینه است.

You put water into a cup it becomes the cup

you put water into a bottle it becomes the bottle

you put water in a teapot, it becomes the teapot

حالا شما باید چه کنید تا یک طراح ریسپانسیو و ادپتیو خوب شوید

برای موفقیت در هر زمینه ای بهتر است در شروع از یک آموزش خوب و جامع کمک گرفت پس:

• اول از همه دوره آموزش UX آکادمی آمانج را ثبت نام کنید.
• دائم خودتان را به روز نگه دارید و مقالات سایت های معتبر را دنبال کنید.
• سایر مقالات مربوط به UX آمانج را مطالعه کنید که همگی منابع معتبری دارند.

منبع این مقاله: careerfoundry