کاربرد پروتوتایپ در طراحی سایت

سرفصل محتوا

  • پروتوتایپ (prototype) چیه؟
  • منظور از پرتوتایپ در طراحی سایت چیه؟
  • کاربرد پرتوتایپ چیه؟
  • محدودیتای پرتوتایپ چیه؟
  • امتیازات به کار گیری پرتوتایپ در طراحی سایت
  • منظور از وفاداری در طراحی پروتوتایپ چیه؟
    • وفاداری چشمی (طراحی ساده یا سبک بندی شده)
    • وفاداری کارکردی (استاتیک در برابر تعاملی)
    • محتوای ظاهری (Lorem ipsum) در برابر محتوای واقعی
  • چه سطوحی از وفاداری وجود دارن؟
  • چیجوری میشه سطح وفاداری یه پروتوتایپ رو تعیین کرد؟
  • راهنمای جفت و جور پروتوتایپ
    • ساختن رو شروع کنین
    • بیشتر از اندازه وقت صرف اون نکنین
    • چیزی که رو می خواین سبک سنگین کنین، مشخص کنین
    • با دقیق شدن و فوکوس کردن بر ویژگیای کاربر پروتوتایپ بسازین
    • نبایدها
  • نکته مهم در مورد پرتوتایپ در طراحی سایت
  • چه زمان از پروتایپ استفاده نکنیم؟

پروتوتایپ (prototype) چیه؟

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

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

مشکلات

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

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

ارائه محصولی کامل و بعد آزمایش عکس العمل کاربران، کاری غیرمعقول و الکی به نظر می رسه. در مقابل، طراحان می تونن نمونه ای ساده رو در اندازه کوچیک عرضه کنن و به مشاهده ، ثبت، آزمایش، امتحان سطح کارایی بر مبنای عواملی خاص یا برخورد کلی کاربر و واکنشش نسبت به اون بپردازند.

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

پروتوتایپ به طراحان این امکان رو میده که راه حل هاشون رو به روشی متفاوت بررسی کنن (براساس محصولی قابل لمس و عینی، و نه ایده های ذهنی)، هم اینکه هزینه شکست رو کم می کنه چون وقت و پول کمتری صرف اون می شه. شاید تیم براون (Tim Brown) مدیرعامل شرکت طراحی و نوآوری IDEO بهترین تعریف رو از پروتوتایپ داشته باشه.

ایده

پروتوتایپ مانند سرعت گیریه که به ما امکان سرعت گرفتن در آینده رو میده! با صرف زمان واسه جفت و جور پروتوتایپِ ایده هامون، می تونیم از اشتباهات سنگین دوری کنیم؛ اشتباهاتی مانند پیچیدگی زودتر از موعد معمولی یا درگیر ایده ای ضعیف و بی آینده شدن به مدت طولانی.

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

منظور از پرتوتایپ در طراحی سایت چیه؟

پرتوتایپ یه نمونه ابتدایی از یه سایت با قابلیتای کاربردی متعدده که به طراحان این امکان رو میده که سایت خود رو قبل از طراحی پایانی مورد امتحان و آزمون بذارن.

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

موبایل

کاربرد پرتوتایپ چیه؟

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

پرتوتایپ تا حد بسیار زیادی به سایت پایانی نزدیکه از این رو به ذهن در توجه به جزئیات و برطرف کردن ایرادات بسیار کمک می کنه. اینطوری تغییرات احتمالی روی پروژه قبل از اجرا در نمونه قابل اجرا و تسته تا از هدر رفتن وقت و سرمایه جلوگیری کنه.

محدودیتای پرتوتایپ چیه؟

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

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

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

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

امتیازات به کار گیری پرتوتایپ در طراحی سایت

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

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

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

پس پرتوتایپ در کارطراحی سایت به شما این امکان رو میده که از ورود ابتکاراتی که طرح رو تحت تاثیر قرار میده پیشگیری کنین.

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

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

منظور از وفاداری در طراحی پروتوتایپ چیه؟

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

راه حل

وفاداری چشمی (طراحی ساده یا سبک بندی شده)

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

پروتوتایپای استاتیک با دو سطح جور واجور از وفاداری (طراحی ساده یا وفاداری پایین و سبک بندی شده با وفاداری بالا)

وفاداری کارکردی (استاتیک در برابر تعاملی)

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

محتوای ظاهری (Lorem ipsum) در برابر محتوای واقعی

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

با این حال وقتی که روند ساخت پروتوتایپ ادامه پیدا میکنه، لازمه متونی با محتوای واقعی رو بررسی کنین تا کاربران بتونن بفهمن که این متن چه تأثیری بر طراحی پایانی داره.

