اگر بخواهیم در همین ابتدا در مورد اینکه وایر فریمینگ چه چیزی هست و چه نقشی در طراحی سایت دارد، صحبت کنیم بگذارید با یک مثال ساده و خودمانی مطلب را شرح دهیم. فرض کنید برای سفارش یک قفسه کتاب با سبک خاص و متفاوت با قفسه کتاب های موجود در بازار، پیش یک نجار می روید. از روزهای قبل تمامی اینترنت را جستجو کرده اید اما قفسه مورد علاقه خود را پیدا نکرده اید. از هر ایده فقط یک بخشی از آن را پسندیده اید. به علاوه اینکه به دلیل محدودیت های جا و مکان در اتاقتان قفسه مورد انتظار شما ابعاد استانداردی نخواهد داشت.
منطقی ترین روش این خواهد بود که یک کاغذ و قلم بردارید و طرح اولیه مورد نظر خود را روی آن بکشید. یک قفسه کتابی که به صورت پلکانی است، هر طبقه از لحاظ تعداد کتاب ها با هم متفاوت بوده و میخواهید حتی در پایین ترین طبقه آن کشو داشته باشید. تبریک میگم! شما موفق شدید که یک وایر فریمینگ ایجاد کنید.
واژگانی چون وایر فریم، بلو پرینت، پروتوتایپ همه و همه به معنای طرح اولیه هستند. یکی از مهم ترین قسمت ها در طراحی و توسعه وب سایت ها، اپلیکیشن ها، وایر فریمینگ است. بسیاری از طراحان در ابتدا برای آنکه همه چیز مشخص بوده و توافق کلی راجع به طراحی حاصل شود، از این روش استفاده می کنند تا استخوان بندی پرژوه تا حدود زیادی ایجاد شود.
مطالعه مقالات زیر در حوزه دیزاین به شما عزیزان توصیه می‌شود:
طراحی تجربه کاربری یا UX design چیست؟ ( راهنمای جامع)
طراحی رابط کاربری یا UI design چیست؟( راهنمای جامع)
اینکه هدف نهایی طراحیمان چیست، تک تک عناصر در کجای صفحه قرار می گیرند و صفحات کجای اپلیکیشن بنا هست قرار بگیرند، به کمک وایر فریمینگ این امر ساده تر و خودمانی تر صورت می پذیرد.
پس تا اینجای کار متوجه شدیم که برای توصیف مدل‌سازی سه‌بُعدی در انیمیشن کامپیوتری و در طراحی و توسعه صفحات وب دوبُعدی و اپ‌های موبایل از وایر فریمینگ استفاده میکنیم.
آنچه در این نوشته خواهیم داشت
هدف از طراحی وایرفریمها چیست؟
وایرفریمها به منظور ملموس‌تر بودن و قابل‌درک‌تر بودن یک ایده اولیه طراحی سایت یا اپلیکیشن موبایل استفاده می‌شوند و اساساً وایرفریمها پیرو اهداف مختلفی مورد استفاده قرار می‌گیرند که برخی از مهم‌ترین آن‌ها عبارتند از:
اطمینان از اینکه ایده ما مطابق با اهداف مد نظر پیاده‌سازی می‌شود: مشاهده واضح فیچرها به تک‌تک اعضای تیم توسعه نرم‌افزار این امکان را می‌دهد تا روی دیگر جنبه‌های پروژه تمرکز کنند. با استفاده از وایرفریمینگ می‌توان مشخص کرد که فیچرها چه‌طور پیاده‌سازی شوند، چه عملکردی داشته باشند، کجا قرار بگیرند و چه مزیتی در پی خواهند داشت و از همین روی ممکن است در حین کار یک فیچر را حذف کنید چرا که در طول مسیر مشخص شده است که منطبق با اهداف سایت نیست!
تمرکز بر کاربردپذیری: وایرفریمینگ اجازه می‌دهد تا نگاهی واقعی و بی‌طرفانه به اسامی لینک‌ها، نَویگیشن، سهولت در استفاده از اپلیکیشن و چیدمان اِلِمان‌های بصری بیندازید. وایرفریمها به شما کمک می‌کنند تا نقص‌های احتمالی را در معماری سایت یا فیچرهای مد نظر مشتری شناسایی کرده و نشان می‌دهند که از دید یک کاربر، سایت یا اپ چه‌طور به نظر می‌رسد.
بررسی ظرفیت رشد محتوا: اگر بدانید که سایت‌تان در آینده‌ای نزدیک رشد خواهد کرد، وب‌سایت‌تان باید بتواند پذیرای آن رشد با حداقل تاثیر بر معماری، کاربردپذیری و زیبایی‌شناسی باشد. وایرفریمینگ می‌تواند این فرصت‌های مهم برای رشد سایت را به شما نمایانده و نحوه انطباق آن‌ها را با برنامه‌ای که در آینده مد نظر دارید به شما نشان بدهد.
فیدبک گرفتن سهل و آسان: به جای ادغام کردن عملکرد کلی، لی‌اوت و المان‌های خلاقانه در یک مرحله، وایرفریم تضمین می‌کند که این ملاحظات به صورت جداگانه مد نظر قرار داده خواهند شد و این مسئله به اعضای تیم اجازه می‌دهد تا سریع‌تر در روند کاری خود فیدبک دریافت کنند (لازم به ذکر است که ایجاد وایرفریم با استفاده از نرم‌افزار، پروسه فیدبک گرفتن در طراحی را بسیار آسان‌تر می‌کند.)
ارزش وایرفریمها در پروسه طراحی اپلیکیشن
وایرفریم تمام افراد دخیل در توسعه یک اپلیکیشن، خواه اپلیکیشن موبایل و خواه وب اپلیکیشن، را متفق‌القول می‌کند اما سوال اینجا است که این اتفاق‌نظر چه سودی دارد؟ جنبه‌های مثبت زیادی در این باره وجود دارد مثلاً اینکه طراحی‌ها با دقت بیشتری انجام می‌شوند و تیم توسعه درک عمیق‌تری از آنچه می‌سازد دارد. با تمام این‌ها، استفاده از وایرفریم در نهایت برای توسعه وب‌سایت و اپلیکیشن چه سودی به همراه دارد؟ پاسخ کوتاه این است که موجب صرفه‌جویی در وقت و هزینه می‌شود.
استفاده از وایرفریم و ارتباطش با طراحی رابط کاربری و تجربه کاربری
طراحی تجربه کاربری (UX): راه‌کاری برای افزایش وفاداری و رضایت کاربران بواسطه بهبود کاربردپذیری محصول و لذت بردن از تعاملی است که میان کاربر با سایت یا اپ شکل می‌گیرد. طراحی رابط کاربری (UI) نیز بیشتر شبیه به طراحی گرافیک است اما سازوکار پیاده‌سازی آن به مراتب متفاوت‌تر و پیچیده‌تر است . به طور کلی، طراحی تجربه کاربری مقدم بر طراحی رابط کاربری است به طوری که طراحی یوایکس (UX) و یوآی (UI) بایستی در پروسه طراحی وایرفریم با یکدیگر هم‌پوشانی داشته باشند. برخی از مهم‌ترین مسائلی که در این بین باید روی آن‌ها تمرکز داشت عبارتند از:
معماری اطلاعات و وایرفریمها: وظیفه Information Architecture معماری اطلاعات یا به اختصار( IA )در توسعه و وایرفریمینگ وب‌سایت، چیدمان و اولویت‌بندی اطلاعات به طریقی است که توسط کاربران سایت یا اپ موبایل ملموس باشد. در پروسه طراحی وب بر اساس اصول معماری اطلاعات، چند اِلِمان پایه‌ای دخیل هستند که عبارتند از:
– دسته‌بندی و ساختاربندی اطلاعات
– ارائه اطلاعات
– جابه‌جایی در میان خیل انبوه اطلاعات
– جست‌وجو و یافتن اطلاعات
روی نوعی از معماری اطلاعات می‌توان برچسب خوب زد که آنالیز جامعی از کسب‌وکار به منظور توسعه استراتژی محتوا بر اساس ساختار، محتوا و دیزاین مرتبط با اهداف شرکت شکل گرفته باشد که برای تایید صحت پروسه آنالیز، وایرفریمها به عنوان یکی از اولین گام‌ها مهم تلقی می‌شوند.
به نوعی می‌توان گفت که پروتوتایپ و وایرفریم بهترین راه برای فیدبک گرفتن از کاربران در اوایل پروسه طراحی بوده که به جلوگیری از صرف هزینه‌های سنگین برای بازطراحی اپلیکیشن پس از لانچ ایده کمک می‌کنند؛ تست اپ از طریق پروتوتایپ و وایرفریم همچنین به شما کمک می‌کنند تا طراحی‌های مختلف را از لحاظ عملکرد از یکسو و همچنین نقطه‌نظرات کاربران از سوی دیگر مورد ارزیابی قرار داده و دست آخر ایده‌ای که از میان آن‌ها از همه بهتر است را انتخاب کنید.
طراحی نویگیشن و وایرفریمها: سیستم نویگیشن شامل مجموعه‌ای از المان‌های روی صفحه است که به کاربر اجازه رفتن از صفحه‌ای به صفحه دیگر را می‌دهد. طراحی نویگشن باید رابطه میان لینک‌ها و عملکرد آن‌ها را به وضوح نشان دهد تا کاربر بداند برای جابه‌جایی میان صفحات چه گزینه‌هایی پیش روی خود دارد (معمولاً وب‌سایت‌ها سیستم‌های نویگیشن زیادی دارند.)
طراحی رابط کاربری و وایرفریمها: طراحی رابط کاربری (UI) شامل انتخاب و تنظیم اِلِمان‌های روی صفحه به نحوی است که تعامل کاربران با فیچرهای مختلف اپلیکیشن را با حداکثر کارآمدی و سهولت مسیر کند. اِلِمان‌های رایج در پروسه طراحی رابط کاربری شامل دکمه‌ها، فیلدهای ورود متن، چک‌باکس‌ها، منو‌ها و … می‌شوند.
انواع وایرفریمها
چهار نوع وایرفریم مختلف وجود دارد که از ساده‌ترین نوع (سیاه‌سفید) تا پیچیده‌ترین نوع (که تقریباً همچون خروجی نهایی طرح واقعی است) در دسترس هستند که در ادامه به معرفی تک‌تک آن‌ها خواهیم پرداخت:
Basic Wireframes: این وایرفریمها که تحت عنوان Low-fidelity Rendering نیز شناخته می‌شوند، طرح شِماتیک ساده‌ای از صفحه هستند که معمولاً به رنگ‌های سیاه و سفید می‌باشند.
Annotated Wireframes: در این نوع وایرفریمها، طیف گسترده‌ای از جزئیات به یک وایرفریم معمولی اضافه می‌شود که این جزئیات نوشته‌هایی کوتاه هستند که عموماً در کنار یا پایان وایرفریم نوشته شده و توصیف‌کننده هر آیتم در وایرفریم هستند و به طور خلاصه نشان‌دهنده دلیل و هدف از ایجاد هر آیتم می‌باشند.
User-Flow Wireframes: هنگامی که یادداشت‌نویسی برای نشان دادن نحوه حرکت منطقی کاربر سایت یا اپلیکیشن میان محتوا و از صفحه‌ای به صفحه دیگر کافی نباشد، به اطلاعات بیشتری احتیاج است که برای همین منظور، این دست وایرفریمها می‌توانند نما‌هایی استاتیک از یک وایرفریم کاملاً تعاملی باشند، اما ممکن است برای نشان دادن جریان اصلی یا مجموعه‌ای از تعاملات فرضی کاربران، حاوی اسلایدشو یا مجموعه‌ای از وایرفریم‌های متوالی هم باشند.
Interactive High-Definition Wireframes: اضافه کردن نحوه تعامل کاربر با نرم‌افزار (مثل ضربه زدن، کلیک و درگ & دراپ) پیش از شروع پروسه طراحی ماکاپ، باعث ساعت‌ها صرفه‌جویی در وقت طراحان و توسعه‌دهندگان می‌شود که این شکل از تغییرپذیری وایرفریمها تنها در طراحی گرافیکی یا نرم‌افزار وایرفریمینگ و پروتوتایپینگ شدنی است.
سخن آخر
اگر مقاله تاثیر رابط و تجربه کاربری بر سئوی سایت را خوانده باشید، متوجه لزوم طراحی مناسب سایت و جاگیری صحیح المان ها و آیتم های مختلف و همچنین زیبایی صفحه وب سایت یا اپلیکیشن خواهید شد. بنابراین برای اینکه طراحی سایت خوبی داشته باشید باید به اولین قدم طراحی که همان وایر فریمینگ هست اهمیت بیشتری بدهید.