COMP 571

Programming

Week 1

  1. HTML

    1. hyper-text markup language, defines the structure of the web, make up of a series of “elements” defined by “tags”. Each element can have a unique id attribute, used for CSS and JS. 比如访问图片，通过 getelementbyid=””来访问, 唯一getelementbyId 是返回一个值，不是数列 不能用下标访问 CSS 是 style 不是 structual, 比如获取文本框输入 getElementbyId("...").value
    2. Document Object Model(DOM), HTML is a tree, while each element is a node.
    3. html: encapsulate entire html document, head: include metadata, such as CSS and JS scripts, body: main HTML contentw, h1: headers, p: paragraph text, strong, em: connotation, a: anchor text(links), img <img src='person.png' />: images (with alt attribute), br: linebreak, ul, ol, li: lists, table, threads, tbody, tr, th, td: tables, div: divisions(sections), form: encapsulates many inputs, label: label an input (include for attribute), input: user input, button: buttons
    4. Modern web browers can interpret HTML, CSS, JS. JSX 不能编译解释！

  2. CSS

    1. Cascading Sytle Sheets, defines the styles to be used, uses a cascading hierachy of selectors and decoration boxes consisting of key-value pairs
    2. applies to all HTML elements with a particular tag, # to particular id, . applies to particular class
    4. CSS Inline:

      CSS Internal: CSS External: Same as internal but with styling in an external file.
    5. Not all browsers support all CSS.

  3. JavaScript

    1. A dynamic, loosely-typed language. The data type is inferred from the declaration and can be changed.
    2. Variables are containers that hold data. Types: numbers, string, boolean, null, undefined, symbol, object(only stored in heap).
    3. Variables can be declared with var, let, const.
    4. Query the data type at runtime using typeof.
    5. Conditionals:
      5.1 if, else if, else 5.2 switch statements 5.3 evalExpr ? trueExpr : falseExpr
    6. Any value that is not false, undefined, null, 0, NaN, "" returns true.
    7. Comaparison: Weak comparison do not care about type, `"5" == 5` returns `true`
    8. Objects: unordered collections of data defined using key-value pairs. (attributes/properties).
      object.attribute or object["attribute"]
    9. Arrays: a varaible that contains multiple elements, do not have to be the same type
    10. console.log cannot monitor users’ usage of our application, only debug 主要是不能监视 user 的使用 console.log('Next year, Bucky will be $(person.age)')

  4. DOM

    1. HTML is a tree, where each element is a node. We use JS to manipulate this tree.
    2. Use document to reference the DOM
    1
    let title = document.getElementById("articleTitle");
    1. Add an action for some elememt when some event happens:
    1
    2
    3
    4
    5
    6
    7
    title.textContent = "My Website!";
    loginBtn.addEventListener("click", () => {
      alert("You are advancing to the next part..");
    });
    for (let callout of callouts) {
      callout.style.color = "red";
    }

Week 2

  1. JSON

    1. A JS Object is executable code, JSON is a language-agnostic respresentation of an object. Cannot write comments in JSON.
    2. JSON.parse JSON String->JS object, JSON.stringify JS Object->JSON String
    3. HTTP Request for JSON: sync and async(recommended). XMLHttpRequest (old) and fetch (new).
    4. fetch():
      `fetch(url)

.then((response) => response.json())
.then((data) => {})
.catch((error) => console.error(error)); happens async,thenandcatch` take a callback function as an argument. A callback function is passed into another function as an argument, which is then invoked inside the outer function to complete a routine or action. passed from a parent to child component can be used to mutate the state of the parent component

  1. Write clean code

    1. imperative: for (let obj of arr) {}, declarative: arr.forEach((obj) => {})
      prefer declarative programming,
      forEach, map, filter: used on arrays, take a call back as an argument, slice, concat, some, every, reduce
    2. Object.keys(obj) get the keys of an object
    3. setInterval(callback, interval) perform a callback function every interval milliseconds
      setTimeoue(callback, timeout) perform a callback function in timeout milliseconds
    4. slice(begI, endI) returns a shallow copy with an optional beginning and ending index
    5. concat joins two arrays together
    6. some(cb) returns true if the callback returns true for some element of the array, false otherwise.
    1
    ["sam", "jacob", "jess"].some((p) => p === "jess"); //true!
    1. every(cb) returns true if the callback returns true for every element of the array, false otherwise.
    1
    ["sam", "jacob", "jess"].every((p) => p === "jess"); // false!
    1. reduce(cb, start): takes a 2-para callback (previous and current values) and s starting value
    1
    [2, 4, -1.1, 7.2].reduce((prev, curr) => prev + curr, 1.2); //13.3
    1. ... Spread Operator const newCats = [...cats, "darcy"], also with objects, are both shallow copies.
    1
    2
    3
    4
    5
    6
    7
    8
    const fruits = ["apple", "banana", "apple", "banana", "apple"];
    const countObj = fruits.reduce((acc, curr) => {
      return {
        ...acc,
        [curr]: (acc[curr] || 0) + 1,
      };
    }, {});
    console.log(countObj); //Output: {apple: 3, banana: 2, orange: 1}
    1. ?? Null Coalescing Operator: if left-hand is null or undefined, use right-hand.
    1
    const IS_ENABLED = env.IS_ENABLED ?? true;

Copy

  1. Why: using spread operator, copying a template object, passing an object to function where we do not want the object to be modified, data safety
  2. Reference Copy: let A = B, change A will also change B, same mem area, any changes made through a will also reflect in b. x=y, x=z, x 会变成 z 的地址，y 不会改变
  3. Shallow Copy: let A = {...B}, creates a new object, but just copies refs to those inner object, changes to inner objects in a shallow copy can affect the original, and vice versa.
  4. Deep copy, through JSON.parse(), totally seperate mem.

Bootstrap

  1. Layouts: Containers are the most basic element of layouts
    1
    <div class = "container></div>
    containers will contain rows and columns to form a grid
    1
    2
    3
    4
    5
    <div class="container">
      <div class="row">
        <div class="col-*"></div>
      </div>
    </div>
  2. Responsive Design: adapts content to a variety of devices and screen sizes.
    1
    <div class="col-12 col-sm-6 col-md-4">
  3. Content: includes basic HTML elements, typography, code, images, tables, figures
    1
    2
    3
    4
    5
    <img src="..." class="img-fluid">
    <table class="table">
       <thead class="thead-dark">
          <tr>
          ...
  4. Components: include all other visual/interactive elements that make up the design, buttons, forms, navbar, tooltips, etc.
  5. Utilities: not elements themselves, but modify/control other elements

Week 3

React

  1. React: also called ReactJS, a JS library for building user interfaces, can be written without using JSX, NOT a framework
  2. Why use?
    2.1 innerHTML is bad(XSS injection attack)
    2.2 efficient DOM updating: no longer access elements via document., which will friendly in interactive pages
    2.3 declarative programming: every component is a function
  3. Component: every thing is a component, a function, inheriting props and maintaining an internal state. Re-render when its props and state changes, or its parent re-renders. The return is what is displayed for a component.
    The return of a functional component is what component renders.
    Can be written without using JSX
