Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Interaction Design > All in One > Flashcards

All in One Flashcards

1
Q

What is Interction Design?

A

Interaction Design

  • is the craft/art/science of good user experience
  • designing the interactions between a user and a system
  • not only graphic design, but the sequence of action and flows of informtation
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is FUN.TAST.TISCH?

A

FUN.TAST.TISCH is a tabletop-based training for neuro-rehabilitation

  • Several modules provide different exercises, training different skills (e.g. memory, attention, motor skills)
  • Main target group: people with acquired brain injuries.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the ERAS of Computing?

A
  • Mainframe Era (one computer per many users)
  • PC Era (one computer per users)
  • Mobility Era (several computer per user)
  • Ubiquity Era (thousands of computers per user)
    + Machines that fit the human enviroment, instead of forcing humans to enter theirs
    + Tabs, pads, boards
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is UCD

A

User-centered design, is an iterative design process in which designers focus on the useres and their need in each phase for the design process. In UCD, design teams involve users throughout the design process via a variety of research and design techniques, to create highly usable and accessible products for them.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the Circle of UCD?

A
  • Study (Requirements Analysis:Scenarios, Personas,…)
  • Design (SKetching: Scribble, Storyboards, Hybrid Sketches)
  • GUI Design (GUI Sketches, Wireframes)
  • Build (Building & Prototyping: Mockups, Prototypes… Developement)
  • Evaluate (Usability Evaluation: Heuristic Evaluation, Usability Tests)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are some characterristics of SKETCHING?

A

SKETCHING
• supports early ideation, inspires new design ideas
• very quick and easy to capture ideas
• helps to quickly develop many different ideas
• helps to quickly develop many different ideas
• helps to think through ideas
• forces you to visualize how things come together
• helps to communicate ideas to others
• sketching is not about drawing, but about simulating and questioning ideas using
sketches
• sketching is a “conversation” between mind and sketch

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is Scribble sketching?

A 
• draw very quickly
• very low fidelity (Genauigkeit, Wiedergabetreue)
• focus and emphasis on idea essence
• capture critical ideas on the fly
• sacrifice all other details
• Use scribbles to explore many different ideas!
Sketches are not meant to be beautiful
drawings!
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are Attributes of Sketches?

A 
• quick
• inexpensive
• disposable (wegwerfbar, entbehrlich)
• plentiful (reichlich, massenhaft)
• sketches can tell stories
o about use and context over time
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Whats is Elaboration? What is Reduction? (in context)

A 
Elaboration = oppurtinity seeking
Reduction = decision-making
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Why many design ideas?

A

local vs. global maxima; iterative design

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What do good Storyboards do?

A

Good storyboards…
• …use “camera shots” like in films
• …emphasize actions and motions to make your storyboard more understandable
• … indicate direction, show movement, indicate a sequence of events (interaction
flow)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are Storyboard Tips?

A

storyboard tips
• question mark reveals emotions (interest)
• highlighted areas (in different colors) emphasize certain elements
• highlights emphasizes action of information received
“I cannot draw!?” → Photo tracing (creating sketches by following the outlines of a
object on a photo → creating a template for your own) → create a template library to
ensure a quick and easy workflow, also for preparation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are Hybrid Sketches?

A

Photo traces can be used in Hybrid Sketches
In broad terms, a hybrid drawing is any drawing that mixes and superimposes a variety
of ideas, techniques or media into a new, meaningful image – something that architects
& designers have long gravitated towards. → Mixing Sketches/Drawings with reality
pictures/photos to convey your ideas

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are GUI Sketches?

A

• leave out details
• use annotations (helps for understanding the sketch)
• use call-outs (outline/zoom out important features)
o call-outs help to show details

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are some overall Sketching Tips?

A
  1. Don’t use pencils but pens and markers instead
  2. Sketch with fast and long strokes (needs some practice)
  3. Smooth action
    Go further than you need to
    Start light, then build up thickness
  4. Use upper case block letters for annotations
  5. Start with just two lines to avoid too small boxes
  6. Be careful with graph paper, grid can be very distracting
  7. Sketches are not meant to be beautiful
    as soon as you start to get into detail you are drawing (not sketching) à danger,
    that people focus on the wrong thing
    The better it looks, the narrower the feedback
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

BEAUTIFUL SKETCHES?

A

Sketches are not meant to be beautiful drawings! As soon as you start to get into detail
you are drawing (not sketching) and in danger of you, and the people you share your
sketches with, focusing on the wrong thing. The better it looks, the more narrow the
feedback.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What can help us to make better design decisions?

A

• psychology & cognitive science: getting a better understanding of how users
perceive UIs, think about UIs, and interact with UIs
• design principles: following “golden rules” and fundamental principles of good
interaction design from HCI research
• design guidelines: following the design rules that companies like Google,
Microsoft, Apple, etc. publish for their OS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are Design Guidelines?

