نحوه استفاده از انیمیشن برای بهبود UX

طراحی سایت

..نحوه استفاده از انیمیشن برای بهبود UX..
نحوه استفاده از انیمیشن برای بهبود UX
طراحی سایت

نحوه استفاده از انیمیشن برای بهبود UX

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

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

نحوه استفاده از انیمیشن برای بهبود UX

بارگیری نباید کسل کننده باشد

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

بارگیری نباید کسل کننده باشد

تغییر حالت طراحی

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

Zumbrunnen یک مثال عالی در مورد نحوه انیمیشن پیمایش که به کاربر کمک می کند تا هنگام کلیک بر روی یک لینک، زمینه را حفظ کند. 

روابط بین عناصر را توضیح دهید

انیمیشن می تواند موجب تقویت حس مهارت شود.

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

از بازخورد برای برجسته کردن خطایی که رخ داده استفاده کنید

انیمیشن می تواند کارهایی را که کاربر در حال انجام آن است، تقویت کند.

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

از بازخورد برای نشان دادن آنچه در حال انجام است استفاده کنید

از انیمیشن می توان برای کمک به افراد برای تجسم نتایج اقدامات خود استفاده کرد. با پیروی از اصل " show, don’t tell"، می توانید از بازخورد متحرک استفاده کنید تا نتایج به دست آمده را نشان دهید.

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

نتیجه

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

35
18 دی 1398
..نظرات..
..مقالات پربازدید..
آموزش قرعه کشی در اینستاگرام
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

10761
24 فروردین 1398
bit.ly چیست ؟
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند.علت استفاده از...

1054
27 آذر 1398
آموزش کار با افزونه دکان (چند فروشندگی)
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

868
04 دی 1397