1
2
3
4
5
6
7
8
9
10
function App() {
   return (
      <div>
         <Welcome person='Charlie'></Welcome>
   );
}
function Welcome(props) {
   const [name, setName] = useState("asd")
   return <h1>Welcome, {props.person}</h1>
}
  1. useState Hook: used to maintain state. Takes an initial value as an argument. Returns a pair of the read-only state value and a mutator function. Always use the mutator function to modify state. Mutator happens asynchronously, use useEffect.
  2. useEffect Hook: used to perform an action on component load or state chagne. Takes a callback function and an array of state dependencies as arguments. Listen for changes!
    1
    2
    3
    useEffect(() => {
      alert("You changed your name to " + name);
    }, [name]);

Week 4

  1. Set State:
    SetNum(4): overwriting the value
    setNum(n => n+1): update the existing value

  2. React will keep old state when hot reloading, choose overwrite to avoid duplicates upon saving solution.

    1
    2
    3
    4
    5
    6
    7
    8
    function AllHurricanes() {
      const [hurricanes, setHurricanes] = useState([]);
      useEffect(() => {
        fetch("http://...")
          .then((res = res.json()))
          .then((data) => setHurricanes(data));
      });
    }

  3. Displaying Arrays of Data
    3.1 map each piece of data to JSX

    1
    2
    3
    4
    5
    {hurricanes.map((hurr) => (
      <Hurricane
        name={hurr.name}... // <Hurricane {...hurr}/>
      />
    ))}

    3.2 key: speed up rendering, always use a unique key for the parent-most element rendered in a list, needs to be unique among siblings, should usually not be the index of the item

    1
    hurricanes.map((hurr) => <Hurricane key={hurr.id} {...hurr} />);

  4. Responsive Design
    4.1 use react-bootstrap, Not makeing apps responsive
    4.2 use Container, Row, Col components, xs, sm, md, lg, xl, xxl are props, 包着 container 和 row, 一共 12，除以长度就是个数

    1
    <Col xs={12} md={6} lg={3}></Col>

  5. Pagination: also available in react-bootstrap, handling large sums of data, use a state variable to track which page is active, use with slice to only show the item on the current page.

  6. Text input: HTML input tag, or Form.Control in React-bootstrap
    6.1 in a controlled way useing its value and tracking onChange events
    6.2 in an uncontrolled manner using useRef

Week 5

  1. React Fragment:
    A JSX component can only return one thing. Sometimes we use <></> instead of <div></div>, which is a React Fragment, a virtual separator not represented in the real DOM

State Management

How do we talk back to our parent? How do siblings talk to each other?

  1. Passing Callbacks
  2. useContext: a useful hook for managing state across web apps with large component hierarchies.
    2.1 Create and export a context*
    1
    2
    const MydataContext = createContext([]);
    export default MyDataContext;
    2.2 Provide the context with some value
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function ParentComponent() {
       const [data, setData] = useState(["...", ...]);
       return (
          <MyDataContext.Provider value={data}>
             <SomeChildComponent />
             <SomeOtherChildComponent />
          </MyDataContext.Provider>
       )
    }
    2.3 Use the context in a child component
    1
    2
    3
    4
    function SomeChildComponent() {
       const data = useContext(MyDataContext);
       return (...);
    }
  3. Cookies, Session, Local: these exist in browser, persist even after a page refesh 1. **cookies**: can be set programmatically, but typically set by through a `Set-Cookie` header. `document.cookie='lang-en'`. JS access non-HTTP-only cookies, use `document.cookie` 2. **Session**: set programmatically via `sessionStorage`, typically used with form data. `sessionStorage.setIrem('name', 'cole')`, not-sensitive, keep until close browser window 3. **Local**: set programmatically via localStorage, typucally used with long-lasting data. `localStorage.getItem('lastLogin')`
  4. sessionStorage & localStorage:
    4.1 only store strings, Use JSON.parse and JSON.stringify
    1
    2
    sessionStorage.setItem("nums", JSON.stringify([2, 6, 19]));
    const storedNums = JSON.parse(sessionStorage.getItem("nums"));
  5. Third Party Libraries: Redux, Recoil, MobX, XState
  6. Persist long-term? Server-side storage with PUT, POST, DELETE

  1. Types of Routers:
    1.1 BrowserRouter: typically
    1.2 MemoryRouter: same as BrowserRouter, but the path is hidden from the browser in memory
    1.3 HashRouter: support for older browsers
    1.4 StaticRouter: used for server-side rendering
    1.5 NativeRouter: not! use react-navigation instread!

  2. Routing: using a Router, Routes, and Route!

    1
    2
    3
    4
    5
    6
    7
    8
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about-us" element={<AboutUs />} />
        </Route>
      </Routes>
    </BrowserRouter>

  3. Browser outlet: shows the component returned by the child route

  4. useNavigate: useful for programmatic navigation not default React library

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export default function OtherInfo() {
      const navigate = useNavigate();
      const handleclick = () => {
        navigate(" / home ");
      };
      return (
        <div>
          <h2>0ther Info!</h2>
          <Button onClick={handleclick}>Back to Home</Button>
        </div>
      );
    }

    navigation for a BrowserRouter is done via URLs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <>
      <Navbar bg="dark" variant="dark ">
        <Nav className="me-auto">
          <Nav.Link as={Link} to="/ ">
            Home
          </Nav.Link>
        </Nav>
      </Navbar>
      <Outlet /> // shows the component returned by the child route
    </>

Week 6

  1. CRUD operations:Create->POST, Read->GET, Update->PUT, Delete->DELETE

  2. HTTP request:从上到下, [request Line(http/1.1), request headers]<-request message header, a blank line seperate header and body, request message body, X-CS571-ID写在 request header 里面

    1
    https://www.example.com/packers/AaronRodgers/stats?all=true&since=2010

    AaronRodgers is a path parameter, all, since are query parameters
    for JSON body, need an additional HTTP header, Content-Type: application/json切记！ 不是必须的，但是 Body 是 json 时必须确定
    100s: Informational, 200s: Successful, 300s: Redirection, 400s: Client Error, 500s: Server Error
    200: OK, 304: Not Modified, 400: Bad Request, 401: Unauthorized(blamed to requestor), 404: Not Found, 409: Conflict, 413: Request Entity Too Large, 500: Internal Server Error

  3. fetch: POST, PUT, DELETE

  4. Handling Text Input: using HTML input tag or the React-Bootstrap Form.Control component.
    4.1 in a controlled way using its value and tracking onChange events.
    4.2 in an uncontrolled manner using useRef, will not re-render each time a character is typed by the user

    1
    2
    3
    4
    5
    6
    7
    const inputVal = useRef();
    return (
      <div>
        <label htmlFor="myInput">Type something here!</label>
        <input id="myInput" ref={inputVal}></input>
      </div>
    );

    The value of a ref can be retrieved via its current property, inputVal,current.value.
    React generally recommends controlled components. Controlled components can cause many re-renders, however uncontrolled components give you no control over the onChange property.
    4.3 Best practise: if using react-bootstrap components, be sure each Form.Control has an id associated with the htmlFor of a Form.label.

  5. Credentialed Requests: for requests for logging in, must include credentials. Return a session for the user, is typically stored in an http-only cookie, not accessible by JavaScript. Must explictly include credentials to every endpoint affecting authorization.

    1
    2
    3
    4
    fetch("https://example.com/api/submit", {
      method: "POST",
      credentials: "include",
    });

  6. Memoization: Storing the result so you can use it next time instead of calculating the same thing again and again Not for parent child communication
    6.1 useCallback: to memoize functions

    1
    2
    3
    4
    5
    6
    function MyApp() {
      const myComplicatedFunction = () => {...};
      return <>
       <buttom onClick={myComplicatedFunction}>Click Me</button>
       </>
    }

    We create the function myComplicatedFunction on every render! (Like, if parent render, the children has to render too)

    1
    2
    3
    4
    5
    6
    function MyApp() {
       const myComplicatedFunction = useCallback(() => {...}, []);
       return <>
       <buttom onClick={myComplicatedFunction}>Click Me</button>
       </>
    }

    Takes a callback function to memorize and an optinal list of dependencies. (when to re-‘memoize’)
    6.2 useMemo: same as useCallback, except memorizes the value of a callback。
    6.3 memo-ized Components: used for creating purely functional components. Given the same props, the function renders the same output.

Week 7

  1. Legacy React Apps: class-based and had “lifecycle methods”
  2. Reuse Logic: custom react hooks, (while custom components for re-use UI elements)
  3. React displays on the webpage using JSX, which transpiled into JS, CSS, and HTML, we deliver HTML, CSS, JS(not React!).
  4. Concerns in Production
    1. Reliability: Manual testing, automated testing(Jest, React Testing Library), Static analysis(TypeScript, ESLint)
    2. Performance: “bundle size”, specifically?(perf, profiler), broadly?(Google Lighthouse)
    3. Monitoring: Logging(not console.log, use Sentry, Datadog), Cloud tools(DownDetector, Cloud tools)
    4. Business Value of Delivery: Money? new feature? Analysis method(A/b test, customer survey) Commercial Tools(Pendo)
  5. Node is the runtime engine, NPM is the package manager
  6. npm ls -all, all vulnerabilities

React Native

  1. True Native: building specifically for the divice (Android or iOS). Pros: organic user experience, optimized apps, fine-grained control. Cons: expensive, little code reuse, less sense of abstraction.
  2. We want to cross-platform so we use react native. is a framework that includes everthing need to build mobile applications, supports iOS and Android.
  3. No browser/DOM(not web view), No CSS, no Bootstrap, no Storage
  4. Hermes is used to translate JS components to iOS/Android components.
  5. Can declaratively program, can use JSX, can use React hooks, can do styling. Maybe truly cross-platform
  6. Styling: cannot use CSS styles, but create JavaScript stylesheets(can be also inline).
  7. Images: use Image(not img): must be imported. use source(not src): takes an object instead of string. must specify a width and height.
  8. Buttons: title is specified with a prop. onPress rather than onClick

React Native 2

  1. Cross-Platform:
    1. By platform: provides a number of specific components, need to utilize multiple platform-specific components. TouchableNativeFeedback for Android, TouchableHighlight on iOS.
    2. By size: obtain screen dimensions of the device using the Dimensions class in react-native. (get('window'))
  2. Switch: a Switch is on or off, value boolean value of on/off, onValueChange callback function.
  3. ScrollView: like a View but scrollable, but it is in a view that is flexible. (一定要放在 View 里面)
  4. Card: RN do not have the concept of a “card”, use third-party react-native-paper, create manually like styles.card, can add gestures
  5. Animations: providing feedback in a visually asethetic way, third-party-library react-native-reanimated, Animated
    1. provides animations for View, Text, Image, ScrollView,FlatList,SectionList, can using Animated. timing, spring,decay, which manipulated an Animated.Value.
    2. Can control many animations using parallel, sequence, loop, start() and stop() apply to the set of animations.
    3. cannot directly add/substract/multiply/divide Animated.value, instead must use Animated.add(v1,v2), .substract(v1,v2), .multiply(v1,v2), divide(v1,v2)
  6. Navigation: RN is a framework but still lacks support, React Navigation
    1. Tab navigation: @react-navigation/bottom-tabs(在屏幕底部，类似于 home, back), Drawer Navigation: @react-navigation/drawer, Stack Navigation: @react-navigation/native-stack
    2. must be nested inside of a NavigationContainer, create navigators via a function createNAVIGATOR(), consist of a navigator(can be styled, nested) and a set of screens. useNavigation is a custom React hook that can be used to help us navigate. Infomation can be passed from screen to screen via route params. navigator can be nested
      1
      2
      3
      <NavigationContainer><SomeNav.Navigator>
            <SomeNav.Screen name="Bookstore" component={BookstoreScreen}/>
      </SomeNav.Navigator></NavigationContainer>
    3. Stack Navigation: push a screen onto the history stack via navigation.push(screenName, params), screenName is the screen navigate to, params is optional, is recived as props.route.params

React Native 3

  1. How to pass data down using navigation: not hardcoding tool names, not passing tools data
1
tools.map(tool => {return <ToolDrawer.Screen key={tool.name} name={tool.name}> {(props) => <ToolScreen {...props} {...tool}/>} </ToolDrawer.Screen>})
  1. Switch Navigation: perform a conditional render, if the user is signed in, show them their needs.
  2. Modal: a secondary window, using a state variable to control modal is open or closed, need to style it. animationType: slide, fade, none; onShow,onRequestClose: callback func; transparent: T/F;visible: T/F handled by state bariable dialogue box对话框
  3. Accessibility: whether a component is an accessibility element, if so, groups its children in a single selectable element. accessibilityLabel attribute defines the screen reader description of the component whereas the accecssibilityHint attribute helps the user understand what will happen.
  4. Secure Storage:
    1. JSON Web Token(stateless authentication): a signed access token for a period of time, base64 encoded(not encryption), “header”, “claims”, “signature”(using alg)
    2. Session UUIDs: stateful, a database maps this UUID to the corresponding claims
    3. Authentication: Web development: Interface with the user’s browser, prefer HTTP-Only cookies, include； 'credentials'; Mobile development: interface with the user’s operating system, prefer OS-level secure encrypted storage, header Authorization, value Bear <JWT>
    4. expo-secure-store works on Android and iOS, stores JWT to persistent storage, up to 2KB, persistent device storage
    5. Asynchronous in nature, getItemAsync(key), setItemAsync(key, val), deleteItemAsync(key), key refers to a storage key not an encryption key
  5. Advanced Gesture: RN provides methods to detect when and where, react-native‘s Button onPress, react-native-paper Card onPress and onLongPress, react-native-elements Slider onSliding, react-native-maps Marker onDrag, react-navigation Drawer gesture.
  6. Sensors: use expo-sensors instead of react-native-sensors
  7. Deployment: use expo application services, eas build -p android/ios, .apk deployed to Google Play Store, .ipa deplyed to iOS app store. No web server for deployment, Light, Movement, Air pressure, NOT Humidity

