Be the ocean, where I unravel

Today's post spotlights "I Follow Rivers" by Lykke Li. Although I am personally obsessed with the Marika Hackman cover. That's what I have on repeat today - and that's what this post references.

Good UI (user interface) 

This is what I have been learning about today, and I would like to write about it.

Understanding User Needs

As a common theme, this is at the forefront of good UI. This is across so many things, including accessibility which is such a key part of user design. How can you make a product accessible if you don't know what accessibility features a user needs? 

This relates really well to general UI stuff where you need to keep researching, asking your consumers what they need, and you need to keep testing as well. This relates to one of the coolest things I have learned today which is about Feedback.

Interactivity

On the subject of feedback and interactivity, it's important to keep on giving users feedback about whether or not they're using the product or the app properly. 

So this doesn't mean feedback from the user for the product although that is hugely important to. 

This means feedback from the product, to the user, while they are using the app.

What might some examples of this be?

So one example of this is having live loading information so that a user can see how much progress something that is loading has made.

Another example would be sending a message like "received!" or putting in a checkmark or turning a box green if something has been accepted. Or conversely if there is an error or an incorrectly submitted field then turning the box red or putting up some kind of an "error" notification/message or showing some kind of a warning symbol if something has been done wrong as well. All of this is just to let the user know how they are interacting with the app and if they are using it properly and stuff. Another word for this might be "visual cues".

Micro interactions

Things like highlighting the current text you are hovering on. 

Little animations. Beautiful, little things to add delight to your end users.

Responsive design

It goes without saying that your product should be able to be used on multiple devices.

Diverse Perspectives

It's very important you talk to a wide variety of people about your product. Otherwise - it's not just about solving the problems - it's about knowing you have them in the first place. How will you be able to solve them if you don't even know that you have them? You need people with different user needs to point them out to you.

General UI Pointers

Consistency and intuitive use

Consistency - I found this fascinating. Making your buttons, colours, text colours, fonts etc. consistent makes your website easier to use and less confusing.

Equally, keeping it simple also really helps! 

Navigation should be really clear as well.

Interactions should be logical and make a lot of sense and be just how they would be in real life.

Whitespace and visual balance

Why do I find this SO COOL? 

Well I just love whitespace.

I love emptiness.

The less, the better imo.

Other a11y [accessibility] considerations

Screen Reader Compatibility

It goes without saying that your products should be compatible to users with a screen reader.

Colour Contrast

Colour contrast should be optimised to provide a good and usable UI for users with visual impairments.

Keyboard Accessibility

The UI should be fully accessible using only a keyboard. No-one should have to use a mouse or other pointing device to navigate it.

Alt Text

Visually impaired users or users using screen readers should be able to understand the meaning, purpose and context of the images. 

Using Semantic HTML

I feel like this is a no-brainer but using semantic HTML will make your web pages more accessible. Things like "heading tags, lists, and semantic elements" will make a web page more accessible.

The main thing is for users who are using assistive technologies to be able to navigate your web page more easily.

Focus Indicators

Have a way of making it clear to the end users what the current focused element is.

Captions and transcripts

It's important to provide these for multimedia so that e.g. users with hearing impairments can understand the message of your video if you provide one.

Diverse Testing

Test with a wide variety of people

Inclusive Design

Make your design as adaptable and inclusive an experience as possible. 

Make it possible to changes colours, font sizes, and, if possible, even layouts and so on.

Lighthouse

I did my first ever accessibility audit with lighthouse. It was soooo cool! It's an inbuilt device in chrome dev tools and it can do really cool things like generate an accessibility report. I tried it out on my two personal websites - I was really happy that one of them, https://www.susannalovesreact.co.uk/ , got a score of 96 (although it could still do better).

I have been so excited to try it for so long. 

I have heard so much about it before and so it was great to finally use it at last.

Understandable

A big part of web accessibility is making sure your content is understandable.

I get this because of my neurodiversity. Although we all need everything to be understandable this need is particularly pronounced to me.

I find things very confusing and get confused easily.

This is why I LOVE and am very passionate about good UI. The whole thing can change how I feel about the world. Clear instructions make me feel safe.