.

مهم ترین اصول طراحی اپلیکیشن

مهم ترین اصول طراحی اپلیکیشن

اصول طراحی اپلیکیشن

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

بررسی اصول طراحی اپلیکیشن

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

برای داشتن یک اپلیکیشن دو راه ساده دارید. اول این که بدون نیاز به هیچ دانش قبلی و علم برنامه نویسی و با کمک برنامه های اپلیکیشن ساز مانند APPERY APPY PIE ، SWIFTIC ، GAMESALAD و… همچنین رعایت اصول طراحی اپلیکیشن خودتان ساخت اپلیکیشن را انجام دهید. و یا از خدمات متخصصین و شرکت های فعال در حوزه طراحی اپلیکیشن مانند تابان شهر بهره گیرید تا طراحی اپلیکیشن را به بهترین و حرفه ای ترین شکل برای شما انجام دهند .

برای مشاهده خدمات طراحی اپلیکیشن روی دکمه کلیک کنید

داشتن اپلیکیشن چه مزیتی برای کسب و کار ما دارد؟

1- دسترسی راحت تر و همیشگی! برخلاف سایت ،  دیگر نیازی نیست کاربر برای هر ورود به سایت شما نام دامنه را  به خاطر داشته باشد بلکه اپلیکیشن را به راحتی باز کرده و تمامی سفارشات خود را به سرعت ثبت می نماید .
2- کاربری و مدیریت ساده تر نسبت به سایت
3- امکان به روز رسانی و صدور اطلاعیه های جدید بر روی اپلیکیشن
4- معرفی سریع تر برند
5- ایجاد ارتباط دو طرفه

 در ساخت اپ  موارد مختلفی از جمله بهینه سازی اپلیکیشن  و…. باید رعایت شود تا اپلیکیشن مورد نظر یک اپ با بیس قوی باشد . برای دریافت اطلاعات بیشتر از یک منبع مطمئن با کارشناسان تابان شهر در تماس باشید .

مهم ترین نکات و اصول طراحی اپلیکیشن

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

1. بخش ثبت نام کاربر

 2. پروفایل اختصاصی هر کاربر

3. پنل مدیریت آسان

4. سرعت بالا اپلیکیشن

5. حجم کم اپلیکیشن

6. هماهنگی بین سایت و اپلیکیشن

7. امکان پاسخگویی روی هر سیستم عاملی

8. امکان پاسخگویی روی هر اندازه تلفن همراه

9. فروشگاه اینترنتی

10. درگاه پرداخت

11. امکان ویرایش محصولات

12. امکان مشاهده سبد خرید و سفارشات

13. باشگاه مشتریان

14. امکان جستجو

بررسی اصول طراحی اپلیکیشن

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

1.  انتخاب یک طرح و قالب مشخص برای اپلیکیشن

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

انتخاب یک طرح و قالب مشخص برای اپلیکیشن
داشتن ui اصولی

2. داشتن ui اصولی

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

3. چیدمان اصولی عناصر

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

چیدمان اصولی عناصر
طراحی ساده

4. طراحی ساده

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

5. قابلیت به روز رسانی

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

قابلیت به روز رسانی اصول طراحی اپلیکیشن
قابلیت جستجو در اصول طراحی اپلیکیشن

6. قابلیت جستجو

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

7. روانشناسی طراحی اپلیکیشن

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

روانشناسی طراحی اپلیکیشن

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

بررسی اصول طراحی اپلیکیشن

بررسی نهایی و نکات قبل از انتشار اپلیکیشن :

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

کلام آخر

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

شرکت طراحی سایت و اپلیکیشن تابان شهر در تمام زمینه های طراحی سایت و اپلیکیشن و ارائه خدمات مربوط به آنها در خدمت شماست

قدم های طلایی برای افزایش امنیت وردپرس

قدم های طلایی برای افزایش امنیت وردپرس

افزایش امنیت وردپرس

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

افزایش امنیت وردپرس

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

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

همین حالا برای مشاوره رایگان اقدام کن!

برای مشاوره رایگان طراحی سایت با وردپرس کلیک کنید!

راه های افزایش امنیت وردپرس

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

1. استفاد از شرکت هاستینگ قوی :

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

2. تغییر آدرس ورود به پیشخوان :

کی دیگر از راه های افزایش امنیت وردپرس ، تغییر آدرس ورود به پیشخوان یا بخش مدیریتی وردپرس هست که بطور پیش فرض به صورت sample.com/wp-admin می باشد که برای انجام این تغییرات می توانید از افزونه امنیتی wp-Hide login که در وردپرس 4.1 به بالا سازگار می باشد استفاده کنید.

3.استفاده از قالب و افزونه های ایمن :

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

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

4.به روز رسانی مداوم قالب و افزونه های وردپرس :

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

5.تهیه نسخه پشتیبان و بک آپ:

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

6.محدود کردن دسترسی افراد:

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

7.استفاده از نام کاربری و رمز عبور قوی:

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

8.استفاده از SSL و HTTPS:

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

9.افزایش امنیت فایل WP-config.php:

اطلاعات دیتابیس هر سایت وردپرسی دریک فایل WP-config.php قرار میگیرد که وظیفه اتصال با پایگاه داده وردپرس را دارد. در این فایل نام کاربری پایگاه داده، رمز پایگاه داده، پیشوند جداول وردپرس و … قرار دارد. پس حواستان به مدیریت این فایلتان باشد چون در افزایش امنیت وردپرس تاثیر زیادی خواهد گذاشت، بطور مثال یکی از راه های مدیریت و حفظ این فایل تغییر مکان این پوشه در هاست هست.
به عبارت دیگر مکان پوشه را از public-html به پوشه home هاست انتقال بدهید چون این پوشه توسط وردپرس در هر جایی قرار بگیرد خوانده می شود.

10.غیر فعال کردن مشاهده پوشه های هاست:

مرور پوشه ها در هاست را غیرفعال کنید چون باتوجه به کانفیگ هاست امکان غیرفعال شدن این گزینه وجود دارد و هکرها به راحتی می توانند وارد پوشه Directory browsing شوند و اطلاعات موجود در هر پوشه و هاست را بررسی کنند

