Designing for the iPad is hard, let's go shopping
Like many developers I know, I believe in the iPad. I believe that's
going to be a great platform for some kinds of uses. Not everyday coding
in XCode or Coda, not editing text with Latex, TextMate or another
powerful text editor. No, a more casual kind of use. So I have a project
I want to do on the iPad which I think could be both fun and successful.
I' ll let you know later what this project is about. What I' m about to
talk about today is the critical part of the project: design. You know
what they say. In most environments, you want to spend 10% of your
project time on design the User Interface (UI) or the User eXperience
(UX). Like an afterthought. On the Cocoa Touch platforms, you have to
spend over 60% of your time on that part of the whole project. That's
what I do: before getting really involved in the project, I checked that
I could work with a graphic designer to exchange thoughts, detail
behaviors, ideas, etc. I'm still the project manager and creator. She
gets to play the hard part of being candid about the project. I made
sure she knew well the products on the Cocoa Touch platforms that have
reached the level of UI and nice design that I hope to find in my
products. I made a list of apps to buy and use, another list of apps to
look at. I made sure she got to read the Human Interface Guidelines, and
saw the great videos by Apple. But know comes the hard part: putting the
ideas into perspective and moving on from a "application statement" to
real screens. And this I am the only one who can do it. Over the months,
I have become quite confident over my ability to do it on the iPhone. My
products have not yet reached the level of candy I would hope, but their
structure is now well balanced, clean, lean, and I 'get' the device. I
have started with all the stencils you could find, and still use some.
But for the most part I have a moleskine notebook (before) or a Field
Notes notebook. And a pencil: a 0.9mm
mitsubishi uni. Allows me to write down the different screens of an app
quickly wherever I am, even on a sunday night at 2:00 am. I know the
iPhone UI at my disposal, and the screen is the right size for a
notebook. I also use the Sketch book
I bought on Amazon several months ago, when I need to explain the UI to
someone else. I have plenty of room around the UI to describe the UX.
Then I make photos and send them over. But the iPad is HUGE… At first, I
used the stencil made by Andy
Warwick which he showed as a mockup during
the most excellent NSConference UK 2010. I made myself the same mockup
to try to get a feel of the beast.
\
_Matt Gemmell holding Andy's mockup_ Because it is big, and small at
the same time. And the Simulator doesn't reflect exactly the size of the
stuff. Like for the iPhone and the simulator: the density of the screen
is not the same on a Mac and an iPad, so the beast appears bigger on a
Mac screen. Like Andy, I taped my cardboards to have a nice back. But I
was quite unhappy with it because the damn thing wouldn't work. Nothing
on the screen ever. And it didn't help me design anything. I discovered
several notepads or stencils for the iPad. I have ordered the stencil
from Design Commission, and the
notepod. But deliveries from Australia to
France are a bit slow. So this saturday I took the opportunity of some
errands to get into a graphic shop, and bought myself a cutting mat, a
cardboard, a pvc sheet and some transparent drawing paper (papier
calque). I used the pvc sheet for my mockup and now I have a 'glass
screen'. I can put things under that glass screen (it 's more
comfortable and less dangerous than the one nikf
did too). And I cut my
cardboard sheet to make myself two small iPads. The screen itself seems
to be 20cmx15cm, if you wanna know. the other specs are on Apple's
website. On these cardboard, recto-verso, I made the lines of the status
bar, made some lines too for popovers, split views etc. I used
screenshots I made from the Simulator to reproduce as well as I could
the size, position etc. I can now use my drawing paper like a (last
century's) cartoon drawer would do: I add levels of UI to my basic view,
and put everything in the iPad mockup to 'feel' how it is. Having all
these tools and these limits to the UI I want and I know I can make
helped me get over the white sheet problem, and I started really
designing something real which I can 'test'. Total cost must've been
over 40 euros, but I have many stencils now ;-) I even did some more for
my iPhone stuff. Here are some pictures:
I am not totally bad at using my hands, but I am no wizard too, so if I
did you can probably do it too.