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
“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.
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!