User Interface Consistency Conventions

From the CouchSurfing Wiki, an informal workspace which anyone can edit.

Jump to: navigation, search

THIS PAGE IS OUTDATED

Now you're rocking with the Tech team
( documents • status • meetings • why we work on CS )

Contents

Purpose

To identify existing consistencies within CS website user interface (UI) and then to bring the website into conformity with those conventions. This is an intermediate step before creating a new UI and new design.

What is UI, and How Is It Separate from Design?

UI organizes content into functional groups. It also organizes navigation and page flow. UI is independent from content and from design or style.

A good example of the distinction is to think of style as a "skin". Two different skins could make the same web page have very different colors and style, however the content would remain the same and the way the content is grouped would remain the same. UI might specify a main navigation with a groups of buttons. Two skins might use buttons of very different shapes, sizes and colors, but the skins wouldn't remove the buttons or separate the group.

Design Consistency Conventions are also important and flow out of UI consistency.

Is Layout Part of UI?

Layout is the grey area between UI and style. UI organizes content into a hierarchy of functional groups and sub groups. It also ranks the hierarchy in terms of importance. Layout positions and sizes these functional groups on the page. Size and position are style decisions but may also effect UI. For example, UI might specify a main navigation for all pages. It doesn't care whether the navigation is on the top or the left of the page. But it does care that the the navigation is separate from the rest of the page.

Goals

Identify Current UI Conventions

The current site has some UI consistencies and many inconsistencies. The first goal is to identify the consistencies that already exist and to identify the existing hierarchy of function groups.

Remove UI Inconsistencies

The second goal is to apply the existing consistencies consistently :-) In other words to identify any inconsistencies and then to place them in the appropriate place in the functional hierarchy.

Current Functional Hierarchy

  • navigation
    • main navigation
      • primary navigation
      • secondary navigation
      • tertiary navigation
      • breadcrumbs (e.g. groups)
    • subsidiary navigation (e.g. bottom nav)
  • content
    • page title
    • loose content (not in a box)
    • content in boxes
      • box header (all)
      • box content (all)
      • specific box types
        • row/column lists
          • header
          • paging links (next previous)
          • column header
          • rows
          • footer (more link)
        • info boxes
          • header
          • content
        • compact profile lists
          • header
          • individual profiles
            • profile image
            • profile info
        • large profile lists (eg couchsearch result)
          • profile image
          • name/username
          • profile info
          • designations
  • links
    • go to sub-section
    • go to different section
    • get help on this content
    • more of this type of content
    • buttons (high importance link)
      • form submission buttons
      • make contact with someone
      • create something
      • change settings
  • text
    • headlines
    • paragraphs
  • forms
    • input row
      • title
      • input field
      • help
      • icons
      • description
    • submit link
Retrieved from "http://wiki.couchsurfing.com/en/User_Interface_Consistency_Conventions"
Personal tools