DialogFlow

  1. McTears Voice User Interfaces: a common form of agent-based design as opposed to direct manipulation. speech recognition, spoken language understanding, dialog management, response generation, text-to-speech synthesis 没有user identification
  2. Agents: high level containers for blocks (agent settings, intents, entities, integrations, fulfillments)
  3. Intents: training phrases: things the user may say to express an intent parameters things that may vary in an expression ()time, quantity, location Responses How the system responds to the expression
  4. Fallback Intent: special type, dictates how the agent responds if an expression connot match an intent
  5. e.x. What is the weather like today in Seattle? Intent: weather inquiry, Parameter a variable to ex ecpressed by the user: city name, Entity Typethe type of the variable expressed: geolocation, Entitya specific value that can eb expressed: Seattle
  6. Entities: can have synonyms, fuzzy-mateched, automatically expanded
  7. Webhook Fulfillment:
    1. end user->dialogflow->fulfillment, can be code inline or UI setting. DialogFlow makes a POST request to /, expects a response of a certain format.
    2. ngrok to reverse-proxy, using Intent Mapping
      1
      2
      3
      4
      5
      const intentMap = {"GetNumUsers": getNumberUsers}
      app.post('/', (req, res)=> {
         if (intent in intentMap) {
         intentMap[intent](req,res)}})
      function getNumUsers(req,res) { res.status(200).send({fulfillmentText: "..."})}
  8. async/await: handle asynchronous behavior, await must be inside of an async, await waits for right-hand-side to complete, every async function returns a Promise, a async function may spawn async behavior, an async function always happens asynchronously. equal with .then .catch, console.log(async func) 依然是 promise object, 但是在实际输出的时候，如果合适依然会输出正确的 output
  9. Context: control the order of intent matching and define different behaviors for intents with the same training phase. intents have input and output contexts, a context has lifespan, time/turns, can be added or removed by an intent.
  10. Events: are triggered by actions users take on platforms that dialogflow interacts with.
  11. Integrations: can be integrated with other platforms, can also be embedded as an iframe, or smalltalk
  12. 如果 enable auto-expasion 同类型的词汇会自动增加，比如我说了 green, 那么之后说 red 也会自动认出 fuzzy-matching 会模糊搜索，写错了也能找到
  13. **two or more intents can have the same training phrases, provided that they are triggered in different contexts.

Fullstack Development

  1. Software stack: javascript and react for frontend development, js & express for backend development.
  2. popular web frontend library: Angular, React, Vue
  3. Backend: PHP
  4. Persist data by building a backend, using SQLite, creates a .db file

Security

  1. SQL Injection : insertion of a SQL query, read sensitive data from the database, modify database data. sanitize inputs on teh backend, use parameterized queries instead.
  2. Cross-Site Scripting(XSS): type of injection, malicious scripts are injected into otherwise benign and trustes websites. Generally in teh form of a browser side script, to a different end user. DOM-based(url 里面)， Persistent(文本框输入). sanitize displays, use react sanitization
  3. use outdated version, but a vulnerable dependency does not necessarily mean the application is vulnerable, an application without vulnerable dependencies could still be vulnerable. (dependencies are flags to look into)
  4. Tools: NIST, Github, Snyk, keep update
  5. Software and Data Integrity Failures: do not validation at frontend
  6. Mitigation: obfuscation, web application firewall, containerization(docker), defense in depth

Design Thinking

Week 1 DT

six phases DT

  1. An approach: a hands-on, suer-centric approach to inovative problem solving
    A process: six phases. Emphathiz, define, ideate, prototype, test, implement
  2. Emphathize: conduct research to develop an understanding of your users.
    method: Think-Aloud
    1.1 Identify representative users. 1.2 Ask users to perform representative tasks. 1.3 Observe and record what they say and do, noting obstacles, pain points, and failures
    performing a contextual inqury with a representative user
    Write down notes to board? Adobe XD
  3. Define: Combine all your data and derive where your users’ problems exist. combing your research and observations to discover where user’s problem exist
    gather, analyze, recommend
    method: affinity diagramming, organizing data into clusters based on “affinity”
    2.1 Start with an initial set of categories 2.2 Sort notes into these categories 2.3 Add subcategories/consolidate as needed 2.4 Present each category 2.5 Rank categories in severity, combining importance, prevalence, frequency
  4. Ideate: Generate a range of crazy, creative ideas. Both indicidually or collaboratively, focus on creative, fast-moving, collaboration
    indea creation -> critiquing
    1. defer judgement, encourage wild ideas, build on the ideas of others, stay focused on the topic, one conversation at a time, be visual, go for quantity
    2. Conceptual design, an abstract characterization of the context, use, or experience with an envisioned design solution that highlights the main premise of the solution
    3. Sketching ideas: a sketach is a quick and rough drawing that gives a general outline of an idea. 画草图 low-fidelity, aided by annotations 质量不优先 not priority quality over quantity
      more effective than words, quick and inexpensice, disposable, can be plentiful
    4. Storyboarding ideas: a sequence of visual frames that illustrate user interaction with the envisioned system, capturing social, environmental, and technical factors that shape user experience.

