طراحی سایت سازگار با موبایل با توجه به افزایش کاربرانی که از موبایل برای بازدید سایت ها استفاده می نمایند به امری ضروری تبدیل شده است و امروزه حتما سایت ها می بایست در خود چنین سازگاری را داشته باشد. در سال 2016 این میزان سازگاری حتی فراتر رفته و درخواست برای سازگاری بیشتر نمایش وب سایت در موبایل و تبلت به وجود آمده که از این بابت گرایش ها و ترفندهای جدیدی ایجاد شده است.
شما ميدانيد كه ايجاد يك اپليكيشن چقدر ميتواند فوق العاده باشد.اين موضوع ميتواند يك داستان خوب به همراه طراحى بصرى چشمگير را ارائه دهد،اما فقط موضوع دانستن كافى نيست-موضوع فراتر از اين ها است،چيزى كه بتواند با كاربر يك ارتباط واقعى را برقرار و حسى شبيه زنده بودن برنامه را ايجاد كند.
اينجاست كه فعل و انفعالات كوچك (كه زين پس از آن با نام ميكرو اينتر اكشن ها نيز ياد ميكنيم)دست بكار ميشوند.آنها ذراتى از راز اعتياداور شدن يك اپليكيشن هستند.اين نوع طراحى باعث ميشود كه كاربر لحظات زيادى مشغول برنامه شود،لذت غير منتظره اى نسبت به برنامه ايجاد شود و تمامى اين موارد از ديد همه بجز طراح برنامه،پنهان خواهد ماند.
شما نيز در طول روز بيش از صد بار با آنها برخورد ميكنيد.
هربار كه شما هشدار هاى وسايل الكترونيكى مانند موبايل خود را خاموش ميكنيد،زمانيكه براى شما پيام متنى ارسال ميشود و شما با ايجاد نورى بر روى صفحه نمايش وسيله خود متوجه آن ميشويد،وقتى به شما ياداورى ميشود كه در بازى نوبت شماست،رد كردن آهنگ در حال خواندن بر روى ديوايس شما و حتى زمانيكه شما به دليل هشدارهاى ترافيكى مسير خود را تغيير ميدهيد،در حال استفاده از ميكرو-اينتر اكشن ها هستيد و جالب اينجاست كه حتى در مورد آنها فكر هم نكرده ايد؛ اما هر كدام از اين عوامل نشان ميدهد كه چرا شما از يك اپليكيشن هر روز استفاده ميكنيد.
فعل و انفعال كوچك چيست؟
ميكرو اينتر اكشن هر سيگنالى است كه بر پايه وظيفه ى متعهد شدن كاربر به استفاده از آن وسيله است.اغلب اين تعهدات به سختى قابل توجه هستند و خيلى ارام حس همراهى را در فرد ايجاد ميكند.
بر اساس نظريه دن سافر در "كتاب عالى"، فعل و انفعالات كوچك كمك ميكنند تا ٣ وظيفه ى مخصوص به انجام برسند:
- ارتباط سريع با وضعيت و بازخورد
- تجسم و تصور نتيجه يك عمل
- كمك كردن به كاربر براى دستگارى كردن بعضى چيزها در صفحه نمايش
برنامه اسلك (slak) يك برنامه كاربردى عالى است كه تمام سه وظيفه گفته شده را در يك پكيج در خود جاى داده است.اين برنامه به كاربر اين امكان را ميدهد كه از طريق گفتگو ارتباط برقرا كند،اسناد را ضميمه كند و يكى ديگر را برچسب بزند.در اين ميان،اين برنامه از به روز رسانى لحظه اى جلوگيرى ميكند(مثل نمايش يك نشانگر براى پيامى كه خوانده شده است) و به هدايت كاربران نيز كمك ميكند.اين برنامه همچينين با نوتيفيكيشن ها به كاربر اطلاع رسانى ميكند و همچنين باعث ميشويد كاركنان به برنامه توجه كنند و ببينند چه باهم در ارتباط اند.
تاثیر این فعل و انفعالات کوچک بر روی کاربر و وظایف که این اپلیکیشن به روش های متنوع بر عهد ه دارد به شرح زیر است:
- خاموش و روشن کردن چیزی
- توضیحات کوتاه برای هر کاربرد دیجیتالی
- تغییر در تنظیمات یا روند یک فرآیند
- چک کردن یک پیغام یا یک خبر
- به روز شدن محتوا در دستگاه های موبایل با پایین کشیدن صفحه به سمت پایین
- تعامل بین المان های اطلاعات مانند چک کردن آب و هوا
- انجام دادن وظایف خاص به صورت ایزوله
- اتصال وسایل مختلف به هم برای مواردی مانند بازی های چند نفره یا ارسال دستور چاپ از لپتاپ شما به پرینتر
- به اشتراک گذاشتن یا علاقه مندی به یک عکس یا ویدیو در یک وب سایت
به بیان ساده ، میکرو اینتر اکشن فرآیندی است که مانند یک قلاب به یک فرآیند دیگر به بخشی از یک وسیله است.هر تعامل باید به صورت انسان محور پایه گذاری و طراحی شود که با کمک ابزار های دیجیتال کار میکند و مانند این است که تمامی وظایف را آینه وار گویا بر عهده یک انسان است انجام شود.این موضوع در کنار در دسترس بودن باید به روشی که انسان آن را انجام میدهد برنامه ریزی شود.
برای مثال در مورد توضیحات بالا طراحی UXP را بررسی میکنیم.ما یک وب سایت برای یافتن افرادی که کار مدلینگ و فشن انجام میدهند را نمونه سازی کردیم.هر کارت معرفی کننده ی یک مدل است، سایز و اندازه های آن مدل را نشان میدهد و زمانی که شما چهره آن فرد را جاگذاری کردید برایتان یک کارت تجاری ایجاد میشود.برای این سناریو خاص، میکرو اینتراکشن برای آشکار کردن اطلاعات ریز به کار می آیند.انیمیشن ها برای درک بهتر اضافه میشوند و طراحی با سبک زندگی کاربر مورد نظر ادامه پیدا میکند.
کاری که در نهایت این فعل و انفعالات کوچک انجام میدهند چیست؟
همان طور که در شرح فوق خواندید شامل قوانین مختلفی هستند که در نهایت مسئولیت بخشی از تعهد و پابند شدن کاربر به برنامه مورد نظر را به عهده دارند..
زمانیکه شما تصمیم گرفتید که یک میکرو اینتراکشن طراحی کنید نه تنها باید به این موضوع فکر کنید که باید عمل خاصی اتفاق بیفتد و یا وظیفه ای انجام شود بلکه باید این گونه به آن نگریست که این عمل بخشی از تجربیات کاربر در زندگی روزمره خواهد بود.
در نهایت، این فعل و انفعالات کوچک باید برای کاربر حسی را ایجاد کند و یا به انجام یک حرکت فیزیکی وادار کند:
- لمس کردن صفحه نمایش
- ایجاد لبخند از روی شوق و اشتیاق
- یادگیری یا فهمیدن چیزی
- ارتباط با کاربری دیگر
اپلیکشن Elevate برای یادگیری اجزاء مختلف یادگیری رابط استایل بازی ها مورد استفاده قرار میگیرد.به این صورت که کاربران باید صفحه نمایش را لمس کنند و جواب صحیح مربوط به سوال پرسیده شده را انتخاب کنند و جواب درست با انیمیشنی جذاب برای ایجاد حس خوشایند به کاربر نمایان میشود.این برنامه به کاربر اجازه میدهد تا مغز خود را پرورش دهد(بازی تصویر ها برای کمک به شما در موارد یادگیری اصول و کاربردها طراحی شده است).کاربران میتوانند امتیازات خود را به اشتراک بگذارند و نتایج را با دوستان و دیگر کاربران برنامه درمیان بگذارند.
این موضوع در مورد بسیاری از بازی های ساده آشنا به نظر میرسد اما این دقیقا چیزی است که کاربران از اکثر اپلیکیشن ها انتظار دارند.
همان طور که توضیح داده شد؛ راهنمای روشهای طراحی موبایل 2015 و 2016 نشان میدهد که این عملوند ها پاسخ دقیقی به چرای استفاده میکرواینتراکشن ها و کارایی آنها است.این ابزار کاربردی کوچک و کم حجم باعث ایجاد پیوندی میان احساس و علم دیجیتال است.این ها به کاربر اجازه میدهند تا چیزی را حس کنند و به کاربر و یا شی دیگری دسترسی داشته باشند.
4 المان میکرواینتر اکشن(م.ا.ا)
سر دم دار تمامی میکرواینتراکشن ها "دن سافر" است.کافی است در گوگل کلمه و میکرواینتراکشن را جست و جو کنید تا به ببینید قطعا به اولین اطلاعاتی که بر میخورید نام این شخص در آن به آشکارا به چشم میخورد.او حتی در این مورد کتابی نوشته است و تمرکز خود را بر روی 4 بخش ساختار میکرواینتراکشن ها قرار داده که به واقع این چند اصل بهترین راه برای خلق این فعل و انفعالات کوچک است.
- قلاب: ابتدای کار م.ا.ا از اینجا آغاز میشود.برای مثال، من برای اینکه صفحه ای در فهرست علاقه مندی قرارگیرد بر روی آیکون قلبی شکل کلیک میکنم.
- قوانین:رفتارسازی م.ا.ا راه بعدی است. کاربر قوانین را نمیبیند اما بازخورد آنها را در صفحه بعدی متوجه میشود.در این مورد کلیک کردن بر روی آیکون قلبی شکل باعث میشود تا صفحه ای که در آن هستید در دسته صفحات پر بازدید قرار گیرد.
- بازخورد: چگونگی طراحی ارتباطات م.ا.ا با کاربر مورد توجه قرار میگیرد.آیکون قلبی شکل به صورت تو پر و حجمی نمایش داده میشود به همراه جمله خبری " در دسته صفحات پر بازدید ذخیره شد" تا به کاربر راجع به اتفاقی که در پشت صحنه رخ میدهد اطلاع رسانی کند.
- حلقه ها و روش ها : زمان انجام م.ا.ا را تخمین میزد و اینکه چگونه مجدد تکرار شود و در چه بازه زمانی پایان یابد را مشخص میکند.برای مثال،م.ا.ا که ما در بخش قبل اجرا کردیم محتوای صفحه ای که ما آن را در دسته علاقه مندی ها قرار دادیم را به ما بازگرداند و حتی میتواند 6 ماه دیگر به ما یادآوری کند که شما اولین بار کی این صفحه را پسندید.
هر کدام از این بخش ها یک تعاملی را ارائه میدهد که ایجاد یک چرخه در مورد چگونگی انجام کارها را سبب میشود.بر اساس توضیحات "سافر" اغلب کاربران متوجه از کار افتادن این م.ا.ا ها هم نمیشوند.
آیا بازخورد ها را در نظر میگیرید؟
بازخورد بخش مهمی از چرخه م.ا.ا است.این درست زمانی است که م.ا.ا باعث ایجاد ارتباط بین کاربر و رابط بینشان میشود.بازخورد دقیقا تخمین میزند که م.ا.ا چگونه کار خواهند کرد.
به این موضوع اینگونه فکر کنید.شما باید ساعت 7 صبح از خواب بیدار شوید.ساعت گوشی همراه خود را تنظیم میکنید.زمانیکه ساعت خاموش میشود، چه اتفاقی می افتد؟شما بیدار میشوید و ساعت را خاموش میکنید؟ یا بر روی گزینه چرت زدن (Snooz) ضربه میزنید؟این عمل ساده به م.ا.ا این پیغام را میرساند که مجدد کی شروع به کار کند.برای چرخه بعدی ریست شود و یا 9 دقیقه دیگر خاموش شود.حلقه بازخورد بین کاربر و سیستم در این مرحله کامل میشود.
بدون بازخورد اولیه از سوی کاربر، صدای زنگ آلارم قطع نمیشود.ریست نمیشود.چرخه باز ایجاد شده در این مورد باعث میشود که م.ا.ا پشت سر هم کار کند و متوقف نشود.
این کار شبیه زمانی است که شما در لیست کارهایی که باید انجام دهید، تعریف میکنید که برای انجام کاری به شما هشدار دهد.این دستور مانند یک قلاب به م.ا.ا میچسبد یا آیتمی که لازم دارید را مورد توجه شما قرار میدهد.با همین دو مثال شما متوجه شدید که چه زمان آیتم مورد نظر کامل شده و چه زمان در چرخه ای باز مانده است.رضایتمندی از یک دستور کامل شده باعث تشویق شما برای کامل کردن دستورات بیشتر میشود و این اثری متقابل بر روی اپلیکیشن است.
با این موارد ساده ای که در بالا توضیح داده شد، چیزهای زیادی میتوان یاد گرفت.اصلی ترین آن این است که به شما نشان میدهد که کاربران میخواهند توسط م.ا.ا راهی با روش های جدید را به وجود آورند و به طور مستقیم این چرخه های ایجاد شده را تکامل بخشند و دوباره و دوباره از آنها استفاده کنند.
طراحی با جزئیات و ریزه کاری ها ، قلب میکرواینتر اکشن ها را به وجود می آورد.
راهی که شما برای طراحی م.ا.ا انتخاب میکنید و اینکه چگونه جزئیات آن را تعیین میکنید میتواند باعث موفق و شکست پروژه شما باشد.تعاملاتی که باید طراحی شود جزء انکار ناپذیر طراحی شما به حساب می آیند.
اما سوالی که پیش می آید این است که آنها را چگونه طراحی کنیم؟در زمان طراحی به چه مواردی باید فکر شود؟
- م.ا.ا باید در تکرار هایی که اتفاق می افتد درست کار کند.از استفاده از انیمیشن ها و القاب خاص برای زمانیکه منظور شما شفاف به کاربر منتقل میشود خود داری کنید.به یاد داشته باشید که م.ا.ا های شما باید طول عمرشان به گونه ای باشد که کسی نتواند برای آن عددی مشخص کند.
- سادگی کلید این طراحی است.استفاده از زبانی ساده و روان، تایپ گرافی واضح، رنگ های پر جنب و جوش باید در طراحی مد نظر قرار گیرد.طوری طراحی کنید که از پایه و اساس درست کار کنند و از اضافه کردن هر گونه جزئیات غیر ضروری پرهیز کنید.
- م.ا.ا باید برای انسان ها قابل فهمیدن باشد.نوشته ها باید به قدری خوانا باشند که گویی یک انسان صحبت میکند.طراحی باید کاملا با توجه به ارتباطات روحی اجرا شود.
- اگر از کپی ها استفاده میکنید باید در جای درست استفاده شوند.تناژهای درست را بکار بگیرید تا نوشته ها حس احترام، مفید بودن را به کاربر القاء کند و به قدر کافی از تاثیرات نور بهره بگیرید.
- با انیمیشن ها جذابیت ایجاد کنید اما سعی کنید طراحی از حالت مدرن خود خارج نشود.در مورد آیکون هایی که در برنامه جدید بارگذاری میشوند و حجم شکلی انها فکر کنید.انیمیشن ها میتوانند حس مسئولیت پذیری را در کاربر ایجاد کند اما در نظر داشته باشد که بار مسولیت درست کار کردن به عهده انها نیست.سعی کنید از انیمیشن های بی استفاده دور شوید و از آنها تا جایی استفاده کنید که بیشتر از بخش دیجیتال بصری در طراحی قرار نگیرد.
- از هارمونی موجود در رنگ ها استفاده کنید.کنتراست میتواند در این طراحی مثل دوستی به کمک شما بیاید، به شرطی که از آن با احتیاط استفاده کنید.زمانیکه کاربر در زمانی حساس به سراغ م.ا.ا شما می آید، جزئیاتی مانند رنگ میتواند بخشی باشد که برای کاربر جذاب است و شما باید به آن فکر کنید.اگر برنامه شما از تم رنگی سبز بهره مند است،مطمئن شوید که م.ا.ا شما هم با آن هماهنگ خواهد بود.
- به چگونگی تکمیل فرآیند م.ا.ا فکر کنید.آیا م.ا.ا که شما طراحی میکنید در بار هزارم هم دقیقا مثل بار اول کار میکند؟هر دفعه به صورت قطعی کامل میشود؟برای مثال تصور کنید که شما صدای آلارم ساعت را طوری میخواهید که مدام بلندتر شود تا زمانیکه شما Snooz را فعال کنید.اگر بخواهید این موضوع را اجرایی کنید، باید جزئیات قبلی طراحی را در نظر بگیرید و طبق آن جلو بروید.
- بهرحال زیاده روی نکنید.طراحی مجدد باعث از دور خارج شدن م.ا.ا میشود.سعی کنید در طراحی خود نو آوری داشته باشید، دقت و سرعت را چاشنی طراحی خود کنید و ابزار نو خلق کنید تا مورد استفاده بیشتری قرار گیرد.
جمع بندی
میکرو اینتر اکشن ها جزء کلیدی طراحی یک برنامه است که مردم میخواهند از آن استفاده کنند.آنها باعث ایجاد تعهد نسبت به برنامه شما میشوند. حس مشارکت و لذت را در کاربر ایجاد میکند.تمامی این موارد را کنار هم بچینید و کارایی کوچک ولی چشم گیری را خلق کنید که کاربر آن را نمیبیند اما به آن نیاز دارد و در طول استفاده از برنامه حضور آن را حیاتی میداند و نیاز دارد هر روز آن را تکرار کند.
برای اینکه در مورد روش های طراحی های مفید برای موبایل بیشتر یاد بگیرید کتاب الکترونیکی " روشهای طراحی موبایل 2015 و 2016 " صفحه 140 به بعد را مطالعه کنید و از ساختار شکنی های معمول روش های طراحی تکنیکی را پیاده کنید که برای آن در این کتاب به 71 مثال قابل تامل بر میخورید.