پست‌های انتشارات Bit Platform

انواع ساختار تیم UX

حمید سلیمانی‌فر — Sat, 16 Jul 2022 19:39:11 +0430

در ادامه سری مقالات مربوط به تیم طراحی UX است، پس از بررسی اهداف اصلی تشکیل تیم و تشریح نقش های مختلف در تیم طراحی به بررسی انواع ساختار تیم UX، مزایا و معایب هرکدام از ساختارها می‌پردازیم و در پایان راهنمایی برای انتخاب ساختار مناسب تیم UX را ارائه خواهیم کرد.ساختار تیم UX نقش ها و مسئولیت های هر یک از اعضای تیم را به طور واضح مشخص می‌کند، همچنین مشخص می‌کند هرکدام از اعضا باید به چه کسی گزارش دهند و چگونه با سایر تیم ها تعامل داشته باشند. نحوه سازماندهی تیم UX به عوامل زیادی از جمله نیازهای محصول، منابع، نیازمندی های UX و فرهنگ سازمانی شرکت بستگی دارد.در این بخش سه مدل رایج که در بسیاری از تیم‌های UX مورد استفاده قرار می‌گیرد را به همراه مزایا و معایب هر کدام بررسی می‌کنیم که با توجه به این موارد و شرایط اختصاصی هرتیم میتوان ساختار مناسبی را برای ایجاد بیشترین بازده انتخاب کرد.تیم متمرکز UXتیم متمرکز، یک مدیر UX دارد و سایر اعضای تیم به او گزارش می دهند. متخصصان UX در صورت نیاز روی محصولات و نیازهای مختلف کار می کنند و به عنوان مشاور برای بقیه سازمان وارد عمل می‌شوند.اگر یک شرکت بطور متمرکز و در ابعاد گسترده در زمینه UX فعالیت داشته باشد (به طور مثال آژانس‌های طراحی)، یک نمودار سازمانی دقیق تر، با سطوح مختلف مدیریت UX خواهد داشت و همه متخصصان UX شرکت در یک سلسله مراتب گزارش می دهند.این مدل گاهی اوقات به عنوان "مدل نمایندگی داخلی (internal agency model)" یا "UX به عنوان یک سرویس (UX as a service, UXaaS)" نیز شناخته می شود.تیم به طور معمول چگونه کار می کندهنگامی که تیم محصول یا پروژه به طراحی UX نیاز دارد، مدیر تیم UX با مدیر تیم محصول ارتباط برقرار می‌کند تا به طور کامل نیاز را درک کند. سپس یک یا چند عضو تیم UX را بر اساس همسویی بین نیازهای پروژه، مجموعه مهارت ها و در دسترس بودن اعضای تیم UX برای مدت زمان مشخصی به آن پروژه اختصاص می دهد. هنگامی که پروژه کامل شد، اعضای اختصاص داده شده تیم UX، وظایف خود را انجام داده و به تیم محصول تحویل می‌دهند و منتظر پروژه بعدی می‌ماند.در این مدل هریک از اعضای تیم UX بر اساس حجم کار مورد نیاز در هر پروژه، ممکن است بر روی یک یا چند پروژه کار کنند.مزایای یک تیم متمرکز UXداشتن یک گروه متمرکز از متخصصان UX به این معنی است که یک مدیر بر عملکرد و مشارکت گروه نظارت دارد. مدیر UX می‌تواند نحوه انجام کارها را برای بقیه سازمان توصیف کند، از خروجی‌های تیم UX دفاع کند و منابع و بودجه تیم را به امور مختلف اختصاص دهد.• مهارتهای یک تیم متمرکز UXتیم‌های متمرکز اغلب دارای طیف گسترده‌ای از مهارت های UX از جمله معماری اطلاعات، تحقیقات کاربری و... هستند. بنابراین، تیم‌های متمرکز انعطاف بسیار بالایی داشته و می‌توانند آنچه مورد نیاز تیم محصول است را با دقت بسیار بالایی به آنها ارائه کنند.علاوه بر این، اعضای تیم متمرکز اغلب به یکدیگر کمک می‌کنند تا در حوزه‌های تخصصی مختلف، رشد کنند (Knowledge sharing) و مهارت‌های جمعی تیم را در طول زمان توسعه دهند.• فرصت های گسترده برای اعضای تیم متمرکز UXاعضای تیم UX روی پروژه های مختلف کار می کنند و اطلاعات وسیعی از محصولات و دانش سازمانی را به دست می آورند همچنین تنوع کار اعضای تیم UX باعث می‌شود که در کارشان چالش‌های زیادی تجربه کنند. تیم متمرکز می‌تواند دانش گسترده بدست آمده را به تیم محصول انتقال دهد، در صورت نیاز با اعضای آن مشورت کند و ارتباطات موثری را در تیم محصول بوجود آورد.• مسیرهای شغلی شناخته شدهتیم های متمرکز معمولاً بزرگ هستند و موقعیت‌ها و مسیرهای شغلی مشخصی دارند. حضور در این محیط می‌تواند اهدافی را برای افراد تیم ترسیم کند که برای رسیدن به آنها تلاش کنند. بطور مثال افرادی که ترجیح می‌دهند مشارکت‌کنندگان فردی(individual contributors) باقی بمانند، می‌توانند در این مسیر رشد کرده و ارتقا پیدا کنند و افرادی که مایلند مدیر شوند، می‌توانند آن موقعیت‌ها را هدف بگیرند و برای رسیدن به آنها تلاش کنند.• منابع مشترک در تیم متمرکز UXاعضای یک تیم متمرکز UX، منابع، دانش طراحی و تحقیقات را به اشتراک می گذارند، رشد شخصی را پرورش می دهند و باعث افزایش تخصص کلی تیم می‌شوند. فرآیندها و نقش‌های DesignOps یا ResearchOps می‌توانند در به حداکثر رساندن اشتراک گذاری دانش بین اعضای تیم کمک کنند.چالش های یک تیم متمرکز UX• تیم‌های UX اغلب هزینه‌بر تلقی می‌شوندتیم‌های دیگر اغلب با تیم UX به عنوان یک عنصر هزینه‌بر (مالی و زمانی) برخورد می‌کنند. در نتیجه، تیم UX باید تیم‌ها را متقاعد کند که UX را در پروژه های خود بگنجانند ( که اغلب یک نبرد دشوار است) و هزینه آن را در کنار سایر هزینه‌های پروژه خود بپردازند. در چنین مواردی برخی از سازمان‌ها از هر تیم محصول می‌خواهند که مقدار مشخصی منابع را به کارهای UX اختصاص دهد. چنین رویکردی می‌تواند نیاز تیم متمرکز UX را برای متقاعد کردن تیم‌های محصول برای شرکت در فعالیت‌های طراحی محصول کاهش دهد.• دور از چشم، دور از ذهناز آنجایی که اعضای تیم UX به طور مداوم در تیم های پروژه یا محصول گنجانده نشده اند، ممکن است این تیم‌ها فراموش کنند که UX را به طور فعال در جریان کاری خود درگیر کنند. به همین دلیل ممکن است اعضای تیم UX برای شرکت در گفتگوها، فعالیت‌ها یا جلسات استراتژیک دعوت نشوند.• عدم درک مشترکممکن است تیم محصول و متخصصان UX درک مشترکی از یکدیگر نداشته باشند، همچنین ممکن است تیم‌های محصول درک و اطلاعات کمی نسبت به اهمیت UX داشته باشند.در برخی موارد به دلیل متصور شدن ماهیت مشارکت "درونی و بیرونی" تیم ها در پروژه‌، باعث می‌شود متخصصان UX نتوانند دانش عمیقی نسبت به محصول را به دست آورند و بنابراین، اثربخشی کمتری خواهند داشت.تیم غیرمتمرکز UX در این مدل، گروه متمرکزی از متخصصان UX وجود ندارد که به یک مدیر UX گزارش دهند. در عوض، تک تک اعضای تیم UX در چندین تیم در سازمان حضور دارند و با ویژگی‌ها، محصولات یا ویژگی‌های خاص کسب‌وکار همسو می‌شوند. در یک تیم UX غیرمتمرکز، متخصص UX مستقیماً به مدیر تیم محصول گزارش می دهد.این مدل معمولاً در سازمان‌های سنتی و استارت‌آپ‌ها به کار گرفته میشود و اغلب به عنوان تیم‌های «توزیع‌شده» یا «جاسازی‌شده» توصیف می‌گردد.تیم به طور معمول چگونه کار می کنددر این ساختار، متخصصان UX در تیم های مختلف قرار میگیرند و به طور مداوم با توسعه دهندگان، مدیران محصول و سایر اعضای تیم در طول زمان کار می کنند.مزایای یک تیم غیرمتمرکز UX بسیاری از مزایای یک تیم غیرمتمرکز UX ، معایب ساختار متمرکز را پوشش میدهد:• افزایش اعتماد و فرصت از آنجایی که تک تک افراد تیم UX بخشی از تیم محصول هستند، اعتماد لازم بین متخصصان UX و سایر اعضای تیم محصول بوجود می‌آید. همچنین بدلیل حضور طولانی مدت در تیم محصول متخصصان UX می توانند درک عمیقی نسبت به پروژه و کسب و کار داشته و ارزش حضور آنها براحتی برای سایر اعضا قابل تشخیص خواهد بود.• بالا بودن احتمال تعامل در تیم در یک مدل غیرمتمرکز، اعضای تیم UX در جلسات برنامه ریزی، فعالیت ها و مکالمات مشابه بقیه اعضای تیم شرکت دارند. زمانی که متخصصین UX به طور فیزیکی با اعضای تیم محصول خود تعامل دارند، بیشتر قابل مشاهده خواهند بود و در نتیجه، احتمالاً در فرآیندهای کاری مشارکت بیشتری خواهند داشت.چالش های یک تیم UX غیرمتمرکز• ممکن است کار فراتر از UX باشد اگر یک سازمان (یا یک تیم) بلوغ UX پایینی داشته باشد، ممکن است در هنگام بروز اختلاف نظر، متخصص UX بسختی بتواند نظر خود را در مقابل برخی از توسعه دهندگان و یا سایر اعضا ارائه کرده و در صورت لزوم آن را حفظ کند. در حالی که در تیم متمرکز چند عضو تیم UX براحتی می‌توانند نظرات خود را ارائه کنند و به نتیجه بهینه دست یابند.• زمان کم برای طراحی و تحقیق وقتی تعداد کارکنان UX بیشتر باشد، احتمالاً زمان قابل توجهی را صرف متقاعد کردن و آموزش سایر اعضای تیم در مورد ارزش UX می‌کنند.بطور کلی زمانی که UX به طور کامل در فرآیند توسعه ادغام نشده باشد، تلاش صرف شده برای یکپارچه سازی UX می تواند زمان قابل توجهی از تیم UX را بگیرد و زمان کمی برای تحقیق و طراحی باقی بگذارد!• تلاش های اضافی UXبرعکس مدل متمرکز، برقراری منظم ارتباط و اشتراک‌گذاری منابع برای اعضاس تیم غیرمتمرکز UX دشوار است. این موضوع در غیاب یک سیستم طراحی متمرکز، چارچوب UX یا بانک تحقیقاتی مشترک، ممکن است باعث شود افراد کارها و تحقیقات تکراری انجام دهند و از این طریق باعث هدر رفتن منابع سازمان شوند.تیم ماتریس UXمدل Matrix UX-team ترکیبی از مدل‌های متمرکز و غیرمتمرکز است. در این مدل، متخصصان UX به یک مدیر UX متمرکز و مدیر محصول گزارش می دهند. بنابراین، اعضای تیم UX تحت نظارت یک مدیر UX و یک مدیر تیم محصول فعالیت میکنند.یک مدل ترکیبی می‌تواند مانند مدل غیرمتمرکز، در سازمان‌هایی که از روش‌ Agile یا اسکرام استفاده می‌کنند، به کار گرفته شود. همچنین ممکن است در سازمان های مختلف، با توجه به اهداف سازمان و مزایای هرکدام از ساختار ها، ترکیب های متفاوتی از این دو روش مورد استفاده قرار گیرد.تیم به طور معمول چگونه کار می کنددر یک نمونه معمول از یک مدل ترکیبی، متخصصان UX در بین تیم‌های متعدد قرار میگیرند و به عنوان منابع بلندمدت و اعضای تیم درنظر گرفته شده و در تیم فعالیت می‌کنند. همچنین با توجه ساختار سازمانی، ممکن است این اعضا با یک محصول یا زمینه خاصی از کسب و کار در تعامل باشند.هدایت روزانه توسط سرپرست تیم (به عنوان مثال، مدیر محصول یا اسکرام مستر) ارائه می شود و بر اجرای آن نظارت می شود. با این حال، یک مدیر یا مدیر UX نیز بر عملکرد آنها نظارت دارد (اغلب از منظر توسعه شغلی و رشد شخصی).مزایای تیم Matrix UXتمرکز دو برابر روی UX در یک مدل ماتریسی، نظارت UX هم از سوی یک مدیر UX و هم از مدیر تیم محصول وجود دارد. در نتیجه، دو مدیر مسئولیت موفقیت یک متخصص UX و در نتیجه UX را به طور کلی بر عهده می‌گیرند.• احتمال بالا برای مشارکت واقعی از آنجا که متخصصان UX برای مدت طولانی با یک تیم محصول جداگانه همکاری می کنند، سایر اعضای تیم محصول کارکنان UX را به عنوان بخشی واقعی از تیم خود می بینند و آنها را در گفتگوها، جلسات و فعالیت های مهم درگیر می کنند.• افزایش انعطاف پذیری یک تیم ماتریسی نسبت به یک تیم کاملاً متمرکز یا غیرمتمرکز انعطاف پذیرتر است و بنابراین می تواند به راحتی با فشارهای سازمانی در حال تحول یا نیازهای کوتاه مدت و فوری سازگار شود.چالش های یک تیم UX Matrix• سردرگمی متخصص UX از آنجایی که متخصصان UX به نحوی به دو مدیر گزارش می دهند، ممکن است احساس کنند در دو جهت مختلف کشیده می شوند، مطمئن نیستند که کدام مدیر دارای اختیار نهایی در جهت طراحی است، با چه کسی در مورد مسائل مربوط به پرسنل یا تیم صحبت کند.• عملیاتی کردن دشوار است در سازمان های بزرگ با لایه های زیادی از همسویی، ممکن است عملیاتی کردن مدل های ماتریسی دشوار باشد.در سازمان‌هایی با تیم‌های محصول متعدد، تا زمانی که رهبر تیم UX و رهبر تیم محصول با اهداف UX خود هماهنگ باشند،یک مدل UX ماتریسی می‌تواند بهترین ترکیب متمرکز و غیرمتمرکز را ارائه دهد.شرکت های برتر چگونه تیم های UX خود را ساختار می دهند؟در این بخش ساختار 9 تیم UX شرکت های فناوری را تجزیه، تحلیل و مورد بررسی قرار دادیم که نتایج آن بشرح ذیل میباشدبا چند استثنای قابل توجه، همه تیم‌های UX برتر از یک ساختار تیمی ترکیبی استفاده می‌کنند که در آن طراحان در تیم‌های محصول غیرمتمرکز تعبیه شده‌اند، اما همچنین دارای یک جزء متمرکز قدرتمند هستند که به عنوان یک مرکز برای تیم طراحی بزرگ‌تر عمل می‌کند.این مرکز متمرکز به طور کلی یکی از این دو شکل را دارد:1. اگرچه اعضا عمدتاً با تیم های محصول خود کار می کنند، ولی هر طراح در نمودار سازمانی، در یک تیم طراحی قرار می‌گیرد. این طراحان احتمالاً با هم تعامل دارند و اغلب در طوفان فکری، همکاری، گفتگوهای مختلف و غیره شرکت می کنند و معمولاً به یک معاون طراحی یا مدیر ارشد طراحی گزارش می دهند.2. اکثر طراحان به طور رسمی زیر نظر معاون یا مدیر تولید خود در نمودار سازمانی قرار میگیرند. با این حال، معمولاً چند تیم متمرکز طراحی مانند تیم‌های Design System یا DesignOps وجود دارند که در سراسر سازمان به اشتراک گذاشته می‌شوند. این تیم‌ها به‌عنوان «هاب» عمل می‌کنند، و بین خطوط محصول هماهنگ می‌شوند تا از تجربه کاربری منسجم در محصول اطمینان حاصل کنند.اگر منابع لازم را برای آن دارید، یک رویکرد ترکیبی که طراحان را در تیم‌های محصول جاسازی می‌کند، اما همچنان در یک ساختار مبتنی بر طراحی و تجربه کاربری منسجم است، می تواند بهترین انتخاب باشد.پیدا کردن ساختار برای سازمان شماپس از مطالعه ساختارهای متداول تیم UX، ممکن است در تصمیم گیری برای مدل مناسب برای سازمان خود دچار تردید شوید. اما حقیقت این است که یک مدل ممکن است برای یک سازمان عالی عمل کند و برای دیگری رویکرد اشتباهی باشد. اما انتخاب بهترین رویکرد برای شما به اندازه تیم، اولویت‌های شما و میزان اهمیتی که برای تجربه کاربری قائل هستید بستگی دارد.هنگام تصمیم گیری در مورد مدل تیم UX ایده آل، به ملاحظات زیر توجه کنید:حجم کارهمانطور که گفته شد هنگامی که میخواهید ساختار تیم خود را انتخاب کنید حجم کاری، یکی از عوامل تعیین کننده است. آیا تقاضای کافی برای تخصص UX برای توجیه منابعی که برای ساختن این تیم استفاده می کنید وجود دارد؟ آیا حتی کار کافی برای آنها وجود خواهد داشت؟فرآیند جاریهمچنین باید فرآیند موجود خود را بررسی کنید تا مشخص شود که آیا واقعاً نیاز به تخصص UX وجود دارد یا خیر. آیا تیم فعلی شما از فعالیت های UX در فرآیند خود استفاده می کند؟ اگر تیم شما به هیچ وجه یا خیلی کم روی UX تمرکز می کند، برقراری ارتباط با یک تیم غیر متمرکز برای یک متخصص UX بسیار چالش برانگیز خواهد بودفرصت های همکاریبا توجه به مدل غیرمتمرکز، ممکن است مشکلاتی در همکاری و اشتراک منابع برای تیم UX وجود داشته باشد. اگر اعضای تیم در چندین حوزه کسب و کار توزیع شده اند، بهتر است راهی برای همکاری و به اشتراک گذاری منابع خود پیدا کنید. اگر یافتن راه حلی برای شما دشوار است، ممکن است رویکرد غیرمتمرکز برای شما کارساز نباشد.منابع:https://www.nngroup.com/articles/ux-team-models/https://designmap.com/ideas/ux-team#Hiring_UX_Designers

