Information Architecture & Design Week 7 Schedule - Design Critiques due Now - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations.

Slides:



Advertisements
Similar presentations
Web Usability Starring the Webcredibles: Link, Dr. Web Credible, & Wendy Warner.
Advertisements

PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
ORGANIZING THE CONTENT Physical Structure
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
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.
Strategies for Supporting Note Taking Julie Shea, Department Chair for Science/Tech/Business Margaret Adams, Director of Curriculum.
Microsoft Expression Web-Illustrated Unit C: Adding Text and Links.
S2 – COMMUNICATIONS UNIT
Web Site Navigation.
Skills: short document writing technique, tips Concepts: types of Internet writing This work is licensed under a Creative Commons Attribution-Noncommercial-Share.
XP Exploring the Basics of Microsoft Windows XP1 Exploring the Basics of Windows XP.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005.
Writing for the Internet, short documents Skills: short document writing technique IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-
This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation. All.
Learn how to search for information the smart way Choose your own adventure!
The Information School of the University of Washington Information System Design Info-440 Autumn 2002 Session #10 BOO! BOO!
Web Page Development Identify elements of a Web Page Start Notepad
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
Search Engine Optimization March 23, 2011 Google Search Engine Optimization Starter Guide.
How the World Wide Web Works
WEB DESIGNING Prof. Jesse A. Role Ph. D TM UEAB 2010.
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.
1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.
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,
Database Types of database programs Charles w. Bachman Well- Designed Databases Database Management Systems Types of database programs Daabase Techniques.
Testing and Debugging Web pages. Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Information Architecture & Design Week 8 Schedule - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations - Research Papers Returned.
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.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Put it to the Test: Usability Testing of Library Web Sites Nicole Campbell, Washington State University.
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.
Windows Tutorial 4 Working with the Internet and
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.
Introduction to Canvas K-5
 The World Wide Web is a collection of electronic documents linked together like a spider web.  These documents are stored on computers called servers.
How to analyse a website. Points to consider The analysis of online material is a contested area of research. - Authenticity of online information - Ethical.
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.
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
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.
No one knows how large the Internet is and no one is in charge of it. The Internet is many, many computers all over the world hooked up to one another.
BSA Website Redevelopment Information Architecture.
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.
C OMPUTING E SSENTIALS Timothy J. O’Leary Linda I. O’Leary Presentations by: Fred Bounds.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Visualization in Text Information Retrieval Ben Houston Exocortex Technologies Zack Jacobson CAC.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
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.
Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.
Lesson 10—Networking BASICS1 Networking BASICS The Internet and Its Tools Unit 3 Lesson 10.
Information Architecture & Design Week 4 Schedule -Group Project Proposal Due -Planning IA Structures -Other Readings -Research Topic Presentations.
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.
Information Architecture & Design Week 6 Schedule - Browsing and Searching for IA - Other Readings - Research Topic Presentations - Class Work (if time)
1 UNIT 13 The World Wide Web. Introduction 2 Agenda The World Wide Web Search Engines Video Streaming 3.
1 UNIT 13 The World Wide Web. Introduction 2 The World Wide Web: ▫ Commonly referred to as WWW or the Web. ▫ Is a service on the Internet. It consists.
Points of View Reference Center Tutorial support.ebsco.com.
The Successful Website
L A B E L Marina Karapetyan.
Directories, Site Maps & Site Indexes
HCI and Hypermedia/WWW
Presentation transcript:

Information Architecture & Design Week 7 Schedule - Design Critiques due Now - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations - Group Work – Label Sorting

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 InterCaps (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 May Take More Time To Interpret Than 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 Dead Links without rollover text

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)

Let’s look at some maps (models)

Some maps are specific

Some are not

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

Card (Term) Sorting for Site Labels Why Card Sorting So Early? Multiple Applications of this Technique, unfortunately known (only) as Card Sorting Rosenfeld: Two Kinds of Labels - Subject Matter Expert Labels - Lay Person – Novice Labels Focus on Needs & Problems with Labels Categories of Labels help with Design Scope

Label Sorting – Speed Sorting How Much Time Will Users Spend Deciphering Your Site? A Series of Quick Label Evaluations - Terms - Phrases

Sorting Step 1 Look at all the terms & phrases Each of you: write a 1 sentence description of what the site these terms and phrases must be about. 2 Minutes!

Sorting Step 2 Read over the terms and phrases and circle the ones you immediately & certainly understand. 2 Minutes! Read over the terms and phrases and lightly cross out terms and phrases you don’t understand. 2 Minutes!

Sorting Step 3 Work together: suggest terms and phrases for the circled items. Provide up to 3 alternatives. Focus. 3 Minutes! Work together: suggest terms and phrases you crossed out. Provide up to 3 alternatives. Create. 3 Minutes!

ROTATE Label List! Each Group: Work with Another List All Three Steps Again. Turn Over Work to Original Project Group After Class: - Tighten Up Vocabulary - Consistency of Use (Nouns – Verbs) - Fix Cases, Spelling, Parallel Word Counts - What’s Missing?

Next Week Design Critiques returned Main Page Wireframe Class Q & A about course readings - Class participation is part of your grade Reminder - no class on Nov. 1