UX Archives - AwardSpace.com https://www.awardspace.com/tag/ux/ Free Web Hosting with PHP, MySQL, Email Sending, No Ads Wed, 13 Mar 2024 14:02:45 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://www.awardspace.com/wp-content/uploads/2022/09/awardspace-favicon-120x120.png UX Archives - AwardSpace.com https://www.awardspace.com/tag/ux/ 32 32 Complementary Colors https://www.awardspace.com/glossary/complementary-colors/ Tue, 24 Oct 2023 11:40:15 +0000 https://www.awardspace.com/?p=71429 In web design, it is important to know how to use colors to create the necessary color combinations that are needed for your work. Their mixing and combining or the so-called color theory. In order to create these color combinations first you need to understand what color wheel is and how to use complementary colors. […]

The post Complementary Colors appeared first on AwardSpace.com.

]]>
In web design, it is important to know how to use colors to create the necessary color combinations that are needed for your work. Their mixing and combining or the so-called color theory.

In order to create these color combinations first you need to understand what color wheel is and how to use complementary colors.

 

What are complementary colors?

Complementary colors represent two colors on the color wheel, that are opposite to one another. For example, a complementary color to red is green, or the color blue is yellow. The complementary colors consist of a single primary color and one secondary color. But before we get into the definition of the primary color and how to create a secondary color. First, we need to explain what is a color wheel.

 

What is the color wheel?

The color wheel is a visual representation of colors with their hues around a circle. Color wheels show the relationship between the primary colors, secondary colors, and tertiary colors.

For example, primary colors are blue, red, and yellow on the RYB color wheel. By mixing equal parts of two primary colors, you can create a secondary color. In this case, when we combine red and yellow we get a secondary color which is orange. Yellow and blue create green. And the mix of red and blue is purple. Then tertiary colors are created by mixing together one secondary color and one primary color.

 

How to use complementary colors?

One thing that makes an impression is that every set of complementary colors contains one warm color and one cool color. For example, cool colors are blue, green, and purple, and warm colors include red, orange, and yellow.

In order to attract the user’s eye more easily, you can use simultaneous contrast.  This contrast includes a warm color to complement a cool color and is the highest contrast found on a color wheel. For example, artists use complementary colors next to each other when painting a vivid sunset. Or on holidays such as Christmas people use to decorate with colors red and green.

In certain situations, the complementary colors with similar strengths are competing with one another. And this may actually cause the two colors to appear more harsh. The result can seem quite garish.

To avoid this use one of them as the dominant color. Then the second complementary color will become an accent color to the first one. Use the dominant color in larger areas and the accent color in smaller doses. This creates a balance in strength, allowing the eye to take it all in without feeling overwhelmed.

The post Complementary Colors appeared first on AwardSpace.com.

]]>
CSS (Cascading Style Sheets) https://www.awardspace.com/glossary/css-cascading-style-sheets/ Wed, 20 Sep 2023 07:31:28 +0000 https://www.awardspace.com/?p=68789 World Wide Web is a subgroup of the Internet that involves websites and webpages that users can access via a web browser. Since all sites and pages are text documents, they need to be written in descriptive language that specifies the page structure. This language is called HTML (hypertext markup language). HTML makes the page […]

The post CSS (Cascading Style Sheets) appeared first on AwardSpace.com.

]]>
World Wide Web is a subgroup of the Internet that involves websites and webpages that users can access via a web browser. Since all sites and pages are text documents, they need to be written in descriptive language that specifies the page structure. This language is called HTML (hypertext markup language).

HTML makes the page only readable without explicit styling. To control exactly how HTML elements look in the browser using whatever design you want. This is where CSS (Cascading Style Sheet) comes in.

 

What is CSS (Cascading Style Sheet)?

CSS is a style sheet language used for formatting content in HTML web pages. So it’s important to remember that CSS is not a programming language. Cascading style sheet is a design language that makes a website look more appealing than just pieces of text.

This is a design tool that often is combined with HTML or XHTML markup languages and requires creativity.

 

Where can we use CSS?

With CSS you can change the appearance and formatting of text, tables, and other elements separately from the content itself.

Cascading Style Sheet can be used to change the color and size of headings and links and even to create effects such as animation.

Based on where the CSS is added in the HTML document there are three types: Internal, External, and Inline. So in order to know which one is best to style our web pages with, we need to tell them apart.

 

What are the types of CSS?

 

Internal CSS (Cascading Style Sheet)

Internal CSS is also called embedded CSS. This type of cascading sheet is when the CSS code is inserted in the <head> section of the HTML document. This defines the style for a single page. This CSS style will be reloaded every time the website is refreshed. For example, you can use an internal style to assign colors to paragraphs on your page.

 

External CSS (Cascading Style Sheet)

With this type, everything is done externally on a .css file. This means you can do all the styling on a separate file, called a stylesheet. Then you have to create a link to this CSS stylesheet and put it in the <head> section of your document. You can apply the CSS to any page that you want. This helps you define the style for many HTML pages. As a result, by manipulating only one file you can change the whole look of the website.

 

Inline style (Cascading Style Sheet)

This style works with specific elements that have the <style> tag. So we can apply a unique style to a single HTML element. This makes it unfit for use on large-scale projects. In this case, we’ll have to search in HTML code to pick out where we’ve used inline styling.

 

Using CSS improves the page speed and the user experience.

