Andrew Hall


DDD EA – Session 5 – what Ui do developers need to know?

This talk is by @ben_hall and was live blogged

Great user interface design helps our users and creates an emotional connection

We can fall in love in the same way as we use applications. We may not realise this, it’s not a conscious decision.

If an application looks better, this conveys professionalism and carries weight.

In a startup, everyone should be a designer. This causes more emotional connection between your app and your user, hopefully meaning higher app adoption

Design also shares many things with development. Patterns, practices and iteration exist in both worlds.
A junior designer could take some parts and move them into a clean design. A senior designer will take the parts and make this into a easily recognisable design.
A junior designer will see the end goal and keep working towards that. But a senior developer will work differently by iterating and knowing there may be many ways to achieve that same goal.

The left side of the brain sees the details and puts the pieces together. The right side of the brain use the overall visual picture then zooms down into the pieces

As a designer, we can use white space to emphasise certain parts of the page. Eg CTA. It can also be used on text to make it more readable by increasing line height.

It’s important to emphasise the relevant parts of the document.

Also consider the golden ratio, given a rectangle has a side of 1 unit, the other should have a side length of 1.61. This ratio exists in nature, humans and even the Mona Lisa. Twitters timeline uses the golden ration to layout their page as well as the iCloud and apple logo.
These things are built in and not cognitive – applications just don’t feel right

Even square blocks cause more cognitive effort – use circles to feel more natural. We are educated that corners are bad and we have an internal knowledge that squares are bad. Squares draw our focus just outside the square where as rounded corners draw our attention in.

Using icons is very important if they are clear. You shouldn’t need to explain what an icon is – an easily recognisable icon makes it easier for a user to process.
Consistency is really important too.

Images have also introduced desirability. Air bnb has high quality images and it makes people want to use the site. As a web developer this is great as it gives us a great place to start from. Don’t use stock photography. We can use a colour palette from images too to make these match. If you have to use low quality images you can blur them and enlarge them to add a nice visual effect behind the content. You can also use image background to drive attention to CTA

You should also help power users too. Hide extra features away in the UI until users need to know. Reveal these things only as the users need them. You can also use responsive icons to show more detail on larger devices and more simple icons at smaller resolutions

Colour theory is difficult but there are patterns that you can use to find complimentary colours. Colours also have meaning too. Red means anger or passion so we can use these for attention in out design. Where we use green as this means safe and trust for ok messages.

Typography is also important. If you aren’t using icons you are using text so it should look good. Typography is actually art based around words. Get the font wrong and it can destroy your application but can also make it work.
Typography can make content more engaging and compelling but can easily spoil it too.
Serif fonts should be used for print, where each character has a small edges to make things more readable. This doesn’t work on the web though and disrupts your ability to flow during reading.
Type faces are constantly evolving and each font face also has different weights too. Thinner fonts are seen as more elegant.

We aren’t used to seeing all capitals so it takes more effort to try and read, which is why it comes across as shouting or aggressive.

You should experiment with fonts to try and find the one that fits the best but don’t use more than 3, it causes more cognitive load and the user has to concentrate a lot more.

Also make sure you respond to users touch events. It engages the user and without them, confuses the user. If a process is long running the you should let the user know. Showing milliseconds gives the user an indication that something is still happening and gives the user impression that the process is going quickly

Error messages should be informative and helpful to the user. Not just saying “an error occurred”.

Help the user to make the right decision. If a browser knows you are in the UK from your IP address then put UK at the top of the drop down list.

Also make it easy for users to undo actions this makes it less taxing for a user to do certain actions as they aren’t as worried about doing things so don’t have to think so hard.

You can use usability testing to see how your design works. But you shouldn’t just ask “do you like this”. This should be a conversation not just a response to questions. This is a great way to catch mistakes. It’s easier for someone else to spot one of your mistakes.

No Comments

Leave a comment or tweet me