وایرفریم چیست؟
وایرفریم که بی شباهت به طرح های معماری نیست، یک طرح کلی دوبعدی از یک صفحه وب یا برنامه است. وایر فریم ها یک نمای کلی از ساختار صفحه، طرحبندی، معماری اطلاعات، جریان کاربری، عملکرد و رفتارهای مورد نظر ارائه میدن. از اونجایی که وایر فریم معمولاً مفهوم اولیه محصول رو نمایش می ده، استفاده از المانهای استایل، رنگ و گرافیک توی اون به حداقل می رسه. وایرفریم ها رو هم میشه با دست ترسیم کرد و هم به صورت دیجیتالی ایجاد کرد و این به میزان جزئیات مورد نیاز بستگی داره. وایرفریمینگ روشیه که معمولاً توسط طراحان UX یا تجربه کاربری مورد استفاده قرار می گیره. این فرآیند به همه ذینفعان اجازه می ده تا قبل از اینکه توسعه دهندگان، رابط کاربری رو با استفاده از کد بسازن، در مورد مکان قرار گرفتن اطلاعات با هم توافق کنن.
وایرفریمینگ چه زمانی انجام می شه؟
فرآیند وایرفریمینگ معمولا در طول مرحله اکتشافی چرخه عمر محصول اتفاق میفته. در طول این مرحله، طراحان در حال آزمایش دامنه محصول، همکاری روی ایده ها و شناسایی الزامات تجاری هستن. یک وایرفریم معمولا طرح یک صفحه و به که به عنوان نقطه پرش برای طراحی محصول مورد استفاده قرار میگیره. با استفاده از بینشهای ارزشمند جمعآوریشده از بازخورد کاربران در مورد وایرفریم، طراحان میتونن دفعه آینده طراحی دقیقتری از محصول – مثلا نمونه اولیه یا ماکت – رو ارائه بدن.
هدف از وایرفریمینگ چیه؟
وایرفریمها سه هدف کلیدی رو دنبال میکنن: مفهوم رو متمرکز بر کاربر نگه میدارن، ویژگیهای وبسایت رو شفاف سازی و تعریف میکنن، و ایجاد اونها سریع و ارزونه. بیاید هر یک از این اهداف رو با جزئیات بیشتری بررسی کنیم.
1- وایرفریم ها مفهوم رو روی کاربر متمرکز می کنند
وایرفریم ها به طور موثر به عنوان ابزار ارتباطی مورد استفاده قرار میگیرن. اون ها دریافت بازخورد از کاربران رو تسهیل میکنن، جریان مکالمه و گفتگو با ذینفعان رو برقرار میکنن و ایدههایی رو بین طراحان ایجاد میکنن. انجام آزمایش کاربری تو مراحل اولیه وایرفریمینگ، به طراح این امکان رو میده تا بازخوردهای صادقانه دریافت کنه و نقاط کلیدی که به ایجاد و توسعه مفهوم محصول کمک میکنن رو شناسایی کنه. وایرفریمینگ راه مناسبی برای طراحان برای سنجش نحوه تعامل کاربر با رابط کاربریه. با استفاده از ویژگیهایی مثل Lorem Ipsum، یک متن شبه لاتین که به عنوان یک مکان نگهداری برای محتوای آینده عمل میکنه، طراحان می تونن از کاربران سؤالاتی مانند “انتظار دارید چه چیزی اینجا نوشته بشه؟” رو بپرسن. این بینشها به طراح کمک میکنن تا متوجه بشه چه چیزی برای کاربر مناسب تره و در نتیجه محصولاتی ایجاد کنه که استفاده کردن ازشون راحت و آسون باشه.
2- وایرفریم ها ویژگی های وب سایت رو تعریف میکنند
هنگامی که ایده های خودتون رو به مشتریان تون منتقل می کنید، ممکنه اونها با واژگان فنی لازم برای متوجه شدن منظور شما از عباراتی مانند “hero image” یا “call to action” آشنا نباشن. اما ویژگی های خاص وایرفریم به طور واضح به مشتریان شما نحوه عملکرد و هدف از به کار گیری شون رو نشون می دن. همچنین همه ذینفعان رو قادر میسازن تا میزان فضای لازم برای تخصیص هر ویژگی رو بسنجن، معماری اطلاعات سایت رو به طراحی بصری اون متصل کنن و عملکرد و کاربرد صفحه رو روشن و شفاف سازی کنن. مشاهده ویژگیهای یک وایرفریم همچنین به شما امکان میده تا نحوه کار همه این ویژگی ها رو با هم تجسم کنید – و حتی ممکنه باعث بشه تصمیم بگیرید تعدادی از این ویژگی ها رو حذف کنید. ممکنه احساس کنید این ویژگی ها به طور کامل با سایر عناصر صفحه همخونی ندارن.
3- وایرفریم ها سریع و ارزون ساخته می شن
میدونید بهترین ویژگی وایر فریم ها چیه؟ وایرفریم ها فوق العاده ارزون هستن و ایجادشون آسون و راحته. در واقع، اگه یه قلم و کاغذ داشته باشید، میتونید به سرعت یک وایرفریم رو بدون خرج کردن یک ریال ترسیم کنید. فراوانی ابزارهای موجود در این زمینه هم به این معنیه که میتونید ظرف چند دقیقه یک وایرفریم دیجیتال هم بسازید. اغلب، زمانی که یک محصول بیش از حد آماده و به اصطلاح جلا داده شده به به نظر می رسه، میزان صداقت یا حقیقی بودن نظر کاربر در مورد اولین برداشتش از محصول کاهش پیدا میکنه. اما با افشا و در معرض دید قرار دادن هسته اصلی صفحهآرایی، ایرادات و نقاط ضعف رو میشه به راحتی شناسایی و بدون صرف زمان یا هزینه قابلتوجهی اصلاح کرد. هرچقدر که تو فرآیند طراحی محصول پیشرفته تر باشید، ایجاد تغییرات سخت تر میشه!
معرفی انواع مختلف وایرفریم
سه نوع اصلی از وایرفریم ها وجود داره: وایرفریم های با کیفیت پایین، وایرفریم های با کیفیت متوسط و وایرفریم های با کیفیت بالا. مهم ترین عامل تمایز بین این وایرفریم ها میزان جزئیات اون هاست.
بیاید به این موارد دقیق تر نگاه کنیم:
وایرفریم های با کیفیت پایین
وایر فریم های با کیفیت پایین، نمایش های بصری اولیه صفحه وب هستن و معمولاً به عنوان نقطه شروع طراحی عمل میکنن. به همین دلیل، این وایر فریم ها نسبتاً ساده هستن و بدون هیچ گونه احساس مقیاس، شبکه یا دقت پیکسل ایجاد میشن.
وایرفریم های با کیفیت پایین، جزئیاتی رو که به طور بالقوه میتونن باعث حواسپرتی بشن حذف میکنن و فقط شامل تصاویر ساده، اشکال بلوک، و محتوا و متن ها و عنوان های ساختگی هستن.
وایرفریم های با وفاداری پایین برای شروع مکالمات، تصمیم گیری در مورد طرح ناوبری و نقشه برداری از جریان کاربر مفید هستند. به طور خلاصه، اگه ذینفعان یا مشتریانی دارید که تو جلسه حضور دارن و شما اواسط جلسه تصمیم می گیرید طرحی رو قلم بزنید، وایرفریمهای با کیفیت پایین ایدهآل هستن. این وایر فریم ها همچنین برای طراحانی که چندین مفهوم محصول دارن و می خوان به سرعت تصمیم بگیرن که باید در کدوم جهت حرکت کنن و ادامه بدن هم بسیار مفید هستن.
وایر فریم های کیفیت متوسط
وایرفریم های با کیفیت متوسط، متداول ترین وایر فریم مورد استفاده از بین سه نوع ذکر شده هستن. این نوع وایرفریم ها نمایش دقیق تری از چیدمان طرح دارن. وایرفریم های کیفیت متوسط هنوز هم از استفاده از عوامل ایجاد حواس پرتی مثل تصاویر یا تایپوگرافی اجتناب می کنن، اما جزئیات بیشتری به اجزای خاص اختصاص داده می شه و ویژگی ها به وضوح از همدیگه متمایز می شن.
همچنین ممکنه از وزن متنهای مختلف برای جدا کردن سرفصلها و محتوای متن از هم استفاده بشه. اگرچه طرح هنوز هم سیاه و سفیده، اما طراحان میتونن از سایههای مختلف رنگ خاکستری برای نشون دادن برجسته بودن بصری عناصر فردی استفاده کنن. اگرچه وایرفریم های کیفیت متوسط در مراحل اولیه طراحی محصول هم به کار گرفته می شن، اما معمولاً با استفاده از ابزارهای وایرفریم دیجیتالی مثل Sketch یا Balsamiq ایجاد میشن.
وایرفریم های با کیفیت بالا
در نهایت، وایرفریمهای با کیفیت بالا دارای طرحبندیهای خاص پیکسلی هستن. یک وایرفریم با کیفیت پایین ممکنه شامل پرکنندههای متنی شبه لاتین و کادرهای خاکستری باشه که با X برای نشون دادن جای قرار گرفتن تصویر پر شدن. اما یک وایرفریم با کیفیت بالا می تونه شامل تصاویر برجسته واقعی و محتوای نوشتاری مرتبط باشه.
این جزئیات افزوده، وایرفریم های با کیفیت بالا رو برای کاوش و مستندسازی مفاهیم پیچیده مثل سیستم های منو یا نقشه های تعاملی ایده آل میکنه.
از وایرفریم های با کیفیت بالا تو مراحل آخر چرخه طراحی محصول استفاده می شه.
1. تحقیق کنید
به خاطر داشته باشید: طراحی UX یک فرآینده و وایرفریمینگ اولین گام تو این فرآیند نیست. قبل از اینکه حتی به برداشتن خودکار و کاغذ فکر کنید، باید دو مرحله اول رو طی کرده باشید. یعنی درک مخاطبان تون از طریق تحقیقات کاربر، ایجاد پرسوناهای مشتری و تعریف موارد استفاده، و سپس تکمیل این موضوع با تحقیقات بیشتر در مورد رقبا و صنعت. به این معنی که خطوط تولید مشابه خودتون رو تجزیه و تحلیل کنید، روندهای رایج UX و بهروش ها رو بررسی کنید، و البته، دستورالعمل های طراحی داخلی خودتون رو هم مرور کنید.
2. نتایج تحقیق رو برای استفاده به عنوان مرجع آماده کنید
میتونید تصور کنید که این مراحل مختلف چقدر داده های کمی و کیفی تولید خواهند کرد. خوب، این چیزیه که باید هنگام ترسیم وایرفریمهای خودتون در نظر داشته باشید. ممکنه تو حفظ و به یاد آوردن همه این داده ها به مشکل بر بخورید، بنابراین توصیه میکنیم یک برگه تقلب تهیه کنید. این برگه میتونه شامل اهداف کسب و کار و کاربر، پرسونا ها، موارد استفاده و شاید جالب ترین ویژگی هایی که تو تحقیقات رقیب به طور تصادفی باهاشون برخورد کردید باشه. چند مورد نقل قول انتخابی از مخاطبان شما هم ممکنه به حفظ تمرکز و توجه روی تجربه کاربر تو مراحل طراحی کمک کنه.
3. مطمئن شید که جریان کاربر رو ترسیم کردید
اگه تصوری از تعداد صفحاتی که باید تولید کنید و جریانی که انتظار دارید کاربر دنبال کنه، نداشته باشید، وایرفریمینگ شما خیلی زود به هم میریزه. داشتن یک شناخت کاملاً دقیق از اینکه کاربران شما از کجا میان (مثلاً از کدوم کانال بازاریابی) و اینکه شما در نهایت نیاز دارید کجا باشن بسیار مهمه. معماری اطلاعات خوب تضمین میکنه که کاربران شما خودکفا باشن. به این ترتیب تیکت های کمتری به نرم افزار پشتیبانی مشتریان شما برای سوال پرسیدن در مورد چگونگی انجام برخی کارهای ساده ارسال میشه، سطوح پایینتری از ناامیدی کاربر و در نهایت رضایت و اعتماد بیشتری ایجاد می شه و با استفاده از یک نرم افزار CRM پیشرفته مانند نرم افزار سی ار ام د
4. پیش نویسی کنید، نقاشی نکنید.
خوب، حالا تو مرحله چهار هستیم و بالاخره میتونید شروع به استفاده از قلم و کاغذ کنید. ممکنه به نظرتون یک کم طولانی شده باشه، اما مراحل قبلی برای داشتن یک وایرفریمینگ موفق بسیار مهم بودن. به یاد داشته باشید: شما ویژگی ها و قالب ها رو ترسیم و مشخص می کنید. بنابراین نیازی به تصویرسازی با جزئیات نیست. هیچ چیز بدتر از یک تکه کاغذ خالی نیست، بنابراین باید ایده های خودتون رو به صورت پیش فرض روی کاغذ بیارید – انجام این کار برای مرحله سوم ضروریه. به زیبایی شناسی فکر نکنید، به رنگ ها فکر نکنید – طراح رابط کاربری به این مسائل خواهد پرداخت. و اگه شما تنها طراح استارتاپ نوپای خودتون هستید هم میتونید بعداً روی این موارد تمرکز کنید و انجام شون بدید. یک خودکار خوب و روان یا یه مارکر میتونه ابزار مفیدی برای این مرحله از وایرفریم باشه. چرا؟ چون از اینکه خودتون رو تو جزئیات غرق کنید جلوگیری میکنه. به این ترتیب شما فقط روی ترسیم بلوک های کاربردی که اسکلت طراحی شما رو تشکیل می دن تمرکز خواهید کرد. در حین طراحی این سوالات رو از خودتون بپرسید:
- چطور میتونید محتوا رو برای حمایت از اهداف کاربران تون سازماندهی کنید؟
- کدوم اطلاعات باید برجسته تر باشن؟ پیام اصلی شما کجا باید قرار بگیره؟ کاربر هنگام ورود به صفحه ابتدا باید چه چیزی رو ببینه؟
- کاربر انتظار داره تو قسمتهای خاصی از صفحه چه چیزی رو ببینه؟
- کاربر برای انجام اقدامات مورد نظر به کدوم دکمه ها یا نقاط لمسی نیاز داره؟
5. مقداری جزئیات اضافه کرده و تست کنید
حالا شما یک جریان و صفحات نمایش دارید، و ایده های خودتون رو به تایید برخی از همکاران تون رسوندید. گام بعدی اضافه کردن برخی جزئیات اطلاعاتی برای آماده سازی وایرفریم شما برای ارتقا به حالت نمونه اولیه است. جزئیات رو به روشی که به طور طبیعی یک صفحه نمایش یا صفحه کتاب رو پردازش می کنید اضافه کنید: از بالا به پایین و از راست به چپ. به یاد داشته باشید: وایرفریم شما اسکلت سایت شماست. شما هنوز عضله که همون محتوا و کپی هستن رو اضافه نمی کنید. به موارد زیر توجه کنید:
- قراردادهای استفاده، مانند قرار دادن منو در بالا در کنار لوگوی خودتون، داشتن کادر جستجو در بالا سمت چپ و غیره
- عبارات ساده و واضح برای مشخص کردن فراخوانها
- عناصر اعتمادساز: برای ایجاد اعتماد تو مشتریان تون به چه چیزهایی نیاز دارید و بهترین مکان برای قرار دادن این عناصر کجاست؟
- توضیحات برای نشون دادن هر گونه عملکردی که می تونه تو نمونه اولیه گنجونده بشه
بعد از اینکه همه این کارها رو انجام دادید، برای اولین آزمایش های کاربری خودتون آماده اید. تو این مرحله، کاربران شما ممکنه همکاران تون باشن. در واقع، یکی از مزایای به کار گیری وایرفریم های ساده اینه که به عنوان یک زبان مشترک بین طراحان، سهام داران و توسعهدهندگان وب و اپلیکیشن عمل میکنن. میتونید از ابزارهایی مثل UsabilityHub برای تست صفحههای آزمایشی و جمعآوری بازخورد کیفی و Prott برای آزمایش و بررسی جریان اصلی کاربر استفاده کنید.
6. شروع به تبدیل وایرفریم ها به نمونه های اولیه کنید
بعد از اینکه بازخوردهای دریافتی رو مستند کردید و بر اساس اون ها عمل کردید، می تونید شروع به توسعه نمونه های اولیه با کیفیت بالا کنید. ابزارهای زیادی برای انجام این کار وجود داره، از Proto.io گرفته تا Adobe XD و Framer. اما معروفترین اون ها Sketch هست. پس از اینکه وایرفریمهای خودتون رو تو Sketch توسعه دادید، میتونید اون ها رو به ابزار نمونهسازی پیشرو در صنعت یعنی InVision وارد کنید و صفحات خودتون رو برای دور دوم آزمایش کاربر با کیفیت بالا به هم متصل کنید. تو این مرحله است که ما دیگه مطمئناً از وایرفریمینگ به نمونه سازی اولیه گذر کردیم.