1. © Anselm Spoerri Lecture 2 - Overview Meaning –PlanningPlanning –Web DesignWeb Design –NavigationNavigation –EvaluationEvaluation Mechanics –URL BasicsURL Basics –DreamweaverDreamweaver –Setting Stage –Demo: Set up Local / Remote Site – check out Video Capture file (see below) –Explore Dreamweaver Basics –Explore Tutorial: Setting Up Your Site and Project Files Video Capture of Demos –Before viewing a lecture, check out the Lectures pages at: http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lectures.htm to see the Video Captures files that are available. Right click on link for a video capture file and select “Save As” in dialog if you want to save it to your hard disk.

2. © Anselm Spoerri Narrative Structures

3. © Anselm Spoerri Planning 1 Define Web Audience –Who is your target audience? –What do you want the site to accomplish? Break Site into Categories –Create Outline - Goal, Organization – Create Simple Web Site Plan – Hierarchy & hyperlinks – Use sticky notes or Flowchart

4. © Anselm Spoerri Planning 2 Collect & Organize Material –Organizing files by folders –Asset folder for images, sounds, videos, animations etc. –Save source files –File Name - lowercase, short, no spaces or special characters –“myinterests” vs. “my_interests” vs. “my interests” –Title web pages Local Structure = Remote Structure –Same folder and file structure on local & remote machines –Home page = "index.html“ –“index.html” stored in folder “main” –“http::/www.site.com/main/” will display “index” –If home page has different name, then it needs to be named

5. © Anselm Spoerri Web Design Overview Sources –Steve Krug’s “Don't make me think!” –Alison Head’s “Design Wise” –Yale Web Style GuidelinesYale Web Style Guidelines Guiding Principles User Behavior Basics Home Page Lack of Control Search & Testing

6. © Anselm Spoerri Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse … –Rapid evolution of technology and expectations –Short attention span Common Sense –No right way to design Make it short –More likely to be used and remembered Don't make me think –Get rid of question marks - each item has clear purpose Make it work at a glance –People have little time Support intented task - manage expectations

7. © Anselm Spoerri Web User Behavior

8. © Anselm Spoerri Web User Behavior (cont.)

9. © Anselm Spoerri Web User Behavior (cont.)

10. © Anselm Spoerri Web User Behavior (cont.)

11. © Anselm Spoerri Web User Behavior (cont.)

12. © Anselm Spoerri Web User Behavior (cont.)

13. © Anselm Spoerri Web User Behavior (cont.)

14. © Anselm Spoerri Web User Behavior (cont.)

15. © Anselm Spoerri Web User Behavior (cont.) Scan pages - don't read them Look for anything = Search Interest Decide quickly –Eye-tracking studies Choose first “reasonable item” Muddle through –Don't figure out how things work Resist forming models Stick to what works

16. © Anselm Spoerri Web Design - Basics  Stay above the fold

17. © Anselm Spoerri Web Design – Basics (cont.)

18. © Anselm Spoerri Web Design – Basics (cont.)

19. © Anselm Spoerri Web Design – Basics (cont.)

20. © Anselm Spoerri Web Design – Basics (cont.)

21. © Anselm Spoerri Web Design – Basics (cont.) Design for scanning, not reading –Visual Hierarchy –Visual contrast - size, bold, color –Important things = Visually prominent –Related things = Spatially close, Nested –Avoid “noise" –Leverage Conventions –Clear what's clickable –Use underline and/or color coding Less is more –Cut ½ of words, then cut ½.

22. © Anselm Spoerri Home Page Design Home Page –Identity & Mission, Hierarchy, Search, Timely Content, Short-cuts, Registration. –Everybody wants a piece Answers Easily –What can I do here? –Why should be here? –Where do I start? Tagline is Important –Clear, informative, concise –Differentiated, clear benefits –Personable, lively, sometimes clever Problems with Pull-downs –Hard to scan, Twitchy –Have to seek them out

23. © Anselm Spoerri Web Design – Lack of Control Experience not the same Limited control over web display Visual appearance depends on –Type of computer - Windows vs. Mac –Monitor color resolution –Speed of Internet connection –Browser - Microsoft vs. Netscape - don't support same features –Default font may be different –Styles may differ

24. © Anselm Spoerri Web Design – Search & Testing Search Options –Confuse and increase chances for failure –Seldom worth the additional cognitive cost –Amazon has no options at first - first experience is successful. Typical Problems –Users are unclear on the concept –Words users are looking for aren't there –There is too much going on Great Site requires Testing

25. © Anselm Spoerri Web Site Navigation 1 "Back" clicked 30-40% Easy to figure out “You are here” Things at current level Return to higher-levels and home page Easy search and indexes Easy feedback Persistent navigation creates comfort –“Home” and “forms” pages can be exemption

26. © Anselm Spoerri Web Site Navigation 2 Top-level Navigation –Top Row or Left ColumnTop RowLeft Column –Icons, image-maps, textual, pull-downIconsimage-mapstextualpull-down –Highlight or color currently selected –To frame or not to frame? Second-level Navigation –Below Top Line or Left ColumnBelow Top LineLeft Column Breadcrumbs –SCILS > Information Library Studies > Courses > Graduate Novel Navigation Metaphors –TheBrainTheBrain –Star Tree for FlashKit by Inxight SoftwareStar Tree for FlashKit

27. © Anselm Spoerri User Behavior – Summary Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

