Shared publicly  - 
 
 
#AndroidDev  

Pin/Progress

In the most recent update to Android Design, we added a section to the Progress & Activity page called "Custom indicators" [1]. The guide describes an example from the various Google Play properties:

"...we wanted the current download state of each item to be visible at all times at the top-level screen. We also needed to indicate progress from one download state to another, because downloading is not instantaneous.

...we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary. The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart."

I think this is quite a clever solution to a fairly common problem (allowing users to choose content to store offline and providing visual feedback about download progress), so I decided to throw together some sample code for it:

http://code.google.com/p/romannurik-code/source/browse/misc/pinprogress

Now, a quick word of caution: consider whether this is really necessary for your app before using it! Ideally, all your content should be available offline, and it should download fast enough that showing progress would be superfluous. That said, if your content make take some time to download and you can't come up with an awesome, automagical smart-offlining scheme, then this may be an appropriate UI element.

Enjoy!

[1] http://developer.android.com/design/building-blocks/progress.html#custom-indicators
101
24
TaeYoung Oh's profile photoJACO V B's profile photoIvan Tarasovych's profile photoLuis Fernandes's profile photo
39 comments
 
The plain squares looks too much like that horrible metro ui.
 
+Techni Myoko they are there as mockup backgrounds, that is not what the post is talking about.
 
Yeah, they're placeholders for your actual content..
 
Yeah, I jumped to conclusions. But they still use a similar style in the store.
 
Although the Play Store UI is pretty hideous.
 
+David Metcalfe true. I'm not as stupid as Apple or their fans to accuse Google of copying something so obvious and having existed for ages
But it is similar enough for me to dislike it.
 
+Techni Myoko No, but that's the point. You can't copy it. It's a basic design methodology. That's like attacking Apple or Google for utilizing the golden ratio, or asymmetry.

Also: I'd avoid generalizing Apple users like that. It tends to fuel the existing war with Android users, and we don't need any more drama!
 
Great idea, however the execution is lacking. Maybe try something like in the corner of the icon is a triangle and in there is the pin. The circle just doesn't seem to work with the rest of the UI. 

#mytwocents  
 
+David Metcalfe I was agreeing with you.

+Michael Barber agreed. If they're going to go with squares, they should have a line at the bottom of it act as the progress bar. I'm not sure what the pin icon is supposed to say.
 
+Techni Myoko The pins can be found in the Google Books app (possibly elsewhere, too). Tapping the pin will cache it offline. The blue color will fill the circle clockwise in relation to download progress.
 
+David Metcalfe I see your point about the pins, if you are reusing a function that is elsewhere in android then you're probably wanting reuse this feature. 

I wouldn't want to redesign something just to look different when your users are already familiar with it's look and function elsewhere.

Maybe we need to see it in a different light, not just with plain backgrounds and colours.
 
+David Metcalfe I'd have used the standard floppy disc icon for that. Show a green checkmark when it is saved. A red X when it's not
I meant they should stick with lines/squares if they're going with that, don't mix it with circles.
 
+Michael Barber I'd recommend trying it out in the Google Books app on Android. Plenty of free books to grab and see it in action.

+Techni Myoko Floppy disks are now an age divided thing. Many youths don't even know what they are. From a UI and UX standpoint, the pins tend to work better here.

If you're really interested in this stuff, check out Skeuomorphic design. The pinning functionality existed in browsers like Safari/Firefox before Android. It was well received, too.

It's important to keep in mind that while our intentions are good, we enthusiasts are often times not the target market.
 
Floppy disks are universal, given most apps use them to represent saving (ie: MS word) The pins do not tell me "this is saving". Nor can I tell what the difference between the angled or upright ones mean.
 
+David Metcalfe
 Aside from the fact that those are tacks, or thumb-tacks, and not pins.

At least the floppy represented a storage medium.  Yes, it was outdated, and yes, in need of updating, but it was a recognizable and universal icon.  These tacks represent something that has nothing to do with saving or storing data.  You might as well use a duck, for all the symbolic clarity offered by a tack.

The over-arching problem is that (as mentioned) for quite a few people, the floppy has grown nearly as obscure as a duck would be.  However replacing one nonsensical glyph with another only confuses the issue.

If you want to replace the floppy, then it must be replaced by something that is more intuitive, rather than by something that is equally unintuitive.  The only place that the tack makes sense is that it is a technology that has existed in one form or another for a few thousands of years, and is unlikely to change markedly anytime before the end of man; of course the same can be said for a duck.

Most "spinning-platter" forms of storage are on their way out, and the many things that they are being replaced with will probably be just as transitory.  So, what else has been around for a few thousand years, and might actually be associated with storage.  Off the top of my head, crates, buckets and boxes come to mind, and I'm not even a UI guy.

(edit to remove extra character)
 
I'm able to understand the pin just fine. If the pin is pointed down then it's pinned "DOWN" to your device. The idea is that your stuff, your data, is stored floating in the cloud and to have it offline you have to pin it down to your device. Honestly not a hard concept to grasp.
 
+Steven Mattera an easy concept to grasp perhaps, but not an intuitive one.  Further, one that still has nothing to do with storage.  You could use a glue bottle, or a paperweight with the exact same argument, and I could make the argument that ducks are fat creatures, and that storage of energy via fat is a universal and ancient concept. Just as symbolically strong as the tack, and equally unintuitive.

Another great possibility would be the amphora.  Out-of date for nearly 2000 years, and still easily recognisable (not square) as a mode of storage by anyone with any kind of basic education.  It also can be rendered in line, and then filled proportional to the file, rather than a ambiguously rotating tack.
 
+Steven Mattera , a floppy disc implies "Save", a cloud implies transience (and more obvious things as Cloud® 2.oh) and a pin implies "stuck" to me. How do you feel that a pin means saved, not on a remote server but locally? What real-world or established technological visual language does this originate from? I think of Pinterest and with that it means "post a URL to an image on another server".
 
+Alastair Gilfillan Great points.
Aside from the "pin/tack" thing (perhaps a Britishism?) the "Pin" in Pinterest is a great use of the symbol.  Pinterest is a virtual cork-board, and a tack is the standard means of sticking things to such.  Interestingly, the only other place I could see the tack being a good icon would be "Set as desktop image" which is a bit obscure to need its own icon.
Also, why would "Down" be done?  If you do tack something to a wall, the tack is horizontal.  To hold something down, tape or a paper-weight is more common.  I couldn't tack something "down" to my desk without pre-drilling holes.  The rotation is made even more confusing in that there appear to be pie-charts behind the tacks that look like THEY are indicating a % done, and yet they appear unrelated to tack rotation.
Seriously, you are attempting to replace a well-founded and accepted (if slightly dated) icon with one that has no symbolic foundation, and an ambiguous if not downright conflicting meaning.
 
FWIW, floppy disk 'save' represents an action. The pin represents both an action 'pin' and a state 'pinned'.
 
The floppy disk never represented the state 'saved' as far as I know.
 
The fact that it appeared in the place you had saved it indicated that it was saved.  Tacking a "saved" icon on-top of the file icon would be incredibly redundant.
If "Pinned" simply means "Saved Locally" then the tack icon is equally redundant (doubly so, as we already have an icon for the act of saving)
 
+Roman Nurik
What would make sense would be to stick with standard symbols.
When you save something, the file icon is simply there.  If you create a short-cut, than the standard icon has the shortcut glyph to let you know that it is not the actual file.  Since an item saved to the cloud represents a shortcut to a remote server (effectively, although the particulars are different) you do the same thing, replacing the "Shortcut" glyph  with a "Cloud" glyph. 
You don't need a glyph for "Saved locally" as that is the default.  You only need an icon when that default is deviated from.
 
+Alastair Gilfillan
A USB drive implies "Save", A cloud implies "Rain" (seriously my smartphone tells me when to leave the pool).  A cloud does not mean cloud services to anyone outside of the software world.

The truth is most of the existing (floppy disk, magnifying glass) iconic language is outdated, because these objects do not appear in the real world often anymore.  New visual language has to be created.  When I think of permanence I think of bricks or a house.  When I think of transience I think of girlfriends.  But neither of these are easily translated into icons.

It is a shame that the pin has been attributed to Pinterest.  Otherwise it is a pretty good new visual model that does not use much real estate.
 
+Roman Nurik 
The only real flaw I found with the new system on my Nexus 7 was it was not clear I had downloaded the movie 'transiently'.  When I went to watch it again.....it started downloading again.  Perhaps stitching on the edges of the block would indicate more permanence?  Also it is not clear HOW I download these things permanently.  To summarize, I like the new model, but it lacks clarity.
 
+Roman Nurik
Can we assume then that when you say "Pinned" you are simply, redundantly, attempting to coin a new term for "Saved Locally"?
 
+Alastair Gilfillan +John VanRoekel  I don't really get why this is a point of such contention. You understand the floppy disk symbol. I do too; I'm old enough to know its function, origin, and have used the softwares that represented save with a floppy disk icon. But you're arguing for the use of a save symbol with a company that is a pioneer of cloud technology– one of the virtues of which are – explicitly – that you don't need to worry about saving anymore. That's why there's no save button in Google Drive or the other related products. It's an old idea from a time where software and operating systems were less friendly, and as time goes on will become even less relevant. Surely you know all this.

Again, I get it. I grew up playing in Autocad on 5.1" floppy disks. Hell, +John VanRoekel, your "About" page has binary in it. We are of a different time and world than the masses that this relates to. Sure it may not be our favorite, most logical way to represent the action it performs, but it's something I happily embrace if it means greater usability for less tech savvy people like my family. Let's also not forget that Google isn't the only company that has done this. Pinning up something in your office or home on a cork board was never thought of as saving when using that analogue, and similarly it shouldn't be seen as doing so here. You're pinning the item up on a virtual board so as to keep it up front and available for later, otherwise it still exists in the cloud alongside the mess of other files (or papers on your digital desk, if you prefer).

