Showing posts with label localisation. Show all posts
Showing posts with label localisation. Show all posts

Wednesday, 6 March 2013

NSConference 5: Day Three

iOS Tools at Flipboard

Evan Doll, Flipboard @edog1203

avoiding crap work

  • use jenkins
    • run clang: +leakToEnsureClangDidRun
    • can also use to send out a beta using TestFlight/HockeyApp
    • jenkins build types:
      • beta
      • beta-external
      • ios-debug-device
      • ios-debug-simulator
      • ios-debug-unittests
    • takes some time to get things sorted with signing etc
  • app icon versioning
    • stamp app icon with the version
    • ImageMagick shell script build phase
  • use multiple bundle identifiers
    • allow app store, beta & debug builds to coexist on device
    • define a custom build setting called BUNDLE_SUFFIX
    • then reference the variable in the Info.plist
  • use JetBrains AppCode as an additional bug finding tool
    • unused code, mismatched types, etc
  • HockeyApp is great for beta handling & crash reporting

squashing bugs

  • useful to capture app state without plugging in to Xcode
    • CocoaLumberjack - high performance logging library
    • bring up a console log on the device
    • also added view hierarchy explorer & file explorer to debug builds
    • tweaker: in-app property inspector launched from pressing and holding on any view
    • see also DCIntrospect & CBIntrospector on github
  • bug reporting UI
    • launched by gesture from anywhere in the app: Flipboard use the volume buttons
      • do some basic checking in case there is actually audio playing…
      • useful to have a hardware gesture
    • attaches view hierarchy, file system, etc
    • can also take screenshot
    • Flipboard attach app feed state to each bug
      • then have in-app bug browser
      • can replicate feed state in app directly from bug

give yourself superpowers

  • testing gestures in the simulator is a pain
    • instead use keyboard shortcuts
    • http://bit.ly/ios-keyevents
    • override UIApplication to capture key events at a deep level
    • doesn’t mess with other text views
    • can use dlopen & dlsym to load private framework in debug code, without linking public app
    • some shortcut examples:
      • enter login info
      • block UI thread for 1 second
  • feature switches
    • exposed in the app
    • can force on/off first launch flow
    • e.g. early iPhone introducing app re-ordering jiggle
      • special shortcut to show an overlay to adjust rotation, shift & frequency
      • handed to Steve to adjust…
      • (see also the Calculator Construction Kit)
    • change the language without resetting the whole phone
      • need a wrapper round NSLocalizedString
    • if arguing about design options, try it both ways
    • freeze content in app for marketing
    • e.g. always show advert
    • make them dynamic at run-time
  • pseudolocalization
    • map all localisation keys to unicode accented characters with extra length
    • For more info on Pseudolocalization, watch the “Internationalization Tips & Tricks” video from WWDC 2012
  • WebTranslateIt
    • shared strings for iOS & Android
  • escape hatches: brains on the server
    • change your mind after the app has been released
    • JSON file for settings
    • sync NSUserDefaults
      • comment from the audience: GroundControl from Matt Thompson (@mattt) can provide remote settings
    • also replace Localized strings
    • in-app help
    • UI hints
    • even adding new social services…
  • chaos monkey
    • process in the app that randomly makes things fail
    • memory warnings, delete cached content, closing network connections
    • ensure there’s some obvious part of the UI that indicates when the monkey is running

communication

  • use pivotal tracker: task management tool
    • testers report into Jira
    • then prioritise using pivotal
  • github pull requests to communicate about code
    • talking about code in progress
    • not just for reviewing
    • start earlier
    • get designers involved
  • GitX + email for lightweight code reviews

User Identity

Markos Charatzas @qnoid

  • stop using passwords!
  • the password policy is one of things wrong with passwords
    • each company has different rules
    • then just as you remember the password, you have to change it
  • security questions for when you forget…
  • need to innovate on user authentication
  • residence based authentication

Reverse Indie

