Tag Archives: interactive design

bird-in-flight

Notes from @media 2010

So I attended @media 2010 down on London’s South Bank this year. As always it was inspirational, interesting and informative. An ideal way to start a new blog. What follows are my random thoughts and notes from the 2 days.

Speakers

Brendan Eich – Grown-up JavaScript

@BrendanEich

Predictions

  • Webkit will fork (more so than currently) – Apple and Google to go down different paths
  • Native code will be used more but won’t overtake JavaScript

Christian Crumlish – Designing for Play

@mediajunkie, http://www.mediajunk.ie/

http://www.slideshare.net/xian/designing-for-play-at-web-directions-media

Play

  • Childsplay
  • Play acting
  • Identity
  • Masks
    • Computer screen
    • Online identity / profile
    • Avatar
    • Be someone else
  • Make believe
  • Behave differently

Gameplay

  • Start game
    • Invite someone to play
  • Rules
    • Community guidelines
    • Norms / standards
  • Goals
    • Collecting behaviour
    • Primitive
    • Adds delight / fun
  • Competition
    • Points system
      • Be careful about what points are scored for
    • Leaderboard
      • Establishes winners + losers
      • Highly competitive environments

Playing music

  • Can be challenging
  • Tuning
  • Fine tuning
  • Varying degrees of complexity
    • Enable users to make mistakes but still have a good experience
  • Mechanical engineering
    • ‘Play’ in movement – room to maneuver

“Signs of life”

  • Establish that you’re in company

“Open” design

  • Create framework where users can make choices and co-create their experience

Curation

  • Currently hard for users to take a number of objects from the web and assemble them as another creative object
  • Easy to gather stuff and push back out

Flow state

  • Stop thinking about what you’re doing
  • Play
  • Alpha state of mind

John Resig – Testing Mobile Web Apps

@jeresig

“Golden age of mobile development – 3 years from now”

  • Symbian (Nokia handsets) – 3x as many phones sold than iPhone or Blackberry

Mobile browsers

  1. Opera – Opera Mini most prevalent not Opera Mobile
  2. iPhone
  3. Nokia
  • Working on mobile graded browser support matrix
  • Yahoo to release mobile browser usage info soon
  • “TestSwarm” – automated testing
  • “TouchScroll” – Fixed position in Safari mobile
  • Windows Mobile 6.5 – IE6 rendering engine
  • Windows Mobile 7.0 – IE7 rendering engine
  • Web OS – HP (formerly Palm) – Webkit
  • MeeGo – Linux based – Gecko – Tablet / Netbook
  • Fennec – Firefox mobile

Test devices

Device OS
iPhone 4 iOS 4
iPhone 3GS iPhone OS 2, iPhone OS 3.1, iOS 4
iPad iPhone OS 3.2, iOS 4
Nokia E71 S60v3
Nokia N96 S60v3
Nokia N97 S60v5
Palm Pre 1.4
HTC Magic Android 1.5, Android 1.6
HTC Dream / T-Mobile G1 Android 1.6
HTC Incredible Android 2.1
HTC HD2 Windows Mobile 6.5
Blackberry Curve 8900 Blackberry OS 4.6
Blackberry Storm 2 9500 Blackberry OS 5.0

Simon Willison – Building Crowdsourcing Applications

@simonw

Crowdsourcing

  • Has to have some benefit for the user
  • Or make them curious
  • Or be fun

Examples

  • 90-9-1 rule crops up again
  • Incentives don’t have to be big to get people to participate

Jonathan Stark – Building Mobile Apps

@jonathanstark, http://jonathanstark.com/wdx

jQTouch

  • Eases creation of iPhone web apps using iPhone OS UE patterns
  • iPhone browser can be instructed to display in full screen mode without the address bar
  • Use offline storage to speed up app
  • Don’t lock users into the mobile version of your app/site
    • E.G. GMail sends you to their optimised mobile site automatically but gives you the option of using their regular site – preference should be remembered for next visit.

Andy Clarke – Hardboiled Web Design

@Malarkey, @itshardboiled, http://forabeautifulweb.com/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/

Design top down

  • Best browsers first – provide the best possible experience and adapt for less capable browsers

“Get excited”

“Make things”

  • Not about browser age – about browser capabilities

Useful stuff

Matt Biddulph – Mobile Social Location

@mattb

  • Devices are connected – a node on a network
  • Personal – interface with you and the internet
    • “Bridge between the internet and the real world”
  • Devices are aware of where they are

“Checking in”

  • Contributing small bits of data – E.G. “I’m here”
  • Micro-updates

“Place”

  • Not lat/long
  • Place is human + meaningful
  • Combine location api’s to build rich information about the persons location

“Direction”

  • Growing number of devices can determine the direction you’re facing
  • Walkman – first mobile augmented reality device

“The Visual Miscellaneum” – David McCandless

  • Context

Realtime

“Your app isn’t the centre of everyone’s world”

  • Mobile device usage tends to be short bursts – dip in and out
  • Eyes typically not on the device for lengthy periods (exceptions are commuting/travel)
  • Possiblity of interruptions – need to be able to immediately stop what you’re doing, deal with whatever’s going on in the real world and come back to your device later

Hannah Donovan – Telling Stories Through Design

@Han

Storytelling

  • Draw
  • HTML
  • Anything – Use simplest tool
  • Conversation – dialogue
  • Boeing 747 – “Design Decision Memorandum” – Note of design changs sent to all involved to keep everyone updated of changes

“Think like a film crew”

  • Define the plot
  • Write a script
  • Script must serve the plot – if it doesn’t then something’s wrong

Hannah Donovan’s storytelling bookmarks

Remy Sharp – Browsers With Wings: HTML5 and API’s

@rem, http://www.slideshare.net/remy.sharp/browsers-with-wings

Media API

  • Simple functions

Canvas

  • Bitmaps

SVG

  • Vectors
  • Can mix SVG + Canvas
  • Add support in IE
    • Silverlight bridge or excanvas.js (slow performance with these solutions)

Storage – key/value pair api

  • Values are strings
    • Need to use JSON to encode/decode

IndexedDB – future

  • To be supported by Firefox/IE

Sockets

Aral Balkan – The Art of Emotional Design

@aral, http://aralbalkan.com/

“The differentiating factor is the user experience”

“Bad user experience is easier to define”

“Don’t infuriate the user”

  • Worry about the users needs, not yours

“Does it give me joy to use?”

  • Empathy
  • oAuth not secure
  • xAuth – best of Basic Auth + oAuth

“The experience is only as good as the weakest link”

Scott Berkun – The Myths of Innovation

@berkun, http://www.scottberkun.com/

Creation

“Ideas are made from other ideas”

  • Combination + re-combination of other smaller ideas
  • Remove inhibitions – don’t apply self-imposed constraints
  • Fears – prevent you from trying stuff out
  • Persistence

Creative thinking hacks

  • Keep a journal – write ideas down whenever and wherever they occur
  • Escape – subconscious mind needs to be allowed to surface stuff
  • Inversion – Solve the opposite problem from the one you are trying to solve
  • Partner – work with another person
  • Fail – take enough risks so that you are bound to fail sometimes

“First draft of anything is shit” – Ernest Hemingway