We must consider a website’s visual functionality when creating a web design. The purpose is to enhance the website’s aesthetics and the user’s experience. It stimulates and helps to steer the user and improves visitor interaction and engagement. There are endless functionality features that you can include in your website brief. Here we outline some of the most commonly used features and why these can bring something extra to your website.
“Website visual functionality primarily enhances the site’s aesthetics and user experience”
SITE NAVIGATION
“Navigation is a feature that facilitates movement from one web page to another”
Navigation plays a crucial role within a website. It helps visitors find what they came to the site for. It also allows the navigation of long pages. Navigation can be broken into two forms:
Primary navigation
Primary navigation provides direct access to the main subjects of a website. It works in the same way a chapter index in a book. The majority of users will find the subject they are searching for here. Primary navigation is most commonly found at the top or left side of the screen in a menu bar or hamburger menu.
Secondary navigation
Secondary navigation is the sub-division of information or links to information – working in the same way a subject index in the back of a book. It is likely be of less importance to the majority of users. It is useful for helping users along their website journey. Typically found as a drop-down in the menu bar, it may also be found in another location such as the footer, or via quick-links on pages.
There are various ways to provide these two forms of navigation:
Primary navigation
Secondary Navigation
Breadcrumb navigation
The breadcrumb navigation aid allows visitors to keep track of the route they’ve taken through your website and may sometimes be called a breadcrumb trail. It’s a great tool that enhances user experience because it allows the user to backtrack without using the back button multiple times. A breadcrumb trail also helps Google to work out a website’s hierarchy, so its good for Search Engine Optimisation as well.
Sticky menu
Website menus come in many forms. The sticky menu, as its name implies, remains ‘stuck’ to a fixed position in the browser window. When scrolling up or down the pages of the site, the menu remains fixed in the same place while the content scrolls behind it. The sticky menu is therefore always accessible and in the same place. This improves user experience. There is a sticky menu on this page.
Hamburger menu
The ‘hamburger’ is another form of navigation menu. The icon consists of three lines stacked on top of one another and resembles the two halves of a bun with a hamburger in between. The hamburger is normally seen when viewing a website on a mobile device. However it is rapidly gaining popularity on the desktop browser.
Clicking the hamburger icon reveals the menu. It takes up less space and keeps the site uncluttered but does have potential drawbacks. Some say unless visitors have used it before elsewhere, they wont know to click on it, potentially preventing them from accessing things on your website.
HOVER/MOUSEOVER EFFECT
Hover or mouseover effects are visual effects that take place when transitioning. The transitions may take place when going from, to, or revealing content. For example, when hovering over an image it may change colour, animate in some way, or reveal some text.
Theae effects capture your users attention. They also engage with the user which increases the time they spend on your website. Information is provided dynamically and and can also serve as an additional navigation aid. We’ll look at some of the numerous things which that fall under the hover/mouseover category below:
Image with hot-spots
A clever use of the hover effect is the placing of hot-spots on an image. For example when you want to label or pinpoint some things on a map or image. To attract the user’s attention, each hotspot on the map is numbered and set to ‘flash’. When hovered-over or clicked, each hot-spot reveals content. This encourages the user to interact. See the example below.
1
Roll over black and white image reveals colour image and title
2
Sticky menu, remains at the top of the browser as user scrolls down
3
This is a keyboard, but you knew that already 🙂
Colour change
Colour also plays a part in this functionality. For example, when an image is hovered over its opacity may change to reveal the image from behind a solid colour. Alternatively a monochrome image when hovered over, may reveal the full colour version. Alternatively a section of the image may be revealed.
SEE THIS EFFECT ON A SITE WE DESIGNED
Text reveals
The hover/mouseover function can be used to reveal text. For example, when hovering over an image, its title or any other information. This is an opportunity to save a large amount of space on a website. It helps the overall experience by reducing the clutter and distraction caused by of a lot of text.
THIS EFFECT CAN BE SEEN IN OUR PORTFOLIO
Zoom
Zoom is another great example of the hover over feature. It allows you to hover over the image to show it in greater detail. This is a very useful feature for a shopping site where being able to see the detail is important. It also adds a subtle level of interaction and animation to your site without taking up a large amount of space.
Image comparison
This form of visual functionality is most commonly used to show ‘before’ and ‘after’ pictures. The example below shows two different pages on a website that topright created. Moving the slider left and right reveals each page. This effect can be adapted for many different uses.
PARALLAX FUNCTIONALITY
Parallax scrolling is an effect where a background, image or text moves at a slower rate than the content which overlays it. The different rates of movement create the illusion of three-dimensional depth.
There are many benefits and uses for parallax scrolling. It can be used to sub-divide pages into sections or to promote important information. It is also aesthetically pleasing and greatly improves the visuals of your website.
This type of parallax is a mouse-over parallax. By using layers of parallax images we can create depth when the user mouses over.
SEE A SITE WE BUILT WITH THIS EFFECT
Another example
An interesting arrangement
with a parallax background
This is a fixed parallax image with cascading images overlaid. By fixing the image in the background, scrolling reveals the images. This gives the effect of the previous block sliding over the top of this new block. The cascading images placed over the top have an animated delay and each is offset to create this effect.
SHOW ME MORE OF YOUR WEB WORKPARALLAX SCROLLING
This Parallax of a single image. Note how it moves at a different speed to the text as you scroll up. This sort of effect can create an investing backdrop to something like testimonials. Here’s what some of our happy clients say about us.