Hypermedia and the Web. Bush’s Hypertext Vision Vannevar Bush, 1945 “As We May Think” Vision of post-war activities, Memex “…when one of these items is.

Slides:



Advertisements
Similar presentations
Mistakes in Web Design. Top 10 Mistakes in Web Design 10. Long download times 9. Outdated info 8. Link colors & consistency 7. Lack of navigation support.
Advertisements

Chapter 11 Designing the User Interface
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
HCI and AI. HCI is: –Human-computer interaction –Letting humans and computers do what they do best –Overview, zoom and filter, details on demand AI is:
M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic information isn’t very different n Special aspects for web.
Electronic Communications Usability Primer.
Web Usability By Chao Liang Based on Jakob Nielsen’s Book “ Designing Web Usability”
MScIT HCI Web GUI design. IBM’s CUA guidelines - taster Design Principles Each principle has supporting implementation techniques. The two design.
Creating a Website Part Two Navigation. Creating Usable Navigation Provide enough location information to let the user answer the following navigation.
AdvWeb-1/20 DePaul University SNL 262 Web Page Design Design Information Instructor: David A. Lash.
Web Page Design University of Wollongong IACT303 – INTI 2005 World Wide Networking.
T.Sharon-A.Frank 1 Multimedia Hypertext and Hypermedia.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
AdvWeb-1/11 DePaul University SNL 262 Web Page Design Design Information Instructor: David A. Lash.
Eleven Design Mistakes Making your web page easier for your students to use Making your web page easier for your students to use FSI Applications.
Form vs. Function Sistemes Multimèdia/Hipermèdia Universitat Pompeu Fabra Enric Guaus i Termens Music Technology Group Universitat Pompeu Fabra
Chapter 13: Designing the User Interface
The Internet & The World Wide Web Notes
Spring Chp.16: Hypermedia and the WWW The internet was not invented by Al Gore Rather, vision of hypertexed documents is credited to Vannevar Bush.
Internet Standard Grade Computing. Internet a wide area network spanning the globe. consists of many smaller networks linked together. Service a way of.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
How to Create Photoshop Web Comps. Main Ideas You will create an image in Photoshop that will look exactly like your web site will look, created in the.
Key Applications Module Lesson 19 — PowerPoint Essentials
Web-designWeb-design. Web design What is it? Web-design features Before…
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Navigation Section 2. Objectives Student will knowhow to navigate through the browser.
CP3024 Lecture 12 Setting up a World Wide Web Site.
SWE205 Review Spring Why is software unusable? Users are no longer trained. Why? Feature creep Inherently hard: a problem of communication Designed.
Learning and Technology Hypertext, hypermedia and the web Claire O’Malley.
MULTIMEDIA DEFINITION OF MULTIMEDIA
Creating a Usable Web Site Royce Shin - Web Development University of Minnesota.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
1 Human Computer Interaction Week 10 Web Usability.
Fundamentals of Web Publishing MIS 208-B LEC: T 08:15PM-10:05PM- ADM102 LAB: TH 08:15PM-10:05PM - ADM138 Andy Stokes.
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
Getting Started with E-Books: Sony Reader for staff.
Prioritizing Web Usability Nielsen and Loranger Chapter 3: Revisiting Early Web Usability Findings Paul Ammann SWE 432 Design.
Introduction to Web Page Design. General Design Tips.
INTERNET PRESENTATION. WHAT IS THE INTERNET? The worlds largest computer network. A collection of local, regional and national computer networks linked.
Designing web pages for handheld mobile devices Improving the client experience.
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Web Site Design & Management Class 7 March 12, 2003.
HYPERTEXT and HYPERMEDIA By Steven Geist and Larnic Ransom.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Web Page Concept and Design :
Ian Reeves. Which readers most likely read to end of story?  Online, tabloid or broadsheet?
IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 1 Web Design & Usability Elfan Nofiari Departemen Teknik Informatika ITB.
Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.
Hypertext. Hypertext History (1) Many early attempts to organize human knowledge Many early attempts to organize human knowledge Thesaurus (Roget) Thesaurus.
CS1001 Lecture 10. Overview HTML and Usability HTML and Usability Copyright Copyright.
Online Journalism – Multimedia Package Writing Professor Neil Foote, University of North Texas.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
CEP Hyper hyper October 17, Matthew J. Koehler October 10, 2002CEP Cognition and Technology Announcements  I lived. 4 hours, 29 minutes,
CMF For Content Authors. Slide 1©2001 Zope Corporation. All Rights Reserved. Outline Understand CMF approach to content Demonstrate content author goals.
The Successful Website
Section 6.1 Section 6.2 Write Web text Use a mission statement
Readability and Legibility
Objective % Explain concepts used to create websites.
A Brief Introduction to the Internet
Windows Internet Explorer 7-Illustrated Essentials
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Chapter 4 Planning Site Navigation
Elements of Effective Web Design
Objective Explain concepts used to create websites.
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Presentation transcript:

