Update homepage design - Githubissues

patternleaf commented 11 years ago

@PitonFoundation/developers any specific suggestions here? my initial thought:

the first slideshow (with links/short headers) becomes automatic, no sliding—fading from one to the next—without links. Can we add images to each slide? I feel like the bare headlines are very wordy things to be dealing with at the top of the page.
combine the three featured slideshows—Projects, Stories and "Featured on Floodlight" into one controllable slideshow, with possibly some little widget/button that indicates whether the current slide is a project, a story, or ... other? that button would also be a filter. would need to mock this up if it seemed necessary. maybe it's not necessary.
Supporting Foundations. seems ok to me.

so this would result in only one controllable slider on the front page with the whole arrows-and-pagination-buttons treatment.

bpawlak commented 11 years ago

I'd still suggest we discuss my initial designs for the home page... I think I've addressed most of the issues and we can get rid of all of the superfluous sliders (https://docs.google.com/file/d/0B7ipktENBWzTY0RNYW5oWmN1aFU/edit)

patternleaf commented 11 years ago

hey @bpawlak — i wasn't on the discussion for the general homepage redesign so didn't realize there was a larger effort afoot. just saw this issue assigned to me. on the standup call we're discussing folding this issue into the larger effort.

jwirfs-brock commented 11 years ago

Here's an updated homepage sketch. It basically has the same elements as Bill's design:

Simplify homepage according to layout above (1. featured stories slider 2. a real brief "create your story/want to contribute" section)
move the “featured on Floodlight” section below these
Keep footer with foundation information
Add banner (in Iteration 10) -- can build off caching that Geoff did for Explore page

There are also more notes about this here: https://docs.google.com/document/d/1eBYGQJJ9G0sWBQS2QNPYD1bP6fC3LxTQGIODfSYT-qw/edit

ghing commented 11 years ago

Updated title from "Need to address home page sliders (too many, inconsistent layout and interaction)" to reflect larger home page redesign needs, moved to Iteration 9.

jwirfs-brock commented 11 years ago

Here's a wire frame that synthesizes the mock-ups that @bpawlak and I did earlier:

FL_homepage_redesign

Some notes:

"Floodlight News" is the slider formerly known as "Featured on Floodlight".
I didn't include the footer, but we can keep it the same (for now), including the "Supporting Foundations" widget
I also included the at the story top banner, which is currently assigned to Iteration 10. So the version of the homepage we'd do in Iteration 9 won't have the banner.
Right now, "View stories," "View projects," and "View organizations" is just text -- we could definitely make this part more graphically appealing.
We'll want the icons at the bottom of the sliders (that indicate how many elements are in it) to show up closer to the slider (right now, they are being pushed down/there's a lot of space). I think this was logged as an issue, but I can't seem to find it at the moment...

@PitonFoundation/developers suggestions?

wendynorris commented 11 years ago

Couple questions about the banner:

• Do we have a mockup/sketch of the presentation and the link behavior? • Are these static story tiles or another slider? • Are they story tiles only thumbnail featured images or do they also include titles? bylines? dates? • How many story tiles will appear inside the banner container? • Do the story tiles auto-populate by most recent post date or can they be curated by the admin using tags, locations, projects or organizations?

This layout could conceivably better direct users to further/more deeply explore the site but it would help to know a little more about how the banner story tiles are being integrated into that larger goal. Thanks!

jwirfs-brock commented 11 years ago

In Iteration 9, we won't have the banner. But we talked about implementing the banner in our user feedback discussion: https://docs.google.com/document/d/1eBYGQJJ9G0sWBQS2QNPYD1bP6fC3LxTQGIODfSYT-qw/edit

Essentially, Geoff can use the optimization he did to make the Explore page load faster to ensure the banner will also load quickly.
We have the mockup from Geoff Thomas's original comps. I think everyone liked the way that looked, so I'm fine to go with that design unless there are any objections.
Clicking on a story in the banner would take the user to the story detail page for that story.
We discussed having the banner refresh with stories once a day (or some other interval that would optimize the loading time).
It would not show titles, bylines, or dates, only featured images. The general concept is for it to be intriguing/pique curiosity.
We had not decided on a way for picking stories for the banner, but discussed a couple of options: most recent, by topic/tag, random. Geoff suggested that it could be kind of like a hidden scavenger hunt for people to try to figure out what is driving the banner.

