CS349 Study

Answers to the study questions answered here.

13. Visual Design (a) Name two kinds of harmonious colour pallets. Monochromatic and Analogous palette.

(b) What do the letters H, S, and L stand for in the HSL colour model? Hue, Saturation, Luminance

(c) Why is the range of hues in the HSL colour model expressed in degrees? 0 to 359 degrees

• Extra info: Hue is in degrees, saturation and luminance in %

(d) Which harmonious colour palette is defined using exactly two hues? Complementary

(e) Write the body of this TypeScript function:

// returns a triadic hue palette based on hue
function triadic(hue: number): [number, number, number] {
    const triadic1 = (hue + 120) % 360;
    const triadic2 = (hue + 240) % 360;
    return [hue, triadic1, triadic2];
}

(f) Write the body of this TypeScript function:

// draws a 10px wide, h px tall rectangle rendering all hues vertically
// the currently selected hue is indicated with a 1px black line
// selectedHue is between 0 and 359
function drawHueSlider(
    gc: CanvasRenderingContext2D,
    h: number,
    selectedHue: number) {
    
    
    }

(g) What is a design system? It is a systematic approach to product development, with guidelines, documentation and code.

(h) Is Bootstrap a design system? Why or why not? Yes, it has guidelines and code.

(i) Is CSS a design system? Why or why not? No, because it doesn’t have guidelines on how to write CSS. It is merely a language.

(j) Is Material Design a design system? Why or why not? Yes, because it has guidelines, documentation and code.

(k) [ 2 ] Why is Bootstrap not a complete design system? What is the name of the complete design system we discussed and demoed in lecture? It is not a complete design system because it lacks comprehensive guidelines and tools for ensuring design that are typical of a full design system.

14. Text (a) [ 1 ] What is ASCII? ASCII is the American Standard Code for Information Interchange. It is a standard for the different characters and how they should be encoded. The old ASCII uses 7 bits, whereas the extended ASCII uses 8 bits.

(b) [ 1 ] What are ASCII code pages? They are different page, each with a different mapping from a particular ASCII code to a specific character.

(c) [ 1 ] What is Unicode? Unicode is a superset of ASCII, designed for multiple languages. It supports more accented characters, Greek letters, emojis.

Written in U+0048 (U + a 4 digit heximal)

Uses more than 1 byte.

(d) [ 1 ] What is UTF-8? UTF-8 is Universal Character Set Transformation Format 8-bit. It is used to encode and decode data (unicode) using a multi-byte variable-width encoding.

(e) [ 1 ] Why is UTF-8 a variable byte encoding? So data can more efficiently transmitted. A greek letter will not require 4 bytes to be transmitted.

(f) [ 2 ] What are Unicode and UTF-8? Explain each, including how they relate to each other. Unicode is merely a standard for how different characters are encoded through a code, in the format U+4 digit hexadecimal. However, Unicode doesn’t specify how Unicode is implemented. Since Unicode takes up more than a byte for each unicode character, UTF-8 implements the transmission of Unicode efficiently. Depending on which Unicode character is used, it will take up more or less bytes.

You do not need to provide technical implementation details, just written descriptions. (g) [ 1 ] What is i18n? i18n is internationalization. It is designing software so it can be adapted to various cultures and languages.

(h) [ 1 ] What is l10n? l10n is localization. It is the act of implementing i18n.

(i) [ 1 ] What is a locale? It means the region / language.

(j) [ 1 ] Why is form validation important? To prevent injection attacks, to get the right kind of input, better user experience (guiding them towards the right kind of data)

(k) [ 1 ] What is an example of an unprotected Text Submission Attack? SQL injection.

(l) [ 1 ] What is an HTML <label> used for? It is to associate text with an input field.

<label for="name">Hello</label>
<input type="text" id="name"/>

(m) [ 1 ] What is a CSS pseudo-class? It is a keyword added to a selector that specifies a special state of the selected element.

