#LockdownLife: Learning about UX

Since Lockdown began, I’ve been eager to keep on working through and learning each day. I’m currently in the middle of looking for work but in the meantime I thought I’d start learning and building my skills on something that I’ve always been interested in. UX and UI design & development. I’ve had some time to reflect on how I’d like to steer my career moving forward and taking all the skills I gained at DevelopMe and what I’m currently learning, I’d love to aim for this field of work.

I’ve always been interested in UX. Researching and figuring out how and why users are using an application in a certain way. Human behaviours and interactions. Human psychology and how that plays a role in websites and applications. I find all of this very fascinating! Along with this I’m also passionate about accessibility for the web and user testing and I’d love to play a part in creating great user experiences for all types of user. It plays a very vital role in any online application big or small.

So with this in mind, I set about finding out more about UX and UI and self teaching whilst in lockdown. We covered basic UX principals at DevelopMe including wireframing, responsiveness, accessibility and testing but for the past few weeks I have been using a website called Pluralsight. They are offering a month of free access for anyone eager to learn and this was perfect for what I needed. So far I’ve completed courses on; UX Fundamentals, UX for Developers and creating great User Experiences.

I have been working on a practice UX project. More on that in my other blog but for now, here’s what I’ve learnt so far on UX.

UX stands for User Experience. It essentially means creating great experiences for users to any website or application no matter what the device. UX isn’t just about design. It involves many more aspects broken down into the following:

• Visual Design
• Interaction Design
• Content Strategy
• User Research
• Business Objectives
• Information Architecture

So, why is this so important? Well, we’re essentially looking for three desired results when looking at UX:

Happy = A happy user means high retention rates and increased sales.

Satisfied = A satisfied user means they are way less likely to leave your application early or go to a competitor.

Productive = A productive user is one who has visited your application and has achieved their goal whether that’s purchasing an item or finding the information they need. A productive user is highly likely to revisit your application.

User Friction

We can see UX as the measure of friction between a user and their goal. When friction is low, we get a good user experience 😃 When friction is high, we get a bad user experience ☹️

There are three main types of user friction:

Cognitive Friction 🧠

This is the most important as it’s common across gender, culture and environment. Cognitive friction is anything that makes a user’s brain work needlessly, resulting in a break of their flow on an application. We don’t want the brain to be working too much.

Emotional Friction 😶

This is people’s emotions, feelings and perceptions about an application. It’s important that users feel happy and satisfied when using your application.

Physical Friction 🏃‍♂️

How people physically interact with your application. Do they need to use a keyboard or a mouse or a mix of both? When a user is forced to change their physical interaction with your application, this can introduce physical friction.

Strategy Documents & Empathy Maps

A strategy document is crucial as it includes both an empathy map and business requirements. It’s essential that you meet business requirements when designing UX as you then have something to aim for when creating a application. For example — What does success look like in this application to the business? Is it to get more money?

UX is all about research. Lots of research. The meaning of a good app to me could be totally different to another person, so this is why research is so important.

One way of researching is using an Empathy Map. This is a way of mapping out how a user is feeling about your application. With this information, it’s a lot easier to create great UX. This is measured on how they:

Think & Feel 💭

• Worries and preoccupations
• Aspirations and inspirations

See 👀

• Their environment
• Competitors

Say & Do 🗣

• Current tasks
• Current solutions
• Current behaviours

Hear 👂🏼

• What friends say
• What influencers say

Pain & Gains 😖🤗

• Any fears or frustrations
• Wants, needs and success measures

User Journey

A user journey maps out the users actions and emotions whilst using your application from start to finish. User journey defines:

• Motivations for using your application
• Problems that the app solves for the user
• Different phases of your app
• Emotions and feelings

Scenarios and Flows

This focuses on specific areas of functionality. It defines the needs from a user for a particular scenario as well as the system needs from users in a particular scenario.

When looking at flows, we’re looking at how the user moves through the system and what is the best path to this system. This can help design UX to make it as easy and practical as possible for the user to reach their end goal.

Storyboarding

Here the user is the “star”. Storyboards don’t explain interface but rather the user’s journey. It can help explore and map how the user will use your application.

Wireframing vs. Wireframes

Wireframing and Wireframes are similar but deliver two different results. Wireframing is initial sketches and rough ideas for an application. This can help get any ideas you have onto paper.

Wireframing on the other hand is a deliverable that the client will see. This is best done after prototyping and testing and can be done digitally.

The best practice when wireframing is to use the Atomic Design Method. I was taught this as DevelopMe so i’m familiar with this concept. This is the idea of of designing and developing the building blocks of an application and growing them into larger elements. They are broken down into:

Atoms = The basic building blocks. Form labels, inputs, buttons etc

Molecules = Groups of atoms bonded together. A form label, input and button do nothing on their own but together creates a form.

Organisms = Groups of molecules joined together to make sections of an interface. An example could be a header comprised of nav molecules or search bar molecules.

Templates = Groups of organisms joined together to form actual pages. This is where the design starts coming together.

Pages = Highest level of Atom Design. This is where you can start putting real content together like text and photos to show what an application could really look like.

By breaking things down, it’s a lot easier to focus on the small details including that really small button at the bottom of the page!

Prototypes

Prototypes are the architectural model and helps bring a site to life. There are many benefits to prototyping including:

• Bringing ideas to life
• Helping provide feedback within the proper context
• Helping find interaction issues early in the process
• Helping reduce development time
• Encouraging collaboration from other teams with stronger results

There are two main types of prototypes:

Prototype Flows

Tests navigation and how users may complete tasks or move through an application.

Prototype Interactions

Tests interactions within interface.

There are three main types of prototyping:

Low Fidelity (Lo Fi)

Prototypes that are quick and easy to make for example a paper prototype.

Medium Fidelity

Online prototyping software allows for drag and drop interactivity. Focuses on interactivity NOT visuals.

High Fidelity

‘Pixel perfect’ and includes design elements. This helps users and clients better visualise the final product and this is usually coded in HTML and CSS.

Usability Testing

As mentioned previously, we covered the principals of user testing at DevelopMe but it was good to explore this further. Usability Testing helps us understand what is a good experience vs bad experience and ensures that designs are user centric. It can test interactions and navigation and flag any issues. It’s a good idea to get to get designs in front of users as soon as possible and make any changes to prototypes where applicable. Testing is crucial as user centred design means good design.

From a development point of view, there are some good tests to make sure you’re getting the most out of usability testing. These are:

5 Second tests:

Great for visuals. Show a screenshot of your application to a user for 5 seconds and explore what emotions they felt and what they saw.

Comparison tests:

This is good if you are trying to improve UX and UI. Show the user a side by side screenshot one of the old UI and one of the new UI. The user can click on the one that they prefer.

Click & Navigation tests:

Testing whether the user knows where to click and how to navigate your site. It’s good to test if your application makes sense to the user without having to prompt them.

This is just some of the principals I have learnt over the past few weeks. As well as this, I have also learnt about User Vision and User Mind hacks as well as UX myth busting that I will be detailing in another blog shortly.

🙋‍♂ ️Want to talk?

I’m currently looking for employment. I understand times are very tough with the Coronavirus situation and it’s hard for everyone but maybe we can start talking? I’m always keen to learn new things and discuss ideas and I’m happy to talk remotely with the wonders of modern technology and send across my CV and other info.

Please send me an email joshmarston@hotmail.co.uk or drop me a message on Twitter if you’d like to talk and I’ll get back to you.