Website User Experience

UX – User Experience

website user experienceA good website user experience communicates to the user where they are, and where they can go on a web page. Usability and user experience are two concepts that form the principles of modern web development.

A good user experience happens when a website is efficient, memorable, and learnable. User experience (often referred to as ‘UX‘) is very subjective. It focuses on how users feel about a website. UX is hard to predict, but getting to know who the likely users are will help ensure a happy website user experience. Design and develop a site for the user, and UX should be positive.

Tell the Users Where They Can Go

If the user does not know where they can go on a site, then they are likely to leave.

There are general types of navigation for interactive web design.

  • The site can be hierarchical, where there is a clear and simple path as to where the user should go. It starts at a very broad element, and ends at a very specific element.
  • The site can be global, where you have top-level sections on each page. This allows the users to easily go back if they need to.
  • Finally, a site can be local, which means navigation occurs within the text of the web page.

Start the Website User Experience with a Site Map

A hand drawn site map is useful to plan the UX you want users to have on a website. A site map is a way to visualize navigation of the site.

Below is an example of a simple site map for an image gallery. It is a good idea to draw a low-tech site map. Post-it notes on a whiteboard work well. They allow for easy change as the planning evolves.

A site map
A low-tech site map using post-it notes.

Website Breadcrumbs Navigation

A well planned UX also tells the user where they are. A common way to do this is to have breadcrumbs navigation.

Looking back to the site map for the image gallery, you might have a bread crumb navigation trail as follows:


++++Home >> albums >> album2 >> photos

This would usually appear at the top of your content. The last ‘breadcrumb’ tells the users where they are. The other ‘breadcrumbs’ allow the users to have easy website navigation back through their trail.

Absolute Path and Relative Path

There are behind the scenes, web design issues regarding absolute path and relative path links. These two paths are demonstrated by looking at the file names in the picture below.

absolute path and relative path links

The relative path assumes you have access to all the files within the same directory. The absolute path gives the full domain name for each link.

There is no consensus regarding the use of absolute and relative path . However, some developers may use the absolute path to help ensure the target page gets indexed by search engines. An absolute path is also error-proof if the website navigation is later changed.

Modern Web Design Trends

A grid layout, such as bootstrap, is all the rage in modern web design trends. When planning a website, try to picture content as a series of grids or boxes. A grid layout, if done right, can be mobile-friendly, fluid and responsive. It allows for cross browser compatibility and full functionality on different device sizes, such as mobile devices.

The grid structure is really useful for modern web development because it has built-in whitespace that helps users find what they are looking for. Further, it responds well to mobile devices. A mobile compatible website is vital since the majority of searches are done on mobile devices.

Web Development Basics You Should Know

Web Development Basics 101

A laptop is an example of the client side of computing. The laptop is what the end-user is looking at. A mobile phone or tablet are other examples of client side.

Data centers with stacks of computers, or one high performance desktop could function as a server.

The server host pages that it can send to the client.

These computers are part of an interconnected network of computers, commonly called the internet. The world-wide web, or the web, is the information that sits on the internet. There is a difference, albeit subtle, between the two terms.

A URL is what we type in our browser to find a web page. URL stands for Uniform Resource Locator.

Our browser renders web pages so we get the full effect of seeing the links, headings, colors, images, etc.

View The Source Code

You can also view a page’s source code. This is the plain text that programmers used to edit how the page is rendered in the browser. For example, go to any web page you frequent. If you are using Chrome as your browser, click on developer tools, and then click on view source code. This will open a window with the source code. Becoming comfortable with viewing source code is an important part of web development basics.

A modern web developer should know how to display content on a page, how to make it look good, and how to make it interactive. HTML is the language used to build the structure of its page. CSS is used to style its appearance. Finally, JavaScript is used to make the page interactive.

Why You Should Use HTML5 and CSS3

HTML5 and CSS3 are the most up to date versions of the markup and styling languages. It’s important to use these versions so the web page will function well on all browsers, and on different size mobile devices. A mobile responsive site can help reduce bounce rate as you increase organic traffic.

Web development basics also tell us that since a huge percentage of searches are done on mobile devices, web pages should be responsive to different screen sizes, thus providing a good user experience.

If you are ready to start learning how to code in HTML5 and CSS3, then try the free and interactive tutorials on Codecademy.