UX of Royal Colleges of Medicine

User Experience of Royal Colleges

- A review

Contents

[email protected]

Published by Zabisco Digital Limited

Introduction

Royal College websites reviewed by Zabisco

Zabsico UX consultancy & design

User experience/UX

The start of the user journey - The homepage

User-driven focus vs organisation focus User interface

Using a hero

Navigation

User engagement

Accessibility

Mobile web design

Summary

By Natalie Moore- Customer Experience Planner

6

7

7

8

11

14

18

18

20

22

23

26

32

Hammad Khan- Director of User Experience

2 3

www.zabisco.com | customer experience: research | architect | design | evaluate | implement www.zabisco.com | customer experience: research | architect | design | evaluate | implement

Therefore, with them being user-centred in principle, we would expect all member organisations like RCs to deliver a user-centred digital service, providing a positive user experience (UX). As such, here at Zabisco, we have done a broad review of a range of RC websites. This paper has been produced to discuss our review of the digital presence in this sector and indicate where opportunities exist to improve their UX. With a large amount of RCs existing, not all have been reviewed; outlined on the next page are the websites we have explored. Furthermore, of course, non-member access is restricted; therefore, we can only comment and discuss pre-login experience across the range of sites. The discussion we present cannot reflect the quality of UX in the secure areas.

Introductionn this paper, we are reviewing Royal Colleges for how good, or not so good, the digital user experience (UX) is that they deliver to their members and visitors. A Royal College (RC) is a professional body for people in a particular medical profession. The RC exists to provide resources and networking

opportunities for those people and it exists because it is funded by those people, its members. Therefore, ultimately, a RC is user-centred in essence. The members/users pay for an affiliation to the organisation, to get what they want out of the organisation; they have a significant impact on how the organisation should be run and the services it delivers.

In the following sections of this paper, we will discuss what UX is and why it should be a fundamental concern in digital design. In reviewing the RC websites, we will appraise the various aspects that create the UX, pinpointing across the RCs sector we have researched where we feel the user experience is being effectively addressed and where it is not.

At Zabisco, we specialise in understanding users, their needs and motivations. We shape their digital experience through designing the environment and tools which create that experience, with the end users always in mind. For us, users come first and remain the key consideration throughout.

Zabisco UX consultancy & design

Figure 1: Royal College websites reviewed

Royal College websites reviewed by Zabisco

I

4 5


So, who is the user? Professional bodies, such as RCs, cater for a particular group of people as they exist around a certain profession. The organisation is there to deliver resources and opportunities relevant to people who work in a particular field. This does not mean, however, that those people’s drivers, interests and motivations are necessarily the same. The RC may be providing for a large cohort of people with one major factor in common, but that does not mean there is little diversity within that group.

User Experience/UXFirstly, why bother with user experience at all? UX is a well-established profession and an integral part of digital design because it is identifiably important. The term is reasonably self-explanatory; we work on the experience that a user has when using a digital service. Those two words can be considered individually though to give two key factors why this practise is important and what should be taken into account: who is the user and what is the experience?

When you consider the visitors to the website of a RC, the diversity in whom they are, why they are visiting the website and what they want from it becomes apparent. Firstly, there are members and non-members; instantly there are two factions of people with a different reason for visiting the website. Within those two groups are different types of users: not only different job roles, gender and ages, but different levels of internet literacy, knowledge, loyalty or affiliation and attitudes. Each of these users may be engaging with the website with a different motivation and goal and, therefore, will have a different experience from the same site. Considering who your users are should be the first thing identified when designing a website and should remain at the forefront throughout.

Then, consider the experience those users will have from the website. We’ve established there are different users, with different needs and wants, but what is the same is that all users will be seeking a satisfying experience. The experience is important; it affects the user’s perception of the organisation, the level of engagement this incites with the organisation and potential leads created with the organisation beyond the website. As stated, organisations like RCs exist for their users and remain in existence by retaining and attracting new members and, thus, funding. Therefore, the user experience of the website is an integral part to the success of the organisation.

6 7


User-driven vs organisation-driven focus

Information architecture

User interface

Interactivity and engagement

Aesthetic appeal and media

Accessibility

Functionality and features

Content

Social integration and sharing

Mobile and responsive web design

