بازارياب

چگونه يك رابط كاربري اپليكيشن موبايل مانند يك حرفه اي طراحي كنيم

اگر مي خواهيد يك رابط كاربري عالي و كاربردي براي اپليكيشن موبايل طراحي كنيد، در جاي مناسبي هستيد. در اين راهنما، من شما را از طريق اصول كليدي طراحي اپليكيشن موبايل راهنمايي مي كنم. سپس بحث خواهم كرد كه چگونه ما – و شما – مي‌توانيم الزامات طرح‌هاي خود را درك كرده و بسازيم، و چگونه مي‌توان اين طرح‌ها را اجرا كرد. در نهايت، من شما را از طريق آزمايش بسيار مهم طرح هاي شما و چند مرحله بعدي راهنمايي مي كنم.

وسوسه شده ايد كه مستقيما وارد شويد و با طرح ها شروع كنيد؟ زماني كه بيش از ده سال پيش براي اولين بار به عنوان يك طراح رابط كاربري شروع به كار كردم، تقريباً همين احساس را داشتم، اما اكيداً توصيه مي‌كنم قبل از اينكه وارد عمل شويد، اين نظريه را بررسي كنيد.

چرا؟ زيرا اصول طراحي بسيار مهم است. اصول طراحي - كه معمولاً اكتشافي ناميده مي‌شود - دستورالعمل‌هاي ضعيفي هستند كه طراحان مي‌توانند براي بهبود كيفيت طراحي رابط كاربري و در نهايت سرعت بخشيدن به زمان تحويل شما، به آنها پايبند باشند. اگر به طور جدي به طراح رابط كاربري فكر مي كنيد، بايد توجه كنيد!

1. اصول طراحي UI
وقتي با هم استفاده مي شود، اصول طراحي كار طراح UI را بسيار آسان تر مي كند. آنها بسياري از حدسيات را حذف مي كنند و رابط ها را قابل پيش بيني تر و در نتيجه استفاده آسان تر مي كنند.

كريس ميرز از The UX Review اين توصيه را در مورد طراحي براي موبايل به ما داد:

«يكي از موارد استفاده اصلي از تلفن همراه، از بين بردن زمان است. اما اين بدان معنا نيست كه شما بايد كاربران خود را هدر دهيد. مطمئن شويد كه وظايف اصلي را كه آنها مي‌خواهند در برنامه شما از طريق تحقيق انجام دهند را درك كرده‌ايد و آن‌ها را در كانون توجه رابط قرار دهيد."

قبل از اينكه جلوتر برويم، بياييد شش مورد از رايج ترين اصول طراحي رابط كاربري را تعريف كنيم. اصل ساختار، اصل سادگي، اصل ديد، اصل بازخورد، اصل تحمل و در نهايت اصل استفاده مجدد.

اصل ساختار
طراحي بايد رابط كاربري را به طور هدفمند، به روش‌هاي معنادار و مفيد بر اساس مدل‌هاي واضح و ثابتي كه براي كاربران آشكار و قابل تشخيص است، سازماندهي كند، چيزهاي مرتبط را كنار هم قرار دهد و چيزهاي نامرتبط را از هم جدا كند، چيزهاي غيرمشابه را متمايز كند و چيزهاي مشابه را شبيه يكديگر كند. اصل ساختار مربوط به معماري كلي رابط كاربر است.

اصل سادگي
طراحي بايد كارهاي ساده و معمولي را آسان كند، به زبان خود كاربر به وضوح و به سادگي ارتباط برقرار كند و ميانبرهاي خوبي را ارائه دهد كه به طور معناداري با رويه‌هاي طولاني‌تر مرتبط هستند.

اصل ديد
طراحي بايد همه گزينه ها و مواد مورد نياز براي يك كار مشخص را بدون پرت كردن حواس كاربر با اطلاعات اضافي يا اضافي قابل مشاهده كند. طرح هاي خوب كاربران را با گزينه هاي جايگزين غرق نمي كند يا آنها را با اطلاعات غير ضروري اشتباه نمي گيرد.

