871658 - First design pass: Make detail page

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Attachment: A thimble make detail view

Based on requirements in the PRD: https://etherpad.mozilla.org/webmakerv2prd

Currently looking at something like a Vimeo detail page (https://vimeo.com/65465072), imagining how this can evolve in the future, eg. comments or a detail page that grows. (Grey box is an FPO placeholder)

Comment 1

[Cassie McDaniel [:cassiemc]]

Attachment: A popcorn make detail view

Comment 2

[Cassie McDaniel [:cassiemc]]

Attachment: Popcorn make detail with top nav bar

Personally like this option less than the others, but it does bring the main communication pieces – that this project helps feed the webmaker community and that you can share and remix it – up on the page.

Comment 3

[Mike Beltzner [:beltzner, not reading bugmail]]

Nice work, and fast!

I really like your attention to the relative weight of make content vs. description information. I tend to agree that adding controls to the top isn't the way we want to go; takes too much focus away from the make, itself, and puts Webmaker too front and center.

One thing I'd love to see is an even more stripped back approach, so that at first load it looks like what you have in comment 1 and comment 2, but with just simple CTAs (as from comment 3) below the content, and one of those CTAs can be "Details" which expands the larger detail section.

Comment 4

[Brett Gaylor [:brett]]

These are great.

Mike's suggestion is good - if at first click you only have perhaps description and the maker displayed, and details can be expanded.

Something these designs surface are a "skills involved" section.  This is clearly something we'll want to feature eventually, but my understanding is that this metadata won't be made available in the June 15th rev of the tools.

Comment 5

[Ross Bruniges [:boozeniges]]

Personally I missed the remix/share and 'this is private' messages in the first version where they are at the bottom.

As in both cases the main content of the page (the make) is at the top why deal with the show/hide of the description content (assuming this is what we mean by expanding it?). It's not like we need the vertical space at this point - let's make it loud and proud and for everyone to see!

This is going to be a big win for popcorn/thimble though.

Comment 6

[Cassie McDaniel [:cassiemc]]

(In reply to Brett Gaylor from comment #4)
> These are great.
> 
> Mike's suggestion is good - if at first click you only have perhaps
> description and the maker displayed, and details can be expanded.
> 
> Something these designs surface are a "skills involved" section.  This is
> clearly something we'll want to feature eventually, but my understanding is
> that this metadata won't be made available in the June 15th rev of the tools.

This was in the PRD as "remixed from / remixed by" but I can remove it for now. Keeping the "remixed from"?

Thanks all for the feedback – I'll try a collapsible details button and see how that goes. The description content could be very long (or very short) so this is probably a good evolution. But Ross's note that he missed the remix/share is also duly noted.

Matt, wondering if you can help with the message in the footer. Right now it is "Find more to make, and claim your space". We want a stripped down approach, but something compelling enough to encourage users to visit the main webmaker site.

Comment 7

[Cassie McDaniel [:cassiemc]]

(In reply to Cassie McDaniel [:cassiemc] from comment #6)
> 
> > Something these designs surface are a "skills involved" section.  This is
> > clearly something we'll want to feature eventually, but my understanding is
> > that this metadata won't be made available in the June 15th rev of the tools.
> 
> This was in the PRD as "remixed from / remixed by" but I can remove it for
> now. Keeping the "remixed from"?

Sorry if this was confusing. "Skills involved" was listed in the PRD just *below* remixed from/by (keeping those unless I hear otherwise).

Comment 8

[David Humphrey (:humph)]

A thought, looking at your first image...In Thimble we have injection that adds a Github style "Remix This!" overlay in the upper-right corner (this is obviously just a draft, no design happened).  What if instead we gave you a banner across the bottom, very thin, with "Remix" and whatever other minor metadata--I'm imagining your "This page is private" area holding this.  If you click this, the detail section slides out below.

Another thought that occurred to me looking at these.  When we publish a Popcorn Maker page, we create 2 things: 1) a page that has the video, controls, etc. and is meant to be hosted in an iframe; 2) a page that hosts the first page in an iframe.  I Think we should publish 2) as if it was created in Thimble, so people can open that thing in Thimble and make adjustments.  This would mean not having an script in it yet, but that could change later.