Alexander Griekspoor, Papers

  • 100% Indie (until 31st Oct 2012…)
    • bought by Springer Science+Business Media
  • started making free apps just for the fun of it
  • won an Apple Design Award
  • then made Papers while waiting for postdoc to start
  • free apps drove adoption of paid apps
  • also gave 40% discount to students — fuelled word of mouth marketing
  • then had to figure out how to grow from one person to two?
    • how many more copies do I need to sell just to employ another person?
  • then iPhone & iPad got released…
    • suddenly could support an extra developer
  • iOS enabled growth
  • got handed a love letter to Papers at WWDC 2009 :-)
  • when app gets popular requirements start getting bigger
    • choose between lifestyle business or let the product fly
    • restrict the business to the size of you, or let the product free and take a step back
  • offer of being taken over by a big company
    • wanted to keep independent direction and not get eaten by the beast
      • take advantage of big marketing & sales + common HR & legal
    • need to be able to speak to the guys at the top
    • if the process gets difficult, need to go back to them and check if things are still on track
    • get the financial stuff sorted early
    • get professional help early
    • bring soft issues up immediately
      • they won’t go away

Rethinking Syncing

Charles Parnot @cparnot

http://cocoamine.net

  • syncing-friendly-driven development :-)
    • start with a sync-friendly foundation
    • use a syncing-friendly data model
    • make syncing-friendly decisions
    • keep things syncing-friendly
  • can just use dropbox
    • but two devices accessing same file can get corruption
    • can use a lock file
    • or File Coordination APIs (controls all access so single machine only)
  • have multiple databases, one read/write, others read only
    • log events rather than just storing data
    • then can get latest event
  • rather than having entire record as an event, can use a key/value store with timestamp
  • fetching data involves iterating through required keys
  • can open multiple databases in CoreData
    • one as R/W
    • others can be loaded as read only
    • CoreData will manage reading from combined data and writing to R/W db automatically
  • example: crash reports library
    • shared amongst multiple developers using dropbox
    • key/value database for adding/modifying crash report files
    • UI layer has an in-memory cache of latest data
  • inspirations

Independent, but Not Alone

Craig Hockenberry @chockenberry

Principal at the Iconfactory

  • Weightbot: crazy idea to add personality
    • but it makes the app fun & accessible
    • designer challenged developer to make the app work in a better way
  • “Design is not just what it looks like and feels like. Design is how it works” — Steve Jobs
    • “Developers don’t know how their product works” — @chockenberry
  • developers think of a product from the inside out
    • think about underlying stuff at the beginning
    • UIs reflect the underlying design
  • designers think of a product from the outside in
    • don’t even know what orthogonal means
    • not worried about how it works, or how hard it might be to implement
    • think about your app in the same way that a customer would
  • a designer is your first customer
    • they will give you feedback that may hurt your feelings
  • provide help with tough decisions
  • explaining problems to a non-technical person helps you think differently about the problem
  • how do you make the design - code - review process shorter and tighter?
    • for Twitterrific (iOS & Mac) had a couple of attempts…
    • first attempt: AppTheme
      • application-level settings
      • extract fonts, colours, etc into a file that the designer can edit
      • can still be objective-c
      • still need to train designer to build & install
    • improved attempt Theme: used UIAppearance
      • one Theme for every view class in the app
      • some view classes only exist to be customisable
      • used some macros to make images, insets, gradients etc
      • in Chameleon, when remove root view controller from window, can reset UIAppearance to a new theme (don’t forget to add it back afterwards…)
  • Interface Builder is the uncanny valley of UI design…
    • hard to visualise results
    • really easy to screw things up
  • most important tool to work with designers is version control

Copywriting is Design

Nik Fletcher @nikf

  • even “serious” products are known as Apps
  • Nik is trying to purge the word Cancel from our app vocabulary
    • negatives are hard to scan quickly: “Delete” “Don’t Delete”
    • go for opposites: “Keep”, “Never”, “Not Now”
  • try not to repeat words in sequential alerts
  • disclosure
    • iOS 6 introduces data isolation instead of CLLocationService.purpose
    • localised Info.plist strings instead (see this blog post)
    • can reset:
      • OS X: tccutil reset ..
      • iOS: Settings > Reset All
  • photo access has implicit access to past location history
    • either disclose usage or scrub it before you upload
  • don’t use checkboxes to turn stuff off!
    • tell QA when you find it
  • don’t talk about the “File System” or the “Keychain”
    • again — it’s implementation detail
  • app state: not running or stopped; instead open or closed
  • example: Realmac developer found an awkward bug in Quick Look
    • developer just added a “QuickLook sucks” alert
    • Nik got an email saying “what’s your problem with Quick Look?”
    • …from the engineer at Apple who worked on Quick Look
  • “personality” can be useful in copy
    • but don’t trivialise important things
  • nice trend of moving errors inline
    • avoiding unnecessary alerts
    • e.g. Mobile Safari has error pages rather than alerts
  • your copy (and maybe your company) needs a style guide
    • anyone in the company can use it
    • even developers…!
  • customer? user?
    • Apple uses “you”
  • use genstrings & ibtool to get all the strings into a file to check through
  • recipe for a great alert:
    • title: how did I get here?
    • title & copy: what am I doing here?
    • buttons: how do I do that?
    • buttons: where do I go from here?
  • see more on http://talks.nikf.org/nsc13

Controlling an animation with a UIGestureRecognizer

Eelco Lempsink @eelco

  • want to use a gesture to scrub across an animation
    • e.g. Photos app on iPad lets you slowly pinch/zoom open each event/album
  • control animation: CA...Animation* animation ... animation.speed = 0; animation.duration = 1; animation.timeOffset = position; // 0 .. 1
  • use UIPinchGestureRecognizer
    • adjust scale to fit the UI element size and animation
    • objects should stay under your fingers as you move them
  • decide what to do when you release the gesture
    • end state, duration, animation curve
    • during gesture you probably want linear animation
    • but when you let go it should probably be something different
  • if you have a complicated animation you can add a property to control the offset
    • can then derive other properties from the value of this new property
    • simplifies code
    • but you have to do some interpolation maths yourself

The Art of Shipping

Alan Cannistraro @accannis

http://facebook.com/alancannistraro

  • worked 12 years at Apple
  • started on iOS apps in 2006 before iPhone even announced
  • now working at Facebook London
  • 5 stages to shipping a product

conceive

  • Steve Jobs: “Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while.”
  • de Bono lateral/horizontal thinking exercises
  • e.g. “Random Entry”
    • define a focus
    • choose a word from a 2000 word table
    • spend 10-15 mins generating ideas
    • repeat
  • then distill ideas
    • filter for crap or technically impossible
    • gather into a cohesive story

design

  • Steve Jobs: “sweat all the details”
  • Alan uses wireframes to help to decide the design
  • then generate screenshots
  • does it flow? can you simplify it?
  • design up front is easier…
    • (but not always possible)

build

  • make a scaffold: has all the bits
  • Steve Jobs: “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple.”
  • don’t mess with MVC
    • don’t have a UIView that references an NSManagedObject!
  • Cocoa SDK API has a team that scrutinises the code and strives to simplify it
    • use their API as your yardstick…
  • tried a project by designing it all in UML first
    • the developers stopped coming in…
  • start with simple bits
  • avoid shortcuts unless you’re 2-3 days away from release…

refine

  • track everything
  • set a date
  • don’t be afraid to punt issues to the next release
  • prioritising bugs:
    1. data loss
    2. crashes
    3. visual polish (!)
    4. regressions
    5. bugs in new features
    6. everything else
  • why visual polish so high?
  • Donald Norman: Emotional Design
    • aesthetically pleasing objects appear more useful
    • cognitive bias: beauty bias
      • when something is beautiful, we believe its other properties have prowess
    • the halo effect
      • not about success in one area leading to another
      • instead our brains assume that beautiful apps are better, whether they are or not

review

  • Steve Jobs: “My job is not to be easy on people. My job is to take great people and push them.”
  • be honest about first impressions
    • but leave your ego at the door
  • if it feels wrong, don’t ship it

one more thing…

One thing that Steve said to Alan was “the most important thing you need to do surround yourself with people smarter than you.”

Monday, 19 November 2012

Handheld Conference 2012

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.

handheld conference

