پیش از اینکه طراحی یک صفحه وب را با انتخاب رنگ، تصویر و جزئیات ظاهری شروع کنیم، باید مشخص باشد کاربر قرار است چه اطلاعاتی را پیدا کند و چه کاری انجام دهد. اگر این تصمیم‌ها روشن نباشند، ممکن است صفحه‌ای خوش‌ظاهر طراحی کنیم که اطلاعات مهم در آن به‌سختی پیدا شوند یا مسیر انجام کار مبهم باشد. آموزش طراحی وایرفریم کمک می‌کند پیش از پرداختن به ظاهر نهایی، ساختار صفحه را مشخص و بررسی کنیم.
در این مقاله، طراحی یک صفحه فرضی معرفی دوره HTML را دنبال می‌کنیم؛ از تعیین هدف و اولویت اطلاعات گرفته تا ترسیم وایرفریم کاغذی، ساخت نسخه دیجیتال برای موبایل و دسکتاپ و اصلاح طرح اولیه. در پایان می‌توانید یک وایرفریم ساده بسازید و توضیح دهید چرا هر بخش را در جای مشخصی قرار داده‌اید. برای شروع، ابتدا باید بدانیم وایرفریم چه نقشی در فرایند طراحی دارد و چه تفاوتی با طرح نهایی صفحه دارد.
وایرفریم چیست و چه تفاوتی با طراحی نهایی صفحه دارد؟
وایرفریم (Wireframe) طرحی اولیه از ساختار یک صفحه وب یا اپلیکیشن است که نشان می‌دهد بخش‌های مختلف محتوا، عناصر رابط کاربری و مسیرهای اصلی تعامل چگونه کنار یکدیگر قرار می‌گیرند. در این مرحله، به‌جای انتخاب رنگ، فونت یا تصاویر نهایی، روی سازمان‌دهی اطلاعات و جایگاه عناصر تمرکز می‌کنیم تا پیش از اجرای طراحی، ساختار پیشنهادی صفحه را بررسی و اصلاح کنیم.
برای مثال، در صفحه معرفی یک دوره آموزشی باید مشخص شود کاربر ابتدا چه اطلاعاتی می‌بیند، بخش‌های معرفی دوره کجا قرار می‌گیرند و از چه مسیری به ثبت‌نام می‌رسد. وایرفریم این تصمیم‌ها را با کادرها، خطوط و عنوان‌های ساده روی کاغذ یا در ابزار دیجیتال نشان می‌دهد.
وایرفریم یکی از خروجی‌های فرایند طراحی تجربه کاربری است، اما به‌تنهایی نشان نمی‌دهد که تجربه نهایی کاربران موفق خواهد بود. این طرح، پیشنهادی اولیه برای ساختار و تعاملات صفحه است که می‌توان آن را بررسی کرد و بر اساس بازخورد یا شواهد معتبر تغییر داد.
وایرفریم چه اطلاعاتی را نشان می‌دهد؟
یک وایرفریم باید به بیننده کمک کند ساختار صفحه را بدون نیاز به دیدن طراحی گرافیکی نهایی درک کند. مهم‌ترین اطلاعاتی که در آن نمایش داده می‌شوند عبارت‌اند از:
- چیدمان عناصر: جایگاه بخش‌هایی مانند سربرگ، منو، عنوان اصلی، محتوای صفحه و دکمه‌های مهم.
- سلسله‌مراتب اطلاعات: اینکه کدام اطلاعات باید برجسته‌تر باشند و بخش‌های مختلف چه ارتباطی با یکدیگر دارند.
- عناصر اصلی تعامل: محل دکمه‌ها، فرم‌ها، لینک‌ها و کنترل‌هایی که کاربر برای انجام کار خود به آن‌ها نیاز دارد.
- مسیرهای احتمالی حرکت کاربر: ارتباط بخش‌ها یا صفحه‌ها و نتیجه مورد انتظار از انتخاب عناصر تعاملی، در صورت نیاز با یادداشت یا پیکان.
مثلاً در وایرفریم صفحه معرفی دوره می‌توان محل دکمه «شروع ثبت‌نام» را مشخص کرد و کنارش نوشت «انتقال به مرحله ثبت‌نام». این یادداشت، نقش دکمه را بدون پیاده‌سازی عملکرد آن روشن می‌کند.
کادرها و خطوط ساده کافی‌اند، اما نام بخش‌ها باید روشن باشد؛ مثلاً کادر «پیش‌نیازهای دوره» از مستطیلی بدون عنوان گویاتر است.
تفاوت وایرفریم با ماکاپ و پروتوتایپ چیست؟
در طراحی سایت، اصطلاحات وایرفریم، ماکاپ (Mockup) و پروتوتایپ (Prototype) گاهی به‌جای یکدیگر استفاده می‌شوند؛ درحالی‌که هرکدام برای پاسخ‌دادن به پرسش متفاوتی کاربرد دارند.
| نوع طرح | هدف اصلی | ویژگی شاخص |
|---|---|---|
| وایرفریم | مشخص‌کردن ساختار و جایگاه اطلاعات | نمایش ساده چیدمان و عناصر اصلی |
| ماکاپ | نمایش ظاهر پیشنهادی صفحه | استفاده از رنگ، تایپوگرافی، تصاویر و جزئیات بصری |
| پروتوتایپ | شبیه‌سازی و بررسی تعاملات | امکان تجربه یا شبیه‌سازی رفتار صفحه پیش از توسعه |
در وایرفریم مشخص می‌کنیم عنوان دوره، اطلاعات آموزشی و دکمه ثبت‌نام در چه قسمت‌هایی قرار بگیرند. در ماکاپ ظاهر همین ساختار را با رنگ‌ها، فونت‌ها، تصاویر و جزئیات گرافیکی نمایش می‌دهیم. در پروتوتایپ می‌توانیم تعاملاتی مانند انتخاب دکمه ثبت‌نام و رفتن به صفحه بعد را شبیه‌سازی کنیم تا مسیر طراحی‌شده قابل بررسی باشد.
البته مرز این خروجی‌ها همیشه کاملاً ثابت نیست. برای مثال، می‌توان یک وایرفریم ساده را به نسخه‌ای قابل کلیک تبدیل کرد یا پیش از تکمیل جزئیات بصری، پروتوتایپی اولیه ساخت. بنابراین تفاوت اصلی را باید در هدف هر طرح جست‌وجو کرد، نه صرفاً رنگی‌بودن، میزان جزئیات یا نرم‌افزاری که با آن ساخته شده است.
اگر هنوز ترتیب و جایگاه اطلاعات صفحه روشن نیست، وایرفریم نقطه شروع مناسبی است.
قبل از طراحی وایرفریم، چه چیزهایی باید مشخص شوند؟
پیش از ترسیم وایرفریم باید بدانیم صفحه برای چه کسی طراحی می‌شود، قرار است چه مسئله‌ای را حل کند و کاربر برای انجام کارش به چه اطلاعاتی نیاز دارد. خروجی این مرحله یک صورت‌مسئله کوتاه است؛ تعیین جای دقیق عناصر و اندازه بخش‌ها را به مراحل بعد می‌سپاریم.
هدف صفحه و نیاز مخاطب در مثال دوره آموزشی
فرض کنید می‌خواهیم برای یک دوره فرضی آموزش HTML صفحه معرفی طراحی کنیم. مخاطب اصلی ما فردی است که قصد یادگیری HTML را دارد، اما هنوز نمی‌داند این دوره با سطح دانش و نیازهایش سازگار است یا نه.
چنین کاربری احتمالاً پیش از ثبت‌نام می‌خواهد بداند چه مباحثی آموزش داده می‌شوند، آیا به دانش قبلی نیاز دارد، شیوه برگزاری دوره چگونه است و برای شرکت در آن چه شرایطی وجود دارد.
در این سناریو، هدف کاربر تصمیم‌گیری آگاهانه درباره انتخاب دوره است. در مقابل، هدف صفحه این است که اطلاعات لازم برای این تصمیم را در دسترس او قرار دهد و اگر دوره مناسب بود، مسیر شروع ثبت‌نام را برایش روشن کند.
اگر فقط بر ثبت‌نام تأکید کنیم، ممکن است پیش از پاسخ‌دادن به پرسش‌های اصلی کاربر، او را به اقدام دعوت کنیم. بنابراین باید نیاز اطلاعاتی مخاطب و نتیجه مورد انتظار از صفحه روشن باشد.
اطلاعات ضروری، محدودیت‌ها و مسیر مورد انتظار کاربر
پس از تعیین هدف و مخاطب، نوبت مشخص‌کردن اطلاعاتی است که صفحه باید در اختیار کاربر بگذارد. در مثال دوره آموزشی، این اطلاعات می‌توانند شامل معرفی دوره، سطح آموزش، پیش‌نیازها، سرفصل‌های اصلی، شیوه برگزاری و شرایط ثبت‌نام باشند. مدت دوره و هزینه نیز درصورتی‌که برای این دوره مطرح باشند، می‌توانند بر تصمیم مخاطب تأثیر بگذارند.
فعلاً مشخص می‌کنیم کدام اطلاعات برای تصمیم کاربر ضروری‌اند، کدام تکمیلی‌اند و چه مواردی هنوز نامشخص‌اند. اولویت و جایگاه آن‌ها را در بخش بعد تعیین می‌کنیم.
در کنار محتوا، باید محدودیت‌های پروژه را هم بشناسیم. برای مثال، آیا صفحه باید در موبایل و دسکتاپ قابل استفاده باشد؟ آیا ثبت‌نام در همین صفحه انجام می‌شود یا کاربر به صفحه دیگری منتقل خواهد شد؟ آیا اطلاعات دوره نهایی شده‌اند یا بخشی از آن‌ها هنوز باید تکمیل شوند؟
پاسخ این پرسش‌ها بر تصمیم‌های ساختاری بعدی اثر می‌گذارد. اگر اطلاعاتی مانند قیمت، مدت دوره یا مقصد دکمه ثبت‌نام هنوز مشخص نیست، باید آن را به‌عنوان یک مورد نامعلوم ثبت کنیم؛ نه اینکه برای تکمیل طرح، اطلاعاتی فرضی را به جای واقعیت قرار دهیم.
موضوع دیگر، مسیر مورد انتظار کاربر است. در سناریوی ما، کاربر باید بتواند ابتدا موضوع و تناسب دوره با نیازش را تشخیص دهد، اطلاعات لازم را بررسی کند و در صورت تمایل، راه شروع ثبت‌نام را پیدا کند. این مسیر فعلاً توصیف کارهایی است که کاربر می‌خواهد انجام دهد، نه نقشه نهایی چیدمان صفحه.
برای جمع‌بندی این مرحله، یک برگه کوتاه پیش از ترسیم وایرفریم آماده می‌کنیم:
- مخاطب اصلی: فرد علاقه‌مند به یادگیری HTML که می‌خواهد مناسب‌بودن دوره را بررسی کند.
- هدف صفحه: کمک به انتخاب آگاهانه دوره و فراهم‌کردن مسیر روشن برای شروع ثبت‌نام.
- اطلاعات موردنیاز: معرفی دوره، سطح، پیش‌نیازها، سرفصل‌ها، شیوه برگزاری و شرایط ثبت‌نام؛ همراه با مشخص‌کردن اطلاعات تأییدشده و موارد نامعلوم.
- محدودیت‌ها و مسیر کاربر: درنظرگرفتن نمایش موبایل و دسکتاپ، مشخص‌کردن محل انجام ثبت‌نام و تعریف کارهایی که مخاطب باید بتواند در صفحه انجام دهد.
این صورت‌مسئله، ورودی مرحله بعد است: تعیین اولویت اطلاعات و ترتیب بخش‌های صفحه.
چگونه ساختار و ترتیب بخش‌های صفحه را تعیین کنیم؟
با صورت‌مسئله بخش قبل، باید تصمیم بگیریم کدام اطلاعات زودتر دیده شوند و بخش‌ها چه ترتیبی داشته باشند. معیار این تصمیم نیاز کاربر برای انتخاب دوره است، نه صرفاً فضای موجود در صفحه. ابتدا اطلاعات را اولویت‌بندی می‌کنیم و سپس برای جایگاه هر بخش دلیل می‌آوریم.
اولویت‌بندی اطلاعات دوره آموزشی
برای اولویت‌بندی محتوا، از فهرستی استفاده می‌کنیم که در مرحله قبل تهیه کردیم. این بار برای هر مورد می‌پرسیم: این اطلاعات به کدام سؤال کاربر پاسخ می‌دهد و اگر به‌راحتی پیدا نشود، چه چیزی در تصمیم‌گیری او مبهم می‌ماند؟
در مثال دوره HTML، می‌توانیم اطلاعات را در سه گروه قرار دهیم:
- اطلاعات لازم برای تشخیص تناسب دوره: عنوان و معرفی کوتاه دوره، مخاطبان هدف، سطح آموزش و پیش‌نیازهای تعیین‌کننده. این موارد به کاربر کمک می‌کنند بفهمد آیا اساساً دوره برای او مناسب است یا نه.
- اطلاعات لازم برای بررسی و انتخاب: سرفصل‌های اصلی، مهارت‌هایی که قرار است آموزش داده شوند، شیوه برگزاری و جزئیات مرتبط با دوره. این اطلاعات به کاربر کمک می‌کنند ارزش و تناسب محتوای آموزشی را دقیق‌تر بررسی کند.
- اطلاعات و عناصر مربوط به اقدام: شرایط ثبت‌نام، هزینه در صورت وجود و دکمه‌ای که کاربر را به مرحله بعد هدایت می‌کند. این بخش باید زمانی در دسترس باشد که کاربر برای اقدام اطلاعات کافی در اختیار دارد.
این سه گروه، ترتیب ثابتی برای نمایش ندارند. اگر دانستن پیش‌نیاز برای تشخیص مناسب‌بودن دوره ضروری است، نباید فقط در انتهای صفحه پنهان بماند. برای هر جایگاه نیز دلیلی ثبت کنید؛ مثلاً «سطح دوره زودتر دیده شود تا کاربر تناسب آن را با دانش خود تشخیص دهد.»
تعیین جایگاه عنوان، معرفی دوره، سرفصل‌ها، پیش‌نیازها و ثبت‌نام
حالا که اهمیت اطلاعات مشخص شده، می‌توانیم آن‌ها را به بخش‌های اصلی صفحه تبدیل کنیم. برای صفحه فرضی دوره HTML، یک ترتیب اولیه به این شکل قابل بررسی است:
۱. ابتدای صفحه: معرفی و تشخیص تناسب دوره
در بخش آغازین، عنوان دوره، معرفی کوتاه، سطح آموزش و مخاطبان هدف را قرار می‌دهیم تا کاربر سریع‌تر تناسب اولیه دوره را تشخیص دهد. اگر پیش‌نیازی بر امکان شرکت اثر می‌گذارد، همان‌جا به آن اشاره می‌کنیم.
۲. بخش اصلی محتوا: آنچه کاربر قرار است یاد بگیرد
سرفصل‌های اصلی و مهارت‌های مورد انتظار را گروه‌بندی می‌کنیم تا کاربر بتواند درباره محتوای دوره تصمیم بگیرد. توضیحات جزئی‌تر هر گروه می‌تواند در ادامه همان بخش بیاید.
۳. اطلاعات تکمیلی: شرایط شرکت در دوره
شیوه برگزاری، مدت دوره در صورت مشخص‌بودن، پیش‌نیازها و شرایط شرکت را در بخش تکمیلی می‌آوریم. اطلاعات حیاتی برای تشخیص تناسب دوره باید در معرفی اولیه نیز قابل شناسایی باشند.
۴. بخش اقدام: مسیر مشخص برای شروع ثبت‌نام
پس از ارائه اطلاعات لازم برای تصمیم‌گیری، باید مسیر ثبت‌نام روشن باشد. دکمه این بخش باید با عبارتی مشخص مانند «شروع ثبت‌نام» نشان دهد چه اقدامی انجام می‌شود.
لازم نیست دکمه ثبت‌نام فقط در انتهای صفحه قرار بگیرد. اگر بخشی از مخاطبان از قبل دوره را انتخاب کرده‌اند، می‌توان دسترسی به اقدام اصلی را در محدوده معرفی اولیه هم پیش‌بینی کرد. بااین‌حال، وجود دکمه نباید جای اطلاعات ضروری برای تصمیم‌گیری را بگیرد.
این ترتیب برای پروژه فرضی ما پیشنهاد اولیه است و با تغییر نیاز مخاطب می‌تواند عوض شود. پیش از ترسیم وایرفریم، از نگاه کاربر تازه‌وارد بررسی کنید: آیا عنوان و سطح دوره، محتوای آموزش، شرایط شرکت و مسیر ثبت‌نام به‌سادگی پیدا می‌شوند؟ اگر نه، ترتیب بخش‌ها را اصلاح کنید.
خروجی این مرحله فهرست مرتب بخش‌ها همراه با دلیل جایگاه هرکدام است؛ مبنای ترسیم وایرفریم کاغذی در بخش بعد.
آموزش گام‌به‌گام طراحی وایرفریم کاغذی صفحه دوره
برای طراحی اولین وایرفریم صفحه فرضی دوره HTML، فقط به یک برگه کاغذ، مداد و پاک‌کن نیاز دارید. در این تمرین، جای بخش‌های اصلی و ارتباط آن‌ها را با کادر، خط و عنوان‌های کوتاه مشخص می‌کنیم؛ نه رنگ و ظاهر نهایی صفحه.
ترسیم قاب صفحه و چیدمان بخش‌های اصلی
برای شروع، یک برگه A4 را به‌صورت افقی روی میز قرار دهید. در این تمرین ابتدا نمای دسکتاپ صفحه معرفی دوره را طراحی می‌کنیم و تبدیل آن به نسخه موبایل را در بخش بعدی مقاله بررسی خواهیم کرد.
گام اول: محدوده صفحه را مشخص کنید.
یک مستطیل بزرگ روی کاغذ بکشید تا محدوده طرح صفحه وب مشخص شود. لازم نیست اندازه آن دقیق یا متناسب با نمایشگر خاصی باشد. فعلاً می‌خواهیم فضای کلی را برای قرارگیری بخش‌های مختلف در اختیار داشته باشیم.
گام دوم: سربرگ و بخش معرفی اولیه را رسم کنید.
بالای مستطیل، یک نوار افقی برای سربرگ سایت بکشید. داخل آن، جای لوگو و مسیرهای اصلی ناوبری را با چند کادر یا عنوان کوتاه مشخص کنید.
زیر سربرگ، فضای بزرگ‌تری برای معرفی دوره در نظر بگیرید. در این محدوده، جای عنوان «دوره آموزش HTML»، توضیح کوتاه، سطح دوره و اطلاعات ضروری برای تشخیص تناسب آن را مشخص کنید.
می‌توانید کنار این اطلاعات، یک کادر برای تصویر معرفی دوره قرار دهید. فعلاً کافی است داخل آن بنویسید «تصویر دوره»؛ نیازی به ترسیم تصویر واقعی نیست.
گام سوم: بخش‌های محتوایی را اضافه کنید.
در ادامه طرح، محدوده‌ای برای سرفصل‌های دوره بکشید و پایین‌تر، جای اطلاعات تکمیلی مانند شیوه برگزاری و شرایط شرکت را مشخص کنید.
اگر بخش‌ها در یک برگه جا نشدند، طرح را در برگه دوم ادامه دهید و اتصال دو برگه را علامت بزنید. لازم نیست همه محتوای یک صفحه قابل پیمایش را در یک قاب فشرده کنید.
گام چهارم: محل اقدام اصلی را مشخص کنید.
کادری با عنوان «شروع ثبت‌نام» در بخش مربوط به اقدام قرار دهید. بر اساس تصمیم مرحله قبل، می‌توانید محل دیگری برای دسترسی به همین اقدام در محدوده معرفی اولیه نیز پیش‌بینی کنید.
جایگاه دکمه در این وایرفریم فقط یک پیشنهاد اولیه است و هنوز بر اساس رفتار واقعی کاربران ارزیابی نشده است.
تا اینجا باید محدوده معرفی، سرفصل‌ها، اطلاعات تکمیلی و ثبت‌نام در طرح دیده شوند.
مشخص‌کردن محتوای هر بخش و عملکرد دکمه‌ها
پس از ترسیم اسکلت صفحه، باید مشخص کنیم هر کادر نماینده چه اطلاعاتی است و عناصر تعاملی چه کاری انجام می‌دهند. این مرحله کمک می‌کند وایرفریم فقط مجموعه‌ای از مستطیل‌های نامشخص نباشد و فرد دیگری نیز بتواند منظور شما را از طرح درک کند.
گام پنجم: به کادرها عنوان و محتوای راهنما اضافه کنید.
داخل هر کادر، عنوان مشخصی بنویسید. برای بخش‌هایی که قرار است متن داشته باشند، می‌توانید از چند خط ساده برای نشان‌دادن فضای تقریبی محتوا استفاده کنید؛ اما در قسمت‌های مهم، بهتر است عنوان واقعی بخش را بنویسید.
برای مثال، به‌جای اینکه تمام محدوده معرفی دوره را با خطوط خالی پر کنید، عنوان دوره، عبارت «مناسب چه کسانی است؟» و محل نمایش سطح آموزش را مشخص کنید. در بخش سرفصل‌ها نیز می‌توانید از عنوان‌هایی مانند «ساختار سند HTML» و «آشنایی با تگ‌های HTML» به‌عنوان محتوای نمونه استفاده کنید.
اگر اطلاعاتی مانند مدت دوره یا هزینه هنوز تعیین نشده‌اند، کادر آن‌ها را با یادداشت «نیازمند تعیین اطلاعات» مشخص کنید. به این ترتیب، وایرفریم وجود یک نیاز محتوایی را نشان می‌دهد، بدون اینکه داده‌ای ساختگی را به‌عنوان مشخصات قطعی دوره نمایش دهد.
گام ششم: عملکرد عناصر تعاملی را یادداشت کنید.
روی کاغذ، به‌جای اجرای تعامل، رفتار مورد انتظار هر عنصر مهم را کنار آن یادداشت کنید.
برای نمونه، کنار دکمه «شروع ثبت‌نام» یک پیکان کوچک بکشید و بنویسید «انتقال به صفحه ثبت‌نام». اگر قرار است انتخاب یکی از عنوان‌های فهرست سرفصل‌ها، توضیحات بیشتری را باز کند، همین رفتار را نیز با یک یادداشت کوتاه مشخص کنید.
البته فقط تعاملاتی را ثبت کنید که واقعاً برای طرح پیش‌بینی شده‌اند. اگر مقصد یا رفتار عنصری هنوز مشخص نیست، آن را به‌صورت یک تصمیم باز علامت بزنید.
گام هفتم: طرح را از دید کاربر مرور و یک اصلاح انجام دهید.
در نقش کسی که برای اولین بار صفحه را می‌بیند، بدون توضیح شفاهی طراح بررسی کنید: آیا عنوان و سطح دوره، سرفصل‌ها، شرایط شرکت و مسیر ثبت‌نام پیدا می‌شوند؟
اگر موردی مبهم است، آن را علامت بزنید؛ مثلاً عنوان «پیش‌نیازهای دوره» را واضح‌تر کنید یا جای آن را تغییر دهید. کنار طرح بنویسید چه چیزی تغییر کرد و چرا.
این بازبینی اولیه توسط طراح جای تست کاربردپذیری با کاربران واقعی را نمی‌گیرد و موفقیت تجربه کاربر را اثبات نمی‌کند.
خروجی این تمرین یک وایرفریم کاغذی با بخش‌های نام‌گذاری‌شده، عناصر تعاملی و یادداشت رفتار مورد انتظار آن‌هاست. باید بتوانید دلیل دست‌کم یک تصمیم ساختاری و یک اصلاح را توضیح دهید. در بخش بعد همین طرح را به نسخه دیجیتال موبایل و دسکتاپ تبدیل می‌کنیم.
چگونه وایرفریم کاغذی را به نسخه دیجیتال تبدیل کنیم؟
وایرفریم کاغذی دوره HTML را در یک ابزار طراحی مانند فیگما (Figma) بازسازی می‌کنیم تا جابه‌جایی عناصر، تغییر اندازه بخش‌ها و تهیه نسخه موبایل و دسکتاپ آسان‌تر شود. برای این تمرین، ساخت قاب (Frame)، مستطیل و متن کافی است؛ به طراحی بصری نهایی یا قابلیت‌های پیشرفته نرم‌افزار نیاز نداریم.
بازسازی ساختار با قاب‌ها، شکل‌ها و متن‌های راهنما
وایرفریم کاغذی را کنار صفحه نمایش قرار دهید و یک فایل طراحی جدید باز کنید. بهتر است ابتدا نسخه دسکتاپ را بازسازی کنیم؛ چون طرح کاغذی مرحله قبل نیز برای همین نما آماده شده است.
گام اول: قاب اصلی صفحه را بسازید.
برای نسخه دسکتاپ یک قاب (Frame) بسازید؛ مثلاً با عرض ۱۴۴۰ پیکسل. این اندازه فقط یک انتخاب تمرینی است. ارتفاع قاب را متناسب با محتوای صفحه افزایش دهید؛ لازم نیست همه بخش‌های یک صفحه طولانی در ارتفاع اولیه نمایشگر جا بگیرند.
گام دوم: بخش‌های اصلی را با شکل‌های ساده بازسازی کنید.
با استفاده از مستطیل‌ها، محدوده سربرگ، معرفی دوره، سرفصل‌ها، اطلاعات تکمیلی و بخش ثبت‌نام را مطابق ترتیب تأییدشده مشخص کنید.
برای مثال، در بخش معرفی دوره می‌توانید دو محدوده کنار هم قرار دهید؛ یکی برای عنوان، توضیحات و اطلاعات اصلی، و دیگری برای تصویر دوره. در بخش سرفصل‌ها نیز چند مستطیل ساده می‌توانند نماینده گروه‌های محتوایی باشند.
اندازه و فاصله‌ها را طوری تنظیم کنید که مرز و ارتباط بخش‌ها قابل‌تشخیص باشند.
گام سوم: متن‌های راهنما را جایگزین کادرهای مبهم کنید.
با ابزار متن، عنوان بخش‌های مهم را داخل محدوده‌های مربوط قرار دهید. برای نمونه، عبارت‌های «دوره آموزش HTML»، «این دوره برای چه کسانی مناسب است؟»، «سرفصل‌های آموزشی» و «شرایط شرکت در دوره» می‌توانند جایگاه محتوای صفحه را روشن کنند.
برای توضیح‌های هنوز نهایی‌نشده از چند خط راهنما استفاده کنید؛ اما عنوان‌ها و اطلاعات تعیین‌کننده باید روشن باشند. موارد نامشخص را مانند نسخه کاغذی با یادداشت «نیازمند تعیین اطلاعات» علامت بزنید.
گام چهارم: عناصر تعاملی و تصمیم‌های باز را مشخص کنید.
جایگاه دکمه «شروع ثبت‌نام» و یادداشت عملکرد آن را از نسخه کاغذی منتقل کنید؛ مثلاً «انتقال به صفحه ثبت‌نام». اگر مقصد هنوز مشخص نیست، آن را به‌عنوان تصمیم باز علامت بزنید.
قاب دیجیتال را با طرح کاغذی مقایسه کنید: هیچ بخش ضروری نباید بی‌دلیل حذف شده باشد. اگر چیدمان را تغییر می‌دهید، دلیل آن را ثبت کنید. اکنون نسخه دسکتاپ برای تطبیق با موبایل آماده است.
تطبیق وایرفریم برای نمایش موبایل و دسکتاپ
برای نسخه موبایل، قاب دیگری کنار قاب دسکتاپ ایجاد کنید؛ مثلاً با عرض ۳۹۰ پیکسل. این فقط اندازه تمرینی است، نه تضمین مناسب‌بودن طرح برای همه گوشی‌ها. طرح دسکتاپ را صرفاً کوچک نکنید؛ در فضای باریک‌تر ممکن است لازم باشد ستون‌ها و ترتیب نمایش بعضی عناصر تغییر کنند.
اگر در دسکتاپ تصویر و اطلاعات دوره کنار هم هستند، در موبایل می‌توانید آن‌ها را زیر هم قرار دهید: ابتدا عنوان و اطلاعات تعیین‌کننده مانند سطح دوره، سپس توضیح کوتاه و در ادامه تصویر. البته جایگاه تصویر به نقش آن در تصمیم کاربر بستگی دارد.
همین منطق را برای سرفصل‌ها و اطلاعات تکمیلی دنبال کنید. اگر چند گروه محتوایی در دسکتاپ کنار هم قرار گرفته‌اند، در موبایل می‌توانند زیر یکدیگر نمایش داده شوند. بااین‌حال، تغییر چیدمان نباید باعث حذف اطلاعات ضروری یا دشوارشدن دسترسی به آن‌ها شود.
به مسیر ثبت‌نام نیز توجه کنید. اگر دکمه اصلی در نسخه موبایل میان بخش‌های طولانی گم می‌شود، جایگاه آن را دوباره بررسی کنید. می‌توانید دسترسی به اقدام اصلی را در محدوده معرفی اولیه نیز پیش‌بینی کنید، اما این تصمیم همچنان باید در مراحل بررسی و ارزیابی طرح سنجیده شود.
اگر در نسخه موبایل ناوبری سایت را فشرده می‌کنید، مثلاً به‌جای چند لینک از یک دکمه منو استفاده می‌کنید، عملکرد مورد انتظار آن را با یادداشت مشخص کنید. در غیر این صورت، مشخص نخواهد بود کاربر چگونه به مسیرهای ناوبری دسترسی پیدا می‌کند.
در پایان، دو قاب را «دسکتاپ» و «موبایل» نام‌گذاری و کنار هم بررسی کنید: آیا اطلاعات ضروری در هر دو وجود دارند، ترتیب بخش‌ها با هدف کاربر سازگار است، نسخه موبایل به پیمایش افقی غیرضروری نیاز ندارد و مسیر ثبت‌نام پیدا می‌شود؟
خروجی قابل‌تحویل این بخش یک فایل قابل‌ویرایش با دو قاب نام‌گذاری‌شده، یادداشت عملکرد عناصر مهم و توضیح کوتاه درباره تغییر چیدمان در موبایل است. این وایرفریم‌ها هنوز عملکرد واقعی در مرورگر یا رفتار کاربران را اثبات نمی‌کنند؛ بررسی دقیق‌تر ساختار در بخش بعد انجام می‌شود.
چگونه وایرفریم را بررسی و اصلاح کنیم؟
حالا باید وایرفریم‌های موبایل و دسکتاپ دوره HTML را از نظر دسترسی به اطلاعات ضروری و وضوح مسیر ثبت‌نام بررسی کنیم. در این مرحله، یک سناریوی مشخص را مرور می‌کنیم، ایرادهای احتمالی را ثبت می‌کنیم و درباره اصلاح ساختار تصمیم می‌گیریم.
بررسی سناریوی پیدا کردن اطلاعات دوره و رسیدن به ثبت‌نام
برای اینکه بررسی فقط به قضاوت درباره ظاهر مرتب صفحه محدود نشود، یک وظیفه مشخص تعریف می‌کنیم. سناریوی صفحه فرضی دوره HTML این است:
«فرض کنید قصد دارید یادگیری طراحی صفحات وب را با HTML شروع کنید و به دنبال دوره مناسبی هستید. صفحه این دوره را بررسی کنید، ببینید آیا با سطح دانش و نیاز شما سازگار است و اگر تصمیم به شرکت گرفتید، مسیر آغاز ثبت‌نام را پیدا کنید.»
سناریو محل دکمه‌ها را مشخص نمی‌کند. معیار بررسی این است که فرد بتواند سطح و پیش‌نیازها، محتوای آموزشی و شرایط شرکت را پیدا کند و محل شروع ثبت‌نام را تشخیص دهد.
ابتدا خودتان همین مسیر را روی وایرفریم دسکتاپ و سپس موبایل مرور کنید: اطلاعات هر مرحله کجاست و چه ابهامی در عنوان‌ها یا مسیر اقدام وجود دارد؟
اگر فرد دیگری طرح را بررسی می‌کند، سناریو را بدون نشان‌دادن محل عناصر به او بدهید و فقط اقداماتی را ثبت کنید که واقعاً مشاهده می‌کنید؛ مثلاً «ابتدا بخش سرفصل‌ها را نشان داد». این مشاهده محدود ثابت نمی‌کند همه کاربران همان مسیر را ترجیح می‌دهند.
برای ثبت بررسی، چهار ستون کافی است: «وظیفه»، «مسیر یا اقدام مشاهده‌شده»، «ابهام» و «پیشنهاد اصلاح». اگر بررسی با شخص دیگری انجام نشده، ستون مشاهده را با نتیجه فرضی پر نکنید.
بازبینی شخصی، تست کاربردپذیری نیست. وایرفریم غیرتعاملی می‌تواند جای عناصر و مسیر پیشنهادی را نشان دهد، اما عملکرد واقعی ثبت‌نام را آزمایش نمی‌کند. برای مشاهده رفتار کاربران باید بررسی واقعی با شرکت‌کنندگان مناسب و وظایف مشخص انجام شود.
شناسایی ایرادهای احتمالی و مقایسه نسخه اولیه با اصلاح‌شده
هر ایراد احتمالی را به یک نیاز کاربر ربط دهید: پیدا کردن اطلاعات مهم، فهم عنوان بخش یا شناخت مقصد دکمه. جدول زیر سه نمونه کاملاً فرضی برای تمرین اصلاح وایرفریم است، نه نتیجه مشاهده یا تست واقعی.
| نسخه اولیه فرضی | اصلاح پیشنهادی و دلیل آن |
|---|---|
| سطح دوره و پیش‌نیازها فقط در میان توضیحات طولانی قرار دارند. | اطلاعات تعیین‌کننده در محدوده معرفی اولیه نیز مشخص می‌شوند تا مخاطب زودتر بتواند تناسب دوره را بررسی کند. |
| در نسخه موبایل، تصویر بزرگی پیش از اطلاعات اصلی قرار گرفته است. | اگر تصویر برای تصمیم اولیه ضروری نیست، اطلاعات تعیین‌کننده جلوتر قرار می‌گیرند و تصویر به ادامه بخش منتقل می‌شود. |
| دکمه اصلی با عنوان مبهم «ادامه» نمایش داده شده است. | عنوان آن به «شروع ثبت‌نام» تغییر می‌کند و مقصد مورد انتظار دکمه نیز در یادداشت وایرفریم مشخص می‌شود. |
این‌ها اصلاحات پیشنهادی بر پایه منطق محتوا هستند؛ بدون بررسی کاربران واقعی، نمی‌توان گفت نسخه دوم قطعاً کاربردپذیرتر است.
از فایل اولیه یک کپی بگیرید و دو طرح را «نسخه ۱» و «نسخه ۲» نام‌گذاری کنید. فقط بخش‌هایی را تغییر دهید که برایشان دلیل دارید؛ مثلاً «سطح دوره به بالای صفحه منتقل شد تا تناسب آن زودتر مشخص شود». دلیل هر تغییر را کنار نسخه اصلاح‌شده ثبت کنید.
هر اصلاح را در دسکتاپ و موبایل مرور کنید. اگر مشکل تازه‌ای ایجاد شد، آن را اصلاح کنید یا به تصمیم قبلی برگردید. مقایسه باید نشان دهد چه چیزی تغییر کرده و چرا، نه فقط اینکه طرح دوم مرتب‌تر است.
چک‌لیست تکمیل و تحویل وایرفریم
پیش از اینکه وایرفریم را برای طراحی بصری یا بررسی بیشتر تحویل دهید، یک بار خروجی پروژه را با چک‌لیست زیر کنترل کنید:
اگر موردی از چک‌لیست کامل نیست، آن را اصلاح کنید یا به‌عنوان «نیازمند اطلاعات یا بررسی بیشتر» علامت بزنید؛ برای تکمیل ظاهری فایل، اطلاعات نسازید.
خروجی نهایی تمرین شامل وایرفریم موبایل و دسکتاپ، نسخه اولیه و اصلاح‌شده و یادداشت دلایل تغییرات است. با این مجموعه می‌توانید تصمیم‌های ساختاری خود را توضیح دهید و طرح را برای بررسی بیشتر یا طراحی بصری تحویل دهید؛ تأیید کاربردپذیری آن همچنان به شواهد بعدی نیاز دارد.
جمع‌بندی
یک وایرفریم زمانی برای ادامه طراحی مفید است که فقط جای چند کادر را نشان ندهد، بلکه بتوان درباره ترتیب اطلاعات، نقش عناصر و مسیر حرکت کاربر در آن گفت‌وگو کرد. اگر تمرین این مقاله را انجام داده باشید، اکنون باید بتوانید ساختار اولیه یک صفحه معرفی دوره را ترسیم کنید، آن را برای موبایل و دسکتاپ در نظر بگیرید و دلیل تغییرات نسخه اصلاح‌شده را توضیح دهید.
پیش از ورود به طراحی بصری، نسخه‌های مختلف وایرفریم و یادداشت تصمیم‌های خود را نگه دارید. موارد نامشخص را نیز روشن علامت بزنید و فراموش نکنید که بازبینی شخصی، جای بررسی رفتار کاربران واقعی را نمی‌گیرد.
گام بعدی، تبدیل این ساختار به یک رابط بصری است. در این مرحله می‌توانید درباره رنگ‌ها، تایپوگرافی و جزئیات ظاهری تصمیم بگیرید؛ درحالی‌که از قبل می‌دانید هر عنصر چه نقشی دارد و چرا در آن بخش از صفحه قرار گرفته است.
سوالات متداول
در تمرین این مقاله، فایل قابل‌ویرایش با دو قاب موبایل و دسکتاپ خروجی اصلی است؛ اما برای بررسی ساختار و دریافت بازخورد، تصویر یا PDF خوانا نیز می‌تواند کافی باشد. اما اگر قرار است طراح دیگری ساختار را تغییر دهد یا طراحی بصری را روی همان فایل ادامه دهد، بهتر است نسخه قابل‌ویرایش را نیز در اختیارش بگذارید. در هر دو حالت، نسخه مورد توافق، تصمیم‌های باز و عملکرد مورد انتظار عناصر مهم را مشخص کنید.
هنوز دیدگاهی ثبت نشده است.