On Fri, Dec 14, 2012 at 9:01 AM, tekhneCO notifications@github.com wrote:

Couple questions about the banner:

• Do we have a mockup/sketch of the presentation and the link behavior? • Are these static story tiles or another slider? • Are they story tiles only thumbnail featured images or do they also include titles? bylines? dates? • How many story tiles will appear inside the banner container? • Do the story tiles auto-populate by most recent post date or can they be curated by the admin using tags, locations, projects or organizations?

This layout could conceivably better direct users to further/more deeply explore the site but it would help to know a little more about how the banner story tiles are being integrated into that larger goal. Thanks!

— Reply to this email directly or view it on GitHubhttps://github.com/PitonFoundation/atlas/issues/433#issuecomment-11381167.

wendynorris commented 11 years ago

Thanks Jordan!

I wouldn't recommend any new presentation element that requires the user to discover its purpose. While Easter eggs or other "delights" may be a UX benefit for people like us, i don't think that's wise to attempt increasing engagement with our current user group. They seem confused enough about Floodlight's purpose and navigation.

On that, too, I'd reconsider the lack of titles with the thumbnails.

Sorry. Gotta run. More later.

On Friday, December 14, 2012 x-apple-data-detectors://1, Jordan Wirfs-Brock wrote:

In Iteration 9, we won't have the banner. But we talked about implementing the banner in our user feedback discussion:

https://docs.google.com/document/d/1eBYGQJJ9G0sWBQS2QNPYD1bP6fC3LxTQGIODfSYT-qw/edit

Essentially, Geoff can use the optimization he did to make the Explore page load faster to ensure the banner will also load quickly.

We have the mockup from Geoff Thomas's original comps. I think everyone liked the way that looked, so I'm fine to go with that design unless there are any objections.

Clicking on a story in the banner would take the user to the story detail page for that story.

We discussed having the banner refresh with stories once a day (or some other interval that would optimize the loading time).

It would not show titles, bylines, or dates, only featured images. The general concept is for it to be intriguing/pique curiosity.

We had not decided on a way for picking stories for the banner, but discussed a couple of options: most recent, by topic/tag, random. Geoff suggested that it could be kind of like a hidden scavenger hunt for people to try to figure out what is driving the banner.

On Fri, Dec 14, 2012 at 9:01 AM, tekhneCO <notifications@github.com<javascript:_e({}, 'cvml', 'notifications@github.com');>> wrote:

Couple questions about the banner:

• Do we have a mockup/sketch of the presentation and the link behavior? • Are these static story tiles or another slider? • Are they story tiles only thumbnail featured images or do they also include titles? bylines? dates? • How many story tiles will appear inside the banner container? • Do the story tiles auto-populate by most recent post date or can they be curated by the admin using tags, locations, projects or organizations?

This layout could conceivably better direct users to further/more deeply explore the site but it would help to know a little more about how the banner story tiles are being integrated into that larger goal. Thanks!

— Reply to this email directly or view it on GitHub< https://github.com/PitonFoundation/atlas/issues/433#issuecomment-11381167>.

— Reply to this email directly or view it on GitHubhttps://github.com/PitonFoundation/atlas/issues/433#issuecomment-11384679.

jwirfs-brock commented 11 years ago

@bpawlak would you feel better about it if "Featured News" and "Featured Projects" were just one item, instead of sliders?

jwirfs-brock commented 11 years ago

One small suggested update to the wireframes: Below the "Create Your Story" BAB, let's have a text link that says, "New to Floodlight? Create a free account to get started."

bpawlak commented 11 years ago

