Calendar - phone
User experience specification (WIP)�
Giorgio Venturi
Contents
| Section | Notes |
1 | Browsing events | |
2 | View and edit events | |
3 | Secondary screens | |
Versions
| Date | Notes |
0.1 | 6th November 2014 | |
Calendar
1. Browsing events
Year view
Visual Design Advice:
Try displaying the year with no ubuntu shape around it, it will make it cleaner if you just padding to separate the months from each other.
Month view
Users can instigate a manual sync by tapping the Refresh icon in the header*. Tap on ‘today’ to go back to current day in current view.
Users can switch to a different view by using the navigation drawer (see right)
Tap on a day to select and move highlight, tap again to go to week view. ‘Today’ should be represented with orange highlight. Selected day with light grey shape.
Users can also zoom out by doing a 'spread' gesture:
Day > Week > Month > Year
* This is a temporary workaround whilewe wait for push notifications
Week view - default view
By default, in this view user is presented with the current day. 3 days/columns are displayed, and a bit of the 4th day column hinting there is extra content beyond the screen.
On landscape, all 7 days should be visible at the same time.
The top 2 rows and the left column are persistent and never scroll away.
Current time is hinted in the left column and in the current day column.
Each event display only Event title, display ellipsis if required
User can
- Long press in a slot and create a new 1-h event in that slot
- Long press in a 'all day' slot and create a new all day event
- Drag an event to a different slot
- Tap on a selected day header to go into day view
The bottom edge will create a new event.
Day view
Day view is similiar to week view, with the exception that only 1 day is displayed
Each event displays start time, end time and Title
Agenda view
Visual Design Advice:
Try displaying the events full bleed, with white border; background colour represent the online/offline calendar
Calendar
2. View and edit events
View event
Event details hints the calendar colour with the background of the title table cell.
Location, Start and End Date/Time and Frequency are visualised in a single cell.
User can delete or go to Edit mode. Tapping on delete will show a modal dialog.
User can do some operations without having to go to edit mode:
⁃ Tap on notification and change the timing (as per current implementation, new view)
⁃ Tap on Calendar and change calendar (List Item selector, expanding)
Edit existing or Create New Event
Add guests opens a new screen where user can add multiple guests (List item Selector) or Filter (Header, Input mode)
When creating a new event, the first calendar of the list is assigned.
When using the bottom edge gesture:
- Month, week view: The event will default to today, to the next hour (e.g. 3:03 --> 4:00)
- Day view: The event The event will default to the currently displayed day, to the next hour (e.g. 3:03 --> 4:00)
Edit existing or Create New Event (continued)
Selecting a text field (Event Name, Description, etc) results in the selected field moving upward so as not to be obscured by the OSK.
Up to Five reminders can be set per event.
By default a single reminder is shown (set to ‘No Reminder’).
Setting a first, second, third or fourth reminder results in a subsequent reminder becoming available.
Setting a fifth reminder does not result in any further reminders becoming available.
No Reminders Set
Two Reminders Set
Calendar
3. Secondary views
Calendars
Similar to the existing view.
If settings are not currently needed, the icon is not displayed
Missing designs
Delete event dialog
Add guests screen
Notification screen
Settings screen