Not the fortunate ones
April 26, 2007Straight men of the world: do you listen to Cyndi Lauper at full volume on the tube? Do you just want to have fun? You big Girl?
Straight men of the world: do you listen to Cyndi Lauper at full volume on the tube? Do you just want to have fun? You big Girl?
Some notes on my trip to California:
Stranger than Sherrybaby
So I was watching Stranger Than Fiction on the trip to LAX, and getting quite engrossed in the lightweight story about Harold Crick (played by the affable Will Ferrell) and his love interest Ana Pascal (played by Maggie Gyllenhaal) when all of a sudden, Ana - a Harvard dropout who has opened a cake shop - turns out also to be a single mother with a bit of a drug problem. Deep! Mysteriously, she has also become the film’s main protagonist. Will Ferrell and his comic relief are nowhere to be seen. I start to feel a bit uncomfortable. Ana’s situation gets worse when she is forced to go into rehab. 20 minutes pass before I realise that the generously-sized german man next to me leaned on the remote, flipping me from Stranger Than Fiction to Sherrybaby without me noticing. Note to British Airways - don’t put two Maggie Gyllenhaal movies on adjacent channels please (I know that wide-enough seats is rather too much to ask)
Weatlh gradients
So in London you can be walking down one street where the houses are worth millions, turn the corner and end up in some of the roughest areas of the city. The same is definitely true in California - San Diego and LA are both cities where haves and have-nots live on completely different planes. However, nowhere has the difference between wealth and poverty been so raw as in this picture of myself sitting next to the brilliant Jeff Bezos, founder and CEO of amazon.com:
Braaaaaains
… is what I spent a large proportion of last week saying whilst playing Werewolf. I blame the Sonic Body Pong pioneer, Tikva Morowati (who incidentally has the most infectious laugh known to man)
“That’s out of hand”
Apparently this means “that’s rather silly and slightly unbelievable”
“ridiculous”
… this means “very good indeed, old chap”
EekTech
Normally I consider myself to be reasonably technically au-fait, but this conference blew me away. From the lovely Marc Escobosa who showed me how to use my MacBook like less of a n00b, to Scott Berkun the project management guru, to Danah Boyd whose insight into social networks is incredible - all these people and more made me realise just how much good stuff is out there and how much I need to catch up.
Surfliner
In terms of scenery, this train journey is pretty awesome, travelling through some pretty bleak parts of LA before hugging the coast with largely uninterrupted views of the Pacific. Beautiful stuff. I stopped off on the way back from San Diego to LA at the imaginatively named Oceanside - which is right next to the ocean. The locals sneered at me (pasty and carrying a laptop and a scraggy backpack) and I couldn’t shake my booty with the beach bums and bumettes (is that a word?) but fun was had nonetheless.
My first-ever glimpse of the Pacific ocean, originally uploaded by minor9th.
Hi, my name’s Stereo Mic
Drinking several Surfers on Acid in Rick’s bar on Main St in Santa Monica messed with my head rather a lot. I lay the blame squarely on Kerry, who also surreptitiously got me into watching Top Design, playing Wario on the Wii and cycling along the beach. None of which was half bad at all. Yay Kerry.
Getty outta town
The Getty Center is a billion-dollar beauty, impossibly located a million miles away from sidewalks on a hill overlooking Bel Air (I walked through a very American Dream neighbourhood to get to it). The tour guides are called docents, which means they are more knowledgeable but also more cynical, which was fun.
Santa Monica pier is a busy place at night
Unlike its portrayal by 24 - in Season 5 there’s a bit of a chase on the deserted pier in the 9-10pm hour. I can report that it’s a misleading episode! Loads of people around. All on the ferris wheel, too.
Pacific wheel on Santa Monica pier, originally uploaded by minor9th.
Hollywood history museum
… was slightly disappointing. Sorry guys - but despite being located in the old Max Factor building, and having a hell of a lot of Cool Stuff From Films (including ruby slippers and Brokeback Mountain shirts) I was a bit weirded out. The little old lady at the front desk was way too excitable, too.
I want that one
I’ll forever be baffled by the people who, at baggage reclaim, wander up to the most conspicuous bag on the carousel (you know, the red one with the pink polka dots and pictures of sausages stuck on it), paw the sides, grasp the handle, check the label tag, and then decide it’s not theirs after all. I refrained from collecting photographic evidence as I thought some burly anti-terror policemen would come and bop me on the nose.
So I totally fell in love with the Californian lifestyle. If I could
do something about my ineptitude with motor vehicles and the extreme whiteness of my skin which makes it reflect all sunlight, perhaps I’d have a chance of living there. In the meantime I’ll hang on to fond memories and bask in London’s freakishly beautiful springtime.
15 things in 15 minutes
Steve Pearce from Poke London
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
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
Thoughts from a designer
Jon Harris, User Experience evangelist
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.
Standards vs Flash
Florian Schmitt, (Hi-ReS!) & Jeff Croft, (World Online)
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?
User Centered Design for Evolving Products
Ryan Freitas, Adaptive Path
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
Branding and identity
Rei Inamoto, AKQA
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
Designing for developers
Andy Clarke, Stuff and nonsense
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
Creating award-winning online marketing campaigns
Joshua Hirsch, Minister of Technology @ Big Spaceship
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
Integrated design across different media
Nat Hunter, airside
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