Choose carousel technique

[meiqimichelle]

• I chatted with @shawnbot about favorite carousel implementations for the homepage
• We both agreed that this design is very simple and so don't want to include a huge carousel library just for this
• We may be including jquery in this project for other reasons. If yes, then we will likely use a jquery carousel
• If we're not including jquery, then @shawnbot may code up a simple stand-alone carousel if we can't otherwise find a lightweight, stand-alone implementation

[ErieMeyer]

Hi!

I would love to understand the user story more around why we would use a carousel.

I personally have always seen low benefit from carousels if the goal is to get people to browse, but want to know more about the user need.

[shawnbot]

We may not necessarily need a carousel, but that's what was implied by the arrows in @jjoteal's comp from #3:

For the record, though, I (personally) strongly dislike carousels. Jessica, how were you thinking this would work?

[LisaGee]

In the Usability Testing we found that students were drawn to the big 85% number / Key Fact. So we wanted to give them the opportunity to flip thru a few of them. I’ve actually found carousels to very successful at highlighting/showcasing a few pieces of highly visual content, much like a photo flipbook. If you have another suggestion for enabling users to see a few infographics, totally open to alternate options!

We also use it as a mechanism for the Data Insights on the Data Section HP.

--Lisa

From: Erie Meyer [mailto:notifications@github.com] Sent: Friday, June 19, 2015 5:04 PM To: 18F/college-choice Subject: Re: [college-choice] Choose carousel technique (#11)

Hi!

I would love to understand the user story more around why we would use a carousel.

I personally have always seen low benefit from carousels if the goal is to get people to browse, but want to know more about the user need.

— Reply to this email directly or view it on GitHubhttps://github.com/18F/college-choice/issues/11#issuecomment-113644153.

[ErieMeyer]

My general feelings about carousels are summed up here: http://shouldiuseacarousel.com/

I think that if there are infographics that we want folks to see, perhaps we should take advantage of the scrolling energy we saw? How many infographics were you thinking?

[shawnbot]

Yeah, my preference is just to put all of that content into the flow rather than either cycling through it at some predetermined interval or forcing people to click to cycle it (which, as you can see at that URL, people don't tend to do as often as you'd like).

[jjoteal]

I also am not a big fan of carousels and am very familiar with the link that @ErieMeyer shared. My preference would be NOT to use a carousel and instead display the infographics randomly at new page visit or page refresh. Since there's a link to "view more key facts" I think this addresses the use case where very interested users could access more infographics if they want to. Another option would be to introduce some kind of a swipe interaction for the mobile version.

[LisaGee]

I defer to the wisdom of the crowd, especially as you are design-y people ☺

For the record, I ran a website (BET.com) for 5 years where the items in the carousel always got more clicks that anything further down the page. We even did user testing with eye tracking and the amount of time spent on the carousel area was much higher than the scan down the rest of the page. There were likely factors that contributed to that: big impact images, thumbnails of items coming next, auto-rotation and I’m specifically talking about Desktop views. Although I know the stats on our older mobile page, also showed the same pattern.

Next steps. I think carousels are currently used in 2 places:

1.  The Consumer Tool HP - I guess the next steps is to figure how many Key Fact Infographics we think a user could sustain in one pass. I’d guess 3.  What would a better presentation for 3 infographics be on the page?  Any suggestions? (Maybe cut down the Text heavy By The Numbers section to just a few?)

2.  The Data HP – for Data Insights – Same thing. I’d guess researchers and media would be interested in 3-4 important data insights. What’s a better way to display those on the page?

Open to alternatives… Thanks, y’all.

--Lisa

From: jjoteal [mailto:notifications@github.com] Sent: Tuesday, June 23, 2015 1:44 PM To: 18F/college-choice Cc: Gelobter, Lisa Subject: Re: [college-choice] Choose carousel technique (#11)

I also am not a big fan of carousels and am very familiar with the link that @ErieMeyerhttps://github.com/ErieMeyer shared. My preference would be NOT to use a carousel and instead display the infographics randomly at new page visit or page refresh. Since there's a link to "view more key facts" I think this addresses the use case where very interested users could access more infographics if they want to. Another option would be to introduce some kind of a swipe interaction for the mobile version.

— Reply to this email directly or view it on GitHubhttps://github.com/18F/college-choice/issues/11#issuecomment-114586252.

[jjoteal]

I'm happy to come up with some alternatives. I'll add this to my to-do list!

[jjoteal]

@LisaGee - what do you think of this as an alternative for the Data Site carousel (essentially just a list of 3 featured excerpts with a link to view all):

[LisaGee]

Thanks, Jess. I personally think that making a more prominent "designed" pull quote that stands out would better capture the attention of the audience. I think this would be too much of the same in one place, which means there wouldn't be much of a visual differentiator between that section and the rest of the elements on the page. I know y'all hate me but I'd prefer a carousel with 4 items that auto-rotates every 2 seconds for the desktop version, which is where we expect the data portion of the site to be primarliy used. Maybe another alternative might be to sprinkle pull quotes in 3 places down the page, similar to how news articles do -- but somehow visually differentiate them from the other elements on the page, but make that differentiation consistent so that the user knows that a pull quote above is the same type of thing as a pull quote lower in the page. Bottom line -- we need more "jheujj" (sp????)

[jjoteal]

I don't think I like the "sprinkling" approach because this type of content is geared mostly towards those who are trying to figure out "why is this important/why does this matter." I feel as though the sprinkling would get in the way of the users really just trying to "get down to business" when they come to the site (which I feel would be the majority of our audience). I think the sprinkles might just get in their way, be interpreted as "fluff," and ultimately ignored. Especially since this isn't a news site or an article page.

Thoughts on having 1 prominent pull quote followed by 2 not as prominent pull quotes in that same hero space?

Anyone else have any thoughts/ideas?

[ErieMeyer]

Very grateful for this convo.

Question -- can you paste the goals for this page again here?

Suggestion -- what about one major, punchy highlight with a "read more" link that goes to the specific data highlight page (which I think was already planned, yes?)

[jjoteal]

GOAL OF THE PAGE To show users what data is available and invite them to join the conversation.

TOP THINGS WE WANT A USER TO DO ON THIS PAGE:

1. See what Ed views as the important data (via examples and words)
2. Gain access to the data or API documentation
3. Understand what data is available
4. Understand why Ed has created this platform

PRIORITIZED FEATURES:

1. Data insights
2. Data at a glance (with link to deeper data)
3. Link to download the data
4. Link to API documentation
5. Introduction to the data
6. Follow us on Twitter // [FUTURE] Forums

And yes, we could definitely just show 1 quote, but I believe Lisa wants to display at least 3. And yes, the "view all" link goes to the full Data Insights landing page.

[jjoteal]

Also, just as food for thought, here's an alternative for the carousel on the Consumer Tool. Essentially we could showcase ~4 infographics in a rail across the page. On mobile, we could just have a swipe interface and show one at a time. Please ignore the little piggybank graphic in the Paying or College section for now -- just put that in there as a placeholder as you consider this alternative layout.

[jjoteal]

And, as additional food for thought, here's a take on the Data site with 1 prominent pull quote with a link to "view all". Maybe a highlight effect on the pull quote would bring a bit more visual interest to the page.

[ErieMeyer]

I think these look fantastic!

[meiqimichelle]

Hi all! Did we make a decision on this one yet?

[meiqimichelle]

@jjoteal I think the carousel is no longer in your latest designs. If this is true, can you close this issue? Thanks!

[barkimedes]

@jjoteal I'm gonna assign this to you. It seems like this should be a closeable issue, but I'm new 'round here so I'm gonna give you the honors :smiling_imp:

[shawnbot]

I see what you did there @barkimedes, and I like it.

[jjoteal]

Yep, closing as all of these items have been completed as intended for launch.