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


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

برای اینکه یه نقشه ی ذهنی جامع از مراحل طراحی تجربه براتون شفاف بشه پیشنهاد میکنم مقاله‌ی یک نقشه‌ی ذهنی(Mind Map) برای مراحل طراحی تجربه کاربر رو مطالعه کنین تا ذهنتون از پراکندگی خارج بشه.

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

بخاطر طولانی بودنش عذر میخوام، اما اگر صبوری کنین در نهایت میتونه توی خیلی از مراحل طراحی بهتون کمک کنه تا توی مسیر دیزاین گم نشین.


بوم مدل کسب و کار

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

بوم مدل کسب کار. تصویر از  Wikipedia
بوم مدل کسب کار. تصویر از Wikipedia



بوم تفکر طراحی

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

بوم تفکر طراحی. عکس از designthinkingcanvas
بوم تفکر طراحی. عکس از designthinkingcanvas


نقشه ی ذهنی

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

مثالی از نقشه ی ذهنی. عکس از NNGroup
مثالی از نقشه ی ذهنی. عکس از 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
مثالی از نقشه ی مفهومی. عکس از NNGroup



نقشه ی همدلی (Empathy map)

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

بوم نقشه ی همدلی. عکس از Dave Gray
بوم نقشه ی همدلی. عکس از Dave Gray



امیدها و ترس ها (Hopes and fears)

امیدها و ترس ها روشی مؤثر برای سنجش نگرش شرکت کننده ها در رابطه با محصول است. "امیدها" انتظارات تیمهای شما رو در مورد آنچه می توان محقق کرد ، آشکار می کنه. "ترس" شک و تردیدهاشون رو در مورد سرمایه گذاری برای همکاری با یکدیگر نشون می ده.

امیدها و ترس ها عکس از IBM
امیدها و ترس ها عکس از IBM



ارزش پیشنهادی (Value proposition)

جمله ای که جنبه های کلیدی محصول مون رو ترسیم میکنه اینه: "چه چیزی؟ برای چه کسی؟ چگونه استفاده خواهد شد؟". ارزش پیشنهادی به تیم کمک میکنه تا در رابطه با اون چیزی که محصول نهایی خواهد بود به اتفاق نظر برسن.

ارزش پیشنهادی به طراحان یوایکس کمک میکنه تا تمرکز خودشون رو روی موارد مهم از طریق UXMag حفظ کنن.
ارزش پیشنهادی به طراحان یوایکس کمک میکنه تا تمرکز خودشون رو روی موارد مهم از طریق UXMag حفظ کنن.



تجزیه و تحلیل SWOT

تجزیه و تحلیل SWOT روشی برای ارزیابی نقاط قوت (S) ، ضعف ها (W) ، فرصت ها (O) و تهدیدات (T) برای یک محصول ، خدمات یا استراتژی است.

packtpub عکس از SWOT
packtpub عکس از SWOT


گزارش تحلیل رقبا (Competitive-analysis report)

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

گزارش تجزیه و تحلیل رقبا. عکس از yellowpencil
گزارش تجزیه و تحلیل رقبا. عکس از yellowpencil



نمودارهای Affinity

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

قالب نمودار افینیتی توسط  conceptdraw
قالب نمودار افینیتی توسط conceptdraw



پرسونای کاربر (User persona)

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

مثالی از پرسونای کاربر. عکس از xtensio
مثالی از پرسونای کاربر. عکس از xtensio


نقشه های شناختی (Cognitive maps)

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

مثالی از نقشه ی شناختی. عکس از NNGroup
مثالی از نقشه ی شناختی. عکس از NNGroup



نقشه سفر کاربر (User journey map)

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

قالب نقشه ی سفر کاربر. عکس از NNGroup
قالب نقشه ی سفر کاربر. عکس از NNGroup



استوری برد (Storyboard)

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

مثالی از استوری برد: عکس از : Chelsea Hostetter, Austin Center for Design
مثالی از استوری برد: عکس از : 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
مثالی از جریان کاربر. عکس از 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-bb2ff24e8963

https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3

https://www.nngroup.com