One of the most requested features for the site has been a "shelf view" for the main collection page. As some of you may have already seen, that feature was added today :)

At this point, the view should work pretty well, but as always, let me know if you run into any issues. Here are a few notes about it:

• Well, the main thing is, how does it look!?! I'm not a UI guru by any means and I just sort of stumbled into this design. PLEASE let me know what you think, be it good or bad.
• Really long game titles are going to look nasty right now. I'm going to need to cap the length that can be displayed to make sure everything looks good.
• Not all of the functionality is available on the shelf view just yet. You'll notice that it's missing things like format (i.e. Steam, GOG, physical, etc), # of completions, the progress note icon, etc. Just because these aren't there yet doesn't mean they won't be added, so let me know what you guys would like to see added (even if it isn't in the other view)
• When you click on the view toggle buttons, the view you selected will be saved to your account. This only applies when you toggle them for YOUR collection. I might move this into the Settings dropdown, but I didn't have time today.
• The original "list" view did not gain any new functionality, but I did have to refactor a bit of code to make everything work nicely (and eliminate copy / paste coding). So that being said, let me know if you see anything weird with that view.
• Right now there isn't a way to get to the big "edit" page for a game in your collection. This might be a topic for another thread, but I've long considered that page outdated for the direction the site has been going in. I guess this is sort of a test to see how many users rely on that page, so let me know if you want that link back!
• The default view for new users or if you look at another user's collection is the old list view. If people prefer the shelf view, I could easily change the default, so let me know.

NICE. Thanks for this.

I would definitely add in format to the view. It would make things easier (at least for me) since I don't like having duplicate versions of games I have in more than one format in my library, and right now, that's somewhat unavoidable with games I have on both Steam and GoG given that they both have importers.

One thing I personally wouldn't worry about is having an actual shelf graphic like GoG uses. It looks fine without it to me. I just like seeing all the box art, especially since most of my collection these days, I've never bought in a physical form.

I actually ran into the missing format issue last night :P I found some random PC games in a box and wanted to see if they were in my collection, but I couldn't tell what format they were on, so I had to switch to the old view. I went ahead and added the format, along with some tooltips for the bottom row of buttons, and just pushed those live. I'm still tinkering with the styles / size / colors of things, so I'm not sure how the grayed out text for the format works now. I think the orange is making other light colors less impactful, so let me know if anything is hard to read. I considered bolding the platform and leaving the format in normal font (so it'd match the progress status).

Also, let me know what your thoughts are on the tooltips that I just added (now playing, backlogged, etc). I can easily add some to the other row of buttons if they look good and make sense to have.

Wow, that's some fast response time. :)

One big benefit I'm noticing is that there are some games where I had compilations, entered the games in individually, and then said games were recognized as compilations and auto-added later. Those stick right out with this system so I can delete duplicates.

So this is a thing now. Neat!

I love the functionality, but I'm not a fan of the look right now to be quite honest.
- Bright orange is a really jarring colour compared to most of the rest of the site. I know you used that same orange in the logo and the game stats pages (maybe elsewhere, I don't recall,) but there it was kept to a minimum, so it worked better in those instances. Personally, I feel it's too much here. Definitely impacts on readability to some degree.
- Context popups. The bottom row have them, but the top row does not. Sure, a big red x is pretty self-explanatory, but there should still be a popup to avoid as much confusion as possible.
- Also regarding the buttons, they could benefit from having better spacing/alignment. It might be a browser specific problem (I use Chrome), but you can see there's an inconsistency with the gaps between some buttons and the alignment of some of the icons.

Actually, I made a quick mock up (just a .png) if you're interested moho_00 of a potential alternate layout for buttons/colours. Let me know if you want to take a look and how I should send it your way.

I'm going to guess you're working on the site right now, because whatever just changed completely exploded shelf view. All of the entries are piling up on top of one another in an attempt to form some kind of gaming singularity.

edit: Disregard, back to normal.

I was a little concerned about the orange color :P I took it straight from the game stats page since I was focused mainly on getting the layout to work properly, so I'm certainly open to tweaks / suggestions on it. I can add the tooltips to the top row of buttons, that won't be a problem.

I'm very interested to see your mockup, please send it to info@completionator.com

That's weird about the entries piling up on one another. I noticed some of that as I was tinkering with the CSS during development, but I would not expect it to happen at this point. Let me know if it pops up again, though it might be tough to recreate if it's sporadic.

Mockups fired off for your perusal. Use them as inspiration however you wish.

Hopefully the images were included properly, I find gmail can be a bit of a flake sometimes.

I received the mockups and I thought they looked really good, so thanks! In fact, it motivated me to go ahead and get started and I just pushed out the latest updates. I think this design looks MUCH cleaner than the one I had before. It's not 100% exactly like your mockups, but I think it's pretty close. I opted to do certain things a different way to make the coding easier for me (since it has to work with the other view for now). Anyways, it's Saturday night and I'm way behind on my backlog, so unless any bugs pop up, I'm probably done tweaking for the weekend :P Here are a few notes to keep in mind:

• I'd like for the box art to align vertically, but this might be a bit of a pain, so I haven't done anything with it yet
• I opted to show the rating stars even for games that don't have a rating because the design was giving me fits when trying to resize dynamically
• Likewise, the game name is capped at two lines, so shorter names show a little more whitespace and super long names (there are about 30 in the nearly 10,000 games on the site) will actually overlap the rating stars. I'll probably cap those super long names at some point so they at least don't wrap.
• I think I'm going to put a tag icon in the bottom of the left-side button menu. This icon will color in if you have at least one tag on a game, otherwise it's grayed out (similar to the toggle buttons). It will have a tooltip that displays the tags and you'll be able to click on it to get the Edit Tags modal.
• I think I'm going to put the progress notes icon next to the progress status text and it'll function exactly the way it does on the other view
• There's still some tweaking for margins, padding, etc. I know the buttons aren't quite lined up properly, but hopefully it's minor enough to not annoy anyone for right now :P

As always, let me know if you guys have anymore feedback or run into any issues with it. And once again, thanks @dhobo for taking the time to put together those mockups, they helped a lot!

No problem, glad I was able to help out. I wasn't sure how much of the design would be doable with coding restrictions and all that (I just did everything with photoshop) but it looks like you got about 90% there, which is impressive!

I still find it reminds me of NES cartridges with the icons on either side of the boxart, haha.

Speaking of backlogs, I'm off to work on mine as well!

I like making all the "boxes" the same size by adding in borders to the sides or bottom if necessary. I'd recommend the empty space be either black or white instead of grey though.

Now that this feature has been out in the wild for a month or so, does anyone have any follow-up feedback on it? I'm still interested in display tags directly on the page since I thought that was a handy feature of the list view, but I need to find a good spot for them.

I've been swapping between both shelf mode and list mode for a while now since it was added the problem I've run into is that list view remains my "go to" view mode for general browsing because it's more aesthetically pleasing than shelf view.

Shelf view has so much going on at once that it feels extremely cluttered and distracting. It is mentally fatiguing using that mode for too long.

It's all about presentation of visual information and how much of it there is:

In list view I see 6.5 games at a time on my screen. Each game has:
- 4 buttons on the left
- box art
- view stats button
- title + edition + collection
- edit tags button & zero or more tags
- platform + format + provider
- date added
- approx value
- ownership status
- completion status
- # of completions
- 4 more buttons
- notes button

For a grand total of anywhere from a minimum of 19 "things" per entry, upwards of 25+ depending on if you have your editions, pricing, tags and whatnot. A low average of 20 "things" per game entry gives 120ish "things" on my screen at a time in List view and it is fairly well spaced out and has a lot of room to breathe.

With shelf view on the other hand I see 18 full games at a time on my screen + the top/bottom 20% of another 6 entries.

These entries have everything from the list view, minus the date added, ownership status and any custom tags. At 18 "things" per game, the approximate number of "things" per page is 350, which is 3x the visual information from list view and jam packed together with little spacing. This is problematic and will only become much worse if tags are also displayed.

As for ideas on how this could be improved, I was thinking about how other services have worked with library views:

Steam's client gives you three view options (ignoring Big Picture Mode,) where you have:
- Detailed info view that has your game information, screenshots, categories, achievements, a ton of links to various resources, workshop, time played, last played, etc...
- Half-way view which removes a lot of the extra stuff, boiling it down to an icon, installation status, rating, and when you last played.
- Lastly, the grid view which has nothing but game art everywhere. Boiled down to the barest minimum. However, you can mouse over to get access to your detailed view or to fire up the game.

Aesthetically, their grid view looks decent because it's minimalistic, but lacking in functionality so they piggyback on their detailed view with a simple click.

gog.com has their two layouts

List: Graphic, Title, Ratings, Platforms.
Grid: Graphic + Title

Both views are very clean and kept to a minimum, only presenting additional information when you actually click on one of the entries, at which point you can get to work doing what you need to do.

The key here is that in both services their layouts keep a lot of the information hidden until requested by the user and I believe that Completionator's shelf view could be improved by implementing a similar concept. The framework is already in place with the quick edit modal. (which, by the way, I'd love to see expanded so that you could do all your editing from, including tags, lists, notes, etc.. which all have their own separate modals right now. Maybe using tabs or something?)

Might be I'm overly critical of the shelf view because I had some input on the design and I am never happy with anything I do or create. Maybe it's just a matter of adding more space between entries to give it more breathing room. Maybe I'm just an old curmudgeon who gets easily confused when over stimulated. Either way, this wall of text has been brought to you by the number 4 and the letters A and M, which means it's time for me to go pass out. :P

Woohoo, I finally have time to reply to your post! I think your main point about there being too much going on with the shelf view is dead-on. Although I use it almost exclusively at this point, I do sometimes have to double-check to ensure I'm clicking the buttons for the right game, which is a problem. When I originally started thinking about this feature, I wanted to do a hover menu instead of just always showing the buttons. But as I'm sure you guys have noticed, I much prefer to get the bare minimum out there first and tweak it from there :P The bare minimum was the very orange original design that you provided some feedback on and got us to the point we're at now. I think reducing the buttons on each side of every game and only showing them for the one game you're hovered over would help a lot.

Your point about the quick edit feature is also a very good good one. Again, when I first built the site so many years ago, the quick edit feature didn't even exist and I figured we would just click on a game and go to the details page and edit from there. As you can imagine, that became very cumbersome and quick edit was one of the first enhancements. As time wore on, I found myself never even going to the details page and I'm still interested in just killing that page altogether (I think I posted about that earlier in this thread). So beefing up the quick edit modal to include tags, lists, etc would be a very good thing, I think. It can be kinda the one stop shop for everything about a game in your collection. And it doesn't just have to be editable stuff either, I could show your completions for the game, the release date, developer / publisher, community stats like average completion time, etc. I still like the idea of a hover menu for quick info and quick toggle features though.

So I guess now is a good time to throw out some more stuff on the Collection page :) I'm sure some of you are aware of this, but one of the main reasons I built the site was because I felt no site really catered to both gamers and collectors at the same time. I've tried to balance the site between the two since I'm both myself. However, I think I could take this a step further by providing different "views", like one for a gamer and one for a collector. (NOTE: These "views" are different than the list / shelf views, so I'm going to start referring to those as "layouts" for now.) So anyways, let's assume you're using the list layout, which is essentially just a grid / table of data. As a gamer, you probably care about things like progress status, # of completions, now playing / backlogged flags, etc. As a collector, you're probably more interested in things like edition, estimated value, condition / components you own (which are currently not surfaced in the table), etc. Some things are probably applicable to both like platform, digital / physical, strategy guide, tags, etc. The idea with views would be that the columns would change based on your selection, so you would see the information most relevant to you. Of course, you could just toggle between the two at anytime, so you're never stuck with one or the other. Things get a little messy with the shelf layout since I have no choice but to just stack the data elements on top of one another, which can result in some very tall rows, but maybe that's okay?

I've been thinking about these views for a while now and independent of that, I've considered building a customizable view that let's YOU choose what columns you want. I would provide a set list of columns (i.e. pretty much all data elements + aggregates / metrics) and you could include / exclude them as you see fit, plus re-order them. Again, things get messy with the shelf layout, but I'd just stack them again and that should work, I suppose. My thought here is if I build the customizable view thing, I'd just provide the gamer and collector views as defaults or something and you could modify them as you see fit or add new ones. It would work similar to lists in that they'd be totally customizable since you know, it's your collection :) This would be a pretty significant amount of work, but I think it'd be a very unique piece of functionality and quite powerful.

Okay, now I'm going to throw ANOTHER wrench into things hehe. If you've ever used the site on a mobile / tablet device, you've probably noticed it doesn't work that well. Most of the screens are functional, but there's definitely some layout issues and there are certain controls that just don't work. I'll spare you guys the details (unless you really want to hear them haha), but basically it boils down to this thing being in development hell for so long and I didn't properly set things up. Now the controls that don't work are (as far as I can tell) a result of the version of Bootstrap I'm using. So I need to upgrade that, which given how many changes there are from the one I'm on to the latest version, I will need to completely overhaul EVERY page on the site. This is good because it allows me to properly set things up for mobile and tablet, but bad because it's going to be very time-consuming. It's also good though because if there are any layout / style things you guys want to suggest, now would be a great time to do that :) I do plan to choose a new theme for the site, so it will look a little different, especially in colors and fonts. It won't be drastically different (I don't think...), but it will be different (and hopefully better).

At this point, I'm trying to prioritize everything since I've got a lot feedback queued up from you guys (which is good!). The longer I wait for the site upgrade, the harder (and more time-consuming) it will be, but that means no updates for a while :P

Only downside I can think of straight off the bat with the notion of a hover based interface is that if you're serious about a mobile version, hover will be terrible for those users.

Ah, I forgot to mention that! For mobile and tablet, it would have to be a click instead of hover.

I'm not terribly familiar with bootstrap or what it's limitations are, but have you considered having the box art display normally, with maybe just the name of the game underneath it. Then on click/hover, the box art would reveal the "backside" which would contain the more desirable easy access info, like say, platform, digital/physical, rating, tags, value, etc...

For the name tag beneath, you could turn it into a drop-down menu with all your various options like Edit, Statistics, Remove, and so on.

Would keep the presentation pretty minimalistic while maintaining all the functionality.

I could whip up a quick image showing what I mean if I'm explaining it too poorly here.

I think I get where you're going with that and it makes sense to me. I think it would help with keeping some of the info hidden until it's requested, which is exactly what we're going for. I should be able to some "flipping" animation fairly easily with jQuery. I went ahead and purchased the new theme and I'm tinkering with it right now. I'll probably just focus on converting the pages as-is for now and then wrap back around to cleaning up the shelf view.

Do you think having fully customizable views is overkill at this stage or is it something I should keep it on my radar for the coming months?

Fully customized views sound like they would be pretty awesome, but I think it sounds more like a "down the road" feature for sure.