Information Architecture & Design Week 8 Schedule - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations - Research Papers Returned.

Slides:



Advertisements
Similar presentations
Information Architecture for Indexers Presented by Fred Leise American Society of Indexers National Conference Galveston, Texas May 18, 2002 © 2002 ContextualAnalysis.
Advertisements

PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH.
Google Chrome & Search C Chapter 18. Objectives 1.Use Google Chrome to navigate the Word Wide Web. 2.Manage bookmarks for web pages. 3.Perform basic keyword.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
Principles of Web Design 5th Edition
What is the Internet? Internet: The Internet, in simplest terms, is the large group of millions of computers around the world that are all connected to.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
Web Page Development Identify elements of a Web Page Start Notepad
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
What Is A Web Page? An Introduction to the Internet.
How the World Wide Web Works
WEB DESIGNING Prof. Jesse A. Role Ph. D TM UEAB 2010.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
1.Learning the Terms Learning the TermsLearning the Terms 2.Accessing the Internet from a PC Accessing the Internet from a PCAccessing the Internet from.
Dawn Pedersen Art Institute. Introduction All your hard design work will suffer in anonymity if people can't find your site. The most common way people.
Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.
The Internet & Web Browsers Business Webpage Design Kelly Seale.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
Notes to Teachers 1.Northstar digital literacy assessment or an alternate assessment should be done at the start of each new unit. To access the assessments,
Website Development. Internet Internet (Net) – Global network connecting millions of computers. Network – Group of computers and associated devices that.
Testing and Debugging Web pages. Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple.
Tutorial 1 Getting Started with Adobe Dreamweaver CS3
Web-designWeb-design. Web design What is it? Web-design features Before…
1 Web Basics Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section.
1999 Asian Women's Network Training Workshop. A short discussion about Information Architecture.
What is the Internet? Internet: The Internet, in simplest terms, is the large group of millions of computers around the world that are all connected to.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Creating Web Documents Wk 2: HTML & PSP basics Discuss sites HTML, PSP lesson Assignment: first Web page due Day class: 1/23; Night class 1/28.
Put it to the Test: Usability Testing of Library Web Sites Nicole Campbell, Washington State University.
Human Factors in Web Design Mohsen Asgari. Contents WWW & Human Factors Relationship Human and Computer Interaction HCI & WWW Information Presentation.
Click on surfer mouse to catch a wave. The Internet is a worldwide network of _______ that are connected by wires and cables. Click the picture below.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
3231 Software Engineering By Germaine Cheung Hong Kong Computer Institute Lecture 12.
Internet Browsing the world. Browse Internet Course contents Overview: Browsing the world Lesson 1: Internet Explorer Lesson 2: Save a link for future.
Tutorial 1: Browser Basics.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
 The World Wide Web is a collection of electronic documents linked together like a spider web.  These documents are stored on computers called servers.
Web site development: Basics & MS FrontPage. What I hope to demonstrate n n Basics of a good web site n n How to most effectively communicate via the.
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.
D. Beecroft Fremont High School Information Resources.
To navigate ● To steer or manage ● Generally a ship or an airplane ● To choose a path of travel over the Web. ● Navigation: choose a path through a website's.
HTML: Hyptertext Markup Language Doman’s Sections.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.
Web Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  Web site design  Web page design.
Information Architecture & Design Week 7 Schedule - Design Critiques due Now - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations.
C OMPUTING E SSENTIALS Timothy J. O’Leary Linda I. O’Leary Presentations by: Fred Bounds.
Information Architecture & Design Week 6 Schedule -Group Project Plan Due -Browsing and Searching for IA -Other Readings -Research Topic Presentations.
Living Online Lesson 3 Using the Internet IC3 Basics Internet and Computing Core Certification Ambrose, Bergerud, Buscge, Morrison, Wells-Pusins.
Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page.
Copyright 2007, EMC Paradigm Publishing Inc. INTERNET EXPLORER 7 BACKNEXTEND 1-1 LINKS TO OBJECTIVES Launching Internet Explorer Launching Internet Explorer.
Website Design, Development and Maintenance ONLY TAKE DOWN NOTES ON INDICATED SLIDES.
Planning and Designing Effective Web Pages. When planning a new site Determine site goals 2. Identify the target audience 3. Conduct market research.
Developing a Basic Web Site HTML Tutorial 2. Objectives Define links and how to use them. Create element ids to mark specific locations within a document.
Information Architecture & Design Week 9 Schedule - Web Research Papers Due Now - Questions about Metaphors and Icons with Labels - Design 2- the Web -
Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.
We looked at these two presentations and talked about the structure of setting up the table.
Information Architecture & Design Week 4 Schedule -Group Project Proposal Due -Planning IA Structures -Other Readings -Research Topic Presentations.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Information Architecture & Design Week 6 Schedule - Browsing and Searching for IA - Other Readings - Research Topic Presentations - Class Work (if time)
Web coordinator workshop. Introduction Meet and greet –Who are you and what was the last website you visited? Comms team – here for support + our role.
The Internet & Web Browsers Business Webpage Design Created by Kelly Seale Adapted by Jill Einerson.
Basics of Website Development
L A B E L Marina Karapetyan.
Web-design.
HCI and Hypermedia/WWW
Use an Internet Browser
Hyperlinks Anchor Tags.
Presentation transcript:

Information Architecture & Design Week 8 Schedule - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations - Research Papers Returned

Labeling Systems Design Labels are More Than Link Descriptors Convey the Structure and Purpose of the Web Site Describe in the Language of the (Analyzed) User(s) (But Not All Jargon) Differentiate Each Topic Imply Hierarchy - News – Tech News – Computing News – Macintosh News Nouns and Verbs (Mixed & Consistency) Reading Behavior

Varieties of Label Designs Contextual Links Headings - Text - Narrative Help Navigation System Choices - Toolbars & Navigation Bars - Application Functionality Index Terms - Searching (Results) - Browsing Graphics (Iconic) - Maps - Images Subject Lines Rosenfeld p 80

Labels in Use (Affecting Design) A-Z Indexes (“Term Rotate” and Flatten) Thesaurus of Labels (and Relationships) Narrowing the Possibilities of Use Examine All the Labels at End of Tech-Independent Design Consistent with Headings and Bookmark Uniqueness Work With Your Content (Content Analysis – Use Search & Evaluate Results) Card Sorting to Determine Structure and Metaphors/Themes Dates, Times, Sizes, Rankings & Categories Too

Well-Designed Labels… Go Unnoticed Use Size and Color for HierarchyHierarchy Follow Consistent Graphical & Textual Representation Describe and are Parallel to Other Labels Metaphorically Correct Use Rollover Text Communicates Part of the Structure of the Site (The Name of the Label is like the Name of the Page it Links to) Notes If It Breaks The Browsing Metaphor (another Window via Links)

Bad Labelling Exampls Typos & Misspellings (See Above!) Too Much Text or Extraneous That Really Doesn’t Tell You Anything About The Link That Makes You Less Likely To Understand The Link And Actually May Take More Time To Interpret Than Actually Clicking On The Link Name TOO MUCH UPPERCASE TEXT THAT IS MORE ARDUOUS TO READ AND COMPREHEND Links in Color “Click Here” Are Too Numerous Are Too Cute

Metaphors What Does the Web “Look” Like To You? What Does an Individual Web Site “Look” Link To You? How Do You Integrate with Labels?Labels How Does Metaphor Affect Memory of a Site (during use and after a visit)? Always a Physical Space (Movement)? - Information Highway - Maps - “Explorer” & “Navigator” (Opera?) How Do People Describe a Web Site Visit?

Maglio & Matlock (1998) Great Bibliography Users Remembered Little of Site Visits - Anchor Points - Key Nodes that lead to Target Information - Personal Routines – What Worked Before Will Work Now (!) Consistently Among Web Sites Consistency Among Search Engines Bad User Habits Continue Bad Design Conventions Continue - Language of Web Site Use Visiting Went… - Talk Aloud Protocols When Studying Web Use - Users Conceptualize Themselves Moving TOWARD Information, not Information Being BROUGHT to Them.

Maglio & Matlock (1998) 2 Metaphor and Thought - Lakoff and Johnson Not Only a Literary Device (in Study) Linguistic Analysis Cognitive Analysis Trends and Metaphors of the Times - Clockwork to Computers “Image Schemata” - Pre-conceptual structures from our embodied experience - Habits and Assumptions in terms of understanding

Maglio & Matlock (1998) 3 Language Use on the Web - Outside & Inside Actions System Actions - Click, Scroll, Type Move - Go, Follow Computer Assistance - Display, Bring Up Information Action - Look For, Search, Browse Individual Process - Look, See Physical Motion Most Common - What about the Browser? (Agency) - What about Other Users? (Collaboration)

How to Design Text (from Metaphor) Labels and Graphics Jakob Nielsen Other News Examples? - NY Times - WSJ - AAS iSchool