Design for WPF & Silverlight

Create experiences that captivate, not intimidate users

who am I?

i’m a creative

and a technologist

and my clients have to make money too

clients like these..

And I work on some of those, with a whole lot of Romanians!

Conchango’s biggest outsource development partner is

iQuestCluj, Romania

and I work for Conchango

(not Microsoft!)

But we do work a lot with Microsoft

Gold Certified Partner in 8 disciplines

Early adopter of WPF, Silverlight and Live Services

experience design

experience design is about making emotional connections with people

make ‘delight’, ‘happiness’ and ‘elegance’ part of your success criteria

So, why do I love

Maybe its because its one of the few brands

that lives out its value - fun!

After all, how many brands would say…

“More experience than our name suggests”

Is it this guy?

These…

…or these?

http://www.v-flyer.com

Her?

Or her…

Her?

…or her?

Him?

Is it her?

Them?

Contrast them with…

Maybe the reason I love Virgin is that while I might be sat to one of these…

I am just as likely to be sat next to one of these

Or the bar?

Even these get a splash…

Meike van Schijndel - “kisses”

But when things go wrong?

So how far do people go with this love?

Too far?

flickr

V-flyer.com

How much love?

Let’s use a web 2.0 measure of love…

“I love Virgin Atlantic”

But what about creating a brand love index?

It wasn’t enough for me to see them win…

So I normalised it against annual passenger numbers:

BA 33,600,000Virgin 5,850,000

And what happened?

®

And the point of all of this?

At Conchango, we create the digital experiences people love

“Experience matters”

When price, product, delivery all become the same, what will separate you out from

your competition?

“Experience based differentiation”This is what the analysts call it.

It’s the thing that makes people fall in love with your software, websites

It’s technologies like WPF, Silverlight & Live Services, that give us a whole new

toolkit to play with!

so what’s possible?

We have some new tools – want to see them?

Warning for those still sleeping: Loud music coming!

52

WPF & SILVERLIGHT VIDEO

so what can possibly go wrong?

When you can do something…

Doesn’t mean you should!

The modern equivalentThe feature:• “News In Pictures” – it displays all the pictures in

today’s news!• But it did not start out like that…• We made it 3D! Why? Because we could!• Nobody could work out how to use it!• The 3D didn’t add anything to the experience – it just

made it a bit harder.• (sad, but true)

Is this appropriate to the brand?

Is this?

BUNĀ FRUMOASO

In other words…

What is right for one user is not always right for another

What is right for one brand is not always right for another

And using features and techniques “just because you can” is not right either!

how do you keep your projects on track?

A Quick Exercise

Q. Which is the better radio?Same Price, same manufacturer,

Same components, Same build quality

A B

But before you decide…This is Jenny James

Age: 56

Profession:Retired (Marketing)

Lives: Outside London

Statement: “Oh, I won’t be able

to work it out!”

If you started with Jenny

which radio would you design?

I just want to listen to the radio

Use controls I’m comfortable with

Give me a quality product

It only does one thing – it’s a radio!

Knobs and buttons

‘Retro’ feel – like they used to make them!

But before you decide…This is Tony Hewitt

Age: 58

Profession:Pipeline engineerLives: Scotland, Manchester

& Saudi Arabia

Statement: “I can’t live without

my cricket!”

If you started with Tony

which radio would you design?

I travel a lot

I want to listen to cricket

Give me a quality product

Dual time zone function helps me – and an alarm clock is useful too

Gets shortwave, long wave and all sorts

Lightweight and well engineered

I travel a lot

I want to listen to English football

Give me a quality product

It’s too heavy and old fashioned to be useful to me

this is a user-centred approach

What is a user-centred approach?

Observe and study real users first

Work out what their goals are

Design things only that meet those goals

Don’t start with a ‘feature list’

Validation

Test what you’re doing as you go along

Change if it could be a better experience for users – even if it doesn’t give you something YOU want!

How do you do it?

Get out there... spy on people!(guerilla ethnography)

Develop personasMake everyone in the team responsible for user

happiness! Make ‘delight’ a key performance indicator

Why is it better? (how to sell this approach)

