Week 5

Question 1

What are mental models, and what is their role in UI design?

Answer 1

A mental model is an idea of how something works. They are constructed to help remember how things work, and simulate what happens to the internal state of the device.

Question 2

How are mental models related to metaphors and conceptual blends?

Answer 2

Mental models can be constructed through explicit metaphors, such as save, trash can or server, but more often through conceptual blends.

Question 3

What are the five visual design principles (from NN/g)

Answer 3

Scale, Visual Hierarchy, Balance, Contrast, Gestalt principles.

Question 4

What are the challenges involved in adapting a user-interface to different types of devices with different display sizes and input modalities?

Answer 4

Not only do they not have the same size, but going from computer screen to mobile device such as phone or tablet is a shift from a more width than height format to a more height than width format, which requires different designs, since it cannot just be resized.

Question 5

What is responsive web design and the techniques that compromise it?

Answer 5

Responsive web design is creating sites that work on differently sized devices by detecting the size and responding with a fitting format. The techniques used in combination are media queries, fluid grids and fluid images.

Question 6

How are media queries done?

Answer 6

@ media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}

Question 7

How are fluid images done?

Answer 7

The basic version is to set the max-width to 100%. The more advances version is creating multiple versions of the image in different formats, and using the fitting one based on the size.