I think they're ok as being separate sections (news is very different from projects), but I don't necessarily think they need to be in sliders... why not just simply list the 3 latest news stories (with a link to view more) and 3 featured projects (again, with a link to explore more projects)? Putting them in sliders just makes extra work for users that I don't think is always justified. They're not inherently bad (and in some cases can provide a nice aesthetic) but having 3 different sliders makes more work for everyone and doesn't really differentiate any of them from the others.

And as for the button, one thing I suggested was potentially a button that looked like

mockup

jwirfs-brock commented 11 years ago

@bpawlak How would you suggest we show the top 3 items without a slider? Just in a list format?

bpawlak commented 11 years ago

Yep. See the "What others are saying" or the "latest contributions" list in the footer on our earlier wireframes (https://docs.google.com/file/d/0B7ipktENBWzTY0RNYW5oWmN1aFU/edit). Just a suggestion...

jwirfs-brock commented 11 years ago

Here is a synthesized and updated homepage redesign wireframe, based on the comments in this thread:

Below the second horizontal line, we will have "Supporting Foundations" as it is on the current homepage
The top slider will contain all featured items (stories, news, projects, etc.) in one slider. This cleans up the design and some of the confusion, too.
@patternleaf suggested that the slider automatically rotates. I think we should do this.
The lists below the first horizontal line will have the most recent stories (based on when they were created), organizations and projects (based on when they were last edited/updated).

Questions for @bpawlak and @PitonFoundation/developers:

@patternleaf suggested that with all types of items in a single slider, we could have "possibly some little widget/button that indicates whether the current slide is a project, a story, or ... other?" Thoughts on whether this is necessary? I like having an icon that shows up in a corner of each image. I don't think it needs to be a filter.
Should the lists of recent stories, organizations, and projects be a) just a link b) link + thumbnail image c) link + thumbnail + blurb, similar to the "list view"? Note that we don't have much room here, so I prefer (a) or (b), but I'm still throwing those other options out there.

@patternleaf Given the complexity and nature of the homepage updates, do you think it makes sense to keep them all in one GitHub issue/user story, or to break them out so we can prioritize/schedule them easier?

FL_homepage_redesign_010713

bpawlak commented 11 years ago

Even if we simply had a small bit of text that said "Story" or "Project" or whatever above the link:

carousel

And as to the Latest Stories... I think a small thumbnail image from the story reinforces the fact that we're encouraging visual storytelling and adds "life" to the page. I agree that blurbs/excerpts might be too much text.

jwirfs-brock commented 11 years ago

@bpawlak I like both of those suggestions. The only problem with the thumbnail is that the featured images for stories don't have standard dimensions. @ghing Any ideas about how to solve that?

ghing commented 11 years ago

@jwirfs-brock - I was looking at how Cowbird handles images and it gave me two ideas for handling images in our layouts:

Accept that our images won't be fixed height and design layouts accordingly. We decide that giving users more flexibility in which images they want to use and minimizing the amount of image editing required is more important than having a clean layout. The fact that we're trying to have fixed-height images in the explorer seems particularly silly since the masonry effect already lets us have blocks of variable height that fit together without ugly gaps. For the homepage, my question is this: does horizontal alignment provide some kind of semantic information (for instance horizontally adjancent elements being related or the same kind of thing)? Or, is all that's important is the hierarchy (higher up elements are more important than lower down ones)?
When viewing images in Cowbird's story viewer, there is a gentle mouse activated scrolling effect. We could use Javascript to create a similar effect in all contexts where we want to have a fixed-height image. So, all images on the front page would get clipped to the same height but when moused over, the user could move the mouse down to reveal the hidden part of the image.

In general, we can autocrop uploaded images, which seems to be the most frequent case, which is probably a good idea, but we still have to account for the case of embeded images where we can't easily autocrop.

jwirfs-brock commented 11 years ago

I like this idea a lot, especially for the explore page.

How hard would it be to mock this up for the explore page? (We could have a fixed image width, and then let the height be dictated by the aspect ratio, and the tiles would still fit, right?)

