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

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

لوفای (Lo-fidelity)؛ استخوان‌بندی و ساختار صفحه

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

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

این سادگی عمدی به ما اجازه می‌دهد تا روی منطق صفحه و ساختار اطلاعات تمرکز کنیم. وقتی جزئیات بصری حذف می‌شوند، راحت‌تر می‌توانیم درباره جایگاه قرارگیری دکمه دعوت به اقدام (CTA) یا ترتیب ارائه محتوا تصمیم‌گیری کنیم و اگر نیاز به جابجایی بود، آن را در کسری از ثانیه انجام دهیم.

هایفای (Hi-fidelity)؛ دمیدن روح در ساختار اولیه

زمانی که چهارچوب کلی تایید شد و مطمئن شدیم که چیدمان صفحه منطقی است، نوبت به اضافه کردن جزئیات می‌رسد. اینجا دقیقا همان جایی است که وارد فاز هایفای یا طرح با جزئیات بالا می‌شویم؛ مرحله‌ای که ظرافت‌ها حرف اول را می‌زنند.

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

  • آیکون‌های واقعی و متناسب با موضوع جایگذاری می‌شوند.
  • سایه‌ها (Shadow) و افکت‌های عمق به کادرها و دکمه‌ها اضافه می‌شود تا فرم نهایی را نشان دهد.
  • متن‌های تستی جای خود را به محتوای واقعی، عنوان‌های جذاب و توضیحات دقیق می‌دهند.
  • نحوه نمایش قیمت، جایگاه دقیق دکمه افزودن به سبد خرید و حتی سایز و ضخامت فونت‌ها با ظرافت بالا مشخص می‌شود.

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

استراتژی و فرایند؛ چگونه هوشمندانه طراحی کنیم؟

اما سوال مهمی که در اینجا مطرح می‌شود این است: یک استراتژی اصولی و کارآمد در طراحی چگونه است؟ چگونه این دو روش را در کنار هم قرار دهیم که هم طرحی بی‌نقص داشته باشیم و هم زمان را مدیریت کنیم؟

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

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

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

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