به کار گیری برچسبای واقعی هم فرصتی عالی واسه تست این نکته س که یه کپی (Copy) به طور صحیحی عمل می کنه یا نه. Copy تنها یه اصطلاح جذاب واسه برچسبای متنی و اطلاعاتیه که روی صفحه نمایش پیدا میکنه.

مانند این که دکمه Publish رو به صورت Publish، Post، Send، Done و با هر چیز دیگه تنظیم کنیم تا از کارکرد اون در موارد جور واجور مطمئن شیم.

چه سطوحی از وفاداری وجود دارن؟

وفاداری کم: روشای با وفاداری کم مانند طراحیای قلم و مداد باعث تولید پروتوتایپای استاتیک با وفاداری دیداری و محتوایی پایین می شن که امکان آزمایش و ایجاد تغییرات سریع رو جفت و جور می کنه.

اینجوری کاربر مجبور می شه که روی کارکرد برنامه تمرکز کنه و به جای نکات ظاهری روی روش کارکرد برنامه تمرکز داشته باشه.

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

وفاداری بالا: پروتوتایپای با وفاداری بالا می تونن اونقدر واقعی باشن که در بعضی موارد با محصول پایانی اشتباه گرفته شن. هم اینکه تولید این پروتوتایپا به زمان زیادی بیشتری نیاز داره.

ابزارهایی مانند InVision، Sketch، Figma، Adobe XD، Farmer و مواردی مثل این امکان ایجاد پروتوتایپای با وفاداری بالا رو به کاربران غیر تکنیکی ارائه می کنن.

با این که این نوع پروتوتایپا رو نمیشه به کد قابل استفاده تبدیل کرد؛ اما واسه تست توانایی استفاده یا اهداف تمرینی در ادامه مراحل طراحی بسیار به درد بخور هستن.

از چپ به راست به ترتیب: پروتوتایپای با وفاداری کم، متوسط و بالا

چیجوری میشه سطح وفاداری یه پروتوتایپ رو تعیین کرد؟

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

بعضی وقتا، انتخاب شما ممکنه از روی چیزای مهم کاربر یا زمینه هایی که روی اونا متمرکز هستین تعیین شن. واسه نمونه اگه می خواین اثر دیداری یه تغییر در رابط کاربری رو آزمایش کنین، ممکنه بخواین به جای طراحی ساده از طراحی سبک‎بندی شده استفاده کنین.

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

راهنمای جفت و جور پروتوتایپ

یادتون نره که پروتوتایپ ابزاری واسه آزمودن سریع راه حله. در ادامه چند پیشنهاد واسه تون داریم:

ساختن رو شروع کنین

تفکر طراحی معمولا نسبت به اقدام و عمل دودلی داره! پس اگه نسبت به چیزی که واسه رسیدن به اون تلاش می کنین خیلی مطمئن نیستین، بهترین کار اینه که به اون عینیت ببخشین.

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

بیشتر از اندازه وقت صرف اون نکنین

سرعت حرف اول رو در جفت و جور پروتوتایپ می زنه! هرچه بیشتر روی اون وقت بذارین، بیشتر دل بسته ایده تون میشین و پس احتمال ناتوانی در قضاوت و امتحان بی طرفانه زیاد می شه.

چیزی که رو می خواین سبک سنگین کنین، مشخص کنین

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

با دقیق شدن و فوکوس کردن بر ویژگیای کاربر پروتوتایپ بسازین

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

ساخت پروتوتایپ روشی مؤثر واسه عینیت بخشیدن به ایده های خود یا مشتری تونه. همونجوریکه گفتیم به دو روش میشه پروتوتایپ ساخت که هر کدوم از اونا امتیازات و معایبی دارن. پس طراحان با در نظر گرفتن زمان و بودجه ای که در اختیار دارن باید درباره تناسب و انتخاب یکی از این دو روش تصمیم بگیرن.

نبایدها

ویژگیایی که در محصول پایانی وجود ندارن رو در پروتوتایپ نگنجانید.

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

همه چیز رو پروتوتایپ نکنین!

نکته مهم در مورد پرتوتایپ در طراحی سایت

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

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

روحیه

چه زمان از پروتایپ استفاده نکنیم؟

پرتوتایپ در کار طراحی سایتای کوچیک که در اون بین صاحبان ایده و طراحان رابطه نزدیکی هست خیلی به درد بخور نیس.

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

استفاده نکردن از پرتوتایپ در طراحی سایت واسه سایتایی که با ایده های استارت آپی سرو کار ندارن می تونه به افزایش سرعت کار منجر شه و احتیاجی به طراحی پرتوتایپ نیس.

منبع:  startupforum.ir – dpr.co.com – blog.faradars.org

Author: مدیر سایت