13 Interactivity Principles B

What UX Law is being defined by the given statement?

The distance and size of a target element directly impact the amount of time it takes for a user to navigate to and interact with it.

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

• Keep Users’ Choices to a Minimum (Hick’s Law)

• Place Related Elements in Common Areas (Law of Common Region)

• Use Familiar Scenarios and Logic (Jakob’s Law)

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

Answer explanation

Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

This law states that the distance and size of a target element directly impact the amount of time it takes for a user to navigate to and interact with it. This means you’ll want to make your main actionable targets easy to reach.

Additionally, if you have multiple targets, there should be enough space between them.

For example, when designing for mobile, clickable icons need to be large enough to tap

What UX Law is being defined by the given statement?

The more choices available, and the more complex each of them is, the more time it’ll take for users to arrive at a decision.

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

• Keep Users’ Choices to a Minimum (Hick’s Law)

• Place Related Elements in Common Areas (Law of Common Region)

• Use Familiar Scenarios and Logic (Jakob’s Law)

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

Answer explanation

Keep Users’ Choices to a Minimum (Hick’s Law)

If you’ve ever been so overwhelmed by the number of choices before you that you had trouble deciding between them, you’ll understand how too many options can be paralyzing for users. This is Hick’s law in a nutshell.

The more choices available, and the more complex each of them is, the more time it’ll take for users to arrive at a decision.

This principle effectively means you want to remove clutter and show your users only the most essential options they need. For example, most websites will give a clear choice between “Save” or “Cancel” and “Yes” or “No” when confirming some action:

What UX Law is being defined by the given statement?

If elements on a page are grouped together closely, they are perceived as connected to one another.

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

• Keep Users’ Choices to a Minimum (Hick’s Law)

• Place Related Elements in Common Areas (Law of Common Region)

• Use Familiar Scenarios and Logic (Jakob’s Law)

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

Answer explanation

Place Related Elements in Common Areas (Law of Common Region)

The law of common region, one of several laws from the school of Gestalt psychology, simply states that if elements on a page are grouped together closely, they are perceived as connected to one another.

You can accomplish this with borders, backgrounds, or spacing. For example, navigation links are generally placed together to form a menu

This principle is all about composition and spacing, and you’ll want to use it wisely. As another example, on the homepage of a blog where previews are displayed chronologically, the title, description, and image of each post should be visually grouped together.

What UX Law is being defined by the given statement?

Your users will generally expect — and prefer — that your site works the same way as others they’re already familiar with.

• Place Related Elements in Common Areas (Law of Common Region)

• Use Familiar Scenarios and Logic (Jakob’s Law)

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

• Place Grouped Elements Close to Each Other (Law of Proximity)

• Use Similarity to Unite Elements into Groups (Law of Similarity)

Answer explanation

Use Familiar Scenarios and Logic (Jakob’s Law)

Advocates the use of familiar scenarios and logic in UI development. Your users will generally expect — and prefer — that your site works the same way as others they’re already familiar with.

We each build up mental models around conventions surrounding websites. This enables your users to focus on what they want to achieve rather than learning their way around an unfamiliar UI.

This means you’ll want to stick with what they already know and not overwhelm them with unfamiliar scenarios. A “burger” icon, for example, will usually open some kind of menu

What UX Law is being defined by the given statement?

Using simple structures and avoiding complex shapes.

• Place Related Elements in Common Areas (Law of Common Region)

• Use Familiar Scenarios and Logic (Jakob’s Law)

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

• Place Grouped Elements Close to Each Other (Law of Proximity)

• Use Similarity to Unite Elements into Groups (Law of Similarity)

Answer explanation

Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

Your users will interpret your design using the least cognitive effort possible. Complex images will be perceived in their simplest forms. Reducing cognitive overload should be an important part of your design goals.

You can apply this principle by grouping and aligning elements into relevant blocks, columns, and sections, instead of throwing them all over the page

What UX Law is being defined by the given statement?

The elements that make up a group should be closer together than those of different groups.

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

• Place Grouped Elements Close to Each Other (Law of Proximity)

• Use Similarity to Unite Elements into Groups (Law of Similarity)

• Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness)

• Divide Content into Small Chunks (Miller’s Law)

Answer explanation

Place Grouped Elements Close to Each Other (Law of Proximity)

States that elements that are near each other will be perceived as a group. This also reduces cognitive overload for your users as they will more easily make sense of information.

Applying this principle is all about making wise use of spacing. The elements that make up a group should be closer together than those of different groups.

In many website headers, menu links are grouped together while Calls-to-Action (CTAs) are aligned to a side or somehow divided from the navigational elements

What UX Law is being defined by the given statement?

Similar objects will be perceived as related regardless of how much separation exists between them.

• Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz)

• Place Grouped Elements Close to Each Other (Law of Proximity)

• Use Similarity to Unite Elements into Groups (Law of Similarity)

• Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness)

• Divide Content into Small Chunks (Miller’s Law)

Answer explanation

Use Similarity to Unite Elements into Groups (Law of Similarity)

The law of similarity, states that similar objects will be perceived as related regardless of how much separation exists between them. This is the basis behind styling feature sets with similar color schemes, icons, and text:

What UX Law is being defined by the given statement?

Elements which are connected visually will be seen as being more related than elements not at all connected.

• Use Similarity to Unite Elements into Groups (Law of Similarity)

• Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness)

• Divide Content into Small Chunks (Miller’s Law)

• Accent the First and Last Items in a Series (Serial Position Effect)

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

Answer explanation

Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness)

States that elements which are connected visually will be seen as being more related than elements not at all connected. One application of this law is using a progress stepper in your onboarding or checkout flows:

What UX Law is being defined by the given statement?

Limiting the amount of content your user has to perceive at any given time.

• Use Similarity to Unite Elements into Groups (Law of Similarity)

• Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness)

• Divide Content into Small Chunks (Miller’s Law)

• Accent the First and Last Items in a Series (Serial Position Effect)

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

Answer explanation

Divide Content into Small Chunks (Miller’s Law)

This principle suggests separating content into chunks. For example, credit card numbers are usually broken into groups of four to help people parse them.

This law underscores the importance of proper design planning. As an application gets larger and acquires more features, it becomes harder to use. You should plan your interface with this in mind so that it can accommodate new features while remaining easy to operate.

Another way to apply this rule is by limiting the amount of content your user has to perceive at any given time. Divide content into chunks instead of showing it all in one block:

Additionally, design with the most popular screen sizes in mind and control how many elements users see at a glance.

Be critical about your design. If you think there’s too much content in a section, move it to another one and separate items logically.

What UX Law is being defined by the given statement?

Users will remember the first and last items in a series best.

• Divide Content into Small Chunks (Miller’s Law)

• Accent the First and Last Items in a Series (Serial Position Effect)

• Make the Main Actionable Targets Easy to Reach (Fitts’ Law)

• Keep Users’ Choices to a Minimum (Hick’s Law)

• Place Related Elements in Common Areas (Law of Common Region)

Answer explanation

Accent the First and Last Items in a Series (Serial Position Effect)

It states that users will remember the first and last items in a series best. You can use this tendency to highlight the most important areas of your webpages.