Designing the Windows 8 Calendar app

This post builds on the Mail app and People app posts, and details the Calendar app. We’ve worked hard to integrate these apps together into a seamless communication suite that connects to the cloud services most important to you. This post details the integration with Windows 8, some of the features in the current preview, and features on the way. We also look at a little bit of the design history and iteration as some background. Colin Anthony, a lead program manager on the Windows Live team, authored this post. --Steven

When we set out to design the Calendar app for Windows 8, there was no shortage of directional possibilities. Given the long history of calendars in society, and the diversity of Windows customers, we asked ourselves: What are the essential attributes of a great calendaring experience and how can we bring them to life by using the uniquely rich capabilities of Windows 8?
At its heart, a great calendar should to do the following:

  • Show your life clearly. You should have crystal clear visibility into what’s happening in your life – at home, at work, and at school.
  • Make it easy to get around. Moving back and forth in time should be quick and efficient. Opening events and appointments should feel natural.
  • Make it easy to add new items. New things are always coming up in your life. A great calendar makes it easy to make new plans.
  • Keep you on time. Well laid plans aren’t very useful if you show up late!
    5001.wlEmoticon_2D00_smile_5F00_4E5422FC.png
  • Be ready to do more. As you get busier, scheduling gets more complicated. Calendar should gracefully handle your needs as they change.
[h=3]Showing your life clearly[/h]One of the most important functions of a calendar is its ability to answer the questions “What’s going on for me today?” and “What’s coming up next?” As we designed the Calendar app, we focused on providing that clarity and eliminating distractions. Given all the potential capabilities of a digital calendar, keeping this focus can actually be quite difficult. The temptation to add extra bells and whistles can be very real. At the same time, we realized that focus is one thing paper calendars have always been quite good at --- they simply present you with the calendar grid and the information you’ve written on it.
With that insight and the clear principles of what it means to be a great Metro style app, we committed to clarity of presentation. The app focuses on the calendar and your content, above all else.

A calendar with no distractions - your schedule is the focus.
Of course, having an easy-to-read calendar is only useful if all your information is available. Whether you’re keeping track of appointments at work, managing family activities, or mapping out your class schedule at school, Calendar brings everything together to provide a more complete picture of your life.

Work and personal appointments are available in one view
You’re also in complete control of how these calendars appear in the app. For example, if a certain calendar has special meaning for you, you can make it stand out by changing its color. If you’re overwhelmed by the number of birthdays showing up from your favorite social network, you can hide those items in order to see everything else more clearly.
All of these personalization controls are tucked away neatly in Settings to avoid distracting you when you don’t need them.

Having less frequently used Calendar options tucked away in Settings provides control without distractions.
[h=3]Making it easy to get around[/h]Another important function of the calendar is the ability to move around in time. Our most important goals were:

  • Making it simple to move forward and backward in time
  • Making view switching predictable
  • Making it easy to open and view existing events
[h=4]Moving forward and backward in time[/h]One thing was apparent to us early on: We wanted a simple model where a gesture forward would take you into the future, and a gesture backwards would take you into the past—a direct way of moving around in time. No buttons to click or extra controls to manipulate.
But even in this simple design there's a question of how far forward and how far back each movement should take you. Not only were there user experience tradeoffs to be considered, but technical ones as well.
If we decided one swipe could move you forward multiple months (depending on the speed of the gesture) that would give you a natural and powerful way to make huge leaps forward in time. But there’s a challenge in making the landing place predictable. That is, if you’re starting in June, and want to move to July, you might end up in August if you swipe too quickly. If this happens frequently enough, it can feel as if you’re not in control.
Additionally, since the boundaries between months are well defined–landing halfway between July and August doesn't make sense–accuracy is important. Contrast this to panning a two-dimensional grid of photos, where “getting close” is ok as long as you arrive in the general region of the photos you’re looking for.
To avoid these pitfalls, we went with an approach that enables you to consistently move forward one month at a time–by swiping once, hitting page down on the keyboard, or clicking the Forward button. This makes your experience much more predictable, putting you in control. If you’re in June and you want to arrive at August, you simply click or swipe twice. That’s it. You’re guaranteed never to overshoot the intended target.

Simple movements forward are quick and predictable
[h=4]Switching views[/h]When using the app, most people want to stay in the same view the majority of the time, depending on how busy their schedules tend be. People with fewer appointments tend to prefer Month view. Those with very busy schedules tend to prefer Day view. So, rather than making view switching a top level command that would always be visible, we opted to place it on the app bar instead. You can easily pull up the app bar in Windows 8 with a right-click or swipe up from the bottom edge, so you have access to the view switcher when you need it, without being distracted by it the rest of the time.

Opening the app bar gives you simple switching between views when needed
[h=4]Opening individual events[/h]Making it easy to open events is an interesting problem because of the tension between two variables:

  • Making each event larger (in height and width) makes them easier to target with the mouse or your finger.
  • Making events smaller means you can see more content at one time.

