Interactive Widget Concepts - Research & Development

Designing new widgets was an initiative targeted to add a variety of interaction for the TrueChoice platform, a technology that specializes in gathering user preferences. Designs chosen for further development had to be intuitive, meet data collection requirements, and be usable for a diverse range of clients.

Our current challenge

The TrueChoice platform uses sliders as the main source of data collection. This widget is intuitive for users and beneficial to our data collection because of the many data points it can collect. However, using the same widget in an application runs the risk of survey fatigue and creates a monotonous user experience.

The objective of this initiative is to add more interaction variance within our application. Finding a harmony between constant engagement and collecting meaningful data will keep our users and our clients happy.

Research and Development Outline

  • Map out requirements - The interactive widget needs to…
    • collect 101 data points
    • work across all device resolutions
    • be instantly intuitive for the user
    • be redesigned for a variety of different client brand guidelines
  • Research what other widgets were ‘in the wild’ and what sort of purpose they served for the kinds of applications they were included in
  • Conceptualize, sketch and create wireframes in multiple resolutions
  • Create colorful mockup examples using real branding guidelines
  • Design animations conveying how the widget would function and which interactions were expected
  • Research implications: SVGs vs sprite sheet
  • Program playable proof of concepts to get a feel for the widget
  • Integrate the widget into the platform

Final Concepts

Widget 1: Circle Slider

The circle slider widget keeps the familiarity of a linear slider while adding a more interesting user interaction. The number value displayed at the top is always available to the user. The value was chosen to be placed here so a finger wouldn’t obstruct the user’s scaling choice.

Widget 2: Knob

The knob widget is a familiar interaction for a user because it bears resemblance to a real-life interaction. Here it could be used to determine one selection or compare a range of items.

Widget 3: Dial

The dial widget substitutes a thumb (or handle) for a needle the user can use to point to their desired preference. This widget took inspiration from a car’s dashboard.