الگوهای طراحی ورودی کاربر داغ برای موبایل:

6 هدف از طراحی ورودی کاربر:

قبل از اینکه به خود الگوها برویم ، درک شش هدف اصلی طراحی ورودی کاربر مهم است - من آنها را در زیر شرح داده ام:

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

کاهش حجم ورودی

صفحه های جذاب ورود اطلاعات را طراحی کنید

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

مستندات ورودی مورد نیاز را طراحی کنید

کنترل های ورودی موثر ایجاد کنید

مروری بر الگوها:

با در نظر گرفتن اهداف طراحی بالا ، در اینجا یک مرور کلی از الگوهای طراحی است که ما در الگوهای طراحی UI موبایل  شرح داده ایم:

صفحه کلیدهای هوشمند

مقادیر پیش فرض و تکمیل خودکار

غوطه وری فوری (یا "ثبت نام تنبل")

میله های اکشن

ورود به سیستم اجتماعی

دکمه های عظیم

کشیدن انگشت برای اقدامات

اطلاعیه

کنترل های قابل کشف

ورودی های قابل ارتقا

واگرد

1. صفحه کلیدهای هوشمند:

مسئله

کاربر می خواهد اطلاعات را سریع وارد کند.

راه حل

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

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

2. مقادیر پیش فرض و تکمیل خودکار:

مسئله

کاربر می خواهد اقدامات را به سرعت انجام دهد.

راه حل

با تهیه مقادیر پیش فرض از پیش جمع شده یا اعلان ها بر اساس داده های قبلاً وارد شده ، مواردی را که مرتباً انتخاب شده پیش بینی کرده و ورود اطلاعات را برای کاربر آسان تر کنید. این امر می تواند با قابلیت تکمیل خودکار مانند جستجوی فروشگاه Google Play جفت شود ، و با سرعت بخشیدن به سرعت ، تجربه کاربر را به طور قابل توجهی بهبود می بخشد. این الگو می تواند به ویژه در استاندارد سازی ورودی کاربر و پیش بینی مشکلات قبل از بروز آنها مفید باشد. به عنوان مثال ، اسکایپ به طور خودکار وانمود می کند شماره تلفن های وارد شده با کد کشور را وارد می کند. این از نظر کاربر منطقی است زیرا آنها عادت ندارند این اطلاعات را به طور منظم وارد کنند ، اما از این جهت مهم است که Skype یک برنامه تماس بین المللی است.

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

3. غوطه وری فوری (یا "ثبت نام تنبل"):

مسئله

کاربر می خواهد قبل از تعهد ، موارد را امتحان کند.

راه حل

برنامه های بیشتر به کاربران اجازه می دهند قبل از هر چیز بلافاصله خود را در یک برنامه غوطه ور کنند - حتی ثبت نام یا ورود به سیستم.

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

اجازه ثبت نام دیرهنگام برای برنامه هایی مانند Carousel یا Duolingo که به عملکرد کاربر متکی هستند ، منطقی نیست ، اما برنامه هایی مانند Wunderlist یا Houzz می توانند به کاربرانشان اجازه دهند قبل از درخواست از خود برای شناسایی ، وارد برنامه شوند و از آن استفاده کنند. اغلب اوقات ، ثبت نام با یک مزیت اضافی همراه است که جذابیت آن را بیشتر می کند ، مانند همگام سازی بین دستگاه در Wunderlist یا ایجاد یک کتاب ایده در Houzz. ثبت نام دیرهنگام همیشه ایده خوبی نیست ، اما گزینه "سعی کنید قبل از ثبت نام" می تواند راهی عالی برای افزایش تعامل با برنامه شما باشد.

4. میله های اکشن:

مسئله

کاربر می خواهد دسترسی سریع به اقدامات مکرر استفاده شود.

راه حل

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

5. ورود به سیستم اجتماعی:

مسئله

کاربر می خواهد راهی آسانتر برای ثبت نام و ورود به سیستم داشته باشد.

راه حل

