Tying it all together
In this week’s lecture we covered ui design on phones including the importance of the buttons sizes and how colour affects the functionality of the design.
Principles of UI
- Format Content- its important when formating designs for mobile that everything fits within the margins of the phone screen dimensions so the content can be viewed and understood easily without awkward scrolling or zooming out to see everything
- Touch Controls– the controls used in the design should make adequate use of touch. The touch controls should be intuitive and make use of human range of motion. “it’s designers responsibility to create an experience of digital products which feels like using any other physical product in the real world,”
- Hit Targets- the buttons should be able to be easily pressed by a finger or thumb. They should be appropriately sized and spaced to avoid accidentally pressing the wrong button.
- Text Sizes- the sizing of text should be proportional to how important the information is but also all text should be at a readable size.
- Contrast- there should be contrast in font weighting between in headings and body text. Colour can also be used to emphasise contrast but should be used sparingly and appropriately, e.g. all text the same bright colour or colour unreadably bright.
- Spacing- the line spacing between text is important to improve the overall visibility of the text- helping the content be as easy to understand as possible.
- Distortion- images and content should not be distorted or have a squashed appearance which could affect the understanding of the content/images. Images should be properly scaled to fit in the webpage or app.
- Organisation- to assist the use of an app the content should organised in such a way that when the user first glances at it they know what the app or webpage wants them to do and can process the information as quickly as possible.
- Alignment- the way the content is aligned on a page is important for the ease of use. Images should be placed appropriately along with the text and used in only one alignment. Buttons should be placed in similar areas across screens/pages to simplify navigation for the user.
Touch Gesture Sizing
The average size of a finger is 57 px wide and the average thumb size is 72px. It is important to keep these measurement in mind when designing buttons for an app or web page as making buttons too small would make using the product more difficult than it has to be. The useability of an app or webpage is so important as people are less likely to use a product if their experience with it is difficult. However you can’t always use only these sizes for buttons as it leaves less room for all the important design elements, the use of the buttons and the difficulty level of pressing them should just always be kept in mind in design.
The anatomy of the user should also be taken into account when styling the layout and spacing of the content. Buttons spaced too close together could lead to clicking the wrong button and creating a frustrating experience. Also buttons- especially ones that are similar in context such as navigation buttons- spaced too far apart can lead to confusion in design as humans group together buttons that are beside each other. The layout and where you decide to place important buttons should be concentrated on the bottom half of the phone as majority of phone users hold their phone in one hand and as phone screen sized have increased there is now more difficulty reaching top areas of the phone screen,.
Monochromatic colour schemes are one colour in many shades. These can be used to create a sense of consistency in more minimal design.
Analogous schemes involve few colours close to each other. This creates warm or cool colour schemes which produces a sense of temperature in design and colour harmony.
Complementary are schemes were the colours used are opposites on the colour wheel. These can create good contrast on designs as it draws in the eye.
Triad colour schemes are formed from creating a triangle in the colour wheel. These can create a vibrant design if used in a balanced way.
Custom colour schemes were also mentioned in the lecture which is great for ensuring the colours used are appropriate for the app/ website being designed but the above colour schemes should be used to draw inspiration from to make sure it works.
Colour Contrast- is an important feature of the colour scheme as without strong contrast between all the colours used, it will be harder for the user to differentiate between the content especially with text colour.
The optimum colour contrast between background and text colour is 21:1, there is a website called https://contrast-ratio.com/ in which you can input your intended background and text colour to see what its contrast ratio is. This can help while in the design stage to check how readable your colour scheme is as functionality when it comes to app/webpage design is so important. These ratios do change between small (4.5:1) and large (3:1) text.
The website webAIM also has a colour contrast checker but it slightly more in depth. It tells you if your colour combination passes or fails depending on text size and gives an explanation. Adobe also has resources on their websites to help designers with colour contrast.
Contrast in User attention- if you want certain elements to stand out in your design, make them appear different to its surroundings in some way. It helps the user focus on what part of the content is the most important and this helps users process information as quickly as possible and aids their user experience.