Web Design Basics: Overview, Principles, and User Behavior

1. Info + Web Tech Course Digital Media Production Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. Lecture 2 – Overview • Web Design Principles • Narrative Structures • Site Planning • User Behavior & Design Implications Web Design Basics • HTTP – HyperText Transfer Protocol • URL Basics • HTML Elements & Tags: Block-level vs. Inline Elements • XHTML: Rules, Doctype, Encoding • Links, Tables, Images Text Editor, FTP & Permissions Demo • Create Simple Web Page| Upload to Server | Set Permissions • Ex1 Demo Lectures – Week 2 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week2

3. Narrative Structures

4. 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

5. 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

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

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

8. Web User Behavior

9. Web User Behavior(cont.)

10. Web User Behavior(cont.)

11. Web User Behavior(cont.)

12. Web User Behavior(cont.)

13. 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

14. Web Design - Basics  Stay above the fold800 X 600 good

15. Web Design – Basics (cont.)

16. Web Design – Basics (cont.)

17. Web Design – Basics (cont.)

18. Web Design – Basics (cont.)

19. 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 ½.

20. 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

21. 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. Firefox vs. Safari - don't support same features • Default font may be different • Styles may differ

22. 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

23. 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

24. Web Site Navigation 2 • Top-level Navigation • Top Row or Left Column • Icons, image-maps, textual, pull-down • Highlight or colorcurrently selected • To frame or not to frame? • Second-level Navigation • Below Top Line or Left Column • Breadcrumbs • SCILS > Information Library Studies > Courses > Graduate • Novel Navigation Metaphors • TheBrain • Star Tree for FlashKit by Inxight Software

25. 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

26. Design Implications Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, Graphics, • Color Coding, Typography

27. HTTP – HyperText Transfer Protocol • Protocol to Exchange Information over the Web • Internet  Web • Internet = Collection of Global Networks • Web: way to manage information exchange • There are many other uses for the Internet • File transfer (FTP) • Email (SMTP, POP, IMAP)

28. Web Basics – 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" - paththrough folder hierarchy • What is • Server Name for SCI ? • Path for MLIS program?

29. Web Basics – URL (cont.) • 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) • Default “Home” Page = index.html • Keeps out prying eyes out of directories (also instructor :)

30. Web Standards • URL • Where to find it • HTTP • How to get it • HTML • How to write and interpret the information • Simple Document Structure Language for Web • Advantages • Adapts easily to different display capabilities • Widely available display software (browsers) • Disadvantages • Does not directly control layout

31. Web Basics – HTML Elements & Tags • HTML is made up of elements • Elements are denoted in HTML by using tags • For the most part, you will enclose content you are marking up in between tags • Tags look like this: <tag>Content</tag>(read as: open tag, content, close tag) • Three major elements needed for an HTML page • <html> - container for all of our HTML code • <head> - put data for browser and other machines • <body> - put content to show to the user

32. HTML – Example • <html> • <head> • Machine readable code (metadata) goes here • </head> • <body> • User readable content goes here </body> • </html> • Some text elements • <p>, <h1>, <h2>, <h3>, <ul>, <li>paragraph, heading 1, heading 2, heading 3, unordered list, list item • Other elements • <img>, <a>, <strong>, <em>image, anchor, strong, emphasis

33. HTML – Block-level vs. Inline Elements • Block-level elements (<p>, <h1>, <h2>, etc.) • take up their own space vertically. • force elements after them to jump to next line. • Inline-level elements (<a>, <img>, <strong>, <em>, etc.) • do not take up their own vertical space • can be placed inside of other elements. • Note: cannot place a block-level element inside of inline-level elementdocument will not validate properly if you do

34. Basic HTML • Add Headings and Paragraphs • <h1> </h1> header level one • <h2> </h2> header level two • <p> </p> paragraph • Adding emphasis to text • <b></b>, <i></i>, <strong></strong> • Add links to other pages • Use various kinds of lists • Add images

35. XHTML • XML = Language for creating other languages • Custom markup language that contains tags for describe the data that they contain. • If a tag identifies the data, then the data becomes available for other tasks. • Not as lenient as HTML. • XHTML = HTML rewritten in XML • XHTML:Keep code Consistent & Well Structured • Use “Transitional” XHTML • Allows for the use of deprecated HTML tags

