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
Event

User Vision World Usability Day 2022

10th November marked World Usability Day. To highlight and mark the importance of this global event, User Vision, based in Edinburgh, hosted an office open day to learn more about making products usable and highlighting accessibility within digital applications. Tor and I decided to attend the event giving us a glimpse of how to better incorporate good accessibility practices within Edinburgh Napier’s existing and emerging digital services.

Empathy Workshops

Firstly we went into a room that had a mix of consultants with different activities. The first activity was showcasing an example of a badly coded contact form and a good example of a contact form with the demonstration done on a screen reader. From the bad example, it was clear using incorrect HTML and Aria Labels that it was very difficult for the person using a screen reader to navigate their way around and fully understand what each input field is for. It read out ‘inputs’ but didn’t have any context behind it meaning an impaired user wouldn’t know what to enter in those fields.

WCAG 2.2 Guidelines

During our time at the event we attended a talk by one of User Vision’s consultants about the upcoming changes within the WCAG 2.2 guidelines. A lot of these upcoming changes include changes to focus appearance and focus not being obscured during tabbing and highlighting – this is when you are tabbing through content on a page using only a keyboard instead of using a mouse. While these changes aren’t currently live and requirements to adhere to, it’s a good opportunity for us to learn what is upcoming and how as a university we can go above and beyond to support our users in meeting accessibility requirements.

Usability Testing

In another section we worked with a consultant to explore usability testing. Tor acted as the participant and I was the note taker analysing her actions and asking her to verbalise her thoughts and feelings towards the actions she was carrying out. The example Tor was tasked with was to navigate and carry out tasks around the Natwest website where she had to find out the interest rate of a particular balance transfer card. She was also asked to describe her thoughts and feelings as she was going through each task, allowing the facilitators to visually see what works with the application and what doesn’t. This was a great activity that allowed us to see how User Vision run usability tests and the questions they are using to prompt responses from the participant of the test. 

Conclusion

We had a great afternoon at User Vision’s event and we have brought back a lot of valuable information around accessibility and usability. It was great to see the impact caused to impaired users through applications that aren’t built with accessibility in mind. The event has allowed us to reflect and think about what we learned and allowed us to start thinking about key areas where we can improve the accessibility of Edinburgh Napier’s digital applications.

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.