Tuesday, 8 April 2008

MomoLondon: Mobile User Experience

Last night’s Mobile Monday London was themed on the Mobile User Experience.

Taptu — Steve Ives (CEO & Founder)

  • Live since last October — preparation since April
  • Aim to get mobile search used several times a day rather than
  • Company expertise: mobile user experience (ex-Trigenix) + search algorithms (with experience from Cambridge Computer Lab)

UI design process

12 months, 14 user studies (2 day sessions with 10 users spending an hour each)

  1. concepts
  2. paper prototypes
  3. device prototypes (static pages)
    • used for user studies
  4. two other steps… (can anyone fill them in here)

Main tenets:

  • don’t assume
  • listen to users
  • iterate often

Personas

Built up a fair amount of detail about 4 personas.

  • 20, iPod generation
  • 32, careerist power user
  • 23, unwired social (not a lot of access to the internet during the day or evening)
    • mobile internet is primary access to internet
    • particularly large in Asia
  • 27, digerati — bloggers, influencers
    • 10% size of others but very influential

Prototypes

Paper prototypes done by photocopying framework with title, options and back then annotated.

Device prototypes — high fidelity, device-specific, pixel perfect (no software engineering required)

Design

Three core families, each with different user experience design

  1. low: 176x220
  2. mid: QVGA
  3. high: iPhone

Graphic design comes from within company — authentic and fast turnaround

UE Testing

They set up a portable user-experience lab, since testing users in London (and they’re based in Cambridge). This consisted of a laptop, a portable mixing desk, two video cameras and a microphone. They could take this to any meeting room and hold user testing.

Two cameras: one aimed at user’s face, other mounted on handset; both mixed & recorded together with a separate microphone. Results in movie showing user reaction in a picture in picture format.

Totally regular event to run a user study — expensive and time-consuming, but have committed to do this.

Human Factors International — Scott Weiss

He wrote a book: “Handheld Useability” in 2002

Moving to “persuasive design”: are your users going to come back?

A good way to determine persuasive design is eye tracking, but this doesn’t work on mobile as the eye trackers require a stationary device.

“The minimum number of design & feedback cycles is 3”

If user testing a phone, don’t sit right next to them and breathe down their neck. Instead, sit opposite them and make them show you the phone if they need to.

Moving from design-time to runtime: Future Platforms — Bryan Rieger

Bryan was addressing the disconnect between designers and developers during and towards the end of the design process. The designers come up with something that looks wonderful and flows beautifully, but if the developers just take the assets directly from these mockups, then the application would run like a dog on mobile. The assets would be too large to load quickly and the device would run out of memory.

  • Think about assets, custom fonts, icons for different states.
  • Specify paddings, margins and use native drawing capabilities.
  • Use composite images — combine resources in device rather than beforehand.
    • e.g. transparency overlay, shading for selection, etc

For example, FP reduced the resources in the Locomatrix app from 12K to 2.87K — massively improved performance and could now work on a lower-memory device such as a Motorola PEBL.

Control Java design based on constants provided in a resource file.

The designers and the developers must work together.

Some of this can be used in mobile web as well, especially if the device has CSS2 & CSS3 capabilities.

Panel session notes

“Institutionalizing useability” — book on Amazon for getting user testing introduced into a company

WebX — sharing presentations for remote teams

Design for the mass market if you want to be successful — this means that the interface will need to work on constrained devices (e.g. pepperoniti — most widely used mobile social networking tool, has very primitive UI)

How do you design for location-based interactions? Or RFID or other? FuturePlatforms are trying but are struggling — the tools don’t help, so they’re using sketches and notes on the walls.

In Apple, the chief designer reports to the CEO — that doesn’t happen very often in other companies.

What’s your good (and bad) UI experiences?

  • Marek: N95 Google Reader
    • simple, one graphic, making best use of browser, loads very quickly
  • Scott Weiss: bad user experience — RAZR, almost destroyed a company
    • four soft keys
    • took off menu soft key too late
    • industrial design was spectacular, but user experience was terrible
  • Taptu:
    • BMW idrive — terrible
    • Phillippe Starck video on TED: simplifying product design
  • Bryan Rieger: love the iPhone
    • some of the worst user experiences coming out of Korea to try and copy it (LG & Samsung)
    • touch screen, but some of the screen isn’t touch sensitive and the buttons change under your fingers

