pouët.net

Bigger screenshots

category: general [glöplog]
Quote:
The larger screenshots would be available on-click, not immediately when loading a page.
added on the 2018-07-17 11:26:48 by Gargaj Gargaj
Quote:
400x300 64kb compo, anyone?

i am doing this already - kind of - by squeezing the main effect of tiny intros into an animated GIF ^^
added on the 2018-07-17 11:38:46 by HellMood HellMood
Quote:
The larger screenshots would be available on-click, not immediately when loading a page.

This doesn't fix much then. Part of the point of making the screenshots bigger has to be to actually make them bigger. I would suggest this does not require any user interaction. If you are worried about load time, lazy/progressive-loading will take care of that issue. Having a small thumbnail (basically) and asking the user to click it to view the thing the user came to that URL to view is horrible UX. :)
added on the 2018-07-17 12:45:10 by gloom gloom
Case in point: how the prod pages look on my computer. I think we can afford to spend some more screen real estate on the most important thing on that page. :)

BB Image
added on the 2018-07-17 12:49:12 by gloom gloom
I don't know how to BB.

BB Image
added on the 2018-07-17 12:50:18 by gloom gloom
Third time is the charm! :D

BB Image

Anyway, I think the main point is lost in implementation-talk now: bigger screenshots = good. Can haz? :)
added on the 2018-07-17 13:31:17 by gloom gloom
any multiple of 320x200 would be welcome, converting mode 13h screenies to 400x250 destroys the pixel flavour
added on the 2018-07-17 13:39:31 by HellMood HellMood
You can't say "the main point is lost in implementation-talk" right after you complained about implementation.

But no, no bigger screenshots directly on the main page. If I finally find out what disk space we can work with I'll start working on having larger screenshots on demand, and maybe it's a workable idea to perhaps serve larger screenshots for #FirstWorldProblem screens, but I wouldn't make them a default.
added on the 2018-07-17 13:49:51 by Gargaj Gargaj
Why not?
added on the 2018-07-17 14:57:33 by gloom gloom
Wait, so, why do we need larger resolution screenshots?

What's the function of the screenshot on the prod page. The way I see it is that it serves at least two purposes: make the prod more recognizable to previous visitors, as in remind them what the contents of the prod are; and give a new visitor an idea what kind of prod they might expect to see. For this purpose the current size is certainly enough, and increasing the resolution I don't see much benefiting either purpose.

My second concern would be how should it look? The header in the current layout is very balanced, and for an example in that screenshot the ratio between the screenshot and info columns is roughly 1.66.. which is quite close to the golden ratio (1.618..), commonly understood to be a design principle worth following. Larger screenshots would either come at a cost of breaking this ratio and making the layout look awkward or keeping the ratio and adding some almost as awkward margins to pad the difference.

About the size of the layout, do you view web pages fullscreen on your 4K(?) monitor? On my display at 100% display scaling the width of the layout is about 540 pixels, while the width of my Twitter feed column is about 590 pixels. Facebook's feed column is even narrower at exactly 500 pixels. For reference this is how the page looks at 2560x1440 resolution with 150% display scaling, which I imagine are dimensions closer to what most people view the in.

A point of comparison I'd like to draw though is Steam. Steam uses a somewhat similar layout to Pouet, but is generally slightly larger and more padded, and has preview / screenshot viewport width of 600 pixels. If the prod page layout were to be refurbished I think the Steam product page layout is a good starting point. Furthermore the preview element on Steam also serves a similar function to screenshots on Pouet, which I think is demonstrative of the observation that we don't really need the images to have much larger resolution. For that matter that's how it works on pretty much everywhere; you have large thumbnails that give you an idea of the contents, which you can click to receive a larger image for further inspection.

This leads to the point that maybe the screenshots indeed should be clickable for a larger version to display in a modal way over the prod page. There's nothing UX-wise horrible about this, as it's in fact one of the most common design patterns in interface design. If anything having a huge image at the top overshadowing the rest of the content is more horribly. I don't open prod pages to watch screenshots of the production. Overall the argument seems to be that our screens are bigger and our internet connections have gotten faster now, so the screenshot sizes should follow these with a linear relationship. The latter point is also something I'm cautious of, like JCO mentioned earlier. I often browse Pouet on a mobile connection which can get slow, but also from general usability perspective it's very nice to have Pouet pages load almost instantaneously. I wouldn't mind raising the file size maximum a bit though, say double it to 128kb.

I just don't see how this would work as I understand what is being suggested.
added on the 2018-07-17 15:13:08 by noby noby
CTRL+MW UP/DOWN or +/-
300 dpi @ 420p
so many ways - same goal. Wasn't a 'good' screenshot also a signal for skilled ppl behind the prod at any time in the past? One thing would be to auto-shrink big sized Hyper High Definition resolution ones back to old school output devices or you could have the next thread pre-prepared. just thinking... pressing submit now, no need to comment that later
added on the 2018-07-17 15:32:19 by aqu aqu
Quote:
My second concern would be how should it look?


How about just allowing for the bigger image, and let the other elements stay the same until they reach the layout of the BBS page? The BBS pages are basically they same as the prod pages, except the prod pages have a fixed width (for some reason) instead of scaling with the rest of the page:

BB Image
added on the 2018-07-17 16:22:23 by gloom gloom
Quick web inspector hack to jack it up from 400x225:

BB Image

To 640x360 (without actually having a larger image, so of course a native screenshot would look better):

BB Image
added on the 2018-07-17 16:30:40 by gloom gloom
BB Image
added on the 2018-07-17 17:30:29 by Zplex Zplex
I'm glad we can all be adult about this.

Back to the practical solution then:

- Up the max res to 640x480 (where most PC demos would then use 640x360 for the corrrect aspect)
- Up the max file size to 128 kb
- Apply this CSS style to the prod image tag: style="width:Xpx;height:Ypx;" (where X and Y are the actual width and height of the image provided, which will maintain backwards compatibility for small images)

Or something like that. I'm no CSS or HTML s000pahHERO..
added on the 2018-07-17 22:28:25 by gloom gloom
I think we can all agree it would look objectively worse:

BB Image
added on the 2018-07-18 11:01:33 by Gargaj Gargaj
gloom: so cool to hear you volunteer to process all those updated screenshots!
added on the 2018-07-18 15:34:14 by havoc havoc
i think the main problem here is the prod page not scaling up according to the resolution of the screen like the forum pages, which at gloom's case is pretty much evident.
added on the 2018-07-18 19:58:36 by Defiance Defiance
Maybe we could at least have 533x300 previews, since the layout is meant for 300 height anyway..
added on the 2018-07-19 08:59:37 by Psycho Psycho
havoc: are you saying this can never, ever change because it involves manual labor of some sort?
added on the 2018-07-23 13:52:04 by gloom gloom
gloom: are you trying to use a really cheap debate technique and will i fall for it?
added on the 2018-07-23 15:07:19 by havoc havoc
I’d rather have more screens than larger ones
added on the 2018-07-23 15:59:26 by farfar farfar
(Given that one fairly important point of the images (imo) are to let you check out the prod quickly, to see if it’s worth spending time on)
added on the 2018-07-23 16:01:01 by farfar farfar
Also: +1 for psycho’s very pragmatic suggestion
added on the 2018-07-23 16:14:42 by farfar farfar
a "pragmatic" solution is not to spend a ton of effort on what boils down to being just another shitty compromise, whatever the precise pixel count may be
added on the 2018-07-23 16:27:19 by havoc havoc

login