معرفی Bit Platform

Kaveh Kardel — Tue, 12 Jul 2022 11:23:09 +0430

پلتفرم Bit یک پروژه تماما Open Source در GitHub میباشد که هدف آن تسهیل توسعه نرم افزار با کیفیت و پرفرمنس بالا بر بستر ASP.NET Core و زبان #C است که با آن بتوان فقط با یکبار کدنویسی و با کمک استانداردهای وب همچون HTML / CSS و Web Assembly ، خروجی‌هایی چون Android / iOS / Windows را با دسترسی کامل به امکانات سیستم‌عامل به همراه برنامه‌های تحت وب SPA و PWA (با یا بدون Pre-Rendering) گرفت.پلتفرم Bit‌ تا به اینجا از دو قسمت Bit Blazor Components (شامل بیش از ۳۰ کمپوننت کاربردی، کم حجم و High Performance مانند Tree / Multi Select / Data Grid / Date Picker / Color Picker و...) به همراه Bit Project Templates (قالب پروژه‌های حاوی امکانات پر استفاده) تشکیل شده است.برخی مواردی که در رابطه با آنها صحبت شد، ممکن است برای شما آشنا نباشند، بنابراین قبل از بررسی مفصل‌ تر Bit Platform، نگاهی به آن می اندازیم:وب اسمبلی چیست؟برای درک بهتر وب اسمبلی ابتدا باید بدانیم این تکنولوژی اصلا از کجا آمده و هدف آن چیست؟میدانیم که مرورگر ها پروایدر صفحات وب هستند و ما برای اینکه بتوانیم اپلیکیشنی که ساختیم را در محیط وب برای کاربران به اشتراک بگذاریم باید از این مرورگر ها و زبان ارتباطی آن ها پیروی کنیم. این زبان های ارتباطی مشخصا سه چیز است: HTML CSS JavaScript اما آیا راهی هست که بتوان بجای JavaScript از زبان های دیگر هم در سمت مرورگر استفاده کرد؟ وب اسمبلی یا همان WASM، آمده تا به ما اجازه دهد از هر زبانی که خروجی به Web Assembly دارد، برای تعاملات UI استفاده کنیم. یعنی با زبان هایی مثل #C / C++ / C و... میتوان کدی نوشت که مرورگر آن را اجرا کند. این یک تحول بزرگ است که امروزه تمامی مرورگرها (به جز مرورگرهایی که از دور خارج شده اند) از آن پشتیانی می‌کنند چرا که Web Assembly به یکی از اجزای استاندارد وب تبدیل شده است.اطلاعات بیشتر در رابطه با وب اسمبلی را میتوانید از این مقاله بخوانید.تعریف SPA و PWA:SPA: Single Page ApplicationPWA: Progressive Web Applicationدر گذشته برای رندر کردن صفحات وب با عوض شدن URL یا درخواست کاربر برای دریافت اطلاعات جدید از سرور و نمایش آن، صفحه مرورگر ملزم به رفرش شدن مجدد و از سر گیری کل فرایند تولید HTML میشد. طبیعتا این تکرار برای کاربر هنگام استفاده از اپلیکیشن خیلی خوشایند نبود چرا که هربار میبایست زمانی بیشتر صرف تولید مجدد صفحات را منتظر میماند. اما در مقابل آن Single Page Application (SPA) ها این پروسه را تغیر داد.در رویکرد SPA ، کل CSS , HTML و JS ای که برای اجرای هر صفحه ای از اپلیکیشن نیاز هست در همان لود اولیه برنامه توسط مرورگر دانلود خواهد شد. با این روش هنگام تغیر URL صفحات مرورگر دیگر نیازی به لود دوباره اسکریپ ها ندارد. همچنین وقتی قرار است اطلاعات جدیدی از سرور آپدیت و نمایش داده شود این درخواست بصورت یک دستور Ajax به سرور ارسال شده و سرور با فرمت JSON اطلاعات درخواست شده را پاسخ میدهد. در نهایت مرورگر نیز اطلاعات برگشتی از سرور را مجدد جای گذاری میکند و کل این روند بدون هیچگونه رفرش دوباره صفحه انجام میشود.در نتیجه این امر، کاربر تجربه خوشایند تری هنگام کار کردن با SPA ها خواهد داشت. اما همانقدر که این تجربه در طول زمان استفاده از برنامه بهبود یافت، لود اولیه اپلیکیشن را کند تر کرد چرا که اپلیکیشن میبایست همه کدهای مورد نیاز خود برای صفحاتش را در همان ابتدا دانلود کند.(در ادامه با قابلیت Pre-Rendering این اشکال را تا حدود زیادی رفع میکنیم)با استفاده از PWA میتوانید وبسایت های SPA را بصورت یک برنامه نصبی و تمام صفحه با آیکون مجزایی همانند اپلیکیشن های دیگر در موبایل و دسکتاپ داشته باشید. همچنین وقتی از PWA استفاده میکنیم برنامه وب میتواند به صورت آفلاین نیز کار کند. البته حتی در برنامه‌هایی که لازم نیست آفلاین کار کنند، در صورت قطعی ارتباط کاربر با شبکه به جای دیدن دایناسور معروف، اینکه برنامه در هر حالتی باز شود و به صورتی کاربر پسند و قطعی نت به وی اعلام شود ایده خیلی بهتری است (":قابلیت Pre-Rendering:هدف Pre-Rendering بهبود گشت گذار کاربر در سایت است. شیوه کارکرد آن به این صورت است که وقتی کاربر وارد وبسایت میشود، سرور در همان ابتدای کار و جلوتر از اتمام دانلود اسمبلی ها، فایلی حاوی HTML ، CSS های صفحه ای که کاربر درخواست کرده را در سمت سرور می‌سازد و به مرورگر ارسال میکند. در همین حین، اسمبلی ها نیز توسط مرورگر دانلود می‌شوند و برنامه از محتوای صرف خارج شده و حالت تعاملی می‌گیرد. اصطلاحا به این قابلیت Server-Side Rendering (SSR) نیز میگویند. در این حالت کاربر زودتر محتوایی از برنامه را میبیند و تجربه بهتری خواهد داشت. این امر در بررسی Search Engine ها و سئو وبسایت نیز تاثیر بسزایی دارد.نگاهی به Blazor:تا اینجا هر آنچه که نیاز بود برای درک بهتر از Blazor بدانیم را فهمیدیم، اما خود Blazor چیست؟ در یک توضیح کوتاه، فریمورکی ارائه شده توسط مایکروسافت میباشد برای پیاده‌سازی UI و منطق برنامه‌ها شامل امکانات Routing، Binding و...بلیزر در انواع مختلفی ارائه شده که هرکدام کاربرد مشخصی دارد:Blazor Serverدر بلیزر سرور پردازش ها جهت تعامل UI درون سرور اجرا خواهد شد. برای مثال وقتی کاربر روی دکمه ای کلیک میکند و آن دکمه مقداری عددی را افزایش می‌دهد که از قضا متن یک Label به آن عدد وابسته است، رویداد کلیک شدن این دکمه توسط SignalR WebSocket به سرور ارسال شده و سرور تغیر متن Label را روی همان وب سوکت به کلاینت ارسال می‌کند.با توجه به این که تعامل کاربر با صفحات برنامه، بسته به میزان کندی اینترنت کاربر، ممکن است کند شود و همچنین Blazor Server قابلیت PWA شدن ندارد و علاوه بر این بار پردازش زیادی روی سرور می‌اندازد (بسته به پیچیدگی پروژه) و در نهایت ممکن است در آن از Component هایی استفاده کنیم که چون در حالت Blazor Server پردازش سمت سرور بوده، متوجه حجم دانلود بالای آنها نشویم و کمی بعدتر که با Blazor Hybrid می‌خواهیم خروجی Android / iOS بگیریم متوجه حجم بالای آنها شویم، استفاده از Blazor Server را در Production توصیه نمی‌کنیم، ولی این حالت برای Debugging بهترین تجربه را ارائه می‌دهد، بالاخص با امکان Hot Reload و دیدن آنی تغییرات C# / HTML / CSS در ظاهر و رفتار برنامه موقع کدنویسی. Blazor WebAssemblyدر بلیزر وب اسمبلی منطق مثال قبلی که با C# .NET نوشته شده است، روی مرورگر و با کمک Web Assembly اجرا می‌شود و نیازی به ارتباط جاری با سرور توسط SignalR نیست. این باعث میشود که با بلیزر وب اسمبلی بتوان اپلیکیشن های PWA نیز نوشت.یک برنامه Blazor Web Assembly می‌تواند چیزی در حدود دو الی سه مگ حجم داشته باشد که در دنیای امروزه حجم بالایی به حساب نمیاید، با این حال با کمک Pre Rendering و CDN می‌توان تجربه کاربر را تا حدود زیادی بهبود داد.برای مثال سایت Component های Bit Platform جزو معدود دموهای Component های Blazor است که در حالت Blazor Web Assembly ارائه می‌شود و شما می‌توانید با باز کردن آن، تجربه حدودی کاربرانتان را در حین استفاده از Blazor Web Assembly ببینید. به علاوه، در dotnet 7 سرعت عملکرد Blazor Web Assembly بهبود قابل توجهی پیدا کرده است.Blazor Hybridاز Blazor Hybrid زمانی استفاده می‌کنیم که بخواهیم برنامه‌های موبایل را برای Android , iOS و برنامه‌های Desktop را برای ویندوز، با کمک HTML , CSS توسعه دهیم. نکته اصلی در Blazor Hybrid این است که اگر چه از Web View برای نمایش HTML / CSS استفاده شده، اما منطق سمت کلاینت برنامه که با C# .NET توسعه داده شده است، بیرون Web View و به صورت Native اجرا می‌شود که ضمن داشتن Performance بالا، به تمامی امکانات سیستم عامل دسترسی دارد. علاوه بر دسترسی به کل امکانات Android / iOS Sdk در همان C# .NET ، عمده کتابخانه‌های مطرح مانند Firebase، با ابزار Binding Library ارائه شده توسط مایکروسافت، دارای Wrapper قابل استفاده در C# .NET هستند و ساختن Wrapper برای هر کتابخانه Objective-C ، Kotlin، Java، Swift با این ابزار فراهم است.اگر شما در حال حاضر فقط #HTML , CSS , C بدانید، اکنون با بلیزر میتوانید هر اپلیکیشنی که بخواهید توسعه دهید. از وبسایت های SPA گرفته تا اپ های موبایل Android ، IOS و برنامه های دسکتاپی برای Windows , Mac و بزودی نیز برای Linuxسری آموزش بلیزر را میتوانید از این لینک ها (1 ، 2) دنبال کنید.معرفی پکیج Bit Blazor UI: پکیج Bit Blazor UI مجموعه ای از کامپوننت های مرسومی است که بر پایه بلیزر نوشته شده و به ما این امکان را میدهد تا المان های پیچیده ای مثل Date Picker , Grid , Color Picker , File Upload , DropDown و بسیاری از المان های دیگر را با شکلی بهینه، بدون نیاز به اینکه خودمان بخواهیم برای هر یک از اینها از نو کدنویسی کنیم، آن را در اختیار داشته باشیم.عمده مشکل کامپوننت های ارائه شده برای بلیزر حجم نسبتا بالای آن است که باعث میشد بیشتر در مصارفی از قبیل ایجاد Admin Panel کارایی داشته باشد. اما این موضوع به خوبی در Bit Blazor UI مدیریت شده و در حال حاضر با بیش از 30 کامپوننت با حجم بسیار پایینی، چیزی حدود 200 کیلوبایت قابل نصب است. از لحاظ حجمی نسبت به رقبای خود برتری منحصر به فردی دارد که باعث میشود به راحتی حتی در اپلیکیشن های موبایل هم قابل استفاده باشد و کماکان پرفرمنس خوبی ارائه دهد.این کامپوننت ها با ظاهر Fluent پیاده سازی شده و میتوانید لیست کامپوننت های بلیزر Bit را از این لینک ببینید.معرفی Bit TodoTemplate: قبل از اینکه به معرفی Bit TodoTemplate بپردازیم باید بدانیم که اصلا پروژه های Template چه هستند. در واقع وقتی شما Visual Studio را باز میکنید و روی گزینه Create New Project کلیک میکنید با لیستی از پروژه های تمپلیت روبرو میشوید که هرکدام چهارچوب خاصی را با اهدافی متفاوت در اختیارتان قرار میدهند.Bit Platform هم Project Template ای با نام TodoTemplate توسعه داده که میتوانید پروژه های خودتان را از روی آن بسازید، اما چه امکاناتی به ما میدهد؟در یک جمله، هر آنچه تا به اینجا توضیح داده شد بصورت یکجا در TodoTemplate وجود دارد.در واقع TodoTemplate چهارچوبی را فراهم کرده تا شما تنها با دانستن همین مفاهیمی که در این مقاله خواندید، از همان ابتدا امکاناتی چون صفحات SignUp، SignIn یا Email Confirmation و... را داشته باشید و در نهایت بتوانید تمامی خروجی های قابل تصور را بگیرید.اما چگونه؟در TodoTemplate همه این قابلیت ها تنها درون یک فایل و با کمترین تغیر ممکن نوع خروجی کدی که نوشته اید را مشخص میکند. این تنظیمات به شکل زیر است: ... ... شما میتوانید با تنظیم بین انواع hosting model های بلیزر سوییچ کنید. مثلا برای زمانی که در محیط development هستید نوع بلیزر را Blazor Server قرار دهید تا از قابلیت های debugging بهتری برخوردار باشید، وقتی میخواهید وبسایت تکمیل شده تان را بصورت SPA / PWA پابلیش کنید نوع بلیزر را به Blazor WebAssembly و برای پابلیش های Android ، IOS ، Windows ، Mac نوع بلیزر را به Blazor Hybrid تغیر دهید.به علاوه، شما تنها با تغیر قادر خواهید بود بین SPA (پیش فرض)، SSR و PWA سوئیچ کنید.قابلیت های Todo-Template در اینجا به پایان نمیرسد و بخشی دیگر از این قابلیت ها به شرح زیر است:وجود سیستم Exception handling در سرور و کلاینت (این موضوع به گونه ای بر اساس Best Practice ها پیاده سازی شده که اپلیکیشن را از بروز هر خطایی که بخواهد موجب Crash کردن برنامه شود ایزوله کرده)وجود سیستم User Authentication بر اساس JWT که شما در همان ابتدا که از این تمپلیت پروژه جدیدی میسازید صفحات SignIn ، SignUp را خواهید داشت. پکیج Bit Blazor UI که بالاتر درمورد آن صحبت کرده ایم از همان ابتدا در TodoTemplate نصب و تنظیم شده تا بتوانید به راحتی صفحات جدید با استفاده از آن بسازید.کانفیگ استاندارد Swagger در سمت سرور.ارسال ایمیل در روند SignUp.وجود خاصیت AutoInject برای ساده‌سازی تزریق وابستگی ها.و بسیاری موراد دیگر که در داکیومنت های پروژه میتوانید آنهارا ببینید.با استفاده از TodoTemplate پروژه ای با نام Todo ساخته شده که میتوانید چندین مدل از خروجی های این پروژه را در لینکهای پایین ببینید و پرفرمنس آن را بررسی کنید.- Todo app with pre rendering- Todo app PWA- Todo Android app in App Centerتوجه داشته باشید هدف TodoTemplate ارائه ساختار Clean Architecture نبوده، بلکه هدف ارائه بیشترین امکانات با ساده‌ترین حالت کدنویسی ممکن بوده که قابل استفاده برای همگان باشد و شما میتوانید از هر پترنی که میخواهید براحتی در آن استفاده کنید.پلتفرم Bit یک تیم توسعه کاملا فعال تشکیل داده که بطور مداوم در حال بررسی و آنالیز خطاهای احتمالی ، ایشو های ثبت شده و افزودن قابلیت های جدید میباشد که شما به محض استفاده از این محصولات میتوانید در صورت بروز هر اشکال فنی برای آن ایشو ثبت کنید تا تیم مربوطه آن را بررسی و در دستور کار قرار دهد. در ادامه پلتفرم Bit قصد دارد بزودی تمپلیت جدیدی با نام Admin Panel Template با امکاناتی مناسب برای Admin Panel مثل Dashboard و Chart و... با تمرکز بر Clean Architecture نیز ارائه کند. چیزی که مشخص است اوپن سورس بودن تقریبا %100 کارها میباشد از جلسات و گزارشات کاری گرفته تا جزئیات کارهایی که انجام میشود و مسیری که در آینده این پروژه طی خواهد کرد .میتوانید اطلاعات بیشتر و مرحله به مرحله برای شروع استفاده از این ابزار ها را در منابعی که معرفی میشود دنبال کنید.منابع :سایت Bit Platformشروع کار با Bit Blazor UIشروع کار با TodoTemplateمشارکت در پروژه :شما میتوانید این پروژه را در گیتهاب مشاهده کنید.برای اشکالات یا قابلیت هایی که میخواهید برطرف شود Issue ثبت کنید.پروژه را Fork کنید و Star دهید.ایشوهایی که وجود دارد را برطرف کنید و Pull Request ارسال کنید. برای در جریان بودن از روند توسعه در جلسات برنامه ریزی (Planning Meeting) و گزارشات هفتگی (Standup Meeting) که همه اینها در Microsoft Teams برگزار میشود شرکت کنید.