Week 2 Visual Design

  1. Elements of Design

    1. Elements of design provide us with the tools for design wheras the priciples of design dictate how these tools should be use.

    2. Space: the canvas on which visual elements are placed. Positive: where the subject is positioned/Negative: the space surrounding the subject. Negative space can be used as positive.

    3. Line: the most primal design element that can divide space, call attention to, organize, and make up other elements

    4. Shape: Space outlined by a contour. Organic, 树叶子形状

    5. Size: (scale), is the relative extent of the design elements such as shapes and lines

    6. Pattern: systematic duplication of other design elements such as shapes and lines.

    7. Texture: Tactile and visual quality of a shape make up of different colors, materials, and different structures.

    8. Value: The intensity in which a design element is expressed.
      Visual Hierarchy: a visual design principle which designers use to show the importance of each page contents by manipulating these characters. (字体大小的对比)

  2. Principles of Design

    1. Focal Point: is where the design directs the attention of the viewer first.
    2. Contract: is the juxtaposition of design elements that strikingly differ from each other to guide user attention and action.
    3. Balance: the organization of design elements on a canvas to provide a sense of visual balance or imbalance. Can be achieved through symmetry or asymmetry(比如黄金比例).
    4. Movement: the organization of design elements in a way that suggests a particular flow on the canvas to direct the user’s attention.
    5. Rhythm: patterned use of design elements in a way that communicates movement or order.
    6. Perspective: creating a sense of horizon and movement along the depth axis of canvas.
    7. Unity: reflects the holistic consistency in the use of design elements.(一致性)

  3. Key Components for UX Design

    1. type: printed letters and characters of language.(艺术字) paras: style, caps, weight

      1. front: the style in which the type is created
      2. typeface: a front familty that includes fonts of different variations that follow the same style:
        (1) Old style: have “serifs” at the tips of a glyph that taper closer to the tip
        (2) Modern & slab-serlif: have very thin or very thick serifs
        (3) Sans-serif: lack the serif at the tips of the glyphs, and their strokes follow uniform weight(粗细一致)
        (4) script: simulate cursive writing where glyphs connect with each other at the downstroke
        (5) decorative: designed specifically to convey a particular context or elicit a particular feeling
      3. glypy: a particular character
        Type alone can be used to achieve design priciples, such as hierachy and movement.
        For good typography, become familiar with leading, traching, kerning, widows, orphans, rags, rivers.

    2. color: human visual perception of light reflecting from an object
      creates emphasis->organizes content->evokes emotion
      primary: G B Y, secondary color(pruple, green, orange), tertiary

    3. images: photographs, illustrations, 3D art… that convey rich information or context

Week 3 Web Design

  1. Designing for the Desktop，WIMP Paradigm: Windows, icons, menus, pointer

    1. Windows: resizable containers of individual applications. Primary windows contain elements for the main functionality of the application(canvas), secondary support main windows through modal panes(can be docked, stacked, and floating) -> dialogue box
      Organization: windows can be organized in a way that overlaps several windows or tiles them across the screen
      Structures: windows bring together dedicated panes in different configurations
    2. Menus: menus list all the functions of an application, lists serve educational and reference purposes.
      toolbars, palettes, sidebars, tooltips facilitate access to frequently used functions.
      Tool Palettes provide advanced controls for a particular function rather than frequently accessed functions.
    3. Pointing: pointing on an application canvas enables a range of advanced capabilities for direct manipulation.

  2. Designing for the web

    1. Desktop applications: dynamic, persistent screens and supporting components that enable users to perform complex tasks.
      Webpages: interconnected pages with aids that help users navigate and access a loarge body of content.
    2. Web applications: single-page applications(SPAs) provide the functions of a desktop application on a webpage following the conventions of desktop applications.
    3. Primary Navigation aids页眉: take the form of menus/menubars and reflect the major areas or sections of a website
      Secondary navigation页脚 aids provide comprehensice links to specific content on the site as fat navigation, left-hand navigation, footer navigation.
    4. Get home: breadcrumbs and hierarchical lists can get back to previous pages ot other pages.
    5. Orgamizing page content:
      5.1 The fold: dividing line between the area that is visible when a page first loads and the remainder of the page.
      5.2 fitting it all in: large volumes of content is either broken into discrete pages through pagination or incrementally loaded through infinite scroll.
    6. Search: an alternative to page navigation, provides users with listings of content based on a search query.
      Faceted search helps users narrow down a search once results are returned based on a simple query by providing functions to sort and filter the results.(过滤筛选结果) type of secondary navigational

  3. Layout, arrangement of visual elements on a canvas

    1. Creating a focal point: aka, center of visual interest, where the design directs the attention of the viewer first. Successful use locks attention to the focal point and gently guides it to its next destination.
    2. Following the golden proportion
    3. Using the rule of thirds: an approximation of the golden ratio (easy and more flexible) 3*3 grid
    4. Effectively using grids: grids serve as a visual framework for organizing elements in an orderly and balanced fashion.
    5. Integrating type: the use of headlines or blocks of text to guide the user’s attention to messages.
    6. Placing imagery: the use of imagery to create a focal point or movement on the canvas. place on top, not bottom, direction should be toward next focal point, never flip images, do not interrupt headlines, do not wrap text around images.
    7. using negative space: balance
    8. Grouping using gestalt theory: visual perception principles that predict how users will perceive design elememnts. Proximity, Similarity, Continuity, Closure
    9. Creating visual hierarchy: using relative positioning and sizing to communicate what design elements are more important and should be looked at first.(文字辅助，应该先看什么，也可以从字体大小看出，先看大的字体)
    10. Exploiting visual scan patterns: designing layouts that exploiting common eye-scanning patterns， F-pattern, Z-pattern
    11. Creating contrast and emphasis: using contrast and emphasis to establish visual hierarchy by manipulating features of design elements, including position, size, color, typographic.

  4. Design patterns
    类似于一个成熟的框架 pros: reducing design time and effort, improving the quality of design solutions, establishing familiarity across systems, providing a baseline or state of the art
    cons: Not every design problem will warrant a pattern, patterns may not exist for new design spaces

