مشاهده وبسایت رایگان اس ام اس دریافت سامانه پیامک رایگان

12 روند خوب، بد و زشت طراحی وب در سال 2016


 تاریخ : ۱۳۹۴/۱۰/۱۷ 154 Like

12 روند خوب، بد و زشت طراحی وب در سال 2016

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

نکته:

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

یکدست سازی (همگن سازی) طراحی وب

اگر مقاله ی Dribbblisation of web design را خوانده باشید، میدانید که منظور از یکدست سازی چیست. بسیاری از سایت هایی که جوایز متعدد برنده میشوند، از روش "من هم همینطور" استفاده میکنند. یک نشان "وبسایت برتر روز" لزوما بمنظور نوآوری به سایت ها اهدا نمیشود، بلکه معمولا بخاطر بروز بودن روش طراحی است، البته این همیشه هم چیز خوبی نیست.
 
درباره استاندارد سازی وبسایت، گفتنی ها بسیار است. اگر همه درگاه های پرداخت عینا مشابه هم کار میکردند کارت های اعتباری بسیار کمتری مسدود میشدند، اما، بعنوان مثال در وبسایت AgencyLand فایده عینا شبیه به رقبا بودن چیست؟
 
فکر میکنید اغراق میکنم؟ دوباره فکر کنید...
 
برخی سایت های سازمانی زیبا. ممکن است در حال نزدیک شدن ولی احتمالا ما به طراحی های منحصر به فرد نزدیکتر میشویم. pic.twitter.com/ZgvdrMLS81
 
تیم کِینز (@timcaynes) 12 ژانویه 2015
 
در میان نرم افزارهای سرویس دهی آنلاین B2B (B2B SaaS)، که اجبارا وبسایت هایی با یک جدول سه ستونه دارند نیز همینطور است. در واقع تم ها و قالب های آماده بسیاری وجود دارند که به شرکت ها کمک میکنند که مشابه هم بنظر آیند. مطمئن نیستم که این چیز بدی باشد، اما منحصر بفرد بودن را کاهش میدهد.
 
همگن سازی بخشی گسترده از روش طراحی است. خود من بیشتر وقتم را در سال 2015، صرف انتخاب بهترین نوع خودرو کردم، بیشتر به همین خاطر که واقعا "برتر محض" وجود ندارد.
 
