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:[email protected]
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