Instructional Design with a focus on web page and site (collection of web pages) design

Instructional Design Perceptual principles: “bottom up” Analysis of goals: “top down”

Perceptual principles Motion attracts attention Consistency promotes rapid perception Color choices are important

Adding multimedia Local clip art collections Internet clip art collections Scanned graphics, digitized sound and video

Can I use multimedia I find on the Internet? or multimedia I convert from another medium? Technical answer: yes, easily Legal answer: no Ethical answer: yes in some cases Practical answer: yes in many cases

“found” web graphics Technically: you can copy by moving cursor over graphic; on Mac, hold down mouse button; on Win, right click. Select “Save this image as...” from pop-up menu Legally, every image is automatically copyrighted at the moment of its creation and you cannot use it unless you have explicit permission

“found” web graphics (cont.) Ethically: you should respect the intellectual property rights of others. If they give permission (for example, by allowing the graphic to be put in a free clip art collection), then it is okay Practically: if it is a simple graphic used for non- commercial educational uses, then “fair use” covers you (unless it is a cartoon or movie character or recent popular music)

Gestalt principles for interface design

Gestalt Psychology Developed in Germany in the early 1920s Focused on studies of perception and problem solving “The whole is different from the sum of the parts.” (not the same as “Gestalt therapy”)

Gestalt perceptual organization principles proximity similarity good figure common fate

Proximity Things that are spatially close are perceived to be a group.

Implications of proximity for web design Those things that are placed together on a web page tend to be perceived as conceptually grouped. Put things nearby on your web page that you want your readers to think of as the same; put things far apart on the page that you want them to think of as different.

Similarity Things that are perceptually similar are perceived as a group.

Implications of similarity for web design Those things that are similar on a web page tend to be perceived as conceptually grouped. Make things on your web page similar (using color, shape, size, etc.) that you want your readers to think of as the same; make those you want to be seen as different not similar.

Good figure Things that can be perceived as forming an easily recognizable figure will be grouped.

Good figure What shape do you see?

Implications of “good figure” for web design Those things that are form a recognizable shape on a web page tend to be perceived as conceptually grouped. Place things on your web page in a recognizable shape that you want your readers to think of as the same.

The "squint test" To see if you have a good perceptual design your web page, squint your eyes, and see if what you see in the blurry image still makes some sense.

The “inverted L” design Banner across the top; choices across the left

Implications of “common fate” for web design Importance of motion as an attention attractor and organizer. Animation as attracting attention to the web page Continued animation as attracting attention to the animation (and AWAY from the rest of the page

Appropriate uses of motion Motion attracts attention Continued motion continues to attract attention

Animated gifs Useful for attraction attention to a page Very useful if they stop after a while, so that the viewer can then look at the rest of your page (use free graphic editors to set the duration of the animation) Beware of overuse, since web viewers are beginning to associate animated gifs with advertisements which they automatically ignore

Using a graphic editor to have an animated gif stop after a while

Jim’s worst nightmare web page (Note: This is an example of what NOT to do ;-)

Color choices are important Michelle Hinn’s An Altenative Web Design GuideMichelle Hinn’s An Altenative Web Design Guide

Consistency Consistent layout of a coherent set of web pages Consistency with emerging conventions (the inverted L layout, with navigation along the left edge and a title graphic along the top) Consistency with what your audience expects

Some design guidelines One screen in size if at all possible (with links) Careful and planful use of animation Care with colors and backgrounds

Goals and design Important to keep in mind your goals for creating a web page, and select elements that help accomplish those goals For each element that you consider adding to a page, ask yourself "Does this help me achieve my goals for this page or not?" If it doesn't, don't add it.

Your personal web page Who is the audience? (are there multiple audiences? If so, multiple personal web page!) What do you want them to learn from viewing your web page? What do you want to accomplish with your web page? (inquiry, self-communication, construction, expression uses)

Other personal web page uses Portable bookmark file / social bookmarking Web weaving Job seeking Community building Photo album Fund raising / consciousness raising Educational Persuasive communication

eportfolios Exemplars of own best work Create your own web page with eportfolio elements (or if you have one already, add eportfolio elements)

eportfolios with students Michelle Jacobs’ project

Exemplary personal web pages Your choices

Before next class Create a new web page containing your major project proposal, and submit the name and the URL to TAPPED IN project proposal conference

Major Project Proposal What issue or question related to the use of new technologies in education would you like to address? What is set of learners would you like to focus on? Look at the major projects from TEP 231 in 2003 to see examples. 2003

Breaktime!

Lab time Create a new web page with your major project proposal, transfer it and your personal page to your web folder, and post the name and URL to TAPPED IN

Snacks for Monday Carrie & Rachel Thanks to Melissa H. & Kathryn for today’s snacks

Creating a new web page Start your web editor (Dreamweaver, Netscape Composer, whatever) Select File -> New Start typing and formatting Save –New name –No spaces or punctuation marks except “-” or “_” –End in “.html” or “.htm”

Creating a link Choose "Insert" -> "Hyperlink" Type in the text to have a link from (that will become blue and underlined) Paste in the URL (for absolute links to sites outside your own site) –URL has to be complete (ie. include the )

Creating a "relative" link For links between your own files, you can Choose "Insert" and "Hyperlink", but then click on the folder icon next to the link box and choose the file. That will put in a "relative link", with JUST the filename. Advantages of relative links: –Shorter –More portable (will still work if you move your files to another server)

"Publishing" your web files To "publish" your web files, you simply transfer them from your local computer to a computer that is running web server software The computer we will use: tep239.ucsd.edu Several ways to transfer files over the Internet; today we will use FTP

Putting your files on the server with Dreamweaver New Site Select your folder for the local folder For the remote server: –Access: FTP –FTP Host: tep239.ucsd.edu –Host: sites/ –Login: –Password:

Putting files on server… If you want them automatically put on your server space, click that box. If not, leave it unclicked, and when you want to put a changed file, click on the "file management" icon and select "Put"

Your URL is … or