Design Principles: Visual and Text elements

Design Principles: Visual and Text elements

When we design a user interface we need to consider the colour and font styles.

Use of colour

How you use colour in the design of your user interface can have practical and emotional implications for the user.

It is important that we don't use too much colour, as a rule about 2 or 3. Having too many colour can make it difficult to read and focus

Make sure the colours don't clash, when colours clash one colour is more difficult to see

House Style

Use the organisations house style colours. Each organisation will have their own HOUSE STYLE. House styles ensure consistency so that customers recognise them. For example, if we were to design an app for Tesco, we would use the colours red, white and blue.

Use textures

The word 'texture' is used to define how an object feels in your hand. On screen this means how the colours can be used to create a certain feeling, mood or emotion. For example, using glossy colours, which look smooth and shiny, are often used to make things look more professional, serious and calming. We often describe a colour as being warm or cool.

Open Ended

What is an organisations House style and why do they have one?

Multiple Choice

How many colours should be use when designing a user interface?

• 1

• 2 or 3

• 4 or 5

• 5

Open Ended

Why should we ensure colours don't clash?

Open Ended

How can we use textures to create certain 'feelings'?

Use of font styles and sizes

We should choose the most suitable font for the purpose. Fonts are usually SERIF FONT (best for printed text) or SANS SERIF FONT  (best for on screen text).

Decorative texts are usually Serif Fonts, they are creative and generally designed for small amounts of large text. This is because they are difficult to read.

Font style and size

It is important the size of the font is readable, Not too small to read but not too big as it will reduce the amount of text you can fit on the screen as it may increase the amount of scrolling the user has to do

Multiple Choice

We should choose the most suitable font for the purpose. Fonts are usually SERIF FONT (best for 1________ text) or SANS SERIF FONT (best for 2________ text).

• 1. printed
  2. on-screen

• 1. on-screen

  2. Printed

Use of language for user NEEDS

When writing any text for a user interface, you should ensure that the language of the text can be understood by all users and consider the user’s age and their relative experience. For example, a user interface designed for a child will probably have a few short sentences in simple language, while a user interface for an older person may have more text using more complex language. Don’t automatically assume that the user knows something. Users will learn at different paces and some users may forget easily. The language you use should be positive and should encourage users rather than making them feel fearful of using the user interface. For example, if you are designing a user interface that has several screens, don’t assume that the user will know that they need to swipe their finger across the screen to move to a different screen

Language appropriate for user SKILL level

Although it is not always possible, you should try to keep the amount of technical language to a minimum. The complexity of the language should match the user skill level. An expert user will be able to read and understand technical language, but a novice user may not. If the user does not understand the information they may not know what they need to do, which can cause frustration. For example, here is an initial design for a search facility for a website. The word ‘parameter’ may be difficult for some users to understand

Amount of information

Too much information onscreen can be difficult to read. Alternatively too little and the user may not understand what they need to do.

A good idea is to only include information on the screen that is needed to complete a task. You should explain only one concept on one screen or one area of the screen. If a user sees irrelevant information, they will become confused.

It’s important to keep your sentences as short as possible. When giving instructions, you should also keep the language as simple as possible. This will make instructions easier to read and understand

Use of white space

White space is unused space on a screen and can be any colour. The amount of information that is given should be linked to this. If a page has a lot of white space, then it will have more information on it. However, if there is not a lot of white space, then the amount of information given will need to be reduced. It is important to balance the amount of information with the amount of white space so that the screen does not look cluttered

Multiple Choice

When writing any text for a user interface, you should ensure that the language of the text can be understood by all users and consider the user’s age and their relative experience.

• Use language appropriate for the user NEEDS

• Use language appropriate for the user SKILL level

• Use appropriate AMOUNT of information

• Make appropriate use of WHITE SPACE

Multiple Choice

The complexity of the language should match the user skill level. An expert user will be able to read and understand technical language, but a novice user may not.

• Use language appropriate for the user NEEDS

• Use language appropriate for the user SKILL level

• Use appropriate AMOUNT of information

• Make appropriate use of WHITE SPACE

Multiple Choice

Too much information onscreen can be difficult to read. Alternatively too little and the user may not understand what they need to do.

• Use language appropriate for the user NEEDS

• Use language appropriate for the user SKILL level

• Use appropriate AMOUNT of information

• Make appropriate use of WHITE SPACE

Multiple Choice

It is important to balance the amount of information with the amount of white space so that the screen does not look cluttered

• Use language appropriate for the user NEEDS

• Use language appropriate for the user SKILL level

• Use appropriate AMOUNT of information

• Make appropriate use of WHITE SPACE