Good design – fiddle until you get it right. It’s about giving the user pleasure (ooh, err)

1) Our home
Google Earth – like science fiction! Getting better resolution too. Archive, also. In schools.
Crisis in Darfur – puts events in perspective by putting them on a map – closer to the news

2) Travel
kayak.com – unbiased flight search engine – pings back best/cheapest flights. autofill, inline info on results, interesting stats
filtering flight time, name your price to find out exacty where you can go for your money

3) Environmental conscience
howies.co.uk – business with a conscience – tell their message through their products, get the basics right
experience beyond the site – nice returns form with your item. And they have fun.

4) Shopping
topshop.com – updates daily (daily fixes with RSS etc) to showcase the conveyer belt of new content which comes on stream, blogs and editorial features, video podcasts too.
Design manual for topshop.com – inspirational bedtime reading, with some suggestions for future improvement

5) Security
London fashion week – 2 laptops nicked and pictures uploaded to flickr
Undercover – bad news for thieves! Mac gets stolen, report stolen by using your unique ID… stoen laptop calls home, sends location… and takes a photo of the thief

6) Your online activity
garlic.com – track sensitive info, credit ratings. Revealing

7) Social money
zopa – borrowing/lending directly from people
it’s open and transparent

8) Wealth
globalrichlist.com – your global richlist ranking – social comment to spur people on to donate money – used in schools.

9) Learning
designing interactions by Bill Muggridge. Ask users to mumble to themselves whilst talking through stuff

10) Users in control – creating passionate users
Canyon of pain going from a beginner to an advanced user

11) DIY – travel.dk.com

12) Create positives out of negatives – helpful error messages

13) Web is like a teenager – attitudes have to mature, doodling…

14) Doodling – drawing knobs – cock-a-doodle.com (sex witha miner is particularly amusing)

15) Poke – like everyone else – are hiring

Microsoft:
hard to use
unintuitive
ugly
designed by Engineers

Rich vs reach – choosing the right experience
Windows Presentation Foundation – allows designers and develoeprs to work together
Vista gadgets
ASP.NET AJAX – framework, hmv digital uses this
Silverlight – rich interface stuff
Expression studio – Expression Media has nice transcoding things

Designers and developers speak different languages, apparently that’s why stuff looks different at the end
[I think it's because designers design stuff which is sometimes impossible using tools available in the timeframe, and things change]
Apparently developers break all the beautiful designer-made eggs!
Expression Blend smooths the handover from designer -> developer. Allegedly.

Jeff – Two random reasons for using web standards

Reason 2 – needs to provide tons of content presented in a way users expect
they need to learn how to navigate the site
eg marketplace site for laurence, kansas

Florian – uses flash

Reason 1 – knows nothing about the web, wants to get in fast
first project – 30 days (Flash trial length) – soulbath – a celebration of things that are wrong on the web

Reason 2 – wants to mess with people’s heads and create his own OS, eg Jack OS with Word:m’fucka registered to Vanilla Ice and Excel:rose

Initial thoughts:
-The I’m a mac, i’m a pc analogy doesn’t work for flash vs web standards

We should be long beyond the flash 99% bad debate and realise that they both have strengths and weaknesses

Common use of flash / html
The main principle (accessibility aside) should be that the concept and the idea determine the tool and language you choose.

In some cases this might be exclusive use of one tool, or a combination of them.

Where does Flash make more sense? Where does HTML make more sense?

Example 1 – news sites  – HTML eg www.iht.com
- deep linking & back button very important (difficult in flash)
- People want to be able to copy and paste (possible in flash but not intuitive)
- Good brand experience comes as a result of providing quality news content, not via a rich interface

Example 2 – experience sites
Branded entertainment / broadband / immersive
Sony Bluray- has flat version to comply with DDA – all deep links bring up the same flash if flash is enabled
Beck – all flash. some beck fans loved, some hated

- Brand experience is key
- People are open to assisted discovery
- Deep linking interesting from a viral perspective
- SEO / DDA complience are obvious concerns
- Database-driven, content-heavy sites. Do they work?

Example 3 – application sites
eg picnic, scrapblog, flickr, 37signals
- Emulating the desktop environment
- Not sure whether this is possible with web standards – quicker to use flash to build these sorts of sites
- Picnic – flash – slow, but uses flckr API and flash to do some very nifty stuff
- scrapblog – again using flash – forget that you’re using a browser

Combined use
- NYTimes Campaign finances data – database content -> xml -> flash display
- Lawrence Journal-World elections
- Nathan Borror’s studio
- swfIR – swf image replacement – rounded corners, drop shadows etc. Nice.

What are standards?
Does a high penetration make a technology a standard by default, ie. Flash for video?

If the latest Flash player has much greater penetration than the latest browser that fully supports web standards, does that make Flash a standard in practice, if not in name? [no, if a company defines standards then we end up with a dangerous situation...]

Tangent
- why does everything on the web have to be 2D?

What Ryan does: introduce teams to design principles that can improve the quality of their process and their products.

plazes.com – geolocation service. Website is a bit of a mishmash. Not streamlined enough. Need to evolve.

1) Evolution and product design

