70
Design in the trenches Chris Bernard, User Experience Evangelist, Microsoft

Design In The Trenches With Chris Bernard

Embed Size (px)

Citation preview

Page 1: Design In The Trenches With Chris Bernard

Design in the trenchesChris Bernard, User Experience Evangelist, Microsoft

Page 2: Design In The Trenches With Chris Bernard

All the content in this presentation came from my hard working design peers at Microsoft, I didn’t do any of this work, I’m just sharing their good deeds. All photos in this presentation are from istockphoto.com unless otherswise noted and are used for educational purposes.

For office, all of the principles, thoughts, etc. came from Jensen Harris. For Windows Vista, ideas came from Jenny Lam and Tjeerd Hoek. Do a web search on these guys (I suggest Windows Live Search <ahem>) to find out what they are up to today. They are all brilliant design peers and I hope this presentation helps you learn as much from them as I did.

Please visit www.microsoft.com/expression and look under the knowledge center to fine a video of me giving this presentation.

Or try: http://download.microsoft.com/download/1/f/f/1fff960f-51a2-44b1-b033-bf25a3c7c7ab/BRE001.wmv

Page 3: Design In The Trenches With Chris Bernard
Page 4: Design In The Trenches With Chris Bernard

UX

Page 5: Design In The Trenches With Chris Bernard
Page 6: Design In The Trenches With Chris Bernard
Page 7: Design In The Trenches With Chris Bernard

Beginnings

Page 8: Design In The Trenches With Chris Bernard

Xerox Star

Page 9: Design In The Trenches With Chris Bernard
Page 10: Design In The Trenches With Chris Bernard
Page 11: Design In The Trenches With Chris Bernard

Experience Rewarding Moments

Page 12: Design In The Trenches With Chris Bernard

For Microsoft, it started with a clear sense of mission…

…with the desire to be more than we are today.

• A highly coveted brand.

• A more skilled competitor.

• A better partner.

• A more profitable entity.

• A maker of more productive and enjoyable experience.

• A legacy.

Page 13: Design In The Trenches With Chris Bernard

User Experience principles

• UsefulNew capabilities that customers want and need.

• UsableEfficient for familiar and easy for unfamiliar tasks.

• DesirableBuilds emotional connections; both familiar and new.

• FeasibleAchievable on time with available technology.

Page 14: Design In The Trenches With Chris Bernard

OfficeUser Experience Design

Page 15: Design In The Trenches With Chris Bernard

Word 1.0

Page 16: Design In The Trenches With Chris Bernard

Word 6.0

Page 17: Design In The Trenches With Chris Bernard

Word 97

Page 18: Design In The Trenches With Chris Bernard

Running into Fitt’s Law

Page 19: Design In The Trenches With Chris Bernard

Nathan Myhrvold's 1Nathan Myhrvold's 1stst law of software law of software““Software is a gas”Software is a gas”

Page 20: Design In The Trenches With Chris Bernard
Page 21: Design In The Trenches With Chris Bernard

Adaptive Menus: Office 2000

“Long” Menu

“Short” Menu

Page 22: Design In The Trenches With Chris Bernard

Rafted Toolbars: Office 2000

Page 23: Design In The Trenches With Chris Bernard

Task Panes: Office XP

Page 24: Design In The Trenches With Chris Bernard

Some Tipping Points

Page 25: Design In The Trenches With Chris Bernard

Word MenusWord 1.050Word 6.0100Word 97200Word 2003250+

Page 26: Design In The Trenches With Chris Bernard

Tool Menus & Task PanesWord 1.02Word 6.07Word 9715Word 200030 menus50

task panes

Page 27: Design In The Trenches With Chris Bernard

Time for a change

Page 28: Design In The Trenches With Chris Bernard

Fast at any Speed

Page 29: Design In The Trenches With Chris Bernard

Avoiding the Junk Drawer

Page 30: Design In The Trenches With Chris Bernard

obsession to detail

Mastering Details

Page 31: Design In The Trenches With Chris Bernard

Contextual Tabs

Page 32: Design In The Trenches With Chris Bernard

Dropdown Gallery

Page 33: Design In The Trenches With Chris Bernard

Grid Layout Gallery

Page 34: Design In The Trenches With Chris Bernard

In-Ribbon Gallery

