Even if the code is efficient, is meticulously executed and has all the required functionality, a poorly designed and developed user interface will lead to a poor user experience and ultimately a lack of confidence in the product.

In this chapter we will explore the concept of user interfaces and how these can affect the user experience.

USER INTERFACE AND USER EXPERIENCE

Left to our own devices, many of us will tend to create a user interface (UI) based on our own preferences. While that would obviously suit other users with the same preferences, it will probably not suit the majority. This applies not just to the UI but also to the whole user experience (UX) with a software development product.

The term ‘user interface’ refers to the technologies (screens as well as input and output peripherals) that allow the user to interact with the computer or a device. The term ‘user experience’ is the level of enjoyment or frustration a user faces when interacting with the computer or device.

Here are some general things to consider when working on the UI and UX components of a software project:

• Investigate the preferences and requirements of users, drawing on a wide range of potential users of the software. This will ensure that you know your audience.
• Understand how your users will interact with the interface.
• There will be times when you will need to make assumptions. You should ensure that any assumptions you make are validated with users across the range of user groups.
• Ensure that UX is high on the list of considerations. An appreciation of the UX is as important as the functionality. A poorly designed UI will lead to a poor UX and may lead to a reduction in users even if the software functionality is outstanding.
• Avoid any potential for poor technical experience – this is particularly relevant with the development of web apps, which may need to function across a range of browsers.
• Ensure that your software is clear and simple to navigate and that any help is easy to access.
• Ensure the consistent use of fonts. Find different ways to emphasise aspects of your interface rather than simply resorting to changing the font.
• Make sure that error messages are useful and give users a clear indication of what they should do next in the event of an error.
• Manage user inputs. Give your users visual guidance on the type of input expected (e.g. ‘Enter height in metres (e.g. 1.3)’ or ‘Enter height in centimetres (e.g. 130)’. Simply prompting a user with ‘Enter height’ could elicit either response.
• Help users to input data correctly by implementing validation to limit input and make sure that a user’s inputs are at least sensible.
• Reduce the need for user input by employing mechanisms that enable users to choose from appropriate options via dropdown boxes, combo boxes, radio buttons, check boxes and so on.
• Make the UI easy to navigate and use.
• Concentrate on the alignment of prompts and input boxes, and ensure that there is white space to reduce the level of screen noise.
• Declutter the UI as much as possible (using pop-up menus or links between screens) to reduce the likelihood of overwhelming users.
• Limit the number of colours in use and choose simple colours.
• The best UI designs should be relatively intuitive.

USE OF TOOLS

Depending on the type of project, many different UI and UX tools are used. Some help with designing interfaces while others are used to create prototypes or communicate potential choices to clients.

It is beyond the remit of this book to cover all possibilities, but some common ones include:

• Storyboards: visual representations of each of the screens that the user will navigate. The term is taken from the film industry, where storyboards are used to plan the narrative of a film or scene.
• Moodboards: particularly used in web development, these show how images, styles and colours will be used together to evoke a concept or style.
• Wireframes: these are visual representations of the functional aspects of the UI and how they interconnect. There is no styling or branding. Wireframes are very popular in mobile application development.
• Interactive prototypes: these are stripped-down versions of the intended product, with limited functionality that the user can experiment with.

In addition, traditional graphic design packages can be used to create artistic mock-ups of UIs. However, modern UI and UX trends focus on providing a more interactive client experience, demonstrating how the end user engages with the software, not just what it looks like.

Key UX design principles include:

• Meet the needs of your users (simplicity for inexperienced users, but consider more complexity for experienced technical users).
• Have a clear plan. Know how one screen links to another and how users will navigate between screens and the home page or menu. Have a clear hierarchy that sets out how the content of the program, web page or app is organised.
• Ensure you have consistency – this can be in terms of the use of buttons or hyperlinks to navigate between elements, but probably not both as this can be confusing for users.
• Think carefully about accessibility and design your solution to cater for the needs of the widest possible range of users who might want to use your software. This may mean making adaptations to suit users with visual impairment, physical challenges, deafness or other restrictive conditions. For example, if you are focusing on web development, you may find it helpful to reference the World Wide Web Consortium’s web content accessibility guidelines (W3C 2018).
• Don’t forget about the context of your product. Business solutions should look and feel professional, whereas you can be less formal when developing more social products.
• Don’t forget about usability. Solutions which are busy and cluttered with lots of buttons and links can lose users’ attention very quickly.
• Consider the language you should use for your particular audience. Simple language will always appear more user friendly.

If you want to explore this topic further, you are encouraged to read User Experience Foundations (de Voil 2020).

SUMMARY

When software developers learn to program, they should think about their users. It can help to put yourself in the shoes of users by thinking about elements of software design that you yourself don’t like. If you do not like something, why should someone else? Use the available tools and consider the suggestions outlined in this chapter.

In the next chapter we will examine how program code can be linked to a variety of back-end data sources.