ReDesign iCal

ReDesign vom iCal, einem Kalenderprogram zum organisieren und verwalten von Terminen

Aufgabenstellung

Die Aufgabe war es, ein Redesign einer Free- bzw. Shareware zu entwerfen. Im Vordergrund stehen die Recherche, die Analyse, die Interaktion mit dem Programm und die Gestaltung der Software.

 

iCal

iCal ist ein Kalenderprogramm, welches von Apple mit dem Betriebssystem Mac OS X mitgeliefert wird. Das Programm wurde 2002 auf der Macworld vorgestellt.

Mit iCal können Termine eingetragen und verwaltet werden. Es können Kalender veröffentlicht und abonniert werden und man kann sie mit mehreren Benutzern teilen und Anhänge hinzufügen.

 

iCal

 


Informationsarchitektur

Inder Informationsarchitektur haben wir einige Redundanzen gefunden, welche wir für unser Redesign entfernt haben. Das Card Sorting hat uns dabei geholfen, die Menüpunkte neu zuzuordnen und festzustellen, dass viele Punkte in anderen Menüpunkten besser funktionieren.

 

Informationsarchitektur

 

Icons und Buttons

Um eine Übersicht zu bekommen welche Icons im iCal vorhanden, stellten wir sie
erstmal alle frei und analysiereten sie.

 

Icons und Buttons

Markierungen


Usecases

Im nächsten Schritt haben wir verschiedene Usecases erstellt, welche für uns wichtig waren. Danach haben wir sie selbst getestet und andere Personen testen lassen, welche sich sowohl mit iCal auskennen, als auch das Programm zum ersten Mal nutzten.

 

Usecases


Wireframe

Nachdem wir mit der Analyse fertig waren, haben wir erste Bleistiftskizzen erstellt, die wir dann kurz darauf am Screen umgesetzt haben. So sind erste Wireframes entstanden.

Wir haben verschiedene Layouts und Anordnungen ausprobiert und uns überlegt, was Usecase-spezifisch und Benutzerorientiert am Besten funktioniert.

 

wireframe

 

Zeitleiste

Um die Kalenderansicht individuell verändern und immer wieder anpassen zu können, erstellten wir eine Zeitleiste. Somit hat man die Möglich mehr als nur zwischen Tag-, Woche- und Monatsansicht zu wechseln.


Zeitleiste

 

 

Umsetzung

Im nächsten Schritt haben wir die einzelnen Wireframes in Adobe Fireworks umgesetzt. Angefangen haben wir mit dem Hauptfenster, welches wir im OS X-Style angelegt haben um es adaptiv zum Betriebssystem zu machen.

Ereignisansicht
Hier ist eine Situation dagestellt, wie die Ereignissituation im gesamten aussieht zusammen mit dem ganzen Kalender.

 

Ereignisfenster

 


Mehrere Einträge
Eines der schwierigsten Aufgaben ist es mehrere Termine darzustellen. Wir lösten das Problem indem ein roter markanter Kreis mit einer Zahl, darüber informiert das noch weitere Termine vorhanden sind. Je nach Priorität liegt das wichtigste Ereignis ganz oben. Klickt man auf den Termin so klappen die weiteren Termine auf.

 

Einträge