Designing for Web & BeyondDon’t Get Caught With Your Browser Down

Building Modern Web SitesThe Why, What & How

Designing, building, and marketing modern web sites has been one of our core evangelism tactics over the past few years.

Can Microsoft.com become a hero web site for IE10?

Can Microsoft.com become a modern, standards-based web site?Can Microsoft.com become a hero web site for IE10?

The benefits of a modern, standards-based web site:Great customer experienceSeamlessly cross-deviceHigh performanceLower maintenance costsBetter marketabilityPerception

So just make your site responsive… right?

http://bit.ly/Wi0xvw

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”

Ethan Marcotte, A List Apart 2010http://bit.ly/Wi0xvw

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”

Ethan Marcotte, A List Apart 2010http://bit.ly/Wi0xvw

Sure, Responsive Design is hip & cool, but is it enough?User context drives needs.Devices have different capabilities.

We need to be “on PAR”but what the hell does that mean?

A set of web development methodologies and techniques used for the creation of web experiences that work seamlessly across browsers, platforms, sizes, & form factors.

Progressive+Adaptive+Responsive

Being on PAR covers the 3 Tenets of Modern Web DesignState-of-art Front-end.Content that meet’s user intent.Contemporary Design.

Be Progressive with State-of-art Front-endHTML5 & CSS3Table-less layoutSemantic codeJavaScript libraries — jQuery, Fittext, etc.Performance measures“Beautiful” hand-written markup

Be Adaptive with content that meet’s user intentEnsure site capabilities, features and content, are appropriately rendered and targeted to the fullest extent possible - based on a visitor’s device type, location, connection speed, and browser/OS.

Be Responsive with contemporary designAn aesthetically and functionally great design that is evidently web savvy.

So we knew what we had to do. We just had to figure out how to bring others along the journey.… and by others, we really mean our execs

Slide content removed due to confidentiality

What was the Customer Criteria for Selecting Site as Best in Class?

Online Brand Research Study

34%

clear / clean / concise / simple

24%

easy to navigate

20%

good layout / well organized

15%

easy to find what you’re looking for

13%

graphics / pictures + images

Q: What is it about (this/these) websites that makes (it/them) the best for visual design in your opinion?

Q: What (does this/do these) website(s) do better than other sites?

22

Microsoft Confidential.

AliveCreate human interaction and connections.

ClearCreate structure through order.

InclusiveMake an impact on the world.

Microsoft.com Design ValuesDelight

Elevate content that matters most.

DetailedPride in craftsmanship.

SimpleFierce reduction of elements.

It’s easy to build experiences that function, are understandable, and usable. We also need to build experiences that bring joy, excitement, fun, and yes, beauty to peoples lives.

UX Hierarchy Model for Creating Desirable Interfaces

MeaningfulHas personal significance

PleasurableMemorable experience worth

sharing

ConvenientSuper easy to use, works like I

think

UsableCan be used without difficulty

ReliableIs available and accurate

Functional (Useful)Works as programmed

Focused on Tasks(Platform, Features)

**Modified from model created by Stephen P. Anderson

THIS IS THE CHASM THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO

CROSS

Focused on Experiences(People, Activities, Context)

Have a believable story Co-create value with customers Connect people in community Appeal to emotional and social values Highly personalEmpower people to do things previously not possible

Simplify, organize, and clarify informationDisplay information visuallyReduce features and complexityEasy to understandUse language for more natural interactionsAdd features that support desired behaviors (gestures)

Have a Personality Design for FLOW (boredom vs anxiety) Prioritize Aesthetics (visual, behaviors, sounds, psychology) Create conversational and context aware interactions (Narrative IA structures, compelling dialog) Elicit Desire (Limited availability, limited access, curious and seductive experiences)

We needed to change how we workWe needed “Lean UX”

Common challengesTendency for siloed work – separation of people/rolesStuck in the “Waterfall” method – Business planning phase, Design phase, Develop phase Decision driven meetings, wrestling for “ownership”Compromises were being made and the aspirational vision was being lostUX wasn’t championing the right experience

Lean UX is agile, not Waterfall, which is more important than ever between Planning, Design & Engineering

With Lean UX, we’ve found that the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.We were willing to learn something new.

A new type of designer was born“devigner” or “deseloper”

Lean UX key learnings Early, frequent iteration together drives unity and reduces opportunities for personal biasYou can expand the surface area of discussion without becoming trapped by it Having a common understanding of problems and our philosophy speeds up downstream decisions

The result.

A new Microsoft.com

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive design [Multi-device design] represents a fundamental shift in how we’ll build websites for the decade to come.”-Jeffrey Veen

It was a bumpy, but fun, road

Fixed width layouts :(There is no standard screen resolution, so quit designing like there is.

133612801024

480

1920

1440 16001680 1360

800 2560 320768

Responsive = responsibleConsumption of content is more than just

design. Ensure your solutions are accessible, lightweight, cross-browser compatible, etc.

Content hierarchy choreography

Land on key content flows, balanced with business priorities. Data will help prioritize how content layout changes, disappears - but beware of removing content. Instead use content enhancement.

Breakpoints and tweakpoints

“If it ain’t broke, then don’t fix it.” – Someone

Define breakpoints when content breaks, not for common device sizes

Microsoft.com breakpoint matrix

It was ok to forget about 800x600, now any size goes

Designing from the Gut

Designing from the gut is a radical concept. It is generally met with a tremendous amount of friction in most software circles that tend to rely heavily on "logic and data" for all decisions.

As fate would have it, it became the talk of the Internet. Twitter was abuzz with opinions. The design and developer community, tech blogs and online news sites, wrote about it.

But what we cared about most, was what our users thought…“Looks great!” – Posted on Nov 28, 2012

Let’s Chatduane.clare@microsoft.com