CSS is a rule-based language. This allows you to use one CSS rule and apply it to all appearances of a certain tag within the HTML document. Which improves site speed. Also, it’s easy to improve user experience as CSS allows user-friendly formatting. You can apply specific formatting rules and styles to multiply pages with one string of code.

The post CSS (Cascading Style Sheets) appeared first on AwardSpace.com.

]]>
Breadcrumb https://www.awardspace.com/glossary/breadcrumb/ Mon, 18 Sep 2023 14:07:55 +0000 https://www.awardspace.com/?p=68441 On websites that have a lot of pages, users need navigation to find their way around more easily. Like the breadcrumbs in the fairy tale “Hansel and Gretel,” they allow the users to retrace their steps back to where they started.   What is a breadcrumb? A “breadcrumb” (or breadcrumb trail) is a small text […]

The post Breadcrumb appeared first on AwardSpace.com.

]]>
On websites that have a lot of pages, users need navigation to find their way around more easily. Like the breadcrumbs in the fairy tale “Hansel and Gretel,” they allow the users to retrace their steps back to where they started.

 

What is a breadcrumb?

A “breadcrumb” (or breadcrumb trail) is a small text path, located at the top of a page that shows the user’s location on a website or web application. Breadcrumbs are designed to make navigation more easy for the users. By providing a simple way to view the directory path of the current folder or page on the website. Each of the directories that shows the website hierarchy is clickable, providing quick access to parent folders.

 

Why breadcrumbs are important?

Breadcrumbs have a path-based structure and are important navigation marks to fully optimize a website. These elements not only help users navigate the website but also help Google understand how the site is structured.

There are several types of breadcrumbs depending on what elements are included on the breadcrumb tail.

 

What are the types of breadcrumbs?

 

Hierarchy-based breadcrumbs

These types of breadcrumbs indicate where the user is in a page structure and how many steps can he take to return to the main page.

 

Path-based breadcrumbs

Path-based breadcrumbs are also called history-based breadcrumbs. These navigation marks show the actual pages the user has visited. They are rarely used as the “back” button does the same job.

 

Attribute-based breadcrumbs

These breadcrumbs display the filters or attributes that a user selected on a previous page. We can use them most commonly on e-commerce websites. These elements show which category or filter the user clicked on or the attributes that the user has selected on a particular page. Also, we can implement attribute-based breadcrumbs as tags for categorizing blog posts and types of content.

A great way to improve user experience is when we add breadcrumbs. These navigation elements make it easier for site visitors and search engines to better understand the website’s structure. Not only that but also the connections with on-site content. Breadcrumbs direct users to other pages on the website and help them stay active decreasing the bounce rate.

The post Breadcrumb appeared first on AwardSpace.com.

]]>
Bounce Rate https://www.awardspace.com/glossary/bounce-rate/ Mon, 18 Sep 2023 13:08:09 +0000 https://www.awardspace.com/?p=68439 In digital marketing, the act of “bouncing” is someone who visits a website and then immediately leaves, without interacting with the site. When the visitor leaves without interacting with the website means that the user comes in, looks around, stays a few seconds, and then leaves.   What is a bounce rate? A bounce rate […]

The post Bounce Rate appeared first on AwardSpace.com.

]]>
In digital marketing, the act of “bouncing” is someone who visits a website and then immediately leaves, without interacting with the site. When the visitor leaves without interacting with the website means that the user comes in, looks around, stays a few seconds, and then leaves.

 

What is a bounce rate?

A bounce rate is a metric that shows the percentage of visitors that land on a page of a website and then leave without taking action. This action could be clicking on a link, making a purchase or even visiting a second page of the website. The metric only counts visits to one page and that is the landing page (the page that led the users to the website).

 

How is calculated?

The bounce rate is calculated by dividing bounced visitors by the total number of users that arrived on the website. But in order to track the website visits, every page’s code on the website should have a Google Analytics tracking ID.

When someone visits the website this code triggers a session. If the visitor leaves the site without taking action the session expires and their visit counts as a “bounce”. But if the user interacts within the website and takes an action that triggers an event. Then the code fires and Google Analytics considers it as not a bounce.

This metric measures how effective is one website relative to the viewers. The bounce rate can be high or low. If the purpose of the website is for users to take a detailed look at it, then a high bounce rate indicates a problem.

 

What is a high bounce rate?

A high bounce rate might indicate that the page didn’t meet the user’s expectations or the content is not relevant to the viewers.

Some other issues for high levels of this metric could be the navigation, site speed, or a site error. It is important for businesses to pay attention to the bounce rate. Over time a high bounce rate negatively impacts search ranking because it indicates poor user experience of the website. To reduce the high levels we could improve the content of the site, copywriting, or user experience.

The only exception for a high bounce rate is if the purpose of the website is only to visit one page. If the purpose of the site is to leave a review or send a message then is normal for users to click away after completing an action.

 

What is a low bounce rate?

A low bounce rate means that users are not leaving after reading only one page. Most of the time lower bounce rate means better user engagement. But if the bounce rate is too low it might be a problem. For example, it could be a technical issue with how the analytics tracking code is integrated into the site.

Often bounce rate is misunderstood as exit rate, but they are different metrics.

 

What is Exit Rate?

Exit rate is a metric that measures the percentage of visitors that exit from a page after viewing several pages on the website.

Bounce rate and exit rate are important indicators of how satisfied the users are with the website’s content. And both of them are highlighting the problems that are causing users to leave the website. Once you are aware of what the potential problems are, you can start investigating further.

The post Bounce Rate appeared first on AwardSpace.com.

]]>