The Web Is... Day One

Another excellent conference from Craig Lockwood — and this is only the first day.

I’m always impressed by the groundedness and open-hearted feeling I get when I attend Craig’s conferences. He curates the speakers not just for their intellectual knowledge and not just for inspiration, but also for their ability to connect to and understand the world and the people in it.

I’m looking forward to tomorrow!

The Web is… Knowledge

Christopher Murphy @fehler, Teaches MFA at Belfast School of Art

• recommended reading
  • The Element: Ken Robinson
  • Mastery: Robert Greene
    • rediscovering the mentor/protege model
  • Managing Oneself: Peter Drucker
    • how you relate to other people in the workplace
• interaction design course (part of Master in Fine Arts)
  • get started with a github profile
• teaching to see:
  • bauhaus model & visual grammar
  • point > line > plane
• charlie munger
  • warren buffet’s business partner at Berkshire Hathaway
  • latticework of mental models
  • learning new models in related fields
  • all useful fields to understand interaction design…
• lollapalooza effect
  • power of ideas together is greater than each by themselves
  • e.g. put a designer & developer together and get more than you would get by themselves
• nuance and human interaction easier to learn from humans
• master and apprentice
  • not just a one way relationship
  • master learns to see the world in a new way with fresh eyes
• apprentice moves on then becomes a journeyman
  • going to different masters
  • gradually starting to teach others
• ken robinson: have to move to an organic process of education
• teach a whole mind:
  • need self-belief, manners, confidence, politeness
  • as well as skills in business, design, technology, etc
• universities move at a glacial pace
  • takes 5 years to change a curriculum…
• short form courses
  • patterns: josh long
  • general assembly
• those who can, do; those who care teach

The Web is… Constant

How do we design for constant change… and not go mad

Nathan Ford @nathan_ford, Monotype, http://artequalswork.com

• web design not yet nailed down as a discipline
• creating repeated success in a volatile environment
• previously worked as Creative Director at Mark Boulton Design
  • these ideas come from that time
• team
  • bring the client into the team
  • or bring your team into the client
  • embedding
  • learn empathy…
• look for a champion on the client side
  • someone who trudges through all the muck
  • make sure they can involve all the stakeholders
  • get the problem stakeholders involved as early as possible
• no big reveal — eliminate surprises & blame
• wicked problems
  • term from sociology: massive problems that are hard to define and difficult to resolve
  • web sites are a simpler thing, but their implications often make them behave like a wicked problem
• measure goals by improvement, not completion
• when you don’t know, try a lot of things
  • don’t be afraid to throw stuff away
  • failure is ok, but you must keep learning
• ensure the client writes the user stories
  • can help with a workshop to elucidate
• work in iterations
  • each iteration should include research, design & building
  • then evaluate and repeat
  • don’t forget to evaluate…
• always have an available prototype
  • brings the pain of the project earlier
  • lets them show the working consensus to others
• start with real content
  • if you don’t have any, make it up (NOT lauren ipsum…)
  • motivates client to actually make their own
• build out grids from content
  • grids within grids
  • content-based items
  • no high-level overarching
• choose the right css units
  • percent for scaling
  • vw & vh for headlines & page framing — relative to the viewport
  • pixels for media queries — one to one, easier to understand
  • ems and exes for typography
    • exes work better with newer web fonts
    • work on x-height
• let things get big: but limit on content items
• example: typekit blog — building out a design based on the Chapparal typeface
• also leads to simpler testing
  • but still need to test on devices
  • especially type sizes — can be surprising on actual hardware…

The Web is… Everywhere

What we can learn from console browsers

Anna Debenham @anna_debenham, http://console.maban.co.uk

• new style of inputs: gestures & voice
• think about small screen and a very big screen
• everywhere you can stick a screen, eventually there will be a browser
• “don’t fall prey to convenience of device silos” cameron moll
• console browser users are (currently) likely to be younger and lower income
• consoles and web TVs have low memory
• performance is crucial
• the xbox browser can pretend to be a windows mobile device
  • probably added to allow simpler interfaces
• large screen doesn’t always mean more pixels…
• handheld consoles often have very wide screens
  • often misidentified to show full fat design
  • should probably have a simpler design
• the PS Vita includes Amazon’s Kindle Fire Silk UA in its agent string…
• dual screens often have odd behaviour
  • Nintendo 3DS has two screens with different widths…
• Wii U aiming to be a full entertainment system
  • four different ways to zoom
  • really important for viewing web on TV when text is often too small
  • supports various presentation modes
    • turning mirroring on and off
    • draw curtains, prepare then reveal
    • play video on main screen, while continue to browse
  • can use multiple wiimotes as pointers
• similar for xbox one
  • using xbox smartglass app
  • supports split screen: game/tv + browser
  • voice and gesture works really well
• vimeo couch mode:
  • user choice for big screen support
• microsoft’s design for xbox and windows phone is truly scalable
• x-webkit-speech — for speech synthesis
  • currently Google Chome only…
• microsoft has a design guide for kinect
  • really good read to understand gesture design
• 30% of people this year used a smart TV to browse the web

The Web Is… Playful

See Lee-Delisle @seb_ly

• http://lazerarcade.com
  • used microphones to detect nerf bullets hitting a screen
