چیدمان یک وب سایت بزرگ یک معما است: زمانی که به آن توجه نشود بهترین حالت را دارد. اگر طراح کار طراحی سایت خود را به درستی انجام داده باشد، کاربر قادر به پیدا کردن مشخصات محصول، سبد خرید، پیشنهادات تبلیغاتی، و مهم‌تر از همه، دکمه خرید بدون نیاز به فکر است. در کل، هرچه زمان بیشتری را صرف این کنید که چگونه از ابزارهای یک وب سایت استفاده کنید، به معنای این است که توجه کم تری به محتوای واقعی آن کرده اید. طراحی چیدمان وب سایت درباره ی تعادل بین زیبایی شناسی و عملی بودن است. سایت قطعا باید ظاهر خوبی داشته باشد، اما مهم تر از آن، باید به کاربران چیزی را که برای آن آمده اند را به صورت کارآمد بدهد. کاربران برای صفحات وب دشوار صبر کمی دارند، به همین دلیل است که بالا ترین نرخ پرش (بیرون رفتن) در 10 ثانیه اولیه بازدید از یک وب سایت رخ می دهد. درست است که یک طرح (چیدمان) وب سایت خوب همیشه کاربر را مجبور به ماندن نمی کند (مخصوصا اگر محتوا چشمگیر نباشد)، اما شما قطعا نمی خواهید که آن دلیلی برای ترک کاربران باشد. برای اطمینان از این‌که شما یک وب سایتی دارید که بازدید کنندگان آن را ترک نمی کنند، ما این راهنما برای اصول و مبانی طراحی چیدمان وب سایت را گرد آوری کرده ایم. ما اصول اولیه ای که برای یک طراحی خوب باید انجام دهید را آورده، و روش های کلیدی برای طرح (چیدمان) موثر وب سایت و بسیاری از انواع معمول چیدمان وب سایت را آورده ایم.
اهداف طرح (چیدمان) یک وب سایت
به همین سادگی که بیان شده است، تنها هدف از یک چیدمان وب سایت حمایت از اهداف وب سایت است، می تواند تبدیل (تغییر)، آگاهی از برند، سرگرمی و یا هدفی دیگر باشد. اما اهداف یک وب سایت از طریق محتوای آن بیان می شود، و طراحی قاب نحوه‌ی ارائه ی موثر محتوا را توصیف می کند. در اینجا برخی از توابع رایج برای یک طرح (چیدمان) وب سایت که می تواند استفاده شود عبارت اند از:
- نمایش اطلاعات: یک چیدمان وب سایت خوب اطلاعات را به خوبی سازمان دهی می کند تا با هم در یک توالی آشکار تناسب داشته باشند، برای بررسی آسان باشد، به مهم ترین عناصر بها دهد و ابزار استفاده ی کاربر را برای پیدا کردن و استفاده کردن، بصری کند (به آسانی دیده شود).
- تعامل کاربر: یک طرح (چیدمان) وب سایت خوب باعث می شود صفحه از نظر ظاهری جذاب باشد، چشم کاربر را به سمت موارد مورد علاقه هدایت کرده و آن ها را تشویق به ادامه جست و جو از طریق سایت کند.
- نام تجاری: یک چیدمان وب سایت خوب نقش مهمی در نام تجاری هم دارد، استفاده از فاصله گذاری، هم ترازی و مقیاس از طریق راه هایی که سازگار با نام تجاری شرکت است.
این اهداف سطح بالا چیز هایی هستند که طراحی چیدمان یک وب سایت را هدایت می کنند، اما قبل از این که به چیدمان وب سایت های خاص نگاه کنیم، بیایید با جزئیات بیشتر در مورد چگونگی دستیابی به این اهداف بحث کنیم.
فرآیند طراحی چیدمان وب سایت
فرایند نقشه کشیدن برای طرح (چیدمان) یک وب سایت باید در مراحل اولیه ی ایجاد یک وب سایت انجام شود، که اغلب بعد از این که شما استراتژی وب سایت خود را تعیین کردید اما قبل از این‌که شروع به یک برنامه گرافیکی برای ایجاد رابط کنید، رخ می دهد. طرح(چیدمان) وب سایت از طریق یک قاب سیمی نمایش داده می شود، که یک نقشه پایه ای اسکلتی است که نشان می دهد چگونه محتوا با هم تناسب دارند. تشخیص قاب سازی سیمی از طراحی وب مهم است. طراحی چیدمان وب سایت بخش بزرگی از طراحی وب سایت است، و با قاب سازی سیمی شروع می شود. در حالت ایده آل، طراحی سایت ظاهری باید قالب قاب سیمی را دنبال کند، به طوری که عناصر گرافیکی بر اساس استراتژیک جاگذاری شده باشند، نه فقط بر اساس ترجیحات زیبایی شناسی.
پس از آن، در اینجا مراحل ایجاد یک چیدمان وب سایت آورده شده است:
- تمام مناطق محتوا را شناسایی کنید. قاب های سیمی معمولا محتوا را با مربع ها و مستطیل های ساده نشان می دهند، می تواند یک تصویر یا یک بلوک از متن باشد. مهم است که از قبل بدانیم چه مقدار محتوا و در چه اندازه تقریبی داریم (یا تعداد کلمه)، تا بتوانید عناصر را با دقت مناسب کنار هم جای دهید.
- یک سری از قاب های سیمی و نمونه های اولیه درست کنید. یک طرح می تواند به سادگی نقاشی با قلم و کاغذ باشد، اما در عین حال برنامه های زیادی (مانند whimsical) برای ساده سازی روند اختصاص داده شده است. بدلیل این که قاب سیمی آثار هنری با جزئیاتی نیستند، شما در یک زمان می توانید چند تا را از بین ببرید. حتی اگر شما عاشق ایده ی اولیه ی خود هستید، باید قاب های سیمی بیشتری برای گسترش تخیل خود طراحی کرده و به خودتان گزینه برای انتخاب دهید. بدون هیچ گرافیک فانتزی که شما را منحرف کند، شما می توانید آزادانه بر تجربه ی کاربر متمرکز شده و تحقیق کنید کدام ترتیب برای آن ها شهودی تر است. مطمئن باشید که اندازه ی تمام صفحات را محاسبه می کنید، توصیه می شود که با طرح برای دستگاه های تلفن همراه شروع کرده و ساخت را از آنجا شروع کنید.
- آزمایش کنید، بازخورد جمع‌آوری کنید و تکرار کنید. زمانی که گزینه دارید، مطمئن شوید که از همکاران خود بازخورد جمع‌آوری کنید. برنامه های مانند invision و figma به شما اجازه می دهند نمونه های اولیه‌ی تعاملی ایجاد کنید تا به راحتی دکمه ها و جهت‌یابی ها را بدون ساخت یک صفحه وب واقعی امتحان کنید. از کاربران آزمایشی خود بخواهید همان طور که در نمونه اولیه جست و جو می کنند از صفحه خود فیلم بگیرند تا بتوانید موانع لغزش UX را آشکار کنید. هنگامی که برخی نوشته ها را داشتید، به مرحله دوم رفته و تا زمانی که تکمیل شود تکرار کنید.
اگر چه این ها مراحل واقعی برای ایجاد یک طرح وب سایت هستند، وقتی که تازه شروع می کنید دانستن این‌که چه چیزی باعث اثر بخشی یک طرح است یا نیست سخت است. در بخش بعدی، ما تکنیک های خاصی که می توانید برای راهنمای تصمیم گیری های طراحی خود استفاده کنید را بررسی می کنیم.
