Designing for Humans. Nov 202 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states.

Slides:



Advertisements
Similar presentations
Basic Computer Skills Windows & the Internet.
Advertisements

Lesson 9: Looking at the Windows Desktop
Intro to Computers!.
Working with Profiles in IX1D v 3 – A Tutorial © 2006 Interpex Limited All rights reserved Version 1.0.
The New User Interface MEDITECH Training & Education.
BTEC 149. Windows Desktop Click on the Start Button.
DEVELOPING ICT SKILLS PART -TWO
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
MIT-Word Lesson One Notes.
 Use the Left and Right arrow keys or the Page Up and Page Down keys to move between the pages. You can also click on the pages to move forward.  To.
Windows 8 How to Navigate the Windows 8 Start Screen with Your Mouse and Keyboard Shortcuts Bill James, APCUG, Region 8 Advisor.
Windows XP Basics OVERVIEW Next.
Advanced Microsoft Word Hosted by Jared Hoffman Topics Keyboard Shortcuts Customizing Toolbars and Menus Auto Format & Auto Correct Tabs Inserting Pictures.
Computer Basics. Using a computer The purpose of this class is to get comfortable with: Using Windows.
Visual Basic 2010 How to Program. © by Pearson Education, Inc. All Rights Reserved.2.
Operating Systems Day 3. Changing Date & Time 1.Double click on digital clock on the notification area of a task bar (Click start button, Click control.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Learning About Technology Chapter 2. 2 Learning New Tools How do you learn to use new tools?  Read the instruction manual Programming a VCR Cooling my.
Google Earth How to create a Google Earth Tour and place it in your Wiki.
Spreadsheet. Objectives Create a new blank workbook. Create a new blank workbook. Identify user interface elements that you can use to accomplish basic.
2. Introduction to the Visual Studio.NET IDE 2. Introduction to the Visual Studio.NET IDE Ch2 – Deitel’s Book.
Windows & The Internet. Objectives: Identify and use computer hardware Open and close a desired program Switch back and forth between open windows Create.
Mastering Your Word Processing Skills
Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.
Transferring Course Materials to the Web. Creating a Web Site With a Template To create a Web site with a template 1.Start FrontPage. 2.On the File menu,
Basic Navigation in SAP For the Windows Graphical User Interface (GUI) Click your mouse anywhere or select “Page Down” to scroll through the pages.
Project 3 File, Document, Folder Management, Windows XP Explorer Windows XP Service Pack 2 Edition Comprehensive Concepts and Techniques.
1 Lesson 6 Exploring Microsoft Office 2007 Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
1 Lesson 6 Exploring Microsoft Office 2007 Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
MICROSOFT WORD GETTING STARTED WITH WORD. CONTENTS 1.STARTING THE PROGRAMSTARTING THE PROGRAM 2.BASIC TEXT EDITINGBASIC TEXT EDITING 3.SAVING A DOCUMENTSAVING.
IE 411/511: Visual Programming for Industrial Applications
OPL MRR Viewer Tutorial David Stark North Carolina State University 31 Jan 2008.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 2 Welcome Application Introducing the Visual Basic 2008 Express Edition IDE.
MIT-Word Lesson One Notes Sills—Fall Word Application MS Word 2010 is a type of Word Processor Word Processing software is designed primarily for.
Information Technology Word Processing. Word Processing is the preparation of documents such as letters, reports, memos, books, or any other type of correspondences.
Basic Computer and Word Functions, part 1 Read the information and use to answer the questions in the Basic Computer and Word Functions Study Guide.
Productivity Programs Common Features and Commands.
Copyright © 2010 Wolters Kluwer Health | Lippincott Williams & Wilkins Introduction to Windows Chapter 2.
Word 2010 Vocabulary List 1. Click and Type - A feature that allows you to double-click a blank area of a document to position the cursor in that location,
POWERPOINT REVIEW Computer Technology. After reading the definition, think of the answer. Then, click to reveal the answer and see if you are correct.
3461 Characteristics of Good Interfaces Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping 
Microsoft Office 2008 for Mac – Illustrated Unit C: Understanding File Management.
XP New Perspectives on Windows 2000 Professional Windows 2000 Tutorial 2 1 Microsoft Windows 2000 Professional Tutorial 2 – Working With Files.
Word Lesson One Notes Drennan. Word Application MS Word 2013 is a type of Word Processor Word Processing software is designed primarily for two purposes.
Basic Computer and Word Functions, part 1 Read the information and use to answer the questions in the Basic Computer and Word Functions Study Guide.
PowerPoint Basics Tutorial 4: Interactivity & Media PowerPoint can communicate with the outside world by linking to different applications, managing different.
How to Design a Page, Part 2 HOWE/ANDERSON. Step 1: Login   Job No  User ID/ Password.
By Felixberto Dominic B. Eruela.  Using a computer to create, edit, and print documents. Of all computer applications, word processing is the most common.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes.
Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.
Computing Fundamentals Module Lesson 7 — The Windows Operating System Computer Literacy BASICS.
Chapter 3 Device Monitor Screen Otasuke GP-EX! Chapter 3 Device Monitor Screen Chapter 3 Device Monitor Screen.
Main Computer Components
4 weeks to heaven.  Basic computer architecture  Power-up  Starting up Windows  Mousing  Keyboard  windows  Finding and starting programs  Working.
3461 SR Compatibility SR Compatibility  S = Stimulus, the input device that is being manipulated or stimulated  R = Response, the visual, aural,
CMPF124 Personal Productivity With Information Technology Chapter 1 – Part 2 Introduction to Windows Operating Systems Manipulating Windows GUI CMPF 124.
Word and the Writing Process. To create a document 1.On the Start menu, point to Programs, and then click Microsoft Word. A new document opens in Normal.
Basic Navigation in Oracle R12 BY: Muhammad Irfan.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
Basic Computer Skills Windows & the Internet vfu.bg/en/e-Learning/
Lesson 11 Exploring Microsoft Office 2007
Getting Started with Application Software
With Microsoft FrontPage 2000
Microsoft Windows 2000 Professional
Program and Graphical User Interface Design
SR Compatibility.
European Computer Driving Licence
University of Warith AL-Anbiya’a
Presentation transcript:

Designing for Humans

Nov 202 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 203 Consistency Interface components and layout should be consistent within and across applications Consistency refers to… Presence and absence of features Physical location of features Appearance of features (widgets, text, icons) Method of accessing features

Nov 204 Presence and Absence of Features Word: Customize keyboard Power Point: Can’t customize keyboard

Nov 205 Recently used file list Word Not available StatView Presence and Absence of Features (2)

Nov 206 Power Point: Word: Bottom of list Top of list Netscape: Middle of list “All files” in different locations Physical Location of Features

Nov 207 Windows: Windows is searching for a file Appearance of Features

Nov 208 Consistent (i.e., same) size within a group is aesthetically pleasing Appearance of Features (2)

Nov 209 Word: From INSERT menu: From VIEW menu: Two ways to insert page numbers! Are they the same? Method of Accessing Features

Nov 2010 Application on the desktop: launch by double click Application on the toolbar: launch by single click Method of Accessing Features (2)

Nov 2011 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2012 Hierarchy and Grouping Make relationships obvious Provide “headings” to categorize groups of related items Use Horizontal separators Borders Labeled borders Alignment

Nov 2013 Hierarchy is ambiguous ICQ: “Online” and “Offline” entries are indented. Examples

Nov 2014 Good sense of hierarchy and groupings via labeled borders Yamaha OPL Sound Driver: Examples (2)

Nov 2015 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2016 States and State Changes The user must Know the state of the system at all times Be informed of state changes

Nov 2017 Caps Lock State If would be nice if Caps Lock were indicated! Caps Lock What if Caps Lock is on?

Nov 2018 Click here Eudora: State changes

Nov 2019 Click here Notes: 1. Compromise: Bad: position changes Good: all entries appear 2. Animation helps Eudora: State changes (2)

Nov 2020 State Uncertainty Cable modem… POWER CABLEPC TEST RD TD Receive Data (from where?)

Nov 2021 What is “Receive Data”? Cable Modem My PC Network Server Receive data

Nov 2022 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2023 Overload From Miller’s famous essay… Refers to the number of items a human can reasonably process at once Miller, G. A. (1956, March). The magical number seven plus or minus two: Some limits on our capacity for processing information. The Psychological Review, 63(2), The magical number seven plus or minus two! Reference:

Nov 2024 Too much to digest without groupings Eudora: Overload example

Nov 2025 Colour Overload The following people are "offline" Painted in red to indicate "offline" (but we already know that!) ICQ:

Nov 2026 Why is this blue? Why is this purple? Why is this yellow? ICQ: Colour overload (2)

Nov 2027 Good use of colour Eudora: Colour overload (3)

Nov 2028 Coffee Maker on/off Switch On or off? Discussion: On the left, the switch appears similar to a North American wall switch in the up, or on, position, whereas the reverse observation applies for the picture on the right. However, the label 0 appears above the label 1. So, some confusion exists. The top part of the switch is immediately beside the label 0; so, perhaps pushing the top part of the switch is associated with the label 0. Also, the use of the colour red may be misleading. Does red mean on or off? When colour is used, sometimes red/green pairs exist, typically with green implying on and red implying off.

Nov 2029 No Confirmation Click here to “Save Windows Location” (for next ftp login) Then what? Are the changes saved? WS-Ftp:

Nov 2030 The Dead Zone! (no feedback) Case Study – When a file is copied to a folder, feedback in the form of a progress bar is presented during copying – but only if the file is large and the operation takes several seconds, or more. This is fine. However, the progress bar only appears when copying begins. If the source file is on a local hard drive, copying begins “immediately” because the seek time – the time to find the file – is negligible. If the source file is on a remote drive or a tape drive, there may be a dead zone – a prolonged period of time without feedback. This occurs because there is no progress bar during the seek time. The designers assumed the seek time is negligible (true most of the time) and, thus, no provision was made to include a progress bar when seek time is substantial..

Nov 2031 Missed Button Clicks Case Study Task: Using a paint program, zoom in and crop image Step 1. Click Zoom tool Step 2. Click in image (zoom) Step 3. Click Selection tool Step 4. Click and drag in image Step 5. Crop Zoom Selection But… Button clicks are frequently missed. I get zooming when I want selection, or selection when I want zooming.

Nov 2032 Kangaroo Effects Case Study Task: In a paint program select a region of an image, part of which is outside the viewport Step 1. Click Selection tool Step 2. Click and drag Select to off-screen region But… When the selected region hits the edge of the window, the viewport automatically scrolls. But the scroll rate is too fast. The selected region extends far beyond the desired end-point. Attempting to correct this by moving in the reverse direct produces the same problem but in the opposite direction. I end up hopping – like a kangaroo – back and forth trying to get the desired region selected.

Nov 2033 Speak the User’s Language From Environment Canada’s web site… Case Study Task: Determine weather conditions. Mostly likely you want to know the current weather in your present location. But… When were these weather conditions gathered? 11:00 UTC, apparently. What is UTC? (The answer is in their FAQ page!)

Nov 2034 (Not so) Intelligent Dragging Case Study Task: In an editor, select a region of text by dragging Select this region But… I can’t select the desired region. I get  Or 

Designing for Humans SR Compatibility

Nov 2036 SR Compatibility – What is it? S = Stimulus, the input device that is being manipulated or stimulated R = Response, the visual, aural, or kinesthetic sense that is affected by the stimulus Compatibility refers to the correctness of the match between the stimulus and the response

Nov 2037 Senses Visual Aural Kinesthetic Sensory experience derived from bodily movements and tensions

Nov 2038 Example – Cursor Control (1D) StimulusResponse Wrist and/or arm movement

Nov 2039 Example – Object Manipulation (1D) Stimulus Response

Nov 2040 Example – Object Manipulation (2D) Stimulus Response Stimulus Response

Nov 2041 The Issue In 2D there are 3 dof (degrees of freedom) x position or displacement y position or displacement  Z – z-axis angle or rotation A mouse is a 2 dof device Senses x displacement Senses y displacement Does not sense z-axis rotation The problem: generating z-axis rotation data with a mouse

Nov 2042 Solution #1 – Rotate Tool Step #1 – acquire object, move mouse Step #2 – click on rotate tool (enable rotate mode) or ? Step #3 – acquire object, move mouse

Nov 2043 Solution #2 – Build a 3 dof Mouse Stimulus Response Step #1 – acquire object, move mouse

Nov 2044 Solution #2 – There it is! (MacKenzie, Soukoreff, & Pal, 1997) Two-ball mouse with 3 degrees of freedom

Nov 2045 Design Issues for 3 dof mouse Switching between 2 dof and 3 dof modes Solution: use a modifier key (e.g. SHIFT) to enable 3 dof mode Yielding 360° of rotation from limited wrist movement Solution: use a modifier key (e.g. CTRL) to “amplify” rotational mapping

Nov D Interaction (6 dof) ?

Nov 2047 SR Compatibility & Cultural Bias Stimulus (switch)Response (switch) Question: Is the light on or off? Answer: Off (in England) On (in Canada)

Nov 2048 SR Compatibility in User Interfaces Press me Visual feedback? Aural feedback? Kinesthetic feedback? Visual feedback? Aural feedback? Kinesthetic feedback?   Works pretty good, eh?

Nov 2049 Stimulus vs. Response – setting time What does this button do? Answer: moves the selected field “backwards” in time.

Nov 2050 Yes, but… “up” = earlier “down” = later