Add images to example page #19375
Add images to example page #19375
Conversation
|
This is great! Some feedback:
Additional idea to your list:
I will help you to optimize this page, please say what resolution, format, compression quality and ratio do you like. We can provide a smooth migration. |
Definitely! For the section part of the name, I think we can use the section titles instead, they would replace the current very generic
Thanks! We can optimize the images if this PR will be merged. I decided to display them in a 8:5 ratio because it looked better than the 4:3 ratio they're in. We could generate the screenshots with that ratio and with smaller dimensions, as long as this doesn't mess up the screenshots matching score. Thanks you for the remaining feedback! |
|
Looks good! Many thanks for the explorations 🙏
Yes, I think we should add this in this PR directly.
Maybe not needed yet
Maybe not needed yet
I think we could achieve this by making the panel resizable
I was thinking about renaming examples and make the @marcofugaro I feel the screenshots make the scrolling endless now. How about cropping the screenshots vertically half size dynamically? |
|
@munrocket What do you think about generating screenshots at 400x300 instead of 800x600? |
|
Yes, I was thinking about screenshots, but I haven’t found a good solution yet :|. Some of the thumbnails may be black. On the one hand, I want to update a script that generates a screenshot from scratch, on the other, we will pollute the repo. Of course, I can try something like # 18742 for thumbnails, but I'm not sure if this is the best option. Ideally, we need only one type of screenshots for the site and for testing. Can we compare this in .jpg? That is the question. Right now we have a threshold of% 20 in each pixel, I think this should be good for comparison in tests even for .jpg. |
|
No no, I didn't mean having two versions. |
|
Alright added the lazy loading.
I've updated the CSS aspect ratio of the images, they now have a 16:9 aspect ratio, how does it look? https://raw.githack.com/marcofugaro/three.js/example-page-images/examples/index.html
That's a great idea! We could use the
Great to hear! 🙌 Let me know if I can help in any way |
|
Ok, I am realized how to fix Yeah 16:9 is better, so 400x225? It will give +8.1mb totally. Not much at all. |
I think 400x300 is fine. I wouldn't make the e2e images 16:9, we are just reusing them and cropping them because it suits the UI better. |
|
Thanks! |
|
|
|
Thanks for the check @eXponenta! Totally missed the |
|
@marcofugaro FYI 46d340f |
|
@mrdoob Sure, still looks good! 🙌 Don't forget to bring down also |
|
@marcofugaro Done d6f668f |
|
this is 1000x less useful than it was with just a list. There are way too many examples to scroll through via thumbnails and the thumbnails themself do not tell you at a glance what the example is. With the text buried between it is now way harder to find what you're looking for. Please revert! If you want a solution that might work better leave the list as text on the left and put the thumbnails on the right in a large grid. |
|
Maybe a checkbox to enable/disable images? |
That's better but still not as useful as it was
No! What are these thumbnails about?
I have no idea. The useful info is the text description, not the thumbnail Thumbnails work for a collection of photos because what I'm looking for is the content of the photo. They do not work for collection of solutions because the important part is not the image, the important part is what feature/tech/solution is being demonstrated. That info is in the text, not the thumbnail
As it was before I could at a glance see the titles (ie, descriptions) of ~32 examples at once. Scrolling through this list to find something was easy. It was easy both because I could see more and because it was easy to see collections, for example all loaders started with "loader", all lighting started with "lights" and as a list of 32 text lines it was easy to visually see the grouping. That's lost with thumbnails.
Now I can only see 4 at once and there only useful text is the description between each thumbnail. being able to only see 4 at once is vastly less useful but even if they were in a grid it's just much more easy to scan for solutions based on the descriptions than the thumbnails and further it's easier to scan those descriptions as a list of text without the thumbnails.
|
|
If you want another reason to revert, the current live site is broken on mobile |
Um, it's seems to look fine on my Pixel. What exactly is broken on your device? |
|
If I size the window down on desktop the content disappears
So checking my iPhone I see the same thing
|
|
Looking at the code on the page it's full of hacks, probably piled up over 10+ yrs? Given that it only works in modern browsers since all the samples it points to are using es6 modules, maybe it's time to start over. Would consider cleaning it up myself using flexbox etc that all modern browsers support if we can agree on a new design. Would like to get consensus / agreement that such a cleanup is welcome before spending time on it though |
|
haha, ok. I guess the blank screen is expected. I would have provided a list to start rather than rely on finding the menu |
|
I completely agree that the images are not useful for me. I do think the quick fix suggested by @mrdoob to add a checkbox is the best solution for now, but in the long term I would be happy to see the solution suggested by @greggman with the tiled view in the main view and the list view in the menu on the left. UX-wise that feels the most natural. |
|
Here's a live version of my hacked up suggested UX https://raw.githack.com/greggman/three.js/lots-o-thumbs/examples/index.html
the change is here |
|
I think the text overlay on top of the image looks a bit cluttered.
I'm not a designer so I can't make a suggestion what other solution might look better. |
|
Well here's one with the text at the bottom
The issue there is some text is long so it wrap to say 3 or even 4 lines. So then you have to decide what to do
|
|
Well, I've always liked the minimalistic style of the example site 😇 . Playing around with images feels a bit like over-engineering to me. Not really necessary and makes the site only harder to maintain... |
agreed But in any case here's text at the bottom live https://raw.githack.com/greggman/three.js/fruit-on-the-bottom/examples/index.html |
|
Thanks for the mockup @greggman! That solution was proposed before by @mrdoob himself, however we didn't go with that because the navigation between grid and the example would be awkward. Also, it may confuse the user showing two entities of the same example at the same time, leading the user to think they may be different. Having a list of examples with thumbnails always visible was originally proposed in #18714, and is much more usable, explorable and navigable. All the other issues you did bring up are all addressed in the proof of concepts I did, please see the description of this PR. Try to compare the old list view with the all of the changes I proposed in the description of this PR, not the current view. I agree with you that the current implementation is not as navigable as a simple list. 🙂 Also please try to be more open and look at the website with the eyes of a newcomer instead of a person who has used and is used to the list design for ages. I think that with all of the proposed solutions, it becomes more usable than the old list view 🙂
See the Tags and Sticky section titles proposals, imagine the category
Can also be solved with more detailed categories and the Grid view (#19438) |
How about you try to be more open and instead of blindly parroting some unproven idea that images are better maybe open your mind and actually try to reason through what a user on the site is looking for and how they find it. If they want images that lead to random demos the home page does that. Once they get to the example page though they are now looking for solutions, not random thumbnails with no meaning I'm entirely confident, in fact I'll bet you $5000 in real money if we setup a UX lab and ask 100 devs to look at the page and figure how to do accomplish some task they'd find the answer faster on the text list than the thumbnail list. To iterate. This thumbnail has ZERO INFO that it has anything to do with picking Similarly this thumbnail has ZERO INFO that it has to do with normals The site isn't a photo site. Photos in a grid help me find a dog or a cat. They don't help me find an example on extrusion or post processing or indexedbuffergeometry because there is no picture that can convey those concepts. Categories are not a solution. That's just putting lipstick on a pig. |
This feels weird to me. Why implementing something that is not as navigable as a simple list? That sounds like a step back. Isn't the purpose of a menu not to make it easy to navigate around?
I do appreciate you are looking into ways to make it easier for newcomers to get around this library. I wasn't aware newcomers had problems with navigating the examples (do they have problems with the list?). But I highly doubt this is the way to go to. I have never seen an example site, or any navigation system, like this. Having to scroll is a bad user experience. So apparently the reason why we deployed this is because we want to make it easier for newcomers. What about the not-newcomers, people like me that use the library for a long time already? This new change will slow me down a lot. I get it's personal, but for me a list works much better. tldr: I highly doubt the new thumbnail navigation is better than the list navigation. But at least bring back the option to switch it back to the list navigation if a user wants that. |
|
Many thanks for the feedback 🙏 Would it be possible for you to explain how do you use the list? I personally tend to use the search (regardless of the screenshot) so I rarely scroll. What was the last item you were looking for when you were scrolling? |
PostmortemSummary@callumprentice proposed it a few times and he got upset that I didn't give feedback. I didn't think this was something that was needed but I tried to be supportive and suggested for ways I thought it could work. @looeee seemed interested in the idea, @munrocket saw the screenshots he was doing for e2e could be reused and he also proposed his own ui which its own set of disputes. Lastly, @marcofugaro came to the rescue and tried to integrate all this with the current design 🙏 I still think the feature has value, but it may be good to have it behind a checkbox. ConclusionIf someone submits a PR with a code change, it's easy to judge, either it works or it doesn't. The open source model is always a pain when it comes to design/ux work. I already learnt this from when we tried to come up for a logo for the project and everyone started to propose a cube as a logo. Giving feedback about logo design, ui design, ux design is not that simple and people get upset when they get push backs. They don't want to accept that graphic design requires a lot of practice. Based on these experiences, I'm tempted to no longer accept PR related to design. |
|
@mrdoob - with respect, I don't think that accurately describes what happened. I proposed an implementation that had a visual preview because I felt that it would be useful. I wrote a version that looks identical to the old one except there was a checkbox to show/hide thumbnails next to the search magnifying glass. You didn't like that and suggested I make a version with the thumbnails in the main area like the showcase on the main page. I made 2 or 3 more example sites based on that and waited for feedback only to be told by you that "there is little chance of that being accepted - why don't you consider something like the current design but with checkboxes" - exactly what I first proposed. That was a little disheartening after all the work I put in - plus, my scripts to capture screenshots and ensure something visually relevant was captured seems to have been ignored. I know (and others) you put an unimaginable amount of time into this project which is immensely appreciated. I've had so much fun experimenting with three.js over the years that I wanted to contribute something back and this seemed like the perfect opportunity. What did I do poorly that I can do differently next time? Perhaps discuss the design up front in the proposal issue before doing any work? What would make your life easier? |
|
Sorry for oversimplifying the evolution of this issue.
Yes, that's probably the solution. Doing a mockup in Photoshop before building it and see what the community thinks. |
|
Understood @mrdoob and will do. Since I made the initial proposal, it's my fault this whole divisive issue came about and I apologize. For what it's worth, I didn't necessarily think it would be a good idea for beginners - somewhat selfishly, I often found myself remembering an example I'd played with, thinking it would be interesting to inspect the code but not remembering the name and being able to scan them visually might be handy. In the future, I'll be |
Agreed! I used http://www.realtimerendering.com/threejs/ I think it would be best to just have the thumbnails (screenshots) on a separate page. |
Clicking a thumbnail and having a close button is no different than just about 90% of all photos sites. Google Photos , flickr, Facebook, SmugMug. Facebook was 2 billion users and somehow navigating between a grid and the actual thing to view seems to be fine.
First off users are not idiots. Also btw youtube has 2 lists
So does iTunes
I think it's important to remember who is the target audience. This is a site about a JavaScript Library. The front page has thumbnails that lead to pretty demos made with the library so if some non-programmer comes by they can click the pretty pictures and see cool stuff, But, the rest of the site is for JavaScript programmers trying to use a JavaScript library. Would MDN better if instead of the list on the left each article had a thumbnail?
How about MSDN
I'm sure someone here will think that would be an improvement but just remember, the thumbnails will more likely than not suggest nothing about what the actual topic is. Especially if they are auto-generated. |
|
@mrdoob I couldn't really remember what I was last looking for while scrolling, so I went through the list with thumbnail on the website. It took me a couple of minutes of scrolling when I gave up about remembering what the last thing would be. What maybe would be more interesting is that more often I found some useful feature by scrolling randomly or looking for something particular (GLTF loader as I can remember) and I found the other loaders listed there as well, giving me an idea of what type of other loaders are there. And speaking of the loader examples: the thumbnails there make no sense at all. It just shows some random object that it loaded with that specific loader, which says nothing about the functionality the example tries to show. To add to @greggman's post: I completely agree with him and the reason why lists work is because people are used to it. It's the same as making the submit button red: maybe it looks nice, but people are used to have it being green. Or a door where the handle goes up to open the door instead of down: fancy, but not functional. That doesn't mean that I'm against new ideas, but I prefer following the "bigger companies/websites" that pump a lot of money in UI/UX. Those solutions feel natural. I would be more than happy to make a checkbox/toggle PR. Even when it won't get merged then at least I can host the documentation my own so that people who prefer the old list can work with it again. |
|
Probably worth mentioning a solution from Unity First mockup by Callumprentice and my first attempt with searching-ball not touched previous list with examples too. Different people have different mindsets and even if somebody think that images not describe anything we have another group of people that remember pictures because they visuals. So the best solution that will fit to everybody:
Keeping this diversity in searching process is important when we want to improve system to all situations. Also was idea to create a filter by date/release, to quickly find new examples in fresh release. |
|
By the way, card design from Marcofugaro looks better than fading effect, at least to me. |
|
I find the thumbnails to be very useful to remember demos that I've seen in the past. That being said, @greggman this is such an elegant solution! Keeping the list as it's always been, while adding a thumbnail grid on the landing page for those like me who need it. In retrospect, this seemed like the path of least resistance.
The |
One suggestion that I liked was to put a rotating three.js logo there. Functionally, though, the grid of examples beside the list on the left is the best choice on large screens. How would that look on mobile? The current long list with screenshots works great on small screens. |
|
The grid is responsive https://raw.githack.com/greggman/three.js/fruit-on-the-bottom/examples/index.html
|
|
Here's one solution that follows the current design: #19881
|
Followup of discussion in #18839
Originally proposed by @looeee and @munrocket, this PR explores a way of adding images directly into the existing sidebar.
It includes a card layout for each link, which I found to be the perfect solution for its extensibility and simple interactivity. It also fits with the current threejs.org design.
Please share your views on this, any feedback is appreciated 🙌
This PR would close #17692
Live demo
Possible future improvements
Improvements that might come in future PRs if we agree on it.
Lazy loading
Downloads only the images currently visible in the viewport. Useful especially for mobile users.
It works with the native loading="lazy" attribute, and it follows the Progressive Enhancement methodology, meaning that on unsupported browsers it defaults to the normal loading behaviour (currently IE and Safari).
Live demo
Tags
We could also show to the user the tags introduced in #18779 and #19245. On click of the tag, the search is populated with said tag and all of the examples with said tags are shown.
Live demo
Sticky section titles
The section titles could stick to the top, making it clearer for the user to understand which section he is in.
This would be achieved with the Progressive Enhancement ideology as well, using
position: sticky;for browsers that support it and automatically defaulting to the normal non-sticky behaviour for browsers that don't support it (only IE).Live demo (proof of concept)
Grid view
I also explored a grid arrangement for the cards. Having more cards visible makes it quicker for the user to scan through them.
This was also achieved in #18714 (comment), however I think splitting the view horizontally works better than splitting the view vertically, especially for smaller screens (I own a 13'' laptop). Since most examples have the main focus on the center, an horizontal split leaves them more available space (think of it like a square fitted into the view rectangle).
Live demo (proof of concept)
Better titles
Currently the titles are formatted like
animation / skinning / blending, however only the last part is the effective title,animationandskinningare actually tags. If these are handled like the current tags, we could have a classically formatted title.Ideally the titles could be more descriptive, containing more than one word.
We could achieve this with another object
var titles =in theexamples/files.js.Live demo (proof of concept)