جادوی فعل و انفعالات کوچک در طراحی سایت موبایل – قسمت دوم

طراحی سایت سازگار با موبایل با توجه به افزایش کاربرانی که از موبایل برای بازدید سایتها استفاده مینمایند به امری ضروری تبدیل شده است و امروزه حتماً سایتها میبایست در خود چنین سازگاری را داشته باشد. در سال ۲۰۱۶این میزان سازگاری حتی فراتر رفته و درخواست برای سازگاری بیشتر نمایش وب سایت در موبایل و تبلت به وجود آمده که از این بابت گرایشها و ترفندهای جدیدی ایجاد شده است.
بخوانید : جادوی فعل و انفعالات کوچک در طراحی سایت موبایل – قسمت اول
4 المان میکرو اینتراکشن (م.ا.ا)
سر دم دار تمامی میکرواینتراکشن ها “دن سافر” است. کافی است در گوگل کلمه و میکرواینتراکشن را جست و جو کنید تا به ببینید قطعاً به اولین اطلاعاتی که بر میخورید نام این شخص در آن به آشکارا به چشم میخورد. او حتی در این مورد کتابی نوشته است و تمرکز خود را بر روی 4 بخش ساختار میکرواینتراکشن ها قرار داده که به واقع این چند اصل بهترین راه برای خلق این فعل و انفعالات کوچک است.
– قلاب: ابتدای کارم.ا.ا از اینجا آغاز میشود. برای مثال، من برای اینکه صفحهای در فهرست علاقهمندی قرار گیرد بر روی آیکون قلبی شکل کلیک میکنم.
– قوانین: رفتارسازی م.ا.ا راه بعدی است. کاربر قوانین را نمیبیند اما بازخورد آنها را در صفحه بعدی متوجه میشود. در این مورد کلیک کردن بر روی آیکون قلبی شکل باعث میشود تا صفحهای که در آن هستید در دسته صفحات پر بازدید قرار گیرد.
– بازخورد: چگونگی طراحی ارتباطاتم.ا.ا با کاربر مورد توجه قرار میگیرد. آیکون قلبی شکل به صورت تو پر و حجمی نمایش داده میشود به همراه جمله خبری ” در دسته صفحات پر بازدید ذخیره شد” تا به کاربر راجع به اتفاقی که در پشت صحنه رخ میدهد اطلاع رسانی کند.
– حلقهها و روشها: زمان انجامم.ا.ا را تخمین میزد و اینکه چگونه مجدد تکرار شود و در چه بازه زمانی پایان یابد را مشخص میکند. برای مثال، م.ا.ا که ما در بخش قبل اجرا کردیم محتوای صفحهای که ما آن را در دسته علاقهمندیها قرار دادیم را به ما بازگرداند و حتی میتواند ۶ماه دیگر به ما یادآوری کند که شما اولین بار کی این صفحه را پسندید.
هر کدام از این بخشها یک تعاملی را ارائه میدهد که ایجاد یک چرخه در مورد چگونگی انجام کارها را سبب میشود. بر اساس توضیحات “سافر” اغلب کاربران متوجه از کار افتادن اینم.ا.ا ها هم نمیشوند.
آیا بازخوردها را در نظر میگیرید؟
بازخورد بخش مهمی از چرخه م.ا.ا است. این درست زمانی است کهم.ا.ا باعث ایجاد ارتباط بین کاربر و رابط بینشان میشود. بازخورد دقیقاً تخمین میزند کهم.ا.ا چگونه کار خواهند کرد.
به این موضوع اینگونه فکر کنید. شما باید ساعت ۷صبح از خواب بیدار شوید. ساعت گوشی همراه خود را تنظیم میکنید. زمانیکه ساعت خاموش میشود، چه اتفاقی می افتد؟ شما بیدار میشوید و ساعت را خاموش میکنید؟ یا بر روی گزینه چرت زدن (Snooz) ضربه میزنید؟ این عمل ساده به م.ا.ا این پیغام را میرساند که مجدد کی شروع به کار کند. برای چرخه بعدی ریست شود و یا ۹دقیقه دیگر خاموش شود. حلقه بازخورد بین کاربر و سیستم در این مرحله کامل میشود.
بدون بازخورد اولیه از سوی کاربر، صدای زنگ هشدار قطع نمیشود. ریست نمیشود. چرخه باز ایجاد شده در این مورد باعث میشود کهم.ا.ا پشت سر هم کار کند و متوقف نشود.
این کار شبیه زمانی است که شما در لیست کارهایی که باید انجام دهید، تعریف میکنید که برای انجام کاری به شما هشدار دهد. این دستور مانند یک قلاب به م.ا.ا میچسبد یا آیتمی که لازم دارید را مورد توجه شما قرار میدهد. با همین دو مثال شما متوجه شدید که چه زمان آیتم مورد نظر کامل شده و چه زمان در چرخهای باز مانده است. رضایتمندی از یک دستور کامل شده باعث تشویق شما برای کامل کردن دستورات بیشتر میشود و این اثری متقابل بر روی نرمافزار است.
با این موارد سادهای که در بالا توضیح داده شد، چیزهای زیادی میتوان یاد گرفت.اصلیترین آن این است که به شما نشان میدهد که کاربران میخواهند توسطم.ا.ا راهی با روشهای جدید را به وجود آورند و به طور مستقیم این چرخههای ایجاد شده را تکامل بخشند و دوباره و دوباره از آنها استفاده کنند.
طراحی با جزئیات و ریزه کاریها، قلب میکرواینتر اکشنها را به وجود میآورد
راهی که شما برای طراحیم.ا.ا انتخاب میکنید و اینکه چگونه جزئیات آن را تعیین میکنید میتواند باعث موفق و شکست پروژه شما باشد. تعاملاتی که باید طراحی شود جزء انکار ناپذیر طراحی شما به حساب میآیند.
اما سؤالی که پیش میآید این است که آنها را چگونه طراحی کنیم؟ در زمان طراحی به چه مواردی باید فکر شود؟
– م.ا.ا باید در تکرارهایی که اتفاق می افتد درست کار کند. از استفاده از انیمیشنها و القاب خاص برای زمانی که منظور شما شفاف به کاربر منتقل میشود خود داری کنید. به یاد داشته باشید کهم.ا.ا های شما باید طول عمرشان به گونهای باشد که کسی نتواند برای آن عددی مشخص کند.
– سادگی کلید این طراحی است. استفاده از زبانی ساده و روان، تایپ گرافی واضح، رنگهای پر جنب و جوش باید در طراحی مد نظر قرار گیرد. طوری طراحی کنید که از پایه و اساس درست کار کنند و از اضافه کردن هر گونه جزئیات غیر ضروری پرهیز کنید.
– م.ا.ا باید برای انسانها قابل فهمیدن باشد.نوشتهها باید به قدری خوانا باشند که گویی یک انسان صحبت میکند. طراحی باید کاملاً با توجه به ارتباطات روحی اجرا شود.
– اگر از کپیها استفاده میکنید باید در جای درست استفاده شوند. تناژهای درست را بکار بگیرید تا نوشتهها حس احترام، مفید بودن را به کاربر القاء کند و به قدر کافی از تأثیرات نور بهره بگیرید.
– با انیمیشنها جذابیت ایجاد کنید اما سعی کنید طراحی از حالت مدرن خود خارج نشود. در مورد آیکونهایی که در برنامه جدید بارگذاری میشوند و حجم شکلی آنها فکر کنید.انیمیشنها میتوانند حس مسئولیت پذیری را در کاربر ایجاد کند اما در نظر داشته باشد که بار مسئولیت درست کار کردن به عهده آنها نیست. سعی کنید از انیمیشنهای بی استفاده دور شوید و از آنها تا جایی استفاده کنید که بیشتر از بخش دیجیتال بصری در طراحی قرار نگیرد.
– از هارمونی موجود در رنگها استفاده کنید. کنتراست میتواند در این طراحی مثل دوستی به کمک شما بیاید، به شرطی که از آن با احتیاط استفاده کنید. زمانیکه کاربر در زمانی حساس به سراغم.ا.ا شما میآید، جزئیاتی مانند رنگ میتواند بخشی باشد که برای کاربر جذاب است و شما باید به آن فکر کنید. اگر برنامه شما از تم رنگی سبز بهرهمنداست، مطمئن شوید کهم.ا.ا شما هم با آن هماهنگ خواهد بود.
– به چگونگی تکمیل فرآیندم.ا.ا فکر کنید.آیام.ا.ا که شما طراحی میکنید در بار هزارم هم دقیقاً مثل بار اول کار میکند؟ هر دفعه به صورت قطعی کامل میشود؟ برای مثال تصور کنید که شما صدای هشدار ساعت را طوری میخواهید که مدام بلندتر شود تا زمانی که شماSnooz را فعال کنید. اگر بخواهید این موضوع را اجرایی کنید، باید جزئیات قبلی طراحی را در نظر بگیرید و طبق آن جلو بروید.
– بههرحال زیاده روی نکنید. طراحی مجدد باعث از دور خارج شدنم.ا.ا میشود. سعی کنید در طراحی خود نو آوری داشته باشید، دقت و سرعت را چاشنی طراحی خود کنید و ابزار نو خلق کنید تا مورد استفاده بیشتری قرار گیرد.
جمع بندی
میکرو اینتر اکشنها جزء کلیدی طراحی یک برنامه است که مردم میخواهند از آن استفاده کنند. آنها باعث ایجاد تعهد نسبت به برنامه شما میشوند. حس مشارکت و لذت را در کاربر ایجاد میکند. تمامی این موارد را کنار هم بچینید و کارایی کوچک ولی چشم گیری را خلق کنید که کاربر آن را نمیبیند اما به آن نیاز دارد و در طول استفاده از برنامه حضور آن را حیاتی میداند و نیاز دارد هر روز آن را تکرار کند.
برای اینکه در مورد روشهای طراحیهای مفید برای موبایل بیشتر یاد بگیرید کتاب الکترونیکی ” روشهای طراحی موبایل ۲۰۱۵و ۲۰۱۶ ” صفحه ۱۴۰به بعد را مطالعه کنید و از ساختار شکنیهای معمول روشهای طراحی تکنیکی را پیاده کنید که برای آن در این کتاب به ۷۱مثال قابل تأمل بر میخورید.