Supporting Novice and Expert Remixing

One of the really common struggles in designing interfaces is the tradeoffs between making complex things approachable for novice users, while not constraining expert users too much. When we first started to explore remixing, our focus was entirely on making it possible at all and so we elected to go with a wizard-style interface that guided users through the steps. Assuming people do follow the wizard, this can get people through, but it is definitely highly constrained. People who have done it a few times move quickly to being constrained by the interface rather than supported by it. We ourselves often select the beginning and the end and then click through the wizard to be able to export. Not ideal.

So, one of the things I've been doing in spare moments is starting to rethink how to do this. Last semester Reilly built a top bar at the top of the Looking Glass interface that shows the four steps in remixing: selecting the start, the end, previewing, and then exporting. The process bar idea is one we've been toying with for a while and it seems to have the potential to show that support is available without requiring you to use it. Although we knew that we wanted to be able to present more detailed instructions in context, at the time there were technical issues that prevented this: being able to highlight elements in the interface and actually intelligently track which parts of the process had been completed. We've recently addressed those, opening the ability to rethink how the remix process works in a way that better supports novices and experts.

The high level design I've been playing with keeps the same process bar at the top of the interface. Users can click a button in the process bar to get more detailed instructions for each of the steps. These are presented in a panel on the right side of the interface. Users can attempt to complete the steps themselves, but stencil highlights are available through "Show Me" buttons to give more feedback. This sounds straightforward enough, but like everything once you get into the details there are many potential approaches.

One of the things I tried early was to present a list of instructions. For each step, you can't do the step correctly without interacting with the component needed for that step. To select a time, you have to move the time slider, for example. So, we put a little check mark next to the move the time slider instruction when the user interacted with the right component. While the system can know that you've dragged the time slider, it doesn't know if you've selected the time you intended. So, the checkmark was problematic. Kids generally have years of school training in check == correct, so where the system was really trying to communicate more like "you're making progress", it was in fact communicating "you're done, move on." Problem.

So, back to the drawing board. While waiting for a meeting to start, I sketched out a flow based on instructions and questions.

This gets unruly fast. And, it doesn't really allow the instructions to serve as a quick reminder. You'd either know how to do it yourself or you'd have to really follow the wizard. There's no half way.

So, now I'm toying with dividing the selecting a start and end into three basic steps:

1) recording actions

2) selecting a time

3) marking a remix start/end

I'm giving the basic process and using tips to present other things a user can try if they are struggling. The instructions say what to do, but not how. And there's a show me button that brings up a stencil with more detailed instructions if the goal isn't enough.

This is far from complete yet. But the side panel presents the instructions. The top process bar needs to be changed to look more like the original idea.

And then the show me buttons point out the individual components. So, if a user wasn't sure how to replay a statement, this is a stencil they might see.