“The web is moving away from big sites with lots of pages and towards applications with interfaces”
- Peter Merholz

All products undergoing iteration evolve – some faster than others

eg WordPress – tweaks on a very regular basis
process refinements
taxonomy and IA iteration
inteface improvements – removing impediments

What’s the opposite of gradual iteration?

topix.com – get specific news for a certain area. Successful, and relaunched with a different idea:
- users were engaging with local forums, so they focussed on this

Punctuation in product development

In evolutionary biology ‘punctuation’ refers to a sudden appearance of a new species

At a slow-enough pace, gradualism looks like statis – eg ebay.com

eg riya visual search – scan photos, analyse and give you others like it. 95% approval/satisfaction rate, so people weren’t coming back
Relaunched as a shopping engine eg to imitate celebs – http://www.like.com

Differentiation in the name of survival

Gradualism – small iterations
Punctuation – redefinition and refinement

How do you prepare for punctuation? It’s a big deal. Pick the right tools for the job.

2) A toolset for evolution

Restate the value
You don’t have a blank slate!
Forced to handle the history of the work you’ve done
What’s your elevator pitch? What’s the current goal/mission of your team? If you can’t describe it then you’ve added feature after feature chasing users, but you’ve lost sight of what/who you had in the beginning
Know your audience, know your benefit, know your competition, know your differentiation

Elevator strategy: For/Who/The/Is a/That/Unlike/We
Team activity makes people agree on common goals
The needs of users and the market will shift over time. Take the opportunity to understand your audience.

Tell the story
Conversations about future releases tend to begin with feature roadmap
It’s more about where people are taking the product instead of setting in stone where the product is going next [power to the people!]
Releases should be built on how you envision users engaging with your product
Personas are just marketing segments with headshots
Storytelling is about understanding motivations, intentions and expectations rather than segmenting them
A day in the life – cartoon of someone using the site at different times of the day
With plazes – use cases – users updating their location and then a friend asks plazes who’s nearby
Stories teams tell capture experiences that reduce frustration and celebrate engagement and extension.
Storytelling strongly links an appreciation for users’ needs with ideas for how to fulfil them
From these stories a feature set and rodmap aligned with current and future users is able to emerge

Atomize the features
With a common goal, and user stories to fulful, it’s helpful to understand the feature set
It’s the atomic structure – the core tenets
What’s the easiest way to sort out what features lie at the core of your product?
Working within constraints
For plazes the SMS component was imperative – very constrictive environment
Plazes core is: communicate presence as simply as possible (wifi went, everything else went)
Sometimes referred to as ‘peeling the onion’

Rich Skrenta [http://tinyurl.com/2fwexd] – post about evolving topix. Ride the winners. What on the site is working and reorganise around those principles
Nail the core feature. Everything else will follow

Tidy the seams
Conway’s law “organisations which design systems are constrained to produce designs which are copies of the communication structures of these organisations”
Design tends to be a function of the the team that put it together
No coherence/consistency between features on different platforms
The silo-ed way in which you built the channels are not the way in which people are experiencing them.
Twitter is good, identical commands in all channels IM/Mobile. Yay :)
Exercise thoughtful restraint
http://www.iminlikewithyou.com – world of checkboxes to select how you hear about the sites
37 signals’ todolist offering much more straightforward/restrained
Reduce noise where you can – overloading people with information is not a good way to engage with them. Don’t fill the screen just because you can.