(n) [ 1 ] What is input formatting and masking? Input formatting formats the input as the user types it in. It rewrites it in standard formatting. On the other hand, input masking shows a GUI representation of the final format, and fills it in as the user types.

(o) [ 2 ] What is the difference between internationalization and localization? Internationalization is the act of designing software so that it can support multiple languages and regions without requiring engineering changes for each locale. Support for different currencies, etc.

Localization is the act of implementation internationalization.

15. Asynchronous (a) [ 2 ] Name two general ways that a user interface can be “responsive”.

1. Designing to meet human expectations
2. Have data be loaded efficiently

(b) [ 2 ] What are two general ways that you can make user interface feedback responsive?

• Feedback degradation
• Progressive Loading
• Predicting next operation

(c) [ 1 ] Explain why responsiveness is not necessarily the same as system performance. A system can be low performance but still highly responsive.

(d) [ 2 ] Give one user interface design implication based on human perception of time. Display busy indicators for operations that are more than 1 seconds. To show that something is happening.

(f) [ 2 ] Use a specific example to explain how to increase responsiveness by progressive loading. A blurred image slowly getting more clear over time.

(g) [ 2 ] Use a specific example to explain how to increase responsiveness by predicting the next operation. The web browser prefetches the linked pages.

(h) [ 2 ] Use a specific example to explain how to increase responsiveness by graceful degradation of feedback. The graphics editor only drawing out the outline to an object when it is manipulated.

(j) [ 2 ] What is one user interface goal when handling long processing tasks? Keep UI responsive. Provide progress feedback. Allow long tasks to be paused or cancelled.

(k) [ 2 ] Consider the code below. What is a reasonable maximum processing time for doTask() so that users will still perceive the interface as responsive? Why?

button.addListener("click", () => doTask());

140 ms, any more and people will feel a cause-effect delay.

(l) [ 1 ] Consider the code below. If doTask takes 5 seconds to process, what can you do to keep your interface responsive? No code is needed, just a description.

Add a progress bar to show people progress. Show remaining time.

button.addListener("click", () => doTask());

(m) [ 2 ] One strategy to handle long tasks is to break the task into smaller subtasks and run periodically execute those subtasks between handling UI events. What is the approximate upper bound for subtask execution time? What are disadvantages with this approach? 1 second. More overhead of scheduling small tasks.

(n) [ 2 ] One strategy to handle long tasks is to run the task in a separate “worker” thread. What should the worker thread always communicate to the UI thread? What data or events would the UI thread want to communicate to the worker thread? The progress, so that there is feedback that the UI thread can display. The event would be like pausing or cancelling.

(o) [ 2 ] In some UI Toolkits like JavaFX, worker threads need to be careful about directly accessing UI widgets. Why is this the case? How is this handled? Because of concurrency. Two threads can access the same variable.

(p) [ 1 ] Consider this code fragment for a button controller:

