15 مورد از بهترین وب سایت‌های تعاملی (چگونه خودتان آن را بسازید؟)

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

در وب‌سایت‌های تعاملی، از بازدیدکنندگان دعوت می‌شود تا اسکرول کنند؛ روی موارد پیمایش‌شده کلیک کرده و نمونه کارها را ببینند؛ یا اینکه به روش‌های دیگر شرکت کنند. چرا که نتیجه یک تجربه کاربری، جذاب‌تر و به یاد ماندنی‌تر است.

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

بهترین نمونه های وب‌سایت تعاملی

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

1-    Fern  (سرخس)

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

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

2-   ماه زمین با چوب سرخ 

Earth Month With A Redwood  یک میکروسایت برای Redwood Empire Whiskey  است. این میکروسایت توسط Affinity Creative طراحی و توسعه یافت و هدف آن آموزش و تشویق مشتریان برای ورود به قرعه‌کشی Redwood Glamping Experience بود.

Earth Month With A Redwoof  نه‌تنها کاربران را به تعامل با سایت دعوت می‌کند، بلکه به آن نیاز دارد. در هنگام ورود به صفحه اصلی، از شما دعوت می‌شود "بذر خود را بکارید". شما باید عنصر چرخان را درون شیشه بلغزانید تا در اصل قفل بقیه سایت باز شود. پس از انجام این کار، پس‌زمینه با نقشه‌ای که با دست کشیده شده است، جایگزین می‌شود. یک بنر پیمایشی نیز در پایین خواهید دید که از شما دعوت می‌کند وارد قرعه‌کشی شوید یا آن را در فیس‌بوک یا اینستاگرام به اشتراک بگذارید. بدین ترتیب، شانس خود را افزایش می‌دهید. وقتی که ماوس را روی بنر نگه می‌دارید، پیمایش آن متوقف می‌شود، اما همان‌طور که اسکرول می‌کنید، مقدار زیادی از عناصر تعاملی اضافی را مشاهده خواهید کرد.

3-  Eamonn Day Lavelle

Eamonn Day Lavelle  یک نمونه عالی از یک وب‌سایت تعاملی است که نمونه کارهای تعاملی ساده ارائه می‌دهد. اگر روی "مشاهده پروژه‌ها" کلیک کنید، به‌طور خودکار به فهرستی از پروژه‌ها هدایت خواهید شد و اگر روی هر پروژه فردی کلیک کنید، به صفحه فرود جامع‌تری خواهید رفت. به لطف جلوه انتقال محو، صفحه محو می‌شود و رنگ پس‌زمینه را تغییر می‌دهد تا فرآیند بارگیری را به‌طور بصری به تصویر بکشد.

بهترین بخش در مورد این وب‌سایت، این است که برای عملکرد بهینه شده است؛ یعنی با کد HTML5 و  CSS3  و وزن کمتر از 8 مگابایت، سایت خیلی سریع بارگذاری می‌شود. این موضوع ثابت می‌کند که طراحی تعاملی و عملکرد وب‌سایت، نیازی به معاوضه ندارند.

4-   Whiteboard

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

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

5-    Foot Locker's Home Gam

Foot Locker's Home Game  یک میکروسایت است که توسط CTHDRL طراحی و ساخته شد. هدف اصلی این میکروسایت، اطلاع‌رسانی و تشویق بازدیدکنندگان برای شرکت در مسابقه مجازی بسکتبال و کفش ورزشی در توییتر بود. یعنی طرفداران مجبور بودند شبکه‌های اجتماعی را دنبال کنند و سپس وارد چالش‌های دروازه‌ای شوند تا کفش‌های کتانی، کالاها و تجربیات انحصاری را به دست آورند.

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

6-     (UN) Trafficked

  (UN) Trafficked یک داستان دیجیتال تعاملی است که برای جلب توجه به بحران قاچاق کودکان در هند ایجاد شده است. این سایت تعاملی بر اساس قالب ماجراجویی "انتخاب کن" عمل می‌کند. یعنی از کاربران می‌خواهد تا یک دختر 13 ساله را در یک هفته متحول‌کننده زندگی دنبال کنند و تصمیماتی بگیرند که بر نتیجه داستان تأثیر بگذارد. (به عنوان مثال، شما با نام‌گذاری دختر شروع می کنید.) موسیقی متنی که در آن به معنای واقعی کلمه می‌توانید صدای شکستن قلب دختر را بشنوید. آمارهای به‌روز در مورد وضعیت کار کودکان و سوء‌استفاده جنسی در سراسر هند نمایش داده می‌شود. پس از اتمام بازی، کاربران تشویق می‌شوند تا با امضای تعهد و اشتراک‌گذاری در رسانه‌های اجتماعی، به اقدام خود ادامه دهند.

(UN)TRAFFICKED  به عنوان محور دیجیتال یک کمپین بزرگ مقیاس کودکان، توسط بنیاد کودکان Kailash Satyarthi  و بنیاد صندوق سرمایه‎گذاری کودکان، برای پایان دادن به استثمار کودکان در هند راه‌اندازی شد و نشان‌دهنده این است که طراحی وب تعاملی چقدر می‌تواند قدرتمند باشد.

7-  Cyclemon

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

نکته مهم: دوچرخه‌ها واقعا برای فروش نیستند، اما طرح‌ها هستند.

8-  Bragg

Bragg   مخففBragg Live Foods   یک شرکت مواد غذایی بهداشتی است که به هر فرد کمک می‌کند بهتر غذا بخورد. احساس بهتری داشته باشد و از زندگی سالم‌تر و شاداب‌تر لذت ببرد. براگ این رویکرد شخصی را در وب‌سایت خود نیز اتخاذ کرده است. یعنی هنگامی که کاربران روی عناصر مختلف قرار می‌گیرند، رنگ‌ها را تغییر می‌دهند یا در صفحه حرکت می‌کنند.

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

9-   Violet

شرکت Violetبه ارائه خدمات بهداشتی و درمانی شایسته فرهنگی برای همه جوامع می‌پردازد و وب‌سایت آن با رنگ‌های برجسته و تایپوگرافی، انیمیشن‌ها و تصاویر مشخص می‌شود.

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

10-                        Decatur Dan

دان هال که بیشتر با نام Decatur Dan شناخته می‌شود، یک کارگردان مشهور موزیک ویدیو است که اکنون داستان‌های بصری را برای برندهایی مانند نایک و Beats by Dre می‌سازد. سایت نمونه کار او که توسط CTHDRL  توسعه یافته نیز، مهارت‌های داستان‌سرایی بصری او را نشان می‌دهد. وب سایت دن با دعوت از کاربران برای به اشتراک گذاشتن تعهد خود نسبت به آنچه بزرگتر و بهتر است، به کاربران اجازه می‌دهد تا همه عناصر صفحه را بکشند و اندازه آن‌ها را تغییر دهند. در نتیجه، کاربران می‌توانند کار او را در طرح‌بندی خود دوباره میکس کنند.

11- معماران دلو

Delve Architects  یا معماران دلو، شرکتی مستقر در لندن بوده که هدف آن ارائه یک رویکرد ساده و با شخصیت به طراحی معماری است. این دو مقدار در طراحی وب‌سایت آن منعکس شده‌اند.

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

12-                        چرخه گلادیاتور

Cycles Gladiator  یک شرکت شراب مستقر در کالیفرنیا است که به الهام بخشیدن و توانمندسازی زنان اختصاص دارد. این وب‌سایت تعاملی یک صفحه‌ای، از کاربران دعوت می‌کند تا یک خرده‌فروش یا رستوران نزدیک را پیدا کنند و شراب‌هایشان را بفروشند. درباره مشارکت آن‌ها با گروه غیرانتفاعی Do More Art بیشتر بیاموزند و به فهرست پستی آن‌ها بپیوندند. هر یک از این فراخوان‌ها، یک دکمه با انیمیشن شناور ظریف دارد. در پایین صفحه نیز، یک نوار لغزنده قرار داده شده تا کاربران بتوانند مجموعه شراب خود را هر بار یک بطری (یا قوطی) مشاهده کنند.

13-                       Daniel See

دانیل سی، مدیر خلاق ملی اصلی Deloitte Digital Australia است. از آنجایی که او بیش از دو دهه می‌شود که در صنعت دیجیتال کار می‌کند، پروژه‌های زیادی برای نمایش دارد. برای ساده‌تر و تعاملی‌تر کردن تجربه مشاهده، از انیمیشن‌های اسکرول بی‌نهایت و fly-in استفاده شده تا پروژه‌ها را یکی پس از دیگری در حین پیمایش کاربر نشان دهند.

14-                       Portfolio Night  

Portfolio Night  یک میکروسایت است که توسط AKQA Amsterdam برای دعوت از خلاقان مشتاق برای شرکت در رویدادشان ایجاد شد. این سایت با اهداف این رویداد به وجود آمد: یکی اینکه خلاقان مشتاق با تیم AKQA  آمستردام همگام شوند و دوم برای دریافت بازخورد عملی در مورد نمونه کارهای خود. به همین دلیل است که یک "کرم" در صفحه اصلی وجود دارد که از پروژه‌های نمونه کارها تشکیل شده است. هنگامی که کاربر اسکرول می‌کند، کرم می‌چرخد و در سراسر صفحه به حرکت در می‌آید. بنابراین به طور مداوم از مسیر کاربر عبور کرده و زمانی که کاربر روی آن قرار می‌گیرد، حرکت می‌کند.

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

15-                       Prometheus Fuels

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

 

چگونه یک وب‌سایت تعاملی بسازیم؟

1-     یک انیمیشن در حال بارگذاری ایجاد کنید.

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

2- اسکرول را سرگرم‌کننده کنید.

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

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

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

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

3-  از انیمیشن‌های شناور استفاده کنید.

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

4-    ترکیب ویدئو

از آنجایی که بسیاری از کاربران بیشتر به بازی، اشتراک‌گذاری و تعامل با ویدیوها نسبت به متن تمایل دارند، ترکیب ویدیوها یک راه آسان و موثر برای تعاملی کردن وب‌سایت شما است که به افزایش تبدیل نیز کمک می‌کند. 83 درصد از بازاریابان ویدیو می‌گویند که ویدیو به آن‌ها کمک کرده تا سرنخ ایجاد کنند.

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

5- کاروسل‌ها را اضافه کنید.

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

• 24
• 0