گزارش کارگاه تولید نمونه اولیه محصولات دیجیتال برای وب و موبایل
کارگاه تولید نمونه اولیه محصولات دیجیتال برای وب و موبایل سهشنبه ۲۶ اردیبهشتماه در مرکز توانمندسازی و تسهیلگری کسبوکارهای نوپای فاوا برگزار شد.
در این کارگاه به بحث prototyping میپردازیم. مفهوم prototyping به معنای نمونه اولیهای است که برای آزمایش یک مفهوم یا شبیهسازی فرایند تولید یک محصول آماده میشود. prototyping درواقع نمونه اولیهای از محصول نهایی است. در گذشته prototyping در زمینههای مختلف، مانند خودروسازی وجود داشته است. اما در حال حاضر prototyping در زمینه طراحی تجربه کاربری محصولات دیجیتالuser experience design استفاده میشود و ابزارهای مختلفی برای این منظور ساخته شده است. اگر قرار است در زمینه طراحی تجربه کاربری محصولات دیجیتالuser experience design فعالیت کنید؛ حتما نیاز است که در ابتدا یک نمونه اولیه ایجاد کنید. در گذشته در فرایند تولید یک محصول دیجیتال مانند طراحی یک وبسایت در ابتدا data base ساخته و یک نمونه کامل در شرایط عملی ایجاد و آزمایش میشد که این فرایند هزینههای زیادی داشت و زمان زیادی صرف این کار میشد. بهعنوانمثال برای طراحی و تولید یک نرمافزار تمام مراحل ساخت نرمافزار بهصورت کامل انجام میشد و محصول نهایی به بازار عرضه میشد و بازخورد آن بررسی و اگر تغییراتی لازم بود اعمال میشد که در این صورت احتمال تغییرات اساسی در محصول وجود داشت و کار دیر به نتیجه میرسید و گاهی با شکست مواجه میشد چراکه نیازهای کاربران بهخوبی بررسی نمیشد و اصلاحات لازم در نمونه انجام نمیشد ازاینرو prototyping در این زمینه موردتوجه قرار گرفت. با استفاده از rapid prototyping خیلی راحت و سریع نمونه اولیه ساخته شده و مورد ارزیابی قرار میگیرد و اگر عیوب و نواقصی در محصول وجود داشته باشد خیلی سریع اصلاح خواهد شد.
بهعنوانمثال یک فرایند خرید را میخواهید دریک فروشگاه پیادهسازی کنید. برای انجام این کار طبق روال معمول شما باید یک فروشگاه تاسیس کرده، یک data base ایجاد کنید، محصولاتی را عرضه کنید و... و پروسه موردنظرتان را اجرا کنید. اگر در کارتان با مشکلی مواجه شدید و نیاز به زمان و هزینه زیادی صرف رفع عیوب خواهد شد ازاینرو در فرایند تولید محصولات دیجیتال نیز از prototyping استفاده میشود و انجام آزمون کاربردپذیری usability testing نیز با هزینه خیلی کمتری انجام خواهد شد و اگر فرایند موردنظرتان نیاز به تغییر داشته باشد بهراحتی انجام خواهد شد و مجدداً خیلی سریع میتوان با کاربران فرایند و یا محصولتان را تست کنید.
تفاوتهای prototype با محصول نهایی:
- متریال یا تکنولوژی مورداستفاده: ممکن است prototype از نظر مواد و مصالح مورداستفاده در آن با نمونه اصلی متفاوت باشد ولی از حیث فرایندی که در محصول نهایی انجام میشود را بهخوبی در prototype بتوانیم نشان دهیم.
- فرایند تولید prototype خیلی سریعتر و کمهزینهتر از محصول نهایی است.
- تست و اعتبار سنجی و تایید prototype نیز خیلی سریعتر و راحتتر است.
در فرایند تولید prototype اولین چیزی که تهیه میشود یک sketch است. ممکن است ایدهای به نظرتان برسد و شما آن را روی یک کاغذ رسم کنید و به دیگران نشان دهید. بعضی از prototypeها low fidelity هستند و درواقع شباهت زیادی با نمونه نهایی ندارند و فقط ساختار کلی محصول نهایی را نشان میدهند ولی جزئیات آن از محصول نهایی متفاوت است. بعضی دیگر از prototypeها خیلی شبیه نمونه نهایی هستند و به اصلاح high fidelity هستند. نمودارهایی وجود دارند که در انتخاب نوع prototype میتوان از آنها استفاده کرد. این نمودارها بر اساس پارامتر زمان و میزان شبیه بودن prototype به نمونه نهایی ترسیم شدهاند. مثلا اگر برای نشان دادن ایده به دیگران زمانتان خیلی محدود باشد میتوانید یک sketch روی کاغذ ترسیم کنید و طرح و ایده خود را به دیگران نشان دهید و یا اینکه یک wireframe طراحی کنید یک نمای خطی از موضوع موردنظرتان را طراحی کنید و به دیگران نشان دهید. مثلا میتوان از نرمافزارهای طراحی مثل فتوشاپ، اتوکد و... کمک بگیرید. sketch و wireframeرا معمولاً در مرحله معماری اطلاعات نشان میدهند. اینکه اطلاعات به چه صورت نمایش داده شود و در کدام قسمتها متن و عکسها قرار بگیرند و چه ساختار و layout را دارند. اگر بخواهید طرح اولیه ازلحاظ بصری خیلی نزدیک به نمونه نهایی میتوانید یک mockup تهیه کنید. در mockup خیلی به جزئیات توجه میشود. بهعنوانمثال یک نرمافزار میخواهید طراحی کنید که حالت صفحهنمایش آن در طول روز و شب متفاوت است و این مفهوم را میخواهید به دیگران نشان دهید در این صورت از sketch و wireframe نمیتوان استفاده کرد و باید یک نمونه که ازلحاظ بصری کاملتر است استفاده کرد. در این مورداستفاده از در mockup درک بهتر قابلیت نرمافزار مفید فایده خواهد بود. و درنهایت روش دیگری که نسبت به روشهای مذکور کاملتر است و جزئیات بیشتری از محصول نهایی در آن لحاظ میشود ساخت prototype است. در prototype قابلیتهای محصول و functionalityهای محصول نهایی را به نمایش می-گذارد. مثلا در محیط یک نرمافزار اگر یک کاربر روی buttonی کلیک کند نشان داده شود که با کلیک کردن چه اتفاقی قرار است در نمونه محصول نهایی اتفاق بیفتد. در مورد دستهبندی prototypeها ازلحاظ میزان جزئیات توضیح داده شد که به دو دسته low fidelity prototype و high fidelity prototype تقسیمبندی میشوند. در low fidelity prototype هزینههای تولید نسبت به high fidelity prototype پایینتر است اما low fidelity prototype برای انجام آزمون کاربردپذیری usability testing محصولات دیجیتال مناسب نیستند. در هنگام استفاده کاربر از یک low fidelity prototype همیشه باید یک تسهیلگر در کنار کاربر باشد و آن را راهنمایی کند. بهعنوانمثال باید برای کاربری که با نمونه اولیه یک نرمافزار کار میکند شیوه کار با نرمافزار را تشریح کند و در کار کردن با نرمافزار او را راهنمایی کند. مزیتی که low fidelity prototype دارند این است که میتوانید بهراحتی چند تا پروسه مختلف را طراحی کرده و آنها را بدون صرف زمان و هزینه زیاد به کاربران نشان دهید. high fidelity prototypeها عملکرد کامل محصول را به نمایش میگذارد و کاربران خیلی راحت و بدون نیاز به راهنمایی با نمونه کار میکند چراکه high fidelity prototype خیلی زیاد شبیه به محصول نهایی است.
یک prototype خوب دارای چه ویژگیهایی است؟
- مشخص شود که prototype به چه کسانی قرار است نشان داده شود. مثلاً قرار است که prototype به تمام اعضای یک مجموعه نشان داده شود و یا فقط به مدیران نشان داده شود. مثلاً اگر طراح تجربه کاربری هستید و میخواهید ایده خود را به سایر اعضای تیم نشان دهید تهیه یک sketch ساده کافی است ولی اگر همین ایده را بخواهید به مدیران و یا به کاربران نشان دهید باید یک high fidelity prototype آماده کنید.
- در تهیه prototype از محتوای واقعی استفاده کنید. مثلاً برای نشان دادن یک ایده به بعضی از افراد فقط استفاده از خطوط ساده و متن و... مناسب نیستند و باید محتوای واقعی نمونه در prototype وجود داشته باشد.
- از ابزارهای مناسب برای ساخت prototype استفاده شود. مثلاً یک prototype از نرمافزاری که قرار است برای گوشی طراحی شود آماده کردهاید و میخواهید به کاربر نشان دهید در اینجا برای نمایش نرمافزار به کاربران حتما باید از گوشی استفاده کرد مثلاً prototype نرمافزار را با لپتاپ به کاربران نشان ندهیم.
چه زمانی نیاز است که یک prototype ساخته شود؟
وقتیکه بخواهیم محصول ایده خود را به دیگران نشان دهید از prototype استفاده میکنیم. یک محصول نتیجه یک ایده است. ممکن است که ابتدا برای نشان دادن ایده خود به دیگران از sketch و wireframeکمک بگیرید و یا یک موکاپ تهیه کنید ولی درنهایت برای نشان دادن محصول باید یک prototype بسازید. مثلاً یک استارتآپ برای نشان دادن محصول خود از prototype استفاده میکند. یا یک usability testing میخواهید انجام دهید و بازخورد آن را ببینید در اینجا نیز میتوانید از prototype استفاده کنید.
چه ابزارهایی برای ساخت prototype مورداستفاده قرار میگیرند؟
ابزارهایی که برای user flow استفاده میکنیم. یعنی مثلاً اگر کاربر در محیط نرمافزار کلیک کند صفحه بعدی که باز میشود یا اتفاقی که با کلیک کردن کاربر روی یک button میافتد را نشان میدهد. برای این کار ابزارهایی مثل user flow و adobe xd و... وجود دارند. یا مثلاً نمونه اولیه بهصورت wireframe یا sketch است که برای تهیه آنها از ابزارهایی مثل axure ، just in mine استفاده میشود. یک سری ابزارها برای ایجاد prototypeهای تعاملی وجود دارند که در prototype قابلیتهای محصول نهایی و functionalityهای محصول نهایی را به نمایش میگذارد. در prototypeهای تعاملی نیز از ابزارهایی استفاده میشود که مثلاً اگر کاربر در محیط نرمافزار یک کلیک بکند اتفاقی که با کلیک کردن کاربر روی یک button میافتد را نشان میدهد. و یا ابزارهایی که برای ریز تعاملات یا micro interactionها استفاده میشود. ابزارهایی مثل in vision برای interactive prototypeها استفاده میشود. ابزار principle برای نیز برای interactive prototypeها استفاده میشود. Marvel یک برنامه موبایل است که شما میتوانید بهوسیله این ابزار wireframe یا sketch را prototype کنید. interactive prototypeها یا ریز تعاملات یک فرایند را نشان میدهند مثل علامت قلب که برای نشان دادن like در نرمافزار inestagram استفاده میشود و با کلیک روی قلب قرمز میشود. مثلا یک دکمه submit در یک وبسایت یا like در توئیتر و فیسبوک نمونههای دیگری از interactionها هستند.
یک تست اولیه به نام paper prototyping وجود دارد که برای تست اولیه محصول با کاربران استفاده میشود که تمام فرایند کار با محصول بهصورت فرمهایی و طرحهایی روی کاغذ و در مراحل اول تولید انجام میشود تا رفتار کاربران در مورد محصول را ببینیم. یک روش خیلی سریع تحت عنوان روش Rapid interactive test and evaluation (RITE) وجود دارد که برای اولین بار در مراحل تولید یک game این روش ابداع شد. در روش RITE ابتدا یک نمونهسازی اولیه prototyping interactive از محصول نهایی انجام میشود و نمونه اولیه را در یک جامعه آماری محدود موردسنجش قرار میدهیم. مثلاً اگر بعد از تست کردن با سه نفر، نمونه اولیه ۵۰ درصد مشکل داشت طرح را تغییر میدهیم. حالآنکه اگر از روش RITE استفاده نکنیم و نمونهسازی انجام ندهیم و طبق روال سنتی عمل کنیم بدینصورت که محصول نهایی را بهطور کامل تولید کرده و در معرض دید جامعه آماری قرار دهیم تا عیوب احتمالی محصول مشخص شود و در صورت مشکلدار بودن همین پروسه مجدداً به تعداد زیاد تکرار شود تا به محصول مطلوب دست پیدا کنیم؛ این شیوه بسیار پرهزینه و زمانبر خواهد بود. با روش RITE میتوان در بازه زمانی کوتاهتر و صرف هزینههای کمتر به نتیجه مطلوب رسید.
در ادامه به مثالی از prototyping در زمینه طراحی app میپردازیم:
در فرایند طراحی App شما میتوانید در ابتدا یک sketch ساده اولیه طراحی کنید و بعد بهصورت responsive یک وبسایت طراحی کنید که نسخه موبایل نیز داشته باشد. برای این کار از ابزاری مثل boot strap یا foundation و... میتوانید استفاده کنید تا یک فایل با فرمت html و https درست کنید و درنهایت با ابزار phonegap (که متعلق به adobe است) خروجی آن apk و یا ipa و... درست کنید.
مزیتی که phonegap دارد این است که شما میتوانید یک وبسایت responsive آماده کنید و فرمها را در آن وارد کنید و ورودی phonegap یک فایل zip است که شامل فایلهایی با فرمت html و https است و خروجی آن apk و یا ipa و... است. اخیراً دو ابزار in vision و marvel در این زمینه بیشتر استفاده میشوند.
ازجمله مهمترین برنامههایی که برای درست کردن prototype روی گوشی موبایل نصب میشوند میتوان به مواردی چون: adobe preview ، mockup io ، proto ، prototyper ، lunch ، marvel ؛ proto.io و... اشاره کرد. اخیراً دو ابزار origami و framer نیز برای ساخت prototypeها ارائه شدهاند. یک سری ابزارها وجود دارند که هم نسخه موبایل و هم نسخه دسکتاپ دارند مثل: pixate، atomic.io ، figma ، adobe xd ، mirror ، axure و ... هستند. axure برای تهیه sketch خیلی استفاده میشود و مهمترین مزیت axure این است که library خیلی زیادی در آن وجود دارد.
در تیمهای طراحی محصولات دیجیتال معمولاً یک نفر بهعنوان interaction designer این وظیفه را دارد که دادههای کاربران را از تیم research یا از تیمی که usability test را انجام میدهند بگیرد و یک prototype از محصول نهایی آماده کند و در اختیار تیم قرار دهد. اگر در یک تیم بهعنوان ux designer یا interaction designer فعالیت میکنید چیزی که قرار است شما تحویل سایرین بدهید یک user flow است که مثلاً یک نمودار است که نشان میدهد اگر کاربر در محیط نرمافزاری کلیک کند چه صفحهای باز میشود یا چه اتفاقی با کلیک کردن کاربر روی یک button میافتد.
ابزارهای زیادی برای ساخت prototype استفاده میشوند. یک سایت به نام ux designer.co وجود دارد که ابزارهای مرتبط با این حوزه را ارائه میکند. تنوع ابزارها در این زمینه بسیار زیاد است و شما میتوانید برحسب کاری که میخواهید انجام دهید ابزاری لازم را انتخاب کنید. یکی از ابزارهایی که خیلی زیاد مورداستفاده قرار میگیرد sketch است که ابتدا ui ها را با استفاده از این ابزار آماده میکنند و با استفاده از یک سری plug in تحت عنوان craft که به sketch یا photoshop اضافه میشود میتوانید طرح اولیه را ایجاد کنید. میتوانید با استفاده از free hand متن اضافه کنید و note بگذارید و تغییرات موردنظرتان را اعمال کنید. Prototype هنوز به این ابزار اضافه نشده است. منظور از Prototype همان user flow است که رسم میشود که برای این کار از ابزار kampas flip میتوان استفاده کرد یا کلاً library جداگانه وجود دارد و میتوانید مثلا از illustrator استفاده کنید. از ابزارهایی مثل: sink، sample data، library ، duplicate و... میتوان استفاده کرد. با استفاده از ابزار sink ، screen و art work انتخابی را میتوان به پروژههای موردنظر sink کرد. در زمینه ui kit و Guide lineها معمولاً اندروید، اپل ، ویندوز، مک و...یک سری ui kit و Guide line استاندارد وجود دارند که میتوانید از آنها استفاده کنید و اگر وقت بیشتر داشته باشید میتوانید styleهای مختلف موردنیازتان را طراحی کنید. یک ابزار دیگر به اسم marvel app نیز وجود دارد که این نیز قابلیت sink کردن دارد. شما میتوانید uiهای موردنظرتان را upload کنید و خروجی موردنظرتان را بگیرید.
اگر در یک تیم بهعنوان interaction designer فعالیت میکنید وظیفه شما این است که تمام screen های محصول را طراحی کنید بهطوریکه نشان دهید مثلاً اگر کاربر در محیط نرمافزار کلیک کند چه صفحهای باز میشود یا چه اتفاقی با کلیک کردن کاربر روی یک button میافتد. برای این کار ابتدا تمام screen ها و حالات ممکن را باید برای Prototype طراحی کرد. ابزارهایی که برای این کار استفاده میشوند یا حالت view دارند که خیلی از ابزارها روی موبایل هم قابل نصب شدن هستند و نمونه Prototype را میتوان روی گوشی موبایل نیز نمایش داد و یا حالتmood build دارند و میتوان screen های مختلف را به هم لینک کرد که با این کار تمام interactionها را میتوان به در Prototype مشخص کرد. در حالت preview mood کاربر اگر روی قسمتی کلیک کند interaction آن به کاربر نشان داده میشود. تقریبا همه ابزارهای طراحی این قابلیتها را دارا میباشند. یکی از چیزهایی که در فرایند interaction designe و طراحی وجود دارد این است که همیشه history فعالیتها و بازخوردها را داشته باشیم. یکی از ابزارها in vision است که با استفاده از craft میتوانید آن را sink کنید. Marvel هم یک ابزار دیگر است که مزیت آن نسبت به in vision این است که Prototypeهای کاغذی را نیز میتوان با آن کار کرد و روی موبایل نیز نصب میشود و با موبایل میتوان از صفحات کاغذی بهراحتی عکس گرفت و Prototype تهیه کرد. تقریباً کارکرد اکثر ابزارهای ساخت Prototype به همین صورت است و یک screen را upload میکنیم و روی آن کار انجام میدهیم ولی دو ابزاری که خیلی مورداستفاده قرار میگیرند in vision و Marvel هستند. یکی از ابزارهای دیگر که خیلی مورداستفاده قرار میگیرد axure است. اولین کاربرد axure استفاده از آن برای طراحی wireframe بود. یک سری library و ویجت دارد که میتوانید boot strap به آن اضافه کنید و از آنها استفاده کنید. مزیت مهم axure این است که یک سری text box و text field ابزارهای زیادتری دارد که یک سری کارها و function را نیز با آن میتوانید انجام دهید و بهراحتی style و رنگ فونت مناسب انتخاب کنید. مثلاً بهراحتی میتوان یک button ایجاد کرد که اگر کاربر روی آن کلیک بکند چیزی به سبد خرید اضافه شود. در یک قسمت دیگر امکانات مختلفی دارد که شما میتوانید unclick ، unmove ، show و hide را مشخص کنید و به همین صورت ساختار کلی Prototype را تعریف کنید و با کلیک بر preview ، Prototype به شما نمایش داده میشود. بهعنوانمثال یک wireframe اولیه از کارتان را میتوانید با axure طراحی کنید و همچنین قابلیت ایجاد high fidelity prototype و اگر خیلی دقیقتر بخواهید prototype تهیه کنید میتوانید style طراحی کنید و رنگ فونت مناسب آن را انتخاب کنید تا prototype نزدیکتر به نمونه نهایی باشد. یکی دیگر از ابزارهایی که میتوان با استفاده از آن از screenها Prototype تهیه کرد principle است. After effect نیز ابزار دیگری است که در این زمینه خیلی کاربرد دارد و دلیل استفاده زیاد از آن این است که micro interaction و animation ها را که قرار است بهعنوان خروجی داشته باشیم را با این ابزار میتوانیم بسازیم.
Appهای زیادی برای ساخت Prototype وجود دارند که میتوانید با توجه به امکانات موجود app مناسب کارتان را انتخاب کنید درواقع بهترین حالت این است که Prototype خیلی شبیه به نمونه نهایی باشد و اصطلاحاً high fidelity prototype باشد که برای این کار ابزارهایی مثل: adobe preview ، mockup io ، protot ، prototyper ، lunch ، marvel ؛ proto.io و... اشاره کرد.
نوع ابزار مورداستفاده برای ساخت prototype به امکانات موجود بستگی دارد. مزیت prototypeهای کاغذی در این است که خیلی سریع آماده میشوند و خیلی سریع میتوانیم prototype را تست کنیم و بازخورد آن از کاربران را دریافت کنیم.
مهمترین مزیت استفاده از principle در ساخت prototype این است که میتوان art workهای مختلف را ایجاد کرد و آن را کپی کرد و در آنها تغییرات دلخواه را اعمال کرد. در شرکت facebook از نرمافزار principle خیلی زیاد استفاده میشود. یک ابزار قدرتمند دیگر در این زمینه adobe xd است که میتوان از آن برای سختافزارهای مختلف مثل: I phone ، I pad ، android ، web و... استفاده کرد و prototype موردنظر را ایجاد کرد. این ابزار از دو بخش design و prototype تشکیل شده است. با استفاده از بخش design میتوانید طرحی را انجام دهید که نسخه ویندوز این ابزار نیز به بازار عرضه شده است. مثلاً با این ابزار میتوانید یک button طراحی کنید و یک screen به آن اضافه کنید که مثلاً با کلیک روی button صفحه موردنظر نمایش داده شود و به همین صورت میتوانید prototype موردنظرتان را ایجاد کنید و prototype را روی موبایل نیز داشته باشید و اتفاقاتی که در حین کار با prototype میافتد را میتوان record کرد و کاری را که کاربران با نمونه نهایی انجام خواهند داد را شبیهسازی کرد و نتیجه را در اختیار developer قرار داد.
در ادامه به شرح مختصری در مورد آزمون کاربردپذیری محصولات دیجیتال میپردازیم:
یکی از چیزهایی که میتوان در بحث آزمون کاربردپذیری از آن استفاده کرد paper prototyping وrapid prototyping است که بهراحتی میتوانید نمونه اولیه را ایجاد کنید و در آزمون کاربردپذیری محصول از آن استفاده کنید. مثلاً اگر محدودیت منابع و دانش فنی داشته باشید میتوانید با استفاده از paper prototyping یک نمونه اولیه ایجاد کنید و آزمون کاربردپذیری را روی آن انجام دهید، برای این کار باید چند نکته اساسی را در نظر داشته باشید که این نکات شامل موارد ذیل هستند:
- کابران را بیسواد و با ضریب هوشی پایین خطاب نکنید و اگر در حین آزمون اشتباه داشتند آنها را سرزنش نکنید.
- در حین انجام آزمون کابران را راهنمایی نکنید و بگذارید کاربر کار خود را انجام دهد و اگر ایدهای به نظر شما رسید در حین تست آن را به کاربر نگویید.
- به کاربر زمان بدهید تا کار خود را تا انتها به پایان برساند و استرس ضیق وقت را نداشته باشد.
- از کاربرها سوال تشریحی بپرسید و سوالاتی را که جواب آنها بله و خیر است را نپرسید.
- سعی کنید زمان فرایند آزمون خیلی طولانی نباشد.
- از کاربر بخواهید در زمان انجام تست بلندبلند فکر کند و هر آنچه میبیند و به ذهنش میرسد را به زبان بیاورد.
- با انجام تست و ارزیابی با سه کاربر، میتوان ۶۵ درصد مشکلات محصول و سیستم را شناسایی کرد، با ۴ کاربر میتوان ۷۵ درصد، با ۵ کاربر میتوان ۸۵ درصد و با ۱۲ کاربر و یا حتی بیشتر به ۱۰۰ درصد از مشکلات محصول پی برد. البته این تعداد به نوع محصول نیز بستگی دارد. این تعداد برای محصولات کوچک و در استارتآپها استفاده میشود.