Hypermedia and the Web

Bush’s Hypertext Vision Vannevar Bush, 1945 “As We May Think” Vision of post-war activities, Memex “…when one of these items is in view, the other can be instantly recalled merely by tapping a button”

Nelson’s Hypertext Coined “hypertext” in discussing his universal library and docuverse Had vision of a Xanadu system with hypergrams (branching pictures), hypermaps (with transparent overlays), and branching movies Many concepts adopted in WWW

Early Commercial Systems Knowledge Systems’ KMS –One or two frames of text/graphics –Links (tree/annotation) to additional information Xerox PARC’s NoteCards –Cue card metaphor –Resizable but non-scrollable Apple’s HyperCard –Deck of cards metaphor –Links to other cards/programs

Hyperties Uses electronic encyclopedia metaphor Indices and table of contents list contents of information space History lists show recently visited pages No syntactic entry means no error messages (and less flexibility?) Used in help systems, books

Shneiderman’s Golden Rules of Hypertext Choose projects where: 1.There is a large body of information in numerous fragments 2.The fragments relate to each other 3.The user needs only a small fraction of the fragments at a time

Hypertext Guidelines Know the users and their tasks Ensure that meaningful structure comes first Apply diverse skills Repect information chunking Show interrelationships Ensure simplicity in traversal Design each screen carefully such that they can be grasped easily Require low cognitive load

Hypermedia and the World Wide Web

Jacob Nielsen Designed Sun Microsystem’s Web site in early 1990s Chronicled nine versions of the site Employed usability testing approach Author of numerous books and articles on Web design Writes bi-weekly article at

How To Write On The Web (March 15, 1997) Relates to how users read on the Web (they don’t) Be succinct: write, cut in half, cut in half again Write for skimmers: use multiple levels of headlines, be meaningful, highlight Use inverted pyramids (start w/conclusion, add support, end w/background)

Web vs GUI Design (May 1, 1997) Give up full control (users, hardware, software have control) Plan for device diversity (in GUIs every pixel is controlled, on Web sw/devices differ) User controls Web navigation Web is part of a whole with other options

Top Ten Mistakes (May 1996) Frames Gratuitous use of bleeding edge technology Scrolling text and constant animations Complex URLs Orphan pages Long scrolling pages Lack of navigation support Non-standard link colors Outdated information Overly long (>10 sec) download times

Why Frames Suck (December 1996, revisited) Broken back button Printing problems Authoring problems (hard to learn) Search problems User preferences Nielsen acknowledges that frames are no longer a “disaster”, but are still “clumsy”

Browser Version Persistence April 18, 1999 Users are reluctant to update browsers Thick line shows actual data, thin shows projection Web pages most be designed to work with older browsers or risk losing users

The Case for Micropayments January 25, 1998 Nielsen predicts that most non-sales sites will move to micropayments within 2 years Time costs money, replace ad download with direct payment Most pages will cost less than a penny (cost invisible), others 1-10 cents (shown with an icon), others more (must click OK) Equates Web use with long distance calls and electricity

End of Web Design July 23, 2000 Four trends require toned down appearance –Users spend most of their time at other sites –Mobile devices drive standardized navigation –Use of multiple devices require semantic, not representation, emphasis –Syndicated content What remains in Web design? –Task-based development (what do users want) –Content design (visit site for content, not looks) –Information architecture beyond standard links

Eyetracking Study of Web Users May 14, 2000 Poynter Institute study: –Text (78%) attracts attention before graphics –Headlines should be simple and direct –Shallow reading is common (users select short articles, only read 75% of it) –Users alternate between two open browsers (design for easy reorientation) Implications for non- newspaper sites –Must establish trust –Users spend less time at non-news sites –Users will read fewer words on non-news sites

WAP Doesn’t Work December 10, 2000 Wireless Application Protocol (WAP) defines a way to access the Internet with phones 70% of users said they would not be using WAP in a year Even simple tasks required too much time WAP guidelines –Do not use traditional Web design principles –Develop a distinct voice with minimal word count –Do not use unique (and unclear) labels/menus –Match information architecture with tasks (provide TV listings by time, not network)

Are Users Stupid? Feb 4, 2001 Opponents of usability claim that it focuses on stupid users who cannot overcome complexity Do not exclude potential buyers from your site for elitist reasons Even if users can overcome complexity, that does not mean that they will