The Blog

Designing OmniGraphSketcher for the iPad

by Linda Sharps on February 25, 2010

I like to think that one of my more valuable contributions as an Omni employee is providing the lowest common denominator factor in usability testing. That is, when an engineer wants to really understand how a total Cro-Magnon will be using their app, they come to me.

Oh yeah, that's right. Who's got two thumbs and represents the most pathetic use case? THIS gal.

Anyway, I thought some of you might be interested in seeing how some of our iPad development work is happening for OmniGraphSketcher. Now obviously we do a lot of mockups in what is surely the world's best program for creating IA/UX designs, OmniGraffle. But when it comes to envisioning how something works on a piece of hardware no one can actually use yet, a lot of people here are going low-tech to try and figure it out.

Omni's lead developer for OmniGraphSketcher, Robin, created some iPad-sized paper templates for sketching up ideas.

iPad_paper

He didn't stop there, though. No sir, he most certainly did NOT. Here's his custom graph paper notebook, which he cut to iPad dimensions using a table saw.

iPad_sketchpad

I want to say that's sort of crazy, except our own CEO Ken Case created a terrifyingly accurate faux iPad using a 3D printer. It—well, it even has a little Omni logo on it. And a 30-pin dock connector. And . . . look, it's just very, very realistic and I'm a little worried about how much sleep everyone is getting, okay?

Here's Robin's own iPad-sized hardware prototype (!) with a variety of UI element ideas designed by our User Experience lead, William Van Hecke.

iPad_UI

That's what Robin had me look at the other day, while asking a series of questions. I'm sure he regretted it almost instantly.

Robin: “So let's say you want to turn this point from a circle into a square. What would you do?”

Me: “Buhhhhh. Dur. I touch it?”

Robin (soothingly): “Okay. You see a little blue circle around the element. Then what do you do?”

Me: “Uhhhhhrrrr. I'd . . . maybe I'd press real hard. Like this.” *smoosh*

Robin: “Um . . . well, okay. You get a dialogue that says 'copy'.”

Me: “OH GOD NO THAT'S WRONG ISN'T IT MY HEAD MY HEAD MY HEEAAAD.”

Robin (brisk clap): “Okay then! What say we try this again later.”

Lastly, here's Robin interacting with his fauxPad.

iPad_in_use

I think he's making color adjustments. On a fake, printed-out inspector that Bill made. To the document that is actually just a piece of paper. Man, software development is weird.

 

Comments

I love it.


To paraphrase Alan Kay:

People who are really serious about software mockups should make their own hardware mockups.

Keith Lang

02.25.10 8:56 AM

Bah!  In my day, we made prototypes out of mud!  And we were grateful! You kids with your paper and pens!


-jcr

John C. Randolph

02.25.10 10:21 AM

Anybody watch Goldenboy?  This reminds me of when he learns c programming language on a computer made out of paper.

Eric

02.25.10 11:06 AM

this is why i love omnigroup.

Mitch

02.25.10 11:52 AM

Eric: after reading your comment I start laughing so bad. I saw it long time, but that scene is unforgetable!!!

Petr

02.25.10 12:58 PM

Eric, say more about Goldenboy, I'm not familiar with it, but it sounds interesting.

Wade

02.25.10 1:06 PM

I can't wait to get all these omnigroup apps on my iPad… hopefully, there'll be a way to sync or transfer files between the mac and iPad versions.


I like OmniGraphSketcher, but one thing it is lacking is texture / image fills for the bar graphs.  I still can get some pretty sweet graphs made in Keynote / Numbers using these image fills.  Any chance of incorporating it? 


Big fan of most of your OG products, nonetheless.

JP

02.25.10 1:57 PM

[...] from me this time, from the excellent folks at Omnigroup. [...]

02.25.10 3:27 PM

My nine-year old son would love such work :) He has his own paper laptop and keeps “researching” the photo- and text-editing “patterns”. Talks and beeps on behalf on his notebook. Seems weird, but we're a software development family!

sashika

02.25.10 3:35 PM

[...]  [...]

Cardboard iPads aplenty « designing agile

02.25.10 4:52 PM

Just a comment really. Icons in the corners make sense with mouse controlled system because they inhabit areas which are easy to hit.


You can't go further up or right than the top right of the screen (for example) so you can just throw your mouse in that general direction and be sure to hit the button.


With a touch device, the corners are much harder to hit. There is the edge of the physical device to think about, the movement of the hand away from the workspace and the potential imbalance of holding a device with your left hand and pressing the top right hand corner.


Many of the ipad interfaces I've seen are mimicking mouse controlled interfaces which could be a missed opportunity.  Just something to bare in mind!

Alex Lee

02.25.10 6:42 PM

Love it!

Pierre

02.26.10 1:05 AM

So someone other than my Mad Engineer husband does 3D printing? Cool!

LizPf

02.26.10 4:45 AM

[...] The Omni Mouth » Designing OmniGraphSketcher for the iPadIt'll be hard but if they can get the interaction right, Graffle on the iPad could be totally rad. [...]

EverydayUX morsels (February 27th – March 1s

02.28.10 4:01 PM

Love this post- great example of real life prototyping.


My friend an co-author Bill Scott pulled together and cataloged whole set of iPad “interesting moments”:

http://looksgoodworkswell.blogspot.com/2010/02/ipad-interesting-moments.html


Lots of excellent examples of interaction design for the iPad.


Good luck with the designs!

Theresa Neil

03.01.10 2:58 AM

[...] The Omni Mouth » Designing OmniGraphSketcher for the iPadIt'll be hard but if they can get the interaction right, Graffle on the iPad could be totally rad. [...]

EverydayUX morsels (March 1st – March 1st)

03.01.10 9:01 AM

It’s always great to gain insights into how successful software houses work. Great stuff.

However this approach to early design development is not unusual. The term for this is “paper prototyping” and it’s well established.

Andrew Scott

03.06.10 4:55 AM

the Ipad is the new gold rush

Ramon Van Meer

03.07.10 5:00 PM

> People who are really serious about software mockups
> should make their own hardware mockups.

Hilarious.

To paraphrase Alan Kay again:

With the paper tablet, OmniGroup will ruler the world.

> paper prototyping

I really like that they went the extra mile with the 3D printed body of the iPad, because it’s essentially part of the interface. How you hold the iPad is going to affect how the buttons should be arranged on screen and how the interface should function. And it really focuses the imagination. You’re not looking at a pad of paper anymore. You’re definitely working with a fungible iPad.

Hamranhansenhansen

03.19.10 9:22 PM

>Me: “Buhhhhh. Dur. I touch it?”
>Robin (soothingly): “Okay. You see a little blue circle around the element. Then what do you do?”
>Me: “Uhhhhhrrrr. I’d . . . maybe I’d press real hard. Like this.” *smoosh*
>Robin: “Um . . . well, okay. You get a dialogue that says ‘copy’.”

I love how this bit reads like a RPG session. The next bit could have been “I cast magic missile against the blue circle!”

alan

03.20.10 3:36 PM

Usually I only buy software that I need.  But I am going to have to start buying things from Omni just because you deserve it.

(That last comment ... magic missile ... omg the internet is funny this morning!)

Paul Ingraham

03.21.10 9:51 AM
Commenting is not available in this channel entry.