Week 4 Interaction Design

  1. defining behaviors for a system that engages the full spectrum of its user’s perception, cognition, and movements. Closer and more complex relationship to user behavior and context. (on navigation models)
  2. Five Dimensions: Words, Visual representaions, physical objects and space, time, behavior
  3. Information architecture: the design of the organizing principle of an interactive systems
    3.1 Show one single thing: supports a specific activity, eliminating other distractions. Content, supporting tools
    3.2 Show a list or set of things: provides rows or grids of items of the same kind that provide links to components that focus on that item. applied hierarchically
    3.3 provide tools to create a thing: supporting user creation of new contents, a canvas
    3.4 Facilitate a task: provides collections of components or controls that help users perform specific actions->change setting
    Combining structure: use some of above, SPAs
  4. Interaction Design Paradigm: an archetypal solution or an approach to solving design problems
    1. Implementation-centric: design maps directly to how system functions are implemented (飞机仪表), pros: easy to build, easy to debug // cons: requires learning how the function work, require skills, cannot perform high-level actions
    2. Metahorical: following a real-world metaphor that users are expected to be familiar with, pros 1. can be applied at different level of abstraction 2. mixed metaphor bring together models from different domains in single design. -Global Metaphor, provides a single, overarching framework for all the petahors in the system(Magic Cap), pros: work well in expert interfaces // cons: inability to sacle, lack of familiar read-world system for entirely new capabilities…
    3. Idiomatic: building dedicated highly expressive interaction capabilities that users must learn
      Develop Idioms: 1. Primitives: atomic action(point, click) 2. Compounds: complex actions(double-click) 3. Idioms: high level elements(deleting test)
  5. Affordances 亲和力: The perceived properties of a design elelment that give clues about how to interact with it. Enable users to intuively recognize actions that are possible with interface elements. Can be hidden and false.
    False affordances: an action that is perceived by the user but in face does not work as expected. 比如一个按钮啥也不干
    Hidden affordances: is not too obvious(下拉界面) 或者摇晃手机
    perceptible affordances: an object’s characteristics imply an action,最容易感知又最符合逻辑的
  6. Principles of Navigation:
    1. Wayfinding: user behavior where navigation across components follows a particular workflow or supports user goals. 比如箭头 1. signage, 2. Environmental clues 3. Maps(site maps)
    2. Cost: the time and effort required by users to navigate between components. 1. Minimize factors that increase cost of navigation: context switch, errors, delays 2. Minimize travel time by minimizing number of steps and context switches
    3. aids: design elements that aid users in navigating through content. types: 1. Global navigation aids, menus, tabs, sidebars 2. Utility navigation aids, sign in, help, print 3. Associative/in-line navigation aids, related links
  7. Navigation models: commonly used patterns of navigation through interactive applications
    1. Hub & spoke: involves a central hub, a home screen, that provides transitions to and from serveral specialized components. (一个主屏幕，访问其他)
    2. fully connected: a central component/page is connected all other components that are also linked to each other. 两个屏幕的时候开销最小 lowest cost
    3. Multi-level: involves main components that are fully connected with each other and sub-components that are only connected among themselves. (子图)
    4. stepwise: follows a sequential or branching navigation that represents step-by=step process, e.g. checking out on an e-commerce site.
    5. Pyramid: similar to the stepwise, but at each step, the user can navigate to the hub and back
    6. Pan and zoom: provides users with the ability to continuously navigate across a large space of content, map, list, written document
    7. Flat navigation: involves a central workspace that is always visible and functions that do not require context switches or navigation. Adobe 很多工具栏
    8. Modal panel: follows the flat navigation model except for modal dialogs that are temporarily overlaid on the cancas to help the user perform specific functions.
    9. Clear entry points: complex applications invlove navigational models with clear entry points that guide the user to frequently used or temporary functions without having to go through the hierarchical structure or a step-by-step process.
    10. Bookmarks: allow users to conveniently navigate to a point of his choice, anytime he wants, even if its deep inside a navigational structure. These give people a way to avoid traversing many links to get ot a desired page or state.
    11. Escape hatch: provides users with the ability to go back to the main component/page in a complex structure without having to trace steps back.(可以方便返回主页) can sometimes be represented by a company logo

Week 5 Accessible Design

  1. Usability: The effectiveness, efficiency, and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.
  2. Disability: impairment, activity limitation, participation restrictions.
  3. Impairment:
    1. Sensory impairment: Involves impairment in one or more senses, loss of vision or hearing.
    2. Physical impairment: Involves loss of function to one or more parts of the body, e.g., congenitally or a!er stroke or spinal-cord injury.
    3. Cognitive impairment: ncludes cognitive deficits, such as learning
      impairment or loss of memory/cognitive function due to aging or conditions such as Alzheimer’s disease.
  4. Common impairment :
    1. visual: Impairments in vision, including low vision, blindness, and color blindness.
    2. motor, mobility: Muscular or skeletal impairments in the hands or arms that affect user input as well as impairments that affect mobility, where users are in a wheelchair or bedridden.
    3. auditory: Deficits that affect hearing at different levels of severity, including deafness.
    4. serzures: Neurological impairments, such as photosensitive epilepsy, that result in sensitivity to light, motion, and flickering on screen, which might trigger seizures.
    5. cognitive, learning: Congenital, developmental, and traumatic
      (e.g., traumatic brain injury) conditions that result in cognitive or learning challenges.
  5. Types of impairment: permanent, temporary, situational
  6. Accessibility: The usability of a product, service, environment, or facility by people with the widest range of capabilities.
  7. Two way to address accessibility: accessible design, assistive tech.
  8. Accessible Design:
    1. Medical Model: personal attribute, any restriction or loakc of ability to perform an acticity 医学上的 生理上的
    2. Social Model: context dependent, people are disabled by barriers in society, not by their impairment or difference, context dependent.
      Ability + Context = disability
  9. Universal Design: The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
  10. UD Principle:
    1. Equitable use: The design is useful and marketable to people with diverse abilities.
    2. Flexibility in use: accommodates a wide range of individual preferences and abilities.
    3. Simple and Intuitive use: Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
    4. Perceptibale information: communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
    5. Tolerance for Error: minimizes hazards and the adverse consequences of accidental or unintended actions.
    6. Low Physical Effort: can be used efficiently and comfortably and with a minimum of fatigue.
    7. Size and Space for Approach and use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.
  11. UD Assistive Tech: specialized tools that close accessibility gaps
    Screen readers, screen magnification, text readers, braille for the web, alternative input devices, head/mouth wands/pointers, motion/eye tracking, single-switch, speech input, alternative & Augmentative communication
  12. The expert-review-based type of usability evaluation is best described as testing with users who represent the target population of the design solution. FAAAAALSE

Week6 Prototyping

  1. Building a draft or an early version of a product or system in order to explore, demonstrate, and test design ideas for a part or the entirety of the product or system.
  2. Methods
    1. Paper Prototyping: Mocking up design ideas by sketching pages/screens with design elements using design supplies(paper, pencil..) and simulating how the system respond to user. 在纸上画草稿演示
    2. Wireframes: Lo-fi prototypes of the makeup of a design in terms of its structural components. hand-drawn or digitally created. Most useful in the early-to-mid stages.
    3. Annotations: labels, explanations, and notes that provide further information on the goals, content, and functioning of the design elements illustrated on wireframes. Key in addressing the problem of interpretability of simplified designs for all stakeholders. 在 wireframes 上面的批注
    4. Interactive prototyping: creating realistic prototypes of the navigation or structural components. A series of screens linking each other. 就是做的作业，几个页面之间可以互相点击
    5. Native prototyping: Implementing and testing design ideas on the target platform.在专业平台上测试
  3. 3D model of prototyping:
    1. Each dimension can be represented at various levels of fidelity. Their integration makes a working prototype.
    2. Role: represents the functions that system serves in the user’s life
    3. Look and feel: Simulates the sensory experience of the user while using the system
    4. Implementation: Includes the technical capabilities that enable the system to perform its function. Low level of details
    5. Combined Integration: represents the complete user experience with the system as envisioned in the conceptual design
  4. Prototyping scope: consider the space of features and functioning as everything the system does
    1. Horizontal Prototype: provides a broad view of the entire system and focus on the user interaction rather than the functionality
    2. Vertical Prototype: Focus on s single feature/functionality and provides the full functioning of that feature.
  5. Prototyping Strategies:
    1. Throwaway prototyping: rapid prototyping to explore design ideas, demonastrate feasibility, communicate with stakeholders, test the ideas with users, eventually discarding. (most lo-fi and paper prototypes) ususally combined with sketching.
    2. Evolutionary prototyping: (breadboard prototyping) the design team incrementally builds prototypes of a design idea, tests the idea with users, and refines the prototype until it reaches the desired level of maturity. (tec, most pruducts with alpha, beta…) 不断测试 不断迭代
    3. Incremental prototyping: dividing system functionality into slices(vertical prototypes) based on design specifications and incrementally building each slice that is then integrated into the overall system. (large and complex project)
    4. Extreme prototyping: breaking down the development into three phases, 1-building a static prototype, 2-fully functional(interactive components that will simulate services), 3-finally implementing the services. rapid, perallel, resting, different component.
  6. Fidelity: level of detail in which a design is represented in the prototype. Low-fidelity prototyping(ideation phase, many ideas)/ High-fidelity prototyping.
    1. why? the more done the prototype, the narrower the feedback. as a principle, use no higher resolution than is necessary
    2. lower development cost, prevents designers from prematurely wedding to specific design ideas, enables exploring communicating and testing, helps designers indentify structural navigation and organizational issues.
    3. Limitation of Lo-fi: requires a facilitaor to drive prototype, offers limited ability to identify breakdowns in design, lacks sufficiently low-level specifications for development, provides limited sence of feasibility

