Naming components

Components/objects/items/elements in pages/screens come in several flavours, grouped in these noun families. Such component type naming convention is needed for universal understanding. It will be used for clear communication in documentation and verbal reference, for example in requirements/SCRUM story writing. 

High-level (abstract) components:

  • Lister  
    • Description: a repeated set of data or elements, usually in a certain sequence pattern.
    • Used for: overviews, tables, databases
    • Common byproducts: More link
  • Box (block, container, holder, panel, frame, iframe. dialog)
    • Byproduct: border, seperator, divider, gutter/whitespace
  • Navigator (menu, browser, explorer, search)
    • Scrollbar, menu.
    • See also: selector, lister+button
  • Bar (Toolbar, menubar)
  • Selector (picker, chooser)
    • Examples: radiobutton (single-choice selector), dropdown menu (single), checkbox group (multiple), checkbox group (single, mutually exclusive)
  • Link/button
    • Used for: direct action
    • Common additional elements/pendants: progress feedback
  • Text/label/string
    • Variants: error message, title/header, subtitle, extract/preview
  • Screen   (parent=domain,website,microsite)
  •               Page, Window, pop-up, lightbox, dialog, e-mail, print.css
    • Variants: scrollbar, status bar, browser buttons
  • Sound, alert, notification
  • Interactive, video, player
  • Transparent overlay (opaque), superimpose
  • Form (input field, open text field)
  • Noun-less components (Paging, login, tag cloud, captcha)
  • Range/value selector: Slider, stepper (numeric up-down), scrollbar, number box


  • (Java) API docs
  • O’Reilly Jeniffer Tidwell’s Patterns book

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: