Categories
General

Jakob Nielson’s 10 Usability Heuristics

Image: www.uxbooth.com

One of the best ways to ensure the products and digital services we utilise as a university are offering users the best experience is by following Jakob Nielson’s 10 usability heuristics. Jakob is one of the pioneers of User Experience and chief founder of Nielson Norman, the central hub for all things UX related. By following these 10 principles it’s easier to make your digital application easier and more user friendly.

1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. For example, a loading icon can be used to indicate that the system is processing information.

2. Match between system and the real world

The system should use language and concepts familiar to users, and follow real-world conventions. For example, using a recycle bin icon to delete files is a common real-world convention that users would understand.

3. User control and freedom

Users should be able to easily undo and redo actions, and navigate the system without feeling trapped. For example, an “undo” button can be used to allow users to revert back to a previous state.

4. Consistency and standards

The system should follow established conventions and design standards, making it easier for users to understand and use. For example, using the same colour scheme, layout and terminology across all pages of a website will help users navigate it more easily.

5. Error prevention

The system should prevent errors from occurring whenever possible, or offer ways to recover from them when they do occur. For example, a form can be designed to prevent users from submitting incomplete or invalid information.

6. Recognition rather than recall

The system should make information and functionality easily visible and accessible, reducing the need for users to memorize or recall information. For example, using icons or visual cues can help users easily locate desired features.

7. Flexibility and efficiency of use

The system should offer both novice and expert users ways to streamline their interactions and increase their efficiency. For example, keyboard shortcuts can be offered for expert users to quickly navigate and perform tasks.

8. Aesthetic and minimalist design

The system should have a visually appealing and simple design, without extraneous or irrelevant information. For example, a clean layout and minimal use of colors and fonts can make a website or application more user-friendly.

9. Help users recognise, diagnose, and recover from errors

The system should provide clear and concise error messages that inform users what went wrong and how to fix it. For example, a message like “Invalid email address” can be displayed when a user enters an incorrectly formatted email address.

10. Help and documentation

The system should provide users with easy-to-access help and documentation, including frequently asked questions (FAQs), tutorials, and user manuals. For example, a search function can be included to allow users to quickly find the help they need.

Categories
General

Wireframing

You may have heard the term wireframing when it comes to the design process. In this post we are going to explain what wireframing is, why we do it and how it is beneficial to the University when planning new services and products.

What is Wireframing?

Wireframing is the process of designing a new product at a structural level thinking about the position and hierarchy of the underlying elements. For example if we were looking at a website, this could be planning the layout of a particular page and where a sidebar might be placed on the page. Wireframes are usually basic and can be just rough sketches of a designers work but allow for the layout and flow to be considered. Colours, typography and other finer details are added at a later stage in the design process, usually when wireframes are converted into high-fidelity screens.

Where in the process are wireframes produced?

Edinburgh Napier have adopted the Double Diamond design methodology so in our case we would produce wireframes in the Develop stage of the second diamond. This is usually once we have gathered a proper insight into the problem by gathering user research and narrowed down our focus on ensuring we are designing the right solution.

Double Diamond Methodology

One of the great benefits of prototyping is that it allows the designer to rapidly come up with ideas in such a short amount of time. One of the techniques I have used in the past is the Crazy Eights design sprint. It challenges you to come up with 8 different designs/layout in 8 minutes. This further conveys the statement that your first idea isn’t always your best idea, so it’s best to generate a good amount and analyse these together.

Why are wireframes beneficial?

Wireframing allows us to strictly think about how something is going to flow rather than thinking too much about the visuals. It improves communication throughout the team allowing developers to easily see modules or elements that are going to be produced at a basic level.

Wireframes above all else are time and cost effective. It allows us to get initial feedback from users and stakeholders without much investment.

References

Wireframe cover image: https://miro.com/templates/low-fidelity-wireframes/

Double Diamond Process: https://en.wikipedia.org/wiki/Double_Diamond_%28design_process_model%29

Categories
General

Figma: Our design tool of choice

As a UX team joining Napier we had to decide on a design tool that we were going to use for all of our projects and work going forward. Both myself and Tor had previous experience using Figma at other organisations so it wasn’t much of a challenge on settling on the tool we were going to proceed with. We knew we wanted a tool that would adapt and expand with us as the university’s digital services grow.

A bit about Figma and it’s history

Figma is a web application for interface design and user experience design with a huge emphasis on real-time collaboration. Before Figma there really was no tool that allowed designers to work on the same file at the same time in a Google Docs style working approach. Figma is used by leading product team from across the globe including Google, Uber and Netflix. Figma has become so popular it was recently acquired by Adobe in a $20 billion acquisition.

With Figma being purely web based everything is saved in the cloud. This is great as we don’t have to worry about storing design files locally and instead they are in the cloud accessible by all members of our team.

Figma VS Photoshop

