I think the current Rebrickable looks pretty nice as far as websites go, but to me it feels like it has a bunch of rough edges and weird things. It's been on my mind for a while now, and I decided to gather my thoughts and opinions and post them here. Disclaimer: I'm not a designer at all, these are just things I personally think can be improved from the viewpoint of a user. Maybe I'm just weird and most people like the current situation, maybe I'm a genius and everyone agrees with me. I would love to hear what others think about my improvements, either positive or negative
Also @Nathan; feel free to throw this in the dump if you don't agree, it's mainly just 'food for though'
I'm quite busy lately, so I certainly don't have the time to go through the whole site at once, so I'll do it page by page. The first one is the part page. I've taken part 32013 as example page. This is how it currently looks (please ignore the second menu bar...). And these are my improvements:
Full image (again, ignore the 2nd menu-bar)
This is not a part-page specific change. My setting is set to Wide #1. I think this should be the default state, also for non-logged in users. The current default is just very cramped and just a tad bit too small. When I visited the site as a non-logged in user, I came across things that just didn't fit. More on that in a later post maybe.
What: Removed the part notes under the images section, either place them in a tab or in a collapsible element.
Why: Some part notes are very small; only one or two lines. Some are very big though, with huge images. The latter type takes up a lot of important space: the area of the page that is immediately visible without scrolling. You generally want the most important thing on the page there and I'm pretty sure the page notes aren't. The part and color information is and by replacing the part notes, you get the most important information the most important spot. It also makes the page a little more organized.
What: Added a second title to separate own inventory + existing colors. Obviously, the new title SHOULD NOT BE DISPLAYED when the user doesn't have the part at all.
Why: It gives a clear separation between where the images end and the information begins. Together with the removed part-notes it makes the general layout much cleaner and organized.
What: Removed padding between 'You have xxx of this part in xx colors' and the title.
Why: It was just a bit too much. The site has a lot of very... generous spacing in a lot of areas.
What: Removed the text that says what happens when you click a part color.
Why: It's extremely obvious what happens when you click a color, plus it breaks the 'flow' of the page. Also, the link to all Lego colors isn't useful in that place either.
What: Changed the tab-area to full-width; so it goes under the sidebar.
Why: Because there was a sea of unused whitespace there. This felt extremely weird on the buy tab, because it's horizontal scroll-able. This change however might require a bit more though, because the example page is quite long, thus the sidebar is shorter than the color information. The part page can also be much shorter (a user as no inventory + only 1 color exists for example). In that case, the sidebar minimum length is longer than the color information. If you keep the tabs full-width, there will be a lot of empty space between the color information and the tabs (because it has to be under the sidebar) which is not desirable either...
What: Changed the top title from [part-number] to 'Part Information' + changed it to h4 so that it has the same style as the other headers in the Sidebar.
Why: Just makes the sidebar feel more organized.
What: Removed a bit of padding between the sections.
Why: The previously mentioned generous amount of padding
What: Removed the text "This part has been known differently at other sites:"
Why: It's pretty obvious what the information in there shows based on the header and the content. Just takes up valuable space and without the text the sidebar looks a lot cleaner (because the layout is now the same as the section above).
What: Changed table column-headers to bold
Why: I just think it looks better.
What: Changed the column to be the same height as the main area, up to the bottom tabs.
Why: I'm not 100% sure about this one. On one hand, it looks better, because now the page is completely filled and divided into 3 sections: color information, sidebar and tab-section (at least in the case it's changed to be 100% width as stated above), this is very well visible in this image. On the other hand, the empty gray area might be a bit weird too.
All the above mentioned changes can be viewed in the images linked at the top.
So, anyone has any thoughts on this?