28. © Anselm Spoerri Design Implications Scan pages - don't read them Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” Make obvious what you can do on a page Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models Don't make users think Get rid of question marks Each item = clear purpose Stick to what works Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography

29. © Anselm Spoerri Evaluation Overview Sources –Krug, S. - "Don't Make Me Think!" –Head, A. - "Design Wise." –Williams, R. & Tollett, J. - "The Non-Designer's Web Book." Questions –Audience –Task –Navigation –Functionality Example

30. © Anselm Spoerri Evaluation – Audience Who is the site for? Who are the intended users? What do users want to accomplish? What are the needed skills? Good fit with skills of intended users? What tasks are users trying to accomplish?

31. © Anselm Spoerri Evaluation – Task Support tasks users need to accomplish? Support both experienced and inexperienced users? User expectations meet?

32. © Anselm Spoerri Evaluation – Navigation What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? –Sections - tabs What are my options at this level? –Local navigation Where I am? –"You are here" indicators or breadcrumbs –Easily find your way? back home? other sections? How can I search?

33. © Anselm Spoerri Evaluation – Navigation (cont.)

34. © Anselm Spoerri Evaluation – Functionality 1 Instantly understand what site is about? Understand what you can do? "Look & feel" enticing? Want to explore? Main functions easily accessible? Easy to use? Links clear where they will take you?

35. © Anselm Spoerri Evaluation – Functionality 2 Instant visual hierarchy? –Or visually too busy? Text easy to read? Graphics easy to understand? Large site - site map, index or search? Help available and useful? Download times reasonable?

36. © Anselm Spoerri Evaluation – Example & Exercise 1 AmazonAmazon – Evaluation (of earlier version of site, but analysis still applies) Evaluation Exercise 1 –Evaluate website of your choice. Choose a site that could serve as a model and/or contain relevant information for your final project. –Be concise and insightful in your evaluations

37. © Anselm Spoerri Mechanics - URL URL - uniform resource locator –"http://www.abc.com/aaa/bbb/ccc.html" –"http://" - hypertext transfer protocol - scheme –"www.abc.com/" - server name - domain name, owner, host –"/aaa/bbb/ccc.html" - path through folder hierarchy URL Basics –Absolute URL –"http://www.abc.com/aaa/bbb/ccc.html" –"Complete street address" –Info located on external server –Relative URL –"../../../xxx/yyy.htm" –"../" = up 1 level => up 3 levels, then subdir "xxx" to get to "yyy.htm" –"Direction to neighbor's house" –Anchor (same page), Internal (local)

38. © Anselm Spoerri Dreamweaver - Setting Stage Three Views –Design View –Code View –Design & Code View Tables, Tables –Layout Mode –Layout Table and Layout Cell –Visual grid & snap-to-grid –Standard Mode (and Expanded Mode) –Edit & Modify Tables Interaction & Behaviors –Rollovers, Imagemaps, Navigation Bars –Linking images and behaviors –Timeline Animation Site Management –"Local site" mirrors "Remote site"

39. © Anselm Spoerri Demo: Dreamweaver - Site Management Open “Windows Explorer” Start > Programs > Accessories > Windows Explorer Create folder “mplec2” in “My Documents” folder Open “mplec2” folder Create folder “mpcourse” Open “mpcourse” folder Create folders “ex1” … “ex5” Launch Dreamweaver –Start > Programs > Adobe Web Standard / Premium > Dreamweaver (Start > Programs > Macromedia > Dreamweaver)

40. © Anselm Spoerri Demo: Dreamweaver - Site Management (cont.) –Site > New Site –Select “Advanced” Tab –Select “Local Info” Category –Local Info > Site Name = “MPLec2” for this demo –Local Info > Local Root Folder = “MPLec2” in “My Documents” –Select "Remote Info" Category in New Site Dialog –Select "FTP" in pull-down Access menu –FTP Dialog –FTP Host =“eden.rutgers.edu” –Host Directory = “public_html” –Login = “yourusername” –Password = “yourpassword” –Make sure to check the “Use Secure FTP” box –Connect to Server –Select "Connect to Remote" icon or "Site > Connect" –Transfer files to server –Manually –File : drop onto file OR drop into folder that contains file you want to up/download –Folders: drop into folder that contains folder you want to up/download

41. © Anselm Spoerri Dreamweaver - Set up Local / Remote Site (Summary) –Site > New Site –Select “Advanced” Tab –Select “Local Info” Category –Local Info > Site Name: name your local site –Local Info > Local Root Folder: select folder to store site –Navigate to where you can store files or Create folder for your local site –Select "Remote Info" Category in New Site Dialog –Select "FTP" in pull-down Access menu –FTP Dialog –FTP Host = eden.rutgers.edu –Host Directory = public_html/folder/subfolder/subsubfolder … folder that contains web pages you want to access / copy etc. –Login = yourusername –Password = yourpassword –Make sure to check the “Use Secure FTP” box –Connect to Server –Select "Connect to Remote" icon or "Site > Connect" –Transfer files to local folder –Select "Get File(s)" icon - green arrow pointing downwards

42. © Anselm Spoerri Dreamweaver - Guided Tour Launch Dreamweaver –Start > Programs > Adobe Web … > … Dreamweaver … Help > Workspace Help > Working with Dreamweaver sites Help > Creating and managing files Dreamweaver Developer Center Getting Started with Dreamweaver CS3 http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html P.S. As mentioned before, in this course you learn by doing and doing …