تیم طراحی UX و اهداف آن

حمید سلیمانی‌فر — Wed, 06 Jul 2022 16:41:33 +0430

در این مقاله که اولین بخش از سری مقالات مربوط به تیم طراحی UX است، اهداف اصلی تشکیل تیم را بررسی میکنیم و در ادامه این سری مقالات به تشریح نقش های مختلف در تیم طراحی و انواع ساختار تیم UX خواهیم پرداخت.تیم UX، گروهی از متخصصان هستند که میخواهند تجربه کاربری را لذتبخش و دلپذیر کنند و مسیری برای کاربران طراحی کنند تا در استفاده از محصولات دیجیتال، به آسان ترین شکل ممکن به اهداف خود دست یابند.اعضای تیم UX معمولاً دارای تخصص های مختلفی هستند که هدف از بکارگیری آنها در تیم، طراحی محصول دیجیتالی (وب سایت، وب یا اپلیکیشن موبایل و غیره) است که کاربردی(Practical)، مطلوب(Desirable)، قابل یافتن(Findable) و قابل استفاده(usable) هستند.همچنین داشتن مهارتهای ارتباطی در تیم طراحی اهمیت ویژه ای دارد و اعضای تیم باید آمادگی دریافت بازخوردهای سازنده را داشته باشند تا با بکارگیری آنها به پیشرفت کسب و کار کمک کننداهداف کلیدی طراحی UX چیست؟در این قسمت به تشریح 6 هدف اصلی تیم که باید در فرآیند طراحی به آنها توجه ویژه داشته باشیم میپردازیم:1. جلب رضایت کاربران نهایی - ایجاد تجربه کاربری آسان، شهودی و دلپذیر.به طورکلی اگر بتوانیم رضایت کاربران را جلب کنیم از محصول ما استفاده بیشتری میکنند و در غیر این صورت به دنبال محصولاتی که خدمات بهتر یا استفاده آسانتری را ارائه میکنند و رضایت آنها را جلب میکنند، خواهند بود2. استفاده از زبان واضح و سادهمتن های استفاده شده در طراحی باید مستقیم، مرتبط و قابل فهم باشند. باید از جملات کوتاه استفاده کنیم و از بکار بردن جملاتی که ممکن است برداشت دوگانه ایجاد کند بپرهیزیم.3. ارائه بازخورد مناسبارائه بازخورد مناسب برای تأیید عملیات موفقیت آمیز یا ارائه اطلاعات در صورت بروز خطا از اهمیت بسیار بالایی برخوردار است. باید مطمئن شویم قبل از اینکه کاربر بی‌تاب(Impatient) شود بازخورد مناسب نسبت به اتفاقات جاری را به کاربر داده ایم.از جمله این بازخورد ها میتوان به نوار پیشرفت، تایمر یا انیمیشن ها اشاره کرد4. محصول خود را لذت بخش کنیدبرای اینکه رضایت کاربر در مقصد را جلب کنیم، باید مسیر را برای آنها جذاب نماییماز جمله این موارد میتوانیم به استفاده از جلوه های صوتی و بصری مناسب اشاره کنیم که جذابیت های محصول را افزایش میدهند5. در سراسر پلتفرم UX خود را یک‌دست نگه داریدیک‌دستی در طراحی باعث میشود تا محصول حس قابل پیش بینی بودن ایجاد کند. کاربران دوست دارند بدانند با انجام دادن هرکاری چه نتیجه ای دریافت خواهند کرد6. و در نهایت، همه چیز را با کاربران واقعی تست کنید!

