Layout of Robots and Tutorial categories not well adapted to Desktop

Community Community Support and Suggestions
1

First of all, thanks for your work to modernize the website. I am aware it’s a lot of work!

The following two links are optimized for mobile, but not desktop (maybe there are more parts, I haven’t checked them out all yet):


You can display them in grid or list view, but both layouts have issues. List has thumbnails that are too small to really see what’s in the picture (usually a photo of a complex scene). If it were a mere symbol/icon that would not be such an issue. The margins between the entries (vertical) is too high, it makes it hard to read with such big gaps, especially relative to the content (list entries). The balance is off.
Grid has gigantic pictures and a little text, but you need much more white space. You can’t have an endless list of many pictures, or you will be drowned in information.
It has another detrimental effect, that people will just feel like there is an endless supply of images, and wont value the individual entries anymore.
In other words, big pictures are great, but they need to be given a little space, and more text around them to reduce the overall cognitive load.
A grid view is good if you select among many very similar components, and want to pick the right one. But it doesn’t do justice to dissimilar items.
A big picture mode would still be welcome though.

In general the layout feels optimized for mobile. Too big margins, and everything out of proportion, like in many touch interfaces. You need another mode/scaling/margins for desktop and something that is measured in cm or something similarly, and not dependent on the device’s ppi/dpi resolution.

P.S.: As I am filling out this form, it is very distracting to see the title text appear on the right while I type, and the icons of “RobotShop Community” flashing (apparently https://skin.robotshop.com/skin/frontend/rb/default/favicon.ico is a 404).

2

I am forbidden to edit, for some reason (403), so I will append the edited post here:

First of all, thanks for your work to modernize the website. I am aware it’s a lot of work!

The following two links are optimized for mobile, but not desktop (maybe there are more parts, I haven’t checked them out all yet):


You can display them in grid or list view, but both layouts have issues. List has thumbnails that are too small to really see what’s in the picture (usually a photo of a complex scene). If it were a mere symbol/icon that would not be such an issue. The margins between the entries (vertical) is too high, it makes it hard to read with such big gaps, especially relative to the content (list entries). The balance is off.
Grid has gigantic pictures and a little text, but you need much more white space. You can’t have an endless list of many pictures, or you will be drowned in information.
It has another detrimental effect, that people will just feel like there is an endless supply of images, and wont value the individual entries anymore.
In other words, big pictures are great, but they need to be given a little space, and more text around them to reduce the overall cognitive load.
A grid view is good if you select among many very similar components, and want to pick the right one. But it doesn’t do justice to dissimilar items.
A big picture mode would still be welcome though.

In general the layout feels optimized for mobile. Too big margins, and everything out of proportion, like in many touch interfaces. You need another mode/scaling/margins for desktop and something that is measured in cm or something similarly, and not dependent on the device’s ppi/dpi resolution.

Another issue is that the site fills the entire horizontal screen space, which is very uncomfortable. In mobile devices this is ok, since the screen diagonal in cm/inches is much lower, but with desktop screens this is too much space. It would be better to subdivide the available space in sections, each having different content, or having adaptable margins on the side filled with white space.

Also there is a lack of framing/borders or other visual guiding elements, so it looks a bit unstructured. I think that is the major issue with the forum, everything feels so “limitless” and stream like, that nothing really stands out, or matters.

Eyes need some sort of guidelines to focus on, and scan the content in portions of smaller groups, while being able to ignore the rest. This can be done with various contrasts, borders, etc. This forum also suffers from it.

P.S.: As I am filling out this form, it is very distracting to see the title text appear on the right while I type, and the icons of “RobotShop Community” flashing (apparently https://skin.robotshop.com/skin/frontend/rb/default/favicon.ico is a 404).

3

The items on
https://community.robotshop.com/profile/
also feel too big, and fill too much screen real estate, so it’s hard to get a good overview. Another example of scaling to cm and accounting for ppi.

6

Great feedback. I too appreciate the work. There are minor aesthetic issues with the desktop version, which is the only one I use.

While I would agree with all of the feedback, and don’t want to take away from any of it. For me, the part that hit home for me was this (your words)…

You can’t have an endless list of many pictures, or you will be drowned in information.
It has another detrimental effect, that people will just feel like there is an endless supply of images, and wont value the individual entries anymore.
In other words, big pictures are great, but they need to be given a little space, and more text around them to reduce the overall cognitive load.
A grid view is good if you select among many very similar components, and want to pick the right one. But it doesn’t do justice to dissimilar items.

A lot of work goes into each creation. I spent thousands of hours and dollars on just 2. The grid view, while good for e-commerce, does seem like it trivializes our passionate devotion to the craft.

3 Likes
8

Thank you, it is much better, and the layout adapts nicely (resizes when the chat window is opened).