A web page

Visual Design Analysis – WHO COVID19 web site and WhatsApp chatbot

A visual design analysis submitted as part of undergraduate design studies at the University of Adelaide. It has not been peer reviewed or published and should only be taken as an assignment example. The images are courtesy of www.who.int and www.messengerpeople.com. The information is up to date as of 28 June 2020.


The WHO Novel Coronavirus site is part of the wider WHO web presence and is situated within the emergencies and diseases section of the main site. It has a spacious layout with plenty of navigation options and is adaptable to suit most screen sizes. The World Health Organisations WhatsApp chatbot is a lean platform that takes advantage of the popular messaging service to deliver the most important information to those without regular web access or a computer.

They are designed to communicate facts and figures, news, and information on the Coronavirus pandemic. The website is further designed to be a reference for the public as well as providing technical advice and sharing scientific data to governments, medical professionals, and other organisations. It is also a platform wherein the organisation reports on their operations and strategy to a wider audience. The public can easily find simple information and advice that is relevant to them and learn more about what is happening around the world. Government and health officials might use it to help formulate public policy, while scientists and medical professionals can access and share research. Importantly, it offers source data and comment for the media.

A web page

HUMAN CENTRED DESIGN

The main page is a ‘dashboard’ design and important information is accessed through a collection of ‘buttons’. The level of detail grows as the user navigates further into the parts of the site relevant to their search. A dashboard is both ‘cognitively intuitive’ and ‘perceptually intuitive’ (Giacomin 2014, p. 611) which aids in facilitating ‘the exchange of information and ideas that is essential for civil and political life’ (Buchanan 2001). The simple text based design fulfils the WHO’s social responsibility through graphic design, by ensuring that ‘communications related to the safety of the community are properly implemented’ (Frascara 2006, p. 28). Another feature that fulfils a wider social responsibility is the provision of video links featuring press conferences, instructional how-to videos, and video updates. This is an important feature that enables low-literacy users to access information.

HUMAN COMPUTER INTERFACE

Common graphic design elements and principles are applied to the design of the site with human users from all walks of life and capabilities in mind. Naturally, highly literate users will interact with the site differently to low-literacy users but even literate users ‘may sometimes find reading more difficult when under time pressure, fatigue or stress’ (Colter & Summers 2014 p. 330).

NAVIGATION

The landing page of this case study is an example of a clean page without ‘too much extraneous information and too many attention getting elements’ (Colter & Summers, 2014, p. 340) which tends to support the success of visual queries. With particular reference to English speakers and readers, the hierarchy of the site follows a left to right and top to bottom arrangement of links and information in which the designers have made sure that ‘the first information users find is the most important and easiest to understand’ (Colter & Summers 2014, p. 338). Perhaps it is because the visual query aspect of the site design is more important, but the ‘Type your question here’ field in the centre of the screen is one of the least visible elements on the home page.

As the user progresses further into the site the main navigation bars at top and bottom ensure the user knows they are still within the WHO ‘brand’. While within the COVID-19 section of the site at least, the important buttons from the main COVID-19 page remain available on the left hand side of the page being viewed. This enables simple navigation, either backwards like a bread trail, or sideways to other pages that may be potentially relevant to a user’s search. The design considers that some users are just browsing while others are on a mission to find particular information. It ‘provides users with signs and markers’ so users understand ‘where they are in an app’ (Pratt & Nunes 2012, p. 116).

A web page

COLOUR

The colour scheme is a complementary one of red-orange and blue-green with red and pink used sparingly to highlight only the most important data and warnings. These de-saturated colours are ‘restrained and sombre’ for ‘function and efficiency’ (Poulin, 2011, pp. 65-66). The white space upon which the complementary colours are set results in excellent luminance contrast making the pages easier to read.

SPACE

