The usability behind Vismas new web

Two weeks ago we launched a new Visma web experience. I would say that it is a quite dramatic improvement. How dramatic you might ask? Well, read on and I will briefly go through the main usability and design highlights. And, yes – this is a first step and there are many improvements to come. But let’s focus on this first step for now.

10 main usability & design improvements on the Visma web site:

1. Predictable navigation and structure

It’s imperative for visitors to know where they are, where they can go and where they have been. There should never arise a question like ”where did I end up now?”, ”how do I get back” etc. A web page should be predictable. To trivialize the usability of a web page – it is basically navigation between different destinations. And, If you have an understandable navigation you are “half-way” to the goal.

We have focused on making a navigation that serves both visitors that knows what they are looking for and visitors that merely are scanning for information or browsing for products and services. In addition – we are basing the different levels of the web on a funnel principle – the further up in the hierarchy you are, the more general information is communicated. Thus, depending on where you enter in the hierarchy you get different kinds of information to funnel you further down to the main source of information – the landing/product pages.

2. Full navigation available at all times. We have applied drop-down menus – a growing standard – to enable the user to dive directly down to a specific product page, if this is desired. By doing this, we are also making the structure of the web site more transparent to the user.

3. Flexible breadcrumbs. By reducing redundant navigation, typically corporate web pages are using breadcrumbs and vertical navigation, and focusing solely on an interactive breadcrumb. The user always knows where she is and can quickly backtrack without unnecessary detours.

4. A significantly improved search. Auto completed search functionality together with synonyms and category filtering, consistent with our main navigation, aids the user greatly when using our search.

5. Consistency principles. Content is king – consistency is queen. Earlier our landing pages did not have a consistent naming structure. Today all the pages within a certain area follows the same naming conventions and use a fixed amount if sub-pages – visualized with horizontal tabs. This way the user can much quicker scan the page and find the relevant content, avoiding to re-interpret the fundamentals of every page they visit. This consistency principle applies on most templates on our new web.

Follow the conventions and the user will understand better and quicker.

User control and freedom are central aspects of usability and by implementing the features above the visitor will feel that she is in ”the driving seat” instead of spending time on recovering from navigational and other user errors.

6. Front page focused on users needs. Earlier the front page was generally cluttered and not very well differentiated graphically. We also suffered from duplicates and inconsistencies. Today we have reduced the amount of information, adding helpful links based on statistics from existing visitors and created a visually more pleasant welcoming page.

7. Navigation page to get users quickly to next step. Previously, the most important interaction element was a vertical menu with a, typically, long list of product names. It did not really help the visitor (the product name rarely explain what it is). We needed to create a better understanding of what solutions we offer and what they help the user with. This is what we have done today, by having clarified categories to funnel the user through a more understandable path.

8. Comparison page to give users the information to choose. Earlier we did not offer a convenient way of comparing solutions. Now we do. It is based on a carousel functionality where we highlight and distinguish the main characteristics of the solutions. Can you distinguish what solutions are installed based and cloud-based?

Try it out: Link

9. Product page with all information in one place. In order to avoid the ”wall of text-phenomenon” we have used a drill-down functionality on each main text paragraph. This way the visitor can scan the main highlights – being able to dig down when needed. As we all know – visitors rarely read all text. Thus, we need to aid them get the highlights swiftly.

10. Graphical design & quality of content

We have updated all the parts of the frame work of our web design achieving a more modern appearance. We have also started on the process of making our content more pleasant and professionally looking. This is nothing you make in an jiffy, when working with thousands of pages. But more on ”making content relevant and interesting” in a future blog post.

So, what does it take to increase the user experience of a corporate web site? Quite many things actually – especially if you have hundreds of applications for sale and a vast array of services to offer while some of them are competing with each other. And, it’s nothing you perform once. It’s a continuous process. Most importantly, it must be based on our visitors needs and not internal needs. If we serve our visitors needs our own needs will automatically be served.

I’ve shared some of our thoughts. Please – share yours!