UX/UI Midterm

What are three methods of discount user testing?

1. Wizard of Oz Designer simulates the response of the system. 2. Heuristic Evaluation Jakob Nielsen's Rule of Thumb: 5 evaluators identify 80% of usability problems. 10 most general principles for interaction design. 3. Cognitive Walkthroughs Walk through the sequence of actions required to complete a task through the eyes of the user. Cognitive walkthroughs are performed by designers and developers in a group.

What are the differences between a conceptual and mental model when interacting with an interface? Provide an example of the two models for the same interface.

A mental model is the representation that a person has in his mind about the object he is interacting with. A conceptual model is the actual model that is given to the person through the design and interface of the actual product. Conceptual model is designer's mental model. For example, when getting a book out of the library, the user forms a mental model of the things they have to do to achieve this. A conceptual model for an online library is the interface the person interacts with as a represented concept of a library.

What are affordances and who popularized this term?

Affordances are all actions that are physically possible on an object or environment. James Gibson popularized this term.

Where is card sorting used? What are the differences between open and closed card sorting?

Card sorting is a method used to construct menus and organize a website to match the user's mental model. Open card sorting assumes that users create categories. In closed card sorting, categories are predetermined.

What are Cognitive Walkthroughs?

Cognitive walkthroughs are evaluations in which designers and developers in group walk through the sequence of actions required to complete a task through the eyes of the user. At each step, they ask: Will the correct action be sufficiently evident to the user? Will the user notice that the correct action is available? Will the user associate and interpret the response from the action correctly?

What are some common measures when analyzing behavioral data?

Common measures: Time on page Return rate Time to action Click-through rate (per link or button) Conversion rate (sign-ups, purchases) Bounce rate (on-page clicks where the user eventually comes back) Financial metrics (advertising revenue, ad clicks etc.) Error metrics

What are mappings and constraints?

Constraints are the inverse of affordances. That is, constraints limit the way an object can be used. Constraints are used to avoid usage errors or minimize the information to be remembered. Mapping is about a clear relationship between controls and the effect they have on the world.

What is the definition of usability? How do we measure it?

Definition of usability: the capability of the software product to be understood, learned, used and be attractive to the user, when used under specified conditions. We measure effectiveness, efficiency, satisfaction.

What are the main reading patterns on the Web?

F-shaped reading pattern Two major horizontal movements, one large vertical. Layer-cake pattern The eyes scan headings and subheadings skipping normal text. Spotted pattern Skipping big chunks of text, looking for something specific. Marking pattern Eyes focused as the mouse scrolls or finger swipes the page. Bypassing pattern Deliberately skip the first words of the line when multiple lines of text in a list start all with the same words. Commitment pattern Fixating on almost everything on the page.

What types of colors are there?

Pure spectral or monochromatic colors Rainbow colors in the spectrum that can be produced by visible light of a single wavelength Achromatic or grayscale colors White, black, gray Metallic colors Cannot be rendered in computers without simulating light on shiny surfaces

What is recognition? Recall? Which one should we strive for?

Recognition refers to our ability to recognize an event or piece of information as being familiar, while recall designates the retrieval of related details from memory. We should strive for recognition because the extra context helps the user retrieve information from memory rather than having to recall items from scratch and hence improves usability.

What are the different Usability Heuristics? Who proposed them?

Usability Heuristics: Visibility of system status Help users recognize, diagnose, and recover from errors Error prevention Consistency and standards Match between system and the real world User control and freedom Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation Usability Heuristics were proposed by Jakob Nielsen.

What is usability testing?

Usability testing is a formal evaluation done in a lab environment. Typical users perform typical tasks in a realistic situation. Experimenter provides task goals. Observer, who is sometimes the same person as experimenter, watches.

What are the steps that users follow when navigating a website according to the information foraging theory?

User arrives at the page User looks for significant strong scents/cues No strong cues → abandon the website Strong cues → follow the path User might seek alternative path if the scent gets weaker User might abandon the site at any point during the search If the scent gets stronger, user will continue on this path User should reach desired point or cease to follow an information scent

What does WIMP stand for? Think of the different components of the WIMP model and describe one example of how it has improved human-computer interaction and one example of its shortcomings when it comes to usability.