11.استفاده از افزونه امنیت وردپرس:

افزونه های امنیتی مختلفی برای وردپرس ساخته شده است که کارشان افزایش امنیت وردپرس بوده .  Word fence، I Themes security از افزونه های پرطرفدار برای اینکار می باشد که به شما برای جلوگیری از هک شدن سایتتان کمک میکند. حتی برخی از تمهیداتی که در بالا ذکرشد هم برای شما انجام می دهند.

سخن آخر

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

0 تا 100 مراحل راه اندازی سایت

0 تا 100 مراحل راه اندازی سایت

مراحل راه اندازی سایت

این روز ها علاوه بر پیشرفت تکنولوژي، شیوع کرونا نیز مزید بر علت شد تا کسب و کار ها سنت قدیمی خود را بشکنند و روی به دنیای اینترنت و خدمات آنلاین آورند. امروزه داشتن یک سایت جز مهمترین اصول یک بیزینس موفق و پرسود می باشد. مهم ترین نکته در ایجاد یک سایت حرفه‌ای این است که بدانیم چه هدفی برای راه اندازی سایت داریم؟ قصد داریم یک وب سایت فروشگاهی برای فروش محصولاتمان داشته باشیم؟ یا یک وب سایت تببیغاتی برای ایجاد کمپین های تبلیغاتی؟ و یا حتی یک وب سایت شخصی! تفاوتی ندارد هدف از ایجاد سایت چیست. در هر صورت برای ایجاد یک سایت باید یک سری مراحل ابتدایی اما ضروری طی شود! در این مطلب قصد داریم شما را با 0 تا 100 مراحل راه اندازی سایت آشنا کنیم پس در ادامه با ما در تابان شهر همراه باشید.

مرحله اول راه اندازی سایت: هدفتو مشخص کن!

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

مراحل راه اندازی سایت

مرحله دوم: انتخاب نام دامنه

دومین قدم از مراحل راه اندازی سایت، انتخاب نام دامنه مناسب می باشد. نام دامنه در‌واقع همان اسم انگلیسی یا آدرس سایت است. دامنه ها شامل پسوند های گوناگونی هستند مانند ir. یا com. یا org. یا net. و… که با توجه به نوع خدمت سایت باید آن را انتخاب کرد. فراموش نکنید انتخاب نام دامنه یکی از مهمترین اقدام‌ها در راه اندازی سایت می باشد چرا که هم باید در ذهن بماند و هم نشان از برند و کسب و کار شما باشد.

مرحله سوم: خرید هاست مناسب

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

انواع هاست

Shared hosting – هاست اشتراکی

VPS hosting – هاست سرور مجازی

Cloud hosting – هاست ابری

WordPress hosting – هاست وردپرس

Dedicated hosting – هاست اختصاصی

و …

مرحله چهارم: انتخاب نوع راه اندازی سایت

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

طراحی سایت اختصاصی

ایجاد سایت به صورت اختصاصی هزینه بسیار بالایی دارد که قبلا در مقاله ای تحت عنوان عوامل موثر بر هزینه طراحی سایت درباره آن صحبت کرده ایم. چرا که به صورت مخصوص توسط برنامه نویس خبره php یا css نوشته و طراحی می‌شود. برای نمونه سایت zoomit.ir توسط یک تیم متخصص به صورت اختصاصی برنامه نویسی شده است.

آماده و رایگان

اگر برای طی کردن مراحل راه اندازی سایت خود و شروع کسب و کار آنلاین بودجه زیادی در نظر ندارید یهترین گزینه برای شما استفاده از سایت ساز رایگان می باشد. وردپرس، جوملا، دروپال، دیتا لایف انجین و… نمونه‌هایی از این cms های آماده هستند. این سیستم‌ها به صورت آماده طراحی شده‌اند و نیازی به کد نویسی مجدد ندارند. تنها ایرادی که میتوان از این سایت‌ها گرفت محدودیت‌هایی ست که گاهی اوقات ایجاد میکنند و ممکن است شما قادر نباشید یک سایت با امکانات بسیار پیچیده و پیشرفته داشته باشید. محبوب‌ترین و پیشرفته‌ترین سیستم مدیریت محتوا، وردپرس می باشد. این محبوبیت به دلیل مواردی چون امنیت بالا، امکان افزودن پلاگین، open source بودن این سیستم و … می باشد. از سایت‌هایی که با اینcms محبوب ایجاد شده‌اند میتوان به سایت digiato.com اشاره کرد.

مرحله پنجم راه اندازی سایت : مشخص کردن قالب

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

مراحل راه اندازی سایت

مرحله ششم: ایجاد صفحات اصلی

1. home page

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

2. landing page

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

تماس با ما

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

درباره ما

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

وبلاگ

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

مرحله هفتم: تجربه کاربری

اهمیت بسیار تجربه کاربری یا همان ux در مراحل راه اندازی سایت غیر قابل انکار است. تجربه کاربری تمام احساسات، باورها، اولویت‌ها، برداشت‌ها، واکنش‌های جسمی و روانی، رفتارها و دست‌آوردهای کاربران که پیش از استفاده، در حین استفاده و پس از استفاده رخ می‌دهد را شامل می‌شود. ux در seo نیز نقش بسیاری دارد. در ادامه مطلب به بررسی موضوع seo خواهیم پرداخت. خوانا و روشن بودن مقاله، اطلاعات مفید و کاربردی با کلمات کلیدی و متن با کیفیت، کاربر پذیری و ساده بودن و … از جمله اهداف اصلی SEO و UX هستند.

“همین حالا برای طراحی سایت و ساخت اپلیکیشن اقدام کنید!”

شرکت طراحی سایت و اپلیکیشن تابان شهر در تمام زمینه های طراحی سایت و اپلیکیشن و ارائه خدمات مربوط به آنها در خدمت شماست

ساختار

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

فونت

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

فوتر

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

فراخوانی به عمل

CTA یا call to action بخشی از محتوا است که میتوانید آن را به شکل تصویر، متن، دکمه یا یک محتوای کامل در صفحه بگذارید و هدف آن این است که کاربر را به سمت اقدام مورد نظر شما سوق دهد. CTA باید کوتاه، امری و دارای یک المان تحریک آمیز باشد.

