DPS External Website Review
Elizabeth Corless, CS616
http://support.csis.pace.edu/dps/public/welcome/index.cfm
This site illustrates many design flaws, and is highly instructive of things to avoid.
Brochure Origins
At first glance it is obviously that this site is a printed brochure converted into a web site.
Printed material is an entirely different medium than the web, and does not convert well
to the web. Brochures have the luxury of paragraphs. The reader takes time to wade
through the prose passages. This is not the case with the web. But, since this web site
looks like its content came straight from a brochure or similar, customer-provided
document, a brief description of brochure types is helpful.
A brochure can be either a specification type or an overview type. Either approach can
work, and the reader immediately recognizes what kind of brochure he/she has when
viewing the front cover. A soft, artistic cover image with muted tones tinged with pastels
alerts the reader that this is an “overview” document. A specification type would have a
“hard science” image (motors, chips, robots with very serious looking people attending
them) rendered in sharp focus with harsh primary color highlights. The reader knows
that detail information – hard data, facts and figures – will be the content of a
specification type brochure, and that “soft-information” – qualitative and broad stroked
general information - will be the content of an overview brochure.
The home page of http://support.csis.pace.edu/dps/public/welcome/index.cfm tells the
reader that this is an overview document with the muted ivory tones tinged with yellow
(for warmth) and the artistic images.
An overview is entirely appropriate, however, no where in this site is there any reference
or link to “hard science” information. Some reference to research areas, current thesis
topics, or facility and student published papers needs to be included in the site to lend
credibility to the program. After all, this is an educational curriculum for attaining the
highest educational level in computer science.
Design
The design chosen for the site is sheer folly. Upon first glance (and quick scans are the
usual behavior for users browsing web sites) the main graphic at the bottom of the page
appears to be a time line. I assume that this image was chosen to impart a feeling of
artistry, economy, boldness and flair, which translates into sophistication and confidence.
This is enforced by the handwritten script used for the topics. This script has the purpose
of emphasizing creativity, originality and individuality. Thus the design says that these
attributes are encouraged, fostered and developed by this program. Nice concept.
Upon closer inspection it becomes apparent that severe execution flaws marred this good
design concept. The “time line” has uneven gradations, and the visitor wonders if the
artist had made a mistake. Now the visitor has some doubts, which is never good. The
visitor will inspect the site with a critical eye, which is not the desirable mind set for a
prospective student.
The visitor looks further. The topics on the time line are not arranged in time consecutive
order! For instance “embark” (what happens after the program is complete) is the second
item to the last on the right side, followed by “apply” (before starting the program)! So,
the time line is not a time line at all!
This is a serious error in choice of themes. Considering that the visitors will be
prospective students, and have already considerable education and experience in a
mathematics-rich subject such as computer science, this is a terrible distortion of
symbols. Visitors of this site will see this image and assume it is a mathematical symbol
– either an x-axis, a directed line, a fanciful vector or a time line – and logically expect
that the symbols (the topics) hanging off of it are organized in some kind of sequential
order, probably a passage of time. This is not the case, and further reduces the visitor’s
confidence in the site.
These faults alone are sufficient to redesign the site. However, there are further mistakes
in layout, programming and content use. Some of most glaring errors are given below.
Mouseovers On the Homepage
(Illustration on next page)
As the visitor mouses over the “time line” topics, three events trigger:
1) a short description of the topic appears near the middle of the screen,
2) a popup menu with choices appear (with a harsh olive green that is outside of the
site’s color palette), and
3) a tip text box with the same short description flickers.
It is as if the programmer knew three tricks, and wanted to do them all. This is overkill,
and further weakens the experience. Event 3) adds no additional information over event
1) and can be eliminated.
A major design flaw becomes apparent in the middle of the time line: the popup menu
covers part of the short description in the middle of the screen! Now the user is unsure
whether the popup menu applies to “Information Sessions” which is highlighted because
of the mouse position, or the topic that the user just moused over. Since the user is
moving quickly, odds are he/she does not remember what the topic name was, and so the
reinforcement and association is lost. The user has to move the mouse and reread the
topic name, which is awkward. The user may be shaking his/her head at this point. This
also explains why event 3) exists. Event 3) supposedly “fixes” the concealed short
description in the middle of the page. In fact it makes it worse. The page is busy,
cluttered and confusing. Instead of patching a bad design and making it worse, it is better
to start over.
Mouseovers On the Homepage
The text
box appears
here
“time line”
popupmenu
same short description; the text box “fixes”
the olive green
the concealed description in green
is outside of the site’s
color palette, and appears garish
Several more examples of design flaws are discussed in the following pages.
Avoid Those Stealth PopUp Windows
An annoying popup window appears when the user navigates from a detail page to the
home page. This artifice is reminescent of “stealth solication”, and inappropriate.
This is a visitor “turn off”.
The FAQs Section
The FAQs section yielded some real gems.
Back to Top is evidence of a brochure converted to a website, since it eases navigation
within a long text page. Internal page links are also a hallmark of “good old plain vanilla
HTML”, which is not consistent with the content emphasis of emerging technologies.
What this site needs is some flash.
The layout is far too wordy for a web site. In this illustration bullets are used, but the text
that follows are quite lengthy sentences.
 Use bullet format on a web site to form quick snippets of information that the user
can assimilate.
 Convert any sentence in my brochure to bullet format by starting off with an
action verb and using indentation and a standout bullet shape.
 But that does not mean I am writing bullets.
The theme word “Evolve” moves and jerks as the user navigates down the page, which is
distracting. It is as if the user is not supposed to read the material too carefully or the
content is not that important, since it is being obscured by an eyecatching graphic. This
leads to the question: if the content is not important, then why have it?
The last offense: note the inconsistent use of font faces.
Back to Top is a
vestige of “old
tech” HTML
programming
Inconsistent
fonts!
“Evolve” moves as
you navigate down the
the page in jerks and
starts. It also obscures
the content.
Solutions
1. Find a new theme.
2. Not possible? Ok, keep the line, but make it a timeline. Put the timeline at the top
of the screen, and change to pull down menus. They appear more structured and
ordered, and are not so sensitive to mouse movements. Change the color of the
popdown menus to a color consistent with the used palette. Show the topics on
the timeline in the order in which they occur. This emphasizes the short
completion time for the doctorate degree. Three years instead of 5-6 years!
Professors that are dedicated to help students finish in that time! These are things
to highlight.
3. Remove the Back to Top and slice the long text document into one page screens
accessible by a hyperlink.
4. Clean up obvious errors, like the inconsistent fonts.
5. Remove the search. Who knows what key words it contains. I had no success
with this feature, and it frustrated me.
6. Include links to technical papers.
7. Include research topics or links to information on them.
8. Discard the floating Watermarks. They are not required if the long text document
is sliced into 800x600 screens. You always know where you are if you design to
one page.
Summary
This is not intended to be a scathing criticism. With some adjustments, this could be a
good site, and heck, it is much better to go to the web and get the information than to call
the admissions office for a brochure by snail mail!