3) Summary
[Phew. Fingers sore]
Evolution is tricky. Consider carefully before evolving too fast – your current audience and your team’s cohesion are both at risk
Simplification feeds back into the entire design process, simplifying the product and enabling differentiation

Impressive portfolio…

AKQA – huge company – SF/LDN/NY/DC/Shanghai 200 people in London, 500 people globally

Don’t think of themselves as designers etc
They create ideas that solve client’s problems – slightly bigger perspective.

26% of people remember what they hear
43% of people remember what they see
67% of people remember what they experience – something which combines different senses
[jingle writers have it tough, huh]

Experience = Remember

5 ways to make your brand more memorable

1) Have a point of view.
Being everything to everyone leaves you with nothing.

Example:
halo2.com – all in alien language of the covenant, cryptic navigation, no english text
how long would it take for users to crack the website to read it?
AKQA guessed 2 weeks.
Within 24 hours users collaborated parts of the character set and posted an entire translation into English
Translation and localisation is a pain in the bum – make up one language and consumers will do the translations for you.
Halo2 grossed more money in the weekend of launch than Spiderman 2 movie in the same weekend

2) Be who you are
Be pure and honest

Example: perfectdarkzero.com
Main character Joanna Dark has to kill everyone at Datadyne
Give details, explore Joanna Dark’s room. [Very dark and a bit dull...]
You nominate a friend to be killed. And they get emailed to say they’ve been killed. Nice…
Client afraid of promoting dark stuff – even though the game is about killing people

3) Let them engage with you
Give them something meaningful to do

Example: http://www.runlondon.com (nike 10k)

Googlemap mashup where you can store your local run routes.
Also responsible for the retail design instore
Text message alerts
Video clip of person crossing the finish line

4) Be relevant
Prove yourself worthy in whatever medium you work with.

Example: http://www.yell.com

Initially just a set of animated gifs for yell.com. 5 years on they now have the online and offline advertising accounts
Nice TV ad, and some examples of interactive bus shelters to find stuff local to that bus shelter.
Digital sign on side of bus – bus has GPS chip to tailor messages relevant to the bus location
Try and find relevant ways to catch up with people

5) Simplify, simplify, simplify
When you think it’s simple enough, simplify it some more

Example: nike air
How do you make a buzz about a shoe without a shoe?
Show it from the inside – made a model of the air bubble – nice detail image

http://stuffandnonsense.co.uk/downloads/fowd.zip

“it doesn’t matter the colour of the car, but what goes on beneath the bonnet” – billy bragg – a lover sings
Sums up the divide between visual designers and developers

Top Gear cool wall but for websites

Are Yahoo cool? No.
Yahoo are moving up to the sub-zero category apparently, Andy Clarke puts it on the seriously uncool part

Twitter – not cool, twitter API is cool though.
Digg – doesn’t use visualisation, and the conversations aren’t very interesting – populated by 17-year-olds, uncool
Microsoft – uncool (sponsors!!)
Dropsend – rad! (says Ryan Carson) cool because no-one uses it (rawr!)
Flickr – achieved a superb brand loyalty over photobucket etc – sub-zero

What we’re trying to do is create products that people love to use
Brand experience
Honda CR-V – uncool car but Clarke’s been driving it for 11 years. He doesn’t know about it under the hood, but it works really well.
If we look under the hood of things, there will be stuff that people don’t understand .We don’t have to understand the intracacies of every single part of every part of the app we’re making.

So what do designers do for a living? What is a web designer?
How can web designers best interface with other people in the industry to avoid making massive oily messes?

Richard – setting up a site called reallyworried.com – advice/social networking/blogging site
Richard didn’t appreciate that Clarke isn’t just someone who chooses colours and whatnot
What he got from Clarke as a designer was more than making the pages look pretty: work on functionality/usability

Designers often very separate to development team. Sometimes IA people too.
Detailed wireframes before design doesn’t leave room for design flexibility
Wireframes take ages to do
Photoshop comps of every single page – take ages to do too.
Does every piece of the project need to be mapped out in a mass-produced car factory kindof of way? Probably not.
The process itself is not very creative.

