https://virgool.ir/feed/@pegah.abdolahzadeدر تلاش برای طراح شدنfa2026-11-12 07:54:15https://files.virgool.ir/upload/users/999639/avatar/SKBCEM.jpeghttps://virgool.ir/@pegah.abdolahzadehttps://virgool.ir/@pegah.abdolahzade/فرایند-طراحی-اپلیکیشن-period-tracker-خورشید-owc8ikhmgrkx‫ابزارها: Figma - Miro - Google forms - کاغذ و مدادزمان انجام پروژه: پاییز ۱۴۰۰حدود ۵ سال هست که خودم یکی از کاربران اپلیکیشن‌های Period tracker هستم و بسیاری از این اپلیکیشن‌ها رو امتحان کردم ولی متاسفانه کارکردن با اکثر این اپ‌ها برام بسیار سخت، پیچیده و نامفهوم هستند که باعث میشه به عنوان کاربر، نتونم باهاشون ارتباط مناسب و مهمتر از همه طولانیی مدت برقرار کنم. (البته متوجه این هستم که هیچ چیز بی‌نقص نیست و بعضی از این اپ‌ها در طول زمان بهتر شدند)حدود اواخر سال۱۳۹۹ بود، دوستم بهم گفت یه ایده ای برای اپلیکیشن های ثبت عادات ماهانه داره و ازم کمک خواست که باهم این ایده رو پیاده کنیم?تصمیم گرفتیم برای بدست آوردن تجربه‌ای هرچه نزدیکتر به واقعیت فرآیند طراحی محصولات دیجیتال، اپی رو طراحی کنیم که خودمون کاربر هر روزش هستیم و تا حدی با صحبت کردن و کمک گرفتن از دوست‌ها و اطرافیانمون که از این اپ‌ها استفاده می‌کنند، مشکلات و نیاز‌های واقعی و اساسی کاربران رو پیدا کنیم. در طی طراحی این اپلیکیشن، از متد طراحی Stanford d.school استفاده کردیم تا بتونیم هم دید درستی از مسیری که باید بریم داشته باشیم و هم انجام یک فرآیند استاندارد طراحی رو تجربه کنیم.اهداف پروژهدر طی طراحی این اپلیکیشن، به ترتیب فرآیندهای زیر رو انجام دادم:بنچمارکدر اولین قدم، به مشاهده و بررسی نقاط قوت و ضعف ۲۵ اپلیکیشن خارجی و ایرانی پرداختم و سعی کردم مهمترین نقاط مثبت و منفی شون رو مشخص و ثبت کنم. در مرحله دوم، از بین این اپلیکیشن‌ها به بررسی ۶ اپلیکیشن معروف و با نصب بالاتر که از قضا کیفیت بالاتری هم داشتند، به‌صورت عمیق‌تر پرداختم.اپلیکیشن هایی که بنچمارک کردماز بین اپلیکیشن‌های اولیه، بعضی ها خیلی گنگ بودند، بعضی در عملکردهای اولیه مشکل داشتن (مثلاً حتی نمیتونستم دکمه شروع و پایان دوره قاعدگی رو پیدا کنم!!) و بعضی‌ها از نظر بصری جذاب نبودند (حالت بصری یه چیز نسبیه و نظر و ذائقه شخصیم بود صرفاً?)در نهایت به ۶ اپ کاربرد پذیر رسیدم که نقاط مثبتی مثل کپی رایتینگ خوب، دکمه شروع و پایان مشخص، اطلاعات کاربردی و کافی به کاربر میدادن که به عنوان نمونه مناسب ثبتشون کردم.پرسشنامهشروع کردم به نوشتن پرسشنامه (میتونید سوالات این پرسشنامه رو اینجا ببینید.) داخل گروه های مختلف فرستادم و آمار زیر بدست اومد:رایج‌ترین مشکل، که باعث میشد بعد از مدتی ازش استفاده نکنند مبهم بودن و پیچیده بودن اپ بود، برای همین ترجیح می‌دادند از روش غیردیجیتال (علامت زدن در تقویم جیبی) استفاده کنند.چالش ها:طراحی سوالات پرسشنامه بدون ایجاد جهت‌گیری و مطرح کردن سوالات به صورتی که داده‌هایی مناسب جمع‌آوری بشه واقعاً جذاب و چالشی بود برام.پیدا کردن افراد مناسب که جزئی از جامعه هدفمون باشند بسیار سخت بودافرادی که پرسشنامه در اختیارشون قرار گرفته بود بسیار افراد کمی بار اولی که براشون لینک رو میفرستادم جواب میدادند و من مجبور میشدم به دفعات بهشون یاداوری کنم?مصاحبهاز بین افرادی که پرسشنامه رو تکمیل کرده بودن سه نفر داوطلب مصاحبه شدن و با سه نفر از دوستام که میدونستم از period tracker استفاده میکنن قرار مصاحبه گذاشتم .در طی مصاحبه در مورد نیازها و مشکلات ازشون سوالاتی پرسیدم ازشون خواستم انتظاراتی که از یک اپلیکیشن راحت و جذاب دارن رو بهم بگن.چالش:یکی از چالش برانگیزترین بخش های پژوهش کاربری مصاحبه بود چرا که کاربر نمیدونست چه مشکلی با اپلیکیشن داره و فقط میدونست که با اپ نمیتونه تعامل درستی برقرار کنه و نمی تونست یک حالت ایده آل رو تصور کنه؛ درنتیجه من با پرسیدن سوالات متعدد تونستم قسمتی از مشکلاتشون رو پیدا کنم و به صورت پازل کنار هم بچینم.دو نفر از افرادی که مصاحبه شدنایده پردازیدر این مرحله تا حد خوبی میدونستم کاربر چی میخواد و وقت اون رسیده بود که از نقاط مثبت و منفی اپ‌‌های بنچمارک شده و نتایجی که از پرسشنامه بدست اومده بود کمک بگیرم. چون خودم هم جزئی از گروه مخاطب این اپ‌ها هستم، یه سری انتظارات همیشگی از این اپ‌ها داشتم که داخل ایده‌پردازی‌ها قرار دادم. در ادامه همه ایده‌ها رو در miro نوشتم.چیزهایی که یاد گرفتم:تونستم از بین مصاحبه‌ها یکسری ایده پیدا کنم که بصورت مستقیم گفته نشده بود.از اینجا میتونید نسخه با کیفیت این تصویر رو ببینید.نمودار وابستگی (affinity diagram)در این مرحله، شروع به مرتب و دسته‌بندی کردن ایده‌های جمع‌آوری شده کردم تا بتونم از بین ایده‌ها، موضوعات و مهمترین نیازها رو پیدا کنم.از اینجا میتونید نسخه با کیفیت این تصویر رو ببینید.فلوچارتدر این مرحله در مورد فلوچارت مقاله‌هایی (مقاله ۱، مقاله ۲) خوندم و بعد فلو چارت رو ترسیم کردم.‌ که البته در مرحله طراحی مطالب زیادی به ذهنم رسید در موردش و برگشتم و ویرایش کردمش و سعی کردم بهتر و کامل‌تر کنم.بخش جالب طراحی فلوچارت برام شباهتش با طراحی دیاگرام در معماری بود؛ دردیاگرام ارتباط فضاهارو باهم نشون میدیم و در فلوچارت هم ارتباط بخش های مختلف باهم مشخص میکنیم.از اینجا میتونید نسخه با کیفیت این تصویر رو ببینید.وایرفریم (wireframe)با استفاده از نتایج بدست آمده از ایده‌پردازی و فلوچارت، شروع به طراحی ساده‌ای از این سرویس کردم. برای شروع روی کاغذ به صورت سریع ایده‌‌هایی که داشتم رو کشیدم.در ادامه که روی کاغذ فکر کردم، شروع به طراحی صفحات اصلی بصورت وایرفریم‌ها پرجزئیات (Hi-Fi wireframe) در فیگما کردم تا بتونم سریع‌تر نمونه‌ای نزدیک به واقعیت رو داشته باشم و بتونم دقیق‌تر روش فکر کنم.مطالبی که یاد گرفتم:سریع و روی کاغذ فکر کنم و سعی کنم نسخه‌هایی متفاوت از هر طرح بزنم تا فرآیندها و ویژگی‌های اصلی هر صفحه مشخص باشه و در مرحله UI درگیر مباحث اولیه طراحی نباشم.چالش:مقاومت در برابر رد کردن این فاز (بخصوص Hi-Fi) از طراحی و مستقیم رفتن به UI رو یاد گرفتم و انصافاً سخت بود ?چند نمونه از وایرفریم های کم جزئیات که دستی کشیدم (Lo-Fi)بخشی از وایرفریم های پرجزئیات که با فیگما کشیدم (Hi-Fi) طراحی بصری (User interface)در این مرحله بر اساس وایرفریم‌ها شروع به طراحی UI کردم. ایده های زیادی برای تک تک صفحه‌ها‌ داشتم ولی برای نسخه اول تنها نیاز به MVP داشتیم. یکی از مواردی که در این مرحله یاد گرفتم اینه که:از اول المان‌ها رو نامگذاری کنم و هر چیزی که نیاز هست رو کامپوننت کنم?چالش:همونطور که از اسم چالش مشخصه، میتونه به همون اندازه‌ای که جالب باشه، به همون اندازه هم اذیت کننده باشه. مثلاً ویژگی auto layout در فیگما، بسیار ویژگی عالی ولی گاهی اذیت کننده بود?خروجی نهایی چندتا از صفحات اپلیکیشن (حالت Dark mode و Light mode)ساخت پروتوتایپ سادهسعی کردم در سریع‌ترین زمان، نمونه ساده‌ای از صفحاتی که برای اپلیکیشن زده بودم رو پروتوتایپ کنم تا بتونم با انجام تست با کاربرها، بازخورد و مشکلات موجود رو در همین چند صفحه پیدا کنم.چالش:ساخت پروتوتایپ خیلی خوب، زمان زیادی میبره (از اونجایی که ساخت پروتوتایپ بخش جذابی برام بود، از کسی پرسیدم و بهم گفت که میشه با نرم‌افزار دیگه‌ای مثل protopie پروتوتایپ‌‌های باحال‌تری ساخت و گاهی هم بهتره که کد اون دیزاین زده بشه که واقعاً منطقیه بنظرم?). https://www.figma.com/proto/Kiw7hvQOO4yv3OEgFcVEpH/Divar-internship?page-id=0%3A1&node-id=363%3A455&viewport=-3254%2C2511%2C0.5184098482131958&scaling=contain&hide-ui=1 اگه پروتوتایپ بالا به درستی کارنمیکنه، از اینجا هم میتونید ببینید.تست با کاربرسخت‌ترین بخش کار! تست کردن بود. اینکه بخوایم با نتیجه کارمون روبرو بشیم و بازخورد بگیریم، هم شوق داشتیم براش و هم کمی استرس و ترس داشتیم که الان چی قراره بگن!سعی کردیم افراد جدیدی رو برای گرفتن تست پیدا کنیم ولی متاسفانه کسی تن به این کار نداد? بنابراین تنها گزینه‌ای که داشتیم یکی از دوستام بود که باهاش مصاحبه هم انجام داده بودم.مثل مصاحبه یکسری سوال رو از قبل آماده کردیم ولی بیشتر که فکر کردیم، به این نتیجه رسیدیم که بذاریم کارش رو انجام بده و ما فقط تماشا کنیم و با حرف زدن هدایتش نکنیم تا بتونیم بازخورد درست‌تری بگیریم.بازخوردهای کاربر:کاربر در لیست محصولات انتظار داشت‌:با تپ کردن روی دکمه‌ی + محصول به سبد خریدش اضافه بشه.در قسمت حالات و علائم کاربر گیج شده بود که این فلش (فلش اسکرول) چیه!علاوه بر حساب گوگل، ورود به اپلیکیشن با شماره موبایل هم قابل انجام باشه.تنها کاربری که تونستم گیرش بیارم برای تست?نتیجه‌گیریاز تستی که با کاربر گرفتیم تعدادی مسئله عملکردی و بصری گرفتیم.در ادامه سعی میکنم بازخوردهایی که از تست با کاربر بدست آوردیم رو به عنوان ورژن ۲? اعمال کنم.بخشی از مقالاتی که در طی این پروژه خوندم: (بدون ترتیب) https://www.nngroup.com/articles/which-ux-research-methods/ https://design.divar.ir/%D8%B1%D8%A7%D9%87-%D8%B1%D9%81%D8%AA%D9%86-%D8%A8%D8%A7-%DA%A9%D9%81%D8%B4-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-ols3gqxiadqs https://vrgl.ir/4AOdy https://vrgl.ir/wD3rE https://vrgl.ir/3mwm0 https://vrgl.ir/Tg5ig https://virgool.io/@negin.yashmi/scamper-jyvdqvcoebnt https://medium.com/@briannacaikens/flowcharts-user-flows-and-task-flows-oh-my-b866e7abf6a0 https://vrgl.ir/F8fFD پگاه عبداله زادهپگاه عبداله زادهTue, 13 Dec 2022 11:13:52 +0330