This experience is determined by how easy the user journey is and what the user gets from it. A user journey is the route a visitor to the website takes to find what they want: the pathway from A to B. This may be via C, D and E; it may be as short or long, simple or complicated as the design of the website helps to make it. In the following parts of the paper, we’re discussing the elements of the RCs website designs that shape the user journey and the overall UX. There are many factors of digital design that combine to create the UX and each of these, and the interactions between them, should be considered. We have broken these aspects down into a 10-point review, listed below.

The rest of this paper discusses RC websites in terms of these points and their inter-relationships; some are considered in conjunction where they heavily interact. Firstly, however, we’re looking at the beginning of the user journey and first impressions before we review in this level of detail, although some of these points will of course be touched upon.

The startof the user journey– The homepage

Actually, the start of the journey is not the homepage; the start of the journey is the user’s motivation and how they find their way to the website. This highlights our first point – the user, who they are and their motivations and goals, always comes first. Something to consider…

For the purposes of this paper, however, to address the website UX, the starting point for a user interacting with the organisation’s digital service is the homepage. This is the first interface they see, where they begin to find what they are looking for. From this first impression, the user will obtain a perception of the organisation and an instant perception of how easy this website may be to explore. For instance, look at the examples below; it can be seen with these how the design affects the appeal of the site and sets expectations of how easy the site may be to use.

8 9


Figure 2 - The Royal College of Veterinary Surgeons website is a good example of a clear, appealing homepage. With an organised layout, interactive hero and uncluttered design, it is not overwhelming at the first glance and it is easy to digest the areas of the site.

Figure 2: Royal College of Veterinary Surgeons, homepage

Figure 3 - The Royal College of Anaesthetists website also incorporates these features to positive effect. This website is currently undergoing a redesign, highlighting both an understanding in the sector of the need to update website designs and an understanding of what the up-to-date design features are for better UX.

Figure 3: Royal College of Anaesthetists,homepage

Figure 5 - The Royal College of Ophthalmologists attempt to make better use of the homepage to deliver structured content, but have not been successful in achieving a good UX. There is too much content and too much text for a user to work their way through. The design layout also incorrectly makes sections look interlinked that are entirely separate, as shown and described next to the image Figure 5.

Figure 5: Royal College of Ophthalmologists, homepage

Figure 4 - The Royal College of Psychiatrists, however, are an example of poor UX. The homepage is not utilised effectively to engage the user. There are clearly four sections on the homepage but it is not easy to read what is in those sections, nor are they very inviting to incline me to try to read it.

Figure 4: Royal College of Psychiatrists, homepage

The blue and green sections above are very bold in comparison to the surrounding text and the layout of the content and features makes these look like headings for the text below on first glance, which are in fact separate sections of unrelated content.

10 11


User-driven focus vs organisation focus

As we have said, the user comes first. The users’ wants, needs, motivations and goals will determine why and how they approach and go through a website. So, logically, provide users a journey based on who they are and what they need: streamline their journey and make it easier for them. As reiterated throughout this paper, considering whom your users are and their motivations and keeping this at the forefront throughout ensures a user-centred design.

A user journey initiates from the homepage, therefore the digital service should be user-centred from this point. Some RC websites we have seen incorporate this principle to some extent, to direct people to areas of the website related to that user. For example, the Royal College of Veterinary Surgeons, that we highlighted as a good homepage example, uses a ‘Quick links’ section to display user-centred or user-specific content, as shown below in Figure 6.

Figure 6: User-centred navigation - Royal College of Veterinary Surgeons

Figure 7: User-centred navigation - Royal College of Ophthalmologists

The Royal College of Ophthalmologists were exemplified by us previously in Figure 5 for their homepage not providing an optimal UX, through being too cluttered and having a disorganised layout. They do however provide user-centred links on the main navigation, as shown below in Figure 7.

12 13


Many of the websites reviewed do not take this approach. They are designed around what the organisation has to offer in terms of departments or services rather than whom they are offering it to. Of course, being user-centred does not mean everything must derive from a specific user perspective. Yes there are variations amongst user groups as outlined earlier in this paper, but there are some commonalities in terms of content they will be looking for. Therefore, some task or organisation-based content is user-centred, but which elements these are needs to be identified and the presentation of them must be considered to provide an optimal user journey. In member organisations such as RCs, membership and disseminating information through news or offered services are most commonly placed at the forefront on homepages. However, the more up-to-date websites present these aspects in a visually more appealing and immediate way, enabling users to easily access this information more instantly – thus providing a user-centred UX. Some examples of RCs who address these aspects are featured in Figures 8, 9 and 10, with some comments on why they achieve it in a better way.

