Billboard

Alice July 25

The hero image is a large prominent image that commands primary content attention on a landing page. Also known as a billboard. Given its importance to the page content wise, I'm basing this fact to propose it as a figure. Figure is content that is directly referenced but can be reflowed and possibly moved to an appendix (i.e. it's a piece of content that if removed -- the content would be missing something).

I'm a little fuzzy about if it could also be classified as an article. It depends on the relationship to the rest of the page -- could this be something that is completely encapsulated and not necessarily needs to reference other content on that page.

Since the hero is generally a marketing/narrative component for the site -- I am inclined to say it is less encapsulated and had more ties to the other content on that page.

FROM LOGAN ON JULY 25

I think figure is good for the reasons you state, Alice.

What do you think about abstracting this to more than just an image (ala Bootstrap's "hero unit")? The (1) Title, (2) Snarky Caption, (3) Call To Action Button pattern is so hot nowadays and I feel like I see the text sitting outside the image more and more these days thanks to @font-face.

FROM ALICE ON JULY 27

The Bootstrap pattern "Hero unit" is indeed a very common pattern - only issue is there are instances where this is not the case consistently (as in the ucla gateway example) - so I'm wondering if we treat it the same way as masthead - support the variants but not require it? I'll open a ticket and ask folks to comment on this.

FROM ALICE AUGUST 6

Group seems to be leaning towards "billboard" vs. "hero image". See discussion on issue #21. Group also has opted to have this prototype incorporate image and support optional tagline and call-to-action button as this is a common pattern seen across the web. See notes from the original conversations [07/25-27].

To recap: What we're essentially talking about is a large narrative/marketing device that is usually comprised of a compelling graphic, a slogan or (marketing pitch) and a call-to-action (sometimes a button, other times a link/lead down a "conversion tunnel"). It's used primarily for marketing websites and its function is to sell a proposition to a user.

The most common niche industry terms are "billboard" or "hero image":

The first term comes from the influence of traditional print marketing -- the physical billboard. See these sources: http://www.smashingmagazine.com/2010/10/28/billboard-web-design-how-to-win-your-audience-s-attention/

http://jayce-o.blogspot.com/2011/11/designing-banners-billboard-ads-posters.html

http://www.mlwebco.com/2010/01/website-billboard-design-best-practices/

http://www.webrisorsa.info/date/2010/11/

The second term references theater/literature (where the "main actor" of a narrative device is the hero). See these resources: http://www.everythingisdesign.com/2008/06/02/ux-dojo-storming-potterybarncom/

http://pinterest.com/pin/107312403590427588/

http://ux.stackexchange.com/questions/10312/are-carousels-effective

http://twitter.com/gadgetopia/statuses/128836667594387456

FROM Alice on August 6th

Update: I'm proposing striking my earlier vote for entity/figure/billboard to div/billboard (encapsulating img, h2, p, and a).

Further reading clarifies that this component does not qualify as a figure. See these points on importance of position (as a primary content element -- position is key) from http://html5doctor.com/the-figure-figcaption-elements/ :

Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a div, a plain old img, a blockquote, or possibly even canvas, depending on its content.

Don’t stop there!

No need to constrain your figure to images and code examples. Other content suitable for use in figure includes audio, video, charts (perhaps using canvas or svg), poems, or tables of statistics.

It may not always be appropriate to use the figure element, though. For example, a graphic banner should not be marked up with figure. Instead, simply use the img element.

Alice 8/06 Update

Group decided in meeting that Billboard should accomodate both the div and figure use-case; when the content's position is critical div should be used; when the position is not critical figure would be appropriate.

FROM ALICE ON 8/22

Coming back to finish this off. Gallery and Billboard both have optional "interactive" scenarios -- I believe that these should be handled in their own interactive class prototypes (as well as the rendered player controls). I have updated both prototypes to include the optional interactive classes for interactive features.

This follows the conventions seen in other frameworks: twitter bootstrap, YUI and BBC GEL. All the above frameworks break out complex interactive features as "interactive" or "javascript" components, plugins or widgets sperate from the base content component.

http://twitter.github.com/bootstrap/components.html#typography vs. http://twitter.github.com/bootstrap/javascript.html#carousel http://www.bbc.co.uk/gel/web/web-patterns/interaction/slideshow http://www.yuiblog.com/blog/2009/11/04/yui-3-gallery-accordion-widget/

Further writing about this technique is explored in this article: http://www.onderhond.com/blog/work/carousel-2012-update

I'm also adding a nested figure option for cases when the billboard needs to accomodate having a unique caption per image. The current recommended approach that is deemed more accessible is using nested figures with their own figcaptions. See these sources: http://www.paciellogroup.com/blog/2011/11/html5-accessibility-chops-using-nested-figure-elements/

http://dev.w3.org/html5/spec/the-figure-element.html#the-figure-element