• smashingconf opening animation
  • laser light show mapped onto a dome & pipe organ…
  • definitely worth watching the video
• lunar trails
  • http://moonlander.seb.ly
  • records its trails into moonlander.seb.ly/viewer
  • then built a physical arcade machine
  • full screen browser, controlled by an arduino pretending to be a keyboard
  • all linked up to a giant wall-hanging plotter
  • based on polar plotter, but using DC servos rather than stepper motors
• playfulness on the web has died a little bit
  • the little flash games got taken over by the marketing agencies
  • became viral campaigns that nobody wanted
• internet of things — nobody knows what it’s for yet
  • much more space for being playful :-)

The Web Is… In The Hands of the 97ers

Emma Mulqueeny, Founder of Rewired State and Young Rewired State @hubmum

• people born in 1997 and later, grew up with social media
• those born at the beginning have no leadership
• Ivan Illich: deschooling society
  • “educational webs … transform each moment … into learning, sharing & caring”
• the 97ers are already doing peer-to-peer learning
• the discussion about teaching how to code is almost irrelevant
  • the teachers won’t be teaching how to learn line by line
  • role of all-knowing teacher will become irrelevant
  • much about flipping the classroom and enabling the teacher as guide
• refugees united: dealing with families split up as they crossed the Somali > Kenya border
  • refugees would have similar names, might lie as they’re scared etc
  • YRSer Kevin figured out that storytelling was important
  • designed service to speak a local story into the phone
  • then find stories that roughly match
  • reunited families went from 3% to over 79%
• identity is crucial to 97ers
  • their stories (not their names) are their identifier
  • tagged photos
  • peer verification
• try not to police community as that affects identity
• have a very early understanding of how to influence community
  • they get immediate feedback from youtube/facebook/etc
  • have figured out how to tweak and skew their message until it works
  • can be quite an arrogant generation — they know how to get those likes…
• going into the world
  • the most unsafe thing they could do would be to work for a big organisation
  • self-employment is much more attractive — feels safer
  • not about making lots of money — more about long-term employment
• the Wi-Fi is the bedrock of their needs
  • it’s the gateway to their community and therefore their support network
• they can’t engage with politics until 18 — it’s too late…
  • they engage with policies rather than parties

The Web Is… All Consuming

Keir Whitaker @keirwhitaker, Shopify

Best to watch this when the video comes out — I couldn’t do it justice with notes.

• daily todo: 1 big thing, 3 medium things, some small things

The Web Is… Made Of Links

Phil Hawksworth, R/GA @philhawksworth

• Paul Downey’s 2008 “uberdoodle”: The URL is the Thing
• Ted Nelson: coined the terms hypertext, hypermedia & transclusion (and teledildonics…)
• you can link to anything from anywhere — the whole becomes more than the sum of its parts
• :// => “double-meh”
• Paul Downey: The Web is Agreement
• browsers are very liberal in what they accept
• browsers starting to obscure URLs
  • mobile Safari already hides everything but the host
  • Chrome Canary doing similar thing
  • Jake Archibald: the URL is the share button of the web
• taco bell #onlyintheapp — no longer have any content on their website
  • and only with access to lots of permissions on your phone