A

DESIGN GUIDELINES
• companies try to help designers by publishing collections of design
recommendations: human interface guidelines
• help designers on designing forms, grids, navigations bars, etc.
• apps often follow the design guidelines of their operating system (iOS, Android,
etc.)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Design Guideline Sliders?

A

• use sliders for adjusting numbers or number ranges
• don’t use them for entering IDs (e.g. post codes) – instead use input fields
• don’t use them to choose from very few different values – use radio buttons or
input fields
• always check if input field for keyboard input could be alternative
• you can combine input field with slider for supporting mouse and keyboard

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Design Guideline Radio Buttons?

A

• use radio buttons if users can only choose one item from few
• radio buttons automatically prevent users from selecting multiple items (i.e.
items are “mutually exclusive”)
• Good visibility! All items are immediately visible.
• disadvantage: they do not work well for many options (e.g. list of all countries of
the world in an online shop); if too many options, use drop down menu

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Design Guideline Drop Down Menu?

A

• drop down menu enables users to select one item from a list without using too
much space
• not always helpful, if you have only a few items
• if you have only a few items, consider using radio button (better visibility!)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Design Guideline Checkboxes?

A

• checkboxes enable users to select multiple items
• do not use them if users can select only one item, use radio buttons instead
• be careful not to mix up the shapes of checkboxes and radio buttons
o round: “checkbox” (radio button) – used for single selection
o squared: “checkbox” – represents multi-selection

23
Q

Design Guideline Layout?

A

• alignment
o align controls horizontally and vertically
• grids
o define layout grids for your projects, use them to achieve a clear and
consistent layout in all pages or dialogs
• labels
o labels shouldn’t be too far away from fields
• grouping
o use boxes and whitespace to group elements
o visually group related elements with boxes or whitespace
o visually group related elements with separators
• flow
o arrange groups according to use users’ workflow

24
Q

What does it mean that “less is more” in the design guideline context?

A

• avoid using too many typefaces and styles – rule of thumb: try to not use more
than 2 fonts, 3 font sizes and 3 font styles
• avoid using too many colors, animations, or blinking
• exception “antidesign”

25
Q

What are Prototypes?

A

Prototypes are early samples or models of a product to test a design idea.
Some general comments about prototypes:
• prototypes don’t look like final product
• prototypes don’t contain all parts of the final product
• prototypes simulate only selected aspects of product
The economic principle of prototyping:
The best prototype is one that, in the simplest and most efficient way, makes the
possibilities and limitations of a design idea visible and measurable.
Prototypes save lots of money and time. Use appropriate tools – don’t waste time by
coding too early!
You can adjust or change the prototype easily by a few mouse clicks. No need to change
thousand lines of code.

26
Q

Low fidelity vs high fidelity prototypes?

A

• Lo-Fi prototypes are created rapidly and cheaply
• Lo-Fi prototypes are not faithful representations of the details, look, feel, and
behavior
• Lo-Fi prototypes can be surprisingly effective. (Using realistic prototypes too early
can hide problems.)
• Lo-Fi prototypes are often made from physical materials: paper, cardboard, foam
board, styrofoam
• Hi-Fi prototypes are more detailed and faithful representations of design and
interactive behavior
• are created with digital prototyping tools or by building/programming parts of
the UI
• Hi-Fi prototypes are highly interactive (for selected aspects)

27
Q

Horizontal vs. vertical prototypes?

A

Horizontal Prototypes: broad in features, but shallow in functionality
• Vertical Prototypes: narrow in features, but deep in functionality
• T-Prototypes: broad in features and, for selected features, deep in functionality
• Local Prototypes: shows very specific single design issue for testing purposes (e.g.
appearance of an icon, wording of a message, design of a dialog, …)

28
Q

Tell me about Paper & Cardboard Prototypes!

A

• Can simulate screen content and button sizes for mobile apps
• Can simulate ergonomics (e.g. weight, size, button size)
• Exchangeable paper overlays allow to test ergonomics or even detailed UI
designs
• Can simulate physical experience of a device
• Can simulate interactions with entirely novel devices

29
Q

Tell me about Empathy Tools: IDEO!

A

• uses tools like cloud glasses and weighted gloves to experience processes as
though you yourself have the abilities of different users
• this is an easy way to prompt an empathic understanding for users with
disabilities or special conditions
• IDEO designers wore gloves to help them evaluate the suitability of cords and
buttons for a homehealth monitor designed for people with reduced dexterity
and tactile sensation

30
Q

Tell me about WIZARD-OF-OZ PROTOTYPES!

A

You use a Wizard-of-Oz prototype to fake functionality that you want to test with users,
thus saving you the time and resources of actually creating the functionality before you
refine it through testing. Just like the small man behind the curtain faked the power of
the wizard of oz, your design team can fake features that you want to test.
Wizard-of-Oz prototypes are prototypes in which the users think they are interacting
with a computer but actually a human is creating the system responses.
→ also used for VUIs (voice user interfaces)

