The Visual Principle of Scale in User Interface Design

When looking at a visual, you can usually immediately say whether it looks great or feels just a bit off. Few of us can actually verbalize why that is. Visual design principles inform us how design elements like line, shape, color, grid, etc. go together to create well-rounded and thoughtful visuals.

Designs that take advantage of these principles can drive engagement and increase visibility. So let’s talk about a commonly used principle scale. The principle of scale refers to using relative size, and when I say relative, I mean how the size of one item relates to the size of another item to signal importance and rank and a composition. Even more simply put, more important elements in design are bigger than ones that are less important. When something is big, it’s just more likely to be noticed by your user. A good rule of thumb that I follow when using this principle is to have three different sizes. So that’s something that small, something that’s medium sized and something that’s large in your design. Having this range of different size elements will not only create variety within your layout, which makes it interesting to look at, but also helps establish visual hierarchy. So let’s talk about a real life example to help solidify this concept on iPhone.

The platform medium makes popular articles visually larger than other articles. The scale of these popular articles literally take up almost half the screen, making these articles larger. So we’re talking the scale of them directs users to potentially more interesting or current reads. When you tap into an article to read it, you can see how scale is used again. So there are the three different sites we talked about. There’s the title that is large. The subtitle is Medium Size and the body text is small size. Windscale is used properly and the right elements are emphasized, users will easily pass the visuals and know how to use it. Utilizing the visual principle of scale will help create well-rounded and thoughtful visuals.

Why Interaction Cost Matters to UX

The interaction cost is the sum of all types of effort, mental and physical, that people put in interacting with the system in order to reach their goals in our action. Cost is a direct measure of usability. The more effort users have to spend the worst usability of the system. Ideally, we’d like people to go to a site or use an application and find the answer they’re looking for right there in front of their eyes without having to do anything that would mean zero interaction cost and is a holy grail of usability as a field. We’re not there yet.

Devices don’t read our minds and don’t fulfill our wishes before we express them, yet most of the time to reach their goals on the Web, users have to look around, read, possibly scroll, find a promising link, click on it, wait for the page to load and then repeat the process all over. Sometimes a new window may pop up on top of the existing one, and in that case people will have to switch attention to the new window. Other times they may need to remember information from one page and applied on a different page. All these actions require cognitive and physical effort and are the components of the interaction cost.

Many usability guidelines aimed to minimize the various actions that make up the interaction cost a quick assessment of the interaction. Cost of a design can save a lot of money in the long run because it can give you a good measure of how difficult the interface is going to be for the user.

When is It OK to Be Inconsistent in User Interface Design

Consistency is one of the most basic rules of good usability, but there are exceptions to every rule, and sometimes being inconsistent will actually improve the user’s experience. How can you know when you should be consistent and when is it OK to break consistency? A good way to describe consistency is using the same solution for the same problem. And this definition provides a clue about when you should not be consistent. If there’s already a good solution for a design problem, you should be consistent and follow the existing pattern instead of making up a new one. But when you’re facing a new problem, you need a new solution and you shouldn’t feel constrained to be consistent with preexisting patterns that don’t really apply. The trick, of course, is deciding whether a problem is actually different enough to justify considering it a new problem and being inconsistent with previous patterns that may violate user expectations. And this is where we often see problems with too much or too little consistency. Consider the problem of how to give people access to navigation menus on a small screen. A good solution to this problem is to provide a small menu button that can be shown on every screen, providing persistent access to menus without taking up a lot of space. But the problem of access to navigation menus is very different. On a large screen, you no longer have the severe space constraints. So using the same solution of a small button may be consistent with your mobile experience, but it’s not at all appropriate to the larger screen and is likely to fail, since a small button is a lot more likely to be overlooked on that large screen for any design problem. It’s good to look for a preexisting solution patterns, but you also need to check for differences in devices, user characteristics or business goals that might introduce new constraints and make it a new problem. Being consistent will help people learn to use your interfaces easily, but only when those solutions are actually appropriate to their current situation.

Leave a comment

Your email address will not be published. Required fields are marked *