• google experimented with different shades of blue for links (#41shades)
  • apparently the change made about $200m difference
  • but they lost a designer who said he couldn’t argue for all his design decisions
• this is for everyone (with javascript enabled) — Dan Williams
• more than 60% of population of India & China is still offline
  • we will need to support them…

Unfinished Business Geek Mental Help @ The Web Is

An enormously important discussion, started by Andy Clarke a few days ago.

The discussion was recorded as an episode of Unfinished Business and included Chris Murphy, Cole Henley, Relly Annett-Baker and @pumpkinsouper.

There are many more articles to be read at http://geekmentalhelp.com/ — go and read, even if you think you don’t need to.

I think the most crucial advice I heard, was “keep talking” — this discussion is not over…

Handheld Conference 2012

This is a new conference, organised by Craig Lockwood around lots of intersecting areas of mobile design and development.

This year it was held in the beautiful St David’s Hotel, overlooking Cardiff Bay. The conference centre was a bit cramped, but the hotel itself was lovely.

There was a single track of sessions, but they covered a wide range of areas from getting a business started to futurology via several variations of design. As with many mobile events there was a fair mention of the web vs native debate, but there was a reasonable balance between the two here — with the only loser being the whole app hybrids like PhoneGap (which took a large amount of flak).

As with most of my posts, here’s my quick notes, typed during the sessions so that you can get a rough overview of what happened. Craig has published videos of several of the sessions on Besquare (I'll link to them next to my notes).

Handheld 2012: Book stories — How to turn a sideline into a business

Keir Whitaker, Viewport Industries

http://keirwhitaker.com

• co-owner of Viewport Industries with Elliot Jay Stocks
• using the web to do side-projects / passion projects
• published Insites book — interviews with web developers & founders
  • also available as ebook (via http://woop.ie)
• wanted to create something that makes money while they slept
• there’s still a passion for physical media (especially amongst designers…)
• had 65 people involved in making book
  • 21 interviewees, but a lot of others
  • copy editors, etc
• picking a new collaborator is hard
• did a precursor project (insites tour) to find out if they could work together
• discuss the money up front
  • horrible conversation to have
  • but really important to sort out before starting
• raising money
  • bootstrapping (your own money)
  • kickstarter (watch out for scaling issues)
  • funding
  • sponsorship / partnership
  • chose partnership (published in association with Mailchimp)
• need banking for a business account
  • they need address, phone number, etc
  • chose HSBC for Xero integration
• company needs a physical address
  • don’t use your home address
  • can use an accountant’s address
• need a telephone number
  • again, don’t use a personal number (especially mobile)
  • used a company called dial9 to have a virtual Bath number
• need terms & conditions
  • banks pay people to read them when you apply for stuff
  • most people borrow other people’s terms…
  • ask first!
• get an accountant
  • will save you money
  • HSBC business account feeds directly into Xero online accounting system
  • accountant can then work directly from Xero
  • costs about £19/month
• need a storefront for the website
  • shopify costs £19/month
• payment gateway
  • middle man between storefront and merchant account
  • need it if you don’t go for paypal
  • alternatives:
    • braintree
    • paymill
    • stripe (US only)
    • gocardless (going Europe-wide, direct debit only)
• merchant accounts
  • money comes through into real business account after about 2 weeks
• ensure that the gateway supports issuing refunds
• digital goods
  • use fetch app
  • works by web hooks
  • benefit with fetch app is that you can resend orders (sometimes they don’t go through)
• need to do support…
  • try to take dissatisfied customers off twitter and into email
  • think about what you can offer unhappy customers (e.g. digital goods in lieu)
  • helpscout.net can suck in email
  • can outsource support
• costs:
  • accountant: £70
  • xero: £19
  • telephone: £10
  • shopify: £19
  • payment gateway: £19
  • merchant account: £25
  • fetch app: £6
  • support: £100
  • based on 4 hours of accounting & support / month
• projects will always take longer than you think
  • impacts the finances

Start small, think big

Lee Armstrong, @lesmond, lee@pinkfroot.com

Video available on besquare.me

• shipfinder - first app
• planefinder - most successful
• inspired by Google, facebook, twitter
  • started thinking big from the start
• planefinder started with coverage of the south of the UK
  • sold app across world and started getting a few emails back saying “don’t you know Poland exists?”
  • started planning for bigger
• now cover most of world apart from China & Africa
  • have 400-500 radio receivers across the world and splice that data with other databases
  • all receivers are land-based: ships have range of about 50 miles
• when initial small hosting plan started creaking had to decide to self-host or cloud?
  • ran a comparison recently, found that it would cost $2000/mth more using AWS than using at the moment
  • but have internal skills to do server management
• currently have 32 servers but are flexible
• need to be able to scale up (and down)
  • pinkfroot turn machines off when scaling down
  • doesn’t save capex of rack space, but saves power
• user reviews…
  • bonkers reviews — ignore them
  • but pay attention to common themes
  • take time to spend time on customer support
  • takes around 30 minutes to turn around an angry customer
• built in social sharing into app
  • pick a flight and share it - shares web link + image
• built up community of app users
  • really valuable when lost photos of individual planes
  • managed to get users build up their own photos in the app (credited to users)
• product releases - little and often really helps
  • big release with loads of new features will miss out most features in reviews
  • what’s new notes in store are the one chance to communicate with users
  • make it chatty, make it friendly
• building up a good brand
  • working with Eddie Stobart to make an Eddie spotter app
• have apps for iOS, Android, Windows Phone
  • spend a lot of time writing native apps
  • make savings on back-end — they all talk JSON
  • Android is 10% of iOS sales
  • Windows Mobile is 1% of iOS sales
  • doing it for brand exercise
  • going through improving other platform apps

So you have an app idea?

Dave Addey, Agant, @daveaddey

Video available on besquare.me

• 2008 Dave was an web developer in a spare bedroom office
• now runs a company with 7 employees
• a good idea for an app
  • is it a good idea?
  • is it a good idea for an app?
  • how do you go about making it?
• example: late night bars in London
  • cost low four figures to make
  • 3 months of preparation time for database
  • sold 2000 copies @ £3.99 (or £2.40 after Apple & VAT) — didn’t even break even…

is it a good idea?

• measuring good app market:
  • universal - niche
  • international - local
  • lasting - ephemeral
• UK Train Times launched in 2009 when the app store was smaller
  • local - UK not worldwide
  • lasting
  • fairly universal
• Malcolm Tucker app
  • when you open the app there’s one new voicemail waiting for you
  • when you listen to the voicemail it starts a 4 day process with incoming emails & voicemails as Malcolm Tucker tries to find his phone
  • timely
  • fairly niche
  • fairly local
  • so covered costs but not much more
  • but led to a lot of other interesting projects
• does the app have a long tail?
  • lasting appeal
• does it scratch your own itch?
• should have some kind of hook
  • something that’s not been done before
  • something to show off to user’s friends

… for an app?

• when potential clients say “I want an app”, it’s not always true — Dave talks 50% of clients out of
• dead time (5-10 mins)
  • e.g. supermarket line
  • used for QI app
  • book-style interface had larger books with longer content
• we know where you live
  • trip advisor offline city guides
  • nosey parker
  • rightmove app
  • e.g. next train home in UK Train Times
    • one button to home station from around here
• the app that’s always there
  • guitar toolkit
  • imdb: “what was she in?”
  • british red cross first aid app — everyone should download this now!
• ongoing (everyday) use
  • opposite of throwaway app
  • people rely on them
  • UK Train Times
    • get more sales through word of mouth than any other means
    • can still charge £4.99
    • has sold 300,000 copies throughout the UK
    • but losing National Rail icon caused a massive drop in sales
  • twitter clients
  • TuneIn Radio
  • clipboard management apps

how to go about making it?

• lots of platforms to cover
• one approach is PhoneGap, hybrid app builder
• but problem: e.g. featured app Wikipedia
  • doesn’t work in the same way as native apps
  • form controls are different
  • search is not the same for either platform
• @daveaddey’s maxim: “develop once for every device: you get a rubbish app for every device”
• have seen big brands develop PhoneGap apps and then pull them after a month
• if you spend ages fine-tuning your HTML to behave like a native app, then you might as well spend that time writing native
• … but the rule is different for games
  • you can build using cross-platform games engines, e.g. Unity, Marmalade
  • the interface is not specific to the device but specific to the game
• it’s all about the implementation
  • sharing profits based on an initial idea doesn’t make sense…
  • it’s all the little ideas throughout development
• Derek Sivers - cdbaby
  • ideas are worth nothing unless executed
  • they are multipliers
  • http://j.mp/ideaMultiplier
• Sergey Brin: “coming up with an idea is the least important part of creating something great… the execution and the delivery are what’s key” (via The Guardian)
• PhoneGap can be useful for a quick prototype to guage response
• apps can and should make use of HTML5 where appropriate
  • e.g. Malcolm Tucker emails, credits pages
  • QI app content — but displayed using CoreText not a web view
• hybrid approach
  • suggest creating a native app for one platform
  • a mobile web app for the rest
  • choice of one native platform is up to target market
  • use experience of first native to decide next native platform
• don’t muck with user expectations
  • native apps are expected to have native performance & behaviour
  • web sites have different expectations
  • but don’t try and make your mobile web site appear like a native app!
• pricing:
  • getting high value apps going
  • e.g. launching £10 app at £5.99
  • 69p for a UK only app is not going to break even
  • Agant don’t do 69p apps…
• bandwidth, speed, etc
  • saw more of a change between capped & unlimited than for improvements in speed
• biggest failing in App Store is lack of paid upgrades
  • adding new functionality is about finding additional users by re-promotion
  • Agant avoiding freemium because eeurgh :-)
  • but freemium seems to be a side effect of the lack of a paid upgrade option

10 top tips

1. project the risk of everything you do: best and worse case predictions
   • app should have a business plan
2. keep project budget realistic
   • don’t be tempted to spend a fortune
3. it’s important that all partners have a vested financial involvement
   • don’t take on apps for a content provider where they have no risk
4. talk about your idea - it will lead to better ideas
5. value Apple promotions
   • Malcolm Tucker was not promoted due to sweary language
   • QI app did get promoted - massive difference
6. best way to get Apple promotion is to make Apple devices look good
7. create a video that tells people what your app does
   • gives an equivalent to your app that people can share
8. keep updating your app - and give Apple reasons to promote it in each case
   • if you add big content, Apple will treat it as a new app
9. keep it simple and focussed
10. sweat the details
    • “the best way to market your app, is just to build a great app”

Content & tone

Robert Mills, Studio Manager at Bluegg, @RobertMills

Video available on besquare.me

• creating, managing & using content
• need an individual responsible for content
• content first otherwise design won’t fit…
  • see @rellyab, @halvorson
• used slickplan to plan site
  • signed off site map first
  • then got client to provide all content
  • client had to really think about what she was saying
  • she had to think about the whole site up front
• having all content ready means that organising translations is easier
• using content
  • what are you saying and who to?
• managing content
  • can use Google Docs, Dropbox, etc
  • or GatherContent
• doesn’t end after launch
  • need to review & refine
  • audit & strategy
  • ensure consistent & authentic
• auditing content for mobile
  • prioritise content over navigation
  • can prioritise content using traffic lights
  • need to check end use: ask why content is important

Working with Muppets

Ollie Wells, Sequence, @olliewells

• Sequence focus mainly on mobile web sites
• research — use analytics
• stakeholders (esp HIPPOs) can cause problems
  • Blackberry v5 is a pain in the butt
  • can use analytics to persuade them that their use case is not common
• useful functional spec wording (plain English, without version numbers):
  • The website will be built to perform at its best in the most common of modern browsers
  • Bugs that stop the side being usable will be fixed in the latest versions of the above browsers, as well as in 1 older version
  • Any bugs that we find in browsers more than 1 older version of the most common browsers will be looked at on an individual basis. This includes bugs that affect functionality as well as design.
• don’t oversimplify the mobile web site
  • ensure the functionality is still there
  • don’t remove functionality just cos your on mobile
• doing information architecture using sketches on paper
  • good example {picture}
• do prototypes on device
  • click from screen to screen
• frameworks
  • jquery mobile useful for quick prototypes
  • for prototypes, use sass, haml, coffescript and middleman
  • for production, use Mixture, gridset, twitter bootstrap
• Muppets web site for movie
  • all about characters
  • desktop is animation based
  • mobile is much simplified - same content, but static images
  • tablet is same layout as desktop but no animation
• device testing…
  • bluegg looking to open a device lab
  • choose your devices carefully - you can’t support everything
• do double res images for iconography, but not for photography
  • most users wouldn’t see the difference for photos
  • also CSS3 web fonts are useful for iconography

Taking content abroad

Rob Lo Bue, applingua, @roblobue

Video available on besquare.me

• imagine that you’re a french speaking user and you download an app, but it’s in english
  • bad initial impression…
• get your English right
  • get someone else to read it and answer questions
  • check it’s easy to comprehend
• avoid idioms - they don’t translate
• make your units use worldwide standards
  • e.g. include dollars as well as sterling, km as well as miles
  • always include timezone for event times!
• use a clear font for writing
• icons save translation costs!
• support international sharing
  • e.g. qzone (QQ), badoo
• if you have the budget and time, then look at translations
  • get users to translate!
  • but get another user to check
  • can use Google Translate for checking translation (don’t use Google Translate for actual translation!)
• choose languages carefully
  • e.g. most iPhone users in India are English speakers and use their iPhone in English… less ROI on a Hindi translation
• international compatibility

What’s holding the mobile web back, and what are Facebook doing about it?

Simon Cross, @sicross, si@fb.com

Video available on besquare.me

• worked at facebook for about 2.5 years now - makes him one of the old-timers
• digging in to Zuck’s quote from techcrunch disrupt in Sept 2012
  • faceweb v4 built from 2010: webview with extensions
  • at that time, facebook was a web company
  • update at will, one m-web codebase
• reach a point where people hated it because:
  • it was slow — slow*er* than their other apps
  • it pretended to be a native app
• took 6 months to fix it
  • because had to retool the whole company
  • had to slow down the release cycle, which felt wrong
  • had to get used to submitting binaries to Apple & Google
• v5 app (more native UI) went from 1.5 stars to 4 stars in 3 weeks
• …and Zuck’s quote continues to say that there are more people using facebook on mobile web than there are on Android and iOS combined
  • 7000 device types accessing every day
  • mobile users growing twice as fast as desktop
  • 126m mobile-only users
• so how to help developers grow mobile web apps?

distribution

• asked developers at PhoneGapDayEU why they were using PhoneGap: response — to be in the App Store (80%)
• in the app store to get distribution, but also because boss said so…
• mobile usage is different from desktop
  • general browsing is less used
  • instead people solve a problem, or fill some time
• facebook integration is no longer click to share
  • now it’s about publishing structured data
  • where, when, who
• e.g. soundcloud defined 5 actions
  • if you do any of these actions on any of their apps, it publishes that to facebook (if opted in)
  • then comes back as news feed either in app or in facebook app
  • news feed in facebook launches app directly — or else takes you directly to the app store to install it
• e.g. SongPop grew 9.7m users mainly through facebook sharing
• last 30 days, facebook sent users to native app stores 180m times
• also facebook has App Center for mobile web app
  • 170m monthly users
  • social recommendations
• last 30 days facebook sent users to mobile websites ~7m times

performance

• no visual difference from v4 to v5 except speed
  • but got 2x engagement
• Moore’s law still applies to mobile
  • at least to newly released devices
  • due to upgrades & contracts, the actual speed of increase is slightly slower…
• facebook is a founding partner of the W3C coremob community group
  • one of the first priorities is fixing appcache
• also developed ringmark: http://rng.io
  • Ring 0: what we have now
  • Ring 1: what we need to run 8 of the top 10 native Android & iOS apps
  • Ring 2: what we need to build all of the native apps on the mobile web
• 4 months ago, Dolphin Browser Beta for Android succeeded on Ring 1
• browserscope is now tracking ringmark over time

monetisation

• display ads?
  • on mobile? really?
  • they suck - both for size and for intrusion
  • BBC have long narrow columns because they need the right column for ads in the US
• credit cards?
  • too hard
  • cannot compete with native
• carrier billing?
  • can integrate via middlemen (bango, boku, zong)
  • facebook mobile payments layer on top of that
  • Ed: but doesn’t work on Wi-Fi

It started with a browser

Matt Gaunt, Developer Advocate, Google TV, @gauntface

• @AliDriver (Future Platforms designer, now freelance) able to do amazing things with HTML5
• latest devices could do it, but performance always an issue
• now looking at Google TV Spotlight
  • app store for TV optimized web apps
  • apps look really great
  • but developer spent two weeks adding a specific animation…
• just think about screens of different sizes
  • see Jason Grigsby’s article {link here}
• users don’t care if it’s a responsive design or separate mobile & desktop sites
• though probably want to have a catch-all site that will be ok for all situations
  • then add native apps or customized web sites as needed

Is your thinking L-shaped?

Kevin Mears, http://mearso.com, @mearso

• big CRTs meant you needed L-shaped desks - so could fit CRTs into the corner
• but don’t need them anymore for flatscreen monitors
• requirements change, don’t forget to change your tools…
• “Moses said”: my boss says…
  • difficult to argue with someone who isn’t in the room
• politics means that designers & developers can’t just be artists
  • have to sell the work
  • “Design is a Job”
• mobile use case — apply “app thinking” to a web site (Sarah Parmenter, FOWA)
  • what is the single reason for someone using my app?
  • and who are they?
• universities do have lots of different use cases
  • e.g. glamorgan
  • 100 users concurrent active users
  • 100 sub-sites
  • 100+ editors
• teaching people that need to delete stuff that is no longer relevant
  • Ed: but then it’s important to archive stuff on the web too
• basing templates off twitter bootstrap
  • frameworks tend to make you fit the content to the framework

UI for developers

Amber Weinberg, @amberweinberg

Video available on besquare.me

• specialises in mobile web apps
• did audible mobile web site
• pretty much 99% of design briefs Amber is given only include full-size desktop web site
• forget about mockups
  • just make it responsive
• breakpoints are when your site breaks
  • fix all the breakpoints at different sizes
• don’t fake it - you’re not a native app, so don’t pretend to be one
• put content where people can reach it
  • Apple have guidelines showing how people hold iOS devices
• show what’s important
  • e.g. boston globe
  • navigation gets simpler
• use columns
  • can move to less columns before switching to single column
  • compare scroll time with content size
• give extra spacing
  • make sure the text doesn’t hit the edge of the screen
• menus are crucial
  • if there are buttons in the header you may want to keep the menu drop-down and a separate action
  • can also have menus at bottom of page and a jump to bottom link at the top
• choose words or icons, but not both
• reduce images
  • responsive images not yet possible
  • try to use less images and more CSS
• retina-smetina
  • most of the time, users won’t even notice…
  • is it worth the bandwidth?
• buttons
  • read apple’s button guidelines
  • make important buttons bigger, 100% width
  • encourages people to press them!
• hover effects
  • make it clear that hoverable items are interactive
• don’t assume you know what your users are doing
  • but make it easy
• make font sizes appropriate
  • not too big
• don’t disable zooming
  • it’s an accessibility thing
• use sliders - with gestures
  • http://www.woothemes.com/flexslider/
• don’t forget your bookmarklet icon

We, Human

Andrew Spooner, Creative Technologist, Microsoft, @andspo

• works in developer platform evangelism team
• get tech about a year or two before it hits the public
• why do we connect things?
• vannevar bush & the memex…
• internet fridge…
• toaster telling me that the robo-vacuum has picked up the dog being sick behind the sofa
• NEST gives feedback on temperature changes: it will be 21°C in 15 minutes
• in 2008, the number of things connected to the internet exceeded the population of Earth
• latest John Deere cotton picker RFID tags each cotton bale
• microsoft project emporia
  • personalised news editor based on articles that you say you like or don’t like
• kinect
  • daughter thinks kinectimals is a film that she stars in
  • shadow puppet control
  • making people invisible (at least on TV)
  • putting a kinect on a quadrocopter
  • trolley that follows someone on a wheelchair
  • face detection and recognition…
• use with caution
  • what are the standard gestures?
  • cancel?
  • don’t turn up the volume control by whirling your arm round and round
• human capacity is not accelerating like our tools…
• minimise complexity, increase consistency
• design style: http://design.windows.com
  • pride in craftmanship — sweat the pixels
  • fast & fluid — motion & animation
    • custom controls need a lot of extra work
    • we have movement in nature, we expect things to move in the same way on digital screens
    • animation with a purpose
  • authentically digital
    • use sensors
    • iconography can represent digital realm
  • do more with less — get rid of UI chrome
    • make the content the interaction
  • win as one
    • small pieces loosely joined
• summary:
  • contextual & social UX is an expectation
  • understand the human - keep it that way

Design Systems

Laura Kalbag, @laurakalbag

Video available on besquare.me

• moving to responsive design
• but still designing at fixed widths
• shouldn’t be thinking in static
• thinking about devices, not content; deliverables, not process
  • thinking about what they give to the client
• design systems
  • typography
  • layout
  • shape & form
  • colours
• what are you going to keep the same across different viewports, and what will change?
• content is always the same
• for design, might want to start with typography
• then move on to base unit
  • based on width/height of ad unit?
  • used for grids, line height
  • makes site feel consistent across changes
• grid can’t stay the same, but try to keep consistency
  • 6 -> 3 -> 1
  • or 4 -> 2
• shape and form includes textures & illustration style
• colour can be kept the same most easily
• design in the browser
  • brilliant idea
  • can’t do it though…
• tools:
  • share design ideas through style tiles
  • styleguides
  • http://pea.rs
• clients want to know what it looks like on different devices
  • they’re snapshots, not mockups
  • if they like the style tiles, then start prototyping in the browser
• don’t base breakpoints on device widths — should be based on content
  • e.g. videos, images, headings
• “if you’re not ashamed of what you did 3-6 months ago, you’re probably not keeping up”
• another app to try is typecast

a happy grain of sand

Aral Balkan, @aral

Video available on besquare.me

• think about how the whole system works together
• an experience is only as strong as its weakest link
• as a designer, try to remain naive
• washing machine:
  • designers think they’re building a machine that washes clothes
  • users actually want a machine that cleans clothes
  • don’t want or need to know the internals of how or why clothes are washed in different ways
• superman effect:
  • makes the technology disappear
  • and the interaction appear like magic
  • Ed: shouldn’t this be the A. C. Clarke effect…?
• interaction design is about dealing with the loss of a human from an interaction
  • replacing the human with a machine is hard
  • but it’s really important
• focus
  • great design is a symptom of a design-led organisation or organisational structure
  • antoine de st. exupéry: “Perfection is attained, not when no more can be added, but when no more can be removed.”
  • design is not democratic
  • you have to make sacrifices
  • in this day & age, great design is the business plan
• design > test > develop > test > design …
  • keep iterating
  • and don’t forget the vision
  • the user testing needs to be filtered through the vision
  • Ed: e.g. Apple does less user testing as they know that asking people doesn’t always give the right answer
• user empathy:
  • indeterminate spinner isn’t enough — need to show empathy when waiting
• web vs native: http://thelink.is/webvsnative

BarCamp London 8: Windows Phone 7 & app development

Jess Meats

More details may be available later on lanyrd

• Marketplace purchases
  • can link to an existing Live ID with a credit card
  • or can register card details on the phone
• development kit for phone
  • get templates for visual studio & expression blend
  • get an emulator (includes IE mobile)
• visual design all done in XAML
• can use Expression Blend for design
  • allows you to drag & drop and design animations visually too
• when registering as a developer, have to go through XBox Live…
  • in order to sign up to terms and conditions
• app submission:
  • testing happens overnight
  • if there are test failures, get a report in the developer dashboard
  • problems may happen with GeoTrust…
  • need a notary to sign and stamp a physical document
  • getting paid requires you talking to US Embassy in London…
• @simonmaddox: SDK works in Fusion, but not Parallels
  • requires a VM inside a VM
• can register a device for development
• sync to Google only gets main calendar at the moment
• background processes can now put things on the lock screen (recent change)
  • as before, can also change the home screen tile and put toast notifications in the status bar

MomoLondon: Living in a Multi-Platform World

Another Mobile Monday on fragmentation of platforms, but this time hosted by a big company just about to launch yet another platform… The Microsoft reps seemed to come on a little strong tonight. So much so that I started to tune out when it was their turn to talk.

Nick Lansley from Tesco.com was a new face at Mobile Monday — and had some good things to say. He seems to have his head screwed on right about where to take Tesco.com in the face of multiple platforms and a wide spread of consumers (it’s the API, stoopid).

Tom Hume of Future Platforms also gave some interesting insights — I like his idea of using an AdWords campaign to figure out the target platforms for a new product. It’s always better to measure than to guess — and the internet lets you measure everything.

Alex Reeve - Director of Mobile Business Group, MSFT UK

• it’s fair to say that MS have had their challenges in the mobile industry
• they’re fully aware of that and they’re aware that “a new dawn is coming”
• mobile is enormously important to MS
• Windows 7 coming this side of Xmas
  • integrating contact details & social connections
  • options to show thing separately or together
  • keeping pictures together (including Facebook, etc)
  • “people want Internet Explorer on their phone”
  • do they really? don’t they just want Facebook/Yahoo/BBC, etc
  • fully-editable Word documents
  • email works the same as Outlook
  • I hope not… that would be horrible
  • “Zune is mainly a product in the US only”

Panel session

Panel (and their phones):

• Chair: Marek Pawlowski
  • this is no longer just about mobile — platforms to support now extend to TVs, games consoles, etc…
  • nearly all devices can do voice
  • most can do SMS, and a lot have browsers and Java
  • Q1 this year about 18% of mobile sales were smartphones
  • 11% of market by end of this year will be smartphones
  • 3/4 of developers use an Android or an iPhone as their primary device…
• Oded Ran - Windows Phone in the UK
  • Windows Phone - HDT HD2
• Tom Hume - MD of Future Platforms
  • Nexus One
• Nick Lansley - Head of R&D at Tesco.com
  • iPhone, Nexus One (which crashes 3 times a day)
• Jerry Ennis: CEO at Flirtomatic
  • #1 mobile social network in UK, if not in Europe, according to Comscore
  • though I guess it’s dwarfed by Facebook & twitter, which are social networks that people access on mobile…
  • iPhone
• Ilio Uvarov - lead UX practice at RG/A London
  • clients such as Nike, Nokia
  • iPhone

Which mobile platform would you develop for first and why?

• NL: probably give a different answer every couple of months
  • would like to choose most common in Tesco customer base, but that would mean a phone that’s incapable
  • started with iPhone “because I had one”
  • iPhone is a “hero device” — you get much more marketing for your buck
  • but need to balance with what devices customers are using
• JE: started believing they could use downloadable Java apps
  • but wasn’t really possible
  • target market are not using Java apps, even if their phone is capable
  • have instead gone to mobile web
  • also seeing some startling usage growth from iPhone (Flirtomatic have an iPhone app that wraps a browser)
• TH: would probably cheat and spend £50 on an Adwords marketing campaign to see who was interested…
• IU: depends on target
  • business people in NYC — Blackberry
  • teenagers in middle east — Blackberry
  • hipsters in London — iPhone

What can platform providers provide to developers to attract them?

• OR: don’t want to write once, debug across multiple hardware
  • want to make money
  • choose to piggyback on a platform launching (someone else’s marketing muscle)
• NL: iPhone and Android offer push update notifications
  • really important — bug fixes are v. important to customer experience
  • Ovi falling down massively here
  • Apple also making things difficult by making updates take up to two weeks
• JE: Flirtomatic app is just a wrapper around mobile web app
  • can’t take advantage of native aspects
  • but changes can be deployed very quickly without going through Apple

Who in the audience had a bad experience of starting out on a mobile platform?

• TouchNote: went for Nokia 3rd edition (Symbian) & Ovi store
  • just not a lucid, easy experience for customers, even in comparison to Blackberry, let alone iPhone & Android

Who’s had a good experience?

• No one put up their hands!!

Do customers really take updates?

• TH: 60-70% take updates for android
  • would imagine iPhones are about the same
  • Java apps are almost impossible to get customers to update
• NL: always offer new features with bug fixes
  • every time Tesco update the Tesco Finder app, they see 99.9% of new version by the end of that day!
• IU: have about 100 pending updates on his iPhone
  • end up not using 90% of apps that you’ve downloaded
• MP: 70% of mobile web users went to 10 major brands

MS have developer lock-in for tools, will they lock-in legally like Apple?

• Silverlight & XNA plus mobile web are main ways to market on Windows Phone 7
• Haven’t finished Ts&Cs yet

Is it sustainable to support so many platforms, or will we see consolidation?

• TH: we are seeing consolidation around the web
  • don’t feel intimidated by number of platforms, as only have to deal with those that provide an audience
  • feel locked in to Apple not by legal language, but by the audience that they provide

What can platform providers do to make a new platform attractive?

• don’t make us write the app in Silverlight — let us write it in C#
• reveal the number of apps in the store — no hype
• charge less than Android & Apple (30%)
• make it easy for customers to buy cheap things with enough money going to developers

Which platform gives the best ROI? How does mobile web compare?

• JE: make money with virtual currency (80% revenues), rest from advertising
  • how do we bill people to buy virtual currency?
  • operator billing (reverse SMS), credit card, paypal
  • still 60/40, 70/30 — not so good
  • credit card still cheapest for business
  • Apple don’t let you use in-app purchases for virtual currency…
• TH: not sure that there’s a link
  • look to introduce customers with operator billing and then convert repeat customers to credit card later
• JE: operator billing is a terrible UX — sometimes a 12-step process
  • not as bad in UK, but US can be really bad

What about emerging markets? What are platforms doing?

• OR: active in two sides, services (Hotmail, etc) & devices
  • phone becomes 1st screen
  • exploring new ways of getting hold of the phone, since Windows Phone is not targeted at emerging markets
• NL: when Tesco arrives in a market, it could be said to have “emerged” already…
  • “Tesco in a box” — all systems for a new country shipped out
• MP: discussing India with major internet brand, responsible for UX
  • because device is becoming primary, there are increasing number of smartphones
  • also multiple SIM cards for each user (up to 12!!)
  • Italians have 1.77 SIM cards per subscriber, cf. 1.4 UK & 1.3 in US

Multiple platforms outside of mobile

• IU: depends on the use-case
  • things that work nicely across channels: e.g. instapaper
  • boxee: combining web, mobile & TV (can use mobile as remote)
• NL: did ethnographic research in people’s homes as to how they shop
  • calling on phones, SMS, writing messages on paper
  • wanting to allow people to add things little and often throughout the week
  • have cheated by building an API to get other people to create apps
  • e.g. Yahoo widgets on TV: watch cooking show, and add ingredients while you watch
• TH: big fan of opening up API, but how does that work as a provider? are you worried about the customer contact being mediated via a third party?
• NL: grocery shopping is not really exciting to customers
  • would rather get great ideas in front of customers
  • customers still have to login and checkout on Tesco site

What about voice as a platform?

• TH: Google introduced voice search and changed his behaviour
• MP: need to be very careful about experience:
  • experience was significantly enhanced when interacting with an avatar
• JE: tried out a voice part of app a year or two ago
  • watched my teenage daughter who never talks to people, but uses text & facebook instead
• MP: is that an opportunity? getting people to use their unused minutes!

How do you handle that your app is living on a phone with others?

• NL: Nexus One had an app using up all his minutes when in US
  • data hogging apps rapidly become unpopular
• TH: it’s one of the important things that makes the difference between mobile and desktop
  • number one feature on the iPad is battery life

What about upcoming standards: JIL, BONDI?

• NL: if you don’t make your app the best it can possibly be for that device then don’t bother
• MP: customers have one device — they’re not bothered by fragmentation

Brief summary

• IU: kept going back to UX
  • do you want to be good enough or delightfully different
• JE: all about UX — the best possible UX is using the latest features of any platform, rather than going cross-platform
  • payment is crucial, runs across different platforms
  • needs to be improved, simplified and cheaper for business
• NL: has to be relentlessly good design for every make and model of handset
  • gives you brand consistency
• TH: root causes of fragmentation are a good thing
  • mass market (2/3rds of world’s population) and extremely fast rate of change
  • developers have to get used to it
• OR: successful developers are embracing the fact that fragmentation is here to stay
• MP: “can economise on plumbing but make sure your bathroom is pretty bling”

Announcements

• Microsoft BizSparkCamp: June 22nd 9.30-5.30
  • “they want to give you things…”
• July - MomoLondon: Marketing your mobile app
• August - MomoLondon break
• September 10th & 11th - OverTheAir 2010