merylpritchett / hhmi-design-patterns

0 stars 0 forks source link

Tiled Carousel #5

Open merylpritchett opened 8 years ago

merylpritchett commented 8 years ago

Description This is a carousel of tiled promos that show multiple promo tiles at a time. Arrows on the left and right let the user cycle through more promos. Each promo has a photo, a tag/category, and a title. Some instances also have a description and more information.

:star: Recommendation :star: The carousel style on the HHMI.org homepage (http://www.hhmi.org/) is fine. However, we may want to reassess whether or not carousels are helpful in the different places they are used on the site. Styles for feedback on hover may also be helpful.


On HHMI.org

screen shot 2015-09-24 at 10 59 27 am

Link to Design: http://www.hhmi.org/

Pros: This carousel is simple and easy to use. This would transition easily to a responsive and mobile-friendly component. The style here is very clean and in-line with the aesthetic of both the old HHMI.org site and the new styles on the more recent site designs.

Cons: There is an opportunity for something more interactive. This style is very flat. We could try revealing more information on hover or having some sort of feedback on hover here to make the site feel more alive and engaging. Not sure if 9 promos here is really more effective than 3. Is there a reason these shouldn't stack in a grid instead of a carousel? What are the advantages of showing more than 3 promos here in the first place?


On BioInteractive

screen shot 2015-09-24 at 10 59 51 am

Link to Design: http://www.hhmi.org/biointeractive

Pros:

Cons: This has a 5-promo carousel on one of the two tile components. This is bit awkward; why does only one promo cycle through so many while the other does not change? The breadcrumbs here feel a little outdated and aren't in-line with the flatter and more active style of the rest of the site.


On Janelia

screen shot 2015-09-24 at 11 00 15 am screen shot 2015-09-24 at 11 00 27 am

Janelia has featured components that all display, there is no carousel. Janelia also has a separate carousel that shows one component at a time.

Link to Design: https://www.janelia.org/ https://www.janelia.org/our-research/project-teams

Pros: The multiple promos on the homepage show more diverse sizes and types of content. No promos are hidden behind a carousel. They are also not all the same size or layout, which shows the diversity of content more effectively, and allows some promos to be more prominent than others. The large single-promo carousel allows more information to be displayed about each one, and gives all of your attention to each component before it switches.

Cons: The title styles for these components aren't easy to identify. They are also much longer than on the rest of the HHMI sites so while we need a better header/title style, the body-text style here works well for the incredibly long titles on Janelia.

merylpritchett commented 8 years ago

@erbarth This component was one of the ones where the carousels seemed different enough in style and use that I wasn't sure how closely we should align them to each other. My recommendation is vague and lets them all stay different (for now) because of that.