Selected site areas feature clearly on the homepage to streamline the journey for key information users look for.

Use of icons to instantly signify what information the content will give the user. For example, the calendar picture indicates an event and the icon provides the date information the user needs.

Figure 8: User objective-based content for better UX - Royal College of Obstericians and Gynaecologists

Figure 9: User objective based content for better UX - Royal College of Pathologists

Figure 10: User objective-based content for better UX - Royal College of General Practitioners

14 15


Using a heroEffective use of a hero on the homepage has a positive impact on the experience of a website from the outset. Using a hero not only makes a webpage look instantly more aesthetically appealing, it enables more content to be displayed in a condensed fashion. A sliding hero creates a level of interactivity with the user, engaging them, and gives an opportunity to display information the organisation wants to highlight and draw attention to. In the figures below, we’ve selected who we feel utilises a hero for beneficial UX.

User interfaceThe layout, links, menus and navigation options are all designed to make up the user interface which facilitates the UX. The aesthetics of these aspects and any media used to enhance interactivity and engagement create a better UX. Following, we’ll look at these various factors is aspects of website design and how well RC websites are addressing them.

Figure 11: Utilising an interactive hero - Royal College of General Practitioners

Figure 12: Utilising an interactive hero - Royal College of Veterinary Surgeons

Figure 13: Utilising an interactive hero - Royal College of Anaesthetists

16 17


NavigationOf course, a critical part of the user journey and UX created is the navigation. Several factors impact whether the navigation provides a good UX or not: a combination of the Information Architecture, aesthetic design and interactivity involved. We’ve previously discussed initiating a user-centred navigation from the homepage but it is important to retain a user-centred perspective throughout in forming user journeys.

Menus and links should be clear and direct the user on a streamlined journey. Cluttered pages should be avoided, so making use of interactive features such as drop down menus, heroes, sliding and collapsible panels allows for content to be displayed in a condensed and organised format. This approach is more digestible for the user. For example, the Royal College of Midwives and the Royal College of Speech and Language Therapists, whilst falling down on other aspects of UX, utilise drop down menus on the main navigation bar. This provides better UX in terms of displaying immediately to the user what content a section contains without having to leave the page they are currently on.

Very few of the RC websites utilise other features outlined above such as sliding and collapsible panels. The Royal College of Veterinary Surgeons is the only website we found to incorporate a sliding feature to present a menu of content. This interactivity engages users and makes them want to look at what is there.

Within the site, cues and feedback to the user are important to facilitate their journey. As can be seen in the figures above, small visual cues can make significant changes to user understanding. In each of the three images above, the interactivity of these areas is indicated by the inclusion of the arrows. They intuitively signal to the user this means they can click on the content to move it in a direction. The arrows on the collapsible panel in Figure 16 change direction to feedback to the user which section is ‘open’ to reveal information.

Feedback and cues are important throughout navigation, to indicate to the user where they are on the site and what their options are and their actions mean. The use of colour is important; for example on the main navigation, changing the colour of a tab compared to the rest of the tabs highlights to the user what section they are on. This can be done texturally also, for example by changing the impression of the text when the mouse hovers over it indicates to the user it is a clickable link. Breadcrumbs are a useful tool to simply demonstrate to the user where they are on the site, where they were previously and allow them to go back to a section in one action.

Figure 16: Collapsible menu panel to condense information - Institute of Engineering and Technology

Figure 14: Sliding menu panel - Royal College of Veterinary SurgeonsFigure 15: Sliding menu panel - Institute of Engineering and Technology

We’ve inserted examples here from our own website design for the Institute of Engineering and Technology to demonstrate the effectiveness of these interactive features.

18 19


User engagement

For visitors to the RC websites, members or non-members, to be incited to explore the website, to achieve a predefined goal or be attracted to view other areas of the site, they need to be engaged. Photos and images are utilised on the majority of the websites we have reviewed, which make the webpages visually appealing. In some cases appealing aesthetics are adopted on the homepage but not carried through in sub-level pages. In the case of the Royal College of Radiologists, this visually appealing engagement is somewhat absent from the outset, as highlighted in the figure 17.

Figure 17: User engagement through aesthetics and media

The Royal College of Nursing website shown in Figure 17 is the only RC website we reviewed to utilise video media to capture the audience and engage them with the organisation. As covered above, cues and feedback are important and here the presence of the triangle icon, the ‘play button’, makes it immediately obvious to the user there is a video placed in the hero for them to watch, and they know where to click to start the video.

