Slide 1

Build Your Own 2010 Ribbon

An ILTA U Hands-On Exercise

Hashtag #HAND2

HAND2A - 2:30-3:30 PM; HAND2B –4:00-5:00 pm

Slide 2Speakers

Susan Horiuchi is vice president of training and professional services with PayneGroup. In addition to leading her team of international trainers and project leads, Susan provides high-end technical training, project management, and professional services. Susan is a contributing author of the Word for Law Firms book series, is a contributing author to legal and technical publications, and is a speaker at legal and technical conferences. Susan is a Microsoft Certified Trainer and has over 20 years in the legal field and PayneGroup combined.

Leah Matthews is a senior developer at PayneGroup. She also performs migration consulting, project management and training services. Leah has also been a speaker at ILTA annual conferences for the past several years. Leah has a BS degree in Computer Information Systems and is a Microsoft Certified Professional in Office XML and a Certified Expert in Word. Leah has worked in the legal field for over 20 years, specializing in migration services and application development. She has been with PayneGroup for the past ten years.

Slide 3Agenda

• Office 2010 Ribbon Design

• ILTA U Hands On Logistics

• Customizing the Quick Access Toolbar

• Customizing the Ribbon

• Customizing the Backstage View

• Q&A

Slide 4

Yoga in Russian fitness center, by Oleg Klementiev

When a ton of hours have been put into a craft it resembles strength, balance, and fluency, and it is so incredibly great that we tend to not notice the amount of work behind it because it appears so effortless. That is how the Microsoft Office Ribbon design is set up! Countless hours were spent architecting, designing, and perfecting the Office 2010 UI that we may also not realize how good it really is to begin with. That is why we have to take careful steps when customizing. Microsoft has guidelines to follow (see the Resources slide for these guidelines) and we will provide some best practice tips on how to best customize the ribbon.

Slide 5

OFFICE 2010 RIBBON DESIGN

There is such a thing as over-customizing.

Slide 6

by lululemon athletica

We want to complement the existing nicely-planned Office 2010 interface to make it easy for the user and not turn it on its side.

The length of a Tab name and the location can take away from the default Tabs that are needed.

Leaving too much open space in a group can appear as though something is missing.

Slide 7

Microsoft ribbon design guidelines:http://msdn.microsoft.com/en-us/library/cc872782

“The icons have similar coloring, making them hard to distinguish.”

“[A] single, short group name works better than separate, longer ones.”

“In the better example, the group commands benefit from having extra labels, and a single, short group name works better than separate, longer ones.”

“Choose icons that are recognizable and distinguishable, especially for the most frequently used commands. Make sure the icons have distinctive shapes and colors. Doing so helps users find the commands quickly, even if they don't remember the icon symbol.”

“In the incorrect example, the icons have similar coloring, making them hard to distinguish.”

Microsoft ribbon design guidelines:http://msdn.microsoft.com/en-us/library/cc872782

Slide 8

What else do you need to know before we get started?

Slide 9 Quick Access Toolbaraka QAT

• What can live on the QAT?

• What cannot be placed on the QAT

• Adding Microsoft images

• What can live on the QAT?• Command buttons (to launch

Microsoft built-in commands)• Buttons (to launch macros)• Any Microsoft image• Separators

• What cannot be placed on the QAT?

• Custom icons or images• Checkboxes, menus, or other

controls that are available on the Ribbon

Slide 10

The Ribbon

What can exist on the Ribbon?

• What can exist on the Ribbon?• Any type of Microsoft ribbon

command (Button, Button Group, Checkbox, Combobox, Dropdown box, Edit box, Gallery, Group, Label, Menu, Separator, Split Button, Tab and Toggle button

Slide 11

National Cherry Blossom Festival @ Washington Monument, by daveynin

Let’s Get Started

Slide 12Hands On Exercises

• Do you have a handout?

– All lab exercises are in the handout

• You are already logged on to the VMUsername: pcgILTA\ILTAUser2012Password: iltauser2012

• If you need assistance, we have assistants

The presentation, handout, and exercise files referred to in this session are available on the jump drive provided by ILTA. Additional resources are listed at the end of the presentation.

Slide 13

CUSTOMIZING THE QAT

Hands on – Module 1

Slide 14

CUSTOMIZING THE RIBBON

Hands on – Module 2

Slide 15

CUSTOMIZING THE BACKSTAGE VIEW

Hands on (if time permits) – Module 3

Slide 16

Q&AThank you for coming to study

with us at ILTA U!

Leah MatthewsLeahMatthews@payneconsulting.com

Susan HoriuchiSusanHoriuchi@payneconsulting.com

PayneGroupHeadquarters – Seattle, WA206-344-8966www.payneconsulting.com

Come visit booth 401/403at the Vendor Hall

Hashtag #HAND2

Slide 17Resources

• Custom UI Editor Tool download:http://openxmldeveloper.org/blog/b/openxmldeveloper/archive/2010/08/10/23248.aspx

• Ribbon extensibility information from Microsoft:http://www.microsoft.com/en-us/download/details.aspx?id=1574

• Microsoft MVP Ron de Bruin “Change the Ribbon in Excel”:http://www.rondebruin.nl/ribbon.htm

• Microsoft Ribbon Design Guidelines:http://msdn.microsoft.com/en-us/library/cc872782

• RibbonX: Customizing the Office 2007 Ribbon (excellent read and applicable to Office 2010 minus the Backstage View):http://www.amazon.com/RibbonX-Customizing-Office-2007-Ribbon/dp/0470191112

• Customizing the Office 2010 Backstage View for Developers:http://msdn.microsoft.com/en-us/library/ee815851

• Office 2010 Control IDs download:http://www.microsoft.com/en-us/download/details.aspx?id=6627

Slide 18Images Used

• “Yoga dog,” by istolethetv, Carl Schurz Park Annual Halloween Howl, October 25th, 2009, New York City http://www.flickr.com/photos/istolethetv/4045140609/

• Yoga headstand – “Yoga 23,” by Oleg Klementiev, Yoga in Russian fitness center www.viktoriya-fitness.ruhttp://www.flickr.com/photos/impuls-f/3946905077/

• Yoga splits – “Yoga Journal Conference”, by lululemon athleticahttp://www.flickr.com/photos/lululemonathletica/5730169812/

• Yoga group – “2nd Annual Yoga with Iululemon Athetica” by daveynin, National Cherry Blossom Festival @ Washington Monument, http://www.flickr.com/photos/daveynin/4491159511/