Uname:Linux srv15.ayeezh.ir 4.18.0-553.30.1.el8_10.x86_64 #1 SMP Tue Nov 26 02:30:26 EST 2024 x86_64

بایگانی‌های نکات طراحی سایت - ممتاز دیزاین

برچسب: نکات طراحی سایت

بهترین راه برای طراحی اسلایدر سایت (راهنمای مبتدیان)

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

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

اسلایدر چیست؟

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

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

مزایا و معایب استفاده از اسلایدر

مزایا و معایب طراحی اسلایدر سایت

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

مزیت 1 – افزایش تعامل کاربران

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

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

مزیت 2 – قابلیت نمایش تمام محصولات برتر

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

معایب

معایب استفاده از اسلایدر

یک انتقاد رایج از اسلایدر ها این است که آن ها با دادن گزینه های بسیار زیاد که همه وزن یکسانی دارند، کاربران را تحت تأثیر قرار می دهند. مشکلات دیگری که برای تجربه کاربری ایجاد می شود عبارتند از:

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

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

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

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

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

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

اگر از Lazy loading استفاده شود، سئو و تجربه کاربری هر دو بهبود می‌یابند، عکس‌هایی که بعداً در Carousel ظاهر می‌شوند، نیازی به بارگذاری ندارند تا زمانی که به آن ها نیاز باشد. مطمئن شوید که طراحان وب سایت شما تصاویر را بهینه کرده و از کوچک ترین اندازه تصویر برای کاهش زمان بارگذاری صفحه استفاده می کنند.

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

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

سئو طراحی اسلایدر سایت

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

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

منبع: graphene.digital

برچسب‌ها:,

رنگ هایی که ممکن است بر طراحی سایت شما تأثیر منفی بگذارند

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

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

با این اوصاف از چه رنگ هایی باید در طراحی صفحات وب سایت خود اجتناب کنیم؟

مشکی خالص

رنگ مشکی در طراحی سایت

بیایید با سیاه شروع کنیم، آن هم سیاه خالص چیزی که در HTML به عنوان #000000 کد گذاری شده است. این رنگ باعث غافلگیر شدن کاربر می شود. صفحات شما نباید به گونه ای باشند که گویی مشکی همه جا را فرا گرفته است. مثلاً نباید متن و اکثر صفحات وب به گونه ای باشد که گویی لباس سیاه بر تن دارد یا آسمان شب سایت را پوشانده است.

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

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

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

رنگ های نئونی در طراحی رابط کاربری سایت

رنگ نئونی در رابط کاربری

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

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

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

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

ترکیبات رنگ با کنتراست بیش از حد بالا

نباید های رنگی طراحی سایت

علاوه بر پرهیز از رنگ‌ های بیش از حد خالص، باید مراقب ترکیب‌ های خاصی از رنگ‌ ها نیز باشید. مثلاً ترکیب قرمز و سبز جزء اصلی فصل کریسمس هستند، اما ترکیب رنگ های قرمز و سبز می تواند تأثیرات منفی بر طراحی سایت شما بگذارد. پرهیز از ترکیب این دو رنگ آن قدر مهم است که ضرب المثلی در بین طراحان وجود دارد که می گوید: “قرمز و سبز هرگز نباید باهم دیده شوند، مگر با وجود رنگی بین آن ها”.

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

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

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

ترکیب رنگ های قرمز و سبز مشکل دیگری نیز از نظر فرهنگی دارد، در دنیای غرب، مردم عادت دارند رنگ قرمز را با توقف یا “No”، و سبز را با برو یا “Yes” مرتبط کنند. این امر مجدداً، مغز را با مجموعه ای متناقض از ورودی ها روبرو می کند که باعث ناراحتی مغز می شود. زمانی که مغز ناراحت باشد، احساس ناراحتی را به فرد هم منتقل می کند و این اصلاً چیزی نیست که ما می خواهیم.

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

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

ترکیبات رنگی با کنتراست بسیار کم

رنگ های کم کنتراست

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

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

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

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

پس زمینه های چند رنگ

طراحی سایت های چند رنگ

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

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

نتیجه:

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

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

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

منبع:

webdesign.org
برچسب‌ها:, , , , , , , , ,

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

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

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

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

10 خطای طراحی فرم سایت و روش های آسان برای رفع آن ها

در اینجا دو مفهوم اساسی را بررسی می کنیم که بسیار مهم هستند.

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

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

اهمیت طراحی فرم وب سایت

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

1. طراحی فرم های طولانی سایت

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

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

با حذف این فرم ورود، شرکت با افزایش درآمد 12 میلیون تومانی روبرو شد. بهترین چیز درباره آنچه Expedia کشف کرد این بود که رشته مورد نظر برای خرید اصلاً مورد نیاز نبود، حتی اجباری هم نبود. اما آنجا بود و کاربران از آن استقبال نکردند.

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

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

راهکار های طراحی فرم های طولانی سایت

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

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

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

2. فیلد های ورودی با نظم نامناسب

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

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

رعایت نظم فیلد های ورودی در طراحی فرم سایت

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

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

3. فیلد های ورودی مبهم

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

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

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

4. عدم رسیدگی یا validation

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

تایید اعتبار در طراحی فرم سایت

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

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

5. ترکیب شدن کنترل های ورودی

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

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

رعایت یکپارچگی فیلد های ورودی

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

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

6. فیلد تمرکزی وجود ندارد

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

عدم وجود نشانگر در فیلد های فرم سایت

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

7. کاربران باید تمام کار های سنگین را انجام دهند

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

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

8. خطا های نا شناخته

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

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

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

9. طراحی دکمه نا مرتب

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

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

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

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

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

10. کپی سریع

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

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

Jessica Enders
قابلیت پر کردن خودکار در طراحی فرم های سایت

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

منبع: justinmind.com

برچسب‌ها:, ,