Comment 9

[David Humphrey (:humph)]

One more thing, we have no concept of private pages, or anything being other than public, at the moment.

Comment 10

[Cassie McDaniel [:cassiemc]]

Attachment: Make detail show/hide concept

Here's another pass in response to above comments. 2 page show the page expanding a bit below when clicking on "more details" – note the amount it grows will obviously vary based on amt of description content.

Would still like to consider in greater depth Dave's suggestions. Is this treatment too overbearing of the maker's make? Is that why, Dave, you're suggesting something even more subtle? 

Other notable changes:

* Skills removed for now.
* # of remixes added; not sure if this is in scope, but it was mentioned by Dan Sinker in an email today. "One thing that's worth noting is that this study [on remixability] was possible because the scratch team displays the views and remix numbers on projects. We don't surface that, do we?"
* privacy bar kept; noted that it will not be implemented by June 15. Moved to the top, as it applies to the entire page's content.
* added to the privacy bar (still not in scope) a sign-in link.
* designed for two-line titles
* larger user icon
* actual thumbnail image in the "remixed from" box; 16:9 ratio. 
* in order to keep the make details brief yet have the text appear in a consistent spot when expanded, have moved the language / built with the the bottom. If the content is very long, this could be way down on the page. Problem?

Comment 11

[David Humphrey (:humph)]

Let me try to clarify.  It's possible that I'm conflating several things, but I think that if we can solve this in one go, it would be good.  Consider each of our tools for a moment, followed by the galleries.

1) Popcorn Maker:

Currently we create 2 HTML documents and host them on S3.  The first one is meant to be hosted in an iframe, for example http://popcorn.webmadecontent.org/rhl_  The second is a basic HTML page that hosts the first in an iframe, and is mainly meant to be shared, for example http://popcorn.webmadecontent.org/rhl (note the trailing _ in the first case, and missing in the second).

2) Thimble:

We publish 1 HTML document to S3.  This document is a mix of 2 things: what the user created in Thimble along with injected HTML/CSS/Script for things like GA, Remix button, etc.

So we have 3 HTML documents to consider, 2 from Popcorn Maker, 1 from Thimble.  Now consider the gallery

3) Gallery:

Here we want to be able to show a bunch of makes and (I assume) allow the user to click on them for details--hence this bug, and a Make Detail page.  Cassie's work above is looking great for this.

I want to suggest that we combine all this.  In other words, the extra details stuff, have it be injected into the documents we publish, such that if I go to any document hosted in S3 that we publish, it will allow me to get the Make Details, remix, etc. without going back to webmaker.org.

I imagine it working something like this:

1) Popcorn Maker:

We publish 1 document as content-type=application/x-butter, namely, the inner iframe doc.  This doesn't change from what we do now.

The second document (i.e., the demo page hosting that iframe) we do something like Cassie's showing above, and publish that through Thimble, so that it ends up being content-type=application/x-thimble.

Let's say I publish to humphd.webmakerdomain.org/demo.  If I open that URL, I'll get my iframe hosted in a page that also has all the metadata around it about the make.  This page will also have a Remix link on it, so I can go and change it if I want (in Thimble).

2) Thimble:

You click publish on the page you make, and we take your HTML and inject a script (and maybe css + html, or let the script do it onload) which adds Cassie's make details.

However, in a Thimble page, I'd argue that you probably want that almost totally hidden at first, and have the user's content be foremost.

3) Gallery:

In the gallery case you could force the metadata to be expanded by doing something like humphd.webmakerdomain.org/demo?showDetails=1 which would trigger the injected script to expand the details pane fully.

