...
Other - We try to maintain consistency between pages by using the same header and gestures throughout pages. We also try to condense all tasks into their own unique page in order to not confuse users or redirect them to multiple pages for one task.
Design 3
*Storyboard*
- Figure 1:
- Figure 2:
- Figure 3:
- Figure 4:
- Figure 5:
*Walkthrough*
In figure 1, Jack visits MashCal and is presented with two options. Because he
is trying to schedule something new, he clicks "Create new event." The next
screen Jack sees asks him to pick the time horizon in which his event needs to
occur. Because he wants to have lunch with Kate and Bill this week, he chooses
"This Week."
In figure 2, Jack has to select the times during the week that his event can
take place during. The interface presents times in 1-hour blocks. Because today
is Monday, the first day he sees on this screen is Monday (even though Sunday
is the first day of the week). Jack can scroll up and down to view more times
during a particular day and swipe to the left or right to reveal more days.
Pressing a time range selects it, as he has done for 12pm and 1pm on Monday.
Once Jack is done setting his availability for all the days in his time
horizon, he is presented with the screen in figure 3. This screen allows Jack
to enter in the name of the event and choose who to invite. The "what are you
doing" field is a text box. "Who is invited" is an autocomplete field for
a list of people that hooks into the address book on Jack's phone. Once Jack
has selected Bill and Kate, he creates the event.
After Jack creates the event, Kate receives a push notification on her phone
informing her that Jack has invited her to lunch (shown in figure 4). Once she
clicks respond (the only way to dismiss the dialog), she is presented with
a list of times that Jack has selected. She can select any number of them via
checkboxes. Once she is done selecting times that work for her, she RSVPs to
lunch.
Finally, in figure 5, Jack receives a push notification informing him that Kate
has RSVPed.
*Analysis*
Learnability: All of the decisions (actions) Jack and Kate have to make are
presented as buttons on the page. Buttons offer the affordance of needing to be
pressed to submit information.
In figure 2, our interface takes advantage of multitouch touchscreens to allow
two-fingered scrolling with a day and swiping between pages; however, this behavior
is not very discoverable. To aid learnability, there are arrows that look and
behave like the arrows on a scrollbar. These arrows grey out when the user can't
scroll anymore.
In figure 3, the autocomplete contacts field helps Jack know who he has the
capability of inviting.
In figure 4, the checkboxes Kate sees afford selection of multiple items,
indicating that she may choose all times that are good for her.
Efficiency: The time selection screen in figure 2 has smart defaults by
starting Jack out on Monday instead of Sunday. It is unlikely that a user would
want to schedule an event in the past, so MashCal doesn't allow it.
In figure 3, the autocomplete field helps efficiency by allowing Jack to only
type a prefix of his contacts' names.
Across all panels, this design tries to keep the user's fingers in the middle
of the screen as much as possible (buttons in figure 1, time selection in
figure 2 and figure 4). Since the mobiule device is smaller and the middle of
the screen is easiest to reach, this helps with locality of the user's pointing
device, their fingers.
This design also doesn't rely on pinch-to-zoom like gestures that are easy to
overshoot. Clicking on a range to (de)select it is qucicker and less error
prone.
Safety: The interface in figure 1 and 2 offers no obvious way of backing up
through the various panels; however by swiping to the left, Jack can back up
through previous screens to correct a wrong choice.
In figure 3, the autocomplete field helps Jack by autofilling in the right
contact's email. The bubbles around autocompleted contacts allow easy deletion
of any contact (not just the last one entered). This makes error recovery easy.
Other: The touch controls (swiping, scrolling, selection) are meant to be
externally consistent with other applications and conventions on iOS and
Android opertating systems.