مدال در طراحی وب چیست؟ + نحوه استفاده از One

مدال در طراحی وب چیست؟  + نحوه استفاده از One

مودال چیست؟

مدال عنصری است که جلوی سایر محتوای صفحه نمایش داده می شود و آن را غیرفعال می کند.

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

این صفحه اصول اولیه مدال های طراحی وب را در بخش های زیر شرح می دهد:

برای کسب اطلاعات بیشتر در مورد پنجره های مدال و زمان استفاده از آنها در طراحی وب به خواندن ادامه دهید. یا زنگ بزن 888-601-5359 برای چت کردن با یک استراتژیست در مورد تاکتیک های طراحی وب!

ایمیل های خودی مدیر بازاریابی ما را از دست ندهید!

پیوستن 200000 بازاریابان هوشمند و داغ‌ترین اخبار و اطلاعات بازاریابی ماه را مستقیماً در صندوق ورودی خود دریافت کنید!

ایمیل خود را در زیر وارد کنید:

فرم اشتراک درون خطی – CTA 72

*” فیلدهای الزامی را نشان می دهد

(نگران نباشید، ما هرگز اطلاعات شما را به اشتراک نخواهیم گذاشت!)

مدال در طراحی وب چیست؟

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

مدال ها می توانند اشکال مختلفی داشته باشند، از جمله:

  • فرم های تماس
  • ثبت نام های ایمیل
  • نظرسنجی های مختصر
  • بررسی های امنیتی

مزایای استفاده از مدال ها

مدال ها برای طراحی وب محبوب هستند زیرا به شما در دستیابی به اهداف بازاریابی خود کمک می کنند. از مزایای استفاده از مدال در طراحی وب می توان به موارد زیر اشاره کرد:

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

مدل های شما همچنین می تواند برای مشتریان شما مفید باشد. آن‌ها می‌توانند از تخفیف‌ها، اطلاعات دروازه‌دار و موارد دیگر در صورت تعامل با مدل‌های شما برخوردار شوند.

مدال ها در مقابل پنجره های بازشو

مدال ها و پاپ آپ ها در صفحه شما ظاهر می شوند و توجه خواننده شما را به خود جلب می کنند. بنابراین، تفاوت واقعی بین modal و popup چیست؟

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

در اینجا یک پنجره بازشو است که در کنار صفحه ظاهر می شود بدون اینکه جریان را قطع کند:

اسکرین شات از پنجره بازشو

در اینجا یک مودال وجود دارد که فضای بسیار بیشتری را اشغال می کند و دسترسی به صفحه را محدود می کند:

اسکرین شات نمونه معین/ثبت نام ایمیل

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

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

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

  1. از آنها با هدف استفاده کنید
  2. مطمئن شوید که اندازه آنها مناسب است
  3. کاربران را قادر به بستن آنها کنید
  4. از دستورالعمل های واضح استفاده کنید
  5. متن دکمه ایجاد کنید
  6. آنها را تکرار نکنید

بیایید در مورد هر نکته در زیر بیشتر بخوانید!

1. از آنها با هدف استفاده کنید

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

به عنوان مثال، این مدال را از شراب خوب و ارواح خوب بگیرید:

اسکرین شات مدال تایید سن از Fine Wine and Good Spirits

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

2. مطمئن شوید که اندازه آنها مناسب است

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

در اینجا یک مثال از Urban Outfitters آورده شده است:

تصویری از ارسال ایمیل برای فرم Urban Outfitters

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

3. کاربران را فعال کنید تا آنها را ببندند

اگر می خواهید افراد را در وب سایت خود نگه دارید و نرخ پرش خود را کاهش دهید، اطمینان حاصل کنید که کاربران می توانند مدال را ببندند. این مثال از Aerie یک “X” مناسب در گوشه دارد که به کاربران می گوید چگونه آن را ببندند:

اسکرین شات از فرم ارسال ایمیل Aerie

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

4. از دستورالعمل های واضح استفاده کنید

اگر می‌خواهید کاربران با مدال درگیر شوند، دستورالعمل‌ها باید واضح و آسان باشد. کاربران را با گزینه ها و جاهای خالی متعدد غرق نکنید – آن را ساده نگه دارید.

این مثال از H&M را بررسی کنید:

تصویری از فرم ارسال ایمیل H&M

این مدال دارای چندین فیلد است، اما هنوز مختصر است و به کاربر کمک می‌کند تا از تجربه بیشتر بهره ببرد.

5. متن دکمه ایجاد کنید

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

در اینجا یک نمونه از نیویورک تایمز و شرایط به روز شده آنها آورده شده است:

اسکرین شات اعلان شرایط به روز شده از نیویورک تایمز

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

6. آنها را تکرار نکنید

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

اسکرین شات از مودال خرید از رولینگ استون

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

هزینه ساخت وب سایت رویاهای شما چقدر است؟

از ما استفاده کنید رایگان ماشین حساب هزینه طراحی سایت برای ایده گرفتن!

ماشین حساب هزینه طراحی وب سایت

مدال های وب سایت خود را با WebFX بهینه کنید

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

آ آژانس طراحی وب سایت مانند WebFX می تواند به شما کمک کند به این سؤالات پاسخ دهید و با مدال ها ادامه دهید. اگر می‌خواهید فرآیند طراحی وب را ساده کنید، ما می‌توانیم کمک کنیم – تا کنون بیش از 1600 وب‌سایت راه‌اندازی کرده‌ایم، و می‌توانیم مدال‌ها را به طور مؤثر ترکیب کنیم.

امروز آنلاین با ما تماس بگیرید و ببینید ما چه کاری می توانیم برای کسب و کار شما انجام دهیم!