Mobile Design

  1. mobile device capabilities: mobile divices have unique capabilities, mobile inpot primarily centers around the use of touch-sensitive screens:
    1. direct manipulation input: involves mouse or trackpad input that is mapped to the screen using a relative mapping, absolute, user directly interactes with screen elements
    2. multi-touch gestures: number of idiomatic gestures, dedicated to specific functions.
  2. Gestures:
    1. Tap: maps to a “click” on the desktop computer to select objects or to activate/toggle the state of a control
    2. Double-tap: zooming in/out content, selecting items in accessibility mode, or selecting text
    3. Long-press: opening contextual menus, previews of content, or enabling editing modes
    4. Drag/Swipe: used to scroll through content, move objects, or adjust controls. most commonly, drag involves a swipe and hold at the same time. can also move objects, or operate controls, switches, sliders and virtual control pads..
    5. Triple-swipe: mapped to specific OS-level activities, undo, redo
    6. Two-finger Pinch and Spread: used to shrink or expand visual elements, changing the scale of a map
    7. Three-finger Pinch and Spread: mapped to OS-level actions, such as copy, cut, paste
  3. Motion gestures: involve moving the mobile device in specific ways, shaking to enable silent mode, usually application specific or customizable at OS level.
  4. Microinteraction: contain product moments that revolve around a single use case.
    1. Trigger: events that initiate the microinteractions, can be manual/user-initiated(intential and explicit interaction, flipping a switch, pressing a button, speaking to the system) or automatic/system-initiated(certain condition are met, chime when a new text message arrives).
    2. Rules: determine what happens in the system when a microinteraction is triggered.
    3. Feedback: information that the user sees, hears, feels.(visual, aural, haptic)
    4. Loops & Modes: meta-rules that, depending on context, change microinteraction rules and feedback, loops determin the length of the micro interaction and whether it repeats, modes switch the functioning or operation(do not disturb)
  5. Mobile design patterns: used to vertically organize design elements, maximally utilize the vertical space in mobile devices
    1. Screen carousels: full-screen content panes that can be placed on a horizontal array to display different instances of the same kind of information
    2. Drawers: provide links for navigation or controls for the various settings of the application (类似于左上角点开)
    3. Lists & Grids: involve vertically stacking a large number of items, including text, controls, and thumbnails, and supporting navigation through vertical scrolling. Grids(more common): invlove a large continuous grid or multiple panes of grids that users can scroll through verically or horizontally.
    4. Carousels: content carousels provide a row of content items, including images or textual cards that users can navigate through by swiping left and right.
    5. Swimlanes: stacked content carousels that each show a row of items, enabling visual browsing through several different lists with minimal navigation.
    6. Card: little rectangles full of images and text that serve as entry points to more detailed information. Organized by lists and grids, but can be put together.
    7. Bars: are vertical or horizontal strips containing buttons or tabs dedicated to different components or tools. (Tab bars, tool bars, help navigation)
    8. Search, sorting, filtering
    9. Landing pages, guided tours
    10. Panes and panels: multi-pane structures and pop-up panels and tools are commonly use in tablets to provide secondary application windows
    11. AR/VR: overlay objects or inforamtion on images or video of the user real environment

VUI Experience Prototyping

  1. Conversational Interface Technologies: conversational interaction with VPAs by speech and other modalities
    1. (Components) Speech recognition, Spoken laguange understanding, dialog management, response generation, text-to-speech synthesis
    2. using Dialogflow by google
  2. Design principles for conversational interfaces:
    1. Gricean maxims: maxim of quality(truthful and accurate), maxim of quantity(just the right amount), maxim of relevance(appropriate and relevant information), maxim of manner(clear, cooperative communication)
    2. Multimodality: utilize multiple modalities, including visual inforamtion, speech, touch, and so on, in user experiences they afford. (most CI are this). take advantage of other modalities, a.g. visual information, vibrations.
    3. Interaction Paradigm: CI can follow different paradigms depending on the context of use the design of the application
      1. Command-and-control interfaces(always-on voice assistants): speech input is mapped to specific system functions called immediately
      2. Conversational interfaces(chatbots, task assistant, social robots): interaction with the system has the characteristics of human conversations, including turn taking, theoretically infinite depth, conversational markers SmallTalk.
      3. idiomatic design: double clicking to open a file
    4. turn-taking: speaking turns are the core, cooperative structure of conversations that involves one speaker at a time and an explicit exchange of tokens
      1. (Principles) one speaker at a time–transparency in who is speaking
      2. Turn exchanges–explicit signaling of who will speaking
      3. Interruption handling–very difficult with CIs
    5. Conversational Markers: speech cues that indicate the state or the direction of the conversation. Timelines, Acknowledgements, Positive feedback
    6. Confirmations: CIs are designed with explicit forms of confirmation to improve system usability and transparency. explicit(requireing the user to confirm) v.s. implicit(letting user know what was understood, “Ok, setting…) speech-based v.s. non-speech based
    7. Error handling: deviations from expected converstional flow due to technical mistakes, unexpected user behavior, environmental influences. Errors: no speech detected; speech detected, but nothing recognized; sth correctly, but system wrong; sth recognized incorrectly
  3. Heuristics for CI: general; conversational style; guiding, teacing, offering help; feedback and prompts; errors
  4. Experience Prototyping
    1. Why? hard to prototype, social interactions are driven by tacit knowledge
    2. Key: understanding existing user experiences and context; exploring and evaluating design ideas; communicating ideas to an audience
    3. What we prototype: system behavior, user behavior, interactions with context
    4. How: Define context; develop scenatios; Identify Design goals; set up environment; act out interaction(Body storming: creativity method that involves physically experincing); Develop Insight;

