Closed
Bug 871027
Opened 12 years ago
Closed 12 years ago
Third pass: Teach design
Categories
(Webmaker Graveyard :: webmaker.org, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: cassie, Assigned: jfong)
Details
(Whiteboard: uxdesign, uidesign)
Attachments
(2 files)
Iterating on feedback/input from bug 866695
Useful resources:
* http://openmatt.org/2013/04/30/hackable_kits/
* https://webmaker.org/en-US/kit-prototypes/
* draft documentation on how to earn a Webmaker Mentor badge: https://teach.etherpad.mozilla.org/badges-mentor
* draft technical documentation: https://etherpad.mozilla.org/Mentor-Badges-technical-documentation
Reporter | ||
Updated•12 years ago
|
Whiteboard: uxdesign, uidesign
Comment 1•12 years ago
|
||
Comment 2•12 years ago
|
||
@ Cassie: I created this mock-up to try and get it straight in my own head a bit.
* key challenges / questions:
* is this roughly what you have in mind for the gallery?
* how do we surface community and the mentor mission more? suggested a crude stamp approach -- but might be something better that takes up less real estate?
* suggested showing Mentor badge on this page next to "become a Mentor button." to tease it / make it more visual
* Still working on copy for CTAs in blue carousel.
Comment 3•12 years ago
|
||
@ Laura: FYI on how new /teach page is shaping up. Implementation of the "everything's a make" approach to the teaching guides / kits gallery.
Assignee | ||
Comment 4•12 years ago
|
||
This is for Cassie, Brett and Mike:
So I noticed some inconsistencies with this design and the homepage design. Cassie, Brett, Mike can you verify the changes before I do any implementation?
A couple of things where I need clarification:
1. Cassie - The white half discs at the top of each teach item - are they only for teach? Since the makes on the homepage don't have this, is this still ok, or would it be best to simplify and not have it where some have discs and some don't.
2. Brett, Mike - does the Make API return avatars for users? If not, where are we getting these avatars from? Will there be both retina and non-retina versions in the response?
3. Brett, Mike - what are the dropdown options for the teach page in 'sort guides by'? Are these all ready in the Make API? If so, what is the search call for them?
4. Cassie, Brett, Mike - Where does the 'Become a Webmaker Mentor' link to? And what is that popcorn icon that is beside it? Does it only appear when you hover over or is it always there? What happens to that icon once you're in mobile view since it'll be cut off from the edge?
5. Cassie, Brett, Mike - Is that graphic of the Webmaker team a stamped item?
6. Cassie - The 'Load more' button is inconsistent with the one on the homepage. It seems like it would make sense if they were both in the same style - which should this page have?
7. Cassie, Brett - Are there limitations to how much text displays in the description per teach item, Level and Skill sections? If someone writes a lot of text it will break the layout of the element unless we force a strict height. If we force a strict height, long text will be cut off. The CSS 'text-overflow: ellipsis' only works for horizontal limitations not vertical.
8. Cassie, Brett - What happens when the dropdown for sorting changes the content? Does the stamped item always stay and the other items are replaced? Or does it go away?
9. Brett, Mike - What is the search filter for teach items? I've been told it might be 'kit' but this hasn't been confirmed. Please let me know what the final term is so that I can test with it. And I will need actual content on the staging server to pull from that I can also sort on (e.g. need them to be tagged with the proper teach tag and in the various sort options).
So it looks like I can't start working on this until most of these questions are answered since this current mock is unclear to me at the moment.
Thanks!
Comment 5•12 years ago
|
||
I'll leave this to Mike and Cassie, but I did create a series of makes tagged as "guides" that you can use to start the basic gallery design.
Comment 6•12 years ago
|
||
1. Cassie to decide. My $0.02 is that these are special types of "makes" and ought to have a different visual appearance to let people understand that they are ... different.
2. Not presently, but I think it will have to. Right now our SSO solution pulls images from Gravatar, and we have a "no avatar available" image to use. Based on the other design mockups I've seen, we're going to need to have a user-level avatar, and the MakeAPI will need to be able to return it. For now, I think you can leave a spot for the image to go and just leave it blank.
3. Same as the Make Gallery; if you want a more reasonable subset, though, I'd go with "Title", "Creator", "Date" - should all be in the MakeAPI already.
4. I'm pretty sure the Popcorn Maker icon is a placeholder until we get the Mentor badge design finalized (see bug 863934) For now it should point to /# - eventually it'll be a static page that has the basic content to be provided by Matt.
5. Yes.
6. Cassie to answer; I'd sync with the latest homepage mockups, though, as that's where her focus has been.
7. No limitations at the API level, let's go with a strict height and risk the cut off. Damn you, CSS.
8. Stamped item should go away, IMO, but up to Cassie.
9. As Brett mentioned, the tag is "guides"
Assignee | ||
Comment 7•12 years ago
|
||
Just chatted with Cassie:
1. The half circle is not part of spec, so it will not be included.
2. Stamped item only appears on initial load - if sorting happens, it goes away.
3. Since gravatar functionality will not be ready by June 15th with a guarantee (as discussed with jbuck) we will likely not include avatars for this launch.
4. The popcorn icon by the top is not going to be used
Assignee | ||
Updated•12 years ago
|
Assignee: cassie → jfong
Assignee | ||
Comment 8•12 years ago
|
||
Brett, I'm doing a search on the make API for ['featured', 'guides'] and it returns nothing. I also tried just ['guides'] and even ['kit'] - any idea why it might not be showing up?
Flags: needinfo?(brett)
Comment 9•12 years ago
|
||
Apologies - I tagged the content as "guide", singular. Try that?
Flags: needinfo?(brett)
Assignee | ||
Comment 10•12 years ago
|
||
That works - thanks!
Assignee | ||
Comment 11•12 years ago
|
||
Matt, do you have the original image of the group shot in the mock? Can you add it to this bug? Or attach your PSD? Thanks!
Flags: needinfo?(matt)
Comment 12•12 years ago
|
||
sure, here's the photo: http://michellethorne.cc/wp-content/uploads/reps-athens-scary-face-e1365684132131.jpg
Flags: needinfo?(matt)
Assignee | ||
Comment 13•12 years ago
|
||
Brett, where do I get metadata from the make API to output the 'level' and 'skills' information? I don't see anything in the current response that matches.
Flags: needinfo?(brett)
Assignee | ||
Comment 14•12 years ago
|
||
Attachment #752942 -
Flags: review?(ross)
Comment 15•12 years ago
|
||
Comment on attachment 752942 [details]
Add teach page changes
Made a couple of comments - none too big to stop this landing, up to you on if you want to go with them
Attachment #752942 -
Flags: review?(ross) → review+
Assignee | ||
Comment 16•12 years ago
|
||
The changes in this code only change the main page and do not include the search filter or the CTAs on the footer. These will be consolidated in https://bugzilla.mozilla.org/show_bug.cgi?id=873154
Comment 17•12 years ago
|
||
Commits pushed to master at https://github.com/mozilla/webmaker.org
https://github.com/mozilla/webmaker.org/commit/650cf41a52f21144eb1f49a520148074ef39390a
[bug 871027] added teach page
https://github.com/mozilla/webmaker.org/commit/0b03a34dd714243728e4aceb7e0cf1834a920d22
Merge pull request #25 from ednapiranha/bug871027
[bug 871027] added teach page
Assignee | ||
Comment 18•12 years ago
|
||
merged in: https://github.com/mozilla/webmaker.org/commit/0b03a34dd714243728e4aceb7e0cf1834a920d22
I'll need the update from Brett about the make API skills/level metadata but I can submit that as a separate commit if different from my default. Currently, I assume I can get a data.level and data.skills from the response but I suspect it might not be the same.
Comment 19•12 years ago
|
||
Jen, here are the criteria we need to be able to filter by:
recommended/highlighted - (tagged as "featured")
recently made (list curated by admins) <-- calling "most recent"
For popcorn (tagged as "guide:popcorn")
For thimble (tagged as "guide:thimble")
made at an event (tagged as "guide:event")
Title
Flags: needinfo?(brett)
Assignee | ||
Comment 20•12 years ago
|
||
I think this is complete?
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•