اصل بازخورد
طراحي بايد كاربران را از اعمال يا تفاسير، تغييرات حالت يا شرايط، و خطاها يا استثناهايي كه مرتبط و مورد علاقه كاربر هستند از طريق زباني واضح، مختصر و بدون ابهام آشنا براي كاربران مطلع كند.

اصل مدارا
طراحي بايد انعطاف‌پذير و قابل تحمل باشد، هزينه اشتباهات و استفاده نادرست را با اجازه دادن به بازگرداندن و انجام مجدد كاهش دهد، در حالي كه با تحمل ورودي‌ها و توالي‌هاي مختلف و با تفسير همه اقدامات منطقي، تا حد امكان از خطاها جلوگيري مي‌كند.

اصل استفاده مجدد
طراحي بايد از اجزاء و رفتارهاي داخلي و خارجي استفاده مجدد كند، به جاي صرفاً سازگاري دلخواه، سازگاري با هدف را حفظ كند، بنابراين نياز كاربران به تجديد نظر و يادآوري را كاهش دهد.

هانا آلوارز از UserTesting اين توصيه را براي مبتديان UI در كتاب الكترونيكي ارائه كرده است.

تا به حال اين ضرب المثل را شنيده ايد، «دوبار اندازه گيري، يك بار برش بده؟» خوب، اين ايده براي ساختن اپليكيشن ها نيز صدق مي كند. هنگامي كه در حال طراحي يك برنامه هستيد، مي‌توانيد تأييد كنيد كه در مسير درستي هستيد و با آزمايش نمونه‌هاي اوليه توسط كاربر، از انجام دوباره كاري پرهزينه خودداري كنيد. مي‌توانيد قبل از نوشتن هر كدي، پيچيدگي‌هاي طراحي را برطرف كنيد و در زمان و زحمت تيم خود براي ايجاد تغييرات در توسعه صرفه‌جويي كنيد. به علاوه، شما از قبل مي‌دانيد كه كاربران چگونه محصول شما را قبل از ورود به فروشگاه برنامه دريافت خواهند كرد.»

در ادامه، من به شما نشان خواهم داد كه چگونه مي توانيد از اين اصول براي ايجاد يك رابط كاربري كاربردي و تميز براي موبايل استفاده كنيد. اگر مي‌خواهيد عميق‌تر در اين اصول طراحي غوطه‌ور شويد، دوره طراحي UI ما در اينجا در CareerFoundry همه چيزهايي را كه در مورد نحوه استفاده از اصول طراحي UI براي ايجاد طرح‌هاي زيبا و كاربردي برنامه‌هاي موبايل بايد بدانيد را به شما آموزش مي‌دهد.

2. فرآيند طراحي اپليكيشن موبايل: چه چيزي مي سازيم؟
من ايده اي براي يك برنامه يادگيري زبان داشتم كه به كاربر اجازه مي دهد تا دايره لغات خود را در يك زبان خاص با نشان دادن يك كلمه (يا چندين كلمه) هر روز به آنها گسترش دهد تا زماني كه كلمه را حفظ كند.

ما اين برنامه را "روزي كلمه فرانسوي" مي ناميم. ايده اين است كه در نهايت مجموعه‌اي از اين برنامه‌ها را براي چندين زبان منتشر كنيم، اما ما با زبان فرانسه شروع مي‌كنيم، زيرا من در واقع مدتي است كه آن را ياد مي‌گيرم.

قبل از شروع، بايد بدانيم كه چه چيزي را طراحي مي كنيم. ما هنوز نيازي نداريم مداد و كاغذ را بيرون بياوريم يا Sketch را روشن كنيم. ما فقط بايد عملكردهاي كلي برنامه را بررسي كنيم. پس از كمي فكر كردن، در اينجا كاركردهاي اصلي كه من شناسايي كرده ام آورده شده است:

اعلان‌ها - ما بايد كلمات جديد را از طريق يك اعلان به كاربر ارسال كنيم، بنابراين به يك صفحه ورود نياز داريم كه از كاربر مي‌خواهد اعلان‌هاي فشاري را مجاز كند.
صفحه اصلي – كاربر بايد بتواند چندين درس زبان مختلف بخرد، بنابراين ما به يك صفحه اصلي نياز داريم كه بتواند اين درس ها را خريداري كند و درس هاي موجود را فعال كند.
پيگيري پيشرفت - كاربر بايد بتواند پيشرفت هر درس را كه در حال حاضر فعال شده است ببيند.
مشاهده يك درس - كاربر بايد بتواند ليستي از كلماتي را كه تا كنون در يك درس ياد گرفته است ببيند.
مشاهده يك كلمه - كاربر بايد بتواند كلماتي را كه قبلاً ياد گرفته است مشاهده كند. اين بايد شامل تعريف، مرجع تصوير، بخش گفتار، تلفظ صوتي و پيوند به صرف باشد.
مطمئناً چيزهاي بيشتري براي اين برنامه وجود خواهد داشت، اما اين ليست براي دامنه اين آموزش به خوبي كار مي كند.

كريس مسينا، رهبر تجربه توسعه‌دهنده در اوبر، بهترين نكات خود را هنگام طراحي براي تلفن همراه به ما مي‌دهد:

«اين روزها درك رفتار و زمينه كاربر بسيار مهم است. مردم سرشان شلوغ است، در حال حركت هستند و هزاران چيز در جريان است. نمونه‌سازي اوليه برنامه يا سرويس خود را با استفاده از پيام‌رساني به‌عنوان كانال تحويل خود در نظر بگيريد تا ببينيد چگونه مي‌توانيد با افراد در جايي كه هستند ملاقات كنيد، و خدمات خود را به وظايف كوچك‌تري تقسيم كنيد كه مي‌توانند در طول زمان با هم تركيب شوند، نه اينكه يك‌باره اجرا شوند.

و جورجي باتوملي از بانوان آن UX در مورد اهميت زمينه هنگام آزمايش برنامه تلفن همراه به ما گفت.

"هنگام آزمايش براي تلفن همراه بسيار مهم است كه كاربر در محيط طبيعي خود باشد. خيلي آسان است كه اين موضوع را در نظر نگيريم و كاربران را پشت ميز يا در يك زمينه غيرطبيعي قرار دهيم. در مورد جايي كه كاربران شما معمولاً با دستگاه هاي تلفن همراه خود درگير مي شوند فكر كنيد و سعي كنيد آن را تكرار كنيد. مثلا؛ روي صندلي (به سفر با اتوبوس فكر كنيد) روي مبل (در حالي كه در حال تماشاي تلويزيون در خانه فكر مي كنيد) در اطراف اتاق قدم مي زنند (در حالي كه آنها در حال حركت هستند). اين به شما امكان مي دهد تا بازخورد بهتري در مورد آنچه ايجاد مي كنيد دريافت كنيد.

3. چگونه آن را بسازيم؟
براي شروع، از مداد و كاغذ استفاده مي كنيم و شروع به ترسيم اين عملكردهاي مختلف برنامه مي كنيم. پس از نهايي شدن اين نقاشي‌ها، به Sketch مي‌رويم و شروع به دميدن زندگي در آنها مي‌كنيم.

Sketch ابزار عالي براي اين كار است زيرا براي طراحي رابط كاربري ساخته شده است. همچنين داراي ابزارهاي داخلي بسيار خوبي است كه به شما كمك مي كند طرح هاي تلفن همراه خود را تنظيم كنيد و آنها را در دستگاه خود پيش نمايش كنيد. بيشتر در مورد آن بعدا.

اگر مي خواهيد ابزارهاي ديگر را كاوش كنيد، در اينجا 12 ابزار طراحي اپليكيشن موبايل براي طراحان رابط كاربري وجود دارد.

طراحي برنامه ما
اولين چيزي كه به آن نياز داريم يك فلوچارت ساده است تا بتوانيم بفهميم كاربر چگونه راه خود را از طريق نرم افزار طي مي كند.