RCs have many members and visitors to their websites. They are continuously looking to increase their member base and retain those acquired, to maintain and increase revenue and grow as an organisation. As user-centred organisations, RCs need to cater for all of these existing members and visitors and their needs to provide optimal services. This applies to the digital services they provide; they should be designed to be inclusive for all members, considering potential disabilities and requirements they may have. Some, but not many, of the RC websites we reviewed are incorporating accessibility functionality into their websites, but very few are doing so in an accessible way.

To explain this point, here are some examples of accessibility addressed poorly. The Royal College of Speech and Language Therapists have gone to some lengths to include accessible options on their website.

Accessibility

20 21


If these drop-down options (Figure 18) have not been noticed, there is an Accessibility section to provide help, shown in Figure 19 . If a user is having difficulty in using the website, are they really going to be able to read these instructions to figure out how to make the necessary changes? It cannot be assumed that someone else would be there to provide assistance.

Figure 18: Accessibility option - Royal College of Speech and Language Therapists

It is not enough just to have some options available, consider how they are presented. If a user has difficulty in viewing the site and needs different options, make it easier for them to locate how to modify this; is presenting the options in the same text and style as the site they are struggling with appropriate? The Royal College of Radiologists have also provided poor UX in this regard.

Figure 19: Poor accessibility instructions - Royal College of Speech and Language Therapists

22 23


Here, the user has to locate ‘Accessibility’ in small text in the footer, click this and read the instructions in the standard text size to find out how to change the text font size. This seems a convoluted process for something that could be presented from the outset visually, that actually provides more accessible assistance.

However, this option to change text size on the Royal College of Physicians appears when the user navigates on to a sub-level page; it is not available on the homepage where the user should see where to start from. Furthermore, this functionality does not actually work. There is no difference between the first two text size settings and repeatedly clicking on the enlarged ‘A’ simply stretches the content creating greater line spacing but the font size does not actually alter.

Figure 20: Accessibility instructions - Royal College of Radiologists

The Royal College of Ophthalmologists (a), the Royal College of Pathologists (b) and the Royal College of Physicians (c) at least present the option to change font size in a visual way that users recognise, as shown.

a) c)b)

Figure 21: Accessibility functionality to change font size

The Royal College of Veterinary Surgeons most successfully includes accessible options presented in an easy, visually helpful way to the user. These few icons clearly show the user can change the text size, can change the colour and can alter the display .

Figure 22: Accessibility functionality best example - Royal College of Veterinary Surgeons

24 25


Apple’s iPhones and iPads are leading this market with others quickly following suit. At the beginning of this year, Microsoft published a report on their upgraded operating system Windows 8 and outlines how it will be an upgrade for better experience on mobile devices. The user experience to be had in comparison to Windows 7 on a PC will be very similar; the improvements are proposed to be significant for small portable devices like tablets and smartphones, suggesting that Microsoft recognise this as the changing face of the digital market. “2” on page 33

Mobile and responsive web designThe digital world and how people access websites is changing. Sales in desktop PCs are declining and we are seeing an increased market in mobile devices such as smartphones and tablets. The graph below shows recent and predicted trends.

Figure 23: Trend in smartphone sales “1” on page 33

26 27


At Zabisco we created an infographic about the UK smartphone market in 2011, demonstrating the trend towards smartphone usage. An excerpt from this is below in Figure 24.

There are fundamental differences between mobiles and desktops which mean that a desktop website design does not transfer well to mobile browsing. The screen is obviously smaller, so how easy content is to see and read becomes an issue. The users do not have a mouse to navigate and select buttons and content, they use their fingers; target sizes become an issue. It is not so easy and is frustrating for a user to type a lot of information using touchscreen; minimising the need for user input becomes important. In addition to these issues, internet connectivity on a mobile can be less stable. Page loading can be slower, therefore the content and navigation should be designed with this accounted for; minimise the need for input and page reloading.

Of those we’ve reviewed, even the RC websites that we determine provide better UX are not optimised for mobile and this is certainly a domain that anyone providing digital services should be moving towards. We recently published a blog on the key factors of great mobile web design; for more information on effective mobile web design, this can be viewed at:

http://www.zabisco.com/blog/the-keys-to-great-mobile-web-design/.

Figure 24: Infographic on UK smartphone market 2011 – Zabisco

View the full infographic at:http://www.zabisco.com/blog/wp-content/uploads/2012/03/

smartphone-infographic1.jpg

