UX — Surface (Part 7)
Here, content, and functionality come together to produce a finished design that fulfills all the goals of the other four planes.
This is a long series of tutorials. We are going cover:
In Surface, We are dealing with the visual presentation, how the elements on the screen should be presented visually. All the content, and functionality come together to produce the finished design. Everything we create at Surface is meant to communicate & improve understanding of all the things on the screen, and it’s done by choosing the right fonts, colors, …etc.
You can think of the Surface as visual language, and this visual language created by graphical techniques: layout, typography, color, imagery, sequencing, & visual identity. They all work together to create users understanding of what’s in front of them.
Surface has one component called Visual Design, or Sensory Design.
The appropriateness and effectiveness of visual design will determine whether we succeeded or failed. If the visual design doesn’t do it’s job, people won’t stick around.
Visual Design
It’s concerned with the visual appearance of content, controls, which gives a clue of what user can do, and how to interact with them. It makes things easier to understand, increase cognitive ability to absorb what users see on the screen.
Effective visual design servers three important purposes
- Organize: provide the user with a clear and consistent visual structure, which clearly indicates relationships between elements on the screen, improves navigation, and the order of importance of elements that matches user expectations.
- Economize: only necessary, & relevant(to what user needs to accomplish) elements should be included, and and anything that’s not critical(but still needed) should be de-emphasized.
- Communicate: communicates what user expects, what information or value that users want to get, and considers user capabilities, so design improve understanding of how system works, and how to move around, make things clear, & intuitive.
Visual design should ….
- Visual design should never be on personal preference, it’s rather should be appropriate for audience.
- Visual design should never just to make things look pretty without communicating, clarifing, or help to understand, in other words, Visual design isn’t Decoration.
- Visual design should communicate what’s on the screen, and make it clear and easy to understand.
Are you creating good visual design
Good Visual design give a positive answer to these questions, Is what we see on the screen ….
- aligned with & support our objectives.
- clarifies and help users to understand what’s available for them.
- helps you to understand how elements are related.
- gives a clue of what actions user can take.
- gives a clear clue of information & action priority.
Visual Design Principles
Alignment
The way we read is from top to bottom, left to right. It’s never a good idea to center the text, because there is an extra effort needed to figure out the beginning of each line. Centered text will make users frustrated and want to stop reading.
When we design, we try to look for relationship between elements on screen, and align them, and even with two different things(i.e. image with text), and even with two elements one in extreme left side with right side of the screen.
Alignment reduces efforts needed to grasp(or quickly grasp) what’s on the screen.
Proximity
Elements that are visually close to each other, are perceived as a single group related to each other, unlike the element that has a negative space, because it isn’t close to any other element on the screen.
Negative space is a critical element of design that intended to create proximity. It gives a scene of whether elements are close together or not.
Repetition
Repetition means using the same style for the same element in different parts in the design. One way to do that is by using UI kit(visual design pattern). This pattern can be used as we add new features.
Contrast
Contrast is the state of being strikingly different from something else.
Readable text
Text is easily readable when difference between the background and text color is strikingly(high contrast), so, there is no eye strain. Text is not easily to read when there is a lack of contrast between text and background color(low contrast), because our eyes don’t know which color to focus on because the colors are close.
Just because the colors of the background and text are different, doesn’t mean there is a high contrast, because two colors might be too bright(i.e. yellow, and pink), and the eye will work very hard to focus on one or the other.
Get attention to a specific elements
Areas that has the most contrast catch user’s attention first. So, be aware of which areas of the screen that have high contrast, because these areas will get attention and focus of the users.
Our Eye Movement
The movement of the user’s eyes around the page doesn’t happen by accident. When we scan any visual design, usually there are consistent patterns in how people move their eyes, and these are unconscious, and it’s built into our physiologic response.
Successful visual design lead the eye through the screen in a smooth flow, in addition, giving the user a guided tour of what’s available.
Consistency
Consistency in visual design means the style and design approach should remain unchanged across all screens of the site. It also means the layout is consistent with what users already know, so, we are leveraging what they already know.
External inconsistency
A product(i.e. tablet) within a family of products(i.e. Apple) reflect different design approaches, meaning there is variation in the way things appear and behave on the screen. This frustrates & confuse the users because there is a variation from what they already know.
Internal inconsistency
When different parts or screens reflect different design approaches. Even if there are screens with different target audience, as long as they are part of overall message we deliver to the users, they must have a certain degree of consistency.
How to evaluate consistency
Consistency applies to all screens, as well as different products(i.e. tablet) within a family of products(i.e. Apple). Here are some questions to evaluate consistency:
- Are buttons and controls placed consistently, such as action buttons(i.e. delete) are always placed in the same place across all screens, and in a place that matches user expectations.
- Is language used in labels is consistent, are full words used instead of acronyms, are labels same across all the application(different labels mean different information).
- Are fonts, images, graphic elements, & colors applied consistently across all screens, such as using same fonts for headlines and subheads, and are buttons and controls displayed consistently.
- Do buttons and controls respond to user actions consistently, if user pressed on a button, then user redirect to another page, the next time the user will press on this button, user should be redirect to same page.
Color and Typography
Color
Color is a critical visual element of most user interfaces, that’s because color creates emotional responses, those emotional responses will either drive users to do what’s intended or not.
Color is one of the most effective ways to communicate a brand identity. Some brands are so closely associated with colors which makes it difficult to think of the company without the color automatically coming to mind. This will create a stronger sense of company identity in the public’s mind.
To prevent confusion in meaning, color has to be consistent, meaning, if you use a color(i.e. red) that means something(i.e. critical actions like delete), then you need to use the same color to refer to the same thing(i.e. delete action).
To prevent confusion and get the desired emotional response, color has to be appropriate, and these questions help to evaluate appropriateness of the used color:
- Do colors make it easier to understand, & support content and hierarchy(i.e. order of importance).
- Is the colors used consistently across all screens.
- Does color help to move through information, and understand what users see, or we are using color just for decoration, or both.
Using the right colors will ….
- get the eye’s attention to the most important areas on screen, and influence emotional response. This emotional response drives users to do what’s intended.
- maximize readability, and minimize optical fatigue. The wrong colors make things hard to read, and strain our eyes.
Typography
If we are going to use different font styles, they should be visually distinct, and this should be only used to notice a distinction between the type of information presented, like when using a specific font style for headers and another one for the body.
Using clear contrast in fonts will draw user’s attention, like using bold in font weight for header, and regular for the body.
So, to create consistent, and appropriate typography, First identify different types of content, Second use a specific styles(i.e. font, weight, color) for each type, and Finally apply those styles consistently across all screens.