cardiff bay panorama

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
  • 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
  • the app that’s always there
  • 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
  • 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…
  • 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
  • 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
  • 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:
  • 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

Sunday, 28 October 2012

Droidcon London 2012, Day One

The first day of Droidcon London was a barcamp, though one with lots of pre-prepared presentations.

The main highlights for me were finding out about useful libraries and services developed by the Android community — RoboSpice, TestDroid and Dr. Power — that and meeting more Android developers (apparently there were over 1000 there!).

immersion haptics

  • haptic effect preview app available on google play
  • immersion started with game controllers
    • e.g. logitech steering wheels
  • also have automotive
  • android just has vibrate on and off
  • immersion sdk extends the vibrate method
  • http://immersion.com/haptic/sdk
    • adds about 400Kb to app…
  • deals with all different vibration methods
  • copes with devices with no motors (just doesn’t do anything…)
  • best tweet about haptics @hapticsdev wins a galaxy note 2
  • navigation queues
  • battery usage — about 3% for an hour of vibrate usage during a game
    • goes down to 1% for piezo vibrators
  • but don’t use the motor the whole time — it just annoys the user and dulls their senses
  • leave the haptics and sound options separate (so people can play silently but keep haptics)
  • standardisation of patterns for accessibility?
    • library of 124 effects is a default standard
    • up to RNIB to come up with semantics

robospice

  • library for making async network requests easy
  • https://github.com/octo-online/robospice
  • intro guide
  • available on maven central
  • AsyncTasks not so useful as the activity can change while the task is still processing
    • e.g. if device rotates while running, then asynctask could update the wrong activity
    • leads to memory leaks
  • Loaders are an alternative
    • but designed for database access not networking
    • can’t keep the response if the activity changes
    • no exception handling by default
  • RoboSpice uses a background service
    • activity creates a request and a request listener
    • request passed across to the service by the spice manager
    • requests can last beyond a single activity, so can pass results to the newly rotated activity
  • each context that needs a remote call will have its own SpiceManager, each of which binds to the SpiceService individually
    • can have a SpiceManager in an activity, a service, a fragment, etc
  • SpiceService keeps results in a cache so can respond immediately
  • integrates with Spring RestTemplate for Android

text layout for localisation

By Kotikan, developers of SkyScanner

Charles & Robert — @charlessharley

  • different languages have radically different word lengths for the same concept
  • best solution is to guide your translators to use shorter text lengths
  • sometimes not possible…
  • built-in truncation only operates on the whole string — can skip out important words or syllables
  • created custom TextViews
    • resizes text to fit (keeps on getting smaller)
    • flexible truncation using markup
  • code currently not available as open-source, though Charles & Robert trying to persuade their company that this would be a good idea…

resizing to fit

  • need to separately subclass TextView, Button & CheckedTextView
    • put resizing logic into a common utility class
    • decreases size (down to minimum) until fits
  • also have harmonisation to keep consistent text size amongst similar widgets
    • have a harmoniser that listens to text size changes across a group of widgets
    • sets text size of all to smallest of group
  • also used XML group ID to define harmonising groups in layout
    • include a new namespace
    • defined as res-auto so will be populated with package name
    • can be used to add additional attributes
    • key needs to be group ID and context so that XML files across the activity can be grouped together
      • context must be declared as a weak reference to avoid memory leak

flexible truncation

  • check need to truncate first
  • then parse markup to split sections
  • measuring each section
  • truncate sections to fit space available
  • cache text panes

KirinJS

James Hugman @jhugman http://bit.ly/kirin-github

  • most apps James has written are fairly IO bound
    • so performs fine for them
    • obviously, games would not be suitable
  • Glasto 2011 app stored JSON data into SQLite
  • other similar approaches:
    • Calatrava — similar to Kirin but from a web dev point of view
    • j2objc — compile java into Objective-C
      • under heavy development…
    • Ejecta.js — write to canvas, renders in OpenGL

Sony SmartWatch

Jerker Lindgren Götsten jerker.lindgren.gotsten@sonymobile.com

SDK available at http://sonymobile.com/developer (also available as ADT extensions)

  • notification & control APIs are shared with SmartWatch + Smart Wireless Headset
  • notification is stateful, with a central database on the phone
  • battery life is an issue — watch can last less than a day if over-used…
  • also frame rate is 6-7 FPS for full screen images
    • faster for partial updates
  • extensions can be started either by an app on the phone, or by the user on the watch
  • you get a Pause event if a high priority input happens (e.g. phone call)
  • SDK has utility classes to receive sensor events or send updates
  • music player also available as open source
  • host app searches Google Play looking for extensions that include LiveWare… phrases
  • sports apps are working really well in Google Play
  • other apps:
    • remote camera viewfinder
    • tic tac toe, puzzle
  • popular in Japan — with other small technologies :-)

OpenCV for Android

Erik Hellman

  • Android library is a wrapper on top of native API
    • includes armv5, armv7 and x86 variants
  • object detection
    • face, hand, eyes, edges
  • optical flow lets you track points in a moving video
  • lots of alternative classifiers available (search online)
    • haar cascade is a little bit slower than lbpcascade
  • in Android, front facing camera is 1, main is 0
  • better to work with smaller preview window size
    • 320x480 is often enough
  • faster to reuse bitmaps & matrices (avoids lots of allocations)

New Samsung developments

Manfred Bortenschlager http://developer.samsung.com

  • planning to have Samsung apps on fridges, washing machines, air conditioners as well as phones and cameras

galaxy camera

  • 21X optical zoom
  • Android 4.1,
  • basically a Galaxy S3 with a camera attached!
    • still has 3G and Wi-Fi
    • feels fairly hefty for a compact camera
  • software control gives you additional camera features:
    • automatic zoom to moving object
    • zoom while taking picture (for effect)
    • slow sync to enable light writing
    • voice control
  • current API (work in progress):
    • ParametersEx class with 130 methods…
    • setAperture, setShutterSpeed, setIso, etc
  • sample usage: camera = Camera.open() params = new ParametersEx(mCamera) params.set... params.updateParameters()

Stella SDK

ChatON & AllShare

  • ChatON: online chat
  • AllShare: online media storage & sharing

Big Fat Soft-Key

Giovanni Bisutti http://inputdynamics.com/

  • using microphone & accelerometer to detect taps on phone case
  • works on back or front of phone
  • expect SDK to be released next year
  • uses up to 7% of CPU when in use… (though more optimisation required)
  • new app being demoed next month
    • mostly native code
  • looking for an Android developer to help develop the SDK…

Future of Android - OUYA Game Console

Julie Hurman @jhurman

http://ouya.tv/

  • made $8.5m on kickstarter… ($1m in 8h22m!)
  • disrupting a market that hasn’t changed in 30 years
    • consoles and games are both expensive to purchase
  • OUYA is about openness for both gamers and developers
    • all games will be free to try
    • developers build for Android (no cost for SDK)
    • every single OUYA is a debug console
  • working with NVIDIA to have best Tegra3 performance
  • will have its own storefront
    • will curate content (review for copyright infringement, spyware, etc)
    • will not have ads
  • schedule
    • first units are coming off the production line
    • dev units will be out in December
    • kickstarter backers will receive units in March
    • aiming for full roll-out in April
  • goal is to potentially refresh OUYA on a yearly basis
    • won’t have a 6-7 year lifecycle of existing consoles
    • some of the audience were concerned about whether a stock NVIDIA chip would be able to have an impact in the living room when facing custom hardware from the likes of Sony. But as John Carmack has said, “technology doesn’t hold back game designers anymore.”
  • store will have cryptographic controls for securing content, but they’re working to allow root access to the device as well (could be interesting)
  • will be able to show the games that have had most time played in them
  • going for 70/30 revenue share
  • majority of SDK is in-app payment API

Demo Camp

This was lots of very short (1 or 2min) product demos. Some better than others…

  • testdroid app crawler
  • palerta — private social smart friend alerter
    • doesn’t overshare your location
    • by Little Fluffy Toys
    • also make location library
  • Tawkon - Dr. Power
    • can see power usage on individual processes of each app
  • secret.dj
    • 300 venues
    • see what’s playing & add to playlist
    • gamification to gain credits & jump queue

