prototyping with iOS Storyboarding in Xcode
I was happy to read How To Prototype In Xcode Using Storyboard. It is good to see a resource on using Xcode Storyboarding from a designer’s perspective as I think it has huge potential if you are doing a lot of prototyping for iOS devices. I made a prototype of a Guardian Film app last year using Xcode. It took a couple of days but that included learning my way around Xcode and when it was done we could load it onto an iPhone for user testing because it was an iphone app (if not exactly something you would launch).
We didn’t go on to develop the test into a full product but it would have been interesting to see whether it was worth the developers building on the Storyboard app or if they’d have needed/wanted to start again from scratch.
I had a load of notes that I was intending to turn into more detailed instructions but as I haven’t gone back to Storyboard since this is all I have…
Note: compatible with iOS 5+ only.
Storyboard is effectively a flowmap, but one that actually generates an app. You can add dummy/fake content or if you can handle a bit of code (or know someone who does) you can pull in the real content.
Workspace components
The canvas
This shows the flowmap or storyboard in the central pane of the workspace (also called standard editor?). You select mainstoryboard from the project navigator to open the storyboard editor if it isn’t showing (I have managed to get stuck with another editor open and be unable to switch back to the standard/storyboard editor).
There’s an arrow in a circle that collapses part of (the standard) editor that shows the app as a (file hierarchy?) rather than a flowmap. If you can’t access an element on the canvas (say it is ‘below the fold’) then you can edit it via the ‘hierarchy pane’. You may also need to rearrange elements in the ‘hierarchy pane’ if you need an element visible in the canvas so you can create a segue.
Navigators (on the left)
- project navigator (cmd +1) shows the file structure of your workspace
- symbol navigator (cmd + 2)
- search navigator (cmd + 3)
- issue navigator (cmd + 4 )
- debug navigator (cmd + 5)
- breakpoint navigator (cmd + 6)
- log navigator (cmd + 7)
You can change navigator display using the icons at the top of the navigator, or the edit menu or the keyboard shortcuts shown above (cmd + 0 to remove all navigators).
Libraries(bottom right)
- file template library
- code snippet library
- object library - drag the controls from here onto the canvas
- media library
Inspectors (right, above the object library)
View these for an object by selecting the relevant object on the canvas.
- file
- quick help
- identity - use to change class of object
- attributes – lots of controls of the content/layout etc of each object
- size – mainly controls the relative positioning of the object
- connections
Components of a storyboard
Scene
A scene is a screenful of content or view. (Synonymous with view controller?)
cmd+ click to move as a group
Segue
A segue is a transition between view controllers.
Segue types:
- push: “pushes the destination view controller onto a navigation controller’s stack”
- modal “ presents the destination view controller”
- custom “design your own transition”
You ctrl+drag to create a segue (/relationship?) between scenes. You’ll be asked to pick transition type but you can change this later in the attribute inspector if you select the segue.
There’s also ‘relationships’ between container and child containers but are these segues or something different? I don’t entirely understand segues versus relationship.
- modal segue completely obscures screen below, slides up temporarily
- nav controller pushes one view on top of the other = segue
- can’t use segue for cancel/done buttons (need delegate?) “no such thing as a reverse segue”
- automatically get back navigation when using some controllers but not others. Use push segues between parent and child in a hierarchy to maintain the navigation and tool bar
Note: You can only edit the elements of a scene when viewing in 100%, although you can create segues between scenes at any zoom.
Controllers
- container view controllers display content owned by other view controllers. Each type of container defines its own interface to manage its children
- content view controllers present content on the screen using a view or a group of views
- shows data
- collects data
- performs a task
- navigate between a set of available commands
Types of controllers:
- view controller: the fundamental view-management model.
- split view controller
- reference library controller
- table view controller
- navigation controller (subclasses available from the Identity inspector). Manages the navigation bar and the button to navigate back
- Image picker controller
- Video editor controller
- tab bar controller
- page view controller
To get a split view or ref library controller, add a view controller then go to the Identity inspector and change the class. Same process applies for turning a nav controller into an image picker or video editor.
The initial view controller is a setting that determines which scene is the start scene when you launch the app. Select a controller, view attributes and tick “is initial view controller”. I think this automatically un-ticks this for whichever controller was previously the intial view controller.
Objects
Note: check the properties of a generic object if you can’t see the specific one you want. You can often change the sub-type.
Types of objects available:
- label
- round rect button – can be turned into a variety of buttons
- segmented control
- text field (creates a text field that the end-user can edit – use label for uneditable content?)
- slider
- switch
- activity indicator view
- progress view
- page control
- stepper
- table view
- table view cell – has a number of variations you can choose in attributes
- image view
- text view
- web view
- map view
- scroll view
- date picker
- picker view
- Ad BannerView
- View
- Navigation bar – has attributes that control colour and style
- Navigation item – can be turned into a variety of buttons
- Search Bar
- Search bar and search display controller
- toolbar
- bar button item – can be turned into a variety of items
- fixed space bar button item
- flexible space bar button item
- tab bar
- tab bar item – can be turned into a variety of items
That’s as far as my notes go. If I do another project with Storyboard then I’ll add to this.
navigating the world of tennis broadcasting rights
The world of tennis broadcasting is a complicated one and one that has led me to some odd device behaviour.
In the UK Wimbledon is free to air on BBC, as is Queens and the ATP (mens) tour final. French Open is now on ITV (presumably as part of a bid for Wimbledon). With the Australian Open the BBC tends to broadcast a men’s semi and the two finals live. Eurosport showed matches but no Andy Murray ones.
The last US Open was only on paid for TV (primarily Sky with some early matches and/or delayed coverage on Eurosport). Sky also shows some ATP tournaments but not the WTA (womens) ones even when they are joint events. Eurosport used to show lots of WTA tournaments but seems to have reduced that.
Many of the tournament websites stream free to air in their own territories but very few tournaments are in the UK.
Which leaves TennisTV who show most ATP and WTA tournaments but not the big grand slams. Quite a few tournaments aren’t available if you are in their home territory (so this time being in the UK works in my favour).
So the solution seems to be TennisTV for the tour. BBC for Wimbledon, Queens and the ATP final. ITV for the French Open. And a combination of Sky, BBC and/or Eurosport for US and Australian Opens.
So far, so complicated.
Now add in pricing. I don’t have (or want) satellite or cable TV so I’m looking at online or app subscriptions. (I’m using all the apps on my iPad 2. I’ve considered the Android alternatives but the equivalent apps are either not available for the Nexus 7 or the reviews are so terrible about performance and customer support I wouldn’t risk paying for the apps)
Eurosport player
Subscribe online to Eurosport Player and the prices are £4.99/month or £2.99/month for a minimum of 12 months. You can subscribe via the iPad app £2.99 for a month, no minimum.
SkyGo
I only want Sky’s tennis coverage for a single fortnight a year. This is possible with SkyGo in spite of their best efforts to conceal the option (well, it’s possible to subscribe for a single month anyway).
On the SkyGo page the information about how to get Sky Go without Sky TV in your home is a long way down the page after many suggestions that you need to be a subscriber. And it’s a closed section that you need to expand to read it. Then you can get a monthly SkyGo pass for £35/month that includes Sky sports channels. You can’t subscribe via the app itself. It would be £42.50/month to subscribe to the equivalent TV service and that would be for a minimum of 12 months.
Still £35 it is a lot more than I’m paying for other tournaments so come US Open time I’ll be checking what Eurosport and the BBC are providing very carefully (and how much time I’d actually have for watching) before actually paying for this.
Tennis TV
Tennis TV online is £14.99 a month or £84.95 a year but if you subscribe via the iPad app it is £6.99 for a month, 17.49 for 3 months or £57.99 for 12 months. And you can easily switch off auto-renewal.
Apple’s constraints around subscription prices and renewals work in my favour with both Eurosport and Tennis TV and encourage some odd screen behaviour. I don’t want to subscribe all year round to these channels, just when they are showing tournaments I’m interested in watching (and have the time to waste) so being able to cancel at will is perfect. And the app prices are a better reflection of what the content is worth to me. But buying an app-only sub means watching on my iPad even when sat at the computer and technically being able to watch on desktop. And at times that has resulted in a slightly warped second screening behaviour:
my dumb phone
A set of phone accidents and fails has resulted in a series of rapid steps backwards down the hierarchy of phones, from lovely Nexus 4 (cracked screen courtesy of vengeful cat) to crappy Samsung Galaxy Mini (it forgot how to actually make phone calls after less than a year) right back to my trusty Nokia (recently fully submerged in water but still working fine).
It’s not really that long since I was last using it. I stuck with it throughout most of my time at the Guardian. Now to be fair I also had and used one or more of those internet thingamys throughout but the Nokia remained my *phone* for quite some time. At one point I had an iPad, HTC Desire, Samsung Galaxy Mini (both Android) and HTC Mazaa (WP7). I think I only had them all on me at the same time once.
So why stick with the old thing when I had access to the new kit? Well the lovely shiny things fail to meet two key needs of this user.
- Battery life. My dumb Nokia lasts a week on one charge. My phone is part of Iain’s lone worker system so the battery being dead because I’ve been using apps all day is not acceptable when chainsaws are in use.
- Undesirability on the streets of N17. No-one with any self respect or commercial sense would steal this phone. I’ve got very little qualms about walking out of Turnpike Lane or Seven Sisters using it.
- It doesn’t stick to your ear when being used as a phone.
So whilst I’m missing the Nexus 4, I am also rediscovering the joy of a phone that just focuses on being a phone.
inheritance
None of my grandparents are still alive. Helen died when my mum was little, Walter when I was just out of university and May & Tom shortly after I got married. I have some things that might traditionally be considered my inheritance from them, although some of the things might seem a little odd.
From Walter I have cigar boxes, tins, wooden boxes, a stack of leather skins and offcuts, old curtains, and photos. From May & Tom I have a meat slicer, pie tins, knifes, a Mrs Beeton, a stone rabbit, a red honeysuckle plant, jewellery, and photos.
Walter was stubborn and eccentric. A big food lover. So much of a storyteller that we don’t know how much of the family history is true. He was a cobbler, creative, a good craftsman but not such a good businessman.
Helen I never knew. She was a matron. Mum’s memories make her sound gentle and caring. She was able to live with Walter so must have had super-human tolerance and patience. And thrift.
May was an organiser. She had a document tabulating all the holidays they had even taken, with destinations, dates and travelling companions. Food cupboards had lists of their contents pinned to the back of the doors. Food prices at different stores were noted in a book kept by her armchair. Household accounts were monitored with double entry book-keeping. She’d been a civil servant before getting married. They let her stay on so long as she kept using her maiden name but her working life came to end once my dad was born. A whole lot of pent-up organisational ability got directed towards running the home like a miniature government department. I recognised a lot in Hallie’s My Grandmother the IA presentation.
Tom was very different to May. He needed a few cigarettes a day, friendly chats and no office politics at work. That was about it for his demands from life.
So other things I may have inherited are pleasure in a simple life, in organising things and in crafting things. And probably a bit more from Walter than I prefer to notice.
on owning a puppy and an iPad
Last April I wrote about how I’d rather have a puppy than my iPad. Now I have both!
This is Finchley (on the left):
So those benefits of a puppy reviewed:
- I do get more exercise. The accuracy of my ball throwing is also improving.
- I do need less heating, but only in the morning. Finchley is not willing to be a lapdog after noon.
- On the vacuuming topic, I’m an idiot. Whilst it is true than Finchley hoovers food from the floor she often does so whilst depositing a baffling amount of dog hair and sawdust. Luckily she is pretty much Roomba compatible.
- Upfront costs were cheaper than iPad but not as cheap as a rescue dog (she’s an intentional cross-breed rather than any old mutt).
- The ongoing costs have indeed been substantial including vet bills for having excessively long ear hairs, medication to counter the horrific consequences of the puppy being an ‘indiscriminate eater’ and the cost of providing decent food (this is a much more compelling imperative for a pet whose poo has to be picked up in little plastic bags).
- I did not die from the excitement but I do bounce with happiness more than I did 6 months ago.
short thumbs and phone navigation
In an early version of the BBC’s iPhone 5 launch story the main image was captioned ”Apple said the larger screen could still be easily operated with one hand”.
I read that and thought, still?
Last year I spent some time using the Guardian’s iPhone app and wondered why I found it so awkward to navigate when the Android app I was used to is basically the same thing just with some Android tweaks. The awkwardness came from needing to press the back button in the top left. I couldn’t reach it with my thumb.

