Forum:HO Table design

Ok I decided to make this topic open for discussion here. At the moment we have two different styles for Hidden Object Tables, You can see Version 1 here, and Version 2 here(of course instead of numbers the names). I would suggest to have all tables in Version 2 although it would be more work if Zynga will add more items to a Scene. But I really much hope they won't do that. Please let me know your opinions. Luna 08:44, June 3, 2012 (UTC)

Poll
Which style should we use? All Version 1 All Version 2 Normal Scenes with Version 1 and Find the difference Scenes with Version 2 I suggest a totally different style (please add below)

New Ideas
I copied Luna's two versions below as mockups. They're not perfect, but they show how a real object list might work. Words are wider than numbers, making a ten-column table (as was done for the wedding gifts scene) too wide, so I also included a five-column table to see how well that worked. The five-wide table also has part of the table with the label above the object and part of the table with the label below the object. Five columns turns out to be conservative; six (or possibly even seven) columns might be better.

Another possibility would be to reverse the name and icon fields, to make it more like other lists, which typically have the icon on the left. That's below as version three. It's not worth changing to this version on its own behest, since it would be an enormous amount of work for small gain, but it's useful as an intermediate towards other designs.

Version four is a mixed design. The icon and name are in a single cell and the grid is four columns wide. It seems to be to be the most understandable, but it uses more vertical space than the other grid designs. It is easy to edit, however, if new elements are added.

(One passing point: "Tyre Swing" is "Tire swing" when I run the game. They sort into different places in this table. And what would be done about alphabetizing in other languages?)

All of the grid formats have the problem that the rows can vary dramatically in height, from very small to quite large. Version four tries to finesse this issue by enforcing a minimum row height of 150px. This value may be a shade high, but 100px seems too small to me. If this format seems worth exploring further, it would be worth while to try some other values, not only with this table, but with some other tables as well.

I vote for number four. Greg Noel 03:20, June 4, 2012 (UTC)

More New Ideas
Thank you so much for your post Greg, this is very interesting, because I never thought about the problem that it wouldn't be sortable in other languages anymore. Without this problem I like the last version best I copied it and changed it a bit with the possibility to have the text above or under the icon but in the same cell. But I'm still not very satisfied with it. Row 2 looks weird, row 2 looks ok so far but I really wish the cellheight would have an affect on the image height so it wouldn't be neccessary anymore to edit the size of e.g. Blue Flower to make it fit.Luna 15:40, June 4, 2012 (UTC)

Icon Sizing
Whichever table type is chosen I think it is important to implement a standard or maximum icon size for use within the object tables, I know that the width is usually reduced to 40px which is fine for the majority of objects icons BUT as Luna touched on above, the height is not currently restricted and this does cause visual issues within tables when it comes to tall and thin objects.

Suggested Solution

It is possible to restrict both the height and width of images on the wiki whilst still keeping the correct ratio by defining both the width & height (in pixels) in the source code instead of just the currently used width restriction. For example if the concensus chose the maximum dimensions to be say 50 high by 40 wide this would be done by adding "50x40px" to the image code.

End result...

 Jester (Admin)    Message Me   edits made  Contributions  23:11, 4/6/2012

How come it works without changing the ratio? That's wonderful and really easy to remember for future edits! That's a great solution for that problem. Although I think we should use 50x50px or icons like e.g. the flower are really hard to see, but maybe this is also a thing to play around whenever we decided the future table style. Above an example with 50x50 Luna 17:50, June 5, 2012 (UTC)

Sorry for not getting back to this topic quickly; family matters dragged me away.

@Luna, I thought about putting the labels below, but didn't have the time to do it before I was dragged away. I think it looks better with the labels below.

@Jester, I thought about placing a maximum height on the icon, but I assumed that it was like the equivalent HTML: it forced the width and height to be whatever was specified, so that vertical objects would be wide and horizontal objects would be tall.

@both, I looked at the generated HTML and found out that the attributes on the image are adjusted to maintain the correct aspect ratio. I'm impressed; somebody thought about the implications.

Since the text is even wider, I made the icons 60x60 and added the name (using the same technique used by Luna):

Final Version? V5.0
There may be a bit too much leading between the icon and the name, but I liked that sample enough that I mocked up the whole table in that style:

I'm unhappy about how well some of the objects show up against the background, and if I had more time, I'd experiment with changing the background and text colors, but I like it enough that I'm changing my vote to this style. Greg Noel 21:02, June 5, 2012 (UTC)

I've changed my vote to this version also, it's a great improvement. ;o)

 Jester  (Admin)    Message Me   edits made   Contributions  00:50, 6/6/2012

One last try? V6.0
OK, I couldn't leave it alone. The leading between the icon and the name just seemed too much. I finally came up with this. I think it's a bit better, and it conserves even more vertical space, but the wikitext is more complicated. Let me know what you think.

