# CSE 340 Lab 7 Spring 2021 ## Week 7: UX theory review, Menus .title-slide-logo[  ] --- # Timeline - Color picker due tonight at 10:00pm! - As usual: Code and Reflection locks this Saturday @10pm - Menus Part 1-4 due: Next Thursday, May 20th @ 10:00pm - Lock: Saturday, May 22 @ 10:00pm (if you are using late days) - Remember to turn in the assignment once for 1-4 (the code) and then for parts 5-6 (testing and report) --- # Section 7 Objectives - Review of lecture content: Interaction Theory - Design Laws (optional) - Menus assignment - TrialListener - Thank you for filling out the mid-quarter section feedback form! - Answers to some anonymous questions - Q&A --- # Lecture Content Review: Interaction Theory **Fitts Law explains how the… (Please choose one)** - A: Time it takes for user to make a decision based on # of choices. - B: Time the user spends moving to the target depends on the ratio of distance to and width of target. - C: Non-dominant hand performs imprecise movements. - D: Time the user spends moving a mouse cursor through a bounded tunnel (menu/scroll bar/slider) depends on the tunnel's size. - E: Time spent exercising leads you to becoming Fitts --- # Lecture Content Review: Interaction Theory **Fitts Law explains how the… (Please choose one)** - **B: Time the user spends moving to the target depends on the ratio of distance to and width of target.** - Longer duration (time) = Longer distance + Smaller target size - .jax[$$MT = a + b*log_2({Dist \over Size} + 1)$$] --- # The other answers - A: Time it takes for user to make a decision based on # of choices. - Hick's Law - C: Non-dominant hand performs imprecise movements. - Guiard's (GEE - YARD) model of bimanual control - D: Time the user spends moving a mouse cursor through a bounded tunnel (menu/scroll bar/slider) depends on the tunnel's size. - Steering Law --- # ["Gestalt Principles" in Design Theory](https://blog.prototypr.io/gestalt-principles-applied-to-ux-design-af47bcf4bd28) German for "form/shape": Gestalt Principles describe **how human cognition influences the way designs are perceived** - **Proximity**: objects close in proximity assumed to be part of the same entity - **Similarity**: elements can be grouped together via color/shape/size/font  --- # Gestalt continued - **Continuation**: eye is naturally guided from 1 object to another - **Closure**: people see shapes/letters as part of a whole even when they look incomplete - ex: a loading bar with a not completely filled status - **Figure/Ground**: human ability to visually separate elements on different planes of focus  --- # Miller's Law - Humans can only memorize so much in short term memory! - "Chunking" - 5 ~ 9 = average # of perceptual "chunks" humans can hold in working memory - Thus: always organize information on an interface in <= 9 categories - Source: https://lawsofux.com/laws/millers-law/ --- # More UX Laws (optional to look at) - https://lawsofux.com/ --- # Exercise - Design a custom menu and explain why it is good for Fitts Law or why it's bad! - Everyone can see each other's design--be creative with your menus! --- # AS5 Menus - Please read over the [spec](/courses/cse340/21sp/assignments/menus.html) - Make your own consent form (we give you a template at the top of the page) --- # TrialListener in Menus - (Do NOT edit this file, just look) **AbstractMenuExperimentView.java** - listener methods - keeps track of a listener (mTrialListener) - **ExperimentActivity** - Register a TrialListener with the menu for the current trial (mMenuView) in showMenuForTrial() - **MenuExperimentView** - call [trial listener].onTrialCompleted([get your trial]) in endTrialRecording --- # Feedback Survey: Answering some anon questions - "We need more code examples, and we don't know where to start!" - The TODOs are hints provided in addition to the spec and you don't have to code beyond these - Come to OH if you are stuck on syntax issues! - TAs are working on adding more hints to the Menus code --- # Feedback Survey - **How and where do we declare listeners**? - An event listener is an interface in the View class containing a callback method. Simply put, the method is called when a user interaction is triggered with the specified view. - The code and location of event listeners will differ on different projects --- # Feedback Survey - **How and where do we declare listeners**? - For Colorpicker, notice how the listener is already coded for you in MainActivity! You just have to register it by adding the listener to the view in the pseudocode form: viewname.addmethodforlistener(updatemethod(color)) - After a listener is registered, inside the class of each view's onTouchEvent(), you must invoke the listeners so that the changes to the view are triggered after a user has interacted with the view. --- # Feedback Survey Clarification on Bundles - Bundles are another method of storing data within your application. They are different from variables and storage files because they are handled at the Activity level. They primarily function as a method to store information that can be passed between activities. For this course, we primarily use Bundles as a method for storing and restoring some of the data that is present when an activity is stopped. --- # Feedback Survey Reflection question about state machine for myColorPickerView: - You can have the same state machine as the one we have on the spec, but explain WHY it works that way. --- # Any last minute questions from Color Picker? - For your convenience: quick link to lecture [slides](https://tinyurl.com/rsjc97a0) on implementing state machines in AS4 or AS5 --- # Work time on Menus <div class="mermaid"> classDiagram class MenuExperimentView { onTouchEvent() startSelection() endSelection() updateModel() onDraw() } AbstractMenuExperimentView <|-- MenuExperimentView AbstractMainActivity <|-- ExperimentActivity AbstractMainActivity <|-- TestActivity MenuExperimentView <|-- PieMenuView MenuExperimentView <|-- NormalMenuView MenuExperimentView <|-- CustomMenuView </div>
