راهنمای جامع طراحی اپلیکیشن موبایل (قسمت اول)

جمعه ۲۵ اسفند ۹۶ توسط محمد نصراللهی

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

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

 

پیچیدگی را به حداقل برسانید

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

 

شلوغ طراحی نکنید

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

در هم ریختگی در برنامه های دسکتاپ چیز بدی است، اما در موبایل خیلی بد است (زیرا در موبایل به اندازه دسکتاپ فضا نداریم). کاملا ضروری است که در طراحی برای موبایل هر چیزی را که لازم نداریم حذف کنیم، چون کاهش در هم ریختگی درک مطلب را افزایش می دهد. تکنیک functional minimalism می تواند به شما کمک کند تا مشکل درهم ریختگی UI را حل کنید:

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

 

 

  • از تکنیک progressive disclosure (افشای تصاعدی) استفاده کنید.

 

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

 

حذف کردن task ها

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

 

task ها را بشکنید و کوچکتر کنید

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

 

 یک task طولانی را در قدم های کوچک شماره گذاری کنید مخصوصاً وقتی که حجم اطلاعاتی که دریافت می‌کنید زیاد باشد.

 

با این کار می توان دو اکتیویتی مختلف را به هم وصل کرد (مانند اجرای مرورگر برای انجام فرایند خرید).وقتی یک فرآیند را به گام های کوچک و شماره گذاری شده تقسیم می‌کنیم کاربر راحت ‌تر با آن ارتباط برقرار می کنند.

 

 پیدا کردن یک فیلم و خرید بلیط آن

 

از صفحات آشنا استفاده کنید

صفحات آشنا صفحاتی هستند که کاربر آنها را در بسیاری از اپلیکیشن ها دیده است.صفحاتی مانند"Search result" , Gettting started" , "what's new" در بسیاری از اپلیکیشن ها وجود دارند و نیازی به توضیحات اضافی ندارند چرا که کاربر با آنها آشنا است.این مورد باعث می شود که کاربر در تعامل با اپلیکیشن از اطلاعات قبلی خود استفاده کند و نیاز به یادگیری چیز جدیدی نداشته باشد.

 

صفحه پروفایل در اپلیکیشن quora

 

برای اطلاعات بیشتر در مورد صفحات آشنا صفحه The 11 Screens You’ll Find in Many of the Most Successful Mobile Apps را مطالعه کنید.

 

دریافت اطلاعات از کاربر را کاهش دهید

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

  • با حذف فیلدهای اضافی تا می توانید فرم را کوتاه کنید.اپلیکیشن باید کمترین اطلاعات را از کاربر بگیرد.

 

 

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

 

اعتبارسنجی درون خطی

 

  • از ویژگی های هوشمند مانند پر شدن خودکار (autocomplete) استفاده کنید. برای مثال وارد کردن آدرس از سخت ترین بخش های یک فرم ثبت نام می باشد.استفاده از ابزار هایی مانند Place Autocomplete Address Form وارد کردن آدرس را آسان تر می کند.
  • مقادیر هر فیلد را به صورت پویا اعتبارسنجی کنید.این که بعد از پر کردن فرم دوباره برگردید و اشتباهات را اصلاح کنید کار کسل کننده‌ای است. تا جایی که ممکن است مقادیر را بلافاصله پس از وارد کردن اعتبار سنجی کنید تا کاربر سریع آنها را اصلاح کند.

 

 

  • کیبورد را متناسب با نوع ورودی تنظیم کنید. وقتی شماره تلفن دریافت می‌کنید، کیبورد شماره‌ای را نمایش دهید، وقتی ایمیل دریافت می کنید، دکمه @ را به کیبورد اضافه کنید.مطمئن شوید که این ویژگی ها در همه جای اپلیکیشن اعمال شده اند.

 

 کیبورد را متناسب با ورودی تنظیم کنید.

 

نیازهای کاربر را حدس بزنید

همواره دقت کنید که آیا کاربر نیاز به راهنمایی دارد. برای مثال در عکس زیر کاربر راهنمایی می شود.

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

 

 برای نشان دادن اهمیت یک عنصر از ویژگیهای بصری استفاده کنید

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

آیتم های بزرگ مهمتر از آیتم های کوچک به نظر میرسند. دکمه Request Lyft نظر کاربر را جلب میکند.

 

از اصطلاحات خاص اجتناب کنید

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

 کلمات و عبارات ناشناخته کاربر را گیج می کند.

 

طراحیتان ثابت باشد

ثبات یک اصل ضروری در طراحی است.ثبات باعث می‌شود که کاربر گیج نشود.اینکه اپلیکیشن شما ظاهری ثابت داشته باشد امری ضروری است.در اپلیکیشن های موبایل ثبات یعنی:

  • ثبات تصویری

 باید دکمه ها و برچسب‌ها و ... در کل اپلیکیشن ثابت باشند.

  • ثبات کارکرد

 عناصر تعاملی باید در کل اپلیکیشن یکسان عمل کنند.

  • ثبات خارجی

 طراحی در محصولات چندگانه باید ثابت باشد. با این روش کاربر به راحتی از سایر محصولات نیز استفاده می کند.

 در ادامه توصیه های کاربردی را برای داشتن ثبات در طراحی ذکر می‌کنیم:

 

  • به دستورالعمل های پلتفرم توجه کنید

هر سیستم‌عامل موبایلی دستورالعمل های استانداردی برای طراحی رابط کاربری دارد. Apple’s Human Interface Guidelines و Google’s Material Design Guidelines. وقتی برای پلتفرم های native طراحی می کنید برای بهره‌ برداری از ماکسیمم کارایی، از دستورالعمل‌های طراحی آن سیستم عامل استفاده کنید. دلیل این که چرا پیروی از دستورالعمل‌های طراحی مهم است ساده است:کاربر با الگوهای تعاملی هر سیستم عامل آشنا می شود و هر چیزی که دستورالعمل ها را نقض می کند باعث ایجاد اصطکاک می شود.

 

  • از عناصر UI سایر پلتفرم ها تقلید نکنید

اگر برای اندروید و ios برنامه مینویسید عناصر UI دیگر پلتفرم ها را استفاده نکنید. آیکون ها، عناصر عملکردی( فیلد های ورودی، چک باکس ها، سوئیچ ها ) و typeface ها باید حس محلی بودن ایجاد کنند. تا می توانید از کامپوننت های محلی استفاده کنید تا کاربر به اپلیکیشن شما اعتماد کند.

 

  • اپلیکیشن موبایلتان با وب سایتتان یکسان باشند

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

 

ادامه دارد ...


کلیدواژه: mobile phone tablet design ui ux android ios mobile design اپلیکیشن طراحی

منابع: www.smashingmagazine.com

دیدگاه ها:
۲ سال قبل
reply
قالب های ورودی و راهنما به صورت پیشفرض در اندروید استودیو وجود دارند؟
لطفا اصطلاح انگلیسی برای جستجو را بفرمایید در هر مقاله
۲ سال قبل در پاسخ به امیر
reply
لفظ انگلیسی قالب های ورودی، input masks است و با جست و جوی این عبارت میتونید از لایبرری های اماده استفاده کنین. همچنین میتونید با اینترفیس inputFilter ورودی دریافتی از edittext رو قالب دهی کنید. برای اطلاعات بیشتر درباره inputFikter از لینک زیر استفاده کنید :
https://developer.android.com/reference/android/text/InputFilter.html
موفق باشید
ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.