In the tradition of my "big stonking posts", these are my notes from WDS09 - basically unedited (expect typos ;)), unfiltered for the most part (so they are a bit liveblogish in tone). Stuff [inside square brackets] is an aside, my own thoughts rather than something the speaker said. Sketch notes taken from Waferbaby's awesome sketch notes (under CC license).

Some random observations about the conference:

  • Tech toy trend: Flip and other "little video camera" devices.
  • Braindump trend: sketch notes.
  • Topics that kept coming up: burnout, Doug Englebart's mother of all demos, computer games as inspiration.
  • Coffee: excellent, free, on site. Praise be to John, Maxine and Toby's Estate.
  • Back channel: weirdly quiet, were we actually paying attention or something?
  • My favourite take-home of the entire conference: the concept of yoyu.

jump menu

day one

Matt Webb - Escalante

  • Discussing science fiction and ideas; and hiking as a spiritual and hippy experience... and that's how he wants to speak about design.
  • “Design is about cultural invention.” - Jack Schulze
  • Example of process: drawing a radio in various stages of evolution – not random brainstorming, a true process. “What emerges is the discovery of what it is about that original radio that persists, in spite of violent evolution.”
  • Sketchnote: artifician intelligence on a cheap chip Flicking through a catalogue, looking at toy hamsters and the two selling points attached to them: Hilarious sounds! Artificially intelligent! ...in something that cost nine pounds. The whole thing is dominated by budgeting considerations and there is a brilliance in the fact they're putting AI into something that has a chip that cost seven cents.
  • "The three chief virtues of a programmer are laziness, impatience and hubris" Larry Wall
  • Then you look at the way that the iphone app store (and things like it) disrupt the old world of needing big businesses to act as middlemen. It levels the playing field so that independents compete directly with big business, and they can win if their product is good.
  • MakerBot – 3d printers that can print more printers! They had a supply problem and asked previous customers if they'd print a part for $1.
  • Fanufacture is the alternative to big manufacturing. It's what you get when you outsource/take away all the boring stuff and let people do what they're passionate about. It's applying the web model to the manufacturing world.
  • Sketchnote: Macroscopes, this is what designers use Macroscope – something that helps us see what the aggregation of many small actions looks like when added together. - John Thackara
  • 1959 (two years before JFK's speech that sent people into space) there was a committee of congress investigating food in space, and they were interviewing a witness from the department of agriculture. Congressman Fulson [sp?] was getting frustrated with their lack of vision and imagination... and he said: "Possibly in space, the approach to vegetables might be different. Did it ever strike you that ... in space you might get a two-dimensional tomato? It might be one million miles long and as thin as a sheet of paper, aimed towards the sun?" There was a long silence, then the witness said “it is an interesting thought...” and they just moved on.
    • No gravity! When things change so much you have to rethink even simple things.
  • Stuart Brand (author of How Buildings Learn) created a campaign in the sixties “why haven't we seen a photograph of the whole earth yet?” ... because he felt people didn't act like we all lived on the same planet. In 1972 NASA supplied the "blue marble" photo. The message became clear: we're in this together and we should start acting like it.
  • We need macroscope ideas, like the tomato, because when the world changes what we create has to change too or it won't be relevant.
  • Doug Englebart basically invented the personal computer – look this guy up!
  • Sketchnote: exploring a landscape takes time
    Story – looking for the Grand Staircase-Escalante National Monument in america... after a day of driving they realised that it wasn't somewhere that you arrived at, they'd been driving through it. You couldn't get there, you could only travel through it.
  • Sketchnote: grand staircase of history“We're at the end of a series of staircases that happened so slowly we didn't notice they were there. ... the question is what the web is at the start of.”
  • “The future is here, if you care to take it.”

opened #wds09 w. a hike though fanufacture, science fiction, social capital, cybernetics, and neptune. i had fun :-) escalante!

Twitter / Matt Webb / 6:25 PM Oct 7th from web

mark boulton – web fonts

  • Sketchnote: typography equals communication“With typographic design, regardless of typeface, you can't not communicate.”
  • How do we think of typography? Do we think of original sources, beautiful type, or a world of Arial and Verdana?
  • Noted the mountain climbing process of having a base camp and doing a series of ascents and descents to more camps, before the final ascent all the way to the peak...
    Sketchnote: we need fonts designed for a SCREEN
  • Fonts are only one part of the picture – just one part of the typographic structure.
  • Mark worked at the BBC and only worked with three typefaces for four years... it forced him to work with typography in a different way – no choosing fonts.
  • Core issue with web typography is needing more fonts designed for use on screen – we have a lot of typefaces created decades or centuries ago that were never intended for use on the web.
  • Sketchnote: we need fonts designed for a SCREENThe foundries need to invest in more web-suitable fonts – properly hinted, designed for legibility on the screen... although they also need to put more realistic prices on the font families.
  • In the tools people produce for use on the web, we should provide smarter, better defaults. Reducing the number of choices is good, help people make better design decisions rather than muddling through without guidance.
  • Reduce it to a simple choice – choose a heading typeface, Georgia or Helvetica. Then, based on that choice, fill in the rest of the choices with complementary typefaces. Put a smart default together.
  • We need to be careful not to get distracted by the shiny. Don't rush headlong into using @font-face just because you can. Designers need to keep the whole process in mind, all the pieces of the grid of good typography.
Q&A

Q: What do you think about free fonts?

A: Generally not too good... but they cost so much to produce, perhaps companies with money and interest might start investing in/sponsoring development of good new fonts. Create a sort of extended core font set.

ben galbraith - the state of developer tools

No notes, just need a link list for this session!

accessibility and new media

  • New media offers a range of new opportunities, like usnig skype video to sign if you're deaf. However many challenges remain – captioning and subtitling are still very limited. Also some areas are still simply unknown – how accessible will cloud computing apps actually be?
  • Interesting finding: assistive tech users were surveyed and found to be persistent and savvy, willing to fight through barriers to get the information and results they want. This means the investment of time and energy from developers is well spent and appreciated.
  • How do people actually use assistive technology? Very commonly it's a combination of several things, usually not one single device or technology. This includes using the surprisingly extensive features built into the OS, then add something like a screen reader or magnifier.
  • Macs actually have a superior set of assistive features than windows; but voiceover doesn't work with the MS Office suite (although openoffice works pretty well) and has some hit and miss problems with Safari.
  • There are a lot of changes afoot, eg windows 7 includes screen magnifier and predictive text on-screen keyboard. This apparently works well on netbooks which lowers cost barrier. Combine this with free screen readers and you're getting low cost solutions.
  • Also the iphone 3gs has voiceover built in!
  • Changes on the development front: WCAG 2 had a more user-task-focussed approach than the code compliance focus of WCAG 1. WCAG 2 took seven years and attracted quite some argument – joe clark “to hell with wcag 1” vs the responding article “to hell with joe clark”.
  • WCAG - “pour” perceivable, adjustable, understandable, robust.
  • Online video – perception vs. reality.
    • Perception is that online video can't be accessible; but the reality is that the common format all support closed captions; most support alternative/multiple audio tracks.
    • Perception is that it's too hard and time consuming. However there are tools to make it easier, eg. CaptionTube for YouTube videos.
    • Perception that there's no point, hardly anyone's doing it... sadly kind of true, but it can be done. The BBC does captions and audio; and if the video was already captioned for broadcast it is relatively easy to caption for the web.
  • AWAREe – www.aware.org.au – each month they put five government websites on the site and get the public to share their thoughts on those five sites. The hope is to break down commmunication gap between government and users of the site; get feedback to the government. Over time the hope is to identify not just specifics, but overall patterns as well which can assist government to make things better.

earl carseldine – jquery

[This was perhaps the maddest presentation of the conference. Not sure if we actually learned anything about jQuery, but nobody cared about that really...]

  • Looking at the industry... we have issues of burnout, people being bored and unhappy. Earl thinks we should get back to the old school where the normals did not dictate what got built and how.
  • Jquery – earl's choice of library because it makes things quick. Much as he likes to do things from scratch, jquery lets you get things done faster.
  • Stealing from the past – remember Doug Englebart gave the mother of all demos way back in 1968!
  • Fitt's Law – the amount of time required to hit a target, based on size of target and distance away. Useful for interface design stuff...
  • Meanwhile the OS and the web are merging and blurring together – UI effects going from OS to web and vice versa.
  • Looking at early video games – there were some brilliant ideas, but there was also a lot of crap.
  • “It's our job to figure out what's useful.”
  • Plagiarism for a better tomorrow. Classic one – sprites! We nicked that from games. Also grabbing physics stuff from games – bouncing, exaggeration, acceleration.
  • “when fads happen god they happen hard!”
  • It's not just tech – we can steal concepts from games. Learn as you play, site as a game with most commented charts and so forth. But quite simply games are fun, and we should make our stuff more fun to use.
  • “your homework is to go and watch some old movies with computers in them... and rip off the ideas. eg. Password prompts with huge text and massive user feedback......! well maybe not.
  • Go to the library and read books on game theory, make stuff up, make fun things!
  • Reclaim the web.

cam adams – making waves

  • Thick value – something that actually delivers a great result, something that adds value for the user and makes their life better in some way.
  • Value judgement about adding a feature – discoverability vs efficiency. You want both but often can't have both.. and context can make a feature work for one thing but absolutely fail elsewhere.
    • eg. fwd/back buttons worked on a cd player with about ten tracks to deal with, but failed for an mp3 player with thousands of tracks. Hence ipod using the jog wheel similar to a roland 303.
  • How do you user test something unfamiliar?
  • “Change is good. And change makes us angry.” - Ben Parr, Mashable
    Sketchnote: discovery vs efficiency - users will adjust over time. How do you test the unknown? Change is good bug makes us angry!
  • “If I had asked my customers what they wanted, they'd have wanted a faster horse.”- Henry Ford
  • The wave team had a few features that they wouldn't budge on... but even then strong enough opposition could still win out if it became clear the problem was insurmountable.
  • Googlers aren't really the same as the public so the best user testing is when it starts going out to the public. Also people use their products in ways they never imagined.
  • “the future is other wave clients. And that's scary to me because someone could build a better client... but realistically the protocol and the client are intertwined.”

day two

kelly goto - workFLOW

  • Sketchnote: stuck vs unsstuck. unaware, then AHA, stuck, then get through that and advancePeople go through an AHA moment, but also get into a “stuck phase”. How do you get past that to the transcendent phase?
  • It's about staying in the flow where time is just passing, work is effortless, you find the balance between skill and challenge.
    • Low skill, high challenges = anxiety
    • high skill, low challenges = boredom
    • low skill, low challenges = apathy
    • high skill, high challenges = FLOW
  • Flow fundamentals (the things we need): vision and purpose, support and buy in, knowledge and ability, collaboratoin and synergy, tools and framework, attitude and fearlessness, progress and results.
  • In the end if you're not fearless and having fun, you won't be unstuck and in the flow.
  • Not every project can allow you to reach the unstuck state... lots of factors including project type, levels of autonomy etc. It's not “one process fits all”.
  • Hybrid process might include waterfall requirements gathering, followed by some sprints/iterations. Find a balance between user centred design and agile.
    Sketchnote: process
  • Designers and coders – if you don't have cross skilled people, you will need to work out how to communicate between the roles. Standups/scrums can help.
  • User experience and agile development combined = unstuck.
  • Shoshin – beginner's mind. It's ok to be a novice, it's ok to think about things in a new way.
  • Yoyu – the space in between things, time between things... do you have any yoyu time? We need to slow down, if you want to stop it's ok.
  • Let's practice slow twittering... it's 140 characters, but how insightful, how thoughtful can you be?
  • Final slide – fortune cookie: Exceed expectations and take vacations.

gian wild – wcag 2

  • HREOC still requires you to follow WCAG 1 (ie. hasn't changed yet). However WCAG 2 will be endorsed, it's just a matter of when. May be a few months away.
  • It is expected that WCAG 2 will be endorsed at the A level, encourage AA and expect AAA from sites with specific known needs.
  • Gian demonstrating the massive pile of documents that comprise WCAG 2 – makes a satisfying thud when dropped on a table... not the easiest thing to read though.
  • Gian really pulled these documents apart... Her recommendation: just read the Success Criterion and Techniques, or at least read those first.
  • Some other resources not specifically endorsed by W3C but useful:
    • Webaim WCAG 2 tech list
    • Migrating to WCAG 2 by Roger Hudson
  • Important to note that WCAG 2 decided that anything which is a an “obvious usability principle” should not be included in WCAG 2. [That seems to go against more general industry wisdom that the two are so tightly coupled that it's counter productive to force them apart.]
    • That dropped some things which would have assisted people with cognitive disabilities. eg. Clear and simple language was left out.
  • In addition to A AA and AAA, there are “sufficient techniques” and “advisory techniques”.
    • Gian recommends meeting the advisory techniques as well, since they contain some good and important stuff.
  • Conformance requirements – to state that you meet the conformance level you must conform completely; and whole sites must conform. That means if you have an accessible site but one feature is not accessible, the whole site fails. [Remember this doesn't mean you should blow off accessibility, it just means to assert compliance you really really have to comply. Not ticky-box comply. ]
  • There are new requirements around sound and animation – you must be able to pause, stop or hide them.
    • eg. You can't have endlessly looped music/jingles that prevent a screen reader user hearing the page being read out;
    • you can't have animations if you don't give some way to disable the animations.
  • “Accessibility supported” makes an allowance for using technologies that aren't accessible, by saying if it has no accessibility features you can't use those features. [That seems like an odd loophole to leave in..?!]
Top 10 changes from WCAG 1 to 2
  1. CAPTCHA – always been an accessibility challenge. WCAG 2 says there are two things – first you need to describe the purpose of the CAPTCHA; and you need to provide another CAPTCHA in a different modality.
  2. Captions and audio descriptions [missed details]
  3. Audio control – pause/stop needs to be at the start of the page so screen reader users can turn things off quickly and easily.
  4. Exceptions – eg. Specifying alt=”” for decorative images; live video has concessions
  5. Colour contrast [missed details]
  6. Sensory characteristics – you can't say “click the button in the bottom right corner” as the user's device/settings/etc may mean it's not actually in the bottom right corner.
  7. On focus/on input – don't change things based on focus, eg. Dropdowns fire when keyboard users are trying to use them.
  8. Timing – you need to be able to extend timeout periods (up to ten times). There are some realtime exceptions eg. Online auctions; and you aren't required to add ten times more time for an exam, perhaps double the time would be fine (some practicality and discretion applies).
  9. Pause/stop/hide – moving, blinking, scrolling content needs controls. There are some concession when it's not parallel content, so scrolling status bars on a video are accepted as part of the primary content.
  10. Keyboard operability – more extensive than WCAG 1
Top 10 things you might not have noticed...
  1. Group of images and alt – allows for a set of images to just have one alt between them.
  2. Combine link and image when they are one and the same, or use null alt
  3. longdesc must be referred to in alt text
  4. It is preferred to use an image of a glyph than an ascii character – eg. Better than using an asterisk to mark required fields on a form. If you use an image of an asterisk it's often bigger and can have useful alt text
  5. Stop blinking content on page refresh – if the user can stop content blinking by refreshing the page, that complies
  6. Changing presentation of text must be described in text
  7. Changing decorative images must be keyboard controllable
  8. onkeypress should be avoided – problem with onkeypress is it can fire when you don't want it to
  9. All data tables must have captions and summaries – this could be a bit strange in HTML5 where the summary attr is deprecated.
  10. title=”” can be used instead of <label for=””>

elliot jay stocks – progressive enhancement

  • Lots of arguments against using CSS3 - have to wait for 100% support, have to wait for IE6 to drop out, have to give the same thing to every user... "These arguments are complete and utter bullshit!"
  • We're talking about enhancements and not features – give the sexy stuff to people who will see it.
  • Sketchnote: websites will never look the same across all browsers It all comes back to the old question: do web sites need to look the same in every browser? NO. websites will never look consistent across all browsers! Too many factors/variables/rendering engines. So stop trying to reach the unreachable.
  • webtypography.net
  • Enhancement = reward. Intentional degradation = punishment, the removal of a treat.
  • “The designer giveth and the designer taketh away!”
  • eg. malarkey's site being black and white in IE6, but being done absolutely intentionally.
  • Usability vs. aesthetics – usability and functionality are important, and although making it look nice is not quite as critical it should not be underrated. A pleasing visual design leads too a more fulfilling user experience.
  • Variety in web design. I can haz it?
  • What elliot sees: BORING (huge slide)
  • Vanquish the boring! (slide goes up in flames)
  • Validation is irrelevant - “yes yes bear with me” - don't be put off using a new technique just because it doesn't validate. Validation is still useful as a code checking method. One suggestion is that the validator could handle new properties differently – eg. Highlight with a warning rather than an error, or mark it as experimental.
  • ...and validation doesn't truly mean conformity with standards anyway.
  • Suggests we should speak in positive terms – talk about adding enhancements instead of saying we can't make it the same for everyone. We can make a good experience for most, and a great experience for some.
    Sketchnote: an enhancement is a reward!
  • This is not just about making things look pretty, it's also about making a future-proof site. 10% of users today are 100% of users tomorrow – the number of people seeing the enhancements will grow, not shrink. New features won't become mainstream if we don't start using them.
  • Elliot's typographic journey: Describes an early experience as a young designer being confused that dreamweaver offered all the fonts on his machine without explaining you couldn't use all of them. When he realised he couldn't he became enamoured of flash and invested time learning that. But he came back to the standards way... but frustration pushed him into techniques like image replacement, which had their own problems. Sifr worked but should be treated as a stopgap measure until something better comes along... hopefully that's @font-face
  • Sketchnote: web typography growing up 2009: the year web typography started to grow up
  • New sites to offer embeddable fonts: typkit, fontdeck, kernest; also some foundries have their own bespoke solutions.
  • .webfont - “this is where it gets exciting”... proposal for a new, open standard with anti piracy stuff in an attempt to make it viable etc... however not a reality yet. Font file plus xml rights expression doesn't really protect against piracy but may be enough to mollify the foundries.
  • [Alternatively the foundries could price realistically and make it possible to actually support them without sending yourself broke]
  • [Selectors really aren't “small stuff”! The effect of css3 selectors on markup will be massive. Ability to move heaps of required-for-presentation classes out of markup will really clean things up. The key is getting rid of ie6 to allow multi selectors.]
  • Finishing with a great definion of progressive: favouring or advocating progress, change... [look up slides]
  • Don't fear degradation: plan for it.
  • Aim for the stars: you might reach the moon. [I absolutely agree with this philosophy!]
  • Slides at elliotjaystocks.com/speaking/ or http://www.slideshare.net/elliotjaystocks/stop-worrying-get-on-with-it-progressive-enhancement-intentional-degradation
Q&A

Q: How will foundries cope with the web when their licencsing and prices are ridiculous?

A: Some are coming around when they see the potential benefit.

Q: View on using ie filter hacks for IE?

A: It comes down to the sense of how far you're prepared to hack to achieve the result – if it won't cost too much time and you have a big ie6 audience it's ok.

christian crumlish – designing social interfaces

Five principles
  • Principle: Pave the cowpaths
    • eg. The twitter @reply syntax was made up by the users and they ran with it.
    • Another one – dogster and catster where people share personal information in the voice/pov of their pet. The services were originally intended as photo sharing, but the users focussed and they ran with it.
  • Sketchnote: talk to users like a human Principle: talk like a person
    • Don't drone like a lawyer, be conversational; self-deprecating error messages; ask questions; your vs my; no joking around – or at least be very careful, as it's very easy to use a joke that people don't get. Let the users tell each other jokes, but don't do it yourself.
  • Principle: play well with others
    • Be open, use open standards, leverage what's already out there. Share data, accept external data, support two-way interoperability.
  • Principle: learn from games
    • Games are often on the leading edge of interfaces and social interaction. Games set up a space in which play is possible; and then they make up what the final experience actually is. You have to give up some control for this to work.
    • Example of evolution: Game Neverending, which eventually evolved into Flickr...!
  • Principle: respected the ethical dimension
    • On some level you are literally playing with peoples' lives. If you are going to get a business benefit from users' interaction then you have a responsibility to look after those people as best you can.
    • Spamming people's address book is an example of NOT respecting the ethical dimension.
96 Patterns
  • Social spaces with three buckets – self, community, activities.
  • Picking a few of these...
  • Sketchnote: allow users to be identified Pattern: give people a way to be identified
    • They have to be in the system, need to have a way to identify themselves and personalise how they are shown.
  • Pattern: What's your social object?
    • Objects draw attention and allow us to relate as human in a way we might not otherwise be inspired to do.
    • Give people something to do.
  • Let the community elevate people and content they value.
  • Public vs. private conversation... you need to be aware of this.
  • Enable a bridge to real life events – people connect better after they have met.
  • Using more geo information is helping this.
5 anti patterns
  • An anti pattern is something that seemed like a good idea at the time... but it turns out to cause more problems than they solve.
  • Anti Pattern: cargo cult
    • Imitating a form or function without understanding it.
  • Anti pattern: don't break email
    • It's tempting to use email as a broadcast-only medium, usually with noreply emails... which means when they use email the way they've used it for years before you were around, it doesn't work. A better way is to work out how to cope if someone does reply.
  • Anti pattern: the password anti pattern
    • Getting users to give their password away creates some big problems elsewhere
  • Anti pattern: ex boyfriend bug
    • the people you should know” list on facebook is actuallya list of people you hate. - rex sorgatz (twitter)
    • Services that keep suggesting you might want to add someone are a problem... you need to let the user say stop showing that option to me.
  • Anti pattern: potemkin village
    • Story goes that a russian tzarina wanted to see the happy peasants, so they faked villages and gave her a fake tour.
    • On the web a classic example is setting up a forum – don't set up empty rooms, just start with one single place to talk. Make more rooms when the users define what they want to see created.
Q&A

Q: why are youtube comments so full of hate?

A: they were never moderated to set some boundaries.

javascript testing

  • Reasons to test are pretty obvious, reasons to automate not quite as obvious but clear: testing needs to be quick and easy enough to avoid undue cost, time or reluctance to release as often as you need/want.
  • End to end tests: big, powerful, convincing... but slow, inexact, high maintenance.
  • Unit tests: small, quick, focussed, resilient... but limited, no integration testing.
  • Healthy test pyramid: lots of unit testing, some in between, some end to end, very little manual testing.
  • Using browser emulators and browser drivers have some advantages but do rely on the emulator getting it right. Safer than it used to be, but still not perfect.
  • Lot of activity going on with javascript unit testing frameworks. They sit alongside your code and execute test scripts. Jsunit has been around for a while but there are some new ones coming out.
  • selenium demo
  • Testability:
    • coherent js modules
    • coherent tests
    • unobtrusive js
    • write the tests first
  • Build integration is very tool-specific. Trickiness – stopping and starting servers and browsers.
  • Testswarm – server which takes tests scripts, fires up browsers as workers, tests are farmed to the browsers and results aggregated. Anyone can provide computing power, seti-at-home style.
  • Delicious.com/mdub/javascript+testing

dan hill – 15 years in

[On a few occasions during this closing keynote, I realised I'd stopped taking notes because I was engrossed. It's hard to do it justice with the brief notes that result.]

  • Sketchnote: design is an approach instead of a discipline Design = multidisciplinary; or an approach rather than a single discipline.
  • Strategic design – redesigning your surroundings
  • Eliel Saarinen: “Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”
  • Sketchnote: prototype the futureArtefacts from the future: Dan Hill discussing the use of fake/spec mockups to inspire and guide clients facing a design challenge. Mockups of a future edition of a magazine the decision makers read; mockups of a magazine an organisation might put out; websites that could be built.
  • Data visualisation takes dry data about a city and shows it as a living, breathing thing. It makes so much more sense to see things played out in real time.
  • Fantastic discovery at the state library of Queensland – people with their own net access go there to use the net because it's a great space to use the net. It's a useful public space that attracts new people.
    • [my thought: people don't want to spend all their time at home online, even just being in a shared or different space is attractive.]
  • ...so they looked at what people were doing with the wifi. Extracted keywords, destinations... looked at where is the wifi signal the strongest.
  • Also simply asked people what they were doing – found people programming and committing code, uploading photos, working out of the office. Also facebook, but hey.
  • Discussion needs to be taken from “what could we do” and then into “what should we do”.
  • Sketchnote
    The internet changes things, interactive environments change what happens there. Expectations change, the way people use the space will change. If you can be online and immersed in useful information, your experience will be totally different than before.
  • Innovation and development is not dependent on a massive population, it's about culture. We need to nurture creativity.
  • Redesign the culture, redesign the oceans. Redesign our surroundings.