Videos Walthrough: Using the New Office 2013 with Touch - Office Integration Pack for LightSwitch

Windows 8 provides a number of platform capabilities for enabling highly responsive touch support in applications, ranging from hardware accelerated graphics and improved touch targeting to the a new app platform that makes it easy to build touch-optimized Windows 8-style apps. On Monday in San Francisco, Ballmer took the wraps off of the new Office's […]

Windows 8 provides a number of platform capabilities for enabling highly responsive touch support in applications, ranging from hardware accelerated graphics and improved touch targeting to the a new app platform that makes it easy to build touch-optimized Windows 8-style apps.

On Monday in San Francisco, Ballmer took the wraps off of the new Office's touch experience designed for Windows 8 and showed the touch-enabled Word, Excel, PowerPoint, Outlook, the new touch-optimized Windows 8-style app for OneNote, and other apps on the desktop.

The new Office is designed for a great experience whether you're sitting on a couch with a tablet, or at a desk with a mouse and keyboard. It makes common tasks fast, fluid, and intuitive, while still enabling the rich capabilities required to create high-quality documents.

In a new Office blog post, Clint Covington, lead program manager for User Experience team, walk through the thinking, engineering process and design framework used to reimagine touch experiences in Office 2013.

Here is MiniBar in Office 2013:

MiniBar in Office 2013 in Expanded mode

Office 2013: Fixed User Interface Elements

App Bar

Like all other Windows 8 style apps, the Office 2013 expose the commands that you need to navigate within Lync and OneNote in an app bar at the bottom of the screen. Just swipe in from the edge of the screen or right click (or press the Windows key + Z) and an app bar slides in:

Office 2013 App Bar

In this screen shot from OneNote, you can see that you can move back and forward through your notes, bring up your list of notebooks or pages, add a new page, or feedback on the app.

The app bar will also change based on what you right clicked on. For example, if you right click on a section within an OneNote notebook, additional commands will appear on the left side of the app bar. Now you can also rename or delete the section or copy a link to that section:

App Bar in Office 2013

Conington also posted a series of video (embedded below), of the new touch in Office.

Touch responsiveness

When you touch something, it needs to immediately respond. Content needs to "stick to your finger" when you pan and zoom. The UI needs to respond with inertia and bounce when flicked or reach the top/end of sections. Pictures need to immediately resize as you drag your finger, and text needs to reflow around it to give the user a sense of physical realness to the action.

To build an experience where content sticks to a finger, we had to refactor much of the document surface to use a compositor where content is rendered into images and moved around on the screen with animations. This required us to migrate away from GDI to modern hardware accelerated graphics services. The result of this work is an experience that feels natural and responsive.

Here are some examples:

Targeting

You can turn on Touch Mode by clicking on the QAT overflow and selecting the Touch Mode icon. The icon then will show up in the QAT and can easily toggle Touch Mode on and off.

Text and object selection

"We added new text selection handles to Word, PowerPoint, Excel, OneNote, Visio, Lync and messages in Outlook. Here are a couple of examples from Word and Excel. These are the same text selection handles you see across Windows 8 in apps like the new modern browser. "

To select multiple objects, we followed the Windows guidelines for cross-slide to select multiple slides and drag and drop to rearrange. You can easily select multiple objects in PowerPoint by keeping one finger down and tapping on other shapes and pictures.

Invoking the keyboard

With Office 2010 and Windows 7, people have to manually invoke the keyboard through clicking on the keyboard icon in the Windows task bar. Windows 8 provides new desktop APIs that allow Office to hide and show the virtual keyboard automatically.
Keyboard covers what you're typing

Few things cause more frustration in touch than when the virtual keyboard shows up and overlaps content or the area where you are typing. It is even more frustrating when as you type, the cursor scrolls under the keyboard. Windows 8 includes new desktop APIs that inform our applications when the keyboard is coming and going, as well as where it is on the screen. This lets our applications scroll content out of the way and keep the cursor in view as you type.

Minimize the need to type overall

"With the use of Smart Phones, Tablets and the cloud, people need to access documents across different machines, at home and at work. If you are connected to the Office service, your document and common locations MRU will roam across all of your devices. This significantly reduces traffic to the file open and file save dialogs which invariably involves typing in hard to remember, archaic file paths."

Excel's new Flash Fill is another feature that saves you time because Office does the typing for you. Here's how it works:

In-Canvas Commands

"we expect users to spend lots of time in Outlook triaging mail. As we started using Outlook on tablets, we found for mail there were a small set of commands that dominate usage. These frequent commands include Reply, Reply All, Forward, Delete, Move to Folder, Flag and Mark as Unread. It was extremely difficult to target a delete button in the middle of the screen when in the preferred lean forward posture while holding the device with two hands. In this position it is much easier to use thumbs to target real estate along the edges."

Here is how the thumb bar works in Outlook:

Radial menus

Radial Menus in Office 2013

Radial menus are available while you are typing and editing in the new OneNote app for Windows 8. "The commands that we expect you to use most while editing, we make available next to your content. While you are working, your commands stay tucked behind the menu. But when you need to format your text, for example, just click or tap on the radial menu and the commands you need appear," explains Microsoft.

Also, Microsoft made available new Office Integration Pack (OIP) which allows you to automate Excel, Word and Outlook in a variety of ways to import and export data, create documents and PDFs, as well as work with email and appointments.

The extension works with Office 2010 and LightSwitch desktop applications in both Visual Studio 2010 as well as Visual Studio 2012.

Get it here: http://officeintegration.codeplex.com/

Office Integration Pack (OIP) for LightSwitch

[Office Next]