Instead:
Roughly what goes where? (less prescriptive) – jason santa maria
Reams of documentation / func spec not necessary – grey boxes which say ‘what goes where’
Avoid hangovers from other media
Designer – wants to communicate the essence of what it’s about – the brand values
For really worried – just one photoshop comp for the whole site
General colour pallette and to show what goes where
Big advocate of using XHTML and CSS in the design process to create meaningful prototypes
How do you design liquid layouts? How do you specify how the text scales up?
How make something static show dynamic workflow?
How do you communicate interaction and error messages on forms?
Did XHTML/CSS prototypes solely in firefox
95% of stuff made it through to the final project and a fair amount of time was saved
Write notes on top of design layout to communicate meaning – perhaps with suggested markup guides in the comp

“as an interface designer I can use microformats and then people who actually know what they are doing can do really col stuff with the data” – dan cederholm

Not a web design shop
Not a flash shop
Not a production house
Not an ad agency

‘Digital creative agency’

Don’t pigeon-hole people into roles. [a LOT of time emphasising this]

Good old-fashioned storytelling / creating an experience around a brand

Guitar hero in the office is the key to their success [hint hint]

Ownership of the work, don’t employ freelancers

Producers instead of project managers so that they feel like they’ve made creative decisions [aww]

Brainstorming meetings includes someone from every part of the business. Anyone can have an idea.
- everyone has an equal voice from intern to senior mgmt
- everyone feels like they own it a bit

The last 5% – if your ideas are incorporated you’ll be more passionate about it
They don’t have a ‘pens down’ moment. Detail is what makes things good.

Collaboration
Office designed for collaboration, soft areas

Example: The Big Reel
Target bought all the screens on times square on NYE, Big Spaceship created animations for the screens
Motion reel for people interested in doing the work (just spec work around other projects)
Review session to edit down the ideas
Developers doing animation etc

Example: Nike Air
Keyboard controls control flash animation of athlete animations – crazy animations, some of which are videos, some are vector animations, some are programmatic elements within flash – convergence of different skills in one creative product: http://www.nike.com/nikeair/us/?sitesrc=uslanding
Interactive shoe specs too
visualiser demo for loads of flash effects http://labs.bigspaceship.com/apps/visualizer/beta1_2/visualizer_demo.html
Green screen space to create videos of eg athletes running

LemonJelly
Director of airside is in LemonJelly so good thing.
Record sleeves – way to engage people through interaction
Good to surprise people, give them something they don’t expect (hopefully nice things)
Nice moment when you find the CD
Live shows experience – given a lucky bag
- bingo warmup pencil
- balloons – visual spectacle, breaks down social barriers
- ticket was a t-shirt (different gig), excuse to talk to people, also a long-lasting effect when you wear stuff later, also hidden UV element revealed at the gig

MEEGHOTEPH
- alien god at music festivals
- animated ventriloquist puppet
- people confided in him

Wardrobe of the stars
- club space with a wardrobe, camera in there which displays into club

Petshopboys official site http://www.petshopboys.com
- no brand / logo, so needed to design without this
- wanted it to look like a newspaper
- flash front end, enormous database backend [accessibility?]
- fan interaction? too much porn. petheads
- band-generated content – moblogging from Neil and Chris

Engagement – acitive state of focused attention during an exchange of value between consumer and business

Why does engagement matter to marketers?
- Frames the future of connectinos between consumers and brands
- It better defines effective comunication with customers

Begin by modeling consumer behaviour / experience
- What are their goals / process to achieve them?

Consumer
I need something -> what’s right for me  -> PURCHASE -> Am I happy with it -> do i want more

Company
Awareness  (research)-> interest (inform) -> preference -> PURCHASE -> support  (eg loyalty programme)-> re-purchase

Consumers don’t separate their online and offline lives
Smart digital connects, integrates with other marketing eforts

Different types of consumer value
- Entertainment
eg kids creating cartoons online and selling POPTARTS ads around this

- Personalisation
eg SingTel, asia created an online interactive gameshow, like blog idol big brother stylee in singapore
client value: data capture, lead generation
consumer value: chance to be famous

- Propretary content
eg Purina – petcare podcasts
client value: created a dialogue with consumers, increased brand awareness, create a preference for the brand by positioning and an expert
consumer value: unique content, and exclusive myspace partnership offered access via mobile phone -

- Offer-based financial value
self explanatory

Value exhange

Consumers want to play, have fun and be entertained.

