مجله خبری هاست ایران » طراحی و توسعه » چگونه رابط کاربری هوشمندانه برای اپلیکیشن طراحی کنیم
UI/UX طراحی و توسعه طراحی وب

چگونه رابط کاربری هوشمندانه برای اپلیکیشن طراحی کنیم

چگونه رابط کاربری هوشمندانه برای اپلیکیشن طراحی کنیم

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

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

چگونه یک حرکت خوب انتخاب کنیم؟

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

آموزش حرکات

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


مقاله مرتبط: ٨ نمونه از طراحی منوی ناوبری اپلیکیشن موبایل


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

از آموزش در حین اجرای اپلیکیشن بپرهیزید

آموزش در اپلیکیشن

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


مقاله مرتبط: ٩ باور اشتباه درباره تجربه کاربری موبایل که بر طراحی اپلیکیشن تأثیر می‌گذارد


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

آموزش محتوای حرکت

آموزش محتوای حرکت اپلیکیشن

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

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

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

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

طراحی اپلیکیشن

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

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

انیمیشن در اپلیکیشن

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

طراحی رابط کاربری

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

تکنیک طراحی اپلیکیشن

نتیجه‌گیری

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

افزودن دیدگاه

کلیک برای ثبت دیدگاه