I recently took advantage of the free upgrade available to learners on the Accenture course, Digital Skills: User Experience. This satisfied my desire to brush-up, enhance and re-visit my web usability skills. As a MOOC Producer I was also able to use the FutureLearn peer assessment tool and reflect on the experience. The assessment required learners, among other activities, to evaluate a web site or app. I resisted the temptation to use the peer assessment tool as the subject of my case study. I will doubtless blog about the peer assessment tool in the future, but this post is to share (the director’s cut of) my case study.

Q1: Good UX Design Principles

  • Write a short description of the website or app from your chosen business.
  • Does the website or app have any of the following good design features: simple, intuitive, efficient, engaging, supported, consistent, or easy to recover? If so, explain how it fulfils these good design principles and provide examples.

I have chosen the News & Events microsite on the Intranet at the university where I work.  The focus of this case study is the part of the site which allows staff to submit articles describing events for semi-automatic publication.  The site can be accessed from the following link: https://intranet.royalholloway.ac.uk/staff/news-events/home.aspx

Staff members can use an online form to submit details relating to, for example, training events.  Details include a the name and e-mail of the submitter; a title; event description; location; start and finish dates and times; an event category; an image; and, occasionally, a Google reCAPTCHA image test to ensure the submitter is human and not a robot.

Simple: The webpage uses a short form to capture the event information.  The bare minimum of fields is used to produce the articles.  There are no conditional fields; i.e., those which appear as a result of a previous choice. The white background adds to the simplicity of the form, standing in contrast to the subdued tones of the page background.

Intuitive: The form uses familiar language in its instructions, fields and descriptors.  The fields are arranged in a narrow linear format; there is no ambiguity as to where the next field is. 

Efficient: Those users who use the Tab key to navigate between fields will find the linear layout particularly helpful.  The narrow layout reduces the need to scan the page horizontally and this speeds up the users’ completion of the form.  There is good use of drop-down menus for items such as timing and the event category serve to increase form completion speed, consistency and clarity.

Engaging: The events web page is attractively designed – and remains in place when the form is presented.  The language used in the fields is personable, for example “You name”, “Your emails”, etc.

Supported: Field titles are simple and unambiguous, while those fields considered mandatory are highlighted as such.  As the form is presented alongside existing articles, there are working examples to which a novice submitter can refer.

Consistent: The form is consistent in its use of fields and employs a mix of text input and drop-down boxes appropriately.  This is in common with other forms on the University site which the submitters may have used previously.  The form is also consistent with common web design principles on the WWW.  There is no real learning (or re-learning) curve for web users in the completion of this form.  The previously mentioned non-use of conditional fields – which can alter the layout and content of a form several times – adds to the consistency of the form.

Easy to recover: In common with many online forms, this one allows editing of fields and a change of selected image prior to upload.  If any mandatory fields are left incomplete, the user receives clear feedback that there is a problem, where it lies, and how to resolve it.

Q2: Personas

  • Think about an example customer who might use the website or app. Write down the information you would include in a short persona about this customer.
  • Include the following: a fictional name and description of this customer, demographics, their background story, any other important information, and some additional sections you might include.

Harry is responsible for specialist training in one of the University’s areas of strategic importance. He manages a small team who design and deliver training in a range of subjects on a regular basis to staff.  He needs to publicise the work of his team, efficiently, accurately and frequently.  Harry is sensitive to the training needs of his audience and is responsive and flexible in his approach to designing and scheduling events.  Harry uses a number of institutional web tools and services in his work (room booking; equipment booking; catering; events; feedback) and needs these to be consistent and trustworthy.

Q3: User Testing

  • Think about the persona you have created and why this person might want to use the app/website. Imagine that you are going to make some changes to the app to improve it.
  • Describe the type of testing you could perform to test these updates, including why it would help and some of the tasks or observations you could include.

In Q2 it is clear that the page conforms to all seven UX principles.  It does, however, offer little in the way of contextual support for submitters as they navigate through the form.  While this provides a clean and uncluttered interface and allows users to complete the forms quickly, it does not provide guidance.  Examples of useful guidance include any word count limits for titles and descriptions; file size limits for images; whether the submitters; name appears in the resulting article; when the article will be published; and how to edit articles before or after they have been published.

Another area in which the page is weaker in terms of UX is the ease of recovery, arising in part from the issues around contextual support.  Often, an article will not appear on the site.  The submitter will receive no feedback as to the cause of the failure.  It well may be related to file size or word count, and this only encourages resubmissions which can then lead to duplication of article.  An example of how UX is not only on the site but beyond, is that there is no indication of the publication process; does it require human intervention? What is the expected turnaround time?

With the need to address these limitations in mind, a new version of the page is designed and subjected to testing.  A mix of testing approaches is appropriate here, with A/B testing and task-based testing being augmented by diary and guerrilla testing.

Users could be directed to either the existing or redesigned page in an A/B testing scenario.  Success rates, e.g., the number of successful submissions, could be recorded, compared and analysed to justify rollout of or further improvements to the redesigned site.

Users could be observed using the redesigned form to measure the impact on their ability to submit an event.  Emotions could be observed during tasks e.g., “How did the user react to the error messages?”. Questions could be posed, e.g., “Did the additional support quicken or slow down the form completion time? Again, this data can be analysed to measure the efficacy of the redesign.

The UX issues arose as a result of the form, yet the symptoms presented out with the form; the subsequent, unexplained non-publication of articles.  Diary testing, in which users record the experience and outcomes of using the improved interface.  Exemplar entries could include the success rate of submission, e.g., “Was I able to consistently and successfully publish to the site?”.

Finally, going out to offices and demonstrating the new design, and inviting users to view, use and provide feedback will provide real-life data in realistic contexts.  This is of particular value as users experience the page in the environment in which they are likely to use it, e.g., with their PC.

Posted by elswedgio

E-Learning Professional. It's all about Moodle and MOOCs at the moment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s