Usability Evaluation

  1. Why? the assessment of the usability of design solutions
  2. (Types) Testing-based methods: empirical, based on data, with users…
  3. Five-E model of usability:(different requirement need different weight of this five-E)
    1. Effective: create senarios with various levels of difficulty or ambiguity in study cases, how tasks accurately they are completed and how often they produce undetected errors
    2. Efficient: construct the test with enough repetitions of typical tasks to create a realistic work rhythm, use working software, collect timing data
    3. Engaging: use satisfaction interview questions or surveys as part of the evaluation
    4. Error tolerant: construct scearios to create sitations in which errors or other problems are likely, how user easily recover from this error
    5. Easy to learn: how many instructions, or recruit participants with different levels of experience or knowledge
  4. usability testing: observing users performing tasks with a design solution and asking them questions about their experience with the solution(user actions, behavior, verbal description)
  5. depending on when usability testing is used, can take two forms:
    1. Formative testing: done throughput the design process to diagnose and address design problems, small users, uses repeatedly, informs design improvements. $NumberOfProblemsFound=N(1-(1-L)^n)$, $N$: total number of usability problem, $n$: number of users
    2. Summative testing: done at the end of the design process to establish the baseline usability of the design solution. larger number of users, comparative testing, utilizes large number of metrics and statistics methods.
  6. usability testing contexts:
    1. Laboratory testing: in the lab set up to capture user behavior through screen recoding, software logging, eye tracking…allow the design team to observe and analyze the test session.
    2. Field testing: testing in the target setting of use for the design solution with the target profile of users. Guerilla testing: low-cost usability testing set up in a public space using passby. Remote testing: hi-fi prototype on early version of a deployed product over the internet(Moderated/Unmoderated)
  7. Designing Usability Test (key demensions)
    1. why: goals, specify desired outcomes capture how the design is expected to achieve; basis for comparison specifies whether the outcome is with respect to a baseline
    2. What: scope, task, scenarios, plot(Functionalities&Functioning), full functional final system, horizontal prototype(breadth of features), vertical prototype(depth of features); defining Questions: expectations of specific outcomes, tasks the sequence of actions that users are expected to perform to achieve goals, secnarios brief stories that provide users with context and goals in using the system
    3. How: Approach, metrics; whether the test is formative or summative; whether the test is for a single design or comparative; Qualitative data observations of user actions and behavior, comments, and answer to questions, an interview; Quantitative data: measurements of user performance, error, and ratings of the design, stopwatch timing data, USE questionnaire, number of clicks per task
    4. Who: User, subgroups, study team; participants who represent the target user population; team roles(Moderator, note-taker, observer, technicain) during usability testing
  8. Measurement:
    1. Performance metrics: task success(how effectively users are able to complete a given set of tasks), time on task(how much time is required to complete a task), errors(the mistakes made during a task), efficiency(the level of effort required to complete the task), learnbility(how performance changes over time)
    2. Self-report metrics: asking participants about their perceptions of and experience with a design solution using a set of questions, participants provide quatitative or qualitative responses. SUS ten-item questionnaire that focuses on usability, USE scale: includes four sub-scales for usefulness, ease of use, ease of learning, and satisfaction
    3. Issue-based Metrics: problems that users encounter in using a system. How identify? user task actions, user behavior. Severity ratings: assessments of issues that help design team prioritize design efforts, based on imapct on user experience, predicted frequency of occurrence, impact on the business goals, technical/implememtation costs. Low, Medium, High

Heuristic Evaluation

  1. (Types) Expert-review-based methods: usability inspection, review-based evaluation by experts who follow well-established protocols to inspect the usability of design solutions.
  2. Method: heuristic evaluation, cognitive walkthrough, …
  3. Heuristic evaluation: invloves having a small set of avaluators examine the interface and judge its compliance with recognized usability principles.
    1. Visibility of system status: should always keep users informed about what is going on, through appropriate feedback within reasonable time. (email clients making a swoosh sound when sending email)
    2. Match between system and the real world: the system should speak users’ language with words, phrases and concepts familiar to the user, rather than system-oriented terms. Following read-world conventions, making information appear in a natural and logical order.(比如 apple 钱包)
    3. User control and freedom: a clearly marked “emergency exit” to leave the unwanted state without having go through an extended idalogue. UNDO and REDO,比如说不能在错误发生的时候只提供一个选项
    4. Consistency and standards: user should not have to wonder whether different words, situations or actions mean the same thing. (component libraries to achieve consistency within a app)
    5. Error prevention: careful design which prevents a problem from occurring in the first palce. Either elimniate error-prone conditons or check fot hem an present user with a confirmation option before they commit to the action. (autocorrect, real-time feedback)
    6. Recognition rather than recall: minimize user’s memory load by making objects, actions and options visible. The user should not have to remember information from one part of the dislogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
    7. Flexibility and efficiency of use: allow users to tailer frequenct actions. 快捷键，快捷方式
    8. Aesthetic and minimalist design: dialogues should not contain information which is irrelevant or rarely needed. 精简设计
    9. Help users recognize, diagnose, and recover from errors: error messages should be expressed in plain laguage, precisely indicate the problem, and constructively suggest a solution. 错误的时候提示改正
    10. Help and documentation: provide help and documentation. Such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not to be too large.
      Ctrl+z 跨平台使用 包括 3， 4， 7
  4. Process: 1. identify 3-5 usability experts with domain knowledge, determine the heuristics to use 2. each inspector individually reviews as feature for each heuristic; 3. Inspectors merge and prioritize their findings, brainstorm solutions, report conslusions
  5. Reporting: a document that highlights the top three to five usability problems and sugeested solutions. include: 1. prototype screen, page, location of the problem 2. Name of heutistic 3. reason for reporting as negative or positive 4. scope of problem 5. severity of problem 6. Justification of severity rating(0-4) 7. suggestions to fix 8. possible trade-offs
  6. Prons: inexpensive and intuitive; can be used frequently and any time during the design process; effective at early stages of design; serves as a training tool for designers
  7. Cons: does not capture all aspects of usability; does not provide a comprehensive understanding of the interaction; might discourage user testing; may result in false positive
  8. Cognitive Walkthrough: expert review method where a usability specialist assesses the learnability and discoverability of a design be posing and answering s set of questions.
    1. what need?: a prototype, a suer profile, set of tasks, sequences of actions
    2. Question 1: will the user try and achieve the right outcome? Question 2: Will the user notice that the correct action is available to them? Question 3: Will the user associate the correct action with the outcome they expect to achieve? Question 4: If the correct actuon is performed’ will the user see that progress is being made towards their intended outcome?
    3. Pros: powerful for walk-up-and-use interfaces, new concepts/forms of interaction, systems designed for various user profiles; can be performed frequently and at any stage of the design process
    4. Cons: focuses only on discoverability/learnability, best when used with usability testing

think-aloud protocol–User-based testing
sibling-to-sibling component communication can not be achieved by directly passing props.
a parent can have zero-to-many child components.
package.json需要加入 git, must committed to version control

Courses
#course notes
COMP 571
https://harukimoriarty.github.io/2023/09/30/COMP571/
Author
Zhenghong Yu
Posted on
September 30, 2023
Licensed under