We needed to find a solution that would give you easy targeting while also showing enough content in each view. This was especially important in Month view, which has the tightest space constraints for each particular day. Keeping the key variables in mind, we designed the event sizes within a sweet spot, one in which Month view typically shows 2 events per day (the average for the majority customers) while maintaining nearly 100% accuracy for mouse and touch targeting. And, of course, when you have busier days at home, work, and school, switching to Week o Day views shows you all the events you need while providing the same high accuracy.
[h=3]Making it easy to add new plans[/h]Because new events can come up in life so quickly, we wanted event creation to be direct and instantly available at all times. When you think about paper calendars, they’re very direct—you identify a date, move your hand towards it and start writing. It all happens quite naturally, and we do it without much thought because of the paper calendar’s simplicity and purity of design. In a similar way, you can add new events to the Calendar in Windows 8 by simply clicking or tapping on the day or time you want.

Click-to-add is like putting pen to paper
This design—using the grid as the primary command surface—means no other buttons are necessary to complete this frequent task. Everything happens in the calendar grid. This reinforces our Metro design principle of content over chrome. And it allows for a pure experience that isn’t just about great consumption, but also about simple and direct creation.
[h=3]Keeping you on time[/h]Of course, even given all of the above, a calendar is only valuable if it helps you stay on time. Towards that goal, we designed Calendar with a range of smart capabilities to ensure you don't miss any important events.
[h=4]Notifications and reminders[/h]In the full page for an event, you can set any reminder time you want. At the desired time, you'll get a lightweight popup to remind you.

Notifications tell you about upcoming events
Notifications don’t block your current task. They don’t force you to interact with them. Using the built-in notifications system in Windows 8, a Calendar notification simply nudges you about what’s coming up and gets out of your way.
In addition, similar to Windows Phone, you can see information about upcoming events on the lock screen and on the Start tile:

[h=4]Snapping the Calendar for always-on visibility[/h]When you’re extremely busy on a particular day, you often want your full schedule visible at all times. With Snap, you can see your calendar while you use other apps.
Of course, the slim form factor of the snapped view presents quite a design challenge for Calendar. Some views, like Day view, fit very naturally into the more condensed space. To make it fit, we could simply show one day instead of two, and the overall model of the view would stay the same. Problem solved.
But Week and Month view are more challenging. A full week or month is quite difficult to fit in such a narrow area with any hope of showing the actual titles of each event. In addition, we want to maintain predictability in the system by avoiding situations where certain views (like Day view) look essentially the same when snapped, but other views (Month, Week) look entirely different when compared to their larger versions.
Given the challenges and goals, we designed a simple and consistent model where all views are represented by a single, snapped view. This single view maintains the context and positioning from the larger views. (That is, if you’re on Wednesday in the large view, you’re still on Wednesday when going to snapped view.) It’s also designed to give you the same life clarity and ease of navigation: All events from all of your calendars are available in a simple list. A swipe or click to the right or left takes you forward or backwards in time.
Calendar in snapped view lets you plan and browse at the same time
[h=3]Ready to do more[/h]Lastly, if we’ve done our job well, more and more customers will start using Calendar to manage larger portions of their lives at home and work. With that in mind, Calendar is designed to do more as your usage increases.
[h=4]Week view[/h]As you’d expect, Week view is useful when you have a large volume of appointments, and it’s crafted to give you the clarity you need for a particular week:

Week view lets you see a Sunday to Saturday overview
[h=4]Two-day view[/h]We also know there are days where you’re extremely busy at work, home, school, or all three. And we wanted a design that would allow even greater focus and precision. At the same time, we didn’t want to zoom in so far as to create “tunnel vision” by removing too much context. To strike the right balance, we designed Calendar with a two-day view:

Two-day view gives you the best detail about today and tomorrow
The two-day view is useful because making good time management decisions today often requires understanding what’s coming up tomorrow. In addition, this view takes advantage of today’s modern wide-screen displays without adding additional chrome or distractions just to fill up the extra space. As with the other views, it’s simply the calendar grid and your events. (And here’s a tip: each day scrolls independently without affecting the adjacent day. So, you can view information about tonight, while keeping an eye on your first appointment tomorrow.)
[h=4]Doing more with events[/h]Finally, we know many customers already use their calendars for quick reminders to themselves (e.g. “Pay the phone bill”, “Parent/Teacher conference at noon”). As mentioned earlier, you can click or tap any place in the calendar, and simply type in the few details you need.
In addition to these typical scenarios, we designed Calendar so you can do more as your needs change—because depth and richness are a core part of what makes a digital calendar special.
For example, you may have a family trip coming up this summer. Not only can you add your trip to the calendar, but you can also add all the related information about your trip directly in the appointment—things like flight times, confirmation numbers, and day-by-day itineraries—no separate papers or messages to manage. It’s all right there. You can also send the event to other members of your family, directly from the calendar, so everyone has the info they need.
As another example, on my family’s calendar we have a recurring appointment that lists each person’s cleaning responsibilities for Saturdays. On a paper calendar, this would be tedious to manage, or it would require a special calendar dedicated to that purpose. However, a dedicated page for each calendar event makes this level of richness possible in a single app.