31
Q

Tell me about WIREFRAMES!

A

• wireframes are made after sketching and typically are digital
• sketches only show basic concepts, but wireframes have higher level of detail:
sizing, placement, order of elements
• wireframes are more detailed screen layouts and (sometimes) on-screen content
with graphics

32
Q

Tell me about CLICK-THROUGH PROTOTYPES (HOTSPOT PROTOTYPES)

A

• designers connect single UI wireframes (screens or pages) with hotspots &
hyperlinks to simulate interactive UIs
• simulates page flow/screens/workflow of finished product (but only follows one
script!)
• doesn’t work with real data, but with static wireframes
• can be used to test layouts, labels, controls with users

33
Q

Tell me about DYNAMIC PROTOTYPES!

A
  • dynamic prototypes are high-fidelity prototypes
  • need more time and effort than click-through prototypes
  • get as close to real product as possible (but without real coding)
  • can serve as exact specification of what must be developed by programmers
  • some even connect to real databases and data sources
34
Q

What is the thought behind Design Principles?

A

Making design decisions is not easy! Design principles help.
Design principles: the dos and don’ts of interaction design.
They remind us of asking the right questions and they orient us towards thinking about
important aspects of our designs.
They give us a language and terminology to talk about important aspects of designs.
Well-known design principles (e.g. Don Norman’s design principles) are constantly used
by designers to analyze, critique, and discuss designs.

35
Q

What are DON NORMANS Desing principles?

A 
Don Norman used 7 stages of interaction to propose
6 design principles in his famous book.
1. Visibility
2. Feedback
3. Constraints
4. Mapping
5. Consistency
6. Affordance
36
Q

What are the 7 stages of Action?

A 
7 STAGES OF ACTION
• Perceiving the state of the world
• Interpreting the perception
• Evaluation of interpretations
• Goals
• Intention to act
• Sequence of actions
• Execution of the action sequence
37
Q

Explain Principle 1: Visibility

A

• “Can I see all relevant things?”
• Everything relevant should be clearly visible. The most important/frequently used
functions should be easy to find/access. But it can be a good design choice to
hide some functionality.
• As systems have become more complex it has become necessary to hide more
functionality. Don’t overwhelm users!
• Some designs hide essential function among less important functions, so that
users get confused.
• Some designs completely hide important elements
• When explanations are necessary, visibility can’t be very good
Today, most people are used to scrolling web pages. Its okay to place things
below the fold, but encourage users to scroll

38
Q

Explain Principle 2: Feedback

A
  • “Does it always tell me what it is doing?”
  • Always provide feedback to let users know the effect of their actions
  • Must be informative
  • May be graphical, textual, audible, haptic, etc.
  • Must be timely (milliseconds matter!)
  • Some touch screens vibrate to give haptic feedback
  • Some devices are getting slow over years – no timely visual feedback anymore
39
Q

Explain Principle 3: Constraints

A

• “Does it prevent me from doing wrong things?”
• Constraints limit the possible actions that can be performed on a system
• Constraints prevent users from doing incorrect actions
• Constraints can prevent users from selecting mutually exclusive options (Radio
Buttons)
• Physical constraints can avoid potentially harmful actions

40
Q

Explain Principle 4: Mapping

A

“Do I know what happens when I do this?”
• Good mapping means that controls are clearly arranged and that it is clear what
happens when using them.
• Try to design interfaces where the mapping between controls and their effects is
clear.
• labels are not very elegant, if they are necessary, consider a different design
• try to design interfaces where the mapping between controls and their effects is
clear

41
Q

Explain Principle 5: Consistency

A

• “Have I seen this before?”
• A consistent interface will follow rules, such as using similar elements for
achieving similar tasks
• This makes it easier for users to learn and use a system
• Consistent order of menu items across all applications
• Consistent layout of websites makes them easier to navigate – even if you have
never visited this site before
• Consistent sets of icons make it easier for users to recognize functions

42
Q

Explain Principle 6: Affordance

A

• “Does it tell me how to use it?”
• Good affordance means that we immediately understand how to use or hold
something, just by looking at it.
• Affordance are the perceived and actual properties of an object that give clues to
how it can be used

43
Q

What are the Gestalt Laws?

A