The expansive white background features wide margins. The important content is delivered in one, two, or three column formats depending on the level of detail. The arrangement creates a ‘psychological space’ that ‘influences the mind and eye of the viewer’ (Poulin, 2011, p. 108). The use of white space as an element also considers that ‘backgrounds can distort the appearance of a small patch of symbol colour leading to the confusion of one symbol with another’ (Ware, 2008, p. 77). This white, or negative, space is also present within the typography. The white text on blue or orange backgrounds furthers the user experience by aiding the interface to ‘fade into the background, allowing the user to complete the task with a minimum of effort’ (Pratt & Nunes 2012, p. 114).

TYPOGRAPHY

The typeface is exclusively Arial in a number of different sizes, cases, weights, and colours. This provides a professional unity of design. A health website is probably not a great place to introduce too much variety in graphic design principles. It is worth noting that the largest typography elements on the page (after the page title) are the numbers of cases, deaths, and countries with cases.

IMAGES

Images are few and far between on the site. Photographic images are reserved for YouTube videos, news links at the bottom of the landing page, and other pages containing ‘news’ like stories. Any video and photography that is used is ‘immediate, intuitive, powerful, and pervasive…’(Poulin, 2011, p. 236). Maps and graphs used on the WHO Coronavirus Disease Dashboard ‘bring clarity and organisation to complex information’ (Poulin, 2011, p. 235).

A web page

 

A web page

WHATSAPP

I tried to use the WHO WhatsApp chatbot on two unique mobile phone numbers and it would not respond. I analysed the graphic design of the chatbot from screenshots at www.messengerpeople.com. This simple text-based platform provides a low bandwidth means of access to WHO information to billions of people worldwide. Many people communicate with emoji on messaging platforms and these are used as a visual aid to the text. The text uses plenty of space and short and sharp sentences to ensure the contrast of the text is maintained.  In some cases, links to YouTube videos are provided so that information can be delivered in the same intuitive way it is on the website.

CONCLUSION

Within the WHO website, elements of space, typography, colour, and image are used to aid design principles of unity, hierarchy, emphasis, and proximity. Many of these elements are somewhat ‘baked in’ to the WhatsApp platform already, limiting designers to working within the constraints of the platform. Overall, a wide variety of visual design elements and principles are used to support social innovation and fulfil the WHO’s social responsibility to human dignity and human rights.

REFERENCES:

Giacomin, J 2014, ‘What Is Human Centred Design?’, The Design Journal, vol. 17, no. 4, pp. 606-623.

Buchanan, R 2001, ‘Human Dignity and Human Rights: Thoughts on the Principles of Human-Centered Design’, Design Issues, vol. 17, no. 3, pp. 35-39.

Frascara, J 2006, ‘Graphic Design: Fine Art or Social Science?’, in A Bennett (ed.), Design Studies : Theory and Research in Graphic Design, Princeton Architectural Press, New York, pp. 26-36.

Colter, A & Summers, K 2014, ’13 – Low Literacy Users’, in J Romano Bergstrom & AJ Schall (eds), Eye Tracking in User Experience Design, Morgan Kaufmann, Boston, pp. 331-348.

Pratt, A & Nunes, J 2012, ‘Chapter 8 Guide, motivate and engage the user’, in Interactive Design : An Introduction to the Theory and Application of User-centered Design, pp. 114-123, Quarto Publishing Group USA, Osceola.

Poulin, R 2011, The language of graphic design an illustrated handbook for understanding fundamental design principles, Illustrated handbook for understanding fundamental design principles, Rockport Publishers, Beverly.

Ware, C 2008, ‘Chapter 4 – Color’, in C Ware (ed.), pp. 65 – 85, Visual Thinking, Morgan Kaufmann, San Francisco.

Messenger People Covid 19 World Health Organization Via Whatsapp Chatbot, viewed 12 May 2020,
<https://www.messengerpeople.com/covid-19-world-health-organization-via-whatsapp-chatbot/>

Outdoorstype

View posts by Outdoorstype
Writer and all round nice guy.

Log in to leave a reply with Facebook, Twitter, Wordpress or Google+.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top
%d bloggers like this: