Icons preview readability

[GoogleCodeExporter]

Hello all,

I am thinking in a new way of previewing the icons. The actual shows 2
problems :
 * We don't always know what the icon means : needs a description
 * Some categories begin to be huge, with all the icons and suggestions

In my mind, we have 3 possibilities for presenting the icons :
1/ "The actual one"
 * No description for icon.
 * All icons in one page.
 * Suggestions.
Example : http://code.google.com/p/google-maps-icons/

2/ "Full descriptions"
 * Description for icon.
 * All icons in one page.
 * No suggestions
Example :
http://code.google.com/p/google-maps-icons/wiki/NewHomeFullDescriptions

3/ "One page for each category"
 * Description for icon.
 * Only the icons for selected category
 * Suggestions
Example :
http://code.google.com/p/google-maps-icons/wiki/NewHomeFullDescriptions but
only one category

Please provide your opinion on this subject :)

Original issue reported on code.google.com by nico.mol...@gmail.com on 26 Aug 2009 at 5:07

[GoogleCodeExporter]

Just a quick thought on this for now, I'll need to think more about it and 
(perhaps)
also come up with more suggestions.  Basically I think we need to look at the
possibility of this project of yours growing very, very big with more than 100 
icons
in a category and I think we need to plan and be ready for that already now 
when the
project is relativity "small".  I like the 1 page/category idea the most, but I 
love
the overview of the front page, maybe you can to both?  A clock on the headline
brings you to the category page?  The suggestions definitely needs to be there 
or
we'll be swamped by double requests.  OK, that's it for now.

Original comment by myBCN...@gmail.com on 26 Aug 2009 at 6:52

• Added labels: Priority-Critical
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Thanks for your feedback.
You actually think like me... I wanted to see if you had different ideas, 
because
what would be good needs lots of work :

4/ "Lots of work"
 * All icons on one page / no suggestions, no description
Example : http://code.google.com/p/google-maps-icons/ but without siggestions
+
 * One page for each category / with suggestions and descriptions

Well, I could start working on it. I just have some difficulties with the wiki 
layout
: what do you think of
http://code.google.com/p/google-maps-icons/wiki/NewHomeFullDescriptions ?
The borders are good ?
The icon needs to be in first are after the description ?
5 columns or less ?

Hope you can help again :)

Original comment by nico.mol...@gmail.com on 27 Aug 2009 at 3:29

[GoogleCodeExporter]

Hey Matthias, I worked on a "Tourism icons" page today :
http://code.google.com/p/google-maps-icons/wiki/TourismIcons

See, I subdivised into sub-categories, and it shows 4 types of previews.

 * Natural marvels (1 - tableless, all on one line)
 * Defensive buildings (2 - tableless, one icon per line)
 * Cult (3 - table, 3 columns, no credit)
 * Agriculture (4 - table, 1 column, credits)

It seems hard to attach a credit for the previews on one line : (1) and (3).

You have the rights to edit this page as you wish :)

Original comment by nico.mol...@gmail.com on 27 Aug 2009 at 7:02

[GoogleCodeExporter]

I added 2 navigations to 
http://code.google.com/p/google-maps-icons/wiki/TourismIcons

 * Sidebar to all icons pages
 * Table of contents for icons sub-categories

Tell me if it's a good idea, because it's not much work to add theses features.

Original comment by nico.mol...@gmail.com on 27 Aug 2009 at 7:21

[GoogleCodeExporter]

The idea of having
 -- an oveview page with all icons without (to much) explanation
  +
 -- separate pages for each category with explanations (and credits)

is a very good one, I like it, too.

Concerning the TourismIcons page, I prefer options 2 or 4, i.e. 1 icon per line

option 3 could also be OK, but one thing I dislike is that it's easy to mix 
which
icon belongs to which explanation: you look at the icon and you do not know 
whether
the explanation is before or after. Of course if you look carefully, then you 
can
"decode" it, but at first glance it is confusing. If we go for option 3, this 
should
be addressed, I think. One way to solve it is to put the icon and the 
explanation in
a surrounding cell, or use special bordering, or something like that.

BR

József

Original comment by jozsefb...@yahoo.com on 28 Aug 2009 at 2:18

[GoogleCodeExporter]

Thanks for your feedback József

