Loading [MathJax]/jax/output/CommonHTML/jax.js
+ - 0:00:00
Notes for current slide
Notes for next slide

CSE 340 Lab 7 Spring 2021

Week 7: UX theory review, Menus

Slide 1 of 20

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)

Slide 2 of 20

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
Slide 3 of 20

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

Slide 4 of 20

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

  • MT=a+blog2(DistSize+1)
Slide 5 of 20

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
Slide 6 of 20

"Gestalt Principles" in Design Theory

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 3 by 3 grid of circles

Slide 7 of 20

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 Two user interface windows lying on top of each other

Slide 8 of 20

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/

Slide 9 of 20

More UX Laws (optional to look at)

Slide 10 of 20

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!
Slide 11 of 20

AS5 Menus

  • Please read over the spec
  • Make your own consent form (we give you a template at the top of the page)
Slide 12 of 20

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
Slide 13 of 20

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
Slide 14 of 20

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
Slide 15 of 20

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.
Slide 16 of 20

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.
Slide 17 of 20

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.
Slide 18 of 20

Any last minute questions from Color Picker?

  • For your convenience: quick link to lecture slides on implementing state machines in AS4 or AS5
Slide 19 of 20

Work time on Menus

MenuExperimentViewonTouchEvent()startSelection()endSelection()updateModel()onDraw()AbstractMenuExperimentViewAbstractMainActivityExperimentActivityTestActivityPieMenuViewNormalMenuViewCustomMenuViewSyntax error in graphmermaid version 8.8.2
Slide 20 of 20

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)

Slide 2 of 20
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
s Start & Stop the presentation timer
t Reset the presentation timer
?, h Toggle this help
Esc Back to slideshow