Don't forget in my previous comments that other companies have used this. Companies that have employees who understand design and human psychology far better than any of us here should claim to.

Mozilla's Firefox: http://support.mozilla.org/en-US/kb/app-tabs-keep-favorite-websites-open

Apple's Safari: http://support.apple.com/kb/PH5059?viewlocale=en_US

Microsoft's Windows 7: http://windows.microsoft.com/en-US/windows7/Pin-a-program-to-the-taskbar

These all reference "pinning" for the desired function. Search for the word "pin" with many current systems these days and you'll see this idea is not new, and not contained to one company pushing their bizarre idea of caching.

It's like Steve Jobs said in that Gawker argument:
"As for us, we're just doing what we can to try and make (and preserve) the user experience we envision. You can disagree with us, but our motives are pure.

By the way, what have you done that's so great? Do you create anything, or just criticize others work and belittle their motivations?"

There are bigger battles to fight out there, and as a designer, I'm putting my energies towards the ones that matter, and I can tell you they don't include this.

Hope this helps, and take care!
 
+Roman Nurik +1ing David Metcalfe does not answer the question.

+David Metcalfe
Methinks the kettle calls the pot black:
https://plus.google.com/u/0/102135785477686748429/posts "Yeesh. I've been out of the photography game so long, I'd forgotten how many deluded people think they take good photos. It feels like I could scroll for days on #MacroMonday  and find nothing of quality."

Talk about tearing down.  As for what I have done, probably as much as you, perhaps more, perhaps less, none of which has to do with this issue.

As for your non-troll points, they are well taken, as an argument that this is an emerging way of referring to things.  But they do not address if this is a "good" way of doing things.  Make your case (or better, Roman could make it) as to why we need to shift from an assumption of local save versus non-local save in the iconography, and why we need an entirely new term to describe a concept that is as old as computing.
 
+David Metcalfe 
The use as discribed in your links actually makes sense.

In all three links, "Pinning" is effectivly used to mean "attaching a shortcut" As opposed to "Saving locally" so they are actually a good argument that this is an especialy bad use of the icon, as it is not only redundent , but also out of step with curent (emerging) use of the term.
 
+John VanRoekel Woah woah, relax there. Everything pointed out in the previous comment concerning your persons was neutral or complimentary, not and attack. I'm sorry you felt it to be otherwise.

Now, with respect to any relevant burden of proof re the topic, I feel I've covered my bases sufficiently, and to entertain the new request would be diverging significantly enough from the original topic to warrant its own post. That said, please feel free to invite me along for this if you create one, otherwise I'll continue to see myself out (and mute the post as needed).
 
+David Metcalfe ; yes, everyone understands the floppy disc icon as the telephone receiver used on our +Android phones. I agree about +Google Enterprise being a pioneer of web services but the fact that we're discussing this shows we do need to worry about saving. I had to download flight confirmations because I wouldn't have internet access until on the other side of the world. A pin implying attachment is not as simple as the global floppy disc or, pressing on with the web services, his about a ↓ for download? A pin is lower-tech than a floppy disc and ambiguous as visual language in computing.

All of your examples are of attaching something. That's a bit of a stretch if we're now to "attach"/"pin" things from the internet to our storage devices...
 
+David Metcalfe I just realized that I missed a quotation mark in your post.  I had thought that you were addressing me with the phrase

"By the way, what have you done that's so great? Do you create anything, or just criticize others work and belittle their motivations?"

which I saw as aggressive and rude, so I responded in kind.  On re-reading I realize that the offending text was was an extension of the quote you had presented, and was not directed towards myself.

I still disagree with you on a lot of points, but my reply was out of line in it's tone and I apologize for that.
 
The pin idea is cool and original, if we stuck with old concepts like floppy disk icon, we will never make something new imo
 
+Emmanuel Vodor the problem is that it is not original.  As has been pointed out, the pin is in common usage to denote attaching a link.  Android is now going to use it to denote a local save.  That is misleading and ambiguous at best, and downright dishonest at worst. 

I am fully in favor of pushing technology forward, and I do agree that the floppy is outdated enough to be starting to loose some meaning.  However.  It is universally understood (even if it is not intuitively understood) by a large chunk of the population, so the only correct way to replace it would be to do so with something more intuitive.

Further, google should not go it alone on something like this.  Replacing it piecemeal will just make the process more confusing; and replacing it with an icon that is growing to be commonly understood as meaning a totally different thing is just being a poor corporate citizen. 
 
Real time audio (low latency) is still a big feature that android is hardly lacking, compare to the ios for example. 
Add a comment...