wilsondan@ danbarker@ نمیدانم کدام خودرو را انتخاب کنم، همه آنها بسیار شبیه به هم هستند (via @ade3: https://t.co/S9EBqr1Y6P) pic.twitter.com/v1iBGDCReK
-کریس لِیک (@lakey)  7 نوامبر 2015

الگو ها، نه صفحات

نقل قولی از وبسایت فوق العاده ی UI-Patterns:

"الگو ها، راه حل های تکراری برای حل مشکلات معمول طراحی هستند. الگو های طراحی مراجع تقلیدی برای طراحان رابط کاربری با تجربه هستند."
همانطور که وینس اسپیلمن میگوید: "تیم های طراحی مدرن ابتدا اجزا (Components) را طراحی میکنند؛ رابط های کاربری چیزی نیستند جز کنار هم چیده شدن خردمندانه اجزا."
به روش طراحی متریال گوگل در اکثر اینگونه مقالات اشاره شده، که اگر به آن آشنایی ندارید، ارزش دیدن را دارد.
طراحی جدید Codeacademy نیز بر اساس 10 اصل برتر طراحی و الگو هایی که میتوان از آنها بارها استفاده کرد، بهمراه نمونه رابط های کاربری، انجام شده است. ابزار (toolkit) رابط کاربری Codeacademy در ابتدای پروژه را در زیر میبینید:
 

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

انیمیشن های در حد استاندارد های دیزنی

شاید Flash مرده باشد اما با CSS، HTML 5 و jQuery نیز میتوانید کار های شگفت انگیزی انجام دهید. مشکل اینجاست که اکثر اوقات، طراحان به حد کافی از خود خویشتنداری نشان نمیدهند.
خود من به شخصه طرفدار پر و پا قرص طراحی متحرک هستم، زیرا میتواند به سادگی و از روش های غیر منتظره، به وبسایت روح ببخشد. اما مشکل اینجاست که وقتی همه چیز در حال حرکت، چشمک زدن و چرخیدن و تلو تلو خوردن باشد، انیمیشن خیلی زود کهنه و دلزننده میشود.
 
سوفی پکستون (Sophie Paxton) با نوشتن مقاله ی gratuitous animation این مورد را نشان میدهد. به 5 نکته این مقاله توجه کنید:

حرکت در طراحی رابط کاربری:

برخی اصول که برای خود من جواب پس داده اند و توصیه میکنم:
• استفاده هر انیمیشن را طوری تنظیم کنید که به کار کاربر بیاید. صرفا جذاب بودن انیمیشن کافی نیست.
• طول هر انیمیشن را زیر 300 میلی ثانیه نگه دارید.
• از افکت Linear animation easing بپرهیزید زیرا سبب کند و ناجذاب و مکانیکی بنظر رسیدن آن میشود.
• 99% انیمیشن ها باید از یک Animation easing ساده Ease-in و Ease-out استفاده کنند.
• به انیمیشن های غیر عادی همچون Spring و Bounce و... بندرت احتیاج خواهید داشت.

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

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

 

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

همچنین Spotify نیز کمی قبل تر در امسال حرکت دیوانه واری کرد، البته اگر هزاران توییت درمورد لوگوی جدیدش را جدی بگیریم. به نظر میرسد که اکثر مردم از لوگوی سبز روشن جدید آن متنفر باشند.

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

تار کردن (Blur) عکس پس زمینه

مهندسین فیس بوک درباره تکنیک blur and scale نوشته اند. این تکنیک یک عکس کوچک را کشیده و بزرگ کرده، افکت تار کننده ی Gaussian Blur را روی آن اعمال کرده و به تدریج آن را بارگذاری میکند.
فیس بوک پی برد که این روش سرعت بارگذاری صفحات را تا 30% بالا میبرد – یک برگ برنده بزرگ. برای اینکه بدانید چگونه این تکنیک را اعمال کنید به این پست که توسط Emil Björklund نوشته شده مراجعه کنید.

 

حالت بارگذاری Subtle

فیس بوک همچنین حالت بارگذاری Subtle را به صفحات newsfeed خود افزوده، تا پلی میان صفحه باز نشده با صفحه کاملا باز نشده ایجاد نماید. بجای گذاشتن یک آیکون Loading ساده.
یک پست فوق العاده توسط Vince Speelman در وبسایت nine states of design، این حالت و موارد مربوط به آن را بررسی میکند و ارزش خواندن را دارد.

 

وبسایت های Mullet

عاشق این اصطلاح که اولین بار توسط نویسنده Redditor به نام ironmetal در پستی به نام "روند توسعه وب ضد کاربردی" گفته شد هستم. این اصطلاح به خوبی زیبایی شناسی اولیه در طراحی وب را توصیف می کند.
"وب درحال تجربه چیزیست که من به آن دهه 80 وب میگویم. گزینه ها و قابلیت های بسیار زیادی وجود دارند و همه بدنبال روشی برای افزودن آنها به وبسایت خود هستند. حالا ما کپه ای زباله داریم که فکر میکنیم زیباست، اما شدیدا بی استفاده و اضافیست. 10 سال بعد برمیگردیم و به این Mullet وبسایت ها میخندیم."
 
تکنولوژی امکانات خوبی فراهم میکند، اما تکرار میکنم: صرفا چون میتوانیم، نباید هر کاری را انجام دهیم.
با این وجود، چه کسی یک Mullet زیبا را دوست ندارد ؟

 

پیش بارگذار ها (Preloaders)

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

Scrolljacking

تابحال در وبسایتی بوده اید که در آن موس تان غیر عادی عمل میکند؟ بدون شک scrolljack شده اید. نویسنده ی Reddit،  poisondwarf در این باره میگوید:
"چرا اینکار اینقدر پرطرفدار است؟! اصلا مهم نیست که همه چیز را خراب کردید و حالا اسکرولر موس من 10 برابر سریعتر اسکرول میکند! فقط عملکرد معمول و مورد انتظارش را تغییر ندهید! بخصوص عملکرد عادی سیستم عامل و لوازم جانبی را. این نهایت سطحی نگریست که فکر میکنید کل دنیا از سیستم عامل و موس شما استفاده میکنند؟ پس میتوانید از انیمیشن های مضحک که پدر مرورگر را در می آورند، استفاده کنید؟ هیچ دلیلی برای دستکاری روال عادی اسکرول وجود ندارد، همین و بس."
کاملا موافقم. تنها یک سادیسمی میتواند از چنین اذیتی برای کاربران لذت ببرد.
اگر وقت خود را برای اینجور کارها هدر میدهید، باید جداً جلوی خود را بگیرید.
همانطور که در ابتدای مقاله نیز اشاره کردم، امیدوارم طراحان با استعداد، که در حال کار روی وبسایت های عالی هستند و به تجربه کاربری اهمیت بیشتری میدهند، را الگو قرار دهیم.

پاپ-آپ های پرخاشگر منفعل

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

 

منو های همبرگری

در مورد منوی همبرگری بسیار بسیار نوشته شده. از نظر من در زمان خود ایده ی خوبی بوده، اما حالا مشخص شده که راه حل های بهتری هم وجود دارند. در مقابل منوی همبرگری، منو های قابل مشاهده، در زمینه های درک، تعامل و رساندن کاربر به هدف، برتری هایی اثبات شده ای دارند.
بسیاری از کمپانی های بزرگ نیز در سال گذشته منو های همبرگری خود را با چیز واضحتری جایگزین کرده اند. همیشه یک علامت برای اینکه اطلاعات قطعیت اثبات شده دارند، وجود دارد.
برای مثال، یوتیوب، چند ماه پیش منوی همبرگری خود را کنار گذاشت...
خداحافظ یوتیوب برگر https://t.co/mi1HTa9m3z pic.twitter.com/7toXXt4KDZ
-لوک ورابلسکی (Luke Wroblewski) (@lukew) 6 آگوست 2015
 
گوگل، اپل و مایکروسافت نیز منوی همبرگری را کنار گذاشته اند. بقیه نیز از همین الگو پیروی خواهند کرد.

صفحات سنگین سنگینتر می شوند

اگر اخیرا با یک اتصال اینترنت ضعیف به اینترنت وصل شده باشید، پی میبرید که صفحات بسیار بسیار بسیار کند باز می شوند. حجم صفحه ها –از دیدگاه طراحی- از کنترل خارج شده.
چند دهه قبل، قانون این بود که هر صفحه حجمی زیر 100 کیلوبایت داشته باشد، تا حدی که گوگل در نتایج جستجوی خود صفحات سنگین تر از این حجم را نشان نمیداد. چند سال بعد، گوگل این قانون را بازنشسته کرد و صفحات شروع به سنگین شدن کردند.
در 2010، با توجه به حجم یک میلیون سایت برتر و گزارش  HTTP Archive ، متوسط حجم صفحات به 702 کیلوبایت رسید.

 

از آن زمان صفحات شروع به افزایش حجم کردند. در 2015، متوسط حجم صفحات به 2,219 KB رسیده – بیشتر از 3 برابر پنج سال قبلشان.

 
بنظر میرسد که اسکریپت های کند، عکس ها (که فشرده هم نشده اند)، فیلم ها و فونت ها بیشترین تقصیر را دارند.
با همه توجهی که به طراحی بر اساس تمام انواع دستگاه ها میشود، این خبری بدی برای کاربران موبایلیست که بهWi-Fi  دسترسی ندارند.
برخی سایت ها از بقیه بدتر هستند، بعنوان مثال صفحه اصلی سایت Daily Mail حجمی 8.8 مگابایتی دارد. زیادی حجیم است، اینطور نیست؟

 

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

منبع : searchenginewatch.com
Like 154

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

جستجو
 

خرید پنل اس ام اس (رایگان) در چند لحظه و دریافت سامانه پیامک با امکانات کامل و نامحدود پنل اس ام اس
سایر خدمات ما
طراحی سایت
طراحی و تولید نرم افزار
نرم افزار جامع دهیاری
جستجوگر هوشمند خبر
رایگان اس ام اس
پنل اس ام اس تعرفه پیامک نمایندگی
ثبت نام رایگان شماره اختصاصی ورود به سامانه
سامانه پیام کوتاه وب سرویس پیامک انتقال پیامک
سوالات متداول امکانات سامانه پیامک تماس با ما
وب سرویس ارسال پیامک ویژه برنامه نویسان پلاگین وردپرس ارسال پیامک
ارسال پیامک از طریق url- وب سرویس ارسال پیامک rest انتقال پیامک های دریافتی به سایت شما
تماس با ما
آدرس : مازندران، بابل، خیابان نواب صفوی، روبروی اشرفی 16
تلفن : 01132290134
فکس : 02189774876
ایمیل : info [a] raygansms.com
پیامک : 30006859
تلگرام : @RayganSMS