روشهای ورود به سیستم اجتماعی را که به کاربران امکان می دهد از طریق حسابهای موجود خود وارد شوند ، ادغام کنید. این بدان معناست که آنها دارای یک ترکیب نام کاربری / رمز عبور کمتر برای نگرانی هستند و در عین حال ، شما نگران امنیت رمز عبور نیستید. فیس بوک ، توییتر و گوگل عمده ترین ارائه دهندگان ورود به سیستم OAuth هستند و بسته به سیستم عامل و مخاطبان هدف ، می توانید به جای اینکه کاربران حساب جداگانه ای تنظیم کنند که ممکن است در آن استفاده کنند یا نه ، می توانید همه یا هر یک از این موارد را در برنامه خود پیاده کنید. آینده. با استفاده از این الگوی ثبت نام و ورود به سیستم می توانید برخی از داده های اساسی در مورد کاربر (که با استفاده از برنامه به جمعیت خودکار داده ها کمک می کند) در اختیار شما قرار می دهد ، در حالی که با مجبور نکردن به وارد کردن جزئیات خود به آنها ، کار را برای آنها آسان تر می کند. برنامه جدید عجیب و غریب که آنها تازه بارگیری کرده اند. این ویژگی ساده می تواند کمک زیادی به بهبود شدید UX شما کند و جای تعجب نیست که این الگو در مسیر تبدیل شدن به یک انتظار قرار دارد.

6. دکمه های عظیم:

مسئله

کاربر می خواهد بلافاصله بداند چه اقداماتی را می تواند انجام دهد.

راه حل

اندازه هدف ضربه بزنید روی صفحه لمسی ایده آل ممکن است 72px باشد ، اما برخی از برنامه ها مانند Tinder دکمه های عظیمی به شما می دهند تا دقیقاً بدانید که چه کاری باید انجام دهید و در هر کجا که هستید و هر کاری که انجام می دهید می توانید آن را به سرعت انجام دهید - بسیار سخت است که این موارد عظیم را فراموش کنید دکمه ها ، حتی اگر به دنبال آن نباشید. این امر به ویژه در برنامه های ساده تر ، درصورتی که اقدامات محدودی که کاربر باید انجام دهد ، وجود دارد و بنابراین ، دلیل بیشتری برای سهولت انجام این اقدامات در زمینه های مختلف ، از اهمیت بیشتری برخوردار است. به عنوان مثال Shazam به معنای استفاده در هنگام تماشای تلویزیون یا گوش دادن به موسیقی است و در واقع فقط یک کار را انجام می دهد. دکمه های عظیم برای کاربری که سعی دارد در این حالت پریشان چند وظیفه ای انجام دهد ، پیشرفت بسیار خوبی است.

7. کشیدن انگشت برای اقدامات:

مسئله

کاربر می خواهد روی محتوای خاصی تمرکز کند.

راه حل

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

8. اعلان ها:

مسئله

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

راه حل

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

9. کنترل های قابل کشف:

مسئله

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

راه حل

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

Uber یک اجرای جایگزین برای این الگوی طراحی است. Uber همچنین به شما اجازه می دهد بین رزرو سواری و دیدن برآورد کرایه با ضربه زدن روی دکمه لغزنده هنگامی که نوع سواری مورد نظر خود را انتخاب کردید ، تغییر وضعیت دهید. این یک الگوی ساده و در عین حال مهم طراحی رابط کاربر است که باعث می شود هر وقت پنج کار را انجام می دهم هنگام تلاش برای سوار شدن به جایی لبخند بزنم ، اما می خواهم اطمینان حاصل کنم که Uber با قیمت های بالاتر من را از بین نمی برد. Snapchat و Facebook Messenger با کشیدن هر دو دوست باقی مانده به شما امکان می دهند در صورت نیاز به ویژگی ها دسترسی داشته باشید.

10. ورودی های قابل ارتقا:

مسئله

کاربر می خواهد به جای اینکه املاک و مستغلات صفحه را فدای کنترل ها کند ، روی محتوا تمرکز کند.

راه حل

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

11. واگرد:

مسئله

کاربر می خواهد سریعاً بدون وقفه (مثلاً تأییدها) اما با گزینه برگشت اقدامات تصادفی اقدام کند.

راه حل

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

ورودی کاربر خود را دریافت کنید:

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