Guidance for business and marketing directors wishing to market to interior designers, architects, and other creative specifiers.
UX – this means User Experience, so everything the website visitor experiences during their visit
UI – short for User Interface.In this article this refers to the way through which a user interacts with an application or a website.
To get the best Return on Investment from your website and marketing collateral, it’s important to ensure it appeals to your target audience and that it is accessible to them. However, efforts to create a good first impression through new or fancy UI elements often end up confusing the user. Let’s have a look at what creates a good UX (User Experience) and some of the commonly used, but often disorientating, UI elements that you should avoid.
The goal of UX: Cognitive Ease, Rapid Evaluation
The aim for UX web design is to achieve Cognitive Ease – that means a seamless, clearly signposted navigation around a website with products and services unambiguously presented.
It is generally accepted that the best route to the product is one where the visitor has to click as few times as possible to get to where they want. The user shouldn’t have to spend time figuring out your website, the UI should be intuitive and the website and its elements should respond quickly. A website that takes too long to load or a video that cannot be skipped will definitely annoy the user and damage the UX. The user should be able to take in all the information within the site and access all of its functionality with minimal difficulty. On the other hand, a website shouldn’t overload the user either by presenting all the information without a cohesive pattern.
However, the type of design that would facilitate Cognitive Ease is often overruled by the desire to have large and impressive UI elements taking centre stage. But what if some of these favoured elements actually repel customers instead of attracting them?
You might think such UI elements would be obvious to you and easy to avoid but these tools are so prevalent now that perhaps they are accepted rather than questioned.
In this article, we explore some of these UI elements that must be used judiciously when marketing to interior designers, architects and other creative specifiers. Before we can understand what works and what won’t, we have to understand this audience, why they visit websites and what they’re looking for.
The specifying task of the Interior designer, architect and other creative specifiers
Interior designers, architects and other creative specifiers constantly work under pressure and to tight deadlines. When they are coming to your website to assess your products they need to get the job done fast. The creative specifier’s end goal is usually to find an ideal product to include in a specification document. Interior designers who carry out their own procurement may be also seeking ultimately to place an order themselves. Creative specifiers will usually assess many products before they find one that they will consider worth studying more closely with a view to specifying it.
The easier a supplier makes the specification task, the more likely their product will be specified. An easy selection and specification process will also help the supplier create a positive reputation as well as building a loyal and wide customer base.
Creative specifiers are acutely visually, spatially and kinaesthetically sensitive. As you would expect, they are naturally fine-tuned in sensory perception. They possess the rare ability to minutely assess products and materials to be included in their design schemes and in creating environments that are aesthetically pleasing and, even more importantly, feel good to the people that use them.
From these observations, we can infer that interior designers and specifiers would want a website that delivers clear information quickly. The end-user should be able to rapidly find what they’re looking for, and they should find all the information that they need.
On this basis, let’s move on to look at some of the web tools that can hinder rather than assist this type of customer.
UI Element # 1 – Sliding or moving banners
Slider banner images can appear anywhere within a website but are very frequently used on a supplier’s home page. Sliding banner images often occupy the majority of the screen above the page-fold, thus taking up the prime “real-estate” of the web page. When a sliding image takes up the website real-estate it means that this image is the only thing a visitor sees before they scroll or click elsewhere.
So why are these sliding banners an issue for a creative specifier audience?
In the GIF above, created from a supplier’s website home page, everything – including the text – moves and, as such, is not a standard sliding banner image. Even so, it’s a good example of what we are talking about. As you can see, the product information is not clearly visible and a lot of screen real-estate is wasted. Additionally, with this particular home page, the user would have difficulty even working out what the product genre is meant to be.
The sliding banner presents an obstacle to viewing the company’s products. It doesn’t introduce the company’s products but rather presents a neutral or even negative first impression. The visitor is forced to click the drop-down menu to navigate to the product menu and then click again to the product genre they require.
Some creative specifiers would actually leave the website before trying to look at the products if they find the sliding banner too unsettling.
To a visually and kinaesthetically acute audience the moving image is irritating or even distressing.
Let’s look at another example. The website shown in the GIF below has quite an aggressively sliding banner, it rapidly changes every five seconds. As we discussed earlier, rapidly shifting images are not designer or architect-friendly. The supplier has also chosen to show a photograph of the outside of their London showroom as one of the sliding images. This “information” does not help the creative specifier do their job. And the swiftly moving image is not good for a great user experience.
Another issue with the above example is that, even when a product image is shown, it is quickly whisked out of sight without providing a useful means of navigating to the product. The banner images of products are not linked to the product page and don’t have any text describing the product.
So now let’s look at a website homepage that enables the creative specifier to do what they came for. This website, GIF below, rather than going for a “big impact” image, shows a practical design that enables the specifying process.
You may be very surprised to see this web home page presented as a how-to-get-it-right example for a creative specifier audience. After all, interior designers and architects are arty right? So they would want to see arty pictures? Actually no, – remember they came to the website to get a job done. And the layout above enables them to get down to business straight away. Yes, there are still moving images but they are restricted to a relatively small proportion of the home page above the page-fold. Furthermore, the sliding images move only once every ten seconds which is a much more acceptable speed. Ten seconds gives the visitor time to move off the page and to possibly not even notice, let alone be disturbed by, the speed of the slide-change.
Remember that the creative specifiers have come to your website to look at your products; so the sooner you can show a clear, static representation of these the more likely they’re to convert to customers.
UI Element # 2 – Roll-over effect
An orderly page of products presented in a consistent style helps a creative specifier quickly scan and assess potentially suitable products. Facilitating Cognitive Ease means that this process is relatively easy. However, an image that instantly jumps from being a clear and useful representation of the product to one that is confusing is bothersome to say the least. Trying to quickly and accurately scan a page of jumping images is awkward and disruptive when this jump-change occurs when one’s cursor is over the image.
For a visually acute audience, any moving, jumping, or jiggling animation on a screen can be visually distressing. Showcase your products, but don’t use animations to catch their attention. A flickering image, even from the corner of a designer’s eye, will have them clicking off your website in irritation. A website with static, clear product images will retain a creative specifier looking at your product.
Let’s have a look at an example.
These sofas in the screen-grab above are presented in a clear, consistent, and easily readable manner.
But when you place the cursor over an image (often accidentally) it jump-changes to an unclear, prop-styled unusable image. (Prop-styled images are less readable as well as unsuited for presenting to the end-client)
If you, as a supplier, want to show alternative product images then give the user control over when to see these. Control over what is viewed on the screen, and when, is one of the key elements to creating a good quality user experience.
UI Element #3 – The Hover-Zoom tool
We call this the Myopic Spider web tool. Let’s have a look at this.
As you can see from the above GIF, not only does the hover zoom give an unhelpful view of the product but since the image was never destined to be examined that close up, the use of the hover zoom tool is actually pointless. All we can see is an over-blanched computer-generated image. By using the hover-zoom tool one cannot read any more of the product than by not using it.
Suppliers usually add the zoom tool to mimic the in-person experience, where a person can bring an object closer to their eye to view the details. And the intention makes sense, most users would want to see their product up-close before making a decision.
But often when an image is zoomed into, the image becomes blanched out and loses detail. A better alternative would be to add close-up images of the products.
Another key issue with the hover-zoom is the loss of control. The image cannot be enlarged and if one’s cursor is over the image, it jumps and jiggles which is, again, visually distressing.
UI Element #4 Zoom effect on hover
As with the rollover effect or the hover zoom tool, the idea is to show a closer view of the product. But the effect can be jarring for the creative specifier audience.
The effect is similar to a hover zoom tool, but here there’s no specific tool. The image zooms in if you just move your mouse over it. And there are variations to this effect, from a simple zoom to a vertical zoom-n-pan.
As with other tools, it’s best to give the user control, and offer multiple images from different angles instead of effects that may be annoying.
UI Element #5 – Video
A video is a useful tool when used for educational purposes, for example, to demonstrate technical or functional properties. But a video to demonstrate a product usually ruins the UX for a creative specifier audience. The same goes for music or audio that plays automatically. Why is this? It is because the default video-style used is usually one with a lot of sweeping images, none of which show the product in its entirety, swooping, overly loud, music accompanied by overlaid text using hyperbolic, emotive language. Videos are usually too slow, and unlike text or image content, they can’t be skimmed through. So for the creative specifier, viewing this is, frankly, wasting their time. It serves no purpose in their mission of assessing the product.
If you are thinking of creating a video to impress a creative specifier audience, invest instead in high-quality photography with a user-controlled, 360 degree rotational tool.
Summary
As you may have noticed, most of these elements are very popular among websites catering to architects and designers. But these are also the elements that often frustrate the users. To get the best results, keep your website simple and easy to use. Fancy animations usually annoy users and don’t provide any additional value to them. Worst of all, they create barriers to the specifying process and prevent the creative specifier being able to do their job efficiently – and that is not what they or the supplier want. If the interior designer or architect can easily specify your product, you both win.