Play

eg Cadillac + XBox360
Rather than just slap logo into racing game (no consumer value), created expansion pack which allowed you to have 3 extra in-game cars to drive. Virtual test drive. Created value for client and consumer. Kerching! Also brought in and raised Cadillac awareness amongst a younger audience, which the client wanted.

Personalisation/self-expression
Nike isn’t the only brand giving control to customers (trainers)
Timberland also doing this

eg HomeDepot + arc = BEHR paint
Choosing colours for home is difficult, so whites and neutrals account for more than 90% of purchases
Helping consumers visualise the final room will enable them to make bolder choices and buy more colour. More colour = more $$$ because you need more different cans of paint & leftovers (is less efficient)
Solution: create online sandbox to experiment. Application will warn users when they’re making a hideous mess. At the end, printout and take to store -> all BEHR paint and so built disposition towards the brand. http://www.behr.com/behrx/workbook/index.jsp

eg VERB Yellowball
Campaign to get tweens more physically active. Verb is new brand around this. Online&offline intersection
Distrubuted 500,000 yellow playground balls, printed with 3 instructions
1) Play with the ball
2) Go to verbnow.com, tell us what you did with this ball (via code)
3) Pass ball to someone else
Viral connection – inspires kids to do something special with the ball
Balls given to relevant celebs
Free iTunes download every time you blog about the ball
[But why does this make kids carry on being active? Surely this is a play once, pass it on thing? And then listen to iTunes song and sit in front of their computer again]
Video link a nice idea
Interactive projections created intrigue – used Reactrix http://www.reactrix.com
Teacher pocket guide to bring yellowball into school

Q&A

How expensive are these promotional campaigns?
Verb not that expensive – balls were expensive but then just one site (6 month programme)

BEHR paint – a few years old, just need to keep it fresh and keep a step ahead

Not trying to preach – trying to help users to deal with a problem, with the help of a brand. Value exchange vs preaching.

Apollo allows developers to deploy rich web apps to the desktop through a runtime environment

Examples:

EBay Desktop
Adobe flex app
Still able to display the user-entered HTML within the flash app
Apollo uses webkit HTML rendering engine (same as Safari etc) integrated with the flash engine

Nice functionality
- search results kept in separate pane to the result you’re looking at to speed up browsing
- multiple images are shown like a deck of cards which shuffles when you click on them. Pretty!

Design changes put the business at risk through new functionality
Solution: use beta version for users to feed back on. Downside: expensive to buy new server farm etc

Desktop app is client side so can use existing backend functionality
(will changes to desktop app scare users away too, though?)

Apollo has transparancy support

App stack makes it easy for developers to develop.

Functionalities:
Offline/occasionally connected
File IO
Custom window chrome shape/alpha
System notifications and alerts – eg when you’ve been outbid on an item on ebay [neat]
Multi-window support
Drag and drop/clipboard access
Applications can run in background
Network stack
Application update
DRM

Workflow
- Develop/debug in IDE
- Package app for deployment
- Distribute / update

Tools:
- IDEs such as Flex Builder, DreamWeaver, Eclipse
- Text editors
- Free command ine tools & SDK

10 tips for better signup forms (Ryan Singer)

1) Making stuff up is hard – username and password
- easy questions first as it builds momentum

2) Rockstar2084 is taken… use AJAX to do live checking on usernames

3) Forgot password stuff etc. Design form with least amount of info possible to encourage signup

4) Words are your friends – make it friendly

5) Check form validation and make it easy to enter information in any format, don’t be prescriptive

6) Muse me – examples beneath form fields can be really enticing

7) Tell me what I’m getting

8) Error handling – don’t use BIG RED BLOCKS AND CAPITALS

9) Welcome – signup is a whole process, needs to be as comfortable as possible – first time someone visits we should have a special state to say thanks for signing up.

10) Just give me the keys – keep signup email really simple, move ‘getting started’ guide to the app.

Big ideas:

- think about momentum
- signup doesn’t stop at submit
- people don’t care about using your tool – they care about kicking ass in their own work
- think about users!!

Designing a web app with character (Denise Wilton)

Why character?

Why do people love flickr?
Not just because it’s usable, but because it’s nice to them – it has character, personality

Who are you?
Mind your language.  Make sure all informative text is in ‘character’

