ART 3767

Interface Design
For the Internet

 

Elements of Interface Design

Usability  Influenced by visualization and functionality, how intuitively or easily your media item is navigated and processed.
Visualization Create aesthetically pleasing media items while avoiding distractions to the message of the page.
Functionality How do the features of a page support the task. (ie. rollovers)
Accessibility Usability for users with disabilities; Usability for users of devices other than traditional web browsers.

 

Interface Heuristics (findings)

Use real world conventions - Buttons, sliders, toggles.

User control - You want the site to do what the viewer expects.

Standards - Following web use standards eases a learning curve for your viewer.

Recognition not recall -This is a play off of Jared Spool's, "scent of information". The user should not have to memorize rule for site usage.

Aesthetic and minimalist design - Reducing clutter increases ease and speed of use.

Help - If a site has complicated usage, then a Help page is in order.

 

Reading Assignment (online)

www.asktog.com/basics/firstPrinciples.html

Fitts' Law

Latency Reduction

Learnability

Metaphors, Use of

Readability

 

Test Thursday May 1st

 

 

The Interface - February 25th to 29th

 

"Our level of perception depends on our past experience."

 

An intuitive graphic user interface, GUI, is the connection point of the human and computer understood without apparent effort.

 

Please read the following for Tuesdays lab and discussion:

 

webstyleguide.com/process/index.html

webstyleguide.com/process/plan.html

webstyleguide.com/process/specify.html

Also read "Don't Make Me Think" pp1-39

 

HAL 9000 from the film 2001- poor interface design?

 

 

Practical experience with pages that don't work. webpagesthatsuck.com

 

 

Week Three

CSS

Web page design has taken a leap forward with the introduction of CSS, Cascading Style Sheets. Before CSS there were not a lot of choices for controlling page layout other than the misuse of <table> tag.

 

Box examples - www.intensivstation.ch/en/templates

A Touch of Style - www.w3.org/MarkUp/Guide/Style.html

cssplay - www.cssplay.co.uk/menu/index.html

 

Your Poem Website

Begin work on your own non-narrative poem. First job in this assignment is to search out, or create your own short poem as the theme. The next step is to layout simple drawings of each of the pages. This way you are creating the site from your design and not allowing computer code to dictate the look and feel.

Use valid XHTML with links to design a site with 10 pages minimum. The links can be in any form that you like as long as it is clear to the viewer (someone other than yourself) how to navigate the site and see all the links.

This assignment will be due start of class February 26th. Prepare to have the class review your website.

 

The <img> and <table> tags

 

Quiz

A short quiz over the first two weeks of information.

 

 

 

 

Week Two

picture of old netscape browser

What am I looking at? Is this my current file?

 

 


Check the URL Bar.  View Page Source.  Validate.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Document Types come in many flavors for HTML and XHTML, those include Strict, Transitional, and Frameset. This tells the browser what to expect as far as code.

www.w3schools.com/tags/tag_doctype.asp

 

 

Simple HTML page:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="my_style.css" />

<title> My Song Page </title>
</head>

<body>

<h1>My Song</h1>
<p>
Dee, dee, dee,<br />
Da, da, da,<br />
and whatever the hell else you want in there!<br />
</p>

</body>
</html>

 

Think of most HTML markup tags as containters. Be sure that these "containers" are properly nested. This means that the list of tags leading up to the element being marked up is closed in reverse.

<b><em>marked up text</em></b>

 

Read the following on absolute and relative path names
http://www.pixelmill.com/support/al1065/kb101480.htm

 

 

 

 

Week One

Lecture topics:

 

read http://www.w3.org/MarkUp/Guide/
reference http://www.htmlref.com/

 

Homework For Tuesday January 22nd , find good examples

of three websites:

 

Place links of your choices with a short explanation (one sentence) of each site in an email to lazor at acm.org and put "art 3767" in the subject heading of the email.

Be prepared to say a few words about the sites that you've chosen.