Designing the Windows 8 Calendar app

S

Steven Sinofsky


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.
Showing your life clearly


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.

Making it easy to get around


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
Moving forward and backward in time


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

Switching views


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

Opening individual events


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.

Making it easy to add new plans


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.

Keeping you on time


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.

Notifications and reminders


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:



Snapping the Calendar for always-on visibility


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

Ready to do more


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.

Week view


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

Two-day view


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:
4341.two_2D00_day_2D00_view_2D00_shows_2D00_precise_2D00_details_2D00_for_2D00_today_2D00_and_2D00_tomorrow_5F00_thumb_5F00_0973C4FC.png


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.)

Doing more with events


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

47ae48d860637f242367a84adcdf5ba7._.gif


Continue reading...
 
Last edited by a moderator:
Back
Top Bottom