.

.

.

.

But first ...

• If you haven't already, send me a message telling me your personal web page is ready
• If you haven't already, send me the name of the file containing your vision of UIUC in 2016
• If you haven't already, send me (in html) an exemplary personal web page
• Check your links.

.

.

.

.

Interactive Graphics & Interface Design

.

.

.

.

Interactive Graphics

• "Clickable graphics"
• Blue line around it
  

  

• Simple whole graphic links
• graphic "maps"

.

.

.

.

Whole Graphic Links

• Just link the graphic link!

.

.

.

.

Graphic link: <img src="mygraphic.gif">

Linked graphic link:
<A HREF="GoHere.html"><img src="mygraphic.gif"></A>
   or
<A HREF="AnotherGraphic.gif"><img src="mygraphic.gif"></A>
.
.
.
.

"Clickable" maps

you go different places depending on where in the graphic you click
Web66 example

.
.
.
.

How to create map graphics
.
.
.
.

Interface Design

What makes a good web page?

Nan Goggin's Design Guide
Yale style guide

What makes a good personal web page?




.
.
.
.
.
.

Personal presentation on the web

multiple goals
multiple audiences

.
.
.
.

Institutional presentation on the web

College of Education web pages
Departmental web pages
Multiple goals

.
.
.
.
.
.
.

Design features
Consistency/simplicity/aesthetically attractive

........however

Match of interface to audience goals

Lin & Levin paper
.
.
.
.

Multiple mental models

What's your mental model of the World-Wide Web?
Diversity of models: 27 unique responses of 33 subjects
Stuve, Levin, Jacobson article


Experts' mental models of the Internet and the Web are much more
      elaborate and detailed than novices'. 
Experts have multiple mental models of each area, and use the different
      models at different time when engaged in problem solving. 


.
.
.
.

For next week

Read at least two style guides and use them to improve your own personal web page
Read the set of "visions"
Look at the Open University (UK) web site
Write a synthesis, comparing and contrasting the visions
Add this to your own vision (with links to the others you reference)