Handlist of the Rhetorical Features of Web Page and Site Design
started aug, 2005. major rev oct 2005 rev Aug 2006
This handlist focuses your attention on features to help describe and characterize the message. It is not meant to be filled in like a survey so much as a checklist. Use it to guide your attention on those aspects of the page and site that you're considering.
url construction
protocol://server.address.domain/path/path/file.html
site architecture
- deep / shallow
- Is the site structured in separate sections or categories? How are those sections indicated?
- Is the site structured as separate sub-sites? How are those sub-sites indicated?
organizational schemes of sites
from Wurman, Sume, and Leifer: LATCH
- location
- alphabetical
- temporal
- categorical
- hierarchical
from Rosenfeld and Morville
- topical
- task-oriented
- audience-specific
from Lynch
- sequences
- hierarchies
- webs
types of sites / site themes (Lynch)
- personal / professional
- entertainment
- magazine
- news
- e-commerce
- teaching
- training
- reference
- ...
pages
kinds of pages: generic
- home page (of site, of subsite). usually the page that appears as default in the directory
- menu home, news home, path-based
- navigation or index page (sets of links, annotated or not)
- content page (stories, reports, policies, etc)
- task-specific pages (forms, usually)
- splash page
- site map
parts of page
- header
- footer
- body
- navigation
- side nav column
- top / bottom nav bar
- page title (in the window title bar)
- page address (in the address field)
ads
consider placement on page. consider source of ads when looking at ethos
- banner ads
- sidebar ads
- google ads
page design elements and arrangement
- columns
- sidebars
- callouts
- page size
- flexible or frozen
Sketch the page to indicate what's placed where and to what effect
- emphasis
- grouping
- consistency between pages
- differences between pages
common page layouts
general
- single column
- two column (nav - content)
- three column (nav - content - second column content / second column nav)
types of layouts
adapted from Exploring Web Design, Vest, Crowson, Pochran
- inverted-L navigation
- top header nav
- side nav
- box shape
- hard bottom / soft bottom / Flash box
- classic header - content - footer
- left justified: border space on right
- centered: border space on left and right
- right justified: border space on left
- float: all space, no definable boarder or frame
- full browser window layout - flexible
navigation
kinds
- global: stays the same over the entire site
- local: changes by section or page
- contextual: embedded in the text or as an addition to the text
- utility (search, add to cart, buy, print, email...)
navigation devices
- text
- buttons
- tabs
- drop down menus
- fly out menus
- breadcrumbs
- rollovers
- image links
- search
- page sequence (prev - next)
- multi-level navigation
- scope notes, annotations, glosses
- navigation column
- navigation banner
navigational nomenclature: terms used in global and local navigation
Characterize the terms, especially global terms.
- Are they common or unusual? What domain do they define?
- What are the categories ?
- What's left out?
- How do they serve usability?
text layout linking motifs
- headline with lead or gloss leading to more...
site entry points and paths
- how many entry points on the first page
- how are they grouped?
- where do they lead to?
- what do they tend to do?
Visual design
basic visual design terms
- emphasis
- contrast
- balance
- arrangement
- repetition
- visual direction
color in design
- How is color used in the page? And across the site? To do what?
- What characterizes the colors used on the site?
color schemes / palettes
- monochromatic
- analogous: colors next to each other on the color wheel
- complementary: one main color and its compliment
- split complementary: one main color, plus colors to left and right of the main color's compliment
- double contrast: colors to left and right of a main color and left and right of the compliment
images
How are images used on the page
- identification
- decoration
- navigation
- illustration of content
Placement on page with respect to the text
- Do images server to illustrate? supplement? illuminate text?
Text
legibility
- line length
- line spacing
- contrast of text color to background color
- font
chunking
- Look at how a continuous text is broken up
- how paragraphs and sections are indicated
- how headings and subheadings are used
- how bullet lists and numbered lists are used
nomenclature of heading and subheadings
- consider the terms and phrases used.
characterize the text in general by looking at -
- stated and actual purpose: what kind of text is this? Promotional? Personal? Informational?
- what kind of text does it claim to be?
- length and kind of sentences Refer to the BasicSentencePatterns
- length of paragraphs
- usage and diction
- use of IM devices, alternative spellings, and so on
- use of color and other devices for emphasis
- appearance of text: standard font? block quotes? rhetorical use of bullets, heads and subheads
based on what you described above, characterize the prose style. For instance,
- business
- too cool by half: Wired / Slate
- rant
- marketing / promotional
- editorial
- news
- informational
- scholarly
- informal
- marketing posing as information (infomercial)
- ...
characterize the rhetorical stance: the attitude of the prose towards reader and subject
- serious, cold, distant, close ...
- watch for use of irony, wit, sarcasm
linktext
- when are in-text links used: on what pages and to what rhetorical ends?
- what's the relation between the link text and the link target?
- how would you characterize the link text?
- where do the links tend to lead: in site or external?
usability - consider
- legibility
- how text is chunked
- appropriate use of heads, subheads, lists to facilitate use
- appropriate placement of links
- appropriate phrasing of link text
- use of screen space
- degree of control by user
- use of color to facilitate use
- use of page design to facilitate use
- ...
Categories: Handlist