Hand-eye coordination, user input and system complexity

Question 1

What is Fitt’s Law?

Answer 1

“The time it takes to reach a target is a function of the distance to and size of the target”

The closer and larger a target is, the faster and easier it is to click that target.
Based on the average fingertip size, a target should be at minimum 10 mm wide.

Not a linear relationship - it has a much larger effect to increase a very small button by 1 cm that increasing an already large button by 1 cm.

Question 2

How can Fitt’s Law be used in design?

Answer 2

1. Make sure targets are big enough.
2. Place targets in areas of an interface so that they are easy to select (e.g. reachability on iPhone)
3. Make sure related/relevant buttons are in close proximity (e.g. submit or next buttons)
4. Make sure targets have enough space between them.
5. For a button with a text label, make sure the whole box is clickable and not just the text inside the button.
6. When presenting more options in a menu list, place the most frequently used functions first in the list instead of in alphabetic order or choose a pie menu.
7. If you have the three dot button for more functions, make sure the list of functions appear close to the button and not in the opposite end of the screen.

Example: Infinitely large web interfaces

Question 3

What is Postel’s Law?

Answer 3

“Be conservative in what you do, be liberal in what you accept from others”.

Also referred to as ‘the robustness principle’.

Based on the fact that humans are inconsistent in behaviour, skills, languages and abilities, and they have different devices (e.g. different operating systems, screen sizes etc.)

Bridging the communication gap between human users and computers. We should anticipate anything in terms of input, access and capability of users (e.g. different types of input, missing data, different devices) while providing an interface that is reliable, consistent and accessible for a wide range of users.

Examples: Progressive enhancement, graceful degradation, responsive web design.

Question 4

How can you use Postel’s Law in design?

Answer 4

Example: Google search engine

1. Flexibility with respect to user input, it should be robust enough to accept varying types of human input (e.g. spaces after names, different lengths of text depending on language, addresses or name order, face recognition and password).
2. Guide the user (e.g. show examples of phone number or CPR-number formats)
3. Inferring input from other input (e.g. using the phone number to infer the nationality, Google making inferences about your input)
4. Be careful to ask for too much information from the user to prevent decision fatigue.
5. Be careful in how you communicate errors on form inputs (e.g. name not accepted)

Question 5

What is Tesler’s Law and how can it be used in design?

Answer 5

“For any system there is a certain amount of complexity that cannot be reduced”

The law of conservation of complexity

Inherent complexity

In design:
- Dealing with the inherent complexity in the development/design phase.
- Utilise strong mental representations / mental models, e.g. adding products to the shopping cart
- Add functionalities that can reduce complexity, e.g. saving credit card information, checkout using mobilepay.
- Emails: Make suggestions for recipient emails based on previous mails or contacts. Suggesting quick and relevant replies based on content in email.

Question 6

What is responsive web design and which law does it relate to?

Answer 6

An approach that allows websites to adapt to different screen sizes.

Ensures a consistent and usable experience across various devices like desktops, tablets and smartphones.

An example of Postel’s Law

Question 7

What is progressive enhancement and which law does it relate to?

Answer 7

Starts by establishing a basic level interface that all browsers will be able to use. Then gradually adds layers of functionality that will be available automatically in browsers than can use it while preserving the core content. Enables universal access for everyone with any level of device capability.

E.g. adding a voice recognition function (microphone icon) to the search box that adds another level of functionality without taking away the core functionality of the search box.

An example of Postel’s law.

Question 8

What is graceful degradation and which law does it refer to?

Answer 8

Starts by establishing a user interface for modern browsers. Then degrades gracefully to lower levels for users that have older browsers, at least so the interface do not break.

Pro: Easier to build. Con: Normally ends up taking more maintenance.

An example of Postel’s law.

Question 9

What are infinitely large web interfaces?

Answer 9

It means that you can throw a cursor to the sides and the cursor will stop at the edges. This means that you don’t have to be hit an exact spot with an exact speed because the cursor will automatically stop. Leads to a faster and easier interaction.

That is why on a desktop the folders automatically are created in the corners and MAC has the apps in the bottom of the desktop.

Question 10

What are three types of menus?

Answer 10

Linear menu
Rectangular menu
Pie menu

Question 11

What are the challenges with Fitt’s Law?

Answer 11

• You risk having an imbalanced interface where buttons take up too much space.
• The effect of increasing button sizes diminishes as buttons become larger.
• There is a risk that it will be in conflict with other design principles.
• Sometimes buttons that are too small or too far away can prevent mistakes.