4 Key UX Design Elements & Actionable Tips

A well-planned website – despite being of beautiful design – is nowhere close enough in ensuring the performance-driven UX-UI design output you need.

Good programming and implementation practices however, can be the entire difference when enabling positive impacts in regards to this exact reason.

A Creative’s Essential Web Design Elements to Enhance User Experiences

The good news is that you can still improve your website by considering some easy UX solutions when designing and implementing a website.

Or – if you have a website already pushed live online, you can apply these enhancements today!

I have listed some basic standard elements below, which we can find consistent across all UX-friendly websites. While the style-colour size might be different, the sources and formats are standardised across the globe.

The web essential elements that we need to keep in mind when designing a responsive website are:

• Video
• Images
• Content & Development /CMS

I have simplified this list so you can implement these updates without any pre-existing deep programming skillsets or IT background requirements.

1. Videos

Everybody loves videos. And having an introductory video for your business, offering services, or even product tutorials live on your website can modernise site aesthetics and effectively stimulate visitor engagement.

An audio-visual element added to your website design is a good solution, especially compared to kilometric text-heavy paragraphs.

Additionally – having a video increases your site’s SEO value as Google consider websites that feature videos as being somewhat relevant over others that don’t.

The Don’ts :

• Upload the video to your server and place it directly on your website. The reason I say this is because, resultantly, the loading time increases exponentially depending on server performance, video size and duration.
• You may also need to work with various formats for a specific video. For e.g. MP4, OVG, WebM, WebTT etc. This is due to the varying multimedia playback capabilities, as some formats may not function as desired across different devices. Sometimes, design briefs include requirements for a video background on the homepage. In this instance, be sure to use one of short duration.
• Keep in mind – that video content buffering also counts as a part of your page’s load time. Hence affecting your speed performance and potentially lowering your search engine ranking value.

The Do’s :

• Instead of opting for one of the options above when featuring video multimedia, you can embed a video iFrame. You can source many iFrame embed options from video streaming providers like YouTube, Vimeo, Dailymotion or Wistia. These companies have powerful servers solely dedicated to optimised video streaming functions across various devices.
• The chances are, you won’t even need to mull over the many video formats, sizes or clip durations! And worst-case scenario – if the standard embed video isn’t compatible with your web styling, you can allow it to open as a pop-up alternatively!
• For businesses which rely on video content – e.g. Online Courses – the strategy will vary slightly. For such cases, you may consider going with providers that offer video-optimised hosting services. In which case, you will end up retaining your video content and also host said video content on your site, which is linked to further audience subscription methods!

Pro-Tips :

• To customise the video host provider logo/branding – you can subscribe to a higher-tiered business variation product plan.
• Additionally – you can modify the video settings (such as branding, screen options, colours and even – domain exclusivity.) The latter means the subject video can be exclusively played under your website’s URL.
• Also – it’s important to note that video hosting provider product plans will likely be titled differently for each individual. Pick the one which suits your needs best after careful evaluation!

2. Images

Make sure to include the right number of content-supportive images – ultimately acting as visual aids that are imperative in fostering engagement and informing audiences.

In an era where ‘content is king’ – Infographics are the SEOer’s trojan horse when building a connection with site visitors.

Remember – an overwhelming number of images may however increase the site’s loading time and resultantly cost you a search engine’s relevancy points.

The key therefore – is to strike the right balance.

The Don’ts :

• Include unnecessarily large images. Most pages follow standard grid systems. And if your image is not a cover image or a background image, be sure your image sizes are the same as the placeholders.
• Never upload images without optimising them first. Image files have encrypted data that we cannot visibly see – but is still existent on the file’s code.
• By optimising an image, you clean such redundancies – leaving just the mandatory, basic data.

The Do’s :

• Ask your UI designer for the specified resolution metrics and appropriate image specs – often implemented sitewide unique to each individual page and their pertaining designs.
• Ensuring the implementation of standardised image dimensions as per the designer’s original specs will ensure optimal usage of the space that is dedicated to images and performance.
• If you need to add a cover image that runs across the screen, I recommend a maximum width of 1920 pixels – which is the largest standard monitor size. This width specification will ensure that the image remains displayed in a visually sharp manner.
• When possible – if your design uses shapes among other vector images, the SVG format is ideal in terms of optimal performance as it can be resized without a loss in quality.
• And yet another keen reminder – always check the size and weight of your images before uploading!

Pro-Tips :

• There are a range of free sources available at your disposal for optimising images – such as Tinypng.
• For websites that use WordPress as their CMS of choice, there are further ranges of plugin options that you can install as well, such as NextGen Image Gallery.
• There are also WebP image format converters available for variety’s sake.

3. Content

A pillar of SEO that includes the strategic provision and curation of relevant content – for indulging audiences, viewership appeal and increasing user experiences.

Remember – it will always be better to have unique, individual pages to explain unique, individual concepts. A practice much rather appropriate than a long and textbook-esque, long-form page.