I'll be happy either with the one above or the one below. Greg Noel 18:42, June 6, 2012 (UTC)

A variation of "one last try" V6.1
I like the version 6.0 and hats off to you Greg and of course equally to Luna for 'planting the seed' in the first place.

However I have my reservations about the "top border" on the text cell. So I experimented to see what it would look like without, but in the end decided to compromise with a dark grey line instead.

I also wanted to a little bit of leading between the icon and text (but not as much as before) so I made the icon cell dimensions a constant 66x66px that way there would always be the appearance of a 3px (min) space between the 60x60px icons and the text and the borders of the table. This is more noticeable with the birdhouse in the below example compared with V6.0.

Oh and I also corrected the icon "vertical-align" to "middle" and not "center". ;o)

 Jester  (Admin)    Message Me   edits made   Contributions  15:23, 7/6/2012

Yet another variation (V6.2)
@Jester, thanks for the fix. I always get those mixed up.

The height of 100% is needed to force the contents of the cell to be maximum height (insert boring discussion of the HTML model here); note that without it, the name is expanding in some of your examples. I got the same effect by making the padding 3px.

I have reservations about the separator between the icon and name as well. I didn't find the black bar compelling, and I'm afraid I don't find the grey bar any better. I experimented with putting some padding on the top of the name, but that didn't seem to work, either. I finally increased the padding on the bottom of the icon by 6px (to a total of 9px); that seems better to me, but I'm not a graphical designer, so there's probably room for improvement.

I also made the table full-width with evenly-sized columns. What do you think?

Is it time to try another round of voting? I vote for this style for the regular scenes and Luna's style (i.e., ten-up) for the find-the-difference scenes.

Greg Noel 02:10, June 8, 2012 (UTC)

I changes my voting now too, I very much like the last version and I think it should be used for the FTD Scenes too. I think it's best if all Scenes use the same table style. I also agree with Greg that some icons are hard to see against the grey background but I think this will always happen with some images, but maybe it would still be good to change the background so it at least differs from the background you get after clicking on the image. Maybe something gold/brownish I think that fits to the game itself very good. (Although I just looked into the game and they use more blue and sometimes silver borders, but somehow I still associate gold with the game *lol*)Luna 19:09, June 8, 2012 (UTC)

Yep I say, lets roll with it ;o)

Before we experiment too much with table background colours I had contemplated a brighter fresher more modern look of the the entire site theme, this is despite my preference of light text on a dark background but that is due to my AutoCAD background as it puts less strain on the eye when working for long periods in front of the screen. I did play around with some lighter shades a while back but couldn't decide what was best this can be open for a whole new discussion in the future as it would also involve re-writing the info-boxes and homepage because if I remember correctly, those don't currently follow the rule of the theme.

 Jester  (Admin)    Message Me   edits made   Contributions  00:46, 9/6/2012

OK, done, we'll go with this style for the regular scenes for sure. I'm not sure which scenes are considered stable (i.e., all the objects have names and you're confident that all the objects have been found), but if you have a list of them somewhere, I'll start converting them. I know that some scenes are incomplete or incorrect, but I haven't been keeping track of the ones I've encountered that needed to be fixed. Greg Noel 02:10, June 9, 2012 (UTC)

Oh Greg it would be Great if you could start to convert them! I keep track of all Scene pages and can tell you which should be complete so far: The ones that are not started at all are taken care by Spicie at the moment (She's working on egyptian mask right now) and I will take care to teach her how to use the new style for future scenes. Those scenes who are incomplete I will take care for myself. Luna 07:20, June 9, 2012 (UTC)
 * All from the Manor tab except the egyptian mask
 * All Kiplings Tiger Scenes
 * All Ground Scenes
 * All FastFind Scenes
 * All Silver Teapot Scenes
 * All Lost Harp Scenes

I'm not sure all of them are complete. For example, I remember the Voodoo shop had a number of missing items (and the annotated scene image was dead wrong about several of the items that were listed). I wasn't keeping track initially (and when I did, I put the missing items in the appropriate table), so I don't even remember what was missing from which scenes.

I'll tell you what: Create a category for unconverted scenes and put all of those scenes in it. It's easy to do; adding a category is a button at the bottom of the page. As I convert them, I'll remove the category (I assume there's a way to do that). That will mean that the list will always be kept up-to-date.

For new pages, just put the object names in a one-column table. Doesn't even have to be sorted; I have scripts that build the new format, and they sort the list before generating anything. All I need is something that's simple to extract. It could even be a list (that is, a line beginning with a star); I think lists can be edited without needing to work on the wikitext source, which would make it easier for a unsophisticated user to help.

Greg Noel 08:13, June 9, 2012 (UTC)