Affordances
Affordances are visual cues that enables a user to determine its function without necessary labels to indicate what they have to do with a specific element in your website. Affordances aren’t just object elements found in your site; it also involves language that you use on your website to signify a location in your site. Symbolism and Language
A perfect example of affordance is a calling card. Of course we can just read the contents of the card, but putting in icons such as shown above makes it easy for our eyes to locate the information we’re looking for. In web design, using familiar icons can help users locate what they need.
Facebook and LinkedIn have similar navigation menus. In this age, we can easily discern what Home means. It is also predictable that clicking on the logos will bring the same result as well. At one glance, we know where to click if we want to send or check messages, check notifications, go to our profiles and more.
While trying to be different can be a brave step in designing your site, you might risk the attention span of the visitors. Language is another barrier you have to overcome; instead of making things complicated, you can still stick with the old terms like View Products, Services, and Store. Our main problem is that we have limited time as people nowadays have shorter attention spans; once they scan your site, they expect to see a certain keyword or a certain image that is relevant to their inquiry.
To implement good affordance, you should be able to plan ahead and check what elements can be simplified. On the other hand, if you can use icons or logos to signify a brand name, then please do. That way, it can serve as a visual cue for users that might be looking for that specific brand.
Need for Speed
Speed is now a major concern for webmasters, as Google counted site speed as a ranking factor. With fast internet connection available worldwide, people expect sites to load faster; else they see slow loading sites as a nuisance and just check another website. If your site’s loading speed is too slow, then navigating through your website will be excruciatingly slow as well. Users may end up frustrated and you’ll end up with higher bounce rates for your pages. This can be resolved or even prevented at an early stage; as long as you do the design with speed in mind. There are many things that contribute to your website’s speed; you should also check how your site is doing well whether on mobile or desktop. Google’s PageSpeed Insights is a free tool you can use to check your website speed; aim for at least a score of 80! However, design shouldn’t be compromised just to give way to speed; you can still optimize your site for speed even with a better design through image optimization, clean code, and a better web hosting service.Navigation Menu
Menus are primarily the simplest yet most efficient way to help a user navigate within the website. Certainly, a good navigation menu makes it possible for users to quickly browse through your site. Different websites call for different types of menu options. When talking about navigation menus, there are two trending styles used by web designers worldwide: sticky, fixed navigation menus and mega menu lists. Below are some samples of a fixed navigation menu implemented in the website.
This photo above is Awwwards’ fixed navigation menu. They have listed the important pages in their navigation menu, a one-click access to submit your website to their collection, and an easy-to-use search bar to check out their list of awesome websites you can use for design inspiration.
Whether you scroll down or scroll back up, the navigation menu follows your move, making it easier for you to navigate through the site with only some slight movement required. This gives the users more time to navigate through your site.
Above is Google Art Project: Street Art. The site itself is a UX-haven. The navigation is impeccable. Once you scroll down to check their content, down comes the navigation menu should you want to skip through some parts of the content. Since this is an image-heavy website, it’s natural to use the artworks themselves to catch the users’ attention. Everything is predictable and familiar in terms of navigation (affordance), and the design doesn’t rely heavily on scrolling; the design has navigation buttons they can use to navigate through the slides.
To direct the focus of a visitor, the menu may be compressed or hidden. In this case with Wikiwand, their background video highlights how Wikiwand revolutionized how Wikipedia can be used, thus it is necessary that people look at the video before they continue to navigate or browse the site. They applied a simple drop-down menu that provides the necessary items such as the option to Download Wikiwand, try out its functions, follow them on social media, or contact them for support. Again, affordance helped in creating this menu visually easy to browse through with the use of the icons.
Aside from fixed navigation menus, creating a mega menu for your website is another great idea. Mega menus are great for websites that have a lot of content and content categories. Most of the time, we can see this type of menu on eCommerce websites.
This enables the user to select a product or a subcategory among others in a big list. Check out this mega menu from Puma. They have segregated their menu according to the demographics of their target market. The options under each subcategory have some unique product options for each main category.
In a nutshell, mega menus:
- Present your content in an organized, comprehensive manner,
- Make it easier for your users to search for the content,
- Improve user experience through quick navigation,
- Give the website opportunity to highlight a product or content category that has positive feedback or is bestselling.
Hypertext Formatting
Last but not the least, internal linking or adding hypertext to your content makes it easier for your users to be directed to another page that has relevant content to the previous page. Although internal linking is often tagged as a search engine optimization practice, it also helps with user experience as you give relevant information to your visitors.
There’s no better way than implementing hypertext as it is:
- As much as possible, apply the link to a relevant phrase or idea in the article. Linking to a meaningful text within the article helps in making your content accessible, especially that it helps disabled users.
- Still implement hyperlinking with an underline beneath. It helps the text to become distinct.
- The color of the text should contrast well against the background of the web page.