This has significant implications for UX and web design, and the accessibility and usability of websites when put into today’s contexts. If many people already, and continuously increasing amounts of people, are accessing websites on mobiles, it should be a priority whether your website is suitable for browsing on a mobile.

28 29


Summary

The Royal College of Veterinary Surgeons utilises different aspects of web design to create a positive experience for the user. The homepage is clear, easy to navigate, incorporates an engaging hero and provides a user-centred journey from this point. Images are used throughout that are appealing and engaging, symbolic in demonstrating what information that content will provide. It could still be further improved with media to enhance interactivity.

The Royal College of Anaesthetists website comes in a close second with clear pages, use of imagery and use of navigation tools, such as drop down menus. This website could, however, provide a more user-driven journey from the outset. The member login area is not as clear and there is no obvious accessibility functionality. It could be updated with more contemporary features such as integrating media.

http://www.rcvs.org.uk

The Royal College of Psychiatrists is an outdated website. It lacks organisation and appeal from the homepage and it is not easy to read. A very uninviting site would be very unlikely to attract new members. Likewise it is unlikely to encourage current members to use the services of the organisation or explore what is available as there is nothing appealing to draw them in.

The Royal College of Anaesthetists

The Royal College of Psychiatrists

st1

nd2

PLACELAST

The Royal College of Veterinary Surgeons

http://www.rcoa.ac.uk

http://www.rcpsych.ac.uk

Now we have reviewed a sample of the sector, we’ll conclude this paper by awarding 1st place, 2nd place and last place for website UX. We are not awarding a 1st, 2nd and 3rd place to showcase the top three; we want to show the product of not considering the UX, what a website looks like if you disregard all the factors discussed in this paper. We have selected what we feel are the top two sites and bottom site in terms of UX through reviewing the whole sample listed in Figure 1. For the rest of those sites, we have judged some aspects to be good and some to be poor – consider where you think they would rank in providing a positive, helpful, usable and engaging user experience.

30 31


Table of Figures

Figure 1: Royal College websites reviewed

Figure 2: Royal College of Veterinary Surgeons, homepage

Figure 3: Royal College of Anaesthetists, homepage

Figure 4: Royal College of Psychiatrists, homepage

Figure 5: Royal College of Ophthalmologists, homepage

Figure 6: User-centred navigation - Royal College of Veterinary Surgeons

Figure 7: User-centred navigation - Royal College of Ophthalmologists

Figure 8: User objective-based content for better UX - Royal College of Obstericians and Gynaecologists

Figure 9: User objective based content for better UX - Royal College of Pathologists

Figure 10: User objective-based content for better UX - Royal College of General Practitioners

Figure 11: Utilising an interactive hero - Royal College of General Practitioners

Figure 12: Utilising an interactive hero - Royal College of Veterinary Surgeons

5 -

10 -

10 -

11 -

11 -

12 -

13 -

14 -

15 -

15 -

17 -

17 -

17 -

18 -

19 -

19 -

20 -

22 -

23 -

24 -

24 -

25 -

26 -

28 -

1http://money.cnn.com/2010/07/20/technology/desktop_PC_death/index.htm

2http://www.extremetech.com/computing/115003-microsoft-quietly-kills-off-the-desktop-pc

Figure 13: Utilising an interactive hero - Royal College of Anaesthetists

Figure 14: Sliding menu panel - Royal College of Veterinary Surgeons

Figure 15: Sliding menu panel - Institute of Engineering and Technology

Figure 16: Collapsible menu panel to condense information - Institute of Engineering and Technology

Figure 17: User engagement through aesthetics and media

Figure 18: Accessibility option - Royal College of Speech and Language Therapists

Figure 19: Poor accessibility instructions - Royal College of Speech and Language Therapists

Figure 20: Accessibility instructions - Royal College of Radiologists

Figure 21: Accessibility functionality to change font size

Figure 22: Accessibility functionality best example - Royal College of Veterinary Surgeons

Figure 23: Trend in smartphone sales

Figure 24: Infographic on UK smartphone market 2011 – Zabisco

Bibliography

32 33


[email protected]

Published by Zabisco Digital Limited

www.zabisco.com | customer experience: research | architect | design | evaluate | implementwww.zabisco.com | customer experience: research | architect | design | evaluate | implement

Date post:	28-Jan-2015
Category:	Design
Upload:	zabisco-digital
View:	103 times
Download:	0 times

UX of Royal Colleges of Medicine

Design