The events page provides the options you need to manage your life
As you use Calendar in the Release Preview, we hope you enjoy it. The feedback we received during the Consumer Preview was extremely valuable, and we’ve looked at all of it very closely. Thanks! As we move towards the final release of Windows 8, we hope you’ll enjoy the upcoming improvements as well.
--Colin

aggbug.aspx

More...
 
Lol, every time I read one of these, it makes me want to go an actually use the specified app -- I can't see how they'll manage that for the music app though :p

I have to say that I do find it pretty handy to use the calendar app instead of launching a browser and logging into google calendar, etc. And the app new it was my mom's birthday without me having told it -- that was REALLY handy.
 

My Computer

System One

  • OS
    windows 8
    System Manufacturer/Model
    Viliv S10 3G
    CPU
    Atom Z530 (1.6GHz)
    Memory
    1GB DDR2 SDRAM (533MHz)
    Graphics Card(s)
    Intel GMA 500
    Sound Card
    Realtek High Definition Audio
    Screen Resolution
    1366/768
    Hard Drives
    SanDisk 64GB SSD
    Internet Speed
    6.41/5.47 MBPS
    Other Info
    WiFi 802.11 b/g
    Bluetooth 2.0+EDR
    Internal 3G (Huawei EM770W:
    HSPA/UMTS 850/900/1900/2100MHz,
    HSUPA: 5.76Mbps (UL) / HSDPA: 7.2Mbps (DL))
Lol, every time I read one of these, it makes me want to go an actually use the specified app -- I can't see how they'll manage that for the music app though :p

I have to say that I do find it pretty handy to use the calendar app instead of launching a browser and logging into google calendar, etc. And the app new it was my mom's birthday without me having told it -- that was REALLY handy.

And just a little creepy!
 

My Computer

System One

  • OS
    Windows 7/8
Wow, microsoft has really lost their way, they seem out in the atmosphere somewhere floating about.

The more I see about Windows 8 the less I like it, I don't see a big future for it.......
 

My Computer

System One

  • OS
    Windows 8 Pro ($39.99 upgrade)
    Computer type
    PC/Desktop
    System Manufacturer/Model
    Home Built
    CPU
    Intel I5 3570K overclocked to 4.2ghz
    Motherboard
    Asus P8Z77-V LX
    Memory
    Cosrair DDR3-1600 (4 x 4gb)
    Graphics Card(s)
    Nvidia GeForce GT 610 2GB
    Sound Card
    None
    Monitor(s) Displays
    AOC 27" LCD
    Screen Resolution
    1920x0180
    Hard Drives
    Seagate HDD 500gb (windows)
    Seagate HDD 1.5tb (media)
    Seagate HDD 1tb (media)
    Seagate HDD 1tb (media)
    PSU
    CoolMax 700watt
    Case
    Cosiar R400 Carbide series
    Cooling
    Cool Master H212
    Keyboard
    Dell
    Mouse
    PowerUp 3 button mouse
    Internet Speed
    12mb down, 1mb up
    Other Info
    qty. (5) 120mm fans, four are monitored by motherboard.
    Logitech T650 Touchpad for touch screen gestures
Lol, every time I read one of these, it makes me want to go an actually use the specified app -- I can't see how they'll manage that for the music app though :p

I have to say that I do find it pretty handy to use the calendar app instead of launching a browser and logging into google calendar, etc. And the app new it was my mom's birthday without me having told it -- that was REALLY handy.

And just a little creepy!

You know, I didn't notice that I hadn't input my mom's birthday until I read the description of the calendar app -- it grabbed my mom's birthday off of the People app (faceboook) and then displayed it on my livetile. It was actually pretty seamless, I never even had to launch the calendar app -- it's just sort of in the background, ticking away, reminding me of what I put in my google calendar plus the occasional birthday from facebook.

I like an app that gives me useful information that I actually want without me having to maintain or curate it. ;)
 

My Computer

System One

  • OS
    windows 8
    System Manufacturer/Model
    Viliv S10 3G
    CPU
    Atom Z530 (1.6GHz)
    Memory
    1GB DDR2 SDRAM (533MHz)
    Graphics Card(s)
    Intel GMA 500
    Sound Card
    Realtek High Definition Audio
    Screen Resolution
    1366/768
    Hard Drives
    SanDisk 64GB SSD
    Internet Speed
    6.41/5.47 MBPS
    Other Info
    WiFi 802.11 b/g
    Bluetooth 2.0+EDR
    Internal 3G (Huawei EM770W:
    HSPA/UMTS 850/900/1900/2100MHz,
    HSUPA: 5.76Mbps (UL) / HSDPA: 7.2Mbps (DL))
Back
Top