usability study for handling repeating events in calagator

[Anselm Hook]

Joe Cohen and I explored the usability and interaction design for handling repeating events in Calagator.

We looked iCal, Google Calendar, Yahoo Calendar and Microsoft Outlook for any advice.

We also looked at a usability study by the folks who wrote "things" - the URL is here:

   http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-a-dialog.html

Out this we found that the pattern for defining repeating events was not intractable, although a bit intimidating at first.

We produced a small piece of javascript that exercises a simple repeating event utility.  This is not *quite* complete because the year case needs a bit of work - but in general it should handle the daily, weekly and monthly cases and we'll try to post up an amendment for the year case soon.

Here is the javascript source code - hope this helps:

<form id="calagator_repeat_form">

Repeat the event titled "my event" on every 

<input id="calagator_repeat_rate" style="width:32px" value="1"></input>


<select id="calagator_repeat_period" onchange="calagator_repeat_configure_period()">

  <option selected>days</option>
  <option>weeks</option>

  <option>months</option>
  <option>years</option>

</select>

on the

<select id="calagator_repeat_week" onchange="calagator_repeat_configure_week()">

  <option>specific</option>
  <option>first</option>
  <option>second</option>

  <option>third</option>
  <option>fourth</option>

  <option>fifth</option>
  <option>last</option>
</select>


<span id="calagator_repeat_month">
  <input type=checkbox value="1">jan</input>

  <input type=checkbox value="2">feb</input>

  <input type=checkbox value="3">mar</input>

  <input type=checkbox value="4">apr</input>

  <input type=checkbox value="5">may</input>

  <input type=checkbox value="6">jun</input>

  <input type=checkbox value="7">jul</input>

  <input type=checkbox value="1">aug</input>

  <input type=checkbox value="2">sep</input>

  <input type=checkbox value="3">oct</input>

  <input type=checkbox value="4">nov</input>

  <input type=checkbox value="4">dec</input>

</span>

<span id="calagator_repeat_day_of_month">
  <input type=checkbox value="1">1</input>

  <input type=checkbox value="2">2</input>

  <input type=checkbox value="3">3</input>

  <input type=checkbox value="4">4</input>

  <input type=checkbox value="5">5</input>

  <input type=checkbox value="6">6</input>

  <input type=checkbox value="7">7</input>

  <input type=checkbox value="1">8</input>

  <input type=checkbox value="2">9</input>

  <input type=checkbox value="3">10</input>

  <input type=checkbox value="4">11</input>

  <input type=checkbox value="5">12</input>

  <input type=checkbox value="6">13</input>

  <input type=checkbox value="7">14</input>

  <input type=checkbox value="1">15</input>

  <input type=checkbox value="2">16</input>

  <input type=checkbox value="3">17</input>

  <input type=checkbox value="4">18</input>

  <input type=checkbox value="5">19</input>

  <input type=checkbox value="6">20</input>

  <input type=checkbox value="7">21</input>

  <input type=checkbox value="1">22</input>

  <input type=checkbox value="2">23</input>

  <input type=checkbox value="3">24</input>

  <input type=checkbox value="4">25</input>

  <input type=checkbox value="5">26</input>

  <input type=checkbox value="6">27</input>

  <input type=checkbox value="7">28</input>

  <input type=checkbox value="7">29</input>

  <input type=checkbox value="7">30</input>

  <input type=checkbox value="7">31</input>

</span>

<span id="calagator_repeat_day_of_week">

  <input type=checkbox value="sun">sun</input>

  <input type=checkbox value="mon">mon</input>

  <input type=checkbox value="tue">tue</input>

  <input type=checkbox value="wed">wed</input>

  <input type=checkbox value="thu">thu</input>

  <input type=checkbox value="fri">fri</input>

  <input type=checkbox value="sat">sat</input>

</span>

</form>

<script>

// TODO: anselm this should all become an object

var form = document.getElementById("calagator_repeat_form");

var period = document.getElementById("calagator_repeat_period");
var week = document.getElementById("calagator_repeat_week");
var moy = document.getElementById("calagator_repeat_month");

var dow = document.getElementById("calagator_repeat_day_of_week");
var dom = document.getElementById("calagator_repeat_day_of_month");

function calagator_repeat_show_all() {
  week.style.display = "inline";

  dow.style.display = "inline";
  dom.style.display = "inline";
  moy.style.display = "inline";
}

function calagator_repeat_configure_period() {
  calagator_repeat_show_all();

  week.value = "specific";
  if(period.value == "days" || period.value == "weeks") {
    week.style.display = "none";
    dom.style.display = "none";
    moy.style.display = "none";

  }
  else if( period.value == "months" ) {
    dow.style.display = "none";   
    moy.style.display = "none";
  }
  else if( period.value == "years" ) {
    dom.style.display="none";

    moy.style.display = "inline";
  }
}