نقش های مختلف در تیم طراحی UX

حمید سلیمانی‌فر — Wed, 06 Jul 2022 16:41:30 +0430

در ادامه سری مقالات مربوط به تیم طراحی UX بعد از شناخت اهداف تیم طراحی به بررسی نقش های مختلف در تیم میپردازیم و در مرحله بعد به بررسی انواع ساختار تیم UX خواهیم پرداختطراحی UX شامل بخشهای مختلفی میباشد، از طراحی UI گرفته تا تحقیقات کاربری، معماری اطلاعات و موارد دیگر. بنابراین بهترین راه برای شروع ساختن یک تیم UX این است که بدانیم این بخشها چه وظایفی دارند و چگونه باهم تعامل میکنندتیم شما باید متشکل از افرادی با مهارت‌ها و دانش‌های متنوع باشد که از دیدگاه‌های مختلف طراحی تجربه کاربر را مورد بررسی قرار دهند.با توجه به این موضوع، در ادامه برخی از نقش های کلیدی UX و مسئولیت های آنها تشریح میکنیممحقق کاربری (UX Researcher)محققان تجربه کاربری به طور سیستماتیک با کاربران هدف درگیر می شوند تا رفتارها، نیازها، نقاط دردناک و انگیزه های آنها را درک کنند. آنها مسئول برنامه‌ریزی و اجرای جلسات تحقیق UX، تجزیه و تحلیل داده‌های جمع آوری شده و ارائه یافته‌ها به ذینفعان و طراحان هستند.به طور کلی وظایف و مسئولیت‌های یک محقق UX عبارتند از:• همکاری با طراحان و ذینفعان برای درک نیازهای پژوهشی• انتخاب روش تحقیق مناسب• شناسایی و نوشتن سوالات تحقیق• انتخاب شرکت کنندگان آزمون‌ها• تهیه جدول زمانی برای پروژه تحقیقاتی• انجام تحقیق، تجزیه و تحلیل داده‌ها و ارائه نتایج تحقیقمحققان UX از طریق تحقیقات کمی و کیفی، اطلاعات عمیقی را در مورد کاربر نهایی جمع آوری می کنند. این اطلاعات باعث میشود به جای طراحی بر اساس فرضیات،بر اساس بازخوردهای واقعی طراحی کنیم و محصولی کاربرپسند را تولید نماییمطراح تجربه کاربری (UX Designer)طراحان تجربه کاربری (UX) مسئول طراحی محصولات و خدمات قابل استفاده، لذت بخش و قابل دسترس برای کاربر نهایی هستند. طراحان UX در تمام مراحل فرآیند طراحی UX شرکت می‌کننداز جمله وظایف یک طراح UX، میتوانیم به این موارد اشاره کنیم:• مشارکت در تحقیقات UX برای درک نیازهای کاربران و ایجاد ایده برای حل مشکلات آنها• ایجاد نقشه های سفر کاربر و ابداع بهترین جریان کاربری برای کمک به کاربران در تکمیل وظایف خود• طراحی وایرفریم و نمونه اولیه• انجام آزمایش های کاربری برای بهبود طراحی انجام شدههدف یک طراح UX درک نحوه تعامل کاربر با یک محصول و اطمینان از داشتن بهترین تجربه ممکن است. طراحUX به قوانین و اصول UX تسلط دارد و از نزدیک با تیم های محصول، توسعه دهندگان و در ارتباط است تا مطمئت شود محصول با توجه به نیازهای کاربر و کسب و کار طراحی شده استطراح رابط کاربری (UI Designer)طراحان رابط کاربری (UI) بر ظاهر و احساس یک محصول تمرکز می کنند. آنها تمام صفحه‌هایی که ممکن است کاربر با آنها تعامل داشته باشد را طراحی می‌کنند، و عناصر بصری که این تعامل را ممکن میسازد را ایجاد مینمایند. آیکون‌ها، دکمه‌ها، نوارهای منو، تایپوگرافی، رنگ‌ها و موارد دیگر از جمله این عناصر هستند.نقش طراح رابط کاربری را می توان به عنوان یک طراح بصری نیز شناخت.عمده وظایف و مسئولیت های کلیدی یک طراح UI عبارت است از:• طراحی صفحاتی که کاربر با آنها تعامل خواهد داشت• در نظر گرفتن نحوه نمایش طرح در اندازه های مختلف صفحه (Responsive)• طراحی تعامل هر عنصر رابط کاربری• نمونه سازی و آزمایش• ایجاد انیمیشن• ایجاد و حفظ Style guideاگر بخواهیم نقش طراحی UI و UX را در طراحی محصول مقایسه کنیم، طراحی UI به عناصر زیبایی شناختی که برای تعامل با یک محصول استفاده می شود اشاره دارد در حالی که طراحی UX به تجربه کاربر در هنگام استفاده از آن محصول می‌پردازد. برای ایجاد محصولات کاربر محور که مشکلات واقعی را حل می کنند و استفاده از آنها لذت بخش است، به هر دو جنبه نیاز داریممعمار اطلاعات (Information Architecture)معماران اطلاعات با روشهای مختلف اطلاعات را سازماندهی، ساختاربندی و برچسب گذاری می کنند تا کاربران بتوانند آنها را براحتی و بدون اتلاف وقت در یک محصول، برنامه یا وب سایت پیدا کرده و از آنها استفاده کنند.برای انجام این کار، معماران اطلاعات باید مدل‌های ذهنی و انتظارات کاربران، محتوایی که ارائه می‌شود و اهداف تجاری و محدودیت‌های بودجه را درک کنند.در این قسمت مروری بر مسئولیت های اصلی یک معمار خواهیم داشت:• همکاری نزدیک با ذینفعان برای شناسایی الزامات محصول• اجرای نظرسنجی‌های کاربر، مصاحبه‌های کاربر، تست‌های قابل استفاده برای ارزیابی مدل‌های ذهنی کاربران• گروه بندی و برچسب گذاری محتوا• ایجاد نقشه سایت و طراحی سیستم های ناوبری• ایجاد وایرفریم برای نشان دادن سلسله مراتب اطلاعاتمعماران اطلاعات علاوه بر ناوبری کلی سایت یا محصول بر ساختار صفحات و صفحه‌های جداگانه تمرکز می کنند. آنها از نزدیک با طراحان، محققان، مدیران محصول و توسعه دهندگان در ارتباط هستند تا از منطقی و شهودی بودن سفر کاربر اطمینان حاصل کنند.نویسنده رابط کاربری (Ux writer)نویسندگان UX مسئول تمام متن هایی هستند که کاربران هنگام استفاده از محصول با آن مواجه می شوند - از دکمه های CTA و صفحه خوش آمدگویی گرفته تا پیام‌های خطا و اعلان‌ها.وظیفه مختصرسازی و تسهیل کار کاربران در طول سفر کاربری بعهده Ux writer می‌باشد و ازجمله سایر وظایف Ux writer میتوان به این موارد اشاره کرد:• همکاری نزدیک با سایر اعضای تیم UX و محصول برای درک کاربران هدف• نوشتن ایمیل و خبرنامه برای کمک به دستیابی به اهداف محصول، مانند ثبت نام برای یک حساب کاربری• ایجاد دستورالعمل هایی که لحن صدا و سبک را برای محصول تعیین می کند• طراحی و اجرای استراتژی محتوای UXنویسندگان UX مهارت های نوشتاری قوی دارند، اما همچنین دارای تخصص UX و دانش خوبی از کل فرآیند طراحی و اصول آن هستند. آنها تحقیقات کاربر را انجام می دهند، بهترین شیوه های UX را به کار می گیرند و با تیم طراحی UX همکاری نزدیکی دارند تا به شکل گیری تجربه کلی کاربر کمک کنند.نقش یک رهبر UX چیست؟(UX Lead)با توجه به اینکه طراحی UX یک فرآیند خطی نیست، گاهی اوقات مدیریت و سازماندهی تمامی اطلاعات بر اساس استراتژی توافق شده بسیار چالش برانگیز است. رهبر UX شخصی است که تضمین می‌کند همه اعضای تیم در یک مسیر هستند و هیچ تضادی طراحی آنها را تحت تأثیر قرار نمیدهد.همچنین برای اطمینان از انجام شدن طراحی ها در بالاترین سطح کیفی رهبرUX تلاش می‌کند هرگونه مشکل یا تعارض در تیم را برطرف کند