راه کارهایی برای ارتقای تجربه کاربری با طراحی متحرک

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

انیمیشن بین صفحات

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

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

اسکرول نامحدود همراه با انیمیشن

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

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

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

نمودارها و گراف های متحرک

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

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

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

انیمیشن های آهسته برای محیط پیرامون وب 

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

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

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

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

اسکرول ماژولار کنترل شده

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

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

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

طراحی متحرک برای جذاب تر کردن فرم ها

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

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

مثال فوق در مورد طراحی متحرک در فرم های یک وب سایت از هر دو روش برای جذاب تر کردن پاسخگویی به سوالات بهره می برد. زیبایی در عین سادگی با وجود انیمیشن و همچنین زبان عامیانه ، باعث شده که شما تمایل بیشتری به پاسخگویی به سوالات داشته باشید. این همان امکان CTA (Call to Action) است که هر کسب و کاری تمایل به استفاده از آن را دارد.

استایل دهی به متن های انکر با انیمیشن

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

این وب سایت (وب سایت زیر) شامل چند مثال عینی از هاور کردن است. استفاده از رنگ های نگاتیو ، تار کردن ، زمینه متن و جزئیات دیگر برای هایلایت کردن ، نمونه هایی از این موارد است. انیمیشن های این وب سایت در مقیاس بسیار کوچکی مورد استفاده قرار گرفته اند اما هنوز بر روی کاربر تاثیر خود را دارند. اگر به دنبال یک راه دقیق برای زیبا سازی وب سایت خود هستید ، تغییر استایل هاور متن ها راه مناسبی است.

نتیجه

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

منبع : speckyboy