Sunday, 6 April 2008

Time Machine Update Fixes Sparse Bundle Handling

So in my previous posts I documented how I’ve got Time Machine working nicely on my QNAP TS-109 NAS box, with several Macs all backing up to it wirelessly. My last niggle was that Time Machine didn’t handle the case when it ran out of space on the backup — it’s supposed to thin out hourly backups older than a day, daily backups older than a week and weekly backups as needed. The problem was that when it deleted old backups from the sparse bundle on my NAS box, the sparse bundle didn’t update the amount of free space. Consequently Time Machine went on deleting old backups to make room until there were none left. Not a good solution…

However, Apple recently released Time Machine and AirPort Updates v1.0 which I gingerly tested out in case they’d decided to specifically turn off SMB backup support. To my surprise, the sparse bundle space problem has been fixed!

Here’s the log from my console showing how the disk space increases each time a backup is removed — you can see that Time Machine now ejects the sparse bundle after each deletion, reclaims the space properly and then tries again. In case you’re wondering why it’s saying it needs to backup 53GB (and what those “Event store UUIDs don’t match for volume” and “Node requires deep traversal” messages are), don’t worry — I just replaced my internal hard disk with a bigger one so Time Machine has to back up everything starting from scratch. This is a bit annoying as I’ve cloned the data to the new hard disk, but I suspect that any backup software would have a similar problem.

06/04/2008 15:28:19 /System/Library/CoreServices/backupd[4015] Starting standard backup 
06/04/2008 15:28:20 /System/Library/CoreServices/backupd[4015] Mounting disk image /Volumes/Backup/Adam's MacBook_0017f2f0fd0f.sparsebundle 
06/04/2008 15:28:24 /System/Library/CoreServices/backupd[4015] Disk image mounted at: /Volumes/Backup of Adam's MacBook 
06/04/2008 15:28:24 /System/Library/CoreServices/backupd[4015] Backing up to: /Volumes/Backup of Adam's MacBook/Backups.backupdb 
06/04/2008 15:28:32 /System/Library/CoreServices/backupd[4015] Event store UUIDs don't match for volume: MacBook HD 
06/04/2008 15:28:32 /System/Library/CoreServices/backupd[4015] Node requires deep traversal:/ reason:kFSEDBEventFlagMustScanSubDirs| 
06/04/2008 15:39:44 /System/Library/CoreServices/backupd[4015] Starting pre-backup thinning: 53.57 GB requested (including padding), 9.90 GB available 
06/04/2008 15:39:44 /System/Library/CoreServices/backupd[4015] No expired backups exist - deleting oldest backups to make room 
06/04/2008 15:40:22 /System/Library/CoreServices/backupd[4015] Deleted backup /Volumes/Backup of Adam's MacBook/Backups.backupdb/Adam's MacBook/2007-12-20-172543: 9.90 GB now available 
06/04/2008 15:55:15 /System/Library/CoreServices/backupd[4015] Deleted backup /Volumes/Backup of Adam's MacBook/Backups.backupdb/Adam's MacBook/2007-12-31-005523: 9.90 GB now available 
06/04/2008 15:55:15 /System/Library/CoreServices/backupd[4015] Deleted 2 backups: oldest backup is now 8 Jan 2008 
06/04/2008 15:55:15 /System/Library/CoreServices/backupd[4015] Stopping backup. 
06/04/2008 15:55:22 /System/Library/CoreServices/backupd[4015] Backup canceled. 
06/04/2008 15:55:33 /System/Library/CoreServices/backupd[4015] Ejected Time Machine disk image. 
06/04/2008 15:55:33 /System/Library/CoreServices/backupd[4015] Compacting backup disk image to recover free space 
06/04/2008 16:17:46 /System/Library/CoreServices/backupd[4015] Completed backup disk image compaction 
06/04/2008 16:17:46 /System/Library/CoreServices/backupd[4015] Starting standard backup 
06/04/2008 16:17:47 /System/Library/CoreServices/backupd[4015] Mounting disk image /Volumes/Backup/Adam's MacBook_0017f2f0fd0f.sparsebundle 
06/04/2008 16:17:52 /System/Library/CoreServices/backupd[4015] Disk image mounted at: /Volumes/Backup of Adam's MacBook 
06/04/2008 16:17:52 /System/Library/CoreServices/backupd[4015] Backing up to: /Volumes/Backup of Adam's MacBook/Backups.backupdb 
06/04/2008 16:17:59 /System/Library/CoreServices/backupd[4015] Event store UUIDs don't match for volume: MacBook HD 
06/04/2008 16:18:00 /System/Library/CoreServices/backupd[4015] Node requires deep traversal:/ reason:kFSEDBEventFlagMustScanSubDirs| 
06/04/2008 16:29:18 /System/Library/CoreServices/backupd[4015] Starting pre-backup thinning: 53.57 GB requested (including padding), 12.75 GB available