For the homepage, the horizontal alignment doesn't have any meaning (at least not as it is designed now). The information is stored in the vertical hierarchy. Here as well it might be interesting to have a fixed horizontal width and variable height. Sometimes, it's easier to make that look nice when you have text to wrap around it, which we won't have because we won't be displaying summaries. Again, how easy would it be to mock this up so we can see what it looks like with real images?

I find the mouse-over scroll cool, but also kind of distracting. Also, is it difficult/time consuming to implement? We'll have fewer sliders/motion elements in the new design, so it may be nice to add in some dynamic elements. But then again, we'll be adding the banner soon (where we'll also be dealing with the image dimension problem). @bpawlak do you have any thoughts on this?

bpawlak commented 11 years ago

Are we talking about the Explore page or just the 3 small thumbnails on the "latest stories" container on the home page? Because if it's the latter, then the thumbnail is already going to be kind of small (which is ok)... I don't think it's worth the effort to expand/grow the thumbnail - it's just a visual reference.

ghing commented 11 years ago

@bpawlak, the mouse-over scroll effect was just an idea for a way to make images fixed height but still making it possible for users to see the entire image in a way that is subtle. The image wouldn't expand and grow (that would be visually noisy). Instead, it would slowly scroll within the fixed-height frame.

I think before I mess around with that idea, I want to do some experiments with auto-cropping images which seems like it would be a better fit for most situations where we want a fixed-height image.

bpawlak commented 11 years ago

Yeah, I saw that after I posted to github... I meant to go back and edit my comment but forgot! FWIW, I think the auto-cropping is probably all that's really needed (esp. on the home page)

ghing commented 11 years ago

I'm going to investigate automatic cropping strategies as a way of making the images for the featured items (upper right hand corner of proposed design) and thumbnails (lists in lower row of new design) can have a more consistent height. I don't think this is blocking at all for you, @patternleaf.

I also think we should take this opportunity to make news items a content type that can be edited in the Django admin. I can handle this part of things.

One important consideration is that with the new layout for the homepage, the featured item list will contain 4 different types of content: stories, news items, projects and organizations. This makes selecting and ordering these items a little more complicated.

For a first pass, @jwirfs-brock and I decied that we should show content items in this order: story, news item, project, organization. Right now, the featured blocks show the 4 most recently edited items with the featured_on_homepage flag set. Rather than imposing a limit in the code, I think it's easiest to just show all items with the featured_on_homepage flag set and leave it up to the admin to deselect items that should no longer be shown on the homepage. @patternleaf, check in with me before you get started on this part of the homepage if this is unclear.

patternleaf commented 11 years ago

@patternleaf Given the complexity and nature of the homepage updates, do you think it makes sense to keep them all in one GitHub issue/user story, or to break them out so we can prioritize/schedule them easier?

@jwirfs-brock, for now i think the single issue is good. as the nature of the task becomes clearer, we can break things out if it seems appropriate.

@patternleaf, check in with me before you get started on this part of the homepage if this is unclear.

when i get to this part, i'll check in to make sure i'm on the right page.

ghing commented 11 years ago

@patternleaf, FYI, I'm removing the hard-coded news items from the homepage template as part of #567 just to think about any considerations I'm missing to show news.

patternleaf commented 11 years ago

@all, the homepage is reviewable at http://deploy.atlas.terrorware.com/ (Friday Jan 18th ~11am).

However, note the above three issues outstanding: #575, #574, #573.

bpawlak commented 11 years ago

I know I sound like a broken record, but can we make the title left-justified? That center justified look just doesn't work for me.

ghing commented 11 years ago

I agree with @bpawlak about the center-justified titles. I don't like them either. I feel like there are other places in the site I'd like to see them go (e.g. the explore view tiles). I think we should adjust them here, and maybe open a separate issue for changing them elsewhere.

ghing commented 11 years ago

Also, I find the line-height of the "Everyone's got a story to tell ..." title to be a bit much. Bumping it down to 1.2em or 1em (from 1.4em) looks better to me.

bpawlak commented 11 years ago

I've always said I'd like to see us lose them site-wide, so making that a new issue works for me.

jwirfs-brock commented 11 years ago

I agree on making the "Everyone's got a story to tell..." text a bit smaller and left justifying the story title.

On Fri, Jan 18, 2013 at 11:18 AM, bpawlak notifications@github.com wrote:

I've always said I'd like to see us lose them site-wide, so making that a new issue works for me.

— Reply to this email directly or view it on GitHubhttps://github.com/PitonFoundation/atlas/issues/433#issuecomment-12434450.

jwirfs-brock commented 11 years ago

The center-justified title doesn't bug we on the Explore page, but we can change that, too, based on @bpawlak's suggestion. Are there other places on the site where titles appear center justified, or is that it?

I've opened an issue for it, #576, and put it in Iteration 11.

On Fri, Jan 18, 2013 at 2:31 PM, Jordan Wirfs-Brock jordanwb@gmail.comwrote:

I agree on making the "Everyone's got a story to tell..." text a bit smaller and left justifying the story title.

On Fri, Jan 18, 2013 at 11:18 AM, bpawlak notifications@github.comwrote:

I've always said I'd like to see us lose them site-wide, so making that a new issue works for me.

— Reply to this email directly or view it on GitHubhttps://github.com/PitonFoundation/atlas/issues/433#issuecomment-12434450.

bpawlak commented 11 years ago

Well, the main page titles are center-justified (i.e., Grow Your Skills, About, Resources [http://floodlightproject.org/en/grow-your-skills/resources/], etc.).

patternleaf commented 11 years ago

@bpawlak @ghing @jwirfs-brock could i get a quick review of the homepage title spacing/size:

http://deploy.atlas.terrorware.com/

ghing commented 11 years ago

Works for me.

jwirfs-brock commented 11 years ago

The only thing that I noticed is that in the slider, the boxes indicating which item you are on still appear at the bottom, of the box, no matter what the length of the individual item is. With shorter items, you end up with a lot of white space. Not sure if that bugs anyone else.

The titles look good to me.

jwirfs-brock commented 11 years ago

Also, should we have a length limit on the text that appears in the slider? We could just truncate anything that is longer and have a "...read more" link.

bpawlak commented 11 years ago

What about something like this (making the main title much larger and bold) floodlight_main

ghing commented 11 years ago

@jwirfs-brock We could do that, but it's not trivial. How long should the text be before it's truncated? Also, does the read more link reveal the hidden text in-place, or is it just a link to the detail page for that item? I'd argue that automatic truncating should only happen for stories and projects and that you should just take care with the news items that you edit manually.

Finally, is the motivation for this to keep the featured box a relatively fixed height?

bpawlak commented 11 years ago

And to @jwirfs-brock, yes I think we should truncate the amount of text used for the slider. Also, to eliminate the amount of white space that happens at the top (esp. with icons like the microphone), perhaps we could put the Story title and byline/date above the photo?

box

I would think we could find a plugin to truncate the text to 100, 150 characters and clicking on the more "more" link would take the user to the story detail page.

jwirfs-brock commented 11 years ago

@ghing Yes, the motivation is to keep the slider at a (somewhat) fixed height. I would suggest a "read more" link just go directly to the item, and I agree that we should manually make sure news items are short.

patternleaf commented 11 years ago

@ghing @jwirfs-brock @bpawlak re: white space. even with the text area a fixed-height, the homepage still appears imbalanced as it is. there's a bug for this specific issue: #573.

also i just commented on that issue with a crazy idea for what to do with that white space.

jwirfs-brock commented 11 years ago

@bpawlak With the larger title, what would it look like if it were all on one line?

bpawlak commented 11 years ago

home2

patternleaf commented 11 years ago

If no one has any objections, I'm going to close this. Doc for discussion (with most decisions included) is here:

https://docs.google.com/document/d/1GlEbrx7-sl4soh0pspTnQxs3Rgtj8oh5lsIgtRIcU-8/edit#

Also, I've made issues in iteration 9 for the remaining items—at least those assigned to me, which I think is all of them.

patternleaf commented 11 years ago

Closing! Geoff is planning to stage the latest later today.

denverfoundation / storybase

Update homepage design #433