Explain how human beings form perceptions with the help of past experiences and
therefore what we perceive can be different from reality.
The brain actively looks for patters, connections and repetitions
• Proximity
o humans recognize relatedness through the proximity of objects
o whitespace can be regarded an information too
• Similarity
o the brain groups similar objects by color, texture, size, brightness,
direction of movements, speed, consistency, connections over distance
o design things that are different in a different way
• Common fate
o special form of similarity
o objects moving in the same direction are considered similar
• Closure
o brain perceives closed objects better than open ones
o complete closure is not necessary, but instead it is often inferred by the
brain
o lines can be used to structure, separate
o attention: cognitive load
• Continuity
o similar objects are intuitively regarded as a group
o aligned as curves, lines
• Simplicity/Prägnanz
o keep it simple and stupid
o simple and closed shapes stand out against complex shapes
• Symmetry
o objects in symmetry are automatically perceived as being grouped
o non-symmetric objects fade into the background
• Past experience
o incomplete things are automatically completed
o based on past experience
o context has an influence on the perception

Conclusion
The human brain actively looks for patterns, connections and repetitions. Design UIs
that account for the mechanisms of human perception!

44
Q

HCI AS CONVERSATION?

A

in the beginning, using computers meant “programming” – no real difference between
user interface (terminal) and programming languages
computers were accessible via text terminal inside very large companies or research
institutions; at first, there were no screens, output was printed on paper
→ “conversation metaphor”
virtual personal assistants (siri, alexa, etc.) or chatbots are conversation-based UIs with
natural language
in some ways they come close to a human assistant, but in some ways they are still as
limited as old “command line interfaces” (users have to know keywords and function
names)

45
Q

HCI AS DIRECT MANIPULATION?

A
  1. continuous representation of the object of interest
  2. physical action or labelled button presses instead of complex syntax
  3. rapid incremental reversible operations whose impact on the object of interest is
    immediately visible
    → “model-world metaphor”
46
Q

What is Ubiquitous Computing?

A

ubiquitous = allgegenwärtig
computers not as “beige boxes” on desks, but embedded in natural physical and social
environment

There is a tangible computing: a tangible user interface is a tangible (anfassbar) interface, that allows users to interact
with physical objects (TUI)

and social computing: multiple touches by different users are processed concurrently
• users collaborate to solve a task with multiple tangibles

47
Q

What is POST-WIMP Interaction?

A

• WIMP = Windows Icons Menus Pointer
• Post-WIMP Interaction is a term for user interfaces that don’t rely on WIMP
anymore.
• “Post-WIMP” ranges from pen input on tablets to augmented reality glasses.
• “Post-WIMP” typically means using one or several devices other than desktop
PCs.

48
Q

Why post-wimp interaction?

A

Post-WIMP interaction doesn’t reduce the user to a hand, finger, eyes, and ears anymore

The body matters! à tangible computing
Make use of our full motor & body skills, movements, and spatial awareness (multitouch input, pen input, body & gesture input, …)
The social environment matters! à social computing
Make use of our social skills, design for social interaction and collaboration
example: interactive tabletop computers can be used for tangible AND social post-WIMP
interaction

49
Q

What do we mean with realitiy-based interactions and what are the 4 themes of reality (Jakob et al)?

A

… is a theoretical model that is based on analyzing many different post-WIMP UIs and to
analyze what is “good” or “bad” about them.

Naaive Physics (NP)
Body Awareness & Skills (BAS)
Evironment Awarness & Skills (EAS)
… is a theoretical model that is based on analyzing many different post-WIMP UIs and to
analyze what is “good” or “bad” about them.

50
Q

What is NP?

A

People’s common-sense knowledge about the physical world. Human perception of
basic physical principles like gravity, velocity, friction, or persistence of objects.
NP is used in many UIs à feel more “physical” + easier to use
example from iOS: fast flick will keep contacts scrolling after finger has been removed
(as if list has “mass”); further flicks speed up list

51
Q

What is BAS?

A

Familiarity and understanding that people have of their own bodies skills to coordinate
movements of their limbs, head, eyes, etc. in order to do things like crawl, walk, etc.
Gestural and whole-body input is just one way of using BAS (Wii, Kinect, etc.).
how a user holds a device can be used as input (e.g. when a user rotates phone, view
rotates; when a user puts a phone close to their face, screen shuts off to prevent
accidental button presses).

52
Q

What is EAS?

A

People have a physical presence in their spatial environment and develop many skills for
navigating within and altering their environment.
Let computers react to the environment and spatial (räumlich) relations between users
and devices.
e.g. Oculus Rift VR glasses enable to navigate a virtual space in 3D just by moving your
head.

53
Q

What is SAS?

A

people are generally aware of the presence of others and develop skills for social
interaction
e.g. face-to-face communication, collaborating, around a tabletop, etc. (no mouse)

54
Q

What are the main Conclusions to POST WIMP?

A

• Computing is becoming more post-WIMP and thus more tangible and social
• In the mobility era and ubiquity era, post-WIMP interaction will become more and
more important
• Post-WIMP interaction offers great opportunities, because it lets users apply
more skills (not just typing and clicking!)
• Four themes of reality-based interaction can help us to understand how to build
better post-WIMP UIs

Interaction Design (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions