We introduced the new Office Web Apps a few weeks ago. We’ve added new features, improved the performance of our apps and continue to provide access to your documents anywhere in a variety of popular browsers.
Today, we are excited to introduce you to a new dimension for input – Touch – to bring the full-fledged capabilities of viewing and editing in the Office Web Apps to tablets and browsers that support touch, including IE on Windows 8, and mobile Safari on iOS.
In designing the Office Web Apps for touch, we set out to achieve the following goals:
- Users should be up and running with touch-enabled Office Web Apps right away
- Users don’t need to learn to navigate a new user interface
- Users can easily move back and forth between touch and mouse/keyboard experiences
- The full feature set of the Office Web Apps, including editing tools, must be enabled on touch devices like tablets and touch monitors.
Building the user interface to be touchable and responsive to touch input presented interesting design challenges. In this post, I will describe how we achieved it.
Developing the Framework for Touch
We developed a unified framework consistent with the platforms that we support and Touch Interaction guidelines for Microsoft Office Desktop Applications, Windows 8, and iOS. We also balanced that with the experience and touch manipulations that users expect when using a particular touch device.
We used the following principles to build the user experience across the platforms:
- Deliver delightful end-to-end experiences using only touch input
- Focus on scenarios and experiences on a touch device
- Ensure users can touch the user interface with confidence
- Build simple and intuitive touch manipulations
- Leverage browser capabilities
- Ensure great end-to-end experiences using a combination of touch, mouse, and keyboard
- Users can easily switch back and forth between using touch, or mouse and keyboard to interact with the application
- The application will respond to the input.
Let’s dive into each of these principles:
Scenarios and Experiences optimized for touch
I wrote this post over a few days and edited it a few times. Like most of you, I wasn’t sitting at my desk all the time, nor did I carry a laptop out to my kid’s fencing practice. I started writing the post on my desktop at work and, with my document up on Skydrive and available anywhere, I continued editing it on my tablet.
Trends and patterns in usage and behavior that emerged from user research helped us target two scenarios:
1. Reading and consuming document content and viewing presentations and spreadsheets will be fast, delightful and captivating.
- Reading and consuming information was the favorite activity for most people on a tablet.
- People browse through documents and presentations and make comments on content shared by colleagues and friends.
- Others wanted to aggregate all the research on buying cars into their OneNote web app and have it on hand on their tablet as they negotiate their car purchase.
2. Lightweight editing will be highly satisfying as people add, modify and revise documents
- Moms like me want to quickly sign up to bring dessert for my kid’s school potluck shared by the school’s PTSA in a spreadsheet.
Students want to make quick edits to the paper they are working on and collaborate on the presentation that they need to polish.
Touch with Confidence
Nothing is more frustrating than touching an unintended control in the user interface. Confidence in the app increases when you reliably touch the control or part of user interface that you intended. We want you to have that confidence when you use the Office Web Apps.
The mouse is a tool for precise and controlled interaction with the user interface. In combination with a physical keyboard, it gives the user confidence in accurately placing insertion points, making selections, hitting buttons and invoking context menus, drop downs and other UI.
In comparison, human fingers come in all varieties of shapes and sizes. They are clumsy in placing an insertion point and imprecise in controlling the interaction with the user interface.
Our goal was for users to fearlessly touch the user interface and get the results they expect, as they would with a mouse.
Making something easy to touch is dependent on the size of the target. Many user interface elements such as the ribbon controls and context menus fell well below the “touchable” size limits defined by Windows 8 and Microsoft Office.
All of these elements have been made easy to touch in the new Office Web Apps. Great care was taken to balance the increase in physical size of the UI with preserving as much real estate as possible for the actual document content.
Notice the bigger and easier to touch buttons and the comfortable spacing between controls in the close up:
The Home tab in Excel Web App:
The Insert tab in PowerPoint Web App:
The Home tab in OneNote Web App:
The Color Picker in Word Web App:
Use simple and intuitive touch manipulations
One of our core objectives was to get users started right away with Office Web Apps on tablets using simple and intuitive touch manipulations rather than complex gestures that require learning and remembering.
Five actions are all it takes to get started:
Let’s take a look at how you can use these actions in the Office Web Apps:
Scrolling and browsing through your document
When you need to quickly scan through a document, you can swipe / flick using a quick scrolling motion. The document content scrolls with fast and fluid acceleration which can always be interrupted by tapping.
We have used the native browser capability to enable accelerated scrolling in the Word Web App in the Reading and Editing views.
In the PowerPoint Web App, you can use the same swipe action to change slides.
Zooming in and out:
You can zoom in and zoom out on the user interface using two fingers, spread or pinched together.
A single tap in the Editing View of the Office Web Apps places an Insertion Point and displays the keyboard to begin typing.
The Insertion Point in the Word Web App:
Notice that the insertion point looks different from what you see when you use the mouse and keyboard. The circular “gripper” with the insertion point allows you to easily grab it and drag in order to make a selection.
Typing is fundamental to editing so ensuring a good experience is a core supported scenario.
Placement of Insertion point
Since the finger is an imprecise input tool, we had to figure out how to reliably place an insertion point at the place where the user intended.
Most users will either modify the beginning or the end of the word.
So, we use the “bookends” approach in placing an Insertion Point:
Tapping once on an existing word, calculates the nearest end (beginning of the word or end of the word) and places the insertion point there. Tapping again on the same word, refines the Insertion Point to the exact location where the touch registered.
Selection of text and objects allows you to manipulate, apply formatting, or do other actions on them. Users can perform these operations efficiently with a mouse and control and shift keyson the keyboard because they provide precise targeting .
In the touch environment, the “gripper” on the Insertion Point serves as a handle that you can grab to drag and create a new selection. You can also modify an existing selection by shrinking or growing the range selected using the grippers on each end.
Dragging the gripper to select text in the Word Web App:
Dragging to select the dimensions for inserting a table:
Applying actions in Context:
Context menus offer a quick and easy way to apply actions in a specific context. You may be familiar with using the context menus with the mouse in the Office Web Apps already. These are displayed on right click of a mouse.
Right-click context menus in the Word Web App Editing view with a mouse:
We made it easy for you to get the context menu by simply tapping on a selection to display it. Tapping away from the context menu dismisses it.
Tapping on the selection displays the context menu:
Notice the comfortable spacing of the controls on the context menu for touch.
At an Insertion Point, you can display the context menu by holding your finger down briefly:
In the Word Web App reading view, a single tap selects a line. Tapping once on the selection displays the context menu.
Selection and Context menu in the Word Web App Viewer:
Ensure great end-to-end experiences using a combination of touch, mouse, and keyboard
Tablets can be used with touch, mouse and keyboard input.
On Windows 8, the Office Web Apps can be used with touch or mouse and keyboard or a combination of both. In iOS, the Office Web Apps work best using touch input.
In the Office Web Apps, the user interface can be differentiated as:
- Fixed User Interface
This user interface is always present and displayed in the app.
Example: OneNote Web App Navigation pane, Ribbon
- Contextual User Interface
This user interface appears and disappears on demand.
Example: Context menus
When you are on a touch device, Office Web Apps will display the fixed user interface in touch mode by default . You can change this mode to use the user interface with a mouse by toggling the “Touch mode” button.
The Touch Mode button appears in the Quick Access Toolbar on the top left in the Office Web Apps, allowing you to toggle between the touch and precision / mouse mode.
The Touch Mode Button: (toggled ON) displays the touchable user interface:
A close up of the Touch Mode Button:
Context menus, ribbon fly-outs and menus that are displayed only on demand, are displayed in the input method that invoked them, touch or mouse.
We want to hear from you on your experience, so I encourage you to give us your feedback. Located on the top right corner of the app and in the File Menu is an option to “Give Feedback”.
We are constantly refining and improving the experience and are actively listening to what you like and don’t like.
Program Manager, Office Web Apps