# DHCS - Bakeoff 1

1) Initial Ideas – What ideas did you brainstorm? Quick descriptions and sketches ok here. Rapid fire is fine because you probably had many. You can make this by filming a sheet of paper, or bullets in powerpoint/keynote.
* individually came up with ideas and then came together to discuss
* some issues we immediately noticed
* hard to tell exactly where the cursor is bc it's a circle
3) 1st Prototypes – What ideas did you pick to make into prototypes? Show me any paper or working prototypes of these ideas.
* took the ideas discussed from our first meeting and each implemented the ideas we each brought up that we wanted to test
* see Round 1
5) 1st Testing – How did you test your first prototypes? What were the times?
* each person tested every 1st prototype with numRepeats = 3
* recorded the results in a google sheet (show the times)
* due to the pandemic, we were not able to get others to test our prototypes; ideally, we would have others test our 1st prototypes to record performance (since we may be biased having created these 1st prototypes ourselves and may have gotten good at using our own designs)
7) 1st Refinement – How did you morph and narrow your ideas?
* decided to get rid of features that were not improving our performance or were encompassed by another idea that made the design simpler (e.g. removing cursorImage (could just use cursorShape), remove numpad but keep highlighting, remove cursorColor, merge spacebar-expandedButton-pathFinder) <-- merging can go in 2nd prototypes section
9) 2nd Prototypes – What ideas did you iterate on or combine? Show and describe at least one second round prototype.
* came up with some new ideas as a result of thinking about the bottlenecks in testing
* when numTrials > 1 if the same square was the target consecutively, took a bit of time to notice the next target --> so flash the target when it appears
* figuring out where to go next --> indicate upcoming target
* iterating on some ideas
* snapCursor was finnicky, so wanted to improve it
* rowNum - highlight the region the cursor was in for both row and column
* combining ideas - ideas that were solid enough from 1st round of testing
* based on testing
* e.g. spacebar doesn't hurt to have
9) 2nd Testing - How did you test your second prototype(s) and what was the performance? Any other issues? Be sure to compare times against the scaffold design.
10) Refinement & Final Prototype - What final ideas did you end up using? Give me a tour of your final design.
* changed flash color, and used quicker flash
* ideas we merged: **cursorCross**, **highlight**, **upcomingColor**, and **flashTarget**
* got rid of snapCursor
* did some final testing on non-expert users to see if there was an improvement from baseline to final

### Final Result
* Ideas to merge:
* **cursorCross**
* **highlight**
* **upcomingColor**
* **flashTarget** (change to orange flash)
* Geting rid of **snapCursor** and **upcomingPath**

### Round 2 / Results
* Ideas to merge for future iterations:
* **spacebar**
* **expandedButton**
* **pathfinder**
* Ideas to refine for future iterations:
* *rowNum* -> **highlight**: Take the row highlighting and apply with columns as well, change color to dark gray, remove numpad functionality
* *cursorShape* -> **cursorCross**: Use thin cross instead of square
* **snapCursor**: Use global variable to store snapped location
* New ideas to test:
* **noCursor**: Get rid of computer cursor
* Distinguish the *upcoming* target square somehow
* **upcomingColor**: Change color?
* **upcomingPath**: Draw second (darker) path?
* **flashTarget**: Flash the target when it appears

### Round 1 / Results
* **cursorImage** - Changes the cursor to a specified image
* Pros: could be any image
* Cons: unnecessary to use an image
* Probably not needed? Not moving on
* **cursorShape** - Changes the cursor to a different shape e.g. square, cross
* Pros: cross is easier than the cursor with a circle hovering over it
* Cons: ???
* Probably could combine the cross shape for the cursor with other ideas; moving on
* **rowNum** - Highlights the row the cursor is in and allows each square to be selected using 1-4 or asdf (in addition to clicking)
* Pros: makes it difficult to be in the wrong row
* Cons: more cognitive load for knowing which key to press
* **spacebar** - Allows for the target square to be selected using the spacebar in addition to clicking it with a mouse
* Pros: easier to press space than to click
* Cons: ???
* **snapCursor** - Snaps cursor to nearest square
* Pros: Less moving of cursor
* Cons: the snapping is finnicky and acts unexpected
* Moving on? If so, experiment with snapping effect (use global variable to store snapped location)
* **cursorColor** - Changes the cursor color based on its location (i.e. default gray, green over target button, red over other buttons)
* Pros: Made it easier to know when you were over the target
* Cons: Not very high contrast so hard to see the colors
* Moving on? if so, change colors
* **expandedButton** - Expands the square the user is hovering over (essentially removes padding)
* Pros: Made it much easier to click on a square
* Cons: Over time became instinct to click near the padding borders
* Moving on, maybe add an animation
* **pathfinder** - Draws a persistent line to the target square from the user's mouse
* Pros: Easier to find path, gave immediate sense of direction
* Cons: More visual clutter
* Moving on, maybe add extra line for one ahead of target

### Initial Brainstorm
* Change cursor to square/cross instead of circle
* Expand the clickable area when hovering near a square
* Snap to square closest to you
* Create a path (line) to the next square
* Stroke starts smaller and gets bigger to indicate motion
* Use mouse to hover over rows, use keyboard (1-4) to select column/click
* Use space to click in addition to left-click
* Change cursor color when correctly hovering over any square
* Potentially indicate if it's the target square
* e.g. gray cursor, red when over wrong square, green over right square