غیر ممکن به نظر می رسد؟

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

یک فرآیند 3 مرحله ای برای طراحی یک طرح وب سایت تجاری

مرحله 1: ابتدا در مورد سفر کاربر فکر کنید

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

و وب‌سایتی که به دسترسی‌ها توجهی نمی‌کند، یا فاقد تجربه کاربری عالی است، شانس بسیار کمتری برای جذب حجم مناسبی از ترافیک دارد – در نهایت، UX و SEO دست به دست هم می‌دهند. موارد دورافتاده با UX بی دقت وجود دارد که هنوز تعداد زیادی کاربر را به خود جذب می کند – ببینید: Craigslist. اما شرکت هایی با UX بهتر مانند Uber، Airbnb و Slack شانس بسیار بیشتری برای اختراع مجدد صنایع خود دارند.

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

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

IA خوب سلسله مراتبی ایجاد می کند که بر مهم ترین عناصر تأکید دارد و بازدیدکنندگان را درگیر نگه می دارد. بدون یک “اسکلت” محکم برای ساختن، خود را برای شکست آماده خواهید کرد.

ناوبری یکی از جنبه های کلیدی IA است که باید زودتر در نظر بگیرید. مهم نیست که وب سایت شما چقدر زیبا باشد اگر کاربران راه خود را در اطراف آن پیدا نکنند.

ناوبری خوب سه ویژگی اصلی دارد:

1. سادگی
2. وضوح
3. ثبات

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

مرحله 2: سلسله مراتب بصری را به درستی دریافت کنید

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

به عنوان یک طراح، می توانید مطمئن شوید که مهم ترین اطلاعات دیده می شود و کاربران را به خود جذب می کند.

بدون یک سلسله مراتب بصری واضح، تمام محتوای صفحه به یک اندازه مهم به نظر می رسد و آن را بسیار زیاد می کند.

اصول طراحی مختلف به ایجاد یک سلسله مراتب بصری قوی کمک می کند.

از یک شبکه استفاده کنید

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

طراحی برای الگوهای اسکن طبیعی

دو الگوی اصلی اسکن چشم وجود دارد که افراد برای اسکن سریع بلوک های محتوا از آنها استفاده می کنند:

1. الگوی F شکل
2. الگوی Z شکل

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

توجه به این نکته مهم است که گروه Nielsen-Norman – افرادی که این الگوی خواندن را در سال 2006 کشف کردند – اخیراً تحقیقات خود را مجدداً بررسی کرده و برخی از تصورات نادرست پیرامون آن را روشن کرده اند: الگوی F شکل در واقع برای کاربران و مشاغل بد است و باید چنین باشد. اجتناب کرد. 

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

در اینجا چند راه برای راهنمایی بازدیدکنندگان به خواندن مهمترین مطالب شما وجود دارد :

• مهم ترین اطلاعات را در دو پاراگراف اول درج کنید
• از سرفصل ها و زیر عنوان ها استفاده کنید
• کلمات یا عبارات مهم پررنگ
• مقدار کمی از اطلاعات مرتبط را به صورت بصری گروه بندی کنید
• به طور مکرر از لیست های گلوله ای و شماره گذاری شده استفاده کنید

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

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

‌

عناصر کلیدی را از نظر بصری اولویت بندی کنید 

از پنج بلوک اساسی طراحی برای ایجاد یک سلسله مراتب بصری با HTML و CSS استفاده کنید که در یک نگاه واضح است:

1. اندازه

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

2. رنگ

به یاد داشته باشید که یک طرح رنگ می تواند به عنوان یک ابزار سازمانی و همچنین یک ابزار برندسازی/شخصیت در یک طراحی عمل کند.

3. چیدمان

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

این نشریه فصلی توسط Google از طراحی مبتنی بر کارت برای سازماندهی محتوای صفحه و تشویق هدف اصلی آنها: اشتراک‌ها استفاده می‌کند. منبع: Think with Google

4. فاصله گذاری

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

5. سبک.

انتخاب سبکی که با برند شما مطابقت داشته باشد و آن را برجسته کند، به شما کمک می کند پیام خود را به طور مؤثرتری منتقل کنید.

قانون یک سوم را اعمال کنید

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

مرحله 3: روی دکمه های فراخوان خود تمرکز کنید

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

در اینجا چیزی است که باید هنگام طراحی دکمه های خود در نظر داشته باشید.

اطمینان حاصل کنید که دکمه های شما قابل کلیک هستند

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

همه دکمه ها را به وضوح برچسب بزنید 

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

مهم ترین CTA ها را به صورت بصری برجسته کنید

سه جنبه مهم برای طراحی یک CTA متمایز وجود دارد: رنگ، کنتراست و مکان. از رنگ های چشم نواز با کنتراست کافی برای کمک به برجسته شدن دکمه های اصلی استفاده کنید – و آنها را در مکان های برجسته ای قرار دهید که کاربران نتوانند آنها را از دست بدهند.