Page 35: Design In The Trenches With Chris Bernard

Quick Access and Magic Corners

Page 36: Design In The Trenches With Chris Bernard

Mini-Toolbar: Closer to the Cursor

Page 37: Design In The Trenches With Chris Bernard

Larger control labels

Page 38: Design In The Trenches With Chris Bernard

The Ribbon for Word

Page 39: Design In The Trenches With Chris Bernard

The Ribbon for Excel

Page 40: Design In The Trenches With Chris Bernard

The Ribbon for PowerPoint

Page 41: Design In The Trenches With Chris Bernard
Page 42: Design In The Trenches With Chris Bernard

VistaUser Experience Design

Page 43: Design In The Trenches With Chris Bernard

Design GoalsMake getting what you needefficient & easyMake getting the results you want in Windows more…

visual & directMake people feel great about their experience…creating a positive emotional experience

Page 44: Design In The Trenches With Chris Bernard
Page 45: Design In The Trenches With Chris Bernard

First Impressions

Page 46: Design In The Trenches With Chris Bernard

Set up and welcome

Page 47: Design In The Trenches With Chris Bernard

Start menu, Start button

Page 48: Design In The Trenches With Chris Bernard

Taskbar & Tray

Page 49: Design In The Trenches With Chris Bernard

Window management

Page 50: Design In The Trenches With Chris Bernard

Glass window frames

Page 51: Design In The Trenches With Chris Bernard
Page 52: Design In The Trenches With Chris Bernard

Live Icons (thumbnails)

Page 53: Design In The Trenches With Chris Bernard

Explorer

Page 54: Design In The Trenches With Chris Bernard

Our Process

Page 55: Design In The Trenches With Chris Bernard

Customer research

Page 56: Design In The Trenches With Chris Bernard
Page 57: Design In The Trenches With Chris Bernard

Selected usability focused projects for Office 2007

1. Office 2003 benchmark

2. Eye tracking

3. Card sort

4. Internal longitudinal studies

5. The “Truman” show

6. Office 12 benchmark

7. Extended usage study

8. Beta survey and visits

Page 58: Design In The Trenches With Chris Bernard

Selected usability focused projects for Vista

• 3000+ users in 1:1 research or small group research during the making of Windows Vista

• Instrumentation data was gathered from 8000+ XP users

• 20,000+ users participating in instrumentation programs to gather usage and configuration data and info through survey panels  

• Tracking 150+ common tasks for ease of use in Windows Vista

• 30+ consumer families using beta since 2005 to give feedback on the day-to-day experience

• Families in 7 countries in field research (US, India, Japan, Mexico, Germany, Finland, Israel)

• Ethnographic research was conducted in Finland, Korea, Brazil, India, Russia, and US.

• Engaged with international enterprises to understand their baseline use of XP and monitor improvements with Windows Vista as beta has been deployed

• For Living with Vista we have received close to 5000 comments from 50 families (US and international) since the inception of the program at Beta 1 in August ‘05

Page 59: Design In The Trenches With Chris Bernard

The Paper Prototype

Page 60: Design In The Trenches With Chris Bernard

1000 Card Pickup

Page 61: Design In The Trenches With Chris Bernard

Measuring results

Page 62: Design In The Trenches With Chris Bernard

What Microsoft has learned

Page 63: Design In The Trenches With Chris Bernard

people want more functionalitybut want it to be presented as less

Source: Jakob Nielsen

Page 64: Design In The Trenches With Chris Bernard

the experience is not part of the product— the product is part of the experience

Page 65: Design In The Trenches With Chris Bernard

The experience is the product

Page 66: Design In The Trenches With Chris Bernard

Where to learn more

Get links to the following:• Jensen Harris Blog, Microsoft Office Product Manger• Microsoft Design Web site• Microsoft Expression Web site• Windows Vista Website• Office UI Standards• Vista UI Standards

…at: www.designthinkingdigest.com

Look for a Design in the Trenches Content at www.microsoft.com/expression

Page 67: Design In The Trenches With Chris Bernard

Designing at Microsoft

Page 68: Design In The Trenches With Chris Bernard

Question & Answer?

Page 69: Design In The Trenches With Chris Bernard

Thank you

Page 70: Design In The Trenches With Chris Bernard