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
- 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
- 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
- project the risk of everything you do: best and worse case predictions
- app should have a business plan
- keep project budget realistic
- don’t be tempted to spend a fortune
- 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
- talk about your idea - it will lead to better ideas
- value Apple promotions
- Malcolm Tucker was not promoted due to sweary language
- QI app did get promoted - massive difference
- best way to get Apple promotion is to make Apple devices look good
- create a video that tells people what your app does
- gives an equivalent to your app that people can share
- 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
- keep it simple and focussed
- 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
- 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
- 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
