I’ve been having a lot of fun building interactive prototypes for Obvious, my activity journal app. Two of my prototypes are guided walkthroughs of the Timer and Journal sections. The third is a heavily-wired simulation of cycling through a set of work sessions and breaks using a working (but truncated) Pomodoro timer.
Timer & Today list
(click image to open prototype)
The first prototype is a walkthrough of how the Timer screen works. It shows how to start, pause, reset, and skip timers. It also shows the process of adding entries to the journal and viewing them in the Today list.
My next prototype demonstrates how the journal is organized. It shows how to view your full history, view a single journal, and then entries for a particular tag. It then shows the various ways you can edit entries.
This prototype is designed to show how the timer works by cycling through a full set of work sessions and breaks. The controls actually work, allowing you to progress forward and backward exactly like the app. The timer also counts down seconds but is truncated to save time. When the timer completes, the entry panel pops up, but you can’t add an entry.
Let’s take a look at the path structure of the three prototypes.
A good prototype will require you to reuse screens many times over as you walk through steps. It’s possible to make the prototype act and behave like a regular app, as long as you're adding or removing content or changing states.
In my case, I needed persistent state changes to demonstrate functionality. To reduce complexity, I used tooltips to guide the viewer through specific user flows. I separated tooltips transitions from app transitions to make it easier to understand when the app was responding to events.
the main complexity of this demo was simulating a timer that was counting down seconds for every interval in the set, including 4 work sessions, 3 short breaks, and 1 long break. Each second was a new screen with just slightly different information, so it couldn't be reused. I turned to variants to create a reusable circle timer with settings that managed the countdown.
To create my Timer prototype, I simply duplicated screens as I created each step. Unfortunately, I wasn’t using components at the time so when I had to go back and make changes, I had to update each of those screens one at a time. I found that even for simple apps and wireframes, it's a good idea to convert to components prior to building prototypes.
Here are a couple of examples.
Circle Timer variants
The Circle Timer component is actually made up of two variants, one for session bullets and the other for clock state. Separating these variants allowed me to build fewer layouts (15 + 33, not 15 x 33).
The bullets had states for incomplete, complete, and in-progress sessions. I only needed a set of 4 for the prototype, but the variant made it easy to design for longer sets of 6 & 10 sessions.
The clocks were designed for the three main states: work, short break, and long break as well as standby and finished. The variants allowed me to show the correct label, time, and a progress ring sized relative to the duration of the event.
These were the settings used for the two circle timer components. Bullets had settings for the number of bullets, current session number, and the state of that session. The Info ring had two settings: session type and the elapsed time to be displayed.
Entry Panel Body
I created the Entry Panel Body component for the prototype and then ended up going back and incorporating it into my wireframe comps. I believe it also made smart animations smoother since there was less chance of id conflicts.
On the left, you can see the base components I used to create the variants (the calendar component came from my wireframe kit). The main body is a vertical auto-layout and I show/hide button components as needed. I also ended up using a spacer rectangle in a few place to get the spacing I wanted, and expect I'll need to do the same when I start coding this layout.
The settings for this variant ended up being pretty minimal. Type allowed me to set which kind of modal I was using, and Edit time selected which calendar editor was visible (or none at all). The terminology is pretty weak but since I'll be the only one dealing with these wireframes, who cares?