881442 - Finalize design and interactions for gallery tiles

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Few nigglies for the gallery tiles that we should address:

* Can we lessen the angle of the turning tiles, so that they don't come up so high over the other makes when they are flipping? (less drastic)
* Icons on the front tile look clickable, but it's frustrating that you can never get to those buttons to click them. If users don't know what Thimble is, there is no clear way of understanding what the icon means (ie that it is not actually a button). Designing final iconography may help with this, but they will still need to be place correctly on the front and back sides of the tiles. This is happening in bug 881161
* Hovering over the tile sometimes causes it to be a little jerky. Not sure if this is fixable. Having a hard time finding the hover point in order to recreate this, but it does happen fairly frequently.

Beltzner, did you want to add anything here?

Comment 1

[Cassie McDaniel [:cassiemc]]

Beltzner and I discussed front page UX/UI. Here are the conclusions:

* Remove tool icon from front of tile (people can filter by tool with the dropdown)
* Remove flip functionality. It's buggy. Instead, let's have a simpler hover state, perhaps a panel that slides down over top.
* On front tile, where the tool icon is currently, put the user gravator for person who made the make.
* Add remix button to the front tile. Suggest using an icon and a word.
* Clicking anywhere on the front tile other than the remix button should take you to the make detail page. For this reason, we may not need a make detail icon/button.

To try: include the make title on the front tile, as with (I believe) the teach makes. I'm not totally convinced this will work; may distract too much. 

More QA:
* Filter gallery panel should only have 25px above it.
* Filter field should span nearly the whole width of the green background (right now it stops with space to the right)
* filter gallery dropdown button should be #27aae1
* intro line of text should only be two lines. Need to cut 7 words and potentially make text smaller.
* intro line of text should have smaller vertical space above and below it. Ideally it will sit vertically centered with the "filter the gallery" box.
* in the filter gallery dropdown, "recommended" and "featured" are very similar to the user. Let's remove "featured"; user should be able to get back to that view by clicking on the webmaker logo.

Note: we are not currently surfacing whether or not a make has a "tutorial" on the thumbnails.

Beltzner can you help me file these into separate bugs as appropriate? Need help deciding which are blockers.

Comment 2

[Cassie McDaniel [:cassiemc]]

Brett and I discussed the filter dropdown in IRC. We established what needs to be done is:

a) change the front page filter to be "recommended" and not "featured", and
b) remove "recommended" from dropdown

Comment 3

[Brett Gaylor [:brett]]

If we are going to re-design gallery tiles, then we should do this before launch.  Marking as a blocker.

Comment 4

[inactivate account for kate]

Attachment: https://github.com/mozilla/webmaker.org/pull/133

First thing, fixing the flip bug -- now it won't start off flipped when you go back in the browser

Comment 5

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/947b0e3bc6f286e38191e232271e34872058784c
[bug 881442] Fix flip on front page

Comment 6

[inactivate account for kate]

Attachment: https://github.com/mozilla/webmaker.org/pull/136/files

Comment 7

[Jon Buckley [:jbuck]]

Comment on attachment 762458 [details]
https://github.com/mozilla/webmaker.org/pull/136/files

r-

Instead of loading background images with CSS, I've uploaded the default avatars to stuff.webmaker.org:

* http://stuff.webmaker.org/avatars/webmaker-avatar-44x44.png
* http://stuff.webmaker.org/avatars/webmaker-avatar-200x200.png

You can add them to any gravatar request by URI encoding that URL and adding d=http%3A%2F%2Fstuff.webmaker.org%2Favatars%2Fwebmaker-avatar-200x200.png to the gravatar image request. It'd also be a good idea to switch to https://secure.gravatar.com URLs to remove mixed content issues.

Comment 8

[inactivate account for kate]

Comment on attachment 762458 [details]
https://github.com/mozilla/webmaker.org/pull/136/files

Update with gravatar images

Comment 9

[Jon Buckley [:jbuck]]

Comment on attachment 762458 [details]
https://github.com/mozilla/webmaker.org/pull/136/files

r+, just add the default image to views/detail.html too

Comment 10

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/9ed2b24fcfcd19a356cf9ee13650245e57536b6e
[bug 881442] Fix for front page - avatars on front, whole thing clickable, other minor touch-ups

Comment 11

[Brett Gaylor [:brett]]

Kate, did this include a refresh of filters for gallery and homepage?  I'm going to file another bug to do this, please mark as resolved if this commit covers that.

Comment 12

[inactivate account for kate]

No, the filters for gallery and homepage are not included in this commit