Interaction Challenge

You can choose between one of two different challenge problems this week:

1: Implement bubble cursor from the original academic paper (see page 283 on the PDF). I've provided a scatterplot below (using the Gapminder dataset) for which you should provide bubble cursor mouseover interaction. See the lecture video/slides from today for an example of how it should behave. At the very least, users should be able to use a bubble cursor to highlight points, as indicated by a black stroke. Ideally, you also print a label for the point.

2: Make three useless widgets. Take a normal HTML <input> element and make it perform counter to user expectations. The expectations that users have about how interactive elements work are often abused in dark patterns or as the result of plain bad design. We won't be so malicious for this challenge, but we will pretend to be incompetent designers. Make 3 different <input> elements that do something that runs counter to expectations or prevents them from functioning as expected. I've included some examples below. For each element that you make, please include a <p> tag explaining what you made and why it runs counter to user expectations or does not function as expected. Widgets that do not work at all will not be awarded credit.

Submit your answer to CMS in the form of a .zip file containing your own HTML and a copy of the dataset. Submissions will be graded for completeness rather than quality, and the "best" ones will be highlighted in class. You must turn in your final version before 11:59PM on Monday, April 27 in order to receive credit. You do not need to do both challenges, and you will not receive more extra credit if you do so.

Chart to use for Bubble Cursor:

Some example "malicious" widgets:


Please select 60 using this slider. You have currently selected 50

Please uncheck the hobbies that you don't do