UX – User Experience
A 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.
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.
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.