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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بیشتر بخوانید: چگونه یک وب سایت حرفه ای طراحی کنیم؟

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

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

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

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

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

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

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

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

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

مزایای استفاده از پرتوتایپ در طراحی سایت

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

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

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

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

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

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

بیشتر بخوانید: چگونه یک وب سایت موفق داشته باشیم؟

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

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

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

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

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

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

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

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

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

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

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

مانند این‌که دکمه Publish را به صورت Publish، Post، Send، Done و با هر چیز دیگر تنظیم کنیم تا از عملکرد آن در موارد مختلف مطمئن شویم.

بیشتر بخوانید: نکات سئو در طراحی مجدد سایت (بازطراحی سایت)

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

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

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

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

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

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

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

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

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

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

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

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

راهنمای تهیه‌ی پروتوتایپ

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

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

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

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

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

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

آنچه را می‌خواهید بسنجید، مشخص کنید

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

با تمرکز بر ویژگی‌های کاربر پروتوتایپ بسازید

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

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

نبایدها

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

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

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

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

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

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

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

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

بیشتر بخوانید: آیا سایت شما از لحاظ سئو نیاز به طراحی مجدد دارد؟

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

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

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

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

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