36. XHTML – Examples • XHTML elements must be in correct order • <p><em>Content</p></em> •  <p><em>Content</em></p> • XHTML elements must close • <p>Content •  <p>Content</p> • XHTML elements must be lowercase • <P> •  <p> • XHTML documents must have one root(Only one <html> element per document; no frames)

37. XHTML – Examples • HTML = Orange XHTML = Green • <p><i>Content</i></p> • <p><b>Content</b></p> • <p><em>Content</em></p> • <p><strong>Content</strong></p> • <br> • <br />

38. XHTML – DOCTYPE declaration • Validation • HTML = very forgiving markup language • If content validates to a standard  better optimized for search engines • DOCTYPE = XHTML Transitional standard (first line in html file) • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Encoding specified inside <head> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> • http://validator.w3.org/ • More info: http://www.w3schools.com/Xhtml/xhtml_validate.asp

39. XHTML – Page Layout • Two methods for creating Web Page Layout • Tables (this lecture) • DIVs and CSS (next lecture) • Table <table> <tr> <td> </td> </tr> </table> • <table> table • <tr> row • <th> header • <td> cell • <table border="2" cellpadding="5"> • <tr width="100" height="50" valign="top"> • <td colspan="2"> <td rowspan="2">

40. Table Example <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

41. Basic XHTML – Essential Elements to Include • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <title>My Page</title> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> • <body> • Headers: <h1> <h2> <h3> <h4> <h5> • Paragraphs:<p> • Tables: <table> <tr> <td> </td> </tr> </table> • Lists: <ol>, <ul> (can be nested) • Adding emphasis to text : <b>, <i>, <strong> • Add links to other pages (relative & absolute) • Add images • Font specification: <font face="Arial" color="#000099">Text</font>

42. Hyperlinks • <a> hyperlink tag • Use Attributes and Values • <a href="absolute or relative pathname"target="_self" [opens page in same browser window] target="_blank" [opens page in new browser window]>Text of Hyperlink</a> • Create Anchor: <a name="anchor name"> • Link to Anchor: <a href="#anchor name">

43. Images • <img> image tag • Use Attributes and Values (src and alt are required to be valid XHTML) • <imgsrc="pathname"alt="my image" [text to appear if image does not show]height="100" width="100" [improves time to load page]align="left" [image floats on left, text flows on right]hspace="5" [deprecated for CSS] vspace="5" [deprecated for CSS] /> [XHTML requires />] • Floating image needs to be placed right before text that needs to flow or wrap around it. • <brclear="left" /> [stops elements from wrapping]

44. Text Editor for Creating Web Pages • Windows: NotePad++ (will be used in demos) http://sourceforge.net/projects/notepad-plus/ • Mac: TextWrangler http://www.barebones.com/products/textwrangler/ • Download & Install before proceeding :)

45. FTP – File Transfer Program and Key Ideas • Move Files between Machines • Upload (put) moves from client to server • Download (get) moves files from server to client • Both visual and command line interfaces available • Want to send package to • John Smith in USA • What is missing? • Want to Transfer File to Server – FTP Need to know • Server Address • Username & Password

46. FTP – File Transfer Protocol • Windows / Mac: Filezilla http://filezilla-project.org/ • Windows: WinSCP http://winscp.net/eng/download.php • Mac: Fugu http://www.nbcs.rutgers.edu/newdocs/mac_ssl/Fugu.htm http://rsug.itd.umich.edu/software/fugu/download.html • Mac: Cyberduck http://cyberduck.ch • To Do • Install Filezilla on your Home computer

47. FTP – File Transfer Protocol : Demo • Will use Filezilla FTP client • I will connect from local computer to “comminfo.rutgers.edu” • You will connect from local computer to “eden.rutgers.edu”

48. FTP – File Transfer Protocol : Filezilla Main Window SiteManager Local Remote

49. FTP – File Transfer Protocol : Filezilla Site Manager SFTP Host: eden.rutgers.edu Server Type: SFTP User: Your Eden Userame Password: Your Eden Password

50. FTP – File Transfer Protocol : Filezilla Site Manager Local Absolute Path \ Remote Absolute Path /