When Gruber first linked the TripLog/1040 UI by Stevens Creek, I wasn’t kind either. Bright colors, controls seemingly placed at random. It was the opposite of what designers strive for in our circles. A mess. Soon the Flickr page was a schoolyard of insults. And then something interesting happened. TripLog’s designer Steve Patt posted a comment amidst the bile to share the rationale behind his design. The many who chose not to listen to him won’t learn anything, but the rest of us may find fruit in Mr. Patt’s thoughtful explanation and twenty years of software experience.
The first charge against TripLog is “clutter,” that there’s too much on the screen at once. We’ll get to clutter, but first we have to talk about speed. Patt explains that the #1 purpose of TripLog is to help people track their deductible or reimbursable mileage. If people can’t enter their trips very quickly, the friction of entering data will overpower the motivation to track. For customers, untracked data means miles that aren’t reimbursed. So speed is Patt’s top priority.
What does speed have to do with clutter? I once saw Tufte give a workshop in Chicago where he introduced a valuable concept. He said information may be displayed adjacent in space or stacked in time. Take a book for example. If two dots are on the same spread, they are adjacent in space. All it takes to switch between them is movement of your eye. Compare that to a dot on one page stacked above a dot on another page. You can’t see them at once. You have to flip back and forth between pages to see one dot versus the other.
The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.” Moving focus from one element to another is instant and seamless. On the flip side, separating elements onto different screens slows things down with navigation while increasing clarity. There is more room for explanation and luxurious space when fewer elements occupy the page. The eye has less to filter through. The course of action is more obvious.
So did Patt put too many elements adjacent in space on one screen when he should have separated them out in time? Is his UI “cluttered?”
To answer that we should pull ourselves out of the computer and sink our feet firmly in the customer’s shoes. Patt explains that customers load the application for two reasons:
- They want to log miles they just drove
- They want to double-check that they logged a recent trip
The first is obvious. Patt explains the second:
There’s a very simple reason, which we know because we’ve been selling our Athlete’s Diary software for logging a different kind of mileage for nearly 20 years. It’s because when you start up the software, half the time you’ll be scratching your head saying, “Did I remember to enter yesterday’s ride (or run)?” ... You want to be able to answer that question immediately, with just a quick glance down to the bottom of the screen.
Half the time people want to add new entries. Another half of the time, people want to verify a recent entry. On top of that, people also like to confirm the accuracy of data after they submit it. These factors together form a motivation to place the “add an entry” and “verify recent entries” features adjacent in space. It’s a decision to optimize for instant access to both features at the cost of showing more elements on screen at one time.
Beyond first impressions
When we talk about “usable” or “intuitive” interfaces, Apple devotees and the web app crowd (myself included) tend to bias toward the first-time user. The idea is an interface is easy to use if new users can figure it out and get running quickly. Or an interface is “clear” if all the parts and functions can be immediately parsed upon eye contact. Typically this means stacking features in time so that each screen has fewer elements and is easier to digest. TripLog, while far from perfect, has a different focus. Rather than first-impressions, Patt is thinking about repetition. Spatial memory and adjacency play a major role in repetitive tasks. How many of you keep an assortment of pens, papers, and peripherals on your desk in specific positions instead of moving them in and out of drawers every day?
Patt’s bias for adjacency and speed continues inside the “Add an entry” block. There are two ways to log a trip: manually enter data in the fields or choose user-defined presets called “Frequent Trips.” Both methods are exposed. However everything can’t be exposed all the times. There are some features stacked in time too. Choosing a date “Other” than Today or Yesterday, selecting a different Car (for IRS purposes), and editing the Frequent Trips list are all behind the time wall and require navigation.
So what did we learn?
The fact that a screen is “cluttered” doesn’t automatically mean it is poorly designed or ill-conceived. To many of us, screens thick with adjacent elements are like cold water we prefer not to step into. The very fact that TripLog is no feast for the eyes attests to the difficulty of bringing clarity and order to a screen relying too heavily on adjacent features. It would be a fun exercise to redesign TripLog for more visual clarity without removing any elements.
However before we criticize we should look for successes. Where TripLog fails on style it may well win on speed and pragmatics. Patt has thought about his work and designed a product intentionally. Following fashion and the status quo is easy. Thinking about your users’ lives and creating something practical is much harder. Patt can work on his colors and alignment, and hopefully please his user base with a helpful tool. Meanwhile the rest of us would be wise to work on the quality and value of our criticism.
Steven Fisher
on 09 Jul 08Actually, my dislike of that interface came precisely from the idea of using it over and over every day. I can imagine a few things less fun than trying to hit those ridiculously small buttons with my finger, but none of them can be avoided as simply as not purchasing that product.
Matt Radel
on 09 Jul 08My initial reaction was to throw the “clutter” card as well. But after looking at it, my issue isn’t with the amount of controls on the screen at one time – it’s the colors and the seemingly loose grid the controls sit on. Things just don’t line up. It makes it difficult to make the association between field labels and controls. But with a little UI love, this could be a very friendly app to both the seasoned user as well as the novice (I’d prolly ditch the teal background first).
Great analysis too – very interesting.
lpgauth
on 09 Jul 08This is bs.
The UI is cluttered and there is no excuse for that. He could of used 4 views, one controller that links to new, edit, show.
Changing views takes ms on the iPhone so it can’t be a question of time. And tiny buttons are not easy to use at all. Finally, why that color?
Looks like a vb app I would do when I was 10.
Brad
on 09 Jul 08Nice evaluation. Reminds me of Tufte’s “small multiples.” Perhaps single-frame UI’s have a much stronger memory imprint and therefore benefit from a deeper reservoir of the user’s residual memories. Definitely a worthy UI consideration.
Robert Hoekman, Jr.
on 09 Jul 08‘Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.”’
That may be true, but there are other factors to look at in this situation.
1. First is Hick’s Law, which tells us, in essence, that the more options there are, the more difficult and/or time-consuming it is to choose one. Surfacing many options on a single screen makes an interface inherently more difficult to use even for frequent users. Spatial memory can offset this to an extent, but you also have to consider the medium. As in …
2. This is an iPhone interface, and the difficulty of tapping the correct UI control on a given screen becomes more difficult when there are many adjacent controls.
Leveraging the great design already built into the iPhone for choosing from dropdown menus, users of this particular UI would likely benefit from converting several of the element groups into dropdowns. The “Type” buttons (Business, Charity, etc), for example, could be rolled up into a dropdown, as could the dates. These two changes alone would reduce clutter on the page greatly and make it significantly easier to tap the correct control.
These changes could make the process slower, but when you consider the number of mistakes people likely make on this screen, intentional slowness is probably better than slowness caused by errors from tapping the wrong controls.
Michael
on 09 Jul 08The idea that just because something has many elements must mean that it’s bad or cluttered or the UI is poor, which is simply not true. The problem with this app is not the amount of stuff on the page, how it lines up on the grid.
This could be a perfectly usable interface with a little more thought. Right now it looks like someone took the available space on the screen and said ‘right, now fit all this in there at any cost!’
Alex Kirtland
on 09 Jul 08Thanks for writing this piece. I haven’t used (or seen) TripLog, but in designing data heavy financial applications that get used all day, every day, I think it’s fair to say that a clean beautiful design is not always the first thing to be concerned with in application design.
Often times the design community has a knee jerk reaction to interfaces that look complicated, but it is important to remember that sometimes you’re designing not for the first time user, but the person who will one day know the application so well they may not even have to look at the interface. Apple and Google often get mentioned as the way applications should work. But sometimes it’s the airplane cockpit that is the more appropriate metaphor.
~alex
Chris Chowdhury
on 09 Jul 08Michael
on 09 Jul 08I suggest checking out their other software offerings for the iPhone before making a decision about their UI insights.
Ben
on 09 Jul 08I’m sorry, but I’ve read his defense – and this analysis – and I still say FAIL. If speed’s the primary concern, why would you use the scrolling widget to enter the mileage? That’s going to be measurably slower and less accurate than a simple text field that pulls in the dialing/numeric keyboard.
My impression is that they’re operating entirely without user testing – their intentions are correct (make if fast, etc.), but they’re unwilling, unable, or too rushed to verify their decisions by watching people use various alternatives.
Keith
on 09 Jul 08One of the best things about high quality teapots is the filter inside at the base of the neck.
This filter, in hand-made silver teapots rarely looks good and the hole patterns can be there at random not creating any pleasing aesthetic at all.
That said, it is highly functional.
I fail to see why something that is eminently usable, but unattractive is deserving of the criticisms raged against it. Is it cluttered looking? Absolutely.
What are the USERS of this design saying? Do they love the speed? Do they find the clutter to get in the way, or help them quickly access everything on one screen?
It’s too easy for designers to over design everything according to their design preferences. In reality, design without feedback via some kind of usability study is not good design. If you’re going to stand up and say, “THIS is a GREAT UI design!” You had better have some quantitative proof showing that it, in fact, is better that either a previous iteration or a competing UI against which you are comparing your work.
Martin Cron
on 09 Jul 08This is the sort of thing that makes me embarrassed to be a Mac snob. I just read through the comments on the Flickr page and all of the arrogant, self-important, and mean-spirited comments are just disgraceful.
Personally, I’m not so insecure that I need to stomp on someone else’s efforts like that. What is this, junior-high school gym class? Does the designer of this app throw like a girl?
To me, it speaks to the distinction between visual design and interaction design. Nobody throwing the childish insults had actually used the thing, they were commenting on the visual design exclusively.
Sure, I think the visual design is pretty unappealing, but many of the visual faults are actually pretty minor (colors, alignment, clutter).
I can’t speak to the interaction design (and none of the Flickr haters can either), because I haven’t used it for its intended purpose. Maybe it works, maybe it doesn’t.
ash
on 09 Jul 08No offense to anyone here, but the guy has shipped 17 products and is running a business developing software. Not sure how well he does, but he’s been making a go of it for over 10 years. Anyone else criticizing the UI come close to doing that yet?
I think the only fair criticism is from other business owners who have wrestled with the design, development, cost, and roi factors of shipping a product.
Matthew O'Ryan
on 09 Jul 08I understand their UI rationale for speed. What I do not understand is the hideous turquoise background and the non-native buttons and fields. Windows 3.1 has returned!
Eric
on 09 Jul 08Let’s start with the basics here.
Type: Why are there for, different colored buttons and not a drop down. Why is it at the top and not, more logically linked with the destination or purpose of the trip. Consulting = business, checkup = medical, ...
Millage: There really should be two ways to enter millage, one as the absolute and one as the relative. Why use the pre-exploded number entry here?
Save Data: Why in the world use the color red! In fact the abuse of common color cues are all over this page.
Eric
on 09 Jul 08MS ships a lot of software, it doesn’t make Vista’s UI any less craptastic.
kareem
on 09 Jul 08keith has it right. criticizing design without understanding the customer’s context is an exercise in arrogance.
while the app could be prettier, who among us knows Stevens Creek’s customers better than they do?
there are lots of sites that aren’t pretty but are extremely successful, so let’s get off our horn-rimmed-glasses sportin’, Cons-wearin’, Mac-totin’ horses, shall we?
Pete Lasko
on 09 Jul 08Without redoing the whole screen, this interface could be improved greatly by removing unnecessary labels (distance, type, latest). Not everything on every page needs an explicit label. We overlabel, rather than thinking about how to allow the content or function to describe itself.
Tim
on 09 Jul 08@ash: agreed. The internet crowd is quick at criticizing. No question here.
I actually liked Steve Patt’s answer for showing that there was some thought and constraints behind the design.
However, that being said, Michael has a point. Look at this app or especially this one . These two other apps don’t have as much constraints as the one mentioned here but they still fail in the look and UX departments.
I believe the biggest problem here is what Bill Gates was envying from Steve Jobs: good taste. But Bill Gates still succeeded.
Matt J.
on 09 Jul 08Apart from the usability discussion, the first thing I thought when I saw it was “Old School Visual Basic”. Ewwww.
Chris Jones
on 09 Jul 08just goes to show you that good design doesn’t always solve peoples problems. Good design is only good when it solves problems.
Ben
on 09 Jul 08“When I am working on a problem, I never think about beauty; I think only about how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong.”
Buckminster Fuller
Bruce
on 09 Jul 08Thanks for the link to the explanation. I think the TripLog UI looks messy, and could be improved, but the distinction between “adjacent in space” and “stacked in time” helps me understand why I dislike Apple’s “create event” UI in the iPhone calendar. Putting the input field for event title, which every event is going to have, on a separate page (“stacked in time”) requires at least two extra clicks for every event I create. Even worse it occasionally causes me to lose an event when I forget to click “done” on the summary screen after clicking “save” on the title/location screen.
Nathan
on 09 Jul 08Douglas Englebert said he wished that computer mice had more buttons. Easy to use on the first use isn’t always optimal. Take the computer keyboard for example. It is incredibly hard the first time, but once you put in a year mastering it, it becomes effortless.
Another example would be the unix command line. You can spend several years using it before you master it, and once you do it is incredibly powerful.
Wysiwyg
on 09 Jul 08Well, it is an ugly app. But i don’t know about it’s usability. I mean, i generally criticize only what i know, and i don’t know how this app will feel after, say, a month of regular use.
BTW, to all the ones who criticized to the app: does any of you used it to validate or not the author’s claim? This is not a sarcastic question, it’s a real curiosity.
Sanjay Vakil
on 09 Jul 08First off, it is FITTS law, not Hicks. The rest is copied from a thread at HN: http://news.ycombinator.com/item?id=240173
I feel for Steve Pratt. Full disclosure: I’ve met him, in passing, at various handheld events over the years, but he wouldn’t know me from Adam.
What I’ve found, and what he’s caught in, is that data-entry applications for very specific problems, tend to get ugly. And that’s ok, because the users are very, very savvy. If you look at the software his company builds, you’ll find that 90% of it is for savvy, specialized users.
I spent hours agonizing over how ‘ugly’ an early iteration of a handheld app was after the users came back and said to make certain buttons and text bigger. Multisize buttons!? Different font sizes on the screen!? Crazy! And BAD!
But Fitts Law says (paraphrased) that big buttons are easier to hit. So make that button that everyone needs to hit 20 times an hour BIG. Even if it is ugly.
Some text you want to be able to see from a device lying on your desk. Some you don’t care about until you need to squint at it. So size it differently.
I’ve come to believe that’s all good.
What isn’t defensible is the parts of this app that are just plain sloppy. The size of buttons not being the same, but being off by a few pixels. Spacing being wonky. Fonts for the sake of fonts.
John Smart
on 09 Jul 08There is a third alternative to the adjacent space or temporal stacking options—feature reduction.
Decide if the feature is REALLY necessary, or is just nice to have. If its not going to gain you a user or keep an existing user, cut it.
Charlie Park
on 09 Jul 08Sanjay, are you really critiquing RHJR? He was, actually, talking about Hick’s Law, which is the formalized algorithm talking about “the paradox of choice.”
Ryan N.
on 09 Jul 08I completely agree with the premise that it’s okay to put a lot on one page, but there’s no reason this interface is so clunky.
This app isn’t nearly as complicated as it seems at first glance — it’s made infinitely more complicated than it needs to be because everything is slapped on the screen in arbitrary places, with arbitrary colors, in an arbitrary hierarchy, with arbitrary type choices.
How is that helpful or useful to the user?
Michael Daines
on 09 Jul 08This interface might make a good litmus test for designers! My reaction is mostly that it’s kind of gross, but I’d like to make an attempt at rationalizing that.
I find the above comparison to craigslist interesting. Craigslist uses a restrained aesthetic that owes a lot to the way unstyled HTML is displayed in the browser. I find it attractive! Craigslist takes far fewer stylistic risks than other sites, and thus seems to be more easily rewarded by a feeling of consistency and straightforwardness, which is helpful on the web, and probably even more helpful in a mobile device with a small screen.
On the iPhone, there’s a strong style already in place, thanks to the HIG and the existing Apple apps. I don’t think it’s too controversial to suggest that if a developer is going to deviate from this, they better have a good reason and do it well. The bright blue background and hobbled-together look of the controls in the application is a problem, then: it’s not consistent or straightforward, and is too noisy. It may be superficially “no-nonsense” in its deviation from the established style, but there appears to be little to warrant that. It could be more successful if it were “no-nonsense” in the way the rest of the iPhone interface is.
I don’t think there’s any problem with the designer’s intent. I agree with this post: placing these elements adjacent in space is a good idea. In my (probably ill-conceived and repetitious) opinion, though, the single most effective way of improving the design would be to ditch the huge “slot-machine” mileage entry control. It’s just way to big! Making it more compact would mean more space could be devoted to frequent trips (and trip history) or the “luxury” of less clutter.
g
on 09 Jul 08Bzzzzt… fanbois, your attention and comprehension rating: FAIL
Read it again:
“So what did we learn?
The fact that a screen is “cluttered” doesn’t automatically mean it is poorly designed or ill-conceived. To many of us, screens thick with adjacent elements are like cold water we prefer not to step into. The very fact that TripLog is no feast for the eyes attests to the difficulty of bringing clarity and order to a screen relying too heavily on adjacent features. It would be a fun exercise to redesign TripLog for more visual clarity without removing any elements.
However before we criticize we should look for successes. Where TripLog fails on style it may well win on speed and pragmatics. Patt has thought about his work and designed a product intentionally. Following fashion and the status quo is easy. Thinking about your users’ lives and creating something practical is much harder. Patt can work on his colors and alignment, and hopefully please his user base with a helpful tool. Meanwhile the rest of us would be wise to work on the quality and value of our criticism.”
Brad
on 09 Jul 08Since we all are admittedly not part of the TripGo user group, why don’t we discuss this “power user” phenomena in more common terms.
How many here still use the setup wizards on their TV sets vs. the “advanced” menu?
Or if you have a Wii, how many use the “additional wii-mote” screens when they are offered vs. immediately hitting the “home” button and reconnecting your wii-motes?
I go the less-pretty route for each application.
PF
on 09 Jul 08it’s OK to sacrifice (and in a violent way) the looks of the UI for one less tap of your fingertip?
I really don’t think so
What if Basecamp were the same? how would the ‘Overview’ page look? just think about it for a while.
And one last thing, If the designer is so compelled with the size and proportions of the screen … WHY DID HE CONSUMED 40% OF THE WHOLE SCREEN WITH AN ODOMETER??
Can 130 people (on flickr only) be wrong and the designer be right? Maybe, but I definitely think this is not the case
Ken Mayer
on 09 Jul 08I think that dedicating regions of space to UI controls reduces the amount of information you can process—and that’s an expense that should be carefully considered. In Tufte’s review of the iPhone, he talks quite a bit about how good apps strive to reduce “administrative clutter;” Instead of throwing every interface element onto one screen, most things are tucked away to the side where they can slide in when needed. You don’t waste space on interface controls when you can present more information.
ng
on 09 Jul 08Can someone just muck up a better UI and keeps the same elements but looks better?
Someone just needs to prove they can do it better.
Brad
on 09 Jul 08No Spec work!! :,P
ng
on 09 Jul 08Not Spec. learning exercise where people can compare and contrast good vs poor design. I read all that is bad and all the reasons why it needed to be this way, but I see no solutions.
Rimantas
on 09 Jul 08Ryan, honestly, would 37s release software that looks like THAT? I seriously doubt so. There may be legal reasons to have many items on the first screen, nor that I readily buy that explanation, but screen should not look as ugly as it does. You can make a screen with just two buttons look horrible, and you can make a screen with 20 buttons look tidy. If designer had used half of the time he spent on advocating his decisions to improve the design the result would be much better. This is just ugly and there can be no excuses for that.
BJ Nemeth
on 09 Jul 08Posts with analysis like this is why I keep returning to this blog. Fantastic post, proving that even “bad” things can be used as a learning opportunity.
I think a lot of the commenters are missing the point of the blog. Ryan isn’t claiming that the UI is perfect, or even great. He’s just pointing out that it was designed with different needs than most critics expected.
I think a lot of the critical commenters here should reread the first paragraph under “So what did we learn?” Especially this line: “It would be a fun exercise to redesign TripLog for more visual clarity without removing any elements.” Instead of bashing the poor guy (who successfully sells software, by the way), why not help him out with a quick mockup of an improved screen showing the same information?
Scott Fannen
on 09 Jul 08Even the description you use of the tasks involved make you want to design the thing with multiple screens.
Start up – see recent entries then dismiss that screen to see the add item screen or click a big add button.
Choose from frequent trips in any number of ways (if you had the most frequent in a list make sure they’re sorted by how often they’re used) or add a new one in a new screen.
Get rid of that roller control – it takes up a huge amount of space that could be used better or left as “white space” (surely there’s a better way – even a pop up keypad?) – kind of reminds me of the old “real world” volume control in QuickTime Player.
Use a more appropriate colour (I speak English English!) than aqua (classic failing in cross-platform developers – not using a “look” befitting the new platform).
Use group boxes (or whatever they are in the iPhone SDK) to separate the different elements more effectively. That would also make the use of colour less important and make using different sized form elements less painful to the eyes (as you wouldn’t want or have to line up elements that don’t share the same purpose).
The existing users may love the program as is (we have journalists who swear by an old program called CopyMaster that was a Windows 95 hack-together of a Windows 3.1 program – I appreciated the single mindedness to the task but hated the look) but making the program pretty (and maybe not less functional) will get a lot of new users willing to try it (users who also buy the iPhone for it’s look and feel) and for the die hard users, you could have a “classic mode” in the preferences – how long did MS offer a Word 5 menu option for Mac users?
Just my 2 cents – I hope the developer looks through all the flames and picks and chooses what advice he wants to take. Good on him for diving into the new platform.
Spam
on 09 Jul 08I agree with the massive odometer comment. Is it really any easier/faster than typing a number in?
Could it be better as a dropdown list variant with 0-9 for each column? (That is, one drop down list, four selections).
Raphael Campardou
on 09 Jul 08I must confess, I’m of the ones who had fun commenting on the Flickr page. I don’t feel bad though : I never feel bad for having a nice laugh, even sometimes at the expend of someone. We all have flaws, I do anyway, you can make fun of it. Sense of humor should be both ways—mine is.
But, to be serious here [flickr =>fun, SVN => Serious] : I don’t buy the explanations of Mr Patt. I’m no UI designer, just an intensive UI user. I’m no composer, nor a director, but I listen to lots and lots of music, watch every film I can, I can be a critic. Same goes for UI.
Confession #2: I’m a Mac fan boy.
So where does it lead us ?
I think there are no good excuse for not making a good UI, especially around a mac, and more specifically for the iPhone.
Point 1 of Mr Patt count the Pixels. OK, but I don’t see the point really. Size is a constraint of course, but I don’t see any good excuse for clutter here. Point 2, says that they didn’t made certain choices because it would go against Apple recommendations. Sorry, but I find that pretty ironical… Point 3, I call that a Lapalissade (would be Truism in English). Of course, what does matter is the ability for user to find their way. Isn’t that the point of User Interface as in Interface for the User ? isn’t Usability one of the main aspect of UI ? As would be efficiency ? If a UI expert is pleased, maybe it’s because UI is good, meaning User will be comfortable using the app.
The rest of Mr Patt response: Frequent Trips should be in a Wheel Menu (iPhone version of the drop down), Milage should be text field, That blue arrow is, indeed, standard iPhone UI. But usage seems wrong, mainly because of the surroundings. Labels for text fields should be in placeholders in the field, this gorgeous feature of Safari. Labels for “Latest” is useless : there is a date right bellow. Hyphen on “Frequent Trip” is unforgivable. If you have to make it two lines, make them aligned, left or right, it doesn’t really matter. The number of tap (yes, on iPhone, it’s called tap, not click) doesn’t justify this many sacrifices. Maybe Mr Patt doesn’t know this feature, then he shouldn’t brag about 20 years of UI design and RTMF. If he does know about it, then he should have used it. “Did I remember to enter yesterday’s ride ?” You need it on the page. OK. But that’s one ride, not three, and it doesn’t prevent you from arranging the spread sheet as if it was not from Excel. The part on the color… where do we begin ? yes, we hardly can see it; I agree, but there are a few more choices than this blue and black; Yes, I felt so bad when I saw this app, I put iton Flickr so people could laugh at it.I think that trying to defend it as Mr Patt did is an insult to designers who spend so much time, trying to think though usability AND esthetic AND comfort.
And yes, people in enterprise who are going to choose an iPhone aver a Palm or a BlackBerry DO care about esthetic.
So, sorry, but there are still no other explanation to this than proper misunderstanding of what softwares are made of. It is still an insult to the designers of the iPhone SDK, iPhone HIG, iphone, and nicely designed app in general.
And because enough is enough, just now, I downloaded the iPhone SDK, and did this mock up. I remind : I’m not a designer, I never used the SDK until now, I spent approx. 1 hour, incl. 1,25 Go download. I placed every feature, and, of course, didn’t re think any concept (those could certainly be argued). I still am ashamed to present this mock up, but—would it be real—it certainly would have made it to Flickr…
jking
on 09 Jul 08Personally I’m glad train wrecks like this are coming to the iPhone. They have done the viability of the market research for me. All I have to do scoop up the idea and implement it a better.
Paul M. Watson
on 09 Jul 08My initial reaction is poor but I’m not the intended user. What do the users think of the app?
Anchovy Dave
on 09 Jul 08This is funny. I would venture to say most of the usability “experts” in these comments are self-proclaimed charlatans. How many of you actually went to school for UI Design? Human machine interaction? How many of you picked up Don’t Make Me think, ripped off 37S ideals on your WordPress weblog, built a couple of free sites for your church group, and call yourself an expert UI designer?
Just because this UI doesn’t conform to the bandwagon simplicity/sparse look mob mentality prevalent in most of your dumb ass web logs, doesn’t mean it is not good.
Most hammers are clunky, and odd looking, but they beat the shit out of a nail just fine. This UI serves its intended purpose just fine. Ryan is spot on! It serves its purpose.
This community is starting to remind me of high school. I hated all the trendy asshole know-it-alls there. What happened to all the cool kids?
Sorry, 37S, I am not eloquent or nice with words. You can troll cap me, delete me, whatever. I still love what you have created.
Anonymous Coward
on 09 Jul 08pfft stop trying to defend it, its utter garbage. Wouldn’t have a clue what button refers to what control… SPENDT WHAT? ADDING TO WHAT? SAVE DATA? which data??
Lets face facts the guy is a dinosaur too stuck in his ways for designing for that tiny fiddling palm interface
Dominik Wagner
on 10 Jul 08Hmm – I think this article is besides the point. Just look at that screen, it is like a ill designed school yearbook of someone who doesn’t know that too many fonts or having no spacing is a bad idea.
If you would just give this screen – as it is – a default look, e.g. use the striped standard background, don’t use color labeled background, put the type choice into the mileage custom control, don’t f*ck upp the style of the plus and edit buttons, put the frequent trips in a extra screen as they should be (and maybe leave just one on the main screen if that really is important – or make the frequent trips a row of icons the user can shoot pictures for with his camera, or or or). This UI is messed up because it shows no willingness whatsoever to actually look into the style and meaning of any of the UI elements it is using, not because it tries to be efficient.
There is an argument made for efficient but hard to grasp at first user interfaces – and we see that in pro apps all the time. But in my opinion the truth is: pro apps don’t need to care because the users don’t have anywhere else to go to. Photoshop doesn’t ever need to get a better UI because there is not a real competitor feature wise on the market. The message of pro apps most of the time is: it is good enough for daily use, and you can get used to it. Not: this is the best way of doing things.
And the truth here is: this app comes from a background where look and spacing didn’t matter. And guess what, on the iPhone it does, and the iPhone is a better platform because of it. (not because of the whining schoolboys on the flickr comments wetting themselves in apple snobhood)
And to mix in something very constructive: write down the goals, take some thought, count the taps as the folks at palm always needed to do, and i’m sure you can come up with something way more decent to look at AND performing more pleasing to the user on a repetitive basis.
Andrew
on 10 Jul 08This is one of the most interesting posts to SVN in a while. Understanding what makes a product mediocre or fantastic relies on an understanding of many factors; some of those factors immediately present themselves while others are much harder to spot. I believe this type of deeper introspection is critical in determining what makes a product strong for a given use.
Kudos to you Ryan for digging deeper into a product and sharing your thoughts.
Ben Gotow
on 10 Jul 08The fact of the matter is that all iPhone apps are designed to be quick. That doesn’t mean the entire application needs to be presented on one screen. Can you imagine a mail program where you composed and viewed mail on the same page?
You make a good point in considering interface “depth” – the number of clicks it takes to perform a task. But consider this: how many steps does it take to recover from a misplaced click? If someone has to stop walking to precisely press one of your buttons, you’ve just taken more of their time. You’ve got to strive for a simple, well organized AND shallow interface.
One metric that hasn’t been considered here is initial impression. Your tool may be brilliantly easy and fast once you’re familiar with the interface – but if it looks like a logic puzzle, nobody will ever give it a chance. The iPhone in particular is all about glossy applications.
I’m also an iPhone developer. I’d suggest using tabs along the bottom to break up the three sections “New, Present, Recent”. Then you’ll have more room for other elements. I’d also remove some of the miscellaneous color – but that’s just a design preference.
- Ben
Sanjay Vakil
on 10 Jul 08Charlie Park: I was, he’s right and I’m wrong.
Boy do I feel stupid.
Feel free to move along after the giggling dies down.
Eric
on 10 Jul 08Where are the “good” hacks like building a location database that will automatically pick the most likley destination out of previous used destinations based on (p)GPS location? Accelerometer + GPS to determine miles traveled? Taking pictures of recipts to catalog later?
ng
on 10 Jul 08Raphael, that’s a much better UI.
I like the use of the field itself to show what it’s for “Description” in gray.
I think it would enable faster input if there was a number input like the calculator. but there’s no room for that.
Good job
Paul Walker
on 10 Jul 08I’d decided to redo this interface myself using the SDK; following Pratt’s aims without (I hope) his issues. Then, after I was done, I read Raphael Campardou’s comment. OUr ideas were pretty similar, it seems: http://img65.imageshack.us/img65/6351/iphoneua8.jpg I’d like to think that’s a good thing. It’s not the most approachable UI ever, but its a big improvement, and its just as, if not more efficient.
Morithra
on 10 Jul 08Wow. Two wonderfully improved UI mockups in less than 24 hours which both do everything the original aimed to do. Raphael Campardou and Paul Walker show you how it’s done.
Anonymous Coward
on 10 Jul 08Yes, the two mockups both show tremendous improvement over the original. Hopefully, the original designer (Steve Patt) can take some things away from this thread and make his product even better.
BJ Nemeth
on 10 Jul 08Sorry, that “Anonymous Coward” comment just above this was by me. Forgot my name and email address.
By the way, this thread has inspired me to download the iPhone SDK and play around with it. I haven’t done any programming since I was using BASIC in high school (two decades ago), but it might be fun to give it a whirl.
Paolo Passeri
on 10 Jul 08My Re-Done Interface…..!!!
I re-did the interface to a more clear and “iPhone Look” ... I’ve used the Clock App Look to make this interface. I did not quite get the preset entry … I think it looks better and it uses some of the iPhone’s already known places for buttons (like the save one) .. also the list on the bottom would be scrollable (like the Cal App)... Shake to clear ( a given ) ....
http://img518.imageshack.us/img518/6964/triploggw5.png
What you guys think…..?
Sachin
on 10 Jul 08Smart assessment, “Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.”—- seems interesting and makes sense.
Doug
on 10 Jul 08The bottom line is that the application looks unprofessional.
Zach
on 10 Jul 08Okay, I don’t think anyone is going to doubt that the interface needs work. And simply providing a rational explanation doesn’t necessarily result in a quality User Interface. But I would like to throw out my thoughts on the issue:
First off, usability. From an ID perspective, usability is measured not in “simplicity” or even “intuitiveness.” Rather, it is measured by the following question: “Are the rewards or benefits received from using the system worth the time it takes to learn.” For example, software a surgeon uses to cut people open is NOT simple. That’s that okay. It’s still usable even if it takes two weeks of training to learn the basics.
Second, to the issue of clutter. The real problem we’re concerned about with all of the items on one page is with regards to Short Term Memory Load / Cognitive Overload. Are there too many thing for the human brain to handle at once? Are there ways that we could keep the one page element but making the interface less overwhelming. For example, “Business, Charity, Medical, Other” options could be placed into a drop-down box. Four boxes become one.
The third issue is that of natural mappings. Essentially, the human brain looks at things and groups them in a way that says “these items are together.” Does the UI take advantage of this? Does it group things via symmetry? Color? Are buttons and ideas naturally linked together that makes sense? I think this is where the interface has the most room for improvement. The “spent” button, for example, I’m not sure quite what it goes with. If the buttons were lined up in a more symmetrical way, I think the interface would improve greatly.
I do think it is odd that the majority of people here critiquing the UI have very little experience in either ID or HCI. I also find it odd, as others have mentioned, that so much of the commentary both here and on Flickr has been as negative as it has.
Props to those who created alternative mock-ups. THAT is what a community is supposed to be about. Certainly not statements that call the designer a “dinosaur.”
Martin Baker
on 10 Jul 08Well I’ve got to say this episode has been one hell of a fascinating (if rather depressing) culture clash.
I don’t have any formal training as a UI designer (even though I’ve designed numerous UIs in my time) but the biggest problem with the original design is a lack of structure. There’s no point in having all the controls on a single screen if the user cannot see at a glance what controls belong to what particular task!
Interestingly the mockups get this right, straight off the bat.
Petros Amiridis
on 10 Jul 08Just to add that although many guidelines and rules for UI design on devices like PCs or Laptops make sense, many of them don’t when the device you are designing for has various limitations like: small screen real estate or low response (weak CPUs). I know that from experience. I was developing Windows applications for years and now I also targeting PDAs.
LKM
on 10 Jul 08I think this post is kind of missing the point a bit. People aren’t saying that the UI is not usable or efficient (to find out whether it is, tests would have to be done). People complain that it’s ugly, cramped, and using UI elements in non-standard and confusing ways.
ben
on 10 Jul 08yep, basically just copy what apple are doing ;)
http://www.duivesteyn.com.au http://www.duivesteyn.net
Craig Hunter
on 10 Jul 08This just goes to show that native apps will be no different than existing web apps for the iPhone. While there are some great looking web apps that follow the design themes/styles of the iPhone UI, the vast majority of iPhone web apps are horrendous looking and horribly designed. Some developers just don’t get it.
Look at the good web apps, and Apple’s own apps. It is possible to combine functionality, efficiency, and good looks in an app. You don’t have to sacrifice one for another. Most developers just don’t try hard enough or have the talent for UI design. And it gets even more challenging for the iPhone because of all the new UI conventions it introduces. Many developers don’t really understand or capitalize on this, or worse, they ignore it and impose conventions from traditional desktop OS UIs.
ng
on 10 Jul 08Of the 3 mockups I think @Raphael’s is my preferred design. That being said, I had an idea, not sure if this is possible on the iPhone, but it might be.
I have seen “wedge” or circular menus used on tablet devices and I was wondering if that could be done from the icon that launches the app. So when you tap the icon u hold for a second, the menu appears and you select (add trip, freq trip, review trips). from that selection you are then taken to the appropriate tab within the application. Just a thought.
Jonathan Ive
on 10 Jul 08I weep.
Anonymous Coward
on 10 Jul 08I cant believe we are still debating if that UI is good or bad, in one of the greatest “UI design” blog!!!!
That is crap, theres no justification in the world for doing something like that. It looks like a design “hello world” thing.
I’d like to hear Jason’s opinion by the way.
PS: Maybe he’s the designer you wanted to hire in order to “kick your ass” ! :)
Geoffrey Grosenbach
on 10 Jul 08Apparently it’s available for purchase in the App Store now:
http://tinyurl.com/5crmnpvia http://twitter.com/nakajima/statuses/854754623
Steven Fisher
on 10 Jul 08@Martin Baker 1 “Interestingly the mockups get this right, straight off the bat.”
That’s because it isn’t all that hard to do! And that’s also why I’m within a hair’s breadth of mocking this developer, too: The principles are simple, but he’s so focused on defending his crap that he hasn’t taken a step back and even considered that he’s wrong.
And I developed applications for the Palm, too. It wasn’t hard to do nice interfaces there, but almost nobody ever did.
Bennet Manuel
on 10 Jul 08Its interesting how this was the exact same discussion I had with a couple of friends over a beer sitting at the bar of Hard Rock Café in Bangalore – India.
A touch screen monitor with the ‘order placing application’ or whateva you call it was directly in front of us and the layout of the application was exactly what we call clutter here – huge buttons spread across the screen.
It was only after a while when we observed the usage of the application, did its brilliance occur to us. Every waiter spent 2-3 seconds in front of the application (leaving them no time to admire the beauty or the lack of it) throwing his hands at the touch screen monitor, not wasting a second aiming his fingers at the right button. It was then that it hit us, any other layout would lower their efficiency and increase the time they would ideally need to place the order. Also, the fact that they only spent so little time on it – there was absolutely no need to add a rainbow of colors to it – hence a basic win form with buttons sized such that if you throw your hand at it – one of the 3 fingers to land on the screen would definitely strike the right button.
Usability ultimately – beauty to a back seat!
Matt (of "Old Gregg" reference fame)
on 10 Jul 08...in other words: lighten up guys.
Mr. Patt should thank someone here for giving him a redesign option, completely free of charge no less.
Insult hurlers: Shut up, design something better and sell it. (“It’s 90% perspiration”, guys. It’s in the doing).
Ryan should be congratulated (thank you, ryan) for at least bringing to the fore discussions about A) adjacent vs. stacked space and B) motivation to act vs. the friction of acting. These are real (and human) concept that are 100% important when designing just about anything.
Mike Padilla
on 10 Jul 08Designing the UI is fundamentally an exercise in compromise-not compromise between designers and other project stakeholders (usability should never be sacrificed as a result of office politics)-but compromise between the drawbacks and benefits of design decisions. Careful consideration of the benefits each design decision affords and costs its users is essential.
Simply recognizing the fact that UI design is based on a foundation of compromise can go a long way in getting the project team to understand the why behind designs. Doing so will reduce the risk of derailing an optimal UI design that is inaccurately critiqued by those who only see one side of the story. By clearly showing the costs, the benefits, and the corresponding net value of your designs, you can educate others while championing your vision.
http://www.digital-web.com/articles/user_interface_design_taking_the_good_with_the_bad/
Murphy
on 10 Jul 08One thing that stands out, is how much more mature Steve has been about the situation, as opposed to his critics. Kudos Steve.
Another thing that stands out, is how much character Steve’s program has. At first I liked the alternative mockup posted by Raphael. It was attractive. But the more I looked at it, the more generic it seemed, and the less I cared, or wanted to use it.
Maybe I’m getting warm and fuzzy in my old age, but I think character goes a long way.
Another interesting thing, was that a pair of my female co-workers preferred the look of Steve’s app as well. Perhaps for the same reason: character.
Ultimately, the perfect UI is a single button that does everything (I’m looking at you Shannon). Beyond that, aesthetics are subjective. Please. Realize this. You people complaining are probably the same ones that’ll bitch about your “stupid” clients behind their back. For shame. Use your grey matter. Nothing’s perfect.
eikonos
on 10 Jul 08I still think the interface is horrible, regardless of his years of experience designing user interfaces.
This quote from your post sums up nicely what is wrong with the UI: “Half the time people want to add new entries. Another half of the time, people want to verify a recent entry.” The UI should be separated into two tabs, one for adding entries and one for verifying. That would give more space for each task and allow the buttons to be bigger and properly aligned.
James Wu
on 11 Jul 08Armchair criticism by self-styled experts in user interaction, is what most of you are doing.
Talk is cheap. Back it up, or shut up.
Everyone’s a critic, but what have you done? Too busy twittering, social networking and reading self-reinforcing blogs? That’s what I thought.
rvr
on 11 Jul 08i actually do ui and interation design (for the web) every day, and i agree that this interface is bad. sure, there may be good reasons for what’s on the screen, but there’s never a good reason for things to be ugly. the buckminster fuller quote above captures it just about perfectly—a great solution is inherently beautiful. and if this company doesn’t care enough to polish off their ui, then why would i assume they care enough to create a good app, or write good code, etc?
you could make this ui more attractive, and have it feel less cluttered, without removing a thing from the screen. there are plenty of suggestions in these comments. the feeling of clutter is just as bad as whether or not it is actually cluttered, imho, since it creates a barrier to use. yes, power-users may be accustomed to this, and expect all these things on the screen. but i don’t believe the sense of clutter is good. just because you’re used to something doesn’t necessarily make it the best way to do it. and new users may be turned off by it.
so, ultimately, what this ui indicates to me is a lack of analysis and creative thinking (the designer asking, “how can i make this simpler and more usable without dumbing it down? can i do things in new or different ways?) as well as a lack of caring for the details of visual design. these details are not window dressing, they directly impact usability.
Andrew
on 11 Jul 08Could you please do an analysis of SAP, it’s SO bad.
Oh you want to edit that line item? Well, first, you cant. Secondly, I wont let you escape this current window unless you enter some data that I like. You will have just have exit out of this window, lose all your work, and spend 15 minutes re-doing it. How dare you make a mistake.
Oh.. you have lots of items to enter? Well, here’s a fast entry screen. Oh, but you cant enter all the details you need to, we omitted those columns…
JY
on 11 Jul 08@James Wu
“Everyone’s a critic, but what have you done? Too busy twittering, social networking and reading self-reinforcing blogs? That’s what I thought.”
you sir, win@irony.
Jeff Denton
on 11 Jul 08@Bennet Wait wait…let me get this straight. So you’re saying that using the app is more important than a keen appreciation of shadows, gradients, glossy effects and a perfectly contemporary color scheme? I’m – like – completely blown away here.
In all seriousness, I like your comparison to point of sale apps which – all ugly aside – are about as efficient as data entry apps can get.
JY
on 11 Jul 08my cheeseburger and i think the point is, efficiency/usability(function) and aesthetics(form) are not mutually exclusive.
Apple manages this fairly well. that’s probably why the commenters flamed the author, since it’s not very “apple like.”
Partners in Grime
on 12 Jul 08Taste can’t be bought … just look at Gates’s haircut.
kin
on 12 Jul 08The design looks horrible to me. The background colour kills it all. No grid align is bad. But I guess I am not the target user and I believe many who criticize the app are not the target users either.
That guy has been in business for 20 years selling apps, but who is willing to buy his software that looks this ugly? They are probably the same type of people as the designer who cares speed over design and have no interest in UI design principles…These people exist (in all occupations) and I am sure all of us have encountered them once a while.
There are people who buy clothing for their design and there are people who buy them just to cover their bodies…
The problem is that there are too many users/buyers who are too insensitive about design.
Thibaut Sailly
on 12 Jul 08Ryan, very good read and nice observations. I don’t think Steve fails on style as such (we should all have our ones), but rather on understanding the analogy generally used to build UIs on the iPhone. He clumsily mixes 3D and 2D treatments without realizing it – as far as I can tell. This is pretty obvious on the ”+” and “Edit” buttons : they have a top reflection but no drop shadows. I’ve detailed this comment in this post for those interested. It’s not so much about getting colors and alignment “right”, more about constructing a UI space that is coherent in the way it reacts to lighting and texture properties of its elements, enabling the user to have a better grasp of it.
Tobin Harris
on 12 Jul 08Would be interesting to hear how many folk here have actually downloaded the program and used it for over a 2+ days?
I think the discussion would be better if we did that and then discussed the problems we had with the interface!
Santiago
on 13 Jul 08i’d like to see someone, instead of criticizing, actually sitting down and designing what they think would work for this. show us what you got and then we can talk.
Tobin Harris
on 13 Jul 08Some folks have done this, and their results look pretty. See here and here and here.
Are they better than the original?
Prettier perhaps. But not necessarily better.
Very few commenters have actually interacted with the UI, or employed the dimension of time before drawing conclusions. That’s why we should download the application, decide on some usability metrics, use it over a period of time, and see what aspects of the UI hinder user goals.
If we did this, we’d be helping the software author a great deal. And helping people is good, right?
Craig Pickering
on 13 Jul 08Speaking of Tufte, he has a good video critique of the iPhone interface on his website.
“Clutter and overload are not an attribute of information, they are failures of design. If the information is in chaos, don’t start throwing out information. Instead, fix the design”.
Scott Gatz
on 14 Jul 08My first product management job was at Reuters and my boss had been on the founding team of the Bloomberg Terminal. If you have ever seen a bloomberg terminal, it looks a mess. Full of clutter – it hurt the eye – my boss told about all the research they did. Traders wanted 1 thing, every pixel should work, every pixel should have data in it. Most traders had 2-3 monitors so they could fit more data. And they wanted it to blink when something new came. Ugh. But it clearly fit into the concept of info in space not time, they didn’t have time to click through, they needed every second to see what came by and make (or not make) a trade.
Richard Henry
on 16 Jul 08Umm… it’s well intentioned?
Although you mention being able to save time thanks to not switching between views, you end up spending more time digging through controls and trying to hit the correct button. The controls are inconsistent, and don’t order well.
Okay, so we want to save time on entry input? Okay, well the default screen should be devoted solely to entries, with two smaller buttons towards the bottom for the other views that are used less frequently.
I completely disagree that this application has been well thought out. The problem is not solely with it’s clutter, it’s with it’s usability. The controls are too small to use, especially if we’re pressed for time, and you won’t be doing any ‘recent entry verification’ when you can’t read the damned text.
Richard
This discussion is closed.