I managed to add the 5th wayto present icons :
See "Misc... (5 - table, 5 columns, icon and description together)" in 
[TourismIcons]
page.

Original comment by nico.mol...@gmail.com on 28 Aug 2009 at 4:02

[GoogleCodeExporter]

Nico. I'm all for Nr.5, but with the small changes

1 - Write the name of the icon with a simple line break <BR> after the icon so 
it
ends up below it.
2 - Make the columns with a fixed with, either 5x20% or 4x25%

Could you make a 6th version so I can see how it would look with my suggested 
changes?

Original comment by myBCN...@gmail.com on 29 Aug 2009 at 8:07

[GoogleCodeExporter]

I updated 5/ with a linebreak, but it won't be centered.

I wanted to make a 6/ with centered, linebreaks, but Google Code won't let me 
do it
because of the wiki syntax :(

So in conclusion 5/ is ok but the icons&text won't be centered in the cell. And 
I
don't know if I like it if not centered...

Sorry, but I can't make it better because of the html limitations of Google 
Code :(

Original comment by nico.mol...@gmail.com on 31 Aug 2009 at 2:49

[GoogleCodeExporter]

To bad about the limitations...  Yes, the code is visible on the page...  Can 
you
just try to leave it aligned left? Icon and text aligned Left in each column 
with
fixed column with, I just want to see how it would look?  //Matthias

Original comment by myBCN...@gmail.com on 31 Aug 2009 at 6:35

[GoogleCodeExporter]

The second table of 5/ shows icons+text left aligned.
What do you think?

Original comment by nico.mol...@gmail.com on 31 Aug 2009 at 7:10

[GoogleCodeExporter]

If it's possible to do it on code.google, I would really like some sort of 
tagging
mechanism for the icons and a way to search the tags, so if I'm looking for an 
icon
to use for my job (software engineer) I could search for computer, office, job 
and
see all icons associated with the tags and pick the one that makes the most 
sense for
my map.

Even if everything was on one page and tagged through tables and I could do a 
ctrl+f
it would be very helpful to me.

Original comment by jlca...@gmail.com on 1 Sep 2009 at 4:56

[GoogleCodeExporter]

Thanks jlcasto, good ideas here.

I was thinking in tagging, it is possible, but... the advantages of tagging are 
small.
Google Code lacks features.

I already created a generic tag "icon" for the download list :
http://code.google.com/p/google-maps-icons/downloads/list?q=label:Icon

I could add tags like "computer", "job", but you won't get the image preview 
directly
from the download page. I don't think it's that usefull without image preview, 
and
just the filename. There won't have any tags list or cloud, too...

So I need to manage tags manually and it would be such a pain.
The layout "4 - table, 1 column, credits" may work for tagging manually, and 
CTRL+F
to find what you want.

Not so easy to be hosted on Google Code :)

Original comment by nico.mol...@gmail.com on 1 Sep 2009 at 9:33

[GoogleCodeExporter]

I tried 3 more categories with layout 4/ :
http://code.google.com/p/google-maps-icons/wiki/EducationIcons
http://code.google.com/p/google-maps-icons/wiki/OfficesIcons
http://code.google.com/p/google-maps-icons/wiki/FriendsIcons

with 4 columns : icon, description, tags, credits

I am starting to be confident on this layout. Don't you think too ?

Original comment by nico.mol...@gmail.com on 3 Sep 2009 at 7:59

[GoogleCodeExporter]

Seriously I think this needs more concideration.  I like the 5 version better, 
even 
if it look pretty bad right now.  Iäll code you an example of how I think it 
should 
look and e-mail it to you latr (probably tomorrow).  I think we need to 
concider and 
prepare for a furure where we have more then one icon meaning the same thing.  
My 
general suggestion would look something like this in 3 (or 4 columns).

-------------------------------------------------------------------------------
| Icon1 (Icon2) (Icon3)   | Icon1 (Icon2) (Icon3)   | Icon1 (Icon2) (Icon3)   |
-------------------------------------------------------------------------------
| Description             | Description             | Description             |
-------------------------------------------------------------------------------
| Tags                    | Tags                    | Tags                    |
-------------------------------------------------------------------------------

As an example you can take our Graveyard/Cemetary icons Nico, you had one I 
have 
one, both are good, why not keep both?  I have some new suggestions for 
basketball 
and Football as well...  Why only one icon?

The thing missing in this setup is the Creator names...  Let's just put 
a "Contributions by:" at the bottom of the page.

Do you see what I mean?

Original comment by myBCN...@gmail.com on 3 Sep 2009 at 1:57

[GoogleCodeExporter]

I see what you mean.
I only have problems with the wiki syntax that won't let me do :

If I use the wiki table, I can't :
- change cell width
- center a cell
- change the border width

If I use a custom html table, I can't :
- get a beautiful cell border
- put a linebreak in a cell
- change backgroundcolor

... pretty lame isn't ?

It edited the http://code.google.com/p/google-maps-icons/wiki/TourismIcons 
page, and
came with 5.2/ layout with the tags, and description in bold.
As you see, cell width is not fixed, cell alignment is left, vertical alignment 
is
middle.

Original comment by nico.mol...@gmail.com on 3 Sep 2009 at 2:25

[GoogleCodeExporter]

Ok Matthias, here is a better comparison between the 2 best styles in 
OfficesIcons :
http://code.google.com/p/google-maps-icons/wiki/OfficesIcons

They are both good but I think but "City services" might be the best, afterall.
I like the tags, in small grey typo. And description in black bold.

I would like to specify a fixed width, but that is not possible at all.

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 8:35

[GoogleCodeExporter]

I like! (Borat quote)  Best option is of cause to work with the Wiki syntax, so 
there is no work-around...?  You can't work with % in the cell width? Put a 
transparent picture of 1px hight in the background with the width you want?  
Use 
____________ with the color White etc.?  //Matthias S

Original comment by myBCN...@gmail.com on 4 Sep 2009 at 8:51

[GoogleCodeExporter]

Whoohooh ! Matthias, you rock like hell ! The "white text" trick wins it !
http://code.google.com/p/google-maps-icons/wiki/OfficesIcons

See all the columns are equal. It's just a pure mayhem to read the wiki syntax 
now,
but we achieved our goal quite well !

What do you think ??

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 9:05

[GoogleCodeExporter]

I think it looks absolutely great, but, how does it look without the frame?  I 
actually don't like it very much, I think it litters the clean design...  The 
will 
be LOT'S of frames...

Original comment by myBCN...@gmail.com on 4 Sep 2009 at 10:53

[GoogleCodeExporter]

Cool !

What do you call the frame ? the left navigation ?

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 11:13

[GoogleCodeExporter]

Or maybe you are talking about the grey cell border ?

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 11:17

[GoogleCodeExporter]

Yes, the grey cell border, can you just make it white?

Original comment by myBCN...@gmail.com on 4 Sep 2009 at 12:50

[GoogleCodeExporter]

I cannot make it white, but I tried another html table after the "grey cell 
border"
table.

This new table has much more spaces between the lines, and I like more when it 
has
borders : makes it easier to read description with the above icon.

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 1:10

[GoogleCodeExporter]

I agree, to bad about the limitations...  I like first line one, under the 
header 
City...  This one has some extra spaces in the grey cell.  What do you think?  
It's 
looking really, really good otherwise!

Original comment by myBCN...@gmail.com on 4 Sep 2009 at 2:15

[GoogleCodeExporter]

You mean the white space under the tags of the first line ? 
(like on the attached file)
And you like it more ? It's because of the "--------" white text to fix width :)

So here we go with the grey bordered tables ?

And for the credits, will we put them at the bottom of the page ?

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 2:24

Attachments:

• whitespace.gif

[GoogleCodeExporter]

I couldn't wait your answer and made :

http://code.google.com/p/google-maps-icons/wiki/TourismIcons
http://code.google.com/p/google-maps-icons/wiki/FriendsIcons
http://code.google.com/p/google-maps-icons/wiki/EducationIcons

Hope you like ! (I didn't write good tags for now)

Original comment by nico.mol...@gmail.com on 4 Sep 2009 at 4:46

[GoogleCodeExporter]

Fantastic work Nico!  The pages look great!

Original comment by myBCN...@gmail.com on 8 Sep 2009 at 9:57

[GoogleCodeExporter]

Thanks ! I think we will close this issue :)

Original comment by nico.mol...@gmail.com on 8 Sep 2009 at 9:59

• Changed state: Done