اين به ما كمك مي كند تا بفهميم صفحه هاي مختلف برنامه ما چگونه با يكديگر تعامل دارند. در مرحله بعد روي ترسيم هر صفحه جداگانه كار خواهيم كرد

از اينجا، ما آماده هستيم تا Sketch را فعال كنيم و شروع به زنده كردن طرح هاي خود كنيم!

شبانه روزي
اولين كاري كه بايد انجام دهيم اين است كه مطمئن شويم كاربر به ما اجازه مي دهد تا اعلان هاي فشار را براي آنها ارسال كنيم. اينگونه است كه ما هر روز كلمات جديدي را به آنها ارائه خواهيم كرد.

بياييد شروع به اجراي اين اصول طراحي رابط كاربري كنيم. كار كردن براي ورود آسان است، بنابراين مي‌خواهيم مطمئن شويم كه فرآيند تا حد امكان ساده و سبك است.

من نگاهي اجمالي به برخي از حذف‌هاي داخلي انداختم تا ببينم برنامه‌هاي ديگر چگونه با درخواست از كاربر براي فعال كردن اعلان‌هاي فشاري برخورد مي‌كنند. متوجه شدم كه Foursquare در اينجا كار بسيار هوشمندانه اي انجام مي دهد. گاهي اوقات وقتي از كاربران خواسته مي شود اعلان ها را فعال كنند يا از موقعيت مكاني خود استفاده كنند، ممكن است غافلگير شوند. بنابراين Foursquare حباب اعلان را در بالاي دستورالعمل ها قرار مي دهد كه توضيح مي دهد چرا آنها بايد اعلان را فعال كنند.

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

هنگامي كه يك كاربر جديد برنامه را راه اندازي مي كند، اولين چيزي كه به او نشان مي دهيم صفحه اي است كه توضيح مي دهد چرا براي ارسال اعلان ها به آنها به مجوز نياز داريم.

بياييد شروع كنيم به كثيف كردن دستانمان. اولين كاري كه بايد انجام دهيم اين است كه يك طرح سريع از اين صفحه را ترسيم كنيم. شروع با مداد و كاغذ بسيار مهم است زيرا رسانه بسيار بخشنده است. هرچه بيشتر بتوانيد در اين مرحله قبل از فشار دادن پيكسل هاي واقعي به اطراف پي ببريد، بهتر است.

اكنون ما يك پايگاه خوب براي شروع طراحي داريم. از اينجا Sketch را فعال مي‌كنيم، ابزار Artboard (A) را انتخاب مي‌كنيم و از پيش‌تنظيم آيفون 6 در قسمت بازرس سمت راست استفاده مي‌كنيم. براي افزودن عناصر رايج iOS مانند نوار وضعيت، به File >> New From Template >> iOS UI Design مي رويم. اين فايل حاوي تمام عناصر رايج iOS است كه اغلب به آنها نياز داريد.

حالا بياييد طراحي را شروع كنيم!

وقتي كاربر روي «فعال كردن اعلان‌ها» ضربه مي‌زند، اين كادر محاوره‌اي مجوز بومي را فعال مي‌كنيم:

ماركوس گوتيرز، مدير عامل 99designs Europe نكات كليدي خود را در مورد طراحي اپليكيشن هاي موبايل به ما گفت:

«صاحبان كسب و كار از اهميت حضور تلفن همراه آگاه هستند و ما شاهد افزايش تقاضاي طراحان اپليكيشن در سايت ما هستيم. استفاده از تلفن همراه در سال 2015 از ساير دستگاه‌ها پيشي گرفته است. علاوه بر اين، Google شروع به استفاده از قابليت استفاده از تلفن همراه به عنوان رتبه كرد، بنابراين اگر ترافيك جستجوي ارگانيك منبع اصلي ترافيك براي تجارت آنها باشد، طراحان بايد ذهنيتي براي استفاده از تلفن همراه داشته باشند.

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