This is getting long, and might be better to discuss on vidyo or something.  My main goal is to try and deal with the fact that we need a deep-linking solution for having random people land on humphd.webmakerdomain.org/demo and a) get to Webmaker; b) see info about what this thing is; c) be able to remix it and become a webmaker themselves.  Also that these are similar goals to the front-page, so let's solve it once if we can.

Comment 12

[Cassie McDaniel [:cassiemc]]

Attachment: A more universal detail bar

I still want to work a bit on the styling, but how is this Humph, does this functionally work for all kinds of makes?

Comment 13

[Cassie McDaniel [:cassiemc]]

Attachment: Finalized top bar design for Make Detail

I think this solution will work for all kinds of Makes. One thing this doesn't do is show the title and maker at first glance; you have to click the Details button to see that. I think that's okay – users can always put that content into the make if it is important.

This pdf shows different states of the bar for both a thimble and a popcorn project. I'm going to hand off the psd's to Dale now, but do let me know any further questions or comments.

Comment 14

[Brett Gaylor [:brett]]

Cassie, I think this looks great. My initial reaction is that it is a shame to hide the title/maker, but I agree with your rationale :)

It seems to satisfy humph's desire to simplify these into a single wrapper as well.  R+ from me.

Comment 16

[David Humphrey (:humph)]

Cassie, yeah, I like it a lot.  One thing I want us to figure out is how to deal with having dual Remix buttons on a Popcorn Maker make.  The video itself has a remix (recycle arrows) button in the controls, and now the common Make Details header also has Remix.  That might actually be OK, but one thing to consider: does clicking Remix on the header remix the page that has the iframe in it, or the inner iframe doc?  For simplicity I'd argue we have both Remix buttons do the same thing, namely, remix the thing in Popcorn Maker.  If so, do we want to harmonize the icons used (forking arrows vs. recycle arrows)?  Do we want to change the post-roll in Popcorn Maker when you're in a Make Detail page, and not duplicate all that data?  The current post-roll needs a bunch of work anyway.

Also, what do you get if you click "Share"?  It's going to need to bring up yet more UI for getting the URL, showing various places you can share it, etc.

Comment 17

[Cassie McDaniel [:cassiemc]]

Thanks Dave, helpful! Responses/Qs below.

(In reply to David Humphrey (:humph) from comment #16)
> does clicking Remix on the header remix the page that
> has the iframe in it, or the inner iframe doc?  For simplicity I'd argue we
> have both Remix buttons do the same thing, namely, remix the thing in
> Popcorn Maker.  

Agreed. It should remix the project itself, not the page it is held in.

> If so, do we want to harmonize the icons used (forking
> arrows vs. recycle arrows)?  

Yes, we would. The "recycle" icon was something that was mentioned to me as having user confusion. We could keep the recycle concept, maybe change it from the fat arrows that are the *exact* recycling icon, but the fork icon is working for me in terms of explaining what it does, and getting people into a dev mindset. Chloe mentioned it may not be intuitive without the word "remix" next to it. But I think if it appears in enough places, that would be okay. Would we need to educate past users on the change?

> Do we want to change the post-roll in Popcorn
> Maker when you're in a Make Detail page, and not duplicate all that data? 
> The current post-roll needs a bunch of work anyway.

Is this documented anywhere? Not entirely sure what you mean by post-roll.

> Also, what do you get if you click "Share"?  It's going to need to bring up
> yet more UI for getting the URL, showing various places you can share it,
> etc.

Indeed! Wasn't sure about this functionality. Do we want to use the "share this" kind of UI, or something a bit extra like bit.ly, that lets you copy the url to clipboard, etc. We should narrow this down. I can take a first stab but if you know of something we've used before that would be great.

Comment 18

[Mike Beltzner [:beltzner, not reading bugmail]]

Can we close this out, seeing as the implementation of the first pass is done?

Comment 19

[Cassie McDaniel [:cassiemc]]

Closing.