چه کسی می تواند گیف های(GIF) دهه نود یا محوریت طراحی فلت در همین اوخر را فراموش کند؟

بتازگی شاهد آن بوده ایم که طراحی وب سایت واکنشگرا محبوبیت زیادی یافته است و سایت های بسیاری به این گرایش روی آورده اند تا آمادگی لازم برای ورود به گوشی های موبایل را داشته باشند که امروزه حتی از آپدیت دوستانه موبایل(Mobile Friendly Update) گوگل نیز مهم تر است.

ازدیاد الگوهای واسط کاربری.

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

برخی از افراد همچون Matthew Monbre بدلیل فالو کردن کسانی که سایتی مشابه سایت آنها دارند نیز در این ماجرا مقصرند.

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

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

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

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

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

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

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

انیمیشن های غنی.

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

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

انیمیشن های مقیاس بزرگ. این دسته از انیمیشن ها بعنوان ابزار تعاملی اصلی استفاده شده که تاثیر زیادی بر کاربران میگذارند و افکت هایی همچون اسکرول پارالاکس و نوتیفیکیشن های pop up را شامل میشوند.

انیمیشن های مقیاس کوچک. این انیمیشن ها شامل ابزارهای hover (شناور) و spinner و بارهای بارگذاری هستند و به ورودی کاربری نیاز ندارند. هفت مورد از محبوب ترین تکنیک های پویا نمایی:

انیمیشن های loading. این انیمیشن ها برای سرگرم کردن و دلشاد کردن کاربران در جریان یک تجربه کسل کننده کاربرد دارند. این انیمیشن ها بیشتر در سایت های فلت، مینیمال، نمونه کار(portfolio) و تک صفحه ای استفاده میشوند.

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

منوها و نویگیشن(بدون اسکرول).

امروزه استفاده از منوهای نویگیشن مخفی افزایش زیادی داشته است علی الخصوص که از آنها برای صرفه جویی در فضای اسکرین استفاده میشود. از این انیمیشن ها استفاده میشود تا با کلیک روی یک باتن ویژه منوی پنهان شده آشکار شود و از انتقال نامطلوب جلوگیری شود( مانند کشوی نویگیشن پنهان شده در پشت آیکون همبرگری).

انیمیشن های شناور.

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

نمایش اسلاید و گالری ها.

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

انیمیشن متحرک.

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

اسکرول.

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

انیمیشن ها/ویدئوهای پس زمینه.

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

ریزتعاملات.

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

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

ریزتعاملات به انجام دادن امور یا کمک به شما در انجام امور مختلف گرایش دارند:

نوشتن یک استاتوس یا تکه ای از بازخورد.

مشاهده ی نتیجه یک عمل.

کمک به کاربران برای اداره ی چیزی.

 ریزتعاملات جز حیاتی هر اپلیکیشنی هستند.

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

ریزتعاملات جز مهمی در تمام پروژه های طراحی دیجیتال هستند. طراحی سایت یا طراحی اپلیکیشن موبایلی  که هیچ المان یا گشتاوری برای تعامل نداشته باشد دشوار است.

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

طراحی متریال: جایگزینی غنی برای طراحی فلت.

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

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

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

پیشتر شاهد بودیم که اکثر پروژه های طراحی متریال به طراحی اپلیکیشن محدود میشد. اما گوگل ماه جولای Material Design Lite را معرفی کرد که بیشتر برای سایت ها مناسب می باشد. با اینحال این طراحی با هدف ایجاد یک واسط و تجربه کاربری بینظیر در دستگاههای مختلف به بازار عرضه شد. طراحی متریال Lite از CSS وانیل، HTML و جاوا اسکریپت استفاده میکند و هدف از تولید آن دادن ظاهر و احساس طراحی متریال به سایت ها بوده است.

طراحی متریال Lite به هیچ فریم ورک خاصی تکیه ندارد بنابراین طراحان می توانند برای خلق سایت خود از ابزارهای front end استفاده زیادی ببرند. این طراحی همچنین درخصوص کدها نیز کاربرد زیادی دارد.

طراحی واکنشگرا.

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

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

براساس Guy's Pod برای تضمین اینکه عملکرد و کارایی طراحی واکنشگرا به حداکثر ممکن برسد طراحان باید:

از جاوا اسکریپت و CSS برای بارگذاری تصویر با استفاده از تگ  display:noneاستفاده نکنند. چرا که تصاویر همچنان در دستگاه دانلود شده و به صفحه وزن غیرضروری می افزاید.

استفاده از تصاویر واکنشگرا که با استفاده از درصد تعریف شده اند.

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

استفاده از –RESS واکنشگرا و سرور ساید(سمت سرور).

تست عملکرد بمنظور اندازه گیری موثر و بهینه سازی سایت .

عملکرد تنها از لحاظ تجربه کاربری اهمیت ندارد بلکه از لحاظ Mobile Friendly update گوگل که در آوریل 2015 منتشر شد نیز اهمیت دارد. طراحی وب واکنشگرا به لطف ضرورت پایین نگاه داشتن وزن صفحه با مینیمالیزم، سازگاری زیادی دارد. استفاده از کارت ها و طراحی واکنشگرا با یکدیگر نیز سرانجام خوبی دارد زیرا بازسازی کارت ها برای تناسب با انواع نقاط انفصال یا اسکرین های مختلف آسان است.

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

شکی نیست که طراحی واکنشگرا کارایی و تطبیق پذیری بالایی دارد اما برای خلق یک تجربه کاربری بینظیر باید سرعت بالایی داشته باشد.

ماندگاری طراحی فلت.

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

با گذشت زمان گرایش های دیگری در طراحی فلت اهمیت یافته اند که به آنها اشاره میکنیم:

سایه های بلند. این سایه ها به طراحی فلت عمق بیشتری میدهند.

طرح رنگ های پرجنب و جوش. قالب ها(templates) و فریم ورک های محبوب واسط کاربری به استفاده از رنگ های پرجنب و جوش در طراحی ها روی آورده اند.

تایپوگرافی ساده. طرح حروف های ساده خوانایی متون در طراحی فلت را تضمین میکنند.

باتن های Ghost. با این باتن ها بدون آنکه از توجه به تجربه کاربری دور شوید می توانید به کارایی و عملکرد بپردازید. باتن های ghost اغلب بعنوان لینک های قابل کلیک و کلی ارائه میشوند که بهنگام کندوکاو توسط کاربران تغییر میکنند.

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

چند توصیه درمورد گرایش های طراحی وب.

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

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