Your software will be more effectiveYou will focus more on the 20% that users actually use!

• For users this means:– They are more efficient and make less mistakes– They are happier– They are more likely to buy more– They will be happy to use your application again

• For you this means:– Fewer support issues– Your company makes more money– Your boss will like you– You will get a pay rise– You will sleep better at night– Your family will see more of you

but users have changed

let’s understand a bit more about them

Her Social NetworkIt’s very tightly integrated to messenger

– so it’s easy to fall into

It starts as uploading a photo or two to show her friend in New Zealand…

Then writing some comments on the photos…

Now it’s the hub of communicating news about her family to her remote friends and family

Other ways to do the same thing: Flickr, MySpace, Bebo

Her Start Page

Has all she needs in itMore ‘revealing’ and diverse

than just The BBC newsFaster to get the stuff she

wantsAlternatives: Google Start

page & Page-flakes

And Facebook is hurting Instant Messaging

39% of the Facebook users we surveyed, use IM less after

joining Facebook

She’s got higher expectations now…

What’s with the blank space and small text?If I don’t know what to look for, I’m stuck

I want to know what’s the ‘latest thing’The interaction is rubbish, the images are rubbish… if I want

to shop Next, I’ll get the Catalogue

She’s got higher expectations now…

That’s better!

Helps me work out what I want

Gives me ‘something more’

Is reality, not just marketing hype

Web 2 = Social Evolution CrystallisedThe web is now mainstream

75% of UK households connected2 in 3 are on broadband

Increased social use of the internetPhoto sharing not sendingInstant messaging & blogging, not only email

People want to cut out the rubbish (snack culture)RSS feeds / Start Pages eliminate the ‘noise’

People are disbelieving the ‘marketing hype’Wanting to know what real people think & what she’s not being told

The PC is no longer in the study

“Search without the text box”

Advanced search without the drop-down!

Kayak.comUsers now ‘adjust’

they don’t really understand

‘filtering’

just watch this…

Applications like this are setting the standard

Although broadband and internet penetration is high in many countries, we are still only just entering the ‘late majority’

People of all ages, and backgrounds will begin using the internet, and they will start with applications like the ones you’ve seen

These applications will set their expectation for what you have to design & build

working together

what people will use(desire)

what you can build

(feasibility)

what the business can support(viability)

what we want!

can’t be built

nobodyuses it

not costjustified

Design Development

Visual designer Interaction designer Developer

• Branding• Animation

• Usability• Ergonomics

• Code!

You want what?

The Waterfall

The tight team

The Interactive Designer

The Producer

User Interface Development Workflow

A Great “Integrator”Preserves design integrity

Not his “day job” to designKnows when a design is “on,” but can fill in the gaps

Preserves code integrityDoesn’t break functioning code

Lives in XAML and does things “right”Understand development environment and tools

Ways of working

• Traditional – waterfall– Designer > JPEG– Developer > Translates to XAML

• The Interactive Designer– Designer > Design Tools & XAML– Developer > XAML & C#

• The Producer– Designers > Design Tools only, or +XAML– The Producer > Design Tools, XAML & C#– Developers > XAML & C#

Most Risk

Least Risk

Even more tips!

• Don’t make designers a bottleneck– Train developers in image manipulation in

Photoshop– (cut, crop, resize, output)

• Design comes from everyone– Trust your developers to participate in design

decisions– You can start the design on paper, in code, or in

mockups

Be Agile!

Do NOT spend an eternity in a design phasePick one thing to do, and get going as fast as you

canStop and test with usersAdapt what you’ve done, and take on something

new

Don’t wait more than 4 weeks until the client sees something working

Final tips

DO spend time drawing and brainstormingDO spend time working things out in code

DO try to be original - invent something new...

…But DON’T be too proud to use things you know work already!

The results

If you get it right?#1 – AJAX

But first – if you don’t…

If you get it right?#2 – Flash & Silverlight of course!

ETOnline

Or this one…

Talk to me:paul.dawson@conchango.com

Talk to a great Romanian company:http://www.iquestint.com

Find out more about Silverlight, WPF and Windows Live:http://www.microsoft.com/silverlight

http://dev.live.com

Merci