ابزارهای بصری سازی در پروسه‌ی طراحی تجربه کاربر (UX)

پروسه‌ی طراحی تجربه کاربر بر اساس متد تفکر طراحی در ۵ مرحله‌ی (درک مسئله، تعریف مسئله، ایده پردازی، اجرای ایده و اعتبارسنجی) انجام میشه. بعد از دونستن اینکه در هر بخش نیاز به چه داده هایی داریم میتونیم از طریق نقشه ی ذهنی این مسئله رو شفاف سازی کنیم.برای اینکه یه نقشه ی ذهنی جامع از مراحل طراحی تجربه براتون شفاف بشه پیشنهاد میکنم مقاله‌ی یک نقشه‌ی ذهنی(Mind Map) برای مراحل طراحی تجربه کاربر رو مطالعه کنین تا ذهنتون از پراکندگی خارج بشه.خب، حالا که متوجه شدیم در هر بخش از پروسه ی طراحی تجربه نیاز به چه خروجی هایی داریم، وقتش رسیده تا مهم ترین ابزارهای بصری سازی در پروسه‌ی طراحی رو با هم مرور کنیم و یاد بگیریم.بخاطر طولانی بودنش عذر میخوام، اما اگر صبوری کنین در نهایت میتونه توی خیلی از مراحل طراحی بهتون کمک کنه تا توی مسیر دیزاین گم نشین.بوم مدل کسب و کارهدف بوم مدل کسب و کار فرم دهی و پایه ریزی یک کسب و کار نوپاست که با یک قالب برای مستند کردن مدل کسب و کار با المان های توصیف کننده ی مربوط به ارزش پیشنهادی شرکت و نحوه‌ی اجرای اون رو توصیف میکنه و نحوه ی کسب درامد و سود کسب کار ما رو مشخص میکنه.بوم مدل کسب کار. تصویر از Wikipediaبوم تفکر طراحیبوم تفکر طراحی، ابزاریه که از طریق اون به مراحل تفکر طراحی با شروع از مردم (به چه کسی نیاز داریم تا بهبود ببخشیمش؟) تا محصول نهای مون (چه تفاوتی قراره ایجاد کنیم؟) میرسیم.بوم تفکر طراحی. عکس از designthinkingcanvasنقشه ی ذهنینقشه ی ذهنی یک نمودار سلسله مراتبی هست که روابط بین بخش های مختلف اطلاعات رو نشون میده. نقشه ی ذهنی یک روش کاملی برای تصویرسازی هرموضوعیه که مراحل و زیربخش های مختلفی داره.مثالی از نقشه ی ذهنی. عکس از NNGroupمطالعه بیشتر: https://virgool.io/ux-unicorn/%DB%8C%DA%A9-%D9%86%D9%82%D8%B4%D9%87%DB%8C-%D8%B0%D9%87%D9%86%DB%8Cmind-map-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%B1%D8%A7%D8%AD%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-dcsmx7lcmuek نقشه های مفهومی (Concept maps)نقشه های مفهومی نسخه ی پیچیده تر از نقشه های ذهنی هستن. نقشه ی مفهومی بر شناسایی روابط بین موضوعات تأکید میکنن. مثالی از نقشه ی مفهومی. عکس از NNGroup نقشه ی همدلی (Empathy map)نقشه ی همدلی یک تجسم مشترک قابل استفاده برای اون چیزی که از کاربران خاص میخوایم. نقشه همدلی به تیمهای محصول کمک می کند تا بینش عمیق تری از اهداف انگیزه های خودشون کسب کنن.بوم نقشه ی همدلی. عکس از Dave Grayامیدها و ترس ها (Hopes and fears)امیدها و ترس ها روشی مؤثر برای سنجش نگرش شرکت کننده ها در رابطه با محصول است. "امیدها" انتظارات تیمهای شما رو در مورد آنچه می توان محقق کرد ، آشکار می کنه. "ترس" شک و تردیدهاشون رو در مورد سرمایه گذاری برای همکاری با یکدیگر نشون می ده.امیدها و ترس ها عکس از IBMارزش پیشنهادی (Value proposition)جمله ای که جنبه های کلیدی محصول مون رو ترسیم میکنه اینه: "چه چیزی؟ برای چه کسی؟ چگونه استفاده خواهد شد؟". ارزش پیشنهادی به تیم کمک میکنه تا در رابطه با اون چیزی که محصول نهایی خواهد بود به اتفاق نظر برسن.ارزش پیشنهادی به طراحان یوایکس کمک میکنه تا تمرکز خودشون رو روی موارد مهم از طریق UXMag حفظ کنن. تجزیه و تحلیل SWOTتجزیه و تحلیل SWOT روشی برای ارزیابی نقاط قوت (S) ، ضعف ها (W) ، فرصت ها (O) و تهدیدات (T) برای یک محصول ، خدمات یا استراتژی است.packtpub عکس از SWOTگزارش تحلیل رقبا (Competitive-analysis report)تجزیه و تحلیل محصولات رقبا با ترسیم ویژگی های موجودش یک روش مقایسه محسوب میشه. این گزارش به شما کمک میکنه تا استاندارهای صنایع موجود رو درک کنین و فرصت های مربوط به نوآوری در یک منطقه ی خاص رو شناسایی کنین.گزارش تجزیه و تحلیل رقبا. عکس از yellowpencilنمودارهای Affinityنمودارهای افینیتی یک روشیه که به تیم محصول کمک میکنه تا از داده های بدست آمده شون از فاز تحقیق به خوبی استفاده کنن. وقتی شما یک نمودار افینیتی رو میسازین، ایده هاتون رو در گروه هایی با مضامین مشترک و روابط بین اون ها سازمان دهی میکنین. نمودارهای افینیتی بخصوص زمانی که با داده های مختلف مثل: فکت ها، تحقیقات قومیتی، ایده های مربوط به جلسات طوفان فکری، نظرات کاربران، نیازهای کاربر، بینش ها و مسائل مربوط به دیزاین، همراه باشن بسیار ارزشمند خواهند بود.قالب نمودار افینیتی توسط conceptdrawپرسونای کاربر (User persona)پرسوناهای کاربر شخصیت های داستانی ای هستن که تیم محصول براساس تحقیقاتشون از کاربران مختلف در رابطه با استفاده ی اون ها از محصول یا خدمت مورد نظر ایجاد میکنن.مثالی از پرسونای کاربر. عکس از xtensioنقشه های شناختی (Cognitive maps)نقشه ی شناختی یک نمایش بصری از مدل ذهنی پروسوناها (یا گروه ها) ر رابطه با یک فرآیند یا مفهوم معین است. نقشه های شناختی، قانون بصری مشخصی برای پیروی ندارن.مثالی از نقشه ی شناختی. عکس از NNGroupنقشه سفر کاربر (User journey map)نقشه ی سفر کاربر تجسم فرآیندیه که کاربر برای دستیابی به هدفی از اون عبور میکنه. در ابتدایی ترین شکل، نقشه ی سفر کاربر با یکسری اقدامات کاربر طی یک بازه ی زمانی شروع میشه. تمامی مراحل موجود در نقشه ی سفر کاربر در رابطه با تعامل با یک محصول واقعی نخواهد بود.قالب نقشه ی سفر کاربر. عکس از NNGroupاستوری برد (Storyboard)استوری برد ابزاریه که به تیم محصول کمک میکنه تا تجربه ی کاربر با یک محصول رو پیش بینی و کشف کنن. استوری برد شبیه به فیلمیه در مورد ارتباط کاربر با محصول شما. این ابزار به شما کمک میکنه تا چگونگی جریان کاربر در محصول تون رو در طول زمان درک کنین.مثالی از استوری برد: عکس از : Chelsea Hostetter, Austin Center for Designسایت مپ (Site Map)نقشه‌ سایت(Sitemap)، ابزاری کاربردی هم برای طراحان و هم غیر طراحانه که به شما کمک می‌کند تا مطالب اصلی و مورد نیاز خودتونو مرتب کنین و صفحات غیر ضروری رو از وبسایت خودتون حذف کنین.آموزش بیشتر: https://virgool.io/ux-unicorn/%D8%A7%D9%88%D9%84-sitemap-%D8%A8%D8%B9%D8%AF-design-%D8%AE%D8%A8-%DA%86%D8%B1%D8%A7-xtbpsun61o7w جریان کاربر (User flow)جریان کاربر یک نمایش تصویری از راه های زیادیه که زمان استفاده از اپ یا وبسایت میتونین ازش استفاده کنین. برای مثال، فلوچارت مربوط به سرویس تجارت الکترونیکی با ورود کاربر به محصول، مثلا ورود به صفحه ی هوم پیج شروع، و با یک اقدام نهایی مثل خرید یک محصول به پایان میرسه.مثالی از جریان کاربر. عکس از careerfoundryآموزش بیشتر: https://virgool.io/@amirtaqiabadi/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunih وایرفریم (Wire Frame)یک ابزار بصری سازی و یک راهنمای تصویریه که برای نشان دادن عناصر کاربردی وب سایت ها ، برنامه ها استفاده میشه. با استفاده از مسیر بین صفحات وایرفریم میتونین معماری اطلاعات سایت رو به طراحی بصری و قابل درک تبدیل کنین.آموزش بیشتر: https://virgool.io/ux-unicorn/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%BE-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-lgqpuvduc5uc وایر فلو (Wire-flows)وایر فلو ترکیبی از وایر فریم و یوزر فلو هست. هر زمان که بخوایم جریان های پیچیده ی یک محصول دیجیتال رو به نمایش بگذاریم، با قرار دادن مجموعه ای از وایر فریم ها و جریانات بین اون ها میتونیم به خروجی ای به نام وایر فلو برسیم. آموزش بیشتر: https://www.nngroup.com/articles/wireflows/# موکاپ (Mockup)موکاپ یک روش بصرص برای نمایش یک محصوله. تفاوت بین وایر فریم و موکاپ در اینه که وایرفریم ها بیشتر به نمایش ساختار محصول میپردازه اما موکاپ در واقع نشون میده که محصول ما چه شکلیه و چجوری بنظر میرسه.نمونه موکاپ اپلیکیشن غذای من در اینجاآموزش بیشتر: https://www.visual-paradigm.com/guide/ux-design/wireframe-vs-storyboard-vs-wireflow-vs-mockup-vs-prototyping/ خلاصه اینکه..سعی کردم تا مراحلی از پروسه ی طراحی تجربه کاربر رو با نشون دادن قالب های مشخص و در نظر گرفتن ترتیب انجامشون بهتون نشون بدم.مسلما این قالب ثابت نیست اما میتونه برای منظم کردن ذهنتون و اینکه چه مواردی رو در دیزاینتون در نظر بگیرید، بهتون کمک کنه.امیدوارم که براتون مفید بوده باشه.منابع و مطالعات بیشتر:https://uxplanet.org/essential-tools-for-user-research-bb2ff24e8963https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3https://www.nngroup.com