کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

به این ۶ شیوه طراحی وب سایت در سال ۲۰۱۶ توجه بیشتری کنید(قسمت اول)

به این ۶ شیوه طراحی وب سایت در سال ۲۰۱۶ توجه بیشتری کنید(قسمت اول)

 

 

شیوه طراحی وب سایت ۲۰۱۶ (۱)

 

در این مقاله به شیوه  طراحی وب سایت ۲۰۱۶ می پردازیم. شیوه ها در طراحی وب سایت مانند شیوه ها در مد , ساکن نیستند و در رفت و آمدند . بعضی اوقات این روش ها به صورت یک نیازمندی و ضرورت به ما مر می شوند ( مانند طراحی Responsive ) روش های دیگر تغییرات صنعتی هستند مانند تفییر از طراحی اسکیومورفیزم (skevomorphism) به طراحی هموار و تخت (flat)

تصمیم اینکه کدام یک از روش ها را دنبال کنید, باید به نیازهای کاربرانتان و نوع کسب و کار بستگی داشته باشد. هرگز تصمیم ما نباید منحصرا براساس این جمله باشد : " تصمیم همان کاری است که وب سایت های Cool دارند انجام می دهند. "

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


۱- پنهان کردن همه چیز در یک منو همبرگری ( Hamburger Menu )


از آنجا که دستگاه های موبایل بسیار رایج شده اند , طراحان وب سایت شروع به ساده سازی مسیرها و پنهان کردن آنها در زیر یک منوی همبرگری کردند. این یکی از شیوه هایی است که به ورژن دسکتاپ وب سایت ها نیز منتقل شده است.
برای مثال , وب سایت Squarespace بدون توجه به نوع دستگاه مورد استفاده در نمایش وب سایت , از این طراحی وب سایت برای خود استفاده کرده است.

 

01 Squarespace

 

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

 

02 Squarespace

 

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

 

03 Time

 

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

به این صورت که جنیفر کاردلو و کاترین ویشتون ذکر کرده اند :
" با این که طراحی مسیریاب کلی سخت است و نگه داری و پشتیبانی آن مشکل است , هنوز هم بسیاری از وب سایت ها بهتر است دسته بندی سطح اول را در جا به کاربران نمایش دهند. این مسئله به راحتی یکی از تاثیرگذارترین راه ها برای کمک کردن به کاربران در درک کردن سریع موضوع و جریان وب سایت می باشد. "

با توجه به این مسائل در اینجا چند روش برای اینکه بدانیم آیا پنهان کردن مسیریاب کلی برای کارتان مناسب است ذکر شده است .

- افزایش شدید و سرسام آور میزان پرش در صفحات فرود . اگر مسیریاب کلی واضح و مشخص نباشد, مرور کردن سایت را برای کاربر مشکل کرده و کاربران منتظر نخواهند ماند.
- مکان هایی که کاربران کلیک می کنند. آیا آنها واقعا منوی همبرگری را کلیک می کنند ؟ اگر کلیک نمی شود و با میزان پرش بالایی ترکیب می شود , آنگاه می دانید که چیزی اشتباه است
این کلیک ها را می توانید با ابزارهای HeatMapping و در وب سایت هایی مانند Crazyegg و Usability Tools بررسی کرد.
برخورد کاربران تعیین می کند که آیا شما بهتر است از یک طرح مسیر پنهانی بر روی وب سایت های تمام صفحه دسکتاپ استفاده کنید یا خیر. قابلیت استفاده و قابلیت پیدا شدن را قربانی زیبایی ساختاری نکنید.

 

۲- گرداننده های صفحات (‌Carousels )

 

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

 

04 Iquadart

 

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

نکاتی برای که بهتر است در نظر بگیرید :‌

- گردانه ها برای سئو سایت و بهینه سازی سایت مضر هستند. عدم وجود محتوا به این معنی است که گرفتن اطلاعات متا از یک صفحه سخت می باشد. این مسئله به طور خاصی واقعیت دارد از آنجا که گوگل دیگر کلمات کلیدی متا را بررسی نمی کند ( در صورتی که بینگ هنوز هم این کار را می کند ) بلکه اطلاعات کلمات کلیدی را از صفحه بر می دارد . البته که شما می توانید کاری کنید که کلماتتان در زیر گردانه و درون ساختمان صفحه نیز شمرده شوند. بسیاری از منوهای کشویی حاوی Header هایی هستند که در H1 پنهان شده اند.
این Headerها در هنگام باز و بسته شدن منوهای کشویی تغییر می کنند و باعث می شوند که ارزش کلمات کلیدی درونشان کاهش بیابد.

- تاثیر منفی در اجرا . اغلب گردانه ها حاوی عکس هایی با کیفیت بالا هستند که بهینه نشده اند , این مسئله خود باعث بالا رفتن زمان بارگزاری صفحه ی نخست شده - در حالی که صفحه ی نخست مهم ترین صفحه ی یک وب سایت است و باید تا حد ممکن سریع بارگذاری شود. همچنین برای منوهای کشویی باید از JavaScript یا Jquery استفاده کرد که به خودی خود مشکلاتی را در اجرا به وجود می آورند.

- هل دادن محتوا پایین و زیر لایه ها . شاید دیگر قسمت بالایی محتوای لایه ای به اندازه ای که قبلا مهم بوده , مهم نباشد (‌این روزها هم می دانیم چه طور Scroll کنیم ) ولی هنوز هم گوگل این را توصیه نمی کند که محتوایتان را در پایین صفحه هل بدهید. در حالی که بزرگ ترین توصیه های جست و جو بر این اساس هستند که محتوا را بالای لایه اضافه کنید , یک گردانه در حقیقت چیز زیادی را برای ارزش دادن به کاربر ارائه نمی دهد و فقط زیبایی دارد.

- روش هایی برای غیر قابل دسترس بودن . حتی بهترین framework ها هم نمی توانند به صورت کامل مشکل دسترسی را حل کنند. مشکلی که گردانه ها را جوری احاطه کرده است که انگار آن قدر زیاد هستند که نمی شود به آنها آدرس داد.

علاوه بر این , یک تحقیق در سال ۲۰۱۳ نشان داد که تنها ۱٪ از مردم بر روی گردانه ها کلیک می کنند و بسیاری به راحتی آنها را در نظر نگرفته و به محتوا توجهی نمی کنند. اینجا جا داره تشکر کنیم از پدیده ی کوری بنری (Banner Blindess یا همان کوری بنری : تحقیقات نشان داده است که ۸۶ درصد از کاربران از کوری بنری رنج می برند.)

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


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

 

05 Iquadart

 

با ما در مقالات دیگر گارآفرین بلاگ همراه باشید.

شیوه طراحی وب سایت ۲۰۱۶ (٢)

شیوه طراحی وب سایت ۲۰۱۶ (٣)

١٤  روش طراحی وب سایت ٢٠١٥ 

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