رنگ

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

فضای خالی

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

منو

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

افکت‌های همراه با اسکرول

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

مرحله هشتم راه اندازی سایت: تولید محتوا

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

مرحله نهم: بررسی نهایی سایت

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

مرحله دهم راه اندازی سایت: انتشار

در نهایت پس از بررسی سایت ، نوبت به انتشار آن می رسد. اما این پایان کار نیست بلکه آغاز ماجراست! حال باید بدانیم چه رتبه ای در نتایج گوگل داریم؟ چه تعداد بازدید از سایت ما انجام می شود؟ میزان ترافیک ورودی از کلمات کلیدی چه مقدار است؟ به کدام قسمت های سایت توجه بیشتری می شود؟ تمامی این موارد به ما کمک می کنند نکات قوت و ضعف سایت خود را بشناسیم و در جهت بهبود و افزایش رتبه سایت تلاش کنیم. بررسی و آنالیز سایت توسط ابزار های گوناگونی میسر می باشد مانند Google Search Console، Google Analytics، hotjar . همچنین بهینه سازی موتور جستجو یا سئو سایت از موارد مهمی ست که نباید پس از راه اندازی سایت از آن چشم پوشی کنیم.

بهینه سازی موتور جست و جو

پس از ایجاد سایت مهم ترین مسئله این است که آیا مخاطب شما میتواند شما را در صفحه سرچ گوگل یا به اصطلاح صفحه serp بیابد؟ این که سایت شما در کدام صفحه و کدام لینک جست و جوی گوگل باشد نکته بسیار پر اهمیتی است. حال چگونه صفحه خود را به صدر نتایج گوگل برسانیم؟ seo کردن سایت راه حل این مشکل است. (seo (search engine optimization یا در معنی لغوی بهینه سازی موتور جست و جو علمی تخصصی می باشد که صبر و دانش زیادی می طلبد. سئو جز مراحل راه اندازی سایت نیست اما از اقدامات بسیار مهم پس از ایجاد سایت است. در ادامه با برخی از موارد اساسی در سئو آشنا می شویم.

کلمات کلیدی

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

لینک داخلی

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

تگ

متن جایگزین یا alternative text که به تگ ALT معروف است، توضیح کوتاهی از عنوان یک تصویر در صفحه سایت می باشد که آن تصویر را توصیف می کند. گوگل از همه چیز آگاه است اما مواردی مثل عکس یا گیف ها را نمی بیند. تگ ALT به ربات های گوگل کمک میکند مفهوم تصویر را متوجه شوند. همچنین در زمانی که بارگزاری سایت با مشکل مواجه شود و نمایش تصاویر ممکن نباشد این توضیحات به مخاطب کمک می کنند که از مفهوم تصویر با خبر شوند.

سئو محلی

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

سئو خارجی

فعالیت ها و تکنیک هایی که بیرون از سایت و به منظور بهینه سازی آن انجام می شود تحت عنوان سئو خارجی یا Off-page SEO شناخته می شود. برخی از این تکنیک ها شامل فعالیت در شبکه های اجتماعی، استراتژی بک‌لینک قوی، رتباط با اینفلوئنسرها، کمپین های تبلیغاتی و فعالیت در فروم ها می باشد.

 سئو داخلی

به هر فعالیتی که به منظور افزایش رتبه داخل سایت انجام می شود سئو داخلی یا On-page SEO گفته می شود. این اقدامات شامل عنوان صفحه، تگ توضیحات، متا تگ ها کلمه کلیدی، ساختاربندی URL، بهینه سازی عکس ها، لینک سازی داخلی و … می باشند.

طراحی ریسپانسیو

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

مراحل راه اندازی سایت

سخن پایانی

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

برترین امکانات و ویژگی های سایت شرکتی

برترین امکانات و ویژگی های سایت شرکتی

انواع طراحی سایت

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

برای مشاهده خدمات طراحی سایت تابان شهر کلیک کنید!

ویژگی های سایت شرکتی

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

برترین ویژگی های سایت شرکتی

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

طراحی UI/UXسایت

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

ظاهر سایتتان را شلوغ نکنید

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

یکپارچگی در سایت شرکتی را رعایت کنید

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

نمونه کار پروژه تابلو رویال

screencapture tabloroyal 2021 09 06 17 02 32 min

نمونه کار پروژه نویان نما

نمونه کار پروژه نویان نما

موبایل فرندلی بودن سایت شرکتی

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

دارای پنل مدیریتی آسان و حرفه ای

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

سرعت بالای سایت

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

سخن آخر

پس خاطرتان باشد که امروزه  ایجاد یک سایت قوی به برندینگ شما کمک می کند و بر روی میزان فروش شما تاثیر به سزایی خواهد داشت، همانطور که در بالا به آن اشاره شد ویژگی های سایت شرکتی باید به گونه ای باشد تا بتوانید روی سئو سایت تان کار کنید و ترافیک سایتتان را بالا ببرید تا از این طریق میزان فروشتان بالا ببرید.

استفاده از تکنیک فضای خالی در طراحی سایت

استفاده از تکنیک فضای خالی در طراحی سایت

تکنیک فضای خالی در طراحی سایت

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

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

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

دلیل اهمیت فضای خالی در طراحی سایت

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

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

Untitled 2 1 1

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

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

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

استفاده از تکنیک فضای خالی در طراحی UI سایت :

هدایت کاربر به سمت محتوای هدف

هر سایت با اهداف مشخصی ایجاد شده است . این اهداف می تواند پر کردن یک فرم ، ثبت نام در سایت ، خرید و … باشد . با پیاده سازی تکنیک فضای خالی در سایت و به خصوص در صفحات لندینگ میتوان توجه کاربر را به بخش مورد نظر جلب کرد و با کم کردن محتوای اضافی ، اصلی ترین المان صفحه را به کاربر نمایش داد.از ساده ترین نمونه های استفاده از این فضا میتوان به صفحه سرچ گوگل اشاره کرد.

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

فضای خالی در طراحی سایت

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

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

افزایش خوانایی نوشته

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

به طراحی سایت احتیاج داری؟

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

3-1- ایجاد فضا در حاشیه متن ها خوانایی نوشته شما را بیش از 20% افزایش می دهد !
3-2- نزدیک بودن عنوان به متن پارگراف تاثیر به سزایی در بهبود خوانایی متن دارد . با نزدیک قرار گرفتن عنوان و نوشته ، یک گروه متنی تشکیل می شود که باعث درک بهتر مخاطب می گردد.
3-3- دیگر اقدام مورد نیاز برای بهبود خوانایی ، افزایش فاصله بین خطوط می باشد . این عمل باعث می شود متن در هم رفته و بی نظم به نظر نرسد و کاربر سردرگم نشود.

برجسته نشان دادن

از دیگر دلایل استفاده از فضای خالی در طراحی سایت می توان به افزایش CTA ) call to action ) اشاره کرد .فراخوانی به عمل یا CTA بخشی از محتوا است که میتواند به شکل تصویر ، متن ، دکمه یا یک محتوای کامل باشد و هدف آن این است که کاربر اقدام خاصی را انجام دهد . معمولا با بزرگ تر نشان دادن هر عنصر ، توجه بیشتری به آن جلب می شود . این جلب توجه را می توان با تکنیک فضای سفید نیز ایجاد کرد . آیتم هایی که بین فضای سفید قرار می گیرند تاثیر گذاری بیشتری دارند و بهتر می توانند نظر مخاطب را به سمت خود جلب کنند و در نهایت ، این توجه باعث افزایش CTA میشود.

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

