L9 - Design elements, design styles and design patterns

Question 1

Give examples of the following interface elements:

1. Interaction
2. Navigation
3. Information
4. Containers

Answer 1

Interaction

• Buttons, checkboxes, text boxes, lists, menus

Navigation

• Search bars, links, breadcrumbs tags, panels, Icons

Information

• Tips, notifications, alerts, progress bars

Containers

• Holds content together

Question 2

What is the difference between a GUI and a CLI?

Answer 2

GUI = Graphical User Interface

• Visual representation of Command Line Interfaces (images on a screen)
  CLI = Command Line Interface
• Involves accessing through written commands.

Question 3

What is the difference between digital design and graphic design?
And what’s the ‘combination’ of both?

Answer 3

Digital design:
- Building ‘digital experiences’
- User-centered
- Focus on interactivity

Graphic design
- Creating offline assets
- Focus on specific graphics (logos, infographs, brochures)
- Static visual assets

Combination:
- Using industy standard tools like ‘Sketch’
- Typography, color theory
- Work in digital space when doing graphic design

Question 4

What is representation through affordance?

Answer 4

The form shows how a design offers actions, by being physically intuitive or culturally acquired
- Knob (rotate)
- Button (push)
- Switch (flip)
- Crosswalk light (feedback)

Question 5

What is representation through real life metaphors?
And what are Metaphoric actions and metaphoric descriptions?

Answer 5

Representation through metaphors
- “Drag and drop”
- Full crash can -> Empty trash can
- Which is a representation of what is happening inside a computer
- Ibooks (books lined up on a virtual bookshelf)

Methaphoric actions:
- Drag and drop, click, push (things that mimick real life mechanic interactions)

Metaphoric descriptions:
- Posting things, opening emails, emptying the trash can…

Question 6

What is Skeumorphic design?

Answer 6

Design that mimics real life objects (such as a calculator)

Question 7

What is Material design?

Answer 7

Design that is embedded into objects, typically without an interact-able interface (no screen)
- Video camera, GPS, infrared sensors, rear car camera, microphone

Question 8

What is material interaction?

Answer 8

• You are trying to find a way, and you need a map
• You using a map in a video game
• Card blip
• Sensors is becoming more used, but not quite there.

Question 9

Name the 4 paradigms of types of interaction

Answer 9

Instructing
- Command line based
- Giving a command, and getting something back
Conversing
- Dialogue based
- It is a form of command/instruction
- Another way of command input, with the help of AI.
Manipulating
- Static interaction with environment
- Photoshop, making pictures, changing, drawings, modifying
Exploring
- Dynamic interaction with environment, example: (“browsing”-based”)
- Netflix, Amazon, etc
Responding
- Notification based
- WE don’t start the interaction, the computer tells us.
- Notifications
- Flips the interaction around
- Most modern types of interaction types.