function calagator_repeat_configure_week() {
  calagator_repeat_show_all();
  if(period.value == "months") {
    //dow.style.display = "none";   

    moy.style.display = "none";
    if(week.value == "specific") {
      dow.style.display = "none";
    } else {
      dom.style.display = "none";   
    }
  }

  else if(period.value=="years") {
    
  }
}

calagator_repeat_configure_period();



</script>

[Joe Cohen]

Andy's code is a great start to adding recurring events to Calagator.
It gives a great picture of what's needed in a UI to create those
events.

Other things we should think about:

* How will recurring events be modeled? E.g., a master recurring
record plus one individual event for each instance of recurrence?
(And when will the individual instances be created? E.g. when the
master is created, should Calagator create all instances, or should
Calagator immediately create only a limited set -- e.g., 6 months --
of instances, and create later instances periodically? )

* At today's code sprint, Reid suggested that Calagator store
recurrence information using iCal syntax. If you're thinking about
working on the Calagator coding for recurring events, it's worth
taking a look at the relevant part of the iCal specification,
http://tools.ietf.org/html/rfc2445#section-4.8.5
and thinking about how you would convert (a) the values that a user
selects in the UI, into (b) an iCal recurrence component.

* UI for editing recurring events. In particular, we should be able
to edit (including deleting) either a single instance of a recurring
event, or the master recurring record.

On Oct 11, 6:09 pm, "Anselm Hook" <ans...@gmail.com> wrote:
> Joe Cohen and I explored the usability and interaction design for handling
> repeating events in Calagator.
>
> We looked iCal, Google Calendar, Yahoo Calendar and Microsoft Outlook for
> any advice.
>
> We also looked at a usability study by the folks who wrote "things" - the
> URL is here:
>

> http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-...

[Joe Cohen]

I also uploaded a PNG showing a rough logic flow for the UI for
recurring event creation. The file is
Recurrence.png
http://pdx-tech-calendar.googlegroups.com/web/Recurrence.png?gda=Zje2H0AAAABcUVa0sG0kLSCvLivNu5WkDGbJZToX9MDBkWhOYytzr2M2pgdGLQorF-52P7I3x-dtxVPdW1gYotyj7-X7wDON&gsc=LRFZ1xYAAABTJWYVVAETOahunl43kJrmsJrAtjd9Fq-fV8M8HcFQDQ

In addition to what's show on that chart the UI must determine the
Start and Expiration of recurrence.
The Start should be a date certain
The Expiration should be: date certain, the number of recurrences, or
no expiration.

On Oct 11, 6:09 pm, "Anselm Hook" <ans...@gmail.com> wrote:

> Joe Cohen and I explored the usability and interaction design for handling
> repeating events in Calagator.
>
> We looked iCal, Google Calendar, Yahoo Calendar and Microsoft Outlook for
> any advice.
>
> We also looked at a usability study by the folks who wrote "things" - the
> URL is here:
>

> http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-...

[notbenh]

Hello all thanks again for this evening, I had a lot of fun, it got my
brain wheels spinning.

I took some barebones notes that are mostly just a req list for the
UI:

Thing to remember about the R_UI

- handle all 4 intervals (day, week, month, year)
- handle iterations of intervals (every X intervals)
- handle selections
-- this can be explicit (June 26th)
-- relative (first monday of the month) [ this seems to relate only to
months (Thanksgiving => 4th Thrs on Oct repeat yearly) ]
- handle end points (never, after X events, after THIS date)

- it might also be handy down the road to handle semi-natural language
as input ala Google Calendar’s quick add (http://www.google.com/
support/calendar/bin/answer.py?answer=36604&query=quick
+add&topic=&type=#text)

With this were adding the endpoint stuff to Anselm's example (linked
above).

Another note about the UI example is depending on how this is to be
used (ie edit this event vs create this event) , the pick a day for
'daily' events would not be needed as you can imply that they day of
the start date would be the day you wish to start from.

On Oct 11, 7:20 pm, Joe Cohen <jdcohen...@gmail.com> wrote:
> I also uploaded a PNG showing a rough logic flow for the UI for
> recurring event creation.  The file is

> Recurrence.pnghttp://pdx-tech-calendar.googlegroups.com/web/Recurrence.png?gda=Zje2...

[Anselm Hook]

I broke my example will fix.

Something to ponder - how do we convert a request for a repeating
event into a proper encoding for ical etc?

- me

--
anselm 415 215 4856 http://hook.org http://makerlab.com http://meedan.net