Author: Josh Longhurst

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.

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.

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

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.

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.