Untitled 1

تاثیر گذاری بیشتر

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

سخن آخر

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

معیار های Web Vitals چیست؟

معیار های Web Vitals چیست؟

معیار های  Web Vitals

گوگل عادت داشت همیشه بگه که اولین و آخرین اولویتش برای رتبه بندی یک سایت، اهمیتی هستش که آن سایت برای مخاطبش قائل می شود. هر وقت هم که شما از گوگل بپرسی چه چیزی باعث می شود که من رتبم از باقی رقبای خودم بالاتر باشد، جواب می داد که “مخاطب باید از شما راضی باشد” و روی این حرف هم چنان پافشاری می کرد که انگار نه انگار که موارد دیگه ایم هستن که تو رتبه بندی تاثیر بگذارند. در حال حاضر گوگل تقریبا دارد بسیار هوشمند تر از قبل می شود و با ارائه یکسری فاکتور های جالب در سال 2021، دقیقا به همان چیزی که همیشه بر آن اصرار داشت نزدیک می شود. به مجموع تمامی این فاکتور ها Core Web Vitals یا معیار های Web Vitals می گویند که در این مقاله به تمامی آن ها خواهیم پرداخت.

مطالبی که در رابطه با معیار های Web Vitals خواهید خواند

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

 

Core Web Vitals یا معیار های Web vitals دقیقا به چه چیزی اشاره می کند؟

راستش را بخواهید من هرگز متوجه نشدم چرا Core Web Vitals باید “ویتامین های هسته وب” ترجمه بشود. ترجمه اصلی این عبارت در بهترین حالت می تواند عبارت “واجبات بنیادی وب”  یا “عناصر بنیادی وب” باشد که اتفاقا کاملا هم به فاکتور هایی که ارائه می دهد نزدیک است. معیار های Web Vitals در واقع عبارتند از یکسری فاکتور های مهم برای بهتر کردن تجربه کاربری در صفحات وب. در واقع به عبارت دیگر، یک مجموعه از عوامل و فاکتور هایی که میزان خوب بودن یا نبودن تجربه کاربری را تخمین می زنند. این فاکتور ها تاثیر مستقیم بر سئو سایت ما دارند و می توان گفت در حال حاضر جزو یکی از اصلی ترین معیار های رتبه بندی و سئو برای گوگل به حساب می آیند.

فاکتور های Core Web Vitals دقیقا همان چیز هایی هستند که در حال حاضر هر صاحب سایتی باید آن ها را رعایت کند. این موضوعات هم باعث می شوند ما تجربه کاربری خوبی ارائه دهیم و هم تاثیر مستقیم بر روی رتبه بندی سایت ما دارند. حال این فاکتور ها دقیقا چه هستند و به چه مواردی اشاره می کنند؟ در ادامه مقاله با ما همراه باشید تا هرچه بیشتر به این موارد بپردازیم.

معیار های اصلی Core Web Vitals چیست؟

ممکن است زمانی که برای اولین بار با این موضوع مواجه می شوید تصور کنید قرار است همان حرف های تکراری ای را بشنوید که سال ها درباره “چگونه یک سایت خوب داشته باشیم” زده می شد. یا اینکه تصور کنید همان حرف های سابق در رابطه با چگونگی رتبه بندی سایت ها زده بشود. زمانی که اولین بار خود من هم با این موضوع رو به رو شدم تصور کردم باید یک همچین چیزهایی باشد و اهمیت چندانی به آن ندادم. اما زمانی که به معیار های Web Vitals دقیق تر نگاه کنیم، می بینیم که نه تنها بسیار هوشمندانه طراحی شده اند، بلکه بدیهیاتی را برای ما بیان می کنند که ما تا به حال به آن ها چندان توجهی نداشتیم که چقدر بر روی طراحی سایت ما تاثیر دارند.

این واجبات بنیادی وب عبارتند از (Largest Contentful Paint(LCP)، First Input Delay(FID و (Cumulative Layout Shift(CLS که فکر می کنم برگردان فارسی آن ها چندان حق مطلب را ادا نکند اما با توضیح جزء به جزء هر سه تای این ها، مفهوم درست و دقیقی از هرکدام به دست خواهد آمد. مفاهیمی که آنطور که انتظار می رود قرار است تا سال ها در طراحی سایت به کار بیاید و همیشه جزو مهمترین فاکتور های رتبه بندی و UX به شمار بروند. چیز هایی که شاید هنوز طراحان وب سایت تمرکز چندانی بر روی آن ها ندارند و خیلی ها هم ممکن است از وجود چنین فاکتور هایی خبر هم نداشته باشند.

معیار های Web Vitals


این واجبات بنیادی وب عبارتند از (Largest Contentful Paint(LCP)، First Input Delay(FID و (Cumulative Layout Shift(CLS که فکر می کنم برگردان فارسی آن ها چندان حق مطلب را ادا نکند اما با توضیح جزء به جزء هر سه تای این ها، مفهوم درست و دقیقی از هرکدام به دست خواهد آمد. مفاهیمی که آنطور که انتظار می رود قرار است تا سال ها در طراحی سایت به کار بیاید و همیشه جزو مهمترین فاکتور های رتبه بندی و UX به شمار بروند. چیز هایی که شاید هنوز طراحان وب سایت تمرکز چندانی بر روی آن ها ندارند و خیلی ها هم ممکن است از وجود چنین فاکتور هایی خبر هم نداشته باشند.

 

Largest Contentful Paint چیست؟

بزرگترین المان حاوی محتوا (ترجمه‌ی دقیق نیست) یا همان Largest Contentful Paint به بارگذاری بزرگترین المان صفحه اشاره دارد. در واقع ما در معیار های Web Vitals یا همان Core Web Vitals گاهی منحصرا می خواهیم بدانیم که چقدر طول می کشد که یک سری از اجزای خاص صفحه بارگذاری بشوند. یکی از مهمترین چیز هایی هم که زمان بارگذاری آن مهم است، بزرگترین بخش دارای محتوای صفحه شماست. به بیان ساده تر LCP متراژ اندازه گیری زمان بارگذاری محتوای اصلی سایت شما می باشد. طوری که کاربران بتوانند با آن محتوا تعامل برقرار کنند و بارگذاری آن ناقص انجام نشده باشد.

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

 

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

یک LCP خوب دقیقا چگونه بدست می آید؟

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

برای این هم که ما به هدفمون برسیم لازم است که مواردی برای Largest Contentful Paint ما رعایت شود. اما اصلا چرا باید این موضوع رعایت شود و چرا انقدر گوگل برایش مهم است که زیر ۲.۵ ثانیه شما تقریبا ۷۵ درصد از صفحه را به کاربرتان تحویل داده باشید؟ به این خاطر که تحقیقات نشان می دهند ۵۳٪ از استفاده کنندگان موتور های جست و جو بیشتر از ۳ ثانیه برای لود شدن یک صفحه صبر نمی کنند. به همین خاطر هم مهم هستش که کاربر زیر ۲.۵ ثانیه متوجه شود که صفحه را درست آمده و همان اطلاعاتی که می خواهد را قرار است بدست بیاورد. (احتمالا البته نیمی از آن ۴۷ درصد باقی هم مردم کشور ما هستند که بسیار صبور اند و به سرعت کم عادت دارند و از این سختگیری ها نمی کنند!)

 

معیار های Web Vitals

حالا می خواهیم آرام آرام به سراغ پارامتر ها و مواردی برویم که باعث بهبود LCP صفحه ما می شوند. این پارامتر ها تقریبا در تک تک صفحات ما باید رعایت شوند تا ما بتوانیم یک LCP قابل قبول برای مخاطبمان ارائه بدهیم.

چه مواردی بر روی LCP صفحه شما تاثیر می گذارند؟

قبل از اینکه به سراغ پارامتر های Largest Contentful Paint برویم بهتر است نگاهی بیندازیم به اینکه اصلا چه المان هایی می توانند جزوی از LCP باشند. به طور کلی هرچیزی که داخل تگ img باشد یعنی در واقع یک تصویر باشد، هر چیزی که داخل تگ SVG باشد، هر ویدیویی در سایت که کاور داشته باشد، هر المانی که تصویر پس زمینه داشته باشد و هر المانی که از node های متعدد تشکیل شده باشد می تواند یک LCP باشد. در واقع اینطور به شما بگویم که حجیم ترین المان شما Largest Contentful Paint شما محسوب می شود.

مواردی هم که باعث می شوند یک المان به LCP تبدیل شود هم می توانند حجم یک المان باشد(مثلا حجم تصویر)، می تواند حجم کد به کار رفته در یک المان باشد و… هرچیزی که به ما بگوید چرا یک المان بزرگترین و مهمترین المان ما محسوب می شود.

به سایت حرفه ای نیاز داری ؟ همین الان سفارش بده تا تخفیف های ویژه رو از دست ندی

 

First Contentful Paint چیست؟

این دو مبحثی که جلو تر در رابطه با معیار های Web Vitals می خواهیم معرفی کنیم به خودی خود تعریف های خودشان را دارند و مواردی هم برای این ها نام برده شده است. اما خب می توان گفت با وجود تعاریف جداگانه، جزو متراژ های اصلی Core Web Vitals به حساب نمی آیند اما دلیل نمی شود که تاثیری بر روی آن نداشته باشند. همچنین به این دلیل که یکسری معدود کارکرد های مشابهی با LCP دارند، در اینجا هم اشاراتی به این دو خواهیم داشت.

یکی از این موارد که اتفاقا یکی از مهمترین متراژ های جزئی تر نیز به حساب می آید First Contentful Paint است. FCP در واقع همانطور که از نامش پیداست به جای اینکه به حجیم ترین المان حاوی محتوا اشاره کند، به اولین المانی که در صفحه بارگذاری می شود اشاره دارد. پس این موضوع مهم است که چقدر طول می کشد که اولین المان محتوایی برای کاربر بارگذاری شود. چون به هر حال همینکه کاربر اولین المان را ببیند، تا بخواهد آن را تحلیل کند و بخش های آن را در ثانیه بررسی کند، دیگر بخش های محتوا نیز بارگذاری خواهند شد.

 FCP ما باید چگونه باشد و چطوری یک FCP خوب داشته باشیم؟

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

عمده مواردی هم که جزو FCP ما به حساب می آیند نوار هدر سایت، اولین رنگی که به محض ورود کاربر می بیند، اولین المان های بالای صفحه و… هرچیزی است که بالای Fold صفحه نمایش داده می شود. Fold در واقع به قسمتی از صفحه سایت ما گفته می شود که مرز بین محتوای ورود(زمانی که کاربر هنوز صفحه را به سمت پایین اسکرول نکرده است) و باقی محتوا(هر محتوای بعد از اسکرول صفحه) می باشد.

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

 

First Meaningful Paint چیست؟

یکی دیگر از این متراژ های مهم عملکرد صفحه شما FMP یا همان First Meaningful Paint است. این مورد در واقع به بارگذاری اولین محتوای مهم معنادار شما اشاره می کند. معنادار یعنی چه؟ یعنی شروع کننده محتوایی که کاربر شما دنبال آن است. در واقع منظور ما اینجا یک رنگ بک گراند یا نوار هدر نیست، بلکه مستقیما داریم به اولین المان قابل نمایشی اشاره می کنیم که مقصود کاربر ما نیز می باشد.

در واقع First Meaningful Paint هر جا هم که باشد پایین تر از Fold به هیچ عنوان نیست. درست است که ما برای LCP هم تعریف کردیم که به علاوه اشاره به حجیم ترین المان، به مهمترین المان نیز اشاره دارد اما LCP هرجایی از محتوای شما می تواند باشد. اما هرگز FMP و FCP جایی جز بالای Fold نیستند. (این را هم البته باید بگوییم که سعی کنید به هیچ عنوان بزرگترین و حجیم ترین محتوایتان در بالای صفحه نباشد که باعث اختلال در زمان بارگذاری FCP و FMP تان می شود)

نوع اندازه گیری FMP و موارد تاثیر گذار بر آن

اندازه گیری FMP تقریبا مثل FCP انجام می گیرد و فرق چندانی با یکدیگر ندارند. اما خب با توجه به اینکه FCP قبل از FMP بارگذاری می شود ممکن است سرعت لود آن یکی بر دیگری تاثیر بگذارد اما در کل هرکدام از آن ها جداگانه محاسبه می شوند. مثلا اگر FCP شما در 1.5 ثانیه بارگذاری می شود و FMP شما در 3 ثانیه، عملکرد FCP شما نمره 99 می گیرد و FMP شما چیزی حدود 75 و اینطور نیست که متراژ های آن ها به صورت هماهنگ محاسبه شود.

موارد تاثیر گذار بر روی FMP با موارد تاثیر گذار روی Largest Contentful Paint تقریبا یکسان هستند و هرچیزی که برای LCP توضیح دادیم که باید رعایت شود، برای FMP هم همان موارد باید مد نظر قرار بگیرند که البته موارد مربوط به هرکدام از این ها را به صورت جداگانه در مقالات مربوط به ارور های Core Web Vitals توضیح خواهیم داد.


نوع اندازه گیری FMP و موارد تاثیر گذار بر آن

اندازه گیری FMP تقریبا مثل FCP انجام می گیرد و فرق چندانی با یکدیگر ندارند. اما خب با توجه به اینکه FCP قبل از FMP بارگذاری می شود ممکن است سرعت لود آن یکی بر دیگری تاثیر بگذارد اما در کل هرکدام از آن ها جداگانه محاسبه می شوند. مثلا اگر FCP شما در 1.5 ثانیه بارگذاری می شود و FMP شما در 3 ثانیه، عملکرد FCP شما نمره 99 می گیرد و FMP شما چیزی حدود 75 و اینطور نیست که متراژ های آن ها به صورت هماهنگ محاسبه شود.

موارد تاثیر گذار بر روی FMP با موارد تاثیر گذار روی Largest Contentful Paint تقریبا یکسان هستند و هرچیزی که برای LCP توضیح دادیم که باید رعایت شود، برای FMP هم همان موارد باید مد نظر قرار بگیرند که البته موارد مربوط به هرکدام از این ها را به صورت جداگانه در مقالات مربوط به ارور های Core Web Vitals توضیح خواهیم داد.

معیار های Web Vitals

First Input Delay چیست؟

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

 

مبحث First Input Delay یا همان FID نه به طور مستیقیم، بلکه با یکسری معیار های خاص می خواهد تجربه اولیه کاربری را به عنوان یکی از معیار های Web Vitals بهبود ببخشد. اول از همه ما باید بدانیم که First Input Delay چیست؟ FID در واقع اشاره به مدت زمانی دارد که طول می کشد تا کاربر بتواند با سایت اولین تعامل را برقرار کند. حال این تعامل می تواند کلیک بر روی یک المان، کلیک بر روی دکمه یا لینک و یا هر کاری باشد که کاربر در صفحه سایت شما انجام می دهد.

به بیان ساده تر بخواهیم بگوییم FID به این موضوع اشاره دارد که دقیقا زمانی که کاربر اقدام به فعالیتی در سایت می کند چه مقدار طول می کشد که این عمل انجام شود و مسلما که کاربر انتظار دارد که این کار هرچه سریعتر انجام گیرد. حال بیایید کمی عمیق تر وارد مبحث First Input Delay بشویم.

First Input Delay چگونه تخمین زده می شود؟

شاید برای سایت های ما این موضوع غیر ممکن به نظر برسد اما یک FID خوب از نظر گوگل زیر ۱۰۰ میلی ثانیه است. دقت کنید که داریم در رابطه با واحد اندازه گیری خیلی کوچکی صحبت می کنیم. البته این را هم باید اضافه کرد که وقتی داریم صحبت از FID می کنیم منظور ما این نیست که زمانی که بر روی صفحه می زنیم تا باز شود ۱۰۰ میلی ثانیه بعدش باید ما قادر باشیم تا با صفحه تعامل برقرار کنیم. (اصلا امکان نداره همچین چیزی!) شما باید این موضوع را در نظر داشته باشید که FID در واقع صرفا در تعریف این است که کاربر چقدر طول می کشد که اولین تعاملش را با صفحه برقرار کند. بلکه در واقع FID در مفهوم به این معناست که وقتی کاربر برای اولین بار بر روی یک المان در صفحه کلیک می کند چه مدت زمانی طول می کشد که مرورگر پاسخ این کلیک را بدهد.

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

معمولا به جز یکسری موارد مانند لینک ها، معمولا FID سر و کار زیادی با جاوا اسکریپت دارد. به این خاطر که معمولا FID به عمل و عکس العمل می پردازد و هدفش این است React سایت به Act کاربر در سریعترین زمان ممکن انجام بگیرد.

چه مواردی را برای FID باید رعایت کنیم؟

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

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

البته که بهینه سازی First Input Delay فقط مختص به اسکریپت ها نیست. اما در ادامه به شما خواهیم گفت که چه موارد دیگری روی FID تاثیر می گذارند و بیشتر برای رفع ارور های آن چه کار هایی باید انجام دهیم.

 

به سایت حرفه ای نیاز داری ؟ همین الان سفارش بده تا تخفیف های ویژه رو از دست ندی

Time to Interactive چیست؟

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

متراژ Time to Interactive یکی از متراژ های مهم در سئو سایت و به طور کلی طراحی سایت به حساب می آید. این متراژ نشان دهنده این است که دقیقا چقدر طول می کشد که صفحه شما به طور کامل برای فعالیت کاربرتان بارگذاری شود. یعنی به طور رسمی کاربر بتواند فعالیت های خودش را در سایت انجام دهد و همه چیز هم سر جای خودش باشد.

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

چگونه Time to Interactive خوب داشته باشیم؟

متراژ TTI در واقع می توان گفت نشان دهنده بارگذاری 70 الی 80 درصد صفحه سایت شماست. اینطور می شود که گفت که این متراژ نمایان گر این موضوع است که چقدر طول می کشد که صفحه شما به کامل ترین کارایی برسد. اگر سایت شما بعد از 2.2 ثانیه کاملا برای تعامل کاربر بارگذاری شود، نمره 99 را از لایت هاس و پیج اسپید در بخش TTI دریافت خواهید کرد که مسلما رسیدن به همچین تایم لودی بسیار رویایی و بعید است. (حداقل برای سایت های ما) اما به طور کلی Time to Interactive ما بهتر است بیش از 3.8 ثانیه طول نکشد. زمانی هم که TTI ما از 3.9 تا 7.3 ثانیه باشد هم باز مشکلی ندارد اما جای بهبود دارد. بهتر است عدد از 7.3 ثانیه بیشتر نشود که در آن صورت TTI ما به مرحله بحرانی خودش می رسد.

یادتان هست که به شما گفتیم که رفع ایرادات FID در گرو رفع ایرادات TTI و TBT است که در اینجا می خواهیم موارد مرتبط با TTI را بررسی کنیم ک بیشتر تمرکز آن هم بر روی جاوا اسکریپت هایی است که در صفحه سایت ما وجود دارند.

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

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

Total Blocking Time چیست؟

بارگذاری یک صفحه از سایت شما در یک آن متوقف می شود. این توقف به این منظور اتفاق می افتد که برای بارگذاری تسک اصلی نیاز است بارگذاری در جایی از لود بلوکه شود تا صفحه بتواند بهتر به لود خودش ادامه دهد. این بلوکه شدن که به آن Total Blocking Time گفته می شود، درست بین بارگذاری First Contentful Paint و Time to Interactive اتفاق می افتد.

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

مقوله و متراژ TBT به طور کلی با TTI در ارتباط است و تقریبا هر مورد موثر بر روی TTI تاثیر مستقیم بر Total Blocking Time هم می گذارد. اینکه TBT ما هم چقدر باشد بستگی به تسک مورد نظر دارد که TBT ما می تواند از 3 میلی ثانیه تا حتی خیلی بیشتر هم طول بکشد. مسلما هرچقدر زمان بلوکه شدن تسک کمتر باشد، عملکرد سایت هم بهتر است. برای اینکه بدانید چه مواردی هم بر روی TBT تاثیر می گذارند، می توانید موارد مرتبط با Time to Interactive را یکبار دیگر مطالعه کنید.

 

Cumulative Layout Shift چیست؟

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

اگر بخواهیم یک تعریف دقیق از Cumulative Layout Shift ارائه بدهیم باید بگوییم CLS یکی از معیار های Web Vitals است که مجموعه تغییرات غیر قابل انتظار در صفحه را نسبت به زمانی که صفحه برای کاربر قابل نمایش است اندازه گیری می کند. Cumulative Layout Shift هم مانند دیگر موارد Core Web Vitals اینگونه است که نمی توان معنی دقیق فارسی برای آن پیدا کرد. این عبارت در گوگل ترنسلیت “تغییر چیدمان تجمعی” معنی شده است اما شاید برای دقیق تر معنی کردن آن باید بگوییم “مجموع تغییر چیدمان ها” که شاید بتواند کمی بیشتر حق مطلب را ادا کند.

 

معیار های Web Vitals

نمی توان گفت CLS بین معیار های Web Vitals از همه مهمتر است، اما این معیار از Web Vitals معمولا بیش از باقی موارد قابل لمس است. حتی در کشور ما که سرعت بارگذاری صفحه ممکن است همیشه هم بالا نباشد و کسی چندان توجهی به بارگذاری Largest Contentful Paint نکند و کسی هم متوجه نشود که بعد از کلیک روی المان چند میلی ثانیه طول می کشد که المان به ما پاسخ بدهد و بحث First Input Delay هم برای کاربر چندان مطرح نیست، موضوعی مانند ظاهر شدن ناگهانی یک دکمه بالای یک دکمه دیگر که باعث شود جای دکمه مورد نظر عوض شود و کلیک ما اشتباهی روی دکمه ای که مد نظرمان نیست ثبت شود، مسلما به چشم همه می آید.

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

معیار های CLS چه چیز هایی هستند؟

برای بوجود آمدن یک تجربه کاربری خوب بهترین نمره برای CLS در واقع 0.1 می باشد. اینجا دیگر حرف از ثانیه و میلی ثانیه نیست. در واقع ما اینجا یک مقدار تقریبی داریم که حتی نباید به یک عدد بالای 1 برسد. اینطور باید در نظر گرفته شود که شما به ازای بارگذاری 75 درصد از صفحه سایتتان باید کمتر از 0.1 تغییر غیر منتظره در سایتتان داشته باشید که بتوانید نمره کامل CLS را دریافت کنید. با زبان بی زبانی گوگل دارد به ما می فهماند که این تنها یک متراژ اندازه گیری است و شما تا جایی که می شود اصلا نباید که تغییر غیر منتظره در سایتتان داشته باشید و همه چیز باید از قابل بارگذاری شوند و Render کامل هم از آن ها گرفته شود.

در واقع Layout Shift ها با Layout Instability API توصیف می شوند. این ابزار اطلاعات دقیقی از Layout-shift به ما می دهد که نشان می دهد آیا اگر یک المان داخل صفحه ظاهر می شود، ممکن است موقعیت خودش را تغییر دهد؟ اگر آره این اتفاق چگونه می افتد و چه تاثیری دارد؟ به این نوع المان ها هم اصطلاحا المان های ناپایدار یا Unstable Elements می گویند. در نظر داشته باشید که Layout Shift زمانی اتفاق می افتد که المانی که در حال حاضر وجود دارد موقعیتش تغییر بکند. زمانی که یک المان جدید به DOM اضافه شود یا یک المان سایزش تغییر کند اما تاثیری بر موقعیت مکانی المان نگذارد Layout Shift اتفاق نیوفتاده است. دقت داشته باشید که کلمه Shift معمولا به تغییر موقعیت اشاره دارد که با کلمه Change که تغییر کلی است در مواردی متفاوت است.

به منظور محاسبه CLS، مرورگر نگاهی به Viewport صفحه سایت و حرکت المان های ناپایدار در ویوپورت بین دو فریم رندر گرفته شده از صفحه می اندازد. امتیاز Layout Shift به این صورت با دو نوع از اندازه گیری این حرکت انجام می شود: Impact Fraction یا به اصطلاح “مقدار تاثیر” و Distance Fraction یا “مقدار فاصله” که از فرمول زیر هم بدست می آید.

layout shift score = impact fraction * distance fraction

Impact Fraction

متراژ Impact Fraction به تاثیری که المان ناپایدار بر ویوپرت صفحه شما در دو قاب قبل از تغییر موقعیت و بعد از تغییر موقعیت می گذارد اشاره می کند. در تصیر زیر به وضوح می توانید ببینید که متن در قاب اول در کجا قرار داشته و در حال حاضر هم در کجا قرار دارد و چقدر این موضوع بر روی Viewport تاثیر گذاشته است.

Distance Fraction

متراژ Distance Fraction به فاصله ای اشاره می کند که المان در قاب اول Viewport طی کرده است که در موقعیت بعدیش که در قاب دوم می باشد قرار بگیرد. المان ناپایدار ممکن است چه به صورت عمودی و چه به صورت افقی جا به جا شود که در تصویر زیر می توانید فاصله ای که المان متن جا به جا شده است را مشاهده کنید.

چگونه یک CLS خوب داشته باشیم؟

در اینجا می خواهیم به شما بگوییم که چگونه می توانید یک Cumulative Layout Shift خوب به عنوان یکی از معیار های Web Vitals داشته باشید. با رعایت چند نکته معمولا بهترین نتیجه برای شما بدست خواهد آمد. (در نظر هم داشته باشید که معمولا سایت های وردپرسی خیلی کم امکان دارد که در این مورد دچار مشکل شوند)

اول اینکه برای المان های عکس و ویدیو حتما Attribute سایز را تعریف کنید یا با ابزار CSS Aspect Ratio Boxes فضای مورد نیاز المان را دریابید. همچنین می توانید از موارد Unsized-media Feature Policy هم کمک بگیرید.

هرگز بدون اجازه کاربر به صورت ناگهانی در المان خودتان تغییر ایجاد نکنید و در صورت نیاز امکانی برای کاربر فراهم کنید که برای تغییر موقعیت المان خودش اقدام کند و تغییر در جهت اقدام خود کاربر باشد. در نظر داشته باشید که فقط تغییر موقعیت ناگهانی المان بر CLS تاثیر منفی دارد و تغییری که راستای خواسته کاربر باشد هیچ تاثیر منفی ای بر این معیار Web Vital ندارد.

اگر المان شما متحرک یا انیمیشنی است حتما چک کنید این انیمیشن بر محتوای المان دیگر تاثیر نمی گذارد.

کلام آخر

قبل از اینکه مقاله را تمام کنیم بگذارید با هم رو راست باشیم. مسلم است که انجام تمامی این کار ها و رعایت معیار های Web Vitals زمان زیادی می برد و گاهی ممکن است امکان پذیر نباشد. ممکن است همچنان شما بخواهید از روش های کلاه خاکستری و کلاه سیاه برای سئو سایت استفاده کنید و با خودتان هم بگویید قرار هم نیست که هرگز گوگل هم شما را پنالتی کند. اما در نظر داشته باشید در حال حاضر در سال 2021 هستیم و دیگر روش های قدیمی یا غیر سفید سئو دارند فرسوده می شوند. حتی اگر هم گوگل شما را پنالتی نکند دیگر این کاربر است که انتخاب می کند از کدام لندینگ پیج صفحه SERP استفاده کند.

در این مقاله تلاش کردیم بتوانیم هم توضیح تقریبا دقیقی در رابطه با Core Web Vitals بدهیم و هم بکوشیم بتوانیم به شما آموزش دهیم که چگونه معیار های Web Vitals را به خوبی رعایت کنید. مسلما اما کم و کسری هایی هم ممکن است وجود داشته باشد که از این بابت از شما عذر می خواهیم.

عمده اطلاعات از وب سایت Web.dev الهام گیری شده اند و تلاش شده است که مفهوم رسانی آن ها به فارسی راحت انجام بگیرد اما باز هم بهتر است برای مطالعه این مطلب و درک کامل آن آشنایی متوسط با سئو داشته باشید و کمی هم از کدنویسی سر دربیاورید. هرچند در یکسری ویدیو که برایتان در آینده آماده می کنیم به طور کامل موارد مورد نیاز رفع ارور های مربوط به Core Web Vitals را به شما آموزش خواهیم داد.

ممنون که تا پایان مقاله همراه ما بودید. امیدوارم توانسته باشیم به شما در این راستا کمکی کرده باشیم.