startButton.addListener("click", () => {
while (network.isBusy()) {
sleep(50); // stops all execution for 50 milliseconds
}
doTask();
}

If network.isBusy() takes about 100ms to return and it almost always returns true at least 10 times before returning false, what will happen to the user interface when startButton is clicked? Everything will freeze not move for 10 x (100ms + 50ms) = 1.5s.

(q) [ 3 ] Describe three kinds of messages that should be sent between a web worker and the main user interface program. Indicate whether the message is sent from main to thread, or thread to main.

1. Start → send from main to web worker
2. progress → thread to main
3. done → thread to main

16. Undo (a) [ 2 ] What is are two benefits of undo/redo?

1. Encourage exploratory learning
2. Recover from errors
3. Evaluate modifications

(b) [ 1 ] Why is undo/redo important for direct manipulation interaction? Because it encourages exploratory learning.

(c) [ 1 ] Give an example of an action that can’t be undone. Erasing a backup that already takes up a lot of storage. Clearing the bin

(d) [ 1 ] What should an interface provide when performing an action that can’t be undone? It should ask for a confirmation.

(e) [ 2 ] Referring to MVC architecture, what kinds of actions should always be undoable? What actions are most likely not undoable? Only Actions that modify the model should be undoable. View changes are likely not undoable.

(f) [ 2 ] Using the example of deleting a selected word in a text editor, then undoing that action, explain what is meant by state restoration after undo. Undoing that action would mean undeleting the selected word in this case. The selected word would come back.

(g) [ 3 ] In terms of undo granularity, what is a chunk? Make an argument for good and bad chunking when undoing a sequence of text immediately after it was typed. A chunk is a conceptual change from one state to the other. We can model interactions through undoable chunks. After drawing a line:

• Good granularity: Undo the mouse start to mouse end for that line
• Bad granularity: Uno every single pixel change

(h) [ 3 ] In terms of undo granularity, what is a chunk? Make an argument for good and bad chunking when undoing direct manipulation to drag an object from one location to another. Same definition as above.

• Good: mouse start to mouse end
• bad: in-between states

(i) [ 3 ] In terms of undo granularity, what is a chunk? Make an argument for good and bad chunking when undoing handwritten pen input. Think about letters like lowercase “i” and “j”. Same definition as above.

• Good: take more time for longer transitions, i and j
• Bad: undo entire thing, or every single character. We want it to change based on how fast one types

(j) [ 1 ] We talked about scope for undo, what is the most common level of scope for undo? Have multiple undo-redo stacks, one for each windows.

(k) [ 2 ] Explain the difference between forward and backward undo. A diagram may help. In forward undo, the undoStack is used to compute the current state. Undoing is done by removing an element from the undo stack. On the other hand, in backward undo, a set of reverse operations is stored. The change is applied, and the reverse operations is stored in the undoStack.

(l) [ 1 ] What is one potential disadvantage of a forward undo implementation? Every time a command is executed, the entire state needs to be recomputed.

(m) [ 1 ] What is one potential disadvantage of a reverse undo implementation? Destructive commands can result in incorrect undos.

(n) [ 2 ] Explain the difference between a memento and a command change record implementation. A command change record implementation stores from the do and undo. Whereas a memento stores a discrete set of states, that describes the entire program.

(o) [ 2 ] Describe how the memento and command design patterns can each (separately) be used to implement undo. With the command design pattern, every time a new command is executed, the command is composed of both a do and undo command. With the memento pattern, you simply store the state.

(p) [ 2 ] You need to implement reverse undo with a command pattern to existing properties in an MVC Model. You are not allowed to use any special caching. Do you need to add code to “get”, “set”, or both “get” and “set”? Explain. We only need to update set. Get retrieves the value, but that value is updated in set through the do and undo command.

(q) [ 1 ] You need to implement forward undo with a command pattern to existing properties in an MVC Model. You are not allowed to use any special caching. Do you need to add code to “get”, “set”, or both “get” and “set”? Explain. Both get and set needs to be used.

• For get, with forward undo, we only store a baseState that is rarely changed. It has to go through the entire undoStack updated to some base value.
• For set, the undoManager needs to call executeCommand, which will add the command to the undoStack.

(r) [ 1 ] Consider the asymptotic time (“big Oh”) of executing an undo action after the user has performed N user interface actions. What is it for forward undo? What is it for reverse undo? Assume there is no special caching. In both cases, we pop from the undoStack first. However, forward undo is O(N), since it needs to recompute the state. For reverse undo, it is O(1), since we are simply executing the undo command.

(s) [ 1 ] What is the command to “un-execute” a command that inserts a line of text at the end of a document? Delete the line of text at the end of the text.

(t) [ 2 ] What happens to the undo and redo stacks after the user executes an interface command like delete? The redo stack is reset. The undo stack is pushed with this new command.

17. Direct Manipulation (a) [ 2 ] What is an Interaction model? An interaction model describes how to combine interaction techniques in a meaningful and consistent way. Can be used to evaluate specific interaction designs.

(b) [ 2 ] What is Instrumental Interaction? It is a model of interaction based on how we naturally use tools to manipulate objects in the real world.

(c) [ 2 ] In terms of instrumental interaction, what is an interaction instrument? Give an example from a computer interface. The resize tool to resize an image in a document. The image is the domain object, and the tools to modify it are the interaction instruments.

(d) [ 2 ] In terms of instrumental interaction, what is a domain object? Give an example from a computer interface. The image itself, the thing that is being manipulated.

(e) [ 2 ] Explain what is meant by an instrument that is spatially activated. Given an example from a computer interface. The scrollbar on a word document is spatially activated, because it has a movement cost.

(f) [ 2 ] Explain what is meant by an instrument that is temporally activated. Given an example from a computer interface. Temporal has a time cost. We need to do it sometime in the future. The rectangle instrument to specify the shape that we want to create.

(g) [ 2 ] What is meant by reification? How does instrumentation interaction use reification to explain how user interfaces work? Reification is turning concepts into something concrete. An instrument is the reification of a command.

(h) [ 2 ] Explain what object reification means. Give an example.

(i) [ 2 ] What is a meta-instrument? Give an example. It is an instrument that acts on another instrument. For instance, the color selector tool, specifies the color of the bucket tool, which is itself an instrument to modify the color of an object.

(j) [ 2 ] Beaudoin-Lafon provides three criteria to evaluate instruments. Name and describe one.

1. Degree of indirection
2. Degree of integration
3. Degree of compatibility

Indirection is the spatial / temporal offset. Integration is the match in terms of degrees of freedom with the object. Compatibility is the similarity of action of instrument to action on the object.

(k) [ 2 ] An interface uses a toolbar slider to adjust the scale of a selected stroke in a drawing program. Is the degree of indirection high, medium or low in terms of spatial and temporal dimensions? Explain. Medium in spatial. The scrollbar is not on the page, but close. in terms of temporal, you need to actually go to the scrollbar, and click, before starting the direct manipualtion.

(l) [ 2 ] An interface uses draggable “handles” located in the four corners of the selected strokes bounding box to adjust stroke scale in a drawing program. Is the degree of indirection high, medium, or low in terms of spatial and temporal dimensions? Explain. Low for both, because the handles are directly there.

(m) [ 2 ] Is using a dialog box to adjust object properties an example of low, medium, or high degree of indirection in terms of spatial and temporal dimensions? Explain. High.

(n) [ 2 ] Is dragging and dropping a file onto the trash bin to delete an example of low, medium, or high degree of indirection in terms of spatial and temporal dimensions? Explain.

(o) [ 2 ] What is the degree of integration for dragging a shape in a drawing program using one-finger touch? Explain. 1, there are 2 degrees of freedom for dragging, and 2 degrees with your finger.

(p) [ 2 ] What is the degree of integration for using a vertical slider to adjust font size with a mouse? Explain. 1/2

(q) [ 2 ] What is the degree of integration for zooming a map using multi-touch pinch-to-zoom? Explain.

(r) [ 2 ] What is the degree of integration of the “MacBook Wheel” input device demonstrated in the satirical comedy video we saw in class ? Explain.

(s) [ 2 ] Is the degree of compatibility for dragging a shape in a drawing program using one-finger touch low, medium, or high? Explain.

(t) [ 2 ] An interface uses a toolbar slider to adjust the scale of a selected stroke in a drawing program. Is the degree of compatibility high, medium, or low? Explain.

(u) [ 2 ] An interface uses a dialog to adjust the scale of a selected stroke in a drawing program. The dialog has a text box and a button to “apply” the new scale. Is the degree of compatibility high, medium, or low? Explain.

(v) [ 2 ] Explain the concept of direct manipulation in terms of interaction instruments and objects.

(y) [ 2 ] Direct manipulation isn’t perfect. Provide one potential issue with it.

18. Preact (a) What is JSX? It is an extension of JavaScript. JSX files are compiled into JavsScript into hyperscript function calls.

(b) Translate the following JSX expression into JavaScript using the hyperscript function:

h(tag, attributes, children)
// JSX expression
<div class="foo"><p>Hello</p></div>
 
h("div", {class :"foo" }, [ h("p", {}, "Hello")])

(c) What two languages does JSX combine together? How is JSX processed so it can “run” in a browser? It combines javascript and HTML. It is compiled into JavaScript.

(d) Does Preact use a declarative or imperative paradigm for creating a UI? It uses a declarative paradigm for creating a UI.

(e) [ 2 ] SimpleKit and Preact are examples of two different user interface programming paradigms. Explain each paradigm, and name SimpleKit or Preact as an example. simplekit = imperative paradigm

• we place things down through a set of commands. Describe how to achieve something

preact = declarative paradigm

• we describe how things are. Describe what result we want

(f) What are the three approaches to handle state in Preact? (Not Redux, since it only works in React compatibility mode)

1. useState hook
2. useContext hook
3. Signals

(g) What is “prop drilling”? Why is it a problem?

(h) Consider this Preact signal called test:

const test = signal({a: 0; b: 0});

Will the line of code below automatically update components that use the test’s value? Why or why not?

test.value.a++;

(i) What is reactivity in the context of Preact? Reactivity is the automatic update of UI due to a change in the application’s state.

(j) What is a virtual DOM? Why is it used? It is a virtual tree of nodes, a lightweight representation of the UI in memory.

(k) When should you use the Preact key prop? When updating children of the same node type. This enables better child reconciliation.

(l) What is an example of a “hook” in Preact? (m) What is a controlled form control in Preact? How do you typically implement one?

19. Accessibility (a) [ 1 ] Give an example of a temporary disability. Situational, temporary, permanent. An arm injury. Eye infection. Ear infection.

(b) [ 1 ] In lecture, the instructor used a “zoom” feature in MacOS to show a close-up view of pixels in the hit testing lecture. What is that an example of? It is an accessibility technology for the visually impaired.

(c) [ 1 ] In lecture, we saw a video of a suit called the Age Gain Now Empathy System (AGNES). Describe the suit and explain how it could be used by product designers. It is a suit that makes you tired more easily, and difficult to move. This can be used by product designers for more empathy. How they out their product in a supermarket for example.

(d) [ 2 ] Is direct manipulation always suitable for people with physical impairments? Explain. No, because people with physical impairments cannot interact with the object physically in the world world. For example, dragging and dropping, for someone who has no arms, is impossible.

(e) [ 1 ] What type of disability was the AngleMouse research project designed to help? Briefly explain how the technique works. It was designed to help those with motor impairments. It works by sensing how much the mouse is adjusting its angular rate, slowing down when there is a larger change in angular rate.

(f) [ 2 ] What is the curb cut phenomenon? Where does this term originally come from? Things designed to benefit vulnerable groups actually end up benefitting the entire society. The term comes from when curbs were cut so people in wheelchairs could actually cross the street. But then this was also useful to mothers walking with baby trolleys, and cyclists.

(g) [ 1 ] What is the accessibility tree? This is a tree generated by the browser using the DOM, with accessibility-related information for most HTML elements.

(h) Up until recently, password managers (like “1Password”) used accessibility APIs to paste securely stored passwords into login forms. This was useful for people using a password manager, but the accessibility API was originally designed for things like screen readers. What is this an example of? The curb cut phenomenon.

20. Computer Vision (a) [ 3 ] Provide pseudo code for a simple computer vision algorithm to track the position of a colour.

for each frame in video:
    color_position = frame[0,0]
    for each pixel in frame:
        if (pixel is more like COLOR):
            color_position = pixel
    return color_position