WIMP stands for windows, icons, menus, pointer. Compared to command line interface, WIMP does not require the user to memorize various commands in order to complete basic tasks such as copying or moving files. WIMP also brings all the benefits associated with WYSIWYG file editing. On the other hand, command line interface does not use as much resources as WIMP. Advanced user can complete some tasks faster on a command line interface than on WIMP.

What is the difference between within subjects and between subjects designs?

Within-subjects design assumes that the same participants test all conditions corresponding to a variable. Between-subjects design is the one in which different participants are assigned to different conditions corresponding to a variable.

What is the importance of pilot testing?

Pilot testing has the goal to debug the usability test itself. We recruit a few people that are convenient and run through the study. In this process, we should be able to uncover confusing task descriptions, task shortcuts, overly simple or complex tasks etc.

What are the differences between typefaces and fonts?

Typeface is a particular design of type, while a font is a type in a particular size and weight. That is, a typeface is a collection of various fonts.

What are the Gestalt Principles?

Gestalt Principles describe how humans organize visual elements.

What do HSL/HSV stand for? How can you use the models to create a palette?

HSL or HSV stands for hue, saturation, value or luminance.

What does the Hick's Law describe?

Hick's law says that the time to select an item is logarithmically proportional to the number of items in an ordered menu.

What mistakes can confuse a user's information scent?

1. Iceberg Syndrome The user assumes information is not available on a site as it is not in view when they arrive. 2. Camouflaged Links Users look for links. If they are camouflaged as images or non-traditional elements they will be ignored. 3. Banner Blindness Users ignore certain areas as advertisements or filler content tend to be placed in specific regions. 4. Links that Lie If the user clicks on a link and they are navigated to an unrelated page they will lose confidence in the scent. 5. Missing Words If the user finds the desired content on the page but the relationship between the link and corresponding page lacks clarity on arrival. 6. Cute Link Names If link names lack clarity and transparency the user will likely ignore them or view them as suspicious. 7. Misplaced Links If information is out of sight or hidden the user must invest more time in the search process. If there are misplaced links with similar names to the desired content the user could be navigated away from the site or taken to an unwanted page within the site.

What are the different stages of the UX cycle?

Analyzing (user research, personas) Designing (sketching) Prototyping Evaluating

What are the differences between attitude and behavioral data?

Attitude data represents preferences and opinions people have about things. Behavior data represents the particular way in which the user behaves or interacts with a user interface. Often attitude drives behavior, but sometimes behavior overrides the original attitudes.

How can you reduce bias when interviewing users?

Don'ts when interviewing users: Don't use hearsay Don't accept difficult estimates Dos when interviewing users: Ask them what they saw others do Ask them what happened Ask them again in a different way

What are the elements of empathy maps? How are they used?

Elements of empathy maps are: says, thinks, does and feels. Empathy maps visualize user's needs, condense user data into a brief chart, and help you consider what the user wants—not what you think they want.

What are the differences between the additive and subtractive color models?

Emission vs reflection. The inherent difference is that the additive color model is used for things that emit colors, e.g. LEDs, while subtractive color model is used for things that place substances on a surfaces to color them, e.g. printers.

What are Field Evaluations?

Field evaluations assume interface evaluations in natural environments. That is, user researches go where people who are or will be using the interface are going to be. Pros: users perform real tasks, under realistic conditions. Cons: requires more time and effort, a working prototype must be completed.

What does the Fitts' Law describe?

Fitts' Law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. That is, bigger closer targets are easier to hit than smaller further targets.

What are the different data gathering methods that can be used to understand users?

Interviews Structured (have questionnaire ready) Open-ended Semi-structured Interview recording methods: Note-taking Audio recordings Video recordings Observation Ethnography (embed user researcher in the subpopulation)

What is the KLM model?

KLM stands for Keystroke-Level Model. It predicts how long it will take an expert user to accomplish a routine task without errors using an interactive computer system.

What are the differences between Likert scales and a semantic scales?

Likert scale asks the user to agree or disagree with a given statement while the semantic scale asks the user to complete a statement, offering two polarized options along with some middle-of-the-road options.

What are personas? What are the key points you would include if you were to create one while designing an interface?

Personas are abstract but detailed profiles of people. They have goals and motives and do real tasks but are not modeled after real people. Some of the key points to include when creating a persona are: profile, personality, influences, quotes, technology expertise, user experience goals, user devices and platforms, domain details, must do and must never, brand and product relationship.

What are the differences between low and high fidelity prototypes?