Say what you’re saying – typeface says a lot about you

No matter how simple stuff is – break it down into easy steps because newbies will find all applications daunting to start with.

Use conventions – don’t be afraid of these

Character should come second to functionality/usability

Once design is finished – wait until things have been coded because things will need tweaking afterwards

Remember who you are

They think it’s all over – don’t launch a site and go away – bug fixing is inevitable, don’t feel afraid to change stuff. People engaging and sending email is a good thing.

[pretty presentation!]

8 tips for nurturing your people (George Oates)

You better than My

1) Gates
Sitemaps begone – branching to a myriad of different outcomes
Adding a picture to favourites / adding a friend – these things help users to put down roots
Important to make these functions as easy and intuitive as possible

2) Pretty URLs
URL as a command line
Use them as a method in design when thinking about new functionality

3) Design for zero data
Make pages inviting when eg people don’t have groups yet
Make suggestions

4) Sensible defaults
Flickr is complex – lots of settings which people don’t touch
Twitter assumes you want to make your twitters private, but this is changeable – and use directional copy around setting changes

5) Accept different languages

6) Show activity
http://www.vimeo.com – flickr for video sharing?
‘NOW’ box – new uploads etc

7) Exploration
Weekly charts of top tracks – good to see when new things happen (friends’ photos on flickr)

8) Neutral point of view
‘Empty vessel’ – don’t get too involved or arbitrate users
Community guidelines – nicely written (http://www.flickr.com/guidelines.gne)

Foundation!

9) Profit!

Q&A

1) Make it easy for users to cancel their accounts – linkedin is difficult and no fun ,strange crossover between social network and business network

2) Delicious – not great design, but does work. It would be nice if it were a little more personal – needs to build more of an emotional connection with the user? Twitter – very personalisable, good antithesis. Do you need to have an emotional connection with your web apps? Passion is important and connection does build that. On the other hand, where things are strictly functional/vital you don’t want to be passionate about it – eg water/electricity

3) ZOHO writer (online word processor)  – email ID on signup form is ambiguous

4) Google analytics – navigation is really difficult. Analogy – interface wearing as you use it – links get darker when you use them more frequently etc. BBC already implemented this on homepage

How to keep inspired to create usable stuff – George Oates think usability is overrated, content will sometimes override that if it’s good enough. Ryan Singer says – scratch your own itch. If something bugs you, build something new for it. Make something better.

From the floor: What’s the absolute start point?
Denise: decide what it is you want your user to do. Eg design amazing cards with no design skills. Think about how you want your user to feel – this will inform lots of other stuff eg typography, shapes etc.

From the floor: Favourite instances of web app appealing to personality?
George: when someone you don’t know leaves a comment on one of your photos – enthralling
Denise: hello in a different language is a lovely thing – though George notes some users thought this was an error
Ryan: include avatars – good way to personalise

Some of Brendan’s ideas for inspiration…

Reinhold Messner – Murdering the impossible (National Geographic article)
Big risk-taker: first man to climb everest without oxygen.
Most inspirational thing :it wasn’t about the mountains – not a naturalist – he’s interested in the interaction between the man and the mountain. Or something.

Shame – western, 1952. Great movie.
Two different edits – apparently more interesting when pause is left in gun-slinging scene – adds to tension

WordPress – when you delete stuff, the post glows red before it disappears. Is this reassuring? Tenuous link with the cowboy scene.

Bookshop! With a fireplace. Owner wraps up books in brown paper and string. How exciting! A micro journey. [Apple product experience a good example]

http://www.diesel.com/submityourself/
Tags hanging from the sky with other peoples’ sacrifices on them – despite it being quite difficult to submit a sacrifice. The experience drew the users in.

Deal or no deal
The genius of it – it could be over in an ad break, but it’s on for an hour
American version – silver briefcases and beautiful women, doesn’t work as well
Beauty of it – the sign is locked in a red box, and all open the box in the same way
Detail – important

Trains
Receipt + p.t.o. + origami swans (swones). p.t.o. makes it exciting – suspense

Constraints are good

Things we make should be like magic – reinvent interfaces (eg amount of playdoh to control speed of movie etc)

Edgar Allan Poe

They who dream by day are cognizant of many things which ecape those who dream only by night.

(we should all work in our pyjamas)