Many may ask why we didn’t settle with Adobe Photoshop for designing screens and mockups. The main answer to this is the collaboration aspect. If we are working on a large time consuming file, having the ability for multiple team members to work on it simultaneously is going to cut our production time in half. Not only this, but we would have to deal with manual version control, ensuring all team members are on the most up to date version. With Figma, this is all handled automatically. Lastly, another major reason Figma is a winner for us is with it being a vector based application. This allows us to scale elements up to any size without a reduction in quality. For example, if we designed an interface for a smaller iPhone, the interface could easily be scaled up to a large tablet size with no loss of quality.

The future path to a Design System

We wanted a tool that allows us to have scope for building out a future design system for the university. Having this will allow us to ensure everything from Napier is consistent, and every application looks and feels familiar to the user. University of the Arts London adopted Figma and built a design system from the ground up for their new website and web applications. This is just one case study of Figma supporting the digital services of a higher education institute.

Categories
General

Usability Testing

Usability testing allows us to evaluate how intuitive and easy to use a product or service is by testing it with representative users.

What is usability testing?

It’s a method of testing the functionality of a website or digital product. Typically, a user is asked to complete short tasks whilst observers take notes. The goal is to uncover problems in the design, discover opportunities to improve and learn about user’s behaviours and preferences.

Benefits of usability testing

  • Well established way to identify common usability issues
  • It’s relatively quick and easy to carry out as you don’t need any special equipment
  • It’s a low cost, low risk way to gather feedback
  • Engaging real users is hugely insightful
  • Identifies problems & severity early on which can save time and money
  • Sessions can be held remotely which can make it easier to engage with participants

Drawbacks of usability testing

  • It’s a controlled environment so may not truly reflect how a user would naturally use the product of the challenges they may face in real life
  • Can be challenging to find the right participants for some tests, poor selection can lead to lower value or misleading insights

Planning for a usability test

The core elements for most usability tests are the facilitator, the task(s) and the participant. It can also be beneficial to have a separate note taker in addition to the facilitator.

Before conducting usability tests we need to define some criteria.

  • What are we testing? – You need to know what part of your product/service you want to test and why.
  • How will we run the test? – Is this something we can facilitate remotely or do we need to meet in person?
  • The task(s) –  We need to clearly define the user’s tasks. These need to be realistic activities that a participant might perform in real life.
  • Recruiting testers – You need to know who your users are. It may be appropriate to reach out to a diverse group from your stakeholder map.
  • Measure of success – We need to define our measure of success. Is it task fulfilment, time on task and/or qualitative feedback?
  • Facilitating the test – The facilitator will ask participants to narrate their actions and think aloud as they perform the tasks. This gives insight into participants’ behaviours, goals, thoughts & motivations. A note taker will capture qualitative feedback.

Usability testing is an iterative process and we use these insights gained to make future improvements.

Type of usability test

Usability testing can be either qualitative or quantitative.

Qualitative usability testing focuses on collecting insights, findings, and anecdotes about how people use the product or service. Qualitative usability testing is best for discovering problems in the user experience.

Quantitative usability testing focuses on collecting metrics that describe the user experience. Two of the metrics most commonly collected in quantitative usability testing are task success and time on task. This is useful for creating benchmarks.

Getting started

Usability testing is a hugely insightful way of discovering if your digital product/platform is as intuitive and easy to use as we’d hope. Please reach out if you’d like to discuss your ideas on how usability tests could benefit your team.

Further Reading

NN Group – Usability Testing 101

Hotjar – Usability Testing

Categories
General

What is UX?

In short and simple terms, user experience is all about how people feel when they use a product or service. The experience of using a product should be seamless and enjoyable for every type of individual. User Experience can be applied to anything, whether that’s a school student looking at a particular course on the University’s website or the process a staff member has to go through in order to get another application installed on their managed laptop.

Our job as a UX team is to ensure that the user is at the forefront of every project. While our primary focus is being on the user, it is also important that we take into account the organisation’s goals and needs. As a team we aim to create enjoyable, usable and accessible digital products for the university.

Some of our day to day work includes research for digital projects across the university. We use a wide variety of different research methods, the most common ones being one on one user interviews, focus groups for collecting insights from a larger audience and surveys for obtaining statistical quantitative data. The research methods we use are subject to the project being worked on.

We take our research and make use of the data by constructing user journey maps. These allow us to visualise a user’s existing journey when carrying out a task and allows us to see where users may be getting stuck, and where we can improve the experience. Empathy maps are another resource that we use to put ourselves in the shoes of the end user – allowing us to explore what a user might think, say, and do when completing a task.

UX at Edinburgh Napier University

In 2017 some of the members from the Applications team within the Information Services department realised that the University could benefit from taking a UX led approach to application development. From 2017 we have been using this approach and with it has brought great success with the projects it has been utilised on.

Looking to the future

I joined the Information Services department as a UX Designer at the start of August and a Senior UX Designer is due to start in a few weeks time. This is an exciting period for UX within the University as it is gaining a wider presence and the team is growing.

If you have any questions about UX or would like to be involved in future projects, feel free to email me direct or reach out on Microsoft Teams. We will be blogging here with further information about UX and sharing our work.