Saturday, 5 April 2008

OverTheAir: Hacking Competition & Presentations

Lots of people stayed up overnight to hack mobile applications and there were some very cool results.

I tried out building a mobile widget using the Nokia Web Runtime. This is an application environment on recent Nokia Series 60 devices that uses the WebKit browser with various extensions. You write widgets for it using JavaScript, XHTML and CSS (just like any other widget, but, as always, slightly different to the other formats). In fact, I started off building the widget using Apple’s DashCode — a web application builder for the iPhone. This comes with an interface builder that allows you to drag and drop controls onto the screen and wire them together.

Getting the control logic to work took a bit of getting used to — as with all interface frameworks, there’s a learning curve where you build up understanding of how the pieces are supposed to fit together. In the DashCode case, this isn’t helped by the lack of any documentation for the interface controls. However, the development environment more than made up for this — there’s a very capable Javascript debugger, complete with an interactive console, and it’s very easy to start and stop your widget in the iPhone emulator.

I used prototype to power up the Javascript side — making the Ajax calls to our server much easier and enabling some mucking around with the results to provide some pretty formatting.

Once I’d got the basic application working in DashCode, I took it across to the Nokia Web Runtime environment. This provided some extra features such as storing preferences between invocations so that the widget could start up straight into showing you the departures that you’d chosen previously.

I found the Web Runtime very effective, and it fills a very useful niche for simple, web-connected apps on recent S60 phones. Development time is fast and you have access to a reasonable amount of the phone features, though nothing quite as useful as location or the address book (as yet).

My hack won special mention in the “Most practical / ready for market” category — runner-up to the SNOB address book picture enricher. I’ve included a movie of the widget in action (within an iPhone environment) below.

<a href="http://cohen-rose.org/gallery2/d/7132-3/Kizoom_Team_at_OverTheAir.mp4?g2_GALLERYSID=69af5451e496bcfa9a187362a1849331">Download movie</a>

Some other hacks were:

  • PimPam — social BBC programmes
  • 21st Century Fridge Door — text & MMS to a shared web space
  • Location-based games w/J2ME — e.g. capture the flag
  • Social Tracker — basically just captures where you are to a database…
    • seems to use Google Maps in a browser to capture the current location
  • Flat Music Player UX design — zoomed out user experience — see the album art very small and in specific places on the screen
    • uses sense of physical location rather than words
  • Twitter client for Windows Mobile today screen
  • Browser Sync while ActiveSync’d — nice!
  • YourLocal - displays the local transport stops around Imperial College
  • FuturePlatforms — Octobastard robot — you have to see it to believe it :-)
  • SNOB: Social Network Open Butler — add pictures to your address book from social network avatars (web service outputs XML independent from social network)
  • Autowigificationizor (Owen Griffin) — click a firefox button and get a web runtime widget generated for you based on the RSS feeds for that web page
  • MixItUp — cocktails in Flash
  • Bluetooth + FOAF — unique ID from hash of bluetooth ID & device bluetooth name; can revoke it by changing your device bluetooth name; get a list of all the people you came into contact with at a conference
  • Update FireEagle location from command line, then display it on blog
  • LastMinute Labs — PhonePhight with motion detection & bluetooth — very cool!
  • Torchwood Sweded — again, I think you just had to be there…