SecretStaff

Website Formatting

Do not use YEAR or DATE in the URL

  • Event-2015 – YEAR should not be used. The result is having to find and update all links back to a year-identified page to update the next year; instead, It’s better to limit “time” naming to quarter, for example, “Event-Fall” would allow future events to automatically connect to the correct page because it is referenced by a recurring quarter.
  • Event-Oct15 – DATE should not be used. Actual dates fall into the same trap as year-identified pages since the next occurrence will probably not happen on the same date next year.
  • Event-October – MONTH can be used, but not advised. If month is used in the URL the page should reflect events/topics that occur yearly during that month. Again, the problem is finding links if you change the event date.

Similar pages should be grouped under the same DIRECTORY or URL group

  • If all similar subject pages (such as http://career.sa.ucsb.edu/intenships) are grouped in the same URL path, then the site can more easily be set up such that a particular feature is displayed on all pages. The alternative would be to find each page of a particular subject and adding a feature to each individual page; but, when updated, each page must be found and updated individually.
  • Putting similar subject pages in the same URL path will usually assist in finding similar pages as they will be grouped together, all Employer pages are under “/employer”, all pages with job search information can be found under “/job-search”, all recruiting events can be found under “/recruiting-events”.

LINKS

  • Links should never say “Click Here” or “Here”. The problem with using “here” in a link is that it conceals what the user is clicking. Users are required to read the text all around the link to understand the context of the link instead of just reading the text of the link. The link can also be hidden on the page due to the small link text requiring you to bold and/or capitalize to highlight the link.
  • Links to pages external to the Career website should be given a "_blank" target attribute. This opens the link in a new window. The main reason for this on our site is that we have so many links outside of our site from a list. If a student wants to go through the list of links, it is easy for them to accidentally close an external link which would close the list page as well.

Formatting HEADINGS

  • The page title should be the largest font on any webpage, with Heading2, Heading3 and Heading4 following. Heading tags should be used to organize content by its order of importance, NOT to highlight text. Heading tags should help users identify headlines and sub-heads on a page.
  • Heading 1 should be limited to the title of the page which is automatically assigned.

COLORS for the website

Top five colors marked with asterisks

  • Background and highlight - #EDF2C9 **
  • Background white - #F2F2F2
  • Light Green - #D2D904 **
  • Dark Green - #074020 **
  • Green - #618C03
  • Alt Green - #1BA665
  • New Logo Green - #84C441 **
  • Blue - #05AFF2 **

Accordians

Longer pages can benefit users. Accordions shorten pages and reduce scrolling, but they increase the interaction cost by requiring people to decide on topic headings.

There are other advantages to applying accordions to long, content-rich pages:

  • Collapsing the page minimizes scrolling.
  • The headings serve as a mini-index of the page. This allows users to form a mental model of the information available.
  • Hiding (some of) the content can make the web page appear less daunting.
  • Accordions can be a better alternative to page links, which are problematic because they break people’s mental model for hypertext links. People expect clicking a link will load a new page. Without proper cues people are confused about where they are on the site.

There are also major downsides to accordions.

  • Forcing people to click on headings one at a time to display full content can be cumbersome.
  • Accordions increase interaction cost.
  • Hiding content behind navigation diminishes people’s awareness of it.
  • Accessibility is an important consideration.
  • Accordions are often not well suited for printing documents and require people to print snippets of content at a time

Use the accordion panel when the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks. It is best used when there are too many items to fit into a limited space or when the number of items would overwhelm the user.

Writing for the Web

Why it matters:

People read differently online than they do when they read print materials -- web users typically scan for information. In a study of online reading behavior usability researchers found that “on the average webpage, users have time to read at most 28% of the words during an average visit; 20% is more likely”.

Make your copy easy to read:

  • Chunk your content.  Chunking makes your content more scannable by breaking it into manageable sections.
  • Use short sentences and paragraphs. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. 
  • Do not use print copy on the web.
  • Shorten your text. Skip unnecessary words. Avoid needless repetition.
  • The right words can make or break trust; they affect your tone of voice and how people perceive your site. Avoid jargon. By using keywords that your users use, you will help them understand the copy and will help optimize it for search engines.
  • Avoid the passive tense in copy.
  • Titles are critical in making the right first impression. Often it is the ONLY thing people read. If you want your encounters to be successful, tell users something useful.
  • Use pronouns. The user is “you.” The organization is “we.” This creates cleaner sentence structure and more approachable content
  • Front-load the important information. Use the journalism model of the “inverted pyramid.” Start with the content that is most important to your audience, and then provide additional details.