SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005.

Slides:



Advertisements
Similar presentations
Microsoft ® Office Word 2007 Training Table of Contents I: Create an automatic TOC Neeginan Institute of Applied Technology GTR&O presents:
Advertisements

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Member FINRA/SIPCThursday, November 12, 2009 Resource Menu Changes - Report User Experience Study | Kevin Cornwall.
Copyright 1999 all rights reserved The HCI Design Process n User Interfaces are not just built by sitting down and drawing up designs for them n Just like.
[Title of meeting] [Name of sponsor] [Date] For guidance on working with PowerPoint and reformatting slides, click on Help, then Microsoft PowerPoint Help,
Microsoft Office 2007: Introductory Computer Applications 11.
Word Lesson 8 Increasing Efficiency Using Word
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003.
Empirically Validated Web Page Design Metrics Melody Y. Ivory, Rashmi R. Sinha, Marti A. Hearst UC Berkeley CHI 2001.
Universal Access: More People. More Situations Content or Graphics Content or Graphics? An Empirical Analysis of Criteria for Award-Winning Websites Rashmi.
1 ISEM 3120 Seminar ISEM Objective(s): This year, the focus of this subject is to firstly teach you how to conduct a research project, and secondly pick.
SIMS 213: User Interface Design & Development Marti Hearst Tues, March 5, 2002.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
I213: User Interface Design & Development Marti Hearst March 1, 2007.
1 Discussion Class 12 User Interfaces and Visualization.
Automating Assessment of Web Site Usability Marti Hearst Melody Ivory Rashmi Sinha University of California, Berkeley.
TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 5, Day 1 (10/28)
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Jan 22, 2004.
UCB CS Research Fair Search Text Mining Web Site Usability Marti Hearst SIMS.
Www: Greeked Templates Jakob Nielsen (useit.com & jnn.org) Thomas S. Tullis (Fidelity Investments)
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 22, 2001.
Mining the Web for Design Guidelines Marti Hearst, Melody Ivory, Rashmi Sinha UC Berkeley.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
Web Design cs414 spring Announcements Project status due Friday (submit pdf)
Chapter 13: Designing the User Interface
Oncosifter: A Customized Approach to Cancer Information Authors : Ketan Mane & Sidharth Thakur Presenter: Yueyu Fu.
Information Architecture Donna Maurer Usability Specialist.
A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.
English Word Origins Grade 3 Middle School (US 9 th Grade) Advanced English Pablo Sherman The etymology of language.
Pasewark & Pasewark 1 Word Lesson 8 Increasing Efficiency Using Word Microsoft Office 2007: Introductory.
The Project AH Computing. Functional Requirements  What the product must do!  Examples attractive welcome screen all options available as clickable.
Model Performance Indicators.
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.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Web Content Development Dr. Komlodi Class 22: Wirerfames.
Bringing Order to the Web: Automatically Categorizing Search Results Hao Chen, CS Division, UC Berkeley Susan Dumais, Microsoft Research ACM:CHI April.
G050: Lecture 02 Evaluating Interactive Multimedia Products
Organizing Your Information
Research on the Interaction Between Human and Machines University of Houston-Clear Lake Tasha Y. David.
MULTIMEDIA DEFINITION OF MULTIMEDIA
Student Portfolio Development. Portfolio Development Define the following: Portfolio Artifact Evidence Medium Annotation Design Analysis STUDENTS: Write.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 3 1 Searching the Web Using Search Engines and Directories Effectively Tutorial.
Usability Testing Chapter 6. Reliability Can you repeat the test?
Information Architecture & Design Week 7 Schedule - Design Critiques due Now - Metaphors, Graphics and Labels - Other Readings - Research Topic Presentations.
User Interface Design & Usability for the Web Card Sorting You should now have a basic idea as to content requirements, functional requirements and user.
Date 23 rd Jan Shatin 沙田 Mobile Information Architecture.
Interrelationship Digraphs
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Thomas Kern | The system documentation as binding agent for and in between internal and external customers April 24th, 2009 | Page 1 The system documentation.
Improved Video Categorization from Text Metadata and User Comments ACM SIGIR 2011:Research and development in Information Retrieval - Katja Filippova -
COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7.
After testing users Compile Data Compile Data Summarize Summarize Analyze Analyze Develop recommendations Develop recommendations Produce final report.
Assess usability of a Web site’s information architecture: Approximate people’s information-seeking behavior (Monte Carlo simulation) Output quantitative.
Intranet Redevelopment: Southside Christian College Meryl McCay College Librarian 2010.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Katherine Prentice, MSIS Richard Usatine, MD
Section 10.1 YOU WILL LEARN TO… Define scripting
Document Clustering Matt Hughes.
ENDANGERED ANIMALS A RESEARCH PROJECT
Prototyping Sriram Mohan.
A02 Creating my website NAME ______________.
Charts A chart is a graphic or visual representation of data
Presentation transcript:

SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005

Today Content Layout Technique: Wireframing Content Expression Normalization: Card Sorting

Wireframing What is the main idea? –Separate content from layout and display –Graphic Design: Use the page layout to signal the flow of interaction Group conceptually related items together –Nielsen: What does the layout communicate? Test if a page of content becomes more usable because of the layout A template (for a home page) should contain what items?

How WireFraming Fits In Kelly Goto & Eric Ott of Macromedia edia/monterey/architecture/

From

How to Test A Layout Study conducted by Thomas S. Tullis from Fidelity Investments in 1998 Assessed the usability of five alternative template designs for their intranets. Method: –Show templates with “greeked” text –Draw labeled boxes around each page corresponding to 9 elements –No overlapping allowed –Indicate if something appears not to be there

The Elements 1.Main content selections for this page 2.Page title 3.Person responsible for this page 4.Intranet-wide navigation (e.g., intranet home, search) 5.Last updated date 6.Intranet identifier/logo 7.Site navigation (e.g, major sections of this section of the intranet) 8.Confidentiality/security (e.g, Public, Confidential, etc.) 9.Site news items

From

Nielsen Wireframing Example Different parts of the designs scored better Best parts were taken from each design and combined Resulted in an overall better score

Results of Study Correct Page Elements Subjective Appeal (-3 to +3) Template 152%+1.3 Template 367%+0.9 Final Design72%+2.1

The Vocabulary Problem If you ask a set of people to describe a set of things there is little overlap in the results. Some nice studies have been done on this: –Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): (1987)

The Vocabulary Problem Idea: see how often people agree on word choice Data sets examined (# of participants): –Main verbs used by typists to describe edit types (48) –Commands for a hypothetical “message decoder” computer program (100) –First word used to describe 50 common objects (337) –Categories for 64 classified ads (30) –First keywords for a each of a set of recipes (24) Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): (1987)

The Vocabulary Problem We get really bad results –If one person assigns the name, the probability of it NOT matching with another person’s is about 80% Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): (1987)

The Vocabulary Problem What if we pick the most commonly chosen words as the standard? Still not good: Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): (1987)

The Solution? Card Sorting Content-focused Two main purposes –Determine how to organize a set of information Determine a collective mental model of the collection’s contents –Determine good labels for the items in that organization How is it done? –User-centered Write topics on cards Ask different participants to organize them for a given task –Need strategies for “difficult” cards Consolidate the results –Do another round for labels

Slide adapted from Rashmi Sinha's, Consolidating Card Sorting Results At root of all categorization techniques is question: “How far is A from B?” Proximity / similarity matrix can organize the results –Each cell shows how often 2 items were in the same category Self correlation

Slide adapted from Rashmi Sinha's, Analyzing Results via Hierarchical Clustering Continental Buick Cadillac Mercedes Corvette Jaguar Firebird Camaro Monte Carlo Capri Chevy Vega Dart Volkswagen Cluster Analysis for dataset about cars Advantages –Suggests a structural solution Disadvantages –Prescriptive –Averages over different dimensions

Slide adapted from Rashmi Sinha's, Analyzing Results via Multidimensional Scaling (MDS)

Slide adapted from Rashmi Sinha's, Advantages of Multidimensional Scaling (MDS) Hints at possible solutions rather than prescribes. Tells you the possibilities, leaves specifics of solution to you. Dimensions (axes) can suggest facets. Similarity maps are easy to understand Helps identify which dimensions are important –Do cluster analysis using the axes identified by MDS –Cluster Analysis and MDS are complementary

How Many Participants for Card Sorting? How many participants? –Tullis and Wood ’04, discussed by Nielsen: –Study included 168 participants, 46 cards –Nielson concludes: 5 for usability studies –Evaluating and reacting to an existing design –Fewer potential responses 15 participants for card sorting –(to get 90% agreement) –Generating something, so more diversity in responses –(Numbers based on only one site!) (Interface design should interweave generating and testing)

Let’s Do Some Sorting! There are many tools out there Let’s try WebSort –