...
It's Monday morning and Jack just realized that he has been meaning to have lunch with Kate and Bill for a while and they haven't been able to meet up. Jack and Bill work on the same project team, so their availabilities are similar, but because Bill doesn't respond to email frequently (despite the fact that he always has his smartphone with him), Jack has had trouble trying to schedule lunch the day of with Bill. Jack has also had trouble scheduling a lunch with Kate because he doesn't know her availability. Jack would like to have lunch with Kate and Bill sometime this week, the sooner, the better. Jack is able to take a one hour lunch between noon and 2pm on every day except Thursday when he has a conference call with the San Francisco office that lasts until 1:30pm.
Kate has been out of the office the past few weeks and has fallen out of sync with Jack. She has several meetings over the week, but none during lunchtime. She is excited to catch up with Jack and Bill.
In this scenario, Jack needs to create an event and invite Kate and Bill. Kate and Bill need to respond to the event.
...
The following image shows the overall walkthrough of the design.
|
...
Figure 1 |
Figures
| | | |
Figure 2 | Figure 3 | Figure 4 | Figure 5 |
Walkthrough:
When Jack opens his mashcal to create and event he is greeted with the homescreen shown on the Figure 2. It shows him to the events he has created day by day. He can transition to the new event creation window (also on Figure 2) on from the homescreen. He can name the event and choose its type as well as invite others and pick the possible dates for the event. Upon pressing on "Pick possible dates" button he will come to Pick Dates window shown on Figure 3. The structure of the picking dates window is similar to theiphone default alarm clock interface. The Month Week and Day can be set with scrollable selectors that move up and down with a flick (Similar to alarm choosing interface). The time slots can be marked available and unavailable and after selection clicking done button brings Jack back to the event creation window. He can then select the invitees from his contact list (Shown on Figure 4). This interface is similar to iphone contact interface. He can add import contacts as well as search for them in the autocomplete search input box. He selects Bill from his contact list, however he did not previously have Kate's contact and he adds her as a new contact. By pressing the Done button he sends invitation to Kate and Bill. When Kate and Bill receive invitations, push notification will appear on their phone as shown on figure 5. They can just simply reply "I can not go" or they can choose the dates appropriate for them via the Pick Dates interface and send the reply back.
(Figure 2) 
(Figure 3) 
(Figure 4) 
( Figure 5)
Analysis:
Learnability
Good: Couple of affordances are used in the interface to improve usability. Traditional affordances like arrows and buttons are natural to the user. Their behavior is consistent with way people think about them. The "Percentage of People RSVP-d " icon communicates whether the event was for a group or just for Jack by showing many human figures or just one. That icon is filled up according to how many people reply to the invitations. The thumb icon on the Pick Date window on Figure 3 tells the user that the time slot can be selected with a touch; this communicates the model of the interface to the user effectively. Another thing that helps with the usability is that everything that user can interact with is labeled accordingly. Therefore, a user will not be wondering which part of the interface corresponds to what task.
...
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 opertating systemsand Android opertating systems.
Alternative Design directions
Inviting people: Aside from using an autocomplete field, it is possible to instead present a user with a list of all of their contacts as a combobox that allows multiple selection. We dislike this widget because it is not efficient for the case where users know whom to invite already. Some contacts lists my take 10s of screens on a mobile phone. It also would force the user into our mental model of presenting all contacts alphabetically where they may be thinking of them in other ways. Because of these drawbacks, we did not incorporate the combobox into our designs.