Skip to content
atsengucla edited this page May 25, 2012 · 2 revisions

A first draft list to get us going for defining structural names. I've been researching web content types and metaphor patterns used by HCI/UI. Below is a first pass collection of terms, groups by their origin of context to allow for easier organization.

HIERARCHICAL Information LAYOUT (From Journalism/Print Media/Static Web Information/Content):

header primaryNav secondaryNav tertiaryNav primaryContent secondaryContent tertiaryContent footer

NON-HIERARCHICAL & Interactive Information (From Data/Digital Media/RIA/Ajax/Mobile):

metaphor:

  • carousel
  • grid-of-equals
  • slideshow
  • palette & canvas
  • master & slave
  • music library
  • map
  • dashboard
  • calendar

behavior:

  • search
  • guidedNav
  • fade
  • transition
  • reveal
  • malleable/transform

MAJOR MODULES:

list gallery menu nav guidedNav search landingPage contentPage revealedContent malleableContent form media widget button icon behavior metaphor

(html5 Tags-- make sure not to conflict w these for forward compatibility!)

aside article details summary figure figcaption header section time caption nav audio video source embed track

From Journalism/Publishing/Print Media (use these terms for Articles & Editorial Content):

pullQuote testimonial biography author byline pubDate colophon errata bibliography title tableOfContents bookmark dataTable billboard poster flyer notePad checklist calendar outline contactInfo archive library tabloid aboveTheFold credits footnote endnote citation grid layout page map chart manual column gutter baseline ligature directory copyright annotation blurb characterCount pageCount insert hairline masthead pagination revision subscription watermark

From Media/TV/Film (use these terms for Media):

advanceControls mediaPlayer playerControls gallery caption timeline clip track animation slideshow camera thumbnails

From IA menu variants (use these terms for Structure & Navigation):

subMenu disclosureMenu megaMenu guidedMenu relatedResources

From IA nav variants:

tabbedNav breadcrumbNav utilityNav xtrasiteNav barNav treeNav skipNav stepNav siteMap quicklink

From Data & IA search/browse/filter strategies:

facet category keyword guidedSearch azIndex pagingControls resultSet dataSet query searchField searchResults searchButton

From RIA (use these terms for AJAX/Rich Internet Applications):

dashboard widget behavior application dataSet

From microdata (html5):

itemscope itemtype itemid itemprop itemref

address person

name title affiliation nickname url street-address locality region

From web2.0 and micro-formats:

metaData geo latitude longitude vcard org tel newsFeed tag syndication

From AJAX (use these terms for Behaviors):

behavior metaphor

animation effect motion transition

microlink accordionDrawer slider sliderBar progressIndicator drillDown dataGrid suggestion liveSearch statusArea status update popup overlay spotlight highlight toolTip

RIA (Rich Internet Applications) Patterns (use these terms for Layouts):

masterDetail columnBrowse searchResults filterDataset form paletteCanvas dashboard spreadsheet wizard questionAnswer parallelPanels interactiveModel blankSlate