تکنیک فضای خالی در طراحی سایت – سئو مکانیک

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

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

یکی از راهکارهای جلب توجه کاربران استفاده از سادگی و البته فضای اطراف عناصر مهم صفحه است.

در این مقاله سعی داریم مفهوم فضای سفید در طراحی وب را درک کرده و تاثیر آن را در زیبایی و سادگی سایت بررسی کنیم.

فضای خالی در طراحی وب چیست؟

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

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

چرا به فضای آزاد نیاز داریم؟

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

نمایش موضوعات مطرح شده در صفحه

برای درک بهتر اثر فضای خالی، به تصویر زیر نگاه کنید. این تصویر نمونه ای از استفاده از فضای خالی در طراحی صفحه ژورنال را نشان می دهد. تغییرات به ظاهر کوچک در ابعاد ستون و فاصله عنوان، تصویر و محتوا خوانایی و اثربخشی صفحه را بسیار افزایش داد. کدام یک از این پلن ها را به عنوان کاربر دوست دارید؟

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

دسترسی سریع به اطلاعات تماس سایت

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

دکمه های راهنما یا تبلیغات

تحقیقات اینترنتی نشان داده است که استفاده صحیح از فضای خالی در طراحی وب سایت و عناصری مانند دکمه خرید و مشاهده می تواند نرخ کلیک کاربران را تا 20 درصد افزایش دهد. به همین دلیل هر زمان که قرار است پیام خاصی را به کاربر برسانیم یا با استفاده از دکمه او را به قسمت مورد نظر راهنمایی کنیم، از فضای خالی استفاده می کنیم.

تصویر زیر نحوه استفاده از فضای خالی را هنگام طراحی call to action نشان می دهد. با این تغییر کوچک، تاثیر این پیام بر عموم مردم بیشتر خواهد شد. همچنین در صفحه نمایش های کوچکتر مانند موبایل و تبلت، این فضای خالی به کاربر این امکان را می دهد که هنگام حرکت در صفحه، به اشتباه روی دکمه یا عنصر دیگری کلیک نکند و مستقیماً به قسمت مورد نظر دسترسی پیدا کند.

به عنوان یک استاندارد در طراحی وب موبایل، فاصله بین دو دکمه باید حداقل 1.5 برابر عرض انگشت اشاره باشد.

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

نمونه ای از طراحی سایت با استفاده از فضای خالی

وب سایت های زیادی در وب وجود دارند که از تکنیک فضای خالی در طراحی خود استفاده می کنند. از این میان می توان به سایت apple.com اشاره کرد که همچنان به عنوان یکی از برجسته ترین نمونه های طراحی شناخته می شود و تجربه کاربری بسیار مناسبی دارد. تکنیک استفاده از فضای خالی به خوبی در این سایت پیاده سازی شده است.

در بین نمونه های طراحی سایت سئو مکانیک، نمونه های زیادی از این دست وجود دارد که بارزترین آنها طراحی سایت شرکتی هلو است که از فضای خالی برای ارائه محتوای هدفمند به کاربر استفاده می کند.

نظرات خود را در مورد تکنیک فضای خالی در طراحی وب و تاثیر آن بر تجربه کاربر در قسمت نظرات همین مقاله به اشتراک بگذارید.