Friday, 9 September 2011

iOSDev UK: Design Considerations for Educational Apps

Fraser Speirs, Head of Computing & IT, Cedars School of Excellence, @fraserspeirs

http://speirs.org

  • last year gave every child an iPad
    • only 100 pupils
    • had 220 people come to visit the school…
  • when you give people the internet the whole time, you sometimes get unexpected results
    • Fraser showed a slide of coursework on cell nuclei, decorated with a background showing the Statue of Darth Liberty
  • sitting around iPads — everybody faces each other rather than all facing the screen at the front
  • avoiding the ceremonial computer lab — moving to casual computing
  • beautiful artwork created by kids on iPads, within a month of receiving them
  • it’s not just the iPads, it’s the 1:1 — the 1:1 is more important
  • Fraser’s daughter is 4.5 — just started school
    • will graduate from university in Summer 2029
    • “we are already teaching the citizens of the 22nd century”
  • looking at investment as kids’ chairs & tables
    • not as a guarantee that scores will go up

Do’s and Don’ts for apps in schools

  • don’t assume the internet works correctly
    • schools change what internet is available through frequent policy changes
    • youtube is often turned off
  • teaching fashions come and go regularly
  • in-app purchase doesn’t work in schools
    • central purchasing or gifting
    • e.g. PCalc has a full version that can be purchased at once
  • don’t assume your users can (will) read
    • use conventions wisely (keep the back button in top left corner)
  • use push notifications sparingly
    • no good advertising to kids in school — they don’t have the app store password anyway
  • watch out for number of devices nearby
    • could be 20-30 devices around
    • infrastructure may cope, but leave room in your UI
  • limit or prevent app store interactions
    • no good in schools
    • confuses kids; annoying for teachers
    • that goes for “review me now” too
  • teachers need access to content
    • support the photos app
  • don’t promote facebook
    • facebook can be a major source of anxiety for many children
  • watch out for shaking gestures — not good for
  • don’t use bad language (and try to avoid double-entendres and local slang too). Some examples:
  • be very careful with user data — especially with location
  • talk to teachers and test with actual children
    • Fraser’s school does not have the scale to be a beta tester…
  • watch out for different curricula in different countries
  • walk through guide in the app
  • kids can use loads of apps to edit graphics, passing the image through the photos app
  • use sharing effectively
    • use “Open In…”
    • avoid huge sharing option lists
  • show proof of completion
  • avoid (penalise) random hits
  • structure + headroom = creativity
    • app idea: make toontastic for creative writing
  • show user activity
    • e.g. Brushes lets you record all your strokes and play them back as a quicktime video
  • localisation is useful even if your app is UK-specific
    • e.g. Iraqi boy with a 1:1 iPod touch switched it to Farsi and used Google Image Search to show pictures of what he wanted to the teacher
  • support projectors & AirPlay
    • don’t offer resolutions for external display — just pick one and do it well
  • there is a control to turn off Game Center at a policy level
    • so go ahead and put it in the app but make the rest of the app work without it
  • gap in the middle for 7-10 year olds
    • need more apps like toontastic — structure provided, but space for creation
    • older kids can use general content apps
    • younger kids don’t need so much freedom
    • using iThoughts HD for mindmap, then writing in Pages

example apps

Q&A

  • research?
    • study with university of western scotland
    • two lessons back to back: one with iPad, one with paper & pencil
    • same teacher, same children
    • with paper & pencil, boys and some girls had less emotional engagement
    • with iPad emotional engagement of all pupils was brought up to same level as best kids
    • being submitted to BJET, but may not be published yet
  • separate educational version of an app?
    • kids want the real thing
    • universal design is best
    • Fraser tries to buy things off the shelf rather than waiting for educational specific versions
  • damages?
    • only had one — parent ran it over with Land Cruiser!
    • kids are careful — the iPad has their name on it
  • teachers adapting to technology?
    • about half of the teachers had iPhones/iPod Touches before the programme started
    • the iPad is significantly more approachable than other computers
  • how do you find apps?
    • school subscribes to Tap! magazine…
    • more popular than the TES :-)