https://virgool.io/feed/@foadmoghaddasi در جست و جوی پروداکت دیزاینر شدن ... fa 2026-06-16 11:50:06 https://files.virgool.io/upload/users/1138928/avatar/avatar.png?height=120&width=120 https://virgool.io/@foadmoghaddasi https://virgool.io/@foadmoghaddasi/user-flow-%DB%8C%D9%88%D8%B2%D8%B1-%D9%81%D9%84%D9%88-fp2glicjdklz تا به حال شده که وسط خرید کردن از یک سایت مثل دیجی کالا گم بشید و ندونید که کجای فرآیند خرید هستید؟ منو ها را بگردید و صفحات رو جابه جا کنید و در جنگلی مملو از اطلاعات و فرآیند ها گم بشید…این به دليل آن است که از ابتدا طراحی این مدل محصولات نقشه راه کاربر یا طراحی فرآیند هایی که کاربر برای رسیدن به هدفش در محصول ما باید طی کند به درستی انجام نشده است.user flow به مجموعه فرآیند هایی گفته می شود که از صفر تا صد راهی که کاربر باید طی کند تا نیاز خود را به وسیله محصول ما بر طرف کند گفته می شود. این نقشه ها (فلو چارت ها و فرایند و نقشه و …) به ما نشان میدهد که برای رسیدن به هر هدف و رفع هر مدل نیاز که کاربر در محصول ما به دنبال آن میگردد باید چه راه هایی طی شود. و در آن باید تمام شرایطی که ممکن است برای کاربر|ن پیش بیاید پیش بینی شود و برای هر کدام راه حل مناسبی طراحی بشود.نقشه راه ها معمولا شبیه چارت ها یا فلو چارت هایی هستند که ما بعضی وقت ها در فرآیند برنامه نویسی آن ها را میبینیم (مانند شکل زیر)اما برای این کار باید یک سری سوالات از خودمون بپرسیم:۱ـ کاربر سعی دارد به چه چیزی برسد؟۲ـ در میان راه چه چیزی باعث افزایش اعتماد کاربر به راهی که دارد طی می کند می شود ؟۳ـ برای کمک به کاربر چه اطلاعات اضافی نیاز است به کاربر بدهیم تا در میان راه گم نشود؟۴ـ چه موانع و تردید هایی ممکن است برای کاربر پیش بیاید؟ما برای هر یک از این سوالات با توجه به محصول خودمون باید راه حل هایی را پیش بینی و طراحی کرده باشیم. پاسخ به این سوالات در آخر منجر به طراحی موفقیت آمیز user flow میشود.برای مثال فرآیندی که ما برای خرید یک دستگاه موبایل از سایت دیجی کالا انجام میدهیم به شرح زیر است:کاربر وارد صفحه اصلی سایت میشوداز منوی بالای صفحه دسته بندی کالای دیجیتال را انتخاب میکندسپس به دنبال زیر مجموعه موبایل یا تلفن همراه میگرددبعد از پیدا کردن زیر مجموعه ی دلخواه خود بر رویه آن کلیک میکندسپس در میان کالا های موجود به دنبال کالای مورد نظر خود میگرددبعد از پیدا کردن آن بر. روی آن کلیک میکنددر صفحه ی باز شده کاربر به دنبال مشخصات و عکس های کالا میگرددبعد از بررسی مشخصات و قیمت کالا در صورت تمایل بر وریه دکمه افزودن به سبد خرید کلیک میکنددر این مرحله کاربر وارد صفحه سبد خرید خود میشود و. دکمه ادامه فرایند خرید را کلیک میکندزمان و مکان تحویل سفارش خود را تعیین میکندهم اکنون وقت آن است که بر وریه دکمه پرداخنت کلیک کنددر اینجا وارد صفحه پرداخت شده و پرداخت را انجام میدهدپس از مشاهده ی نتیجه ی پرداخت بر رویه دکمه بازگشت به سایت مبدا کلیک می کندتبریک خرید با موفقیت انجام شداما هر یک از این مراحل برای خود چالش هایی دارد که توضیح همه ی آن ها در این مقاله نمی گنجد.یک طراح محصول همچنین باید سعی کند که این فرآیند را برای کاربر ساده و قابل درک و سریع کند.همچنین این نکته را در نظر داشته باشید که برای هر مدل نیازی که کاربر به دنبال آن است تا با استفاده از محصول ما بر طرف کند می توان یک فلو متفاوت طراحی کرد که با در کنار هم قرار گرفتن این یوزر. فلو ها نقشه ای کلی به دست می آید به نام user journey map که در نوشته های بعدی به آن میپردازیم.امیدوارم که از خوندن این مقاله لذت برده باشید فواد مقدسی فواد مقدسی Sat, 28 Aug 2021 18:53:34 +0430 https://virgool.io/@foadmoghaddasi/%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-%DA%86%DB%8C%D8%B3%D8%AA-sbbwauzhf2bg اگر بلافاصله بعد از ایده پردازی، مستقیم بریم سراغ پیاده سازی و طراحی ui, ریسک پروژه رو بالا میبریمچرا ؟ چون فرض کنید ما ایده خودمون رو مستقیم تبدیل به کیت های ui کردیم و همه چیز رو با جزئیات دقیق طراحی و پیاده سازی کردیم، خوب حالا وقت تست رسیده و بوووم!تست با شکست مواجه شد …کلی هزینه و زمان صرف شدن تا تا همه چیز با جزئیات طراحی بشن و حالا این طرح، با شکست مواجه شد!اما اگر قبل از اون، وایرفریمی طراحی میکردیم که ایده و ساختار طرح مارو نشون بده و روی همون وایرفریم یا پروتوتایپ اولیه، تست هارو انجام میدادم میتونستیم ریسک پروژه به کمترین حد ممکن برسونیم.وایرفریم چیست ؟حالا وایرفریم چیه ؟ وای فریم یک اسکلت ساده از محصول ماست که ایده هامون رو نشون میده و میتونه برای هر پلتفرمی، از تلوزیون گرفته تا موبایل و ساعت هوشمند ساخته بشه.وایرفریم ها هیچ گرافیک خاصی مثل رنگ و جزئیات بصری و تایپو و … ندارن و فقط به ساختار و کاربرد محصول میپردازن.وایرفریم ها به صورت کلی طیفی از lo-fi تا hi-fi رو تشکیل میدن و بنا بر نیاز و اندازه پروژه میتونن در این طیف طراحی بشن.وایرفریمی با جزئیات کم تا وایرفریمی با جزئیات زیاد !ابزار کشیدن وایرفریم :برای کشیدن وایرفریم ها بهترین ابزار قلم و کاغذه :))همچنین میتونید از ابزار های دیجیتال مثل sketch یا Adobe xd یا invision یا … استفاده کنید.اما از اونجایی که وایرفریم باید به ساده ترین راه ممکن طراحی بشه و ابزار های خیلی پیچیده ای برای طراحی اون نیاز نیست، من گزینه اول، ینی قلم و کاغذ رو پیشنهاد میکنم.ولی برای جزئیات بالا میتونید از ابزار های تخصصی تر مثل invision یا اسکچ یا xd یا … استفاده کنید.در ادامه میتونید نمونه ای از وایرفریم هارو مشاهده کنید : فواد مقدسی فواد مقدسی Wed, 25 Aug 2021 00:01:55 +0430 https://virgool.io/@foadmoghaddasi/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-%D9%85%D8%AD%D9%88%D8%B1-%DB%8C%D8%A7-user-centered-design-ucd-qyr6iaklwdvo فرض کنید ...یکی از دیجیکالا بهتون زنگ بزنه و بگه آیا از سایت ما راحت خرید میکنید؟شماهم بشینید براش درد و دل کنید که آره اینجاش اگر اینطوری میشد بهتر بود و …، بعد چند روز دیگه دوباره با یه نمونه اولیه برگردن و نظرتونو در موردش بپرسن، بعد از چند وقت هم ببینید که سایت آپدیت شده و تغییراتی که دنبالش بودین اعمال شده و الان راحت تر از سایت میتونید خرید کنید.این دقيقا یه نمونه از اجراء تفکر طراحی و طراحی کاربر محور هست که در ادامه بیشتر در موردش صحبت میکنیمباید از تفکر کاربر محور برای حل مسائل استفاده کنیم، یعنی بیاید از این دید بهش نکاه کنیم که ما برای چه کسی، چه چیزی رو طراحی میکنیم ؟ اگر این مدلی بهش نگاه کنیم، کاربر رو در بالاترین جایگاه میبینیم و از منظر اون طراحی میکنیم!طراحی کاربر محور یک طرز تفکره، تفکر طراحی!دکتر دونالد نورمن، محقق علوم شناختی، اولین کسی بود که اهمیت طراحی کاربر محور رو توضیح داد و گفت تصمیمات طراحی باید بر اساس نیاز ها و خواسته های کاربران باشد. برای طراحی کاربر محور، افرادی که از محصول استفاده میکنن رو پیدا کنید و ببینید چطوری و برای چه چیزی از محصول شما استفاده میکنن، نحوه تعاملشون رو بسنجید و حرف هاشونو بشنوید.مراحل طراحی مبتنی بر کاربراگر بخوام این فرآیند رو به صورت کامل توضیح بدم باید بگم که این فرآیند از ۶ مرحله اصلی تشکیل شده :۱ - مشخص کردن زمینه استفاده و نیاز های کاربر از محصول۲ - مشخص کردن نیاز ها و الزمات بیزینس۳ - طراحی راه حل ها از وایرفریم تا پروتوتایپ۴ - ارزیابی طراحی ها با آزمایش های مختلف۵ - پیاده سازی، توسعه و لانچ محصول نهایی۶ - ارزیابی محصول نهاییاما نکته ای که اینجا حائز اهمیت هست اینه که در خلال فرآیند های بالا، شاید گاهی مجبور باشیم چند مرحله رو بارها و بارها تکرار کنیم تا به محصول ایده آل خودمون برسیم، مثلا امکانش هست که ارزیابی های اولیه ما بار ها با شکست مواجه بشن و ما محبور باشیم این فرآیند انقدر تکرار کنیم تا به محصول نهایی برسیم.هیچ راهی بهتر درک خواسته های کاربران وجود ندارد، باهاشون مصاحبه کنید، چه حضوری چه آنلاین،. چه به صورت یک به یک چه به صورت گروهی. بازخوردی که میشنوید رو یادداشت کنید و بهشون اهمیت بدید و از این فرصت برای پرسیدن سوالات بیشتر استفاده کنید و ایده های خودتون رو پیش ببرید.فواید تحقیق و طراحی کاربر محورفواید تحقیق و طراحی کاربر محور شامل موارد زیر است :درک روشن از کاربران و محیط پیرامون آنهاطراحی مبتنی بر ارزیابیطراحی با توجه به تجربه های عمومی مصرف کنندهمشارکت کاربران در فرآیند طراحیمثالبرای مثال، هر کی از اپلیکشن Duolingo استفاده کرده باشه، سادگی در طراحی و دسترس پذیری فوق العاده اون رو درک می‌کنه.اینکه با تموم کردن هر مرحله به مرحله بعدی میرید و مراحل جدید رو باز میکنید، یک نوع اعتیاد در کاربر به وجود میاره که باعث میشه بار ها و بار ها به اپلیکیشن سر بزنه و از اون استفاده کنه.و در آخر باید بگم که، امکان اینکه در این فرآیند ها شکست بخورید خیلی زیاده، شاید بارها و بارها ایده رو طراحی کنید و در ارزیابی با شکست مواجه بشید یا به نتیجه ای که دلخواهتون بود، نرسید!اما ادامه بدید، طراحی تجربه همین آزمون و خطاهاست و شاید چیز هایی که از این خطا ها و شکست ها یاد میگیرید، به مراتب از موفقیت ها با ارزش تر و شیرین تر باشند.اصلا کار طراحی کاربر محور همینه، قبل از این که مشکلی پیش بیاد، به ما یاد میده که چطور با اون مشکل مواجه بشیم و قبل از اینکه اون مشکل ظاهر بشه ما حلش کردیم!امیدوارم این مطلب به دردتون خورده باشهموفق و پیروز و سربلند باشید فواد مقدسی فواد مقدسی Tue, 24 Aug 2021 14:38:46 +0430 https://virgool.io/@foadmoghaddasi/what-is-style-guide-aaxegxg2eeff داکیومنت style guide یه چیزی مثل کاتالوگ محصول شما میمونه و تمام استاندارد های طراحی برای برند یا محصول شما رو مشخص میکنه. کاتالوگی که تمام جزئیات طراحی شمارو در خودش داره، از نحوه نمایش ارور ها گرفته تا اندازه و فونت هر هدینگ یا پاراگراف یا پالت های رنگی به کار رفته و …اما شما برای داشتن یک style guide لازم نیست حتما خودتون از اول طراحیش کرده باشید، میتونید قبل از شروع فرآیند طراحی، از سایت های مختلف استایل مورد علاقتون رو دانلود کنید و بر اساس اون، محصولتون رو طراحی کنید. اما برای پروژه های بزرگ و حرفه ای تر طراحان محصول بر اساس داکیومنتی که خودشون طراحی کردن، به طراحی محصول میپردازن.داکیومنت style guide در اصل ویژگی ها و هویت برند رو مشخص میکنه و کمک میکنه تا بقیه کسانی که توی بیزینس همراه ما هستن از این ویژگی ها مطلع بشن و در چهارچوب این استایل گاید فعالیت کنن، به عبارتی باعث انسجام بین تیم های مختلف میشه و نتیجش میشه تجربه کاربری بهتر و محبوبیت بیشتر برند.استایل گاید در ادامه کار تبدیل میشه به دفترچه راهنمای هویت بصری برند و ابزاری برای دیزاینر ها و دولوپر ها !اما در یک داکیونت style guide چه چیز هایی وجود داره ؟در یک Style guide، حداقل وجود این عناصر الزامیست :Typography SchemeResponsive LayoutsColor PaletteButtonsاما برای کامل شدن این داکیومنت میتونید عناصر زیر هم بهش اضافه کنید:IconographyTooltips and popoversModalsForm elementsData TablesNavigation menusCharts and data visualizationsTabsOn-off switchesDialogsContent grid listsVertical listsToolbarsDate and time pickersLoading indicatorsCheckboxesAlertsDropdown menusSlidersSteppersPaginationvهمجنین برای بهتر شدن عملکرد این داکیومنت ها برای تیم های طراحی باید یکسری از راهنما های ساختاری هم در اون قرار بگیره :مثل فهرست مطالب، مشخص کردن کانتکس و هدف محصول، دستور العمل فاصله گذاری یا موقعیت متریال های مختلف محصول، قوانین و باید ها و نباید ها در استفاده از هر متریال در موقعیت های مختلف ( مثل رنگ لوگو در پس زمینه های مختلف ) و …اما در اخر این داکیومنت که تهیه شد باید در دسترس تیم دیزاین و دولوپ قرار بگیره، اما اخیرا تعداد خیلی کمی پلتفرم آنلاین ساخته شده آدم ها بیان و اونجا این استایل هارو با بقیه به اشتراک بذارن و از فیدبک های بقیه هم استفاده کنن مثل :www.figma.comwww.phase.comwww.invisionapp.comwww.material‪.ioهمچنین از این پلتفرم ها میتونید برای ایده گرفتن یا طراحی ایده هاتون هم استفاده کنید.امیدوارم از خوندن این مطلب خوشتون اومده باشه :) فواد مقدسی فواد مقدسی Tue, 24 Aug 2021 00:32:48 +0430