is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Upside-Down Inverted Triangles and Other Interface Details
Here’s how much tiny user interface cues can matter: this afternoon, I spent about five minutes scratching my head in front of an Open dialog box in Adobe Photoshop, trying vainly to locate the files I’d saved several months ago to a particular folder. They just weren’t where I expected them to be.
The dialog box was displaying the contents of the folder in list view, and I had clicked on the Date Modified column to sort most recently modified items last. At least that᾿s what I thought I had done; the triangle icon was in fact in the correct mode — pointed end at the top, wide end at the bottom. But apparently, some kind of preference file had been corrupted, and the list was actually sorted so that the most recently modifed items appeared first.
I’m only a little embarrassed to admit that it really did take me longer than it takes to put on and tie my shoes to sort that out. Part of the reason is that I’ve never had such an interface cue actually turn out to be flat out wrong, at least that I can recall, so I simply didn’t think to doubt it. A detail so miniscule — the triangle measures roughly seven pixels square — is expected to fulfill a powerful cognitive responsibility by being, essentially, an infallible indicator of state. The glaring obviousness of the lesson aside, it was still a useful reminder to me that, indeed, there are parts of an interface that absolutely must never be incorrect. Even if the consequence is relatively minor, like my five minutes of befuddlement, such an error is nontrivial simply because it’s the last thing anyone would expect to be wrong.
Right: Bizarro World dialog box. That little arrow, surprisingly, is all wrong.
Which reminds me: in previous versions of Mac OS X, the contents of Open and Save dialog boxes would be frequently slow to update. You could move a file into a particular folder via the Finder or some other application, and when you tried to open it with a dialog box, it might be simply missing — at least until you switched from list view to icon view and back, and sometimes not even then. That was really annoying, and a hairy way to run a file system — it was probably the most underrated embarrassment of the OS, especially when Windows users would sit down in front of a Mac. That’s an interface cue — predictability and presence — that simply had to be infallible. In Mac OS X Tiger it finally is, seemingly. It’s about time.
To me, even relating the triangle to dates confuses me. Does thicker mean older dates or newer? Does the pointy part remind me more of the present or past?
I still hate how that you cant rename anything in the dialog boxes, cant move anything, cant delete anything, cant do many things that windows dialog boxes can do. I wish there was some plugin or something that could fix that.
I just found that a shareware app called Default Folder X gives you the ability to rename, remove and delete files and folders from dialog boxes in OSX. Seems to work pretty well.
Yeah, actually I use Default Folder X and, to be fair to Photoshop, it could well be the cause of the improperly displaying sort icon. However, I can’t get by a single day with DFX; it’s an invaluable help in doing just the things you mentioned above.
Haha. Whenever I’m looking for the most recent files, I always “shimmy shake” it by clicking that row header two or three times and looking at the date. Can never remember which is which, especially considering other scenarios like online banking do it the reverse way.
I have to concur… that triangle means nothing to me, and I have to do the shimmy with it, as well.
What I really want is a FINDER that allows me to fix column widths permanently using EMs or ENs… not to mention a preference that would allow me to set all new folders to display in LIST format by default.
I’d bet that it’s Photoshop that’s wrong, especially if you’re using their custom browser. They tried to make it so it’s halfway between OS X and XP, which causes some oddities (for example, on XP the dropbox for location only shows the current drive).
Also, the arrow is 7px square. I’ve done some work on a pinstripe Firefox skin, and that was something I fixed. 🙂
Well for future reference this particular triangle is sort by ascending, and the other is decending. IE this one shows the largest on the top, which should be the last date. However I think the problem isn’t that the icon is wrong, I think it’s that who ever designed the icon for that state has a different take on how the list was sorted.
To me it’s easier to think of this state being correct, why? Well, if you’re sorting in ascending order the list does ascend as you go up. Think about it this way, if you’re sorting in ascending order why does it display in a descending format? That’s about as best as I can explain it, sorry 🙂
Also, I tend to shimmy, because different UI sort differently.
I’ve never figured out that arrow thing. The ‘wrong’ way that you’ve got in the image above seems to make more sense. We travel from the past to the future, so the arrow should be pointing to newer files. Not sure how that would work with the alphabetical listings though. It’s a bad bit of interface design.
It would probably be much easier to have the arrow be replaced by “then” and “now” or “a” and “z”. Whichever it says comes first in the list. I think that would make a lot more sense, but that’s just me.
hmm….been using osX for about a year now, 9-6:30, 5 days a week. Still hate dang near everything about Finder. Especially lack of views and sorting options compared to windows.
And the thing about dialog boxes not updating after a file was moved in finder, from my experience it’ fast-er than it was before but still not up to windows, especially over a network.
Jason
Yes I have used OSX since day one, 2001 and of course I love it…however, not being able to rename, delete etc from the dialog box is the most insane thing I have ever seen. The amount of time wasted going out of the dialog box, in to the Finder, looking for the file, change the name and then back is crazy.
And before I found out that you could click a file in the dialog box to prefill the saved name, I used to have to retype the whole name. That should be made more obvious.
I wasn’t aware Default Folder fixed some of these problems…will give it a go.
ryan
It looks correct to me. I just had a look in thunderbird.
Upgright triangle = New stuff at top
Upside down triandgle = New stuff at bottom
That makes sense to me. The arrow points to the new stuff.
Andrew
Now wait a minute. You bother to name all your files prefixed with the date, but you actually use the date collumn to sort files? Then why bother putting the date in the title? I assume that you do that so you can sort by name and then see the files listed chronologically? Otherwise aren’t you just wasting characters that you could use more descriptively?
I mean you wouldn’t bother to put the file size in the name, would you? “8Megs_05122005_project.jpg”
Hey Ryan, what’s ‘upright’? Which way up is that? 🙂
I like Joe Clay’s idea. If it’s important enough for people to use, it’s important enough to label properly.
Pio
The triangle should indeed be upside down when displaying newest entries first. The reason? Upside down means descending order, and the more current the date, the “larger” it is. I’m not saying it can’t be confusing, because it IS confusing almost all of the time, but it is the most “correct” way to do it compared with other coloumn types…
I feel your pain. Thunderbird on Windows has the same problem, sharp-tip of triangle at top = earliest date first. It’s exactly the opposite of the convetion used in every single application I’ve used to date, and it’s infuriatingly exasperating to no small degree. Ugh. So glad to know I’m not alone.
p.s. Why does clicking “Forget this information” (in the comments section) wipe out all my info and force me to retype it again? Sigh. Computers.
Because I’m a poor JavaScripter and too lazy to figure out how to fix it. It’s a good point though; that’s easily as glaring a goof as the one I’m complaining about in this point, though in my defense I have only a tiny fraction of the users. Still, noted.
Here’s how much tiny user interface cues can matter: this afternoon, I spent about five minutes scratching my head in front of an Open dialog box in Adobe Photoshop, trying vainly to locate the files I’d saved several months ago to a particular folder. They just weren’t where I expected them to be.
To me, even relating the triangle to dates confuses me. Does thicker mean older dates or newer? Does the pointy part remind me more of the present or past?
I still hate how that you cant rename anything in the dialog boxes, cant move anything, cant delete anything, cant do many things that windows dialog boxes can do. I wish there was some plugin or something that could fix that.
I just found that a shareware app called Default Folder X gives you the ability to rename, remove and delete files and folders from dialog boxes in OSX. Seems to work pretty well.
Yeah, actually I use Default Folder X and, to be fair to Photoshop, it could well be the cause of the improperly displaying sort icon. However, I can’t get by a single day with DFX; it’s an invaluable help in doing just the things you mentioned above.
Haha. Whenever I’m looking for the most recent files, I always “shimmy shake” it by clicking that row header two or three times and looking at the date. Can never remember which is which, especially considering other scenarios like online banking do it the reverse way.
I have to concur… that triangle means nothing to me, and I have to do the shimmy with it, as well.
What I really want is a FINDER that allows me to fix column widths permanently using EMs or ENs… not to mention a preference that would allow me to set all new folders to display in LIST format by default.
I’d bet that it’s Photoshop that’s wrong, especially if you’re using their custom browser. They tried to make it so it’s halfway between OS X and XP, which causes some oddities (for example, on XP the dropbox for location only shows the current drive).
Also, the arrow is 7px square. I’ve done some work on a pinstripe Firefox skin, and that was something I fixed. 🙂
Well for future reference this particular triangle is sort by ascending, and the other is decending. IE this one shows the largest on the top, which should be the last date. However I think the problem isn’t that the icon is wrong, I think it’s that who ever designed the icon for that state has a different take on how the list was sorted.
To me it’s easier to think of this state being correct, why? Well, if you’re sorting in ascending order the list does ascend as you go up. Think about it this way, if you’re sorting in ascending order why does it display in a descending format? That’s about as best as I can explain it, sorry 🙂
Also, I tend to shimmy, because different UI sort differently.
I’ve never figured out that arrow thing. The ‘wrong’ way that you’ve got in the image above seems to make more sense. We travel from the past to the future, so the arrow should be pointing to newer files. Not sure how that would work with the alphabetical listings though. It’s a bad bit of interface design.
It would probably be much easier to have the arrow be replaced by “then” and “now” or “a” and “z”. Whichever it says comes first in the list. I think that would make a lot more sense, but that’s just me.
hmm….been using osX for about a year now, 9-6:30, 5 days a week. Still hate dang near everything about Finder. Especially lack of views and sorting options compared to windows.
And the thing about dialog boxes not updating after a file was moved in finder, from my experience it’ fast-er than it was before but still not up to windows, especially over a network.
Yes I have used OSX since day one, 2001 and of course I love it…however, not being able to rename, delete etc from the dialog box is the most insane thing I have ever seen. The amount of time wasted going out of the dialog box, in to the Finder, looking for the file, change the name and then back is crazy.
And before I found out that you could click a file in the dialog box to prefill the saved name, I used to have to retype the whole name. That should be made more obvious.
I wasn’t aware Default Folder fixed some of these problems…will give it a go.
It looks correct to me. I just had a look in thunderbird.
Upgright triangle = New stuff at top
Upside down triandgle = New stuff at bottom
That makes sense to me. The arrow points to the new stuff.
Now wait a minute. You bother to name all your files prefixed with the date, but you actually use the date collumn to sort files? Then why bother putting the date in the title? I assume that you do that so you can sort by name and then see the files listed chronologically? Otherwise aren’t you just wasting characters that you could use more descriptively?
I mean you wouldn’t bother to put the file size in the name, would you? “8Megs_05122005_project.jpg”
I’d presume he does it for the sake of having a sort of versioning system, since you can’t have files with the same names and different dates.
Hey Ryan, what’s ‘upright’? Which way up is that? 🙂
I like Joe Clay’s idea. If it’s important enough for people to use, it’s important enough to label properly.
The triangle should indeed be upside down when displaying newest entries first. The reason? Upside down means descending order, and the more current the date, the “larger” it is. I’m not saying it can’t be confusing, because it IS confusing almost all of the time, but it is the most “correct” way to do it compared with other coloumn types…
I feel your pain. Thunderbird on Windows has the same problem, sharp-tip of triangle at top = earliest date first. It’s exactly the opposite of the convetion used in every single application I’ve used to date, and it’s infuriatingly exasperating to no small degree. Ugh. So glad to know I’m not alone.
p.s. Why does clicking “Forget this information” (in the comments section) wipe out all my info and force me to retype it again? Sigh. Computers.
Because I’m a poor JavaScripter and too lazy to figure out how to fix it. It’s a good point though; that’s easily as glaring a goof as the one I’m complaining about in this point, though in my defense I have only a tiny fraction of the users. Still, noted.