...
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
Figures
| | | | |
Figure 1: Initial event creation | Figure 2: Scheduling event | Figure 3: Inviting people | Figure 4: RSVP to an event | Figure 5: Confirmation of RSVP |
*Walkthrough*
In figure 1, Jack visits MashCal and is presented with two options. Because he
is he is trying to schedule something new, he clicks "Create new event." The next
screen next screen Jack sees asks him to pick the time horizon in which his event needs to
occurto occur. Because he wants to have lunch with Kate and Bill this week, he chooses
chooses "This Week."
In figure 2, Jack has to select the times during the week that his event can
take 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 Sunday is the first day of the week). Jack can scroll up and down to view more times
during times during a particular day and swipe to the left or right to reveal more days.
Pressing 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
horizontime horizon, he is presented with the screen in figure 3. This screen allows Jack
to Jack to enter in the name of the event and choose who to invite. The "what are you
doingyou doing" field is a text box. "Who is invited" is an autocomplete field for
a 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 phone informing her that Jack has invited her to lunch (shown in figure 4). Once she
clicks she clicks respond (the only way to dismiss the dialog), she is presented with
a with a list of times that Jack has selected. She can select any number of them via
checkboxesvia checkboxes. Once she is done selecting times that work for her, she RSVPs to
lunchto lunch.
Finally, in figure 5, Jack receives a push notification informing him that Kate
has Kate has RSVPed.
*Analysis*
Learnability: All of the decisions (actions) Jack and Kate have to make are
presented are presented as buttons on the page. Buttons offer the affordance of needing to be
pressed be pressed to submit information.
In figure 2, our interface takes advantage of multitouch touchscreens to allow
twoallow two-fingered scrolling with a day and swiping between pages; however, this behavior
is behavior is not very discoverable. To aid learnability, there are arrows that look and
behave and behave like the arrows on a scrollbar. These arrows grey out when the user can't
scroll t scroll anymore.
In figure 3, the autocomplete contacts field helps Jack know who he has the
capability the capability of inviting.In In figure 4, the checkboxes Kate sees afford selection of multiple items,
indicating 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 by starting Jack out on Monday instead of Sunday. It is unlikely that a user would
want 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 only type a prefix of his contacts' names.
Across all panels, this design tries to keep the user's fingers in the middle
of middle of the screen as much as possible (buttons in figure 1, time selection in
figure in figure 2 and figure 4). Since the mobiule device is smaller and the middle of
the of the screen is easiest to reach, this helps with locality of the user's pointing
devicepointing device, their fingers.
This design also doesn't rely on pinch-to-zoom like gestures that are easy to
overshootto overshoot. Clicking on a range to (de)select it is qucicker and less error
proneerror prone.
Safety: The interface in figure 1 and 2 offers no obvious way of backing up
through up through the various panels; however by swiping to the left, Jack can back up
through up through previous screens to correct a wrong choice.
In figure 3, the autocomplete field helps Jack by autofilling in the right
contactright contact's email. The bubbles around autocompleted contacts allow easy deletion
of 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 be externally consistent with other applications and conventions on iOS and
Android and Android opertating systems.