There are different techniques for turning text-heavy websites into an interactive, and intuitive experience for audiences.

Element such as fonts play vital roles in relation to site-speed and it’s always best to keep in mind that font family loading times also impact performance and poor/optimal user experiences.

The Don’ts :

• Present long, dense paragraphs of text, especially in relation to websites with mobile versions.
• Remember – to showcase further detailed information to users that visit your website from a desktop, a ‘Read more’ dropdown button/shortcut is ideal.
• Whilst designing, avoid including unnecessary custom fonts as fonts which aren’t stored online require greater processing time to download.
• Branding guidelines sometimes suggest fonts which may not be screen-friendly – including custom fonts which will directly impact your pages’ rendering speed.
• If using custom fonts, be sure to use them for headings and sub-headings (<H1>, <H2> & <H3>.) Your pages will render faster if using custom fonts in only a few places across your page, rather than long paragraphs (<P>).
• Be careful in choosing a desired font family also, as some of them have multiple styles. Only use the ones you absolutely need.

The Do’s :

• For content-heavy websites – condense your content and try to use tabs or dropdown boxes.
• Another interesting way to make your site user-friendly is by implementing a custom page navigation. This will require the genius of a somewhat more development-oriented skillset – but will increase your website’s usability and user friendliness significantly.
• There’s a myth around content under tabs, saying that such content will supposedly slip by search engines and miss being scanned by them. However, the text is ultimately still placed on the subject page which means that it will indeed, still readable by search engines.
• Is your content is generated using JavaScript? Or perhaps, you are using another programming language to populate your content from different libraries/pages – for e.g. search result pages?
• If so – the content will not be readable by search engines as it is not stored on the respective page.

Pro-Tips :

• Google Fonts is an open source solution offering 974 different font families, stored on their servers/cloud for you to download and utilise in your website designs and mock-ups.
• To implement these fonts in your website – you need to add a single line of code which can be placed inside the <head> code of your website.
• It also must be included in your CSS style page as – <link rel=”stylesheet”href=”https://fonts.googleapis.com/css?family=Font+Name“>
• Another online font provider is Adobe Fonts. They have over 1000 font families available for use, but at the cost of a subscription fee.

However – if you own an Adobe Creative Suite account, you may utilise this service as a part of your membership plan!

4. Programming/CMS

A clean and up-to-date code in your website makes for a huge, positive impact on the site’s performance.

Most modern websites are developed using a CMS (Content Management System) as their fundamental platform and base system. Such CMS platforms helps to automate processes and overall, increase efficiency and achieve a website’s optimal functioning/productivity.

But first – you need to evaluate what the best solution would actually be for your very own website.

And then – compare your short-listed back-end CMS preferences and arrive at your ideal platform.

Some smaller websites use expensive, unmanageable CMS systems which require proficient programming skills to even update a mere image or change the simplest of elements of a website template. Having one of these CMS platforms in place, yet without an absolute requirement for needing it would be comparable to journeying from The Sydney Opera House to Luna Park.

But demanding you do so by sailing the Titanic.

Instead – you may simply require a jetboat. An overall efficient and user-friendly maintenance system that is head-to-toe easy for actioning updates.

Website functionalities and interactions on the other hand, are the other 50% of the equation.

When looking to realise your creatively-conceptualised responsive functionalities into your website design – be sure that these ideas indeed translate into realistic goals. Nowadays, we can use open-source libraries to aid the development process.

Which is where the magic actually happens.

The Don’ts :

• Use an overwhelming amount of coding in heavy sections.
• Make sure you use just what’s needed. E.g. sliders, parallax effects, CSS background animations and the work.
• Also – don’t make your sitemap to become a part of your footer. Or even – a section that repeats across the website. Remember that Google Maps needs a few seconds to load and populate all the data. Hence – making your site slower.
• If possible, just keep the map snipper code exclusively on those pages where you actually have a map itself.

The Do’s :

• Standardise your sections so you can apply the same module across different sections.
• These modules could also be repeated across the website, and you will only need a single code implemented across the source of the same section – sitewide.
• Use and share code libraries with those administrators who need it, as it can only help and guide the likes of consultants and your website developers.
• There are many free online libraries which you can use as a reference for creating an interaction – including CSS Trics, Dev, w3schools and many more!

Pro-Tips :

• Any form or degree of visual help is always highly appreciated by developers and project consultants.
• Sometimes – they might not be working from the same office, city, or even country as you. In such cases – trying to explain interactions through video conferences and lengthy email descriptions could be overly tedious and a cause for confusion all around.
• Here is where an interaction design can come into play. It not only helps clients and project consultants to see the intended, final results – but also contains data which could prove helpful when working on interactions such as hover effects or animation timings.
• Whether you're working with a designated developer or web design company (e.g., DesignRush), there are tools that can help you share your creative ideas across the team and grant access: Adobe XD, Framer, and Principle — to mention a few!

Such tools come equipped with resource galleries and other supplementary features that help build precise prototypes and share the resultant specs with programmers and any others team-wide!