Low-fidelity prototypes are often paper-based and do not allow user interactions. High-fidelity prototypes are computer-based, and usually allow realistic (mouse-keyboard) user interactions.

What are the differences between modal and modeless dialog boxes? Describe a scenario where you would use a modal vs a modeless dialog box and vice versa.

Modal dialog steals focus from the user and requires the user to commits changes before proceeding. Modeless dialog does not steal focus from the user and commits changes immediately. When to use modal dialog: Use modal dialogs for important warnings, as a way to prevent or correct critical errors. Use modal dialogs to request the user to enter information critical to continuing the current process. Modal dialogs can be used to fragment a complex workflow into simpler steps. Examples: dialog for saving a file, login modal when the user attempts to complete an action that requires login. In situations where the task is not critical, a modeless dialog might be appropriate. Example: Gmail's modeless dialog for composing emails.

What are the different navigation styles? What UI elements help in navigation?

Navigation styles: Sequence of interface, with forward and back Examples: some web apps, install wizards Interface as hierarch with going down, up Examples: menus, settings, file system Display as a window into a larger interface Examples: digital maps, swipe/scroll pages UI elements that help in navigation: Buttons for actions (when we want to stay on the same page), changing state Links to navigate, should not be changing state Breadcrumbs Hamburger menus and tabs Vertical navigation Call-to-action button Search bars

What are the different types of probabilistic and non-probabilistic sampling methods? Describe the pros and cons for each.

Non-probabilistic methods: Voluntary sampling Pros: access to a variety of participants Cons: only particular types of people will volunteer to participate Convenience sampling Pros: inexpensive, relatively easy and participants are readily available Cons: high risk of under-representation and over-representation of the population Snowball sampling Pros: makes hard-to-reach participants accessible Cons: runs a high risk of selection bias, making it difficult to make inferences on a population Probabilistic methods Simple random sampling Pros: creates samples that are highly representative of the population Cons: tedious and time consuming, especially when creating larger samples Stratified sampling Pros: creates strata or layers that are highly representative of strata or layers in the population Cons: tedious and time consuming, especially when creating larger samples

Where would you use serif fonts? Where would you use sans serif fonts?

Serif fonts are used with long texts when readability is a primary concern. For instance, serif fonts are mostly used in print. On the other hand, sans-serifs are used in websites and presentations.

At what design stage is sketching used? What are some of its pros and cons?

Sketching is used in the second stage of designing the product. Pros: sketching is fast, cheap and makes for more effective wireframes. Cons: hard to draw some things on the paper, can loose sketches.

What are the different principles of interaction design we have seen?

Some principles of interaction design: 1. Physics is the most natural affordance Object consistency. 2. Avoid modes Easy to forget you are in the mode. If using modes, make it self-deactivate. 3. Show feedback inline 4. Maintain consistency during interactions For example, tabs that change positions confuse users and icons in file explorer should be laid out just as the user left it.

What are the different emotions that shapes like rectangles, ovals, circles, etc. can evoke?

Squares and rectangles evoke discipline, strength, courage, security and reliability. Triangles evoke excitement, risk, danger and balance. Circles, ovals, ellipses evoke eternity, femininity, universe and magic. Spirals evoke growth, creativity and calmness.

What does the Steering Law describe?

Steering Law describes the time required to navigate, or steer, through a 2-dimensional tunnel. It suggests that we should design tunnel user interfaces to be wide and short.

What is storyboarding? How is it used?

Storyboards are illustrations that represent a story, a scenario. It helps the designer and user visually predict and discover a product experience. The storyboard is much like a movie of how people will use your product.

What does the 60-30-10 rule say?

When choosing where to apply color in the user interface, make your dominant color appear in 60% of the whole interface, secondary color 30% and accent color 10%.

What are wireframes?

Wireframes are graphic structures of websites or apps containing the content and elements. Wireframes should: 1. Contain the main information 2. Draw the outline of structure and layout 3. Be visual and description of the user interface

What are the differences between direct and indirect controllers? Relative and absolute?

With direct input, the input space coincides with the display space. That is, pointing is done in the space where visual feedback or the pointer appears. Touchscreens and light pens are examples of direct input. On the other hand, with indirect input, the input space does not coincide with the display space. Examples involving indirect input include the mouse and trackball. Absolute controller has 1-to-1 mapping between input and output space while relative controller does not.