طراحی وب بی نظیر است زیرا هم یک طراح و هم کاربر را به کار می برد تا بتواند آن را عملی کند. به هر حال ، تمام هدف از قرار دادن طرح روی یک محیط تعاملی مانند رایانه این است که کاربران بتوانند از آن استفاده کنند. تعامل همچنین معیار خوبی برای میزان اشتغال بازدیدکننده سایت است زیرا اگر آنها تعامل داشته باشند ، توجه می کنند. طراحی وب تعاملی خوب ، کاربر را مجبور می کند با یک وب سایت درگیر شود ، به پایین پیمایش کرده و محتوای بیشتری مصرف کند ، به صفحات دیگر برود ، با یک دوست به اشتراک بگذارد و البته روی آن دکمه دعوت به عمل کلیک کند.
یکی از چالش هایی که طراحی های وب تعاملی با آن روبرو هستند این است که روش های زیادی برای کاربر برای تعامل با یک صفحه وجود دارد و حتی روش های بیشتری برای پاسخ دادن به صفحه وجود دارد. برخی از طراحی های تعاملی تجربه یکپارچه ای را در کاربر ایجاد می کنند ، به او بازخورد می دهند و او را در مورد کارهای بعدی راهنمایی می کنند. برخی از آنها کمتر واضح خواهند بود ، پاسخها با عملکرد کاربر مطابقت ندارند یا بدتر از آن وجود ندارد.
برای اینکه یاد بگیریم چگونه یک تجربه خوب وب سایت تعاملی را از یک تجربه بد بگوییم ، ما می خواهیم درس های خود را از افراد حرفه ای بگیریم. در اینجا ، با گردآوری برخی از نمونه های مورد علاقه خود و بحث در مورد آنچه که باعث کارایی آنها می شود ، 6 نکته مفید برای طراحی وب تعاملی جمع آوری کرده ایم.
1. از بارگذاری زمان صفحه استفاده کنید
–
بارگیری می تواند یکی از بزرگترین موانع تجربه مرور وب باشد. یک کسب و کار می تواند برای ساخت یک وب سایت زیبا و برجسته هزینه و تلاش زیادی انجام دهد ، اما اگر بارگیری آن بیش از دو ثانیه طول بکشد ، تحقیقات نشان داده است که بازدید کننده قبل از دیدن هر یک از آنها به طور تصاعدی احتمال ترک آن را دارد. منصفانه است که فرض کنیم کاربران بارگیری را به عنوان یک تجربه منفی تجربه می کنند.
اما بارگیری صفحات نیز می تواند یک فرصت باشد. اگر توجه کاربر را دارید ، چرا از آن نهایت استفاده را نمی کنید؟ این لحظات فرصتی غیرمنتظره و بنابراین فوق العاده ویژه برای تحت تأثیر قرار دادن کاربران از طریق انیمیشن ها فراهم می کند. آنها فرصتی تازه برای نشان دادن شخصیت برند و جذب و تحریک کاربران هستند. غالباً ، این انیمیشن ها در واقع با پیشرفت یک نوار بارگذاری (یا موارد مشابه) به کاربر احساس پیشرفت می دهند تا نشان دهند چه مدت زمان قبل از دسترسی کاربر به صفحه بعدی باقی مانده است.
در حالت ایده آل ، این صفحات بارگذاری کارهایی را به کاربران ارائه می دهند ، مانند بازی در حین انتظار ، که تجربه ای سرگرم کننده و تعاملی را ایجاد می کند.
نکته این است که بارگذاری لزوماً به معنای تجربه منفی کاربر نیست. آنها حتی لازم نیست که فقط سریع و بدون درد باشند – گاهی اوقات هیجان انگیزترین قسمت یک وب سایت هستند.
2. سازماندهی اطلاعات از طریق پیمایش متحرک
–
پیمایش یکی از ساده ترین و بصری ترین تعاملات است که کاربر می تواند ایجاد کند. اما فقط به این دلیل که کاربر ممکن است به پیمایش فکر نکند ، به این معنی نیست که طراح وب نباید باشد! روش های زیادی وجود دارد که طراحان با استفاده از پیمایش انیمیشن ها به کاربر احساس حرکت پویا در سراسر وب سایت را می دهند. بگذارید برخی موارد رایج را مرور کنیم.
انیمیشن پیمایشی
یک روش محبوب ایجاد انیمیشن های خاص برای فعال شدن هنگام پیمایش کاربر از طریق وب سایت است. در زندگی بخشیدن به تصاویر بسیار جادویی است و این توهم را ایجاد می کند که صفحه ای که کاربر به آن دسترسی دارد در واقع در زمان واقعی و در پاسخ به تعامل آنها ساخته می شود.
پیمایش اختلاف منظر (یا پیمایش نامتقارن)
تکنیک مشابهی که مورد توجه قرار گرفته است ، پیمایش اختلاف منظر است. این نوع حرکت شامل گفتن دو شی روی صفحه است که با دو سرعت متفاوت حرکت می کنند ، زیرا کاربر به پایین صفحه پیمایش می کند. نتیجه یک شبیه سازی عمق حرکت سه بعدی است ، زیرا اشیا fore پیش زمینه معمولاً سریعتر از اشیا background پس زمینه حرکت می کنند.
انتقال صفحه را پیمایش کنید
و سرانجام ، طراحان می توانند از انتقال کامل صفحه استفاده کنند ، که در آن پیمایش صاف سنتی با پرش به صفحه بعدی یا تغییر صفحه عمده جایگزین می شود. این می تواند یک اثر چشمگیر ایجاد کند ، نه تنها عناصر صفحه جدید بلکه گاهی اوقات یک طرح رنگ کاملا متفاوت را ایجاد می کند ، و باعث می شود وب سایت با هر پیمایش کاملاً جدید باشد.
به طور کلی ، این انیمیشن های پیمایشی بازخورد مهمی درمورد تعامل با کاربران می دهد – به آنها اجازه می دهد تا بدانند که تازه وارد بخش جدیدی از وب سایت شده اند و باید انتظار تغییر در نوع اطلاعات را داشته باشند. به طور خلاصه ، آنها سلسله مراتب و سازماندهی مشخصی را در یک بسته تأثیرگذار و تعاملی ارائه می دهند.
3. حرکت عمودی از بین بردن با کشویی و چرخ فلک
–
چرخ فلکها اصطلاحاً نامیده می شوند زیرا محتوای وب سایت را به قسمتهای چرخشی متصل می کنند که کاربر می تواند از طریق آنها چرخش کند ، دقیقاً مانند حرکت چرخشی یک کارناوال واقعی.
به دلیل افزایش محبوبیت تعاملات کشویی در برنامه های تلفن همراه ، این موارد در وب سایت ها رایج شده اند. از آنجا که در اصل نوعی پیمایش افقی هستند ، فاصله بسیار لازم از یکنواختی بی پایان پیمایش عمودی را برای کاربر فراهم می کنند.
اما این تنها دلیل نیست که شما می خواهید حرکت عمودی را از بین ببرید. همانطور که قبلاً اشاره کردیم ، کاربران تمایل دارند اسکرول رو به پایین را با progressi مرتبط کنند
به بخش جدیدی از وب سایت مراجعه کنید. از طرف دیگر چرخ فلک ها و اسلایدرها به طراحان وب این امکان را می دهد تا زمینه های بیشتری را برای هر بخش در نظر بگیرند ، زیرا کاربر از نظر فنی آنها را ترک نمی کند.
این به این معنی است که چرخ فلک ها به جای شلوغ کردن صفحه با تمام اطلاعات لازم در یک زمان ، عناصر سایت را به بخشهای گزش بیشتری فرو می ریزند و به کاربر اجازه می دهد تا ذره ذره از طریق آنها چرخه بزند.
وقتی محتوا از نظر قالب مشابه است ، این بهترین نتیجه را می دهد ، بنابراین تصاویر محصول ، پروفایل ها یا توصیفات مشتری را با هم گروه کنید. آنها همچنین برای نمایش انواع مختلف مانند محصولات با رنگ های مختلف مفید هستند. از نظر متحرک سازی این چرخ و فلک ها ، سبک ها از انتقال مستقیم از چپ به راست ، تا جابجایی کارت ، تا یک انیمیشن چرخان چرخشی که یادآور اسلایدهای نمایشگر یکپارچه است.
4- منوی پیمایش را منفجر کنید
–
مانند کشیدن ، منوهای همبرگر یکی دیگر از روندهای رایج طراحی موبایل / برنامه است که به وب سایت های دسک تاپ راه یافته است. حتی اگر نماد همبرگر به خودی خود موجود نباشد ، کاربران به طور کلی با این ایده آشنا هستند که نیازی به نمایش مداوم مسیریابی نیست. کاربران می دانند که آنجاست و در صورت لزوم می توانند با آن ارتباط برقرار کنند. پنهان کردن منو می تواند به بقیه فضای صفحه وب نفس بکشد و در عین حال ، آشکارسازی منو یک فرصت تعاملی دیگر برای طراحی وب است.
از آنجایی که کاربران اکنون منو را انتخاب می کنند ، بسیاری از طراحان با ناوبری که کل صفحه را اشغال می کند ، به این تماس پاسخ می دهند. این اجازه می دهد تا تایپوگرافی بزرگ ، تصاویر توصیفی و انیمیشن های شناور ناخوشایند داشته باشید.
بزرگ بودن با تعامل منو منطقی است: پیمایش همه چیز در مورد کنترل است. کاربر به طور موثری کشتی را هدایت می کند و تأکید بر منو به کاربر کمک می کند تا وزن قدرت خود را بر صفحه تجسم کند. در کل ، طراحی های منو تا زمان نیاز پنهان می مانند ، در این مرحله از زندگی بزرگتر می شوند. اگر از من بپرسید ، این یک تغییر خوب از لیست خاکستری بالای صفحه است که در گذشته قرار دارد.
5. فرم ها را با پرسشنامه های کاربر جایگزین کنید
–
یکی از بخشهای سنگین تعامل با وب سایت ورود اطلاعات است. کاربران به طور کلی از دادن اطلاعات خود در یک وب سایت احتیاط می کنند. بهترین راه برای کاهش این کار این است که روند کار مانند پر کردن فرم در مطب پزشک و بیشتر شبیه جلسه پرسش و پاسخ با شما باشد.
به همین منظور ، بسیاری از وب سایت ها در حال تبدیل فرآیند پردازش به پرسشنامه های تعاملی هستند ، جایی که سوالات به روش های واضح و شخصی بیان می شوند ، در صورت لزوم با استفاده از پاسخ های چند گزینه ای برای کاهش بار تعاملی کاربر. قرار دادن این س questionsالات یک به یک باعث می شود کاربر احساس خستگی نکند و بیشتر شبیه این باشد که در گفتگوی رفت و برگشت شرکت می کند.
در حقیقت ، نمونه بارز این روش در عمل از خدمات مالیاتی مانند برخی از شرکتهای تهیه کننده مالیات بدست آمده است که فرمهای مالیاتی را به س questionsالات ساده و قابل فهم تقسیم می کنند. این به ویژه برای خدماتی که چندین محصول بالقوه برای فروش به یک بازدید کننده سایت دارند و باید با درک نیازها ، سلیقه ، بودجه و موارد دیگر به آنها کمک کند ، گزینه های آنها را کمکی می کند.
6. از تعاملات خرد غافل نشوید
وقتی صحبت از انیمیشن در طراحی وب تعاملی می شود ، حرکات کوچک باعث فروش واقعی آن می شوند. و هنگامی که شما در نظر بگیرید که هدف از انیمیشن یک وب سایت اغلب بازخورد است (مانند اجازه دادن به کاربر در مورد آنچه که می تواند و یا نمی تواند با آنها تعامل داشته باشد یا اینکه آیا کار درستی انجام داده اند) ، منطقی است که این بازخورد بهترین نتیجه را در یک سایت دارد سطح ناخودآگاه
انیمیشن هایی که بیش از حد توجه خود را به خود جلب می کنند می توانند توجه کاربر را پرت کنند و هر بازخوردی را که می خواستند ارائه دهند تحت الشعاع قرار می دهد تا مهارت انیماتور را به نمایش بگذارد. این جایی است که تعاملات خرد ایجاد می شود.
99designs.com/blog/web-digital/interactive-web-design/
اولین باشید که نظر می دهید