I couldn’t reach the top left on the HTC Desire I was using either but it didn’t matter because you navigate back using the hardware back button at the bottom of the phone. Ben Lang on Carrypad points out that the (old) iPhone dimensions are generally better for one-handed use as the squarer proportions give the thumb more range, but it’s specifically the iOS design pattern of back top left that thwarts me. Other stuff appears in the top left on Android apps but not things i need for every other interaction.
Ben makes a similar complaint about the Android interface but I don’t find the notifications to be core interactions and centre-top isn’t as hard to reach left-top.
“Both the buttons… and the status bar, are always persistent, no matter where you are in the OS. You have to constantly use the Android buttons to navigate through apps and the home screen, and you have to pull the status bar down with your thumb to access any notification that comes through to the device. The core functionality of the device involves reaching your thumb from even further below the bottom of the screen to hit the buttons, then all the way to the very top of the screen to pull the notifications menu down.”
I guess on the larger screen sizes that Ben is concerned about even centre-top becomes a difficult reach. But top-left is a problem for me even on the 3:2 ratio iPhones.
Now I know I’m generally a smaller scale human being but I didn’t think my hands were exceptionally dinky. Hand anthropometry data confirmed my thumb is on the small size but not freakishly so.
Apart from Ben’s article I only came across one other piece on how (small) hand size might affect touch screen design. There seems to be more out there about larger fingers and the challenges they have with typing and target areas.
Interface Design for Single-Handed Use of Small Devices by Amy Karlson doesn’t go into huge depth about button positioning and thumb reach but she does mention:
“Additionally, thumb movement along the (top left – bottom right) diagonal direction was slower than for the other directions, suggesting a biomechanical constraint for that type of movement.”
So it appears that if my thumb and I want to use my phone single handed then I’ll have to stay away from iPhones. Given the trend with Android and Windows seems to be bigger and more rectangular, I may be increasingly out of luck there too. Can we have a small phone backlash please? And no important stuff top-left ok?
US Open tennis app
The US Open iPad app is one of the better attempts at a tennis app. That may sound like faint praise but it isn’t a sport that regularly covers itself with app glory.
The start screen just shows you the most regularly useful content, rather than trying to present even handed journeys to everywhere. You can see what’s happening at a glance and swipe across to see a number of key courts. They’re also making heavy use of multiple Twitter feeds, broken down by court which makes each stream a bit easier to handle.
The app doesn’t have the serving information from the website. Including that would help give more of a sense of what’s actually happening for those using the app as replacement coverage. Also noticeably missing (esp for the US Open) is any notification when there is a rain delay. I’ve repeatedly thought the app had stalled when actually play has been suspended. Not sure why ‘In Progress’ didn’t just get swapped for ‘Suspended’. Maybe it did on the wireframes.
I was also impressed with the display of the draw, especially after the failures of the Wimbledon digital experience on that score. Wimbledon managed to fit the same depth of the draw on their (scary) website as they had in their phone app. They achieved this by putting the content in frames and going a bit overkill on navigation. Quite a (un)impressive feat.
The same thing happens with US Open website and mobile app (also from IBM), although the website is not quite as bad as no frame is used and you can scroll to use more of the screen real estate.
But the iPad app is dramatically different and is able to show an entire quarter of the draw for five rounds (and the ad gets more prominence here too). If you tap on the match it brings up the score, something that the interface doesn’t really convey.
The only problem I had with this was that they’ve deviated from the conventional left to right for the full draw and instead arrange each quarter into a quarter of the screen. You can see this if you zoom out but I was initially confused when I scrolled to the bottom of the page looking for the second half of the draw. Scrolling from left to right when you are in the middle of this page is a bit of a wobbly experience.
Oddly the Slam Tracker data that IBM make such a big deal about is really buried. The only way to get to it is to go into the Live score pages and tap on the match. Again the interface doesn’t suggest the match is tappable. And it doesn’t work from the homescreen. I only discovered it because I read elsewhere that the app included Slam Tracker and went hunting for it.
It’ll be interesting to see what IBM do with this for the Australian Open in January. Although I probably won’t make much use of it, with most matches happening while I’m asleep or pre morning coffee consumption.
my second Guardian job
After working in the Guardian library I started my MSc at City. To pay the bills I worked on the Guardian website at night. The website wasn’t run out of the main Farringdon road office but from an attic in Ray Street, accessed via what seemed like a goods elevator.
I written about the pleasures of night shifts before, and my abiding memory of this time is the beautiful, out of this world taxi rides home along embankment through an empty city.
The Guardian was also responsible for my only (brief) spell of vegetarianism. One shift I was charged with sifting through images of burning cows to add to the Foot and Mouth special report. Following that with a walk home past fast food shops and their waft of burgers was a bit too much.
I cracked a few months later, roasted a chicken and ate pretty much the whole thing.
Both the best and worst night shift ever was the night of the US election. Instead of the night shift being the usual mundane whirr of hacking the daily paper into a website, it was how I felt a newsroom should be. Realising around 3am that George Bush was the next US president was not so uplifting.
At the same time, my friend Sally was working on one of the Guardian’s digital experiments, the weblog.
That coincidence meant that in autumn 2000 I covered for her whilst she was on holiday and allows me to annoy Martin with having blogged before him.
It was also the first time I was required to look at porn for work, as my stint coincided with Richard Desmond buying Express newspapers and the weblog editor wanted us to link to one of his *other companies* but one that wouldn’t cause too much upset.
So stint two was memorable for Richard Desmond, burning cattle and George Bush. And for the realisation that these websites need a lot of organising.
my first Guardian job
So I’ve left the Guardian again. Maybe it’s a sign of age but I’ve been thinking more about my previous jobs at the Guardian than the last 2 years.
I began my first stint at the Guardian in the last century (just). The role was a library trainee. During the interview it was casually mentioned that the rota for Millennium new year had already been completed and the successful candidate would have the pleasure of working new years day. So my century began in the Guardian office, with a hangover and a sense of being hard done by.
The interview day had kicked off with a general knowledge quiz in which I was fine with the names of shadow cabinet members but only knew half of “who are Barak and Mubarak?”. Later we had a group interview. It was not as terrifying as I’d assumed, for the depressing reason that seeing other people give terrible answers reassures you that at least you didn’t say that. The individual interview was memorable too, not least for the question “how do you cope with boring work”.
I got the job and moved to London to live with my grandparents which added a surreal air to it (my grandad would warm my gloves in the morning before I went to work).
In the mornings we filed newspaper cuttings. In the afternoon we checked the automatic feed for the digital archive, shifting bylines out of standfirsts and reintroducing ampersands where they’d been garbled.
Sometimes a journalist would come by. Only Gary Younge left a good impression.
There was the odd side project, sifting through microfiche for original serialisations of Dickens novel or contemporary World War Two reports. Absorbing, hypnotic stuff.
We answered enquiries from the readers, tracking down articles from just the flimsiest of recollections. Going further than we were supposed to made the work into something more akin to a game. I still remember the lovely surprised thank-you letter from a reader when we sent him a copy of an old Telegraph article that he’d remembered as being in the Guardian.
By the time I left, I’d learned the surnames of all the Spice Girls, developed a fleeting interest in football, and had an invaluable body of knowledge about personal finance. Most things are interesting once you read about them everyday.
I’d also made contact with the fledgling Guardian Unlimited team, which turned out to be more useful than the Spice Girls and the football but arguably less useful than the finance.
I never worked in a library again but I still feel on some deep infrastructure level that I am a librarian.
new wimbledon website and scary strawberries
Wimbledon have a new website for this year’s tournament and one of the most striking things about it is the use of background photography.
On the homepage the background dominates with only a fraction of the real estate taken up by content or navigation. Compared to traditional lets-stuff-everything-on-there homepages this works quite well…depending on the choice of image.
There’s quite a few images being used in rotation but thus far the overhead shots of grass and the shots dominated by blue skies seem to work.
But there’s a few in the mix that I find distracting and not particularly pleasant as backgrounds. I’m not convinced by the ball boys and girls:
The scoreboard is far far too busy:
And the strawberries (of which there are at least two variations) just freak me out:
But I’ll forgive them if they change the blue-sky shots to soggy one when it actually does rain. No Cliff Richard please.




















