2019/06/07، 10:21 PM
طراحی سایت و بهینه سازی نرخ تبدیل
طراحی سایت
2019/02/13
MAGBOT +
طراحی سایت در مورد قابلیت استفاده و بخش هنری و زیبایی شناختی کار است، اما تعامل موثر با کاربر جهت افزایش نرخ تبدیل چیز دیگریست.
می خواهم به هر دو نکته بپردازم و سعی کنیم این دو ایده را با بهینه سازی نرخ تبدیل (یا CRO) ادغام کنید . اگر شما همزمان بتوانید نرخ تبدیل را افزایش دهید و همچنین قابلیت استفاده را مناسب نگاه دارید، این پیروزی برای شما است.
یکی از اولین تغییراتی که ممکن است در نظر بگیرید ساخت طرح رنگی متفاوت است. زیرا رنگها تاثيرات حسی دارند و احساسات خاصی را در بازديدکنندگان بیدار می کنند .به طور معمول برای افزایش نرخ تبدیل از رنگ های غیر غالب صفحه استفاده کنید. زیرا توجه بیشتری را به خود جلب می کند، شما می توانید یک مطالعه موردی Hubspot در مورد طراحی دکمه سبز و قرمز است بررسی کنید. جالب است بدانید دکمه سبز عملکرد خوبی در این صفحه ندارد زیرا سبز در حال حاضر یک رنگ غالب در صفحه است. من به عنوان طراح ترجیحم دکمه سبز ولی جهت بهبود نرخ تبدیل دکمه قرمز ظاهرا بهینه تر است.
شبیه هر چیز دیگری در طراحی UI، به کنتراست توجه کنید. مهم نیست چه طرحی داشته باشید.اگر تبدیل هایتان بیشتر مربوط به لینکها یا ثبت نام کاربر می باشد، از رنگها استفاده کنید که بتوانید این عناصر را از صفحه جدا کند.
![[تصویر: 4.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/4.jpg)
به عنوان مثال در صفحه فرود Flinto از دکمه هایی با رنگ روشن جهت کارایی بهتر استفاده می شود. در نهایت تبدیل با استفاده از المانی رخ می دهد که در پایان کاربر با آن تعامل برقرار می کند . ممکن است ایجاد یک حساب جدید باشد، یا یک خرید را انجام دهند یا در خبرنامه سایت ثبت نام کنند.
[/url]
[url=https://designmodo.com/color-psychology-web-design/]
صفحه اصلی ResumeBaking یکی از نمونه های مورد علاقه من است، زیرا آنقدر آشکار است، این کار فوق العاده خوب است. مجموعه ای از آیکون های فلش کوچک به سمت دکمه اصلی اشاره می کنند و کاربر را به کلیک بر روی آن تشویق می کند. این یک روش قوی برای جذب کاربران جدید است .
Lookback در طراحی صفحه اصلی دارای یک فرم ثبت نام است. به جای اینکه تنها با فشار دادن یک دکمه کار صورت گیرد، کاربر همچنین بایستی آدرس ایمیل خود را وارد کند.
![[تصویر: 6.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/6.jpg)
در کل فرم احساس می شود مرز سفیدی با کنتراست بالا المان ها را جدا می کند و در مقابل هدر آبی سبز ظاهر می شود. این طراحی در پایین صفحه نیز استفاده می شود .اگر آپشن های بیشتری داشته باشید می توانید همین روند را ادامه دهید، بعنوان مثال می توانید دو دکمه را ببینید در عین تمایز با رنگبندی صفحه اصلی از یکدیگر نیز جدا هستند. این تکنیک در صفحه اصلی sketch استفاده می شود و من فکر می کنم که این کار به خوبی انجام شده است.
![[تصویر: 7.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/7.jpg)
هر آنچه که شما می توانید انجام دهید برای برجسته کردن عملگر اصلی صفحه ، مسیری طولانی در جهت بهینه سازی تبدیل خواهد بود. شما ممکن است از محتوای عالی نوشته باشید اما به طراحی وب سایت خود فکر نکنید.
به چگونگی طراحی سایت خود و محتوای که برای CTA دارید، نگاه کنید. آیا واقعا کاربر را تشویق به اقدام می کند؟ آیا متن به اندازه کافی خوانا است؟ آیا پس از خواندن آن احساس الهام می کنند؟
![[تصویر: 8.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/8.jpg)
صفحه اصلی AdEspresso یک نمونه درخشان برای متن و دکمه است. دکمه سبز توجه بیشتری نسبت به عنوان جلب می کند، به علاوه آن سبز روشن است و واقعا مخالف با بقیه طرح صفحه است.
با اضافه کردن کلمات مانند "free" شما به کاربر می گویید که آمده ورود و استفاده از سیستم است. به یاد داشته باشید قبل از هر کاری، ابتدا بایدتوجه را جلب کنید. متن بزرگ و خوانا با محتوای ضرب آهنگ دار مطمئنا توجه کاربر را سریع جلب می کند
![[تصویر: 9.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/9.jpg)
متن وب ممکن است به عنوان بخشی از طراحی بصری به نظر نرسد اما مطمئن باشید بخشی از تجربه کاربری است.
به عنوان مثال این مطالعه موردی که به سادگی از کلمه " رایگان" در نزدیکی CTA اضافه شده است. این کلمه اضافی نرخ تبدیل را حدود 28٪ افزایش داد که یک پرش بسیار بزرگ است.
در دنياي طراحي، هيچگاه هيچگاه نمي توانيد هيچ دليلي داشته باشيد بدون آنکه ابتدا آزمايشات آن را ثابت کرده باشند. مطالعه موردی جالب ازHighrise برای مقایسه دو صفحه یکی پر از گرافیک و فلش در مقایسه با یک فرم طولانی است. صفحه گرافیکی سنگین است و با به نظر می رسد خیلی بهتر باشد، اما در صفحه طولانی تر نرخ تبدیل 37٪ افزایش یافته است!
![[تصویر: 10.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/10.jpg)
تیم آزمایش A / B دیگری را انجام داد در برابر یک صفحه اصلی با عکس یک شخص واقعی در پس زمینه. ایجاد یک تجربه شخصی تر نرخ تبدیل بیش از 100٪ افزایش یافت.
تصور این است صفحه گرافیکی سنگین بهتر عمل کند. با این وجود از طریق آزمایش طرح های مختلف تیم درس های ارزشمندی را آموخت: هرگز فرض نکنید!
![[تصویر: 11.jpg]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d9%85%d8%aa-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%b3%d8%b1%d8%b9%d8%aa/11.jpg)
من پیشنهاد می کنم چند ایده طراحی مختلف برای صفحه اصلی (یا صفحه فرود) را تصور کنید و ببینید چه چیزی را می توانید تغییر دهید که ممکن است نرخ تبدیل را افزایش دهد.
مایل باشید طرح کلی فعلی خود را فراموش کنید و طرح کاملا جدیدی را آزمایش کنید. ممکن است کاملا نتیجه بی تاثیر باشد، اما ممکن است منجر به نرخ تبدیل بسیار بیشتر شود.
مقالات مرتبط
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9...%D8%A7.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%D8%A8%D9%87%D8%A8%D9%88%D8%AF-UX-%D8%A8%D8%A7%D8%B2%D8%AF%DB%8C%D8%AF-%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AA%D8%AC%D8%A7%D8%B1%D8%AA-%D8%A7%D9%84%DA%A9%D8%AA%D8%B1%D9%88%D9%86%DB%8C%DA%A9-%D8%B4%D9%85%D8%A7/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%D8%A8%D9%87%D8%A8%D9%88%D8%AF-UX-%D8%A8%D8%A7%D8%B2%D8%AF%DB%8C%D8%AF-%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AA%D8%AC%D8%A7%D8%B1%D8%AA-%D8%A7%D9%84%DA%A9%D8%AA%D8%B1%D9%88%D9%86%DB%8C%DA%A9-%D8%B4%D9%85%D8%A7.jpg)
راههای بهبود UX طراحی وب سایت تجارت الکترونیک
![[تصویر: Top-17-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D...C-2019.jpg]](http://magbot.ir//Top-17-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D9%88-%D8%B1%D9%88%D9%86%D8%AF-UI-%D8%A8%D8%B1%D8%A7%DB%8C-2019/Top-17-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D9%88-%D8%B1%D9%88%D9%86%D8%AF-UI-%D8%A8%D8%B1%D8%A7%DB%8C-2019.jpg)
17روند طراحی سایت و UI برای سال 2019
![[تصویر: %D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%86%D9...%D8%AF.jpg]](http://magbot.ir//%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%86%D9%85%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1%D9%87%D8%A7-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%A9%D9%87-%D9%81%D8%B1%D9%88%D8%B4-%D9%85%DB%8C-%D8%AF%D9%87%D8%AF/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%86%D9%85%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1%D9%87%D8%A7-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%A9%D9%87-%D9%81%D8%B1%D9%88%D8%B4-%D9%85%DB%8C-%D8%AF%D9%87%D8%AF.jpg)
اصول ایجاد صفحه نمونه کارها برای طراحان وب سایت
طراحی سایت
2019/02/13
MAGBOT +
طراحی سایت در مورد قابلیت استفاده و بخش هنری و زیبایی شناختی کار است، اما تعامل موثر با کاربر جهت افزایش نرخ تبدیل چیز دیگریست.
می خواهم به هر دو نکته بپردازم و سعی کنیم این دو ایده را با بهینه سازی نرخ تبدیل (یا CRO) ادغام کنید . اگر شما همزمان بتوانید نرخ تبدیل را افزایش دهید و همچنین قابلیت استفاده را مناسب نگاه دارید، این پیروزی برای شما است.
یکی از اولین تغییراتی که ممکن است در نظر بگیرید ساخت طرح رنگی متفاوت است. زیرا رنگها تاثيرات حسی دارند و احساسات خاصی را در بازديدکنندگان بیدار می کنند .به طور معمول برای افزایش نرخ تبدیل از رنگ های غیر غالب صفحه استفاده کنید. زیرا توجه بیشتری را به خود جلب می کند، شما می توانید یک مطالعه موردی Hubspot در مورد طراحی دکمه سبز و قرمز است بررسی کنید. جالب است بدانید دکمه سبز عملکرد خوبی در این صفحه ندارد زیرا سبز در حال حاضر یک رنگ غالب در صفحه است. من به عنوان طراح ترجیحم دکمه سبز ولی جهت بهبود نرخ تبدیل دکمه قرمز ظاهرا بهینه تر است.
شبیه هر چیز دیگری در طراحی UI، به کنتراست توجه کنید. مهم نیست چه طرحی داشته باشید.اگر تبدیل هایتان بیشتر مربوط به لینکها یا ثبت نام کاربر می باشد، از رنگها استفاده کنید که بتوانید این عناصر را از صفحه جدا کند.
به عنوان مثال در صفحه فرود Flinto از دکمه هایی با رنگ روشن جهت کارایی بهتر استفاده می شود. در نهایت تبدیل با استفاده از المانی رخ می دهد که در پایان کاربر با آن تعامل برقرار می کند . ممکن است ایجاد یک حساب جدید باشد، یا یک خرید را انجام دهند یا در خبرنامه سایت ثبت نام کنند.
[/url]
[url=https://designmodo.com/color-psychology-web-design/]
صفحه اصلی ResumeBaking یکی از نمونه های مورد علاقه من است، زیرا آنقدر آشکار است، این کار فوق العاده خوب است. مجموعه ای از آیکون های فلش کوچک به سمت دکمه اصلی اشاره می کنند و کاربر را به کلیک بر روی آن تشویق می کند. این یک روش قوی برای جذب کاربران جدید است .
Lookback در طراحی صفحه اصلی دارای یک فرم ثبت نام است. به جای اینکه تنها با فشار دادن یک دکمه کار صورت گیرد، کاربر همچنین بایستی آدرس ایمیل خود را وارد کند.
در کل فرم احساس می شود مرز سفیدی با کنتراست بالا المان ها را جدا می کند و در مقابل هدر آبی سبز ظاهر می شود. این طراحی در پایین صفحه نیز استفاده می شود .اگر آپشن های بیشتری داشته باشید می توانید همین روند را ادامه دهید، بعنوان مثال می توانید دو دکمه را ببینید در عین تمایز با رنگبندی صفحه اصلی از یکدیگر نیز جدا هستند. این تکنیک در صفحه اصلی sketch استفاده می شود و من فکر می کنم که این کار به خوبی انجام شده است.
هر آنچه که شما می توانید انجام دهید برای برجسته کردن عملگر اصلی صفحه ، مسیری طولانی در جهت بهینه سازی تبدیل خواهد بود. شما ممکن است از محتوای عالی نوشته باشید اما به طراحی وب سایت خود فکر نکنید.
به چگونگی طراحی سایت خود و محتوای که برای CTA دارید، نگاه کنید. آیا واقعا کاربر را تشویق به اقدام می کند؟ آیا متن به اندازه کافی خوانا است؟ آیا پس از خواندن آن احساس الهام می کنند؟
صفحه اصلی AdEspresso یک نمونه درخشان برای متن و دکمه است. دکمه سبز توجه بیشتری نسبت به عنوان جلب می کند، به علاوه آن سبز روشن است و واقعا مخالف با بقیه طرح صفحه است.
با اضافه کردن کلمات مانند "free" شما به کاربر می گویید که آمده ورود و استفاده از سیستم است. به یاد داشته باشید قبل از هر کاری، ابتدا بایدتوجه را جلب کنید. متن بزرگ و خوانا با محتوای ضرب آهنگ دار مطمئنا توجه کاربر را سریع جلب می کند
متن وب ممکن است به عنوان بخشی از طراحی بصری به نظر نرسد اما مطمئن باشید بخشی از تجربه کاربری است.
به عنوان مثال این مطالعه موردی که به سادگی از کلمه " رایگان" در نزدیکی CTA اضافه شده است. این کلمه اضافی نرخ تبدیل را حدود 28٪ افزایش داد که یک پرش بسیار بزرگ است.
در دنياي طراحي، هيچگاه هيچگاه نمي توانيد هيچ دليلي داشته باشيد بدون آنکه ابتدا آزمايشات آن را ثابت کرده باشند. مطالعه موردی جالب ازHighrise برای مقایسه دو صفحه یکی پر از گرافیک و فلش در مقایسه با یک فرم طولانی است. صفحه گرافیکی سنگین است و با به نظر می رسد خیلی بهتر باشد، اما در صفحه طولانی تر نرخ تبدیل 37٪ افزایش یافته است!
تیم آزمایش A / B دیگری را انجام داد در برابر یک صفحه اصلی با عکس یک شخص واقعی در پس زمینه. ایجاد یک تجربه شخصی تر نرخ تبدیل بیش از 100٪ افزایش یافت.
تصور این است صفحه گرافیکی سنگین بهتر عمل کند. با این وجود از طریق آزمایش طرح های مختلف تیم درس های ارزشمندی را آموخت: هرگز فرض نکنید!
من پیشنهاد می کنم چند ایده طراحی مختلف برای صفحه اصلی (یا صفحه فرود) را تصور کنید و ببینید چه چیزی را می توانید تغییر دهید که ممکن است نرخ تبدیل را افزایش دهد.
مایل باشید طرح کلی فعلی خود را فراموش کنید و طرح کاملا جدیدی را آزمایش کنید. ممکن است کاملا نتیجه بی تاثیر باشد، اما ممکن است منجر به نرخ تبدیل بسیار بیشتر شود.
راههای بهبود UX طراحی وب سایت تجارت الکترونیک
17روند طراحی سایت و UI برای سال 2019
اصول ایجاد صفحه نمونه کارها برای طراحان وب سایت
