چگونه می توانید افراد را بیشتر در وب سایت خود نگه دارید و آن ها را مجبور کنید تا دوباره از وب سایت شما بازدید کنند؟
در این جا هفت راهنمایی از طراحان حرفه ای را برای شما آورده ایم.
اطمینان حاصل کردن از این که مشتریان شما از طراحی وب سایت شما راضی هستند، تنها قدم اول است.
هنگامی که وب سایت شما به عرصه وارد می شود، برای جلب توجه بازدیدکنندگان با هزاران وب سایت دیگر وارد رقابت می شود و شما به یافتن راه هایی برای نگه داشتن طولانی تر بازدیدکنندگان در وب سایتتان و بازگشت دوباره ی آن ها ، نیاز دارید.
تعامل یکی از سختترین جنبه های تجربه ی کاربری جهت طراحی می باشد،چرا که نه تنها نیاز به محتوای وب سایت با کیفیت دارد،بلکه به راه هایی هوشمندانه و هیجان انگیز برای ارائه ی آن محتوا نیز نیاز دارد.
اگر وب سایت شما از کمی بی جانی رنج می برد،این راهنمایی ها کمک می کند تا انرژی تازه ای وارد آن شود و دوباره بازدیدکنندگان رابه چنگ آورد.
1.پارالاکس : تبدیل اسکرول کردن به تعامل
زمانی را تصورکنید که شما بتوانید با تنها یک تغییر، به اندازه ی 70 درصدتعامل بیشتر دریافت کنید. آیاچنین چیزی وجود دارد؟ بله . در واقع وجود دارد.
پارالاکس اسکرول کردن یک روند فراگیر در صنعت طراحی است و با یک دلیل خوب، یک راه منحصر به فرد وچشم نواز برای ارائه ی بصری یک پیام فراهم میکند.
پارالاکس اشاره به استفاده از چند عنصر به صورت جداگانه که هنگام اسکرول کردن شما حرکت می کند، دارد که در نتیجه یک تجربه پویا برای کاربران به وجود می آورد و آن ها رابه بیشتر اسکرول کردن تشویق میکند.
یک مثال عالی ،کمپین سونی با نام حرکت داده شوید، می باشد که نشان دهنده ی مرز های بی محدودیت آنچه پارالاکس میتواند انجام دهد، می باشد.
طراحی سیستم عامل وب سایتهای پیشرفته ی بدون کد،مانند Webydo ،بدین معنی است که هم اکنون میتوانید ، وب سایتهای شگفت انگیز و پارالاکس با دقت کامل پیکسل راطراحی کنید.
آنهابه تازگی به منظور تسهیل درتولید وب سایت های پارالاکس با پیکسل کامل از سیستم بدون کد وپارالاکس اسکرول متحرک خود ،پرده برداری کرده اند.
2.نمادهاوپیکرنگاری: روان کننده های بصری
درسایت های غنی از اطلاعات ،شما نیاز به مقدار زیادی از متن برای توصیف موارد دارید.
این بدین معنی است که طراحان باید راه هایی برای ارائه ی متن ها باحداکثر تاثیر را به کار گیرند.
استفاده از آیکونها میتواند به بازدید کنندگان وب سایت شما در جهت پیدا کردن بسیار سریع آنچه که به دنبال آن هستند،کمک کند.
این تصاویر کوچک نه تنها مفاهیم همراه با خود را نشان می دهند،بلکه ظاهر متمایز آن ها کمک میکند تا همانند راهنماهای بصری ، چشم ازمحلی به محل دیگر،هدایت شود.
درزمان های قدیم،آیکون ها تنها به شکل بیت مپ،که برای پیاده سازی و اصلاح دست وپا گیر بودند،اجرا می شدند،وهیچ راه ساده تری برای مدل دادن به آیکونها وجودنداشت.
امروزه،طراحان ازفونت آیکون استفاده می کنند که برای تولید حروف دقیقا مانند متن رفتارمی کنند و آن ها بر اساس وکتور،مقیاس پذیری بینهایت وقابل تنظیم ازطریق CSS میباشند.
یکی ازبهترینها در حال حاضربدون شک Glyphter است.
Glyphter با ابزارهای جذاب و بصری خود،به شمااجازه میدهد تا از منبع های باز مجموعه آیکون های مختلف (ازجمله فونت های بسیارمعروف)استفاده کنید و یا SVGs خود را برای ایجاد فونت های آیکونهای سفارشی، آپلود کنید و سپس به طورآزادانه آن ها را دانلود کنید و درسایت بعدی خوداز آن استفاده کنید.
باحمایت آیکون ها از محتوای متن شما،پاراگراف ها وعناصررابط به چیزی بیشترازیک حباب ساده ازمتن تبدیل می شوند،و در ترکیب با تایپوگرافی های پویا و جذاب،سایت شما لذتبخش ترو برای خواندن آسان ترمیشود.
3.تایپوگرافی انعطاف پذیر: طراحی پاسخگو برای محتوا
طراحی پاسخگو فقط در مورد صفحه بندی نیست، بلکه باید در مورد محتوا نیز باشد. اگر یک طرح با اندازه صفحه نمایش لازم سازگاری داشته باشد، خیلی خوب است،اما محتوا نیز باید مطابق با موارد زیر باشد:
کاربران موبایل از ما توقع خواندن یک پاراگراف طولانی را ندارند بنابراین مطمئن شوید که نسخه تلفن همراه شما همه چیز را مختصر ارائه میدهد و آیکون های عملیاتی واضحی دارد.
خواندن بر روی یک صفحه نمایش کوچک اگر متن بیش از حد کوچک باشد، اصلا سرگرم کننده نیست.
بنابراین از تکنیک های پویا برای نگهداشتن متن دراندازه ی مناسب استفاده کنید.کاربران را مجبور به زوم کردن نکنید!
داشتن محتوایی که به وضعیت خواندن بازدید کننده پاسخگو باشد باعث میشود که وب سایت شما بیشتر احساس روان بودن،آگاه بودن وبه طورکلی جذابیت داشته باشد.
4.تصاویر وکتور برای پاسخگویی بصری
متن تنها یک قطعه از پازل طراحی وب سایت است،تصویرسازی نیزمعمولا به همان اندازه مهم است.
به طورمعمول،این تصویرسازیها درقالب فایلهای بیتمپ مانند JPGs ، PNGs والبته gif ارائه می شود.
مشکلات این تصاویر بیتمپ دوقسم است:
•تصاویر بیتمپ با اندازه ثابت است،به طوریکه آنها نمیتواند آزادانه به مقیاس دیگری برای تناسب در اندازه ها، طرحها و یاکیفیتهای جدید تبدیل شوند وبه ویژگی های گرافیکی تری برای حسابهای تلفن همراه،صفحه نمایش رتینا وغیره نیاز د ارند.
•هرزمانی که تصویرشبیه به این تصویر استفاده میشود،یک درخواست HTTP به روند در حال بارگذاری سایت شما می افزاید.
همانطور که تصاویر بیشتر و بیشتر در سایتها محبوب می شوند،این میتواند به طور قابل توجهی باعث بالا رفتن زمان بارگذاری وب سایت شما شود،علاوه برافزایش مقدارداده هایی که باید لود شود تاصفحه ی شما بالا بیاید.
راه حل: گرافیک های وکتور. از آنجا که تصاویروکتوربه سادگی دستورالعمل ریاضی برای ارائه بصری هستند،میتوان آنها را به هراندازه وهر رزولوشنی بدون هیچ تلاش وبدون کوچک ترین تخریبی، تبدیل کرد.
SVG یک قالب تصویر وکتوراست که به طور روز افزونی نزد افرادمحبوب شده است.
طراحان وب علاقه به خصوصی به آن دارند که دلیل آنم دل دادن به طور فعال ودستکاری مانند هر نشانه گذاردیگر،ودرنتیجه برخی از پیاده سازی های زیبا وتعاملی می باشد.
بهترازهمه این که ،این گرافیک ها سبک وزن هستند و به طورمستقیم توسط مرورگر ها ارائه می شوند ، و این بدین معنی است که باراضافی برای لود شدن وجود ندارد.
5.معرفی عناصر شبه بازی
یکی ازمهمترین تکنیکهای پیاده سازی وب gamification ، و یا معرفی عناصر شبه بازی درطراحی شما است که به بازدیدکنندگان کمک می کند به یک حس تعامل و پاداش درهنگام جستجو در سایت، پیدا کنند.
Gamification اغلب در قالب مدالهایی که شما میتوانید با انجام وظایف مختلف آن ها را بدست آورید،ارائه میشود. در سایتهایی مانند Treehouse که هر آن شما دوره هایی را پشت سر می گذارید،این مورد بسیار به کار می آید.
امااگرشماهیچ دوره و یا سازه های مشابهی در سایت خود ندارید چه؟
برای وبلاگها،سایتهای تجارت الکترونیک و دیگرموارد یک وب سایت استاندارد، gamification می تواند به صورت کوپنها و یا تخفیفهایی به بازدیدکنندگان درشرایط خاص ارائه شود. به عنوان مثال،یک وبلاگ میتواند در ازای توییت کردن لینک سایت خود، دانلود یک کتاب رایگان را ارائه می دهد.
یک سایت تجارت الکترونیک میتواند هنگامیکه یک بازدیدکننده کاتالوگ را به طورکامل مطالعه می کند،یک کوپن تخفیف به او ارائه دهد
چیزهای کوچک مانند اینها، به شخصی سازی تجربه ی یک بازدیدکننده کمک می کند و دریافت توجه فردی کلیدی برای پرورش حس تعامل و تشویق آنها برای بازگشتن به سایت شما می باشد.
6.فشرده سازی تصویر: نیاز به سرعت
هیچ چیز مانند سرعت بارگذاری آهسته ی یک وبسایت، میزان تعامل را پایین نمی آورد.
درجهانی که ازکمبود توجه رنج می برد،اگر یک سایت زمانی بیش از حد طولانی برای بارگذاری صرف کند،بازدید کنندگان تقریباهمیشه وب سایت راترک می کنند.
چه کسی صبر و شکیبایی لازم برای بارگذاری صفحات آهسته را دارد؟
بیشتر شدن پیچیدگی وب سایت ها وظاهر شدن مواردبصری،به ناچار بر روی سرعت بارگذاری تأثیرگذاشته است. خوشبختانه،تعدادی ازروشها وجود دارند که میتوانندبه کاهش این مسئله کمک کند:
•کوچک سازی محتوای
•بهینه سازی تصاویروب سایت
•نگهداری سایت خود ازطریق یک شبکه تحویل محتوا
برای شروع بسیاری از طراحان مایل به کوچک کردن دارایی های سایت خود در هنگام انتشار هستند. با به حداقل رساندن نوارهای تمام فضای سفید،نظرها،برکناری CSS و فایلهای JS درنتیجه نسخه های کوچکی به وجود می آید که کمی سریعتربارگذاری می شوند.
به طورمشابه،تعدادی از الگوریتمهایی که میتواند حجم داراییهای تصاویر سایت شما را بدون افت کیفیت بصری کاهش دهد،وجود دارد.
الگوریتم های مختلف را میتوان همانند برنامه هایی مانند ImageOptim (فقط در سیستم مک) پی در پی اجرا شوند و تصاویر را طی یک فرآیند تنها با یک کلیک آماده سازند.
درنهایت،وبسایتها اغلب از شبکه های تحویل محتوا (CDNs) برای توزیع فایلها با سرعت بیشتر ی استفاده می کنند.
CDNs باگسترش داده های سایت شما در چندین سرور در سراسرجهان کار می کند و اطمینان حاصل می کند که نزدیکترین سرور به بازدیدکننده شما،فایل مطلوب را ارائه میدهد.
CDNs قابل توجهترین تفاوت را درزمان بارگذاری صفحه ایجاد می کند و اغلب برای کمک به حفظ سایتهای بزرگتر تحت فشار هزاران بازدیدکننده در سراسر جهان استفاده می شود.
یکی از مزایای کار با یک میزبانی Cloud ،وب سایت طراحی پلتفرم مانند Webydo ، این است که این نوع از بهینه سازی ها همه برای شما انجام شده است.
7.Push notifications
دربسیاری ازسایتها،اهداف تعامل به شکل استقبال ازبازدیدکنندگان با ارسال پست جدید ارائه می شود.
چه این پستها، پست های وبلاگها،فیلمهاویاچیزهای کاملا متفاوتی باشند.
به طور معمول،طراحان از اشکال مختلف مردم را به ثبت نام برای خبرنامه ایمیل تشویق می کنند.
درحالی که این ترفند محبوب باقی میماند،یک فنآوری جدید درحال ظهوراست که 30 بار بهترازایمیل است و به طور قابل توجهی تعامل بیشتری ایجاد می کند: اطلاعیه های فشاری مرورگر یا همان. Push Notification
با استفاده ازابزارمانند Roost ،طراحان به راحتی میتوانند اطلاعیه های مرورگررا پیاده سازی کنند به طوری که بازدیدکنندگان متوجه ارسال محتوای جدید شوند، حتی زمانی که آنها رادرسایت شما نیستند!
درحال حاضر،تنها مرورگر سافاری است که به طورکامل درآخرین نسخه ی OS X از این مورد پشتیبانی می کند،اماهم کروموهم فایرفاکس درهمین سال در حال راه اندازی پشتیبانی از اطلاعیه های فشاری هستند.
بنا بر این اکنون زمان مناسبی برای به کار گیری این روش جدید و هیجان انگیزاست.
به زندگی دوباره خوش آمدید!
تکنیک های بالاهمیشه در فرایند طراحی مهم هستند وهمواره قبل ازشروع به طراحی وب سایت باید درنظرگرفته شوند.
اطمینان ازاین که سایتهای شما سریع،زیبا و پویا هستند بازدید کنندگان را به تعامل بیشتر با مطالب تشویق می کند.
ابزارهای بسیاری دربازار موجود هستند که راههای موثری به شما برای طراحی و طراحی پیشرفته وب سایت ها پیشنهاد می دهند که با سطح تعامل پایین مبارزه خواهد کرد.
برای کسب اطلاعات بیشتر درباره طراحی سایت و همچنین طراحی لوگو به وب سایت های webcade.ir و armcade.ir مراجعه فرمائید.