Multi select from a long list
Ahoy! We've built an emotion tracking tool based on the emotion wheel; a tool that helps people articulate how they're feeling by identifying their core emotion and finding the emotions that directly relate to it. Here's a pic of the emotion wheel:
The goal of this feature was to
1 - allow users to find words that would help them articulate how they feel and
2 - track the intensity of these different emotions with a short manageable list of core emotions
The first version lets users identify which of the core 6 emotions they're feeling, rate how intently they're feeling and then identify the words on the outside of the wheel that helps them articulate how they're feeling. It looks like this:
CURRENT DESIGN
PROBLEM
It's been pretty effective but we're realizing that users often don't first identify with a core emotion (e.g. sad) but rather with the secondary emotion (e.g. guilty). So we want to give the user the ability to identify the secondary emotions FIRST (e.g. disgusted and startled) and then rate how intently they're feeling that emotion as part of the core emotion (e.g. sad)
UPDATED CONCEPT - Flip the order
WHAT IS MAKING THIS TOUGH
The biggest issue with flipping the order of these screens is that users would be presented with a very big list of emotions to choose from up front. It is important that they can find the words that best describe their emotions and I'd like them to be able to do this with as little drilling in/drilling out as possible. Options I've considered to help this out: - breaking the lists into groups (e.g. color) to make them easier to browse - shortening the list initially and using 'more' + 'less' buttons - horizontal scrolling swim lanes of words
I'd love help with other approaches to making this long list of emotions easier to browse and select or other approaches to this problem.
Cheers and thanks for reading my post!