Screen Design : Navigation, Windows, Controls, Text,
|
|
- Fay Tate
- 5 years ago
- Views:
Transcription
1 Overview Except for a few slides ( ), this Introduction Fundamentals of GUIs chapter is intended for group work while designing the GUI project. Screen Design : Navigation, Windows, Controls, Text, Evaluating GUI Performance - Features - Use - Master: Calculations Size, color, 1
2 GUI History Example: Car Rental 1980 : Keyboard based > 1990 mixed keyboard and mouse graphic elements need more screen space and high resolution displays > 2000 : like color and different OS, internet 2
3 Interaction 15/16 Command Line Advantages Powerful Flexible Appeals to experts Conserves screen space Disadvantages Commands must be memorized Requires learning Intolerant to typing errors Difficult for casual users Form Fill-in See 1990 Advantages Disadvantages Familiar format Consumes screen space Simplifies information entry Requires careful and efficient design Requires minimal training Does nit prevent typing errors 3
4 Interaction 15/16 Menu selection Advantages Utilizes recognition memory Reduces interaction complexity Aids decision making process Minimizes typing Aids casual users Disadvantages May slow experienced users Consumes screen space May create complex menu hierarchies Antromophic Man-man-like interface incl. language dialogue, touch, eye movements, Natural Advantages Disadvantages Difficult to implement 4
5 Interaction 15/16 Replacement of keyed entry by pointing devices such as mouse, touch screen, joystick, graphics tablet Direct Manipulation Advantages Faster learning Easier remembering Exploits visual cues Easy error recovery Provides context Immediate feedback Disadvantages Greater design complexity Window manipulation requirements Requires icon recognition Inefficient for touch typists (using keyboard without looking on it) Increased chance for screen clutter 5
6 Graphic Systems : Advantages Symbols are recognized faster than text see e.g. toolbars, message boxes with information and warning icons Fast learning Faster use Easier remembering (images can be easier remembered than text) Exploits visual cues (visual thinking is faster than verbal expressions) Provides context 6
7 Graphic Systems : Advantages Fewer errors (incl. error boxes, UNDO should be implemented) Increased feeling of control Less anxiety ( Sorgen ) concerning use mainly for inexperienced users More attractive (relevant for skeptical users) May consume less screen space Replaces national languages Easily augmented with text information (Tool-tip-text) Low typing requirements (eliminate the need for typing skills) 7
8 Graphic Systems : Disadvantages Greater design complexity (symbol and screen design is very important) Inconsistency in technique and terminology e.g. many different symbols etc. exist for the same task Not always familiar (as people are trained to numbers and words) Number of symbols are more limited by human comprehension than text Inefficient for heavy keyboard users May be inefficient for experienced users Not always the preferred style of interaction (not all users prefer graphics) May consume more screen space Hardware limitations like processing speed and graphic capabilities 8
9 Graphic Systems : Large vs. Small Screen Since smartphone and tablets become widespread, GUI design has to be adapted to smaller screens, less keyboard input and finger touch. Many SW has dedicated versions for each device incl. PC In consequence, GUI look & feel is more challenging. Typical screen size / aspect ratio / viewing distance 5 / 16:9 / 0.4 m 20 / 16:9 / 0.6 m 10 / 16:9 or 4:3 / 0.5 m 9
10 Graphic Systems : Same Task vs. Screen Size Example: Office Application 10
11 Graphic Systems : Same Task vs. Screen Size Example: Office Application 11
12 Graphic Systems : Same Task vs. Screen Size Example: Office Application 12
13 Graphic Systems : Same Task vs. Screen Size Example: Smart Home 13
14 Graphic Systems : Same Task vs. Screen Size Example: Smart Home 14
15 Graphic Systems : Same Task vs. Screen Size Example: Smart Home Example for commissioning 15
16 Graphic Systems : Same Task vs. Screen Size Modern GUIs can run on very different devices: - Smartphone - Tablet / Netbook - Notebook - PC Monitor - TVs (some) Large variety of screen size: Portrait (smartphone, tablet) vs. landscape (tablet, notebook, monitor, TV) Touch vs. keyboard & mouse input Challenge: Look & feel the same for one product : Adapt style guide & different GUIs with same icons, 16
17 Fundamental Principles (I) Accessibility Systems should be designed to be usable without modification by many users Aesthetically pleasing Visual appeal by grouping and alignment, use of color and graphics Availability Makes all objects available all the time (only good for large sized screens, not recommended for smartphone and tablets) Clarity An Interface should be easy to understand in terms of elements, text, functions Compatibility Provide compatibility for tasks, similar products, adopt user s perspective 20
18 Fundamental Principles (II) Configurability Permit easy personalization of configuration (OPTIONS) Consistency The GUI should look, act and operate the same throughout all tasks: - Same action should always have the same result - The function of elements should not change - The position of standard elements should not change Control - Actions should result form user requests and performed quickly - Permit users to customize GUI Directness Available alternatives should be visible 21
19 Fundamental Principles (III) Efficiency Minimize hand and eye movements (mouse keyboard, touch: ) Familiarity Use familiar concepts and language (real-world metaphors) Flexibility A system must be sensitive to different needs of users: Experience, knowledge, skills, personal preferences, Forgiveness - Tolerate common and unavoidable human errors - Provide constructive messages when an errors does occur Operability Ensure that the system can be used by everybody 22
20 Fundamental Principles (IV) Obviousness A system should be easily learned and understood: - What to look at - What and when to do - Why and how to do it Predictability The user should be able to follow the progression of a task (Do not bundle or combine action) Recovery - A system should permit command to reverse or undo the action - Ensure that work is never lost due to an error Responsiveness The system must rapidly respond to an action including acknowledgement 23
21 Fundamental Principles (V) Safety Protect the user form making mistakes, e.g. by reminders, list of choices, Simplicity Provide an interface as simple as possible: - Present common and necessary functions first - Hide things until they are needed - Provide visual hierarchy - Provide defaults - Provide uniformity and consistency Trade-Offs - User requirements have priority over technical requirements - Final design is based on balancing often-conflicting design principles (compare Fundamental Principles) 24
22 User Characteristics (I) Motivation - Is the users attitude towards the system positive, neutral or negative? - Is the motivation high, moderate or low? Stress level etc. - Is the user patient or impatient? - Shows the user some kind of stress? - What are the users expectations are they satisfied? User s physical characteristics - Age distribution (classification) and gender - Education (degrees, ) - Handedness (87% right-handed) - Disabilities 25
23 Speed of Interaction 100 Typical values for keyboard Words per minute Prose text > 200 Reading Listening 150 Speaking 100 Fast typist > 150 Typewriting Average typist 60 Two finger typist 40 Handwriting 30 Computer Transcription 30 Copying text 20 26
24 Good Interface & Screen Designs 127 Reflect the capabilities, needs and tasks of the users Are adapted to hardware Achieve business objectives for which it is designed Good interface design goals: Reduction of Visual work Intellectual work Memory work Motor work (mouse, keyboard) Summary of slides Fundamental Principles Take care of them for your case studies. Minimize burdens imposed by the technology used 27
25 How to Discourage the User 128 Unclear caption, wording, Improper objects and graphics Misleading headings Unnecessary or irrelevant information Requests that require backtrack or thinking about previous stuff Poor layout of screen objects incl. their placement Poor legibility Summary of slides Fundamental Principles Take care of them for your case studies. 28
26 Interaction Starting Area & Arrangements 135 Provide the starting point in the screen s upper-left corner Focus user attention on the most important parts of the screen Divide information (elements) into units that are meaningful (grouping) Provide an ordering of elements including prioritization Possible ordering schemes: Conventional, sequence of use, frequency of use, function, importance Form groups that cover all possibilities All information that must be compared is visible at the same time Only information which is relevant to the user s tasks is presented 29
27 Examples of GUIs : Balance & Symmetry Balance / Symmetry Instability / Asymmetry 30
28 Examples of GUIs : Sequentiality Sequentiality Randomness 31
29 Examples of GUIs : Simplicity Simplicity Complexity 32
30 Examples of GUIs : Predictability
31 Screen / Windows Arrange all necessary object, elements etc. on one screen (if possible) 181 Prevent scrolling 178 If more than one screen is used the user should not have to remember things from one screen to the next 181 Arrange object in a way that user interaction including reading) starts in the top left corner Windows should always have a title which is descriptive and unique
32 Screen / Windows : Arrangement of Screen Tasks 298 Sequential : no 35
33 Screen / Windows : Arrangement of Screen Tasks 296 Sequential : yes 36
34 Screen / Windows : Arrangement of Screen Tasks 296 Sequential : yes optimized by grouping and rearrangement of checkbox Main Files Update with changes 37
35 Arranging Windows 397/8 Overlapping Cascading Tiled No window should ever completely hidden! 38
36 Components of Windows 391 Title bar* Menu bar Toolbar Window state *: Customization possible User area Frame Status bar There are (per definition) primary and secondary windows: - Primary: see above - Secondary: Common dialogs, message boxes, pop-up windows, 39
37 Primary Window 400 Proper usage - Used to represent an independent application - Menu, toolbar, status, - Divide independent functions into separate primary windows - Arrange unrelated functions in one window 40
38 Secondary Windows 401 Common dialogs, message boxes, pop-up windows, Proper usage - For performing supplemental actions - For presenting frequently or occasionally used windows - Use objects of operating systems which are well known to the user Important Guidelines - Should typically not appear in the toolbar - A secondary window should not be as large as the primary window 41
39 Secondary Windows : Common Dialogs 416 open save color print 42
40 Secondary Windows : Message Boxes 411 Proper usage - Use for presenting brief messages - Use for requesting specific actions - Use for tasks that take are easy to be done Important Guidelines - Should typically contain text which can be understood - Should have icons for emphasizing 43
41 Secondary Windows : Input Boxes 402 Proper usage - Use for input of numbers or text - Use rarely - Default input can be set in order to minimize user input Important Guidelines - Should typically contain text which can be understood - Input data should be verified before processing 44
42 Sizing and Placing Windows 415/6 Number of windows - Minimize number of windows needed - Too many windows can be confusing Sizing windows - Windows should be large enough to present all information - If a window is too large, determine if all information is needed and/or related or use other objects which are smaller - Optimum windows size about 12 lines for text - Avoid scrolling - Main windows can/should be maximized (full screen) Placing windows - Don t hide other windows completely - Cascading is recommended 45
43 Elements of GUIs : Menus 308 ff Hierarchical/sequential structure recommended, additional toolbar 312 Level 0 File Options Level 1 Open O1 Save O2 >> Text Number 46
44 Elements of GUIs : Menus 308 ff Organisation & Proper use - Language and consistency acc. user expectations - Display all or only relevant alternatives - Cascade menus if necessary - Delete or grey out inactive items - Mark active selections - Maximum of 6 without grouping or up to 20 with grouping (line separators) - Order acc. importance or alphabetically - Use keyboard accelerators (F1 for help, CRTL + C for copy, ) - Order menu items in a useful order (important first, alphabetically, ) 47
45 Elements of GUIs : Data Field (Text Boxes) 461 Description: Purpose: Advantages: Rectangular shape, single or multi-line Text to enter (proposal can be displayed) Flexibility, familiar, little space, rapid reading Disadvantage: Requires keyboard, input must be remembered, not fail save e.g. for databases Proper usage: Data that can t be categorized or selection is not possible, text height and font appropriate, black text on light background can be structured to requested input, e.g. phone number: 466 Phone (area / line direct) / - 48
46 Elements of GUIs : Command Button (Toolbar similar) 445 Description: Purpose: Advantages: Rectangular shape, label as text or graphics Start action Always visible, faster than menu, can be logically ordered Disadvantage: Consumes screen space, requires often pointing device Proper usage: Size as large as reasonable, use not more than 6 buttons on a window, arrange buttons logically, use enable and disable, use descriptive text 49
47 Elements of GUIs : Checkboxes 478 Vertical and horizontal arrangement Description: Purpose: Advantages: Small circles filled if selected and label, only one can be chosen Selection of only one items (compare to Check Box) Easy to access, easy to compare, preferred by users Disadvantage: Consumes screen space, limited number of choices Proper usage: For settings or attributes, non-exclusive choices, good for choices that are discrete, small and fixed in number, choices which are not easy to remember, choices that never chance in content 50
48 Elements of GUIs : Radio Buttons 468 Vertical and horizontal arrangement Description: Purpose: Advantages: Small circles filled if selected and label, only one can be chosen Selection of only one item Easy to access, easy to compare, preferred by users Disadvantage: Consumes screen space, limited number of choices Proper usage: For settings or attributes, non-exclusive choices, good for choices that are discrete, small and fixed in number, choices which are not easy to remember, choices that never chance in content 51
49 Elements of GUIs : Combo Box (Drop down) 504 Description: Purpose: Advantages: Rectangular box offering a list of choices Selection of one (or more) item when space is limited Unlimited number of choices, save screen space, shows all Disadvantage: Requires action to display list, long lists require scrolling Proper usage: Use when screen space is limited, text can also be typed, highlight selected choice 52
50 Elements of GUIs : List Boxes 493 Description: Purpose: Advantages: Permanently displayed box with a list of attributes, selection by mouse possible, no text entry Displays a collections of items Unlimited number of choices, elements can be added Disadvantage: Requires action to display list, long lists require scrolling Proper usage: Items which are not frequently used, items large in number, highlight selected choice 53
51 Elements of GUIs : Data Input Examples Manual registration of attendees at conference etc. by staff Things to evaluate: - User input load - Screen space - Data to remember - Database consistent input (no typing errors, ) 54
52 Elements of GUIs : Data Input Examples Type Description Good Issue A Text Box only B C D Radio Buttons and Text Boxes List Boxes and Text Boxes Drop Combo Boxes and Text Boxes 55
53 Elements of GUIs : Scroll Bar, Slider 517 Description: Purpose: Advantages: Bar as scale with buttons, optional text boxes, selected by mouse, drag or click slider, horizontal and vertical arrangement Setting of a numerical value without keyboard Visualization of setting, easy to use, better than keyboard input Disadvantage: Consumes more screen space than text input, mouse needed, can be less precise than text (e.g ) Proper usage: To set an attribute, limited range of possible values 56
54 Elements of GUIs : Progress Indicator Description: Purpose: Advantages: Rectangular bar that visualizes the progress performed Provides feedback of processing of a lengthy operation Better than hour glass Disadvantage: Needs some screen space Proper usage: Portion of process completed, can be combined with numbers, can be used in an extra frame to save screen space or in status bar 57
55 Elements of GUIs : Tabs 521 Description: Purpose: Advantages: Window containing tabbed dividers, navigation between pages Presentation of information that can be logically organized into pages or sections Resembles sheets of paper, effective organization Disadvantage: Visually complex Proper usage: To present discrete, logically structured information, tab name should be short & descriptive, do not use for sequential steps user is familiar with tabs as options settings 58
56 Elements of GUIs : Icons, Index, Symbol 653 Description: Purpose: Advantages: Square graphics, 16 x 16, 32 x 32, 48 x 48, 256 colors Visualization and icon to click Saves screen space, graphics more intuitive for users Disadvantage: Often not easy to design Proper usage: Use common icons, consider cultural and social aspects as cross, body, Now: Draw icon for save on paper Drawings will be clustered and discusses. 59
57 Elements of GUIs : Tool Bar 614 Description: Purpose: Advantages: Icons that can be selected User interaction by clicking on icon, additional to menu Speeds up user interaction Disadvantage: Only effective with proper icons, consume screen space Proper usage: Excerpt of most often used menu items, icons must be easy to understand and to remember 60
58 Elements of GUIs : Status Bar 614 Description: Purpose: Advantages: Context sensitive messages related to object with focus or processing tasks Provides explanatory information, describes use of objects Easies user information, saves screen space compared to labels, Disadvantage: Only effective with user training Proper usage: Do not use for essential information 61
59 Elements of GUIs : Common Dialogues Description: Purpose: Advantages: Series of standardized windows provided by OS User interaction for open, save, print, Users are trained to common dialogues, no SW development Disadvantage: In some cases not very effective Proper usage: Use meaningful adaptation like extension filters for files 62
60 Elements of GUIs : Palette 488 Description: Purpose: Advantages: Series of graphical elements Selection of one option Picture aid, easy to compare choices, consumes less screen space than text Disadvantage: Limited number of choices or use >>, difficult to organize for scanning efficiency, requires meaningful graphical representation Proper usage: Setting of attributes, properties or values, exclusive choice, good for discrete elements which are limited and variable in number, not easy to remember, do not use when text is clearer than icons 63
61 Elements of GUIs : Controls Selection 549 Choosing the best control for certain tasks and screen space conditions: Task Best control Limited space Exclusive choice Radio buttons Drop down list box Not exclusive choice Setting a value within a range Executing an action Check boxes Bar Command button or icon Multiple selection list box Text box Menu 64
62 Elements of GUIs : Data Presentation 227 Display information always with labels or headings, use also units Display information in a useable format e.g. phone numbers, Format information as commonly used, support format in input box Time: 10:32:15, credit card: Break long strings into 3 or 4 digits with blanks in between see credit card, phone number, Align data into columns Organize for top-to-bottom scanning 65
63 Elements of GUIs : Data Justification 228 Left justify text formats Name: John Doe Name: John Doe City: Munich City: Munich Right justify numeric data Charge: Charge: Tax: 1.45 Tax: 1.45 Create a data ladder Animal: Cat Animal: Cat Age: 8 Age: 8 Number: 1234 Number: 1234 State: Ge State: Ge Create data statements Cats: cats Dogs: 8 8 dogs 66
64 Elements of GUIs : Data Justification
65 Example for Numerical Information Temperature + or -? 68
66 Elements of GUIs : Data Representation 424 What is really selected? GUI proper made but issue on color for select and non-selected choices 69
67 Elements of GUIs : Graphical Data Presentation (I) 263 Graphs are suitable for fast and easy comparison of data When charts & graphs? < 3 numbers: words ; 3 10: table ; > 5 graph Major types of charts and graphs (see MS EXCEL) Line graph Bar charts - not more than 5 curves - use adjacent labels, at least legend - use solid lines for actual data, dotted for projected - horizontal or vertical - vertical typically over time - horizontal: top information more relevant Pie charts - data must add to 100% - use less than 5 segments, no segment less than 5% 70
68 Elements of GUIs : Graphical Data Presentation (II) 263 Graphs emphasize data Show data not design variation Provide proper context for data interpretation (see example) Use of axis, scale, labels, legends, units in a proper way Fill entire area of graph with data Use the appropriate graph (scatter, line, pie chart, ) Do not overload graphs with multiple data, a maximum of 5 is recommended Use easy to distinguish line coding Data lines etc. should be the most visible, use thinner lines for axis and grid 71
69 Elements of GUIs : Graphical Data Presentation (III) 263 Example for proper context for data interpretation Turn over /B$ Before, after??? Turn over /B$
70 Elements of GUIs : Words and Text 565, 628 Choosing proper words - Use short & familiar words in simple language, - Use only complete words and positive terms - Use plain and simple proportional fonts with point size of Do not use jargon, abbreviations, Sentences and messages - Must be brief and simple, limited to about 20 words per sentence, - Must be understandable for all users (education, qualification, ) - Line length characters, use proper line spacing - Emphasize text by position, boxes, bold font, capital letters, Message Boxes - Title bar must clearly provide the source of the message - Text must be clear (s.a.) and limited to about 2 to 3 lines - Icon is often helpful 74
71 Elements of GUIs : Summary GUI design is most important to MMI Proper GUI saves (less user time, acceptance) money User should never lost, HELP is strongly recommended HELP (or information) via Status Bar, Tool Tip Text, Help file, Response time is mission critical If applicable refer to corresponding cultures System limitations have to be compensated by GUI Evaluation (see next chapter) is necessary 75
72 Group Work : Case Study V (Bachelor) Topics for presentation, GUI prototyping and final documentation - Check your GUI for consistency and recommendations of good screen design. - Update your GUI and prepare 2 slides: before after - Next lecture: Presentation of - 1 slide for introduction of case study - Case Studies IV (~3 slides) - Case Studies V (~2 slides) - Updated prototype of your GUI (~ 3 slides) 76
Overview. GUI History Screen Design : Navigation, Windows, Controls, Text, Evaluating GUI Performance. Example: Car Rental
Overview Introduction Fundamentals of GUIs Screen Design : Navigation, Windows, Controls, Text, Evaluating GUI Performance - Features - Use 1 GUI History 11-12 Example: Car Rental 1980 : Keyboard based
More informationSingle Menus No other menus will follow necessitating additional user choices
57 UNIT-III STRUCTURES OF MENUS Single Menus No other menus will follow necessitating additional user choices Sequential Linear Menus Simultaneous Menus 58 Hierarchical Menus When many relationships exist
More informationINDEX UNIT 4 PPT SLIDES
INDEX UNIT 4 PPT SLIDES S.NO. TOPIC 1. 2. Screen designing Screen planning and purpose arganizing screen elements 3. 4. screen navigation and flow Visually pleasing composition 5. 6. 7. 8. focus and emphasis
More informationCOMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes Menu Selection, Forms, and Dialog Boxes
07 - Menu Selection, Forms, and Dialog Boxes Menus Overview Offer cues, users can categorize actions easier (no syntax recall required) Especially effective when users have little training, use the UI
More informationUser Interface Design
Objective User Interface Design MIT, Walailak University by Dr.Wichian Chutimaskul Understand the principles of user interface (UI) design Understand the process of user interface design To design the
More informationChapter 6. Task-Related Organization. Single Menus. Menu Selection, Form Fill-in and Dialog Boxes. Binary Menus Radio Buttons Button Choice
Chapter 6 Menu Selection, Form Fill-in and Dialog Boxes Task-Related Organization "The primary goal for menu, form fill-in, and dialog-box designers is to create a sensible, comprehensible, memorable,
More informationMENU SELECTION, FORM FILL-IN, AND DIALOG BOXES
MENU SELECTION, FORM FILL-IN, AND DIALOG BOXES 1-1 6-1 Task-Related Organization "The primary goal for menu, form fill-in, and dialog-box designers is to create a sensible, comprehensible, memorable, and
More informationInterface Design Issues Lecture 8
IMS5302 Human factors and usability Interface Design Issues Lecture 8 Overview Quality, need to reduce Response time Interaction styles Direct manipulation Interaction devices Function versus look Field
More informationUser Interface Design. Interface Design 4. User Interface Design. User Interface Design. User Interface Design. User Interface Design
Specification of a conversation between the user and the computer. Generally results in either input, output or both. An important part of systems and software development. An intuitive and easy to use
More informationWhat is interaction? communication user system. communication between the user and the system
What is interaction? communication user system communication between the user and the system 2 terms of interaction The purpose of interactive system is to help user in accomplishing goals from some domain.
More informationInteraction Design. Task Analysis & Modelling
Interaction Design Task Analysis & Modelling This Lecture Conducting task analysis Constructing task models Understanding the shortcomings of task analysis Task Analysis for Interaction Design Find out
More informationHuman Computer Interface Design Chapter 7 User Interface Elements Design and Guidelines
Human Computer Interface Design Chapter 7 User Interface Elements Design and Guidelines Objective UI Guidelines provides information on the theory behind the UI Elements "look and feel" and the practice
More informationGetting to Know PowerPoint. Use IT+
Getting to Know PowerPoint Use IT+ Introduction PowerPoint 2013 is a presentation software that allows you to create dynamic slide presentations. Slideshows can include animation, description, images,
More informationDesign Guidelines: Windows. Computer users need to consult multiple sources rapidly. They require the adoption of multiplewindow display strategy.
Design Guidelines: Windows Computer users need to consult multiple sources rapidly. They require the adoption of multiplewindow display strategy. Design Challenge for Multiple- Window Strategy Offer users
More informationEXCEL 2003 DISCLAIMER:
EXCEL 2003 DISCLAIMER: This reference guide is meant for experienced Microsoft Excel users. It provides a list of quick tips and shortcuts for familiar features. This guide does NOT replace training or
More informationCOMP 388/441 HCI: 09 - Balancing Function and Fashion Balancing Function and Fashion
09 - Balancing Function and Fashion Lecture 09 - Overview This lecture deals with five design matters that are functional issues [...] but also leave room for varying styles to suite a variety of users.
More informationHeuristic Evaluation. Ananda Gunawardena. Carnegie Mellon University Computer Science Department Fall 2008
Heuristic Evaluation Ananda Gunawardena Carnegie Mellon University Computer Science Department Fall 2008 Background Heuristic evaluation is performed early in the development process to understand user
More informationTopics. GUI design multidisciplinary. Chapter 7 User Interface Design. (c) Addison Wesley Chapter 7 3
MACIASZEK, L.A. (2001): Requirements Analysis and System Design. Developing Information Systems with UML, Addison Wesley Chapter 7 User Interface Design Copyright 2000 by Addison Wesley Version 1.0 Topics
More informationthe Hick Hyman Law Pearson Addison-Wesley. All rights reserved. 6-1
the Hick Hyman Law describes the time it takes for a person to make a decision as a result of the possible choices he or she has; that is, increasing the number of choices will increase the decision time
More informationchapter 3 the interaction
chapter 3 the interaction ergonomics physical aspects of interfaces industrial interfaces Ergonomics Study of the physical characteristics of interaction Also known as human factors but this can also be
More informationUser Interface Evaluation
User Interface Evaluation Heuristic Evaluation Lecture #17 Agenda Evaluation through Expert Analysis Cognitive walkthrough Heuristic evaluation Model-based evaluation Cognitive dimension of notations 2
More informationChapter11 practice file folder. For more information, see Download the practice files in this book s Introduction.
Make databases user friendly 11 IN THIS CHAPTER, YOU WILL LEARN HOW TO Design navigation forms. Create custom categories. Control which features are available. A Microsoft Access 2013 database can be a
More informationExcel Core Certification
Microsoft Office Specialist 2010 Microsoft Excel Core Certification 2010 Lesson 6: Working with Charts Lesson Objectives This lesson introduces you to working with charts. You will look at how to create
More informationCraigslist Heuristic Evaluation
Heuristic Evaluation Introduction This document is a heuristic evaluation of part of the website. Due to the size of the website, this is a partial examination ed to showcase Al Strauss analytical capabilities.
More informationComputer Applications Final Exam Study Guide
Name: Computer Applications Final Exam Study Guide Microsoft Word 1. To use -and-, position the pointer on top of the selected text, and then drag the selected text to the new location. 2. The Clipboard
More informationPart 1: Basics. Page Sorter:
Part 1: Basics Page Sorter: The Page Sorter displays all the pages in an open file as thumbnails and automatically updates as you add content. The page sorter can do the following. Display Pages Create
More informationCreating a Basic Chart in Excel 2007
Creating a Basic Chart in Excel 2007 A chart is a pictorial representation of the data you enter in a worksheet. Often, a chart can be a more descriptive way of representing your data. As a result, those
More informationSystems Analysis and Design
Systems Analysis and Design Alan Dennis, Barbara Haley Wixom, and Roberta Roth John Wiley & Sons, Inc. Slides by Candace S. Garrod Red Rocks Community College 9-1 User Interfaces Chapter 9 9-2 Key Definitions
More informationChapter 15. User Interface Design. Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 1
Chapter 15 User Interface Design Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 1 Topics covered User interface design principles User interaction Information presentation User
More informationWordPress User Interface Expert Review Gabriel White Version 1.0 DRAFT March, 2005
WordPress User Interface Expert Review Gabriel White Version 1.0 DRAFT March, 2005 WordPress User Interface Expert Review, Gabriel White (v1.0 Draft, March, 2005) 2 Copyright Copyright Gabriel White, 2005.
More informationExcel 2013 for Beginners
Excel 2013 for Beginners Class Objective: This class will familiarize you with the basics of using Microsoft Excel. Class Outline: Introduction to Microsoft Excel 2013... 1 Microsoft Excel...2-3 Getting
More informationAn Introduction to Human Computer Interaction
The contents of this Supporting Material document have been prepared from the Eight units of study texts for the course M150: Date, Computing and Information, produced by The Open University, UK. Copyright
More informationTitle bar: The top most bar in Word window that usually displays the document and software names.
1 MICROSOFT WORD Table of Contents LINC ONE Hiding Standard toolbar, Formatting toolbar, and Status bar: To hide the Standard toolbar, click View Toolbars on the Menu bar. Check off Standard. To hide the
More informationChapter 10 Interactive Systems And Usability Organizational Requirements Engineering
Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering Prof. Dr. Armin B. Cremers Sascha Alda Overview Introduction: What is usability? Why is usability an important non-functional
More informationMary Ann Wallner MICROSOFT POWERPOINT ESSENTIALS
Mary Ann Wallner MICROSOFT POWERPOINT ESSENTIALS 1 LEARNING OBJECTIVES After studying this lesson, you will be able to: Apply a document theme to a new presentation Insert new slides Add text to a slide
More informationM150 -B / Unit 12. By Wawi. A good user interface design enables the user to effectively interact with the system and perform his tasks.
A good user interface design enables the user to effectively interact with the system and perform his tasks. (True) HCI: (Human-Computer Interaction) is the study of how humans interact with computers
More informationBasic Concepts 1. Starting Powerpoint 2000 (Windows) For the Basics workshop, select Template. For this workshop, select Artsy
1 Starting Powerpoint 2000 (Windows) When you create a new presentation, you re prompted to choose between: Autocontent wizard Prompts you through a series of questions about the context and content of
More informationModern Systems Analysis and Design Seventh Edition
Modern Systems Analysis and Design Seventh Edition Jeffrey A. Hoffer Joey F. George Joseph S. Valacich Designing Interfaces and Dialogues Learning Objectives ü Explain the process of designing interfaces
More informationCHAPTER 1 COPYRIGHTED MATERIAL. Getting to Know AutoCAD. Opening a new drawing. Getting familiar with the AutoCAD and AutoCAD LT Graphics windows
CHAPTER 1 Getting to Know AutoCAD Opening a new drawing Getting familiar with the AutoCAD and AutoCAD LT Graphics windows Modifying the display Displaying and arranging toolbars COPYRIGHTED MATERIAL 2
More informationExcel 2013 Charts and Graphs
Excel 2013 Charts and Graphs Copyright 2016 Faculty and Staff Training, West Chester University. A member of the Pennsylvania State System of Higher Education. No portion of this document may be reproduced
More informationCREATING A POWERPOINT PRESENTATION BASIC INSTRUCTIONS
CREATING A POWERPOINT PRESENTATION BASIC INSTRUCTIONS By Carolyn H. Brown This document is created with PowerPoint 2013/15 which includes a number of differences from earlier versions of PowerPoint. GETTING
More informationCSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation
CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 11: Inspection Tuesday / Thursday 12:00 to 1:20 James Fogarty Kailey Chan Dhruv Jain Nigini Oliveira Chris Seeds
More informationGuide for Creating Accessible Content in D2L. Office of Distance Education. J u n e 2 1, P a g e 0 27
Guide for Creating Accessible Content in D2L Learn how to create accessible web content within D2L from scratch. The guidelines listed in this guide will help ensure the content becomes WCAG 2.0 AA compliant.
More informationInterface Type and Screen Design. Interface Type Design Menu Fill-in Form Natural Language Command Language Window & Icon Screen Design
Interface Type and Screen Design Interface Type Design Menu Fill-in Form Natural Language Command Language Window & Icon Screen Design H. C. So Page 1 Semester B 2017-2018 Menu List of options from which
More informationText Topics. Human reading process Using Text in Interaction Design
Text SWEN-444 Text Topics Human reading process Using Text in Interaction Design Humans and Text the Reading Process Saccades quick, jerky eye movements forward 8-10 letters at a time plus CR/LF to the
More informationHOUR 12. Adding a Chart
HOUR 12 Adding a Chart The highlights of this hour are as follows: Reasons for using a chart The chart elements The chart types How to create charts with the Chart Wizard How to work with charts How to
More informationTo be able to create charts that graphically represent your worksheet data, you will: Create column charts on chart sheets by using the F11 key.
L E S S O N 1 Creating charts Suggested teaching time 55-65 minutes Lesson objectives To be able to create charts that graphically represent your worksheet data, you will: a b c Create column charts on
More informationAt the end of the chapter, you will learn to: Present data in textual form. Construct different types of table and graphs
DATA PRESENTATION At the end of the chapter, you will learn to: Present data in textual form Construct different types of table and graphs Identify the characteristics of a good table and graph Identify
More informationHuman-Computer Interaction IS4300
Human-Computer Interaction IS4300 1 Quiz 3 1 I5 due next class Your mission in this exercise is to implement a very simple Java painting applet. The applet must support the following functions: Draw curves,
More informationPowerPoint 2010 Introduction
PowerPoint 2010 Introduction TOOLBAR RIBBON What is the ribbon? The ribbon contains the commands and other menu items that were on menu and toolbars in PowerPoint 2003 and earlier. The ribbon is designed
More informationCreating a PowerPoint Presentation
powerpoint 1 Creating a PowerPoint Presentation Getting Started 1. Open PowerPoint from the "Start" "Programs" Microsoft Office directory. 2. When starting PowerPoint, it usually starts with a new blank
More informationMicrosoft Office. Microsoft Office
is an office suite of interrelated desktop applications, servers and services for the Microsoft Windows. It is a horizontal market software that is used in a wide range of industries. was introduced by
More informationUsability. Daniela Rosner. Web Architecture, October 9, School of Information UC Berkeley
Usability Daniela Rosner Web Architecture, 290-03 October 9, 2007 School of Information UC Berkeley Outline Introduction what is usability Best Practices common solutions Design Patterns shared languages
More informationCSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation
CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 12: Inspection-Based Methods James Fogarty Daniel Epstein Brad Jacobson King Xia Tuesday/Thursday 10:30 to 11:50
More informationThis guide will show you how to create a basic multi-media PowerPoint presentation containing text, graphics, charts, and audio/video elements.
This guide will show you how to create a basic multi-media PowerPoint presentation containing text, graphics, charts, and audio/video elements. Before starting the steps outlined in this guide, it is recommended
More informationWorking with Charts Stratum.Viewer 6
Working with Charts Stratum.Viewer 6 Getting Started Tasks Additional Information Access to Charts Introduction to Charts Overview of Chart Types Quick Start - Adding a Chart to a View Create a Chart with
More informationSTONELAW HIGH GRAPHIC
GRAPHIC COMMUNICATION Technical Education THE A to Z of DTP Your knowledge of desktop publishing terminology will be expanded as you progress within the subject THE A to Z of DTP ALIGNMENT positions of
More informationMICROSOFT WORD. Table of Contents. What is MSWord? Features LINC FIVE
Table of Contents What is MSWord? MSWord is a word-processing program that allows users to insert, edit, and enhance text in a variety of formats. Word is a powerful word processor with sophisticated editing
More informationHuman-Computer Interaction: An Overview. CS2190 Spring 2010
Human-Computer Interaction: An Overview CS2190 Spring 2010 There must be a problem because What is HCI? Human-Computer interface Where people meet or come together with machines or computer-based systems
More informationUnit 3. Design and the User Interface. Introduction to Multimedia Semester 1
Unit 3 Design and the User Interface 2018-19 Semester 1 Unit Outline In this unit, we will learn Design Guidelines: Appearance Balanced Layout Movement White Space Unified Piece Metaphor Consistency Template
More informationAnatomy of a Window (Windows 7, Office 2010)
Anatomy of a Window (Windows 7, Office 2010) Each window is made up of bars, ribbons, and buttons. They can be confusing because many of them are not marked clearly and rely only on a small symbol to indicate
More information1.1 Considering for Choosing Layout in SmartArt Graphics
1. SmartArt A SmartArt graphic is a visual representation of your information that you can quickly and easily create, choosing from among many different layouts, to effectively communicate your message
More informationHuman-Computer Interaction. Chapter 2. What is HCI?
Human-Computer Interaction Chapter 2 What is HCI? Overview 2.1 The Human 2.2 The Computer 2.3 The Interaction Models of Interaction Interaction Styles Elements of the WIMP Interface HCI 2.3.1 Models of
More informationThe Grid 2 is accessible to everybody, accepting input from eye gaze, switches, headpointer, touchscreen, mouse, and other options too.
The Grid 2-89224 Product Overview The Grid 2 is an all-in-one package for communication and access. The Grid 2 allows people with limited or unclear speech to use a computer as a voice output communication
More informationHCI and Design SPRING 2016
HCI and Design SPRING 2016 Topics for today Heuristic Evaluation 10 usability heuristics How to do heuristic evaluation Project planning and proposals Usability Testing Formal usability testing in a lab
More informationUser Interfaces Assignment 3: Heuristic Re-Design of Craigslist (English) Completed by Group 5 November 10, 2015 Phase 1: Analysis of Usability Issues Homepage Error 1: Overall the page is overwhelming
More informationCHAPTER 4: MICROSOFT OFFICE: EXCEL 2010
CHAPTER 4: MICROSOFT OFFICE: EXCEL 2010 Quick Summary A workbook an Excel document that stores data contains one or more pages called a worksheet. A worksheet or spreadsheet is stored in a workbook, and
More informationIntroduction to Microsoft Excel 2010
Introduction to Microsoft Excel 2010 THE BASICS PAGE 02! What is Microsoft Excel?! Important Microsoft Excel Terms! Opening Microsoft Excel 2010! The Title Bar! Page View, Zoom, and Sheets MENUS...PAGE
More informationSorting Fields Changing the Values Line Charts Scatter Graphs Charts Showing Frequency Pie Charts Bar Charts...
Database Guide Contents Introduction... 1 What is RM Easiteach Database?... 1 The Database Toolbar... 2 Reviewing the License Agreement... 3 Using Database... 3 Starting Database... 3 Key Features... 4
More informationInput: Interaction Techniques
Input: Interaction Techniques Administration Questions about homework? 2 Interaction techniques A method for carrying out a specific interactive task Example: enter a number in a range could use (simulated)
More informationPoster-making 101 for 1 PowerPoint slide
Poster-making 101 for 1 PowerPoint slide Essential information for preparing a poster for the poster printer 1. Poster size: You will be creating a single large slide in PowerPoint. 2. Before adding any
More informationDue on: May 12, Team Members: Arpan Bhattacharya. Collin Breslin. Thkeya Smith. INFO (Spring 2013): Human-Computer Interaction
Week 6 Assignment: Heuristic Evaluation of Due on: May 12 2013 Team Members: Arpan Bhattacharya Collin Breslin Thkeya Smith INFO 608-902 (Spring 2013): Human-Computer Interaction Group 1 HE Process Overview
More informationECDL Module 6 REFERENCE MANUAL
ECDL Module 6 REFERENCE MANUAL Presentation Microsoft PowerPoint XP Edition for ECDL Syllabus Four PAGE 2 - ECDL MODULE 6 (USING POWERPOINT XP) - MANUAL 6.1 GETTING STARTED... 4 6.1.1 FIRST STEPS WITH
More informationUsing Adobe Photoshop
Using Adobe Photoshop 2 In this section we ll look at some essential things you need to know in order to use Photoshop effectively. First of all, we ll take a look at customising Photoshop s settings and
More informationSection 1. System Technologies and Implications. Modules. Introduction to computers. File management. ICT in perspective. Extended software concepts
Section 1 System Technologies and Implications Modules 1.1 Introduction to computers 1.2 Software 1.3 Hardware 1.4 File management 1.5 ICT in perspective 1.6 Extended software concepts 1.7 Extended hardware
More informationMicrosoft Word 2007 on Windows
1 Microsoft Word 2007 on Windows Word is a very popular text formatting and editing program. It is the standard for writing papers and other documents. This tutorial and quick start guide will help you
More informationDeveloping successful posters using Microsoft PowerPoint
Developing successful posters using Microsoft PowerPoint PRESENTED BY ACADEMIC TECHNOLOGY SERVICES University of San Diego Goals of a successful poster A poster is a visual presentation of your research,
More informationApplication of Skills: Microsoft Excel 2013 Tutorial
Application of Skills: Microsoft Excel 2013 Tutorial Throughout this module, you will progress through a series of steps to create a spreadsheet for sales of a club or organization. You will continue to
More informationUnit 2: Using Windows 7 Lesson 9
Unit : Using Windows 7 Lesson 9 Lesson 9 Looking at the Windows Desktop Objectives In this lesson, you will be introduced to the Windows desktop and how to navigate around in Windows. On successful completion,
More informationExcel 2007 New Features Table of Contents
Table of Contents Excel 2007 New Interface... 1 Quick Access Toolbar... 1 Minimizing the Ribbon... 1 The Office Button... 2 Format as Table Filters and Sorting... 2 Table Tools... 4 Filtering Data... 4
More informationiscreen Usability INTRODUCTION
INTRODUCTION Context and motivation The College of IST recently installed an interactive kiosk called iscreen, designed to serve as an information resource for student/visitors to the College of IST. The
More informationPOWERPOINT 2003 OVERVIEW DISCLAIMER:
DISCLAIMER: POWERPOINT 2003 This reference guide is meant for experienced Microsoft Office users. It provides a list of quick tips and shortcuts for familiar features. This guide does NOT replace training
More informationUsing Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
More informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that
More informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that use
More informationInformation Technology and Media Services. Office Excel. Charts
Information Technology and Media Services Office 2010 Excel Charts August 2014 Information Technology and Media Services CONTENTS INTRODUCTION... 1 CHART TYPES... 3 CHOOSING A CHART... 4 CREATING A COLUMN
More informationGraphical Screen Design
1 Graphical Screen Design Grids are an essential tool for graphical design Important graphical design concepts include visual consistency visual relationships visual organization legibility and readability
More informationDevelop great research posters using Microsoft PowerPoint
www.qps.qut.edu.au Develop great research posters using Microsoft PowerPoint A step-by-step guide QUT PRINTING SERVICES A step-by-step guide This step-by-step guide will assist you to understand the purpose
More informationMSITA POWERPOINT 2010 REVIEW
True/False write the word TRUE or FALSE in the blank. TRUE 1. FALSE_ 2. An existing presentation may be opened in PowerPoint 2010 by double-clicking on the file from the storage device. The presentation
More informationChapter 2 The Design Window
Chapter 2 Objectives Chapter 2 The Design Window Learn about Crystal sections Move objects Use Toolbars, Icons, and Menus Format fields Add Special Fields Change a Group Use the Crystal Field Explorer
More informationMicrosoft. Excel. Microsoft Office Specialist 2010 Series EXAM COURSEWARE Achieve more. For Evaluation Only
Microsoft Excel 2010 Microsoft Office Specialist 2010 Series COURSEWARE 3243 1 EXAM 77 882 Achieve more Microsoft Office Specialist 2010 Microsoft Excel Core Certification 2010 Lesson 6: Working with
More informationFaculty Development Seminar Series Constructing Posters in PowerPoint 2003 Using a Template
2008-2009 Faculty Development Seminar Series Constructing Posters in PowerPoint 2003 Using a Template Office of Medical Education Research and Development Michigan State University College of Human Medicine
More informationWord - Basics. Course Description. Getting Started. Objectives. Editing a Document. Proofing a Document. Formatting Characters. Formatting Paragraphs
Course Description Word - Basics Word is a powerful word processing software package that will increase the productivity of any individual or corporation. It is ranked as one of the best word processors.
More informationChapter 10: Interface Components
Chapter 10: Interface Components The Resonant Interface HCI Foundations for Interaction Design First Edition by Steven Heim Chapter 10 Interface Components The WIMP Interface Windows Icons Menus Pointers
More informationBasic Concepts 1. For this workshop, select Template
Basic Concepts 1 When you create a new presentation, you re prompted to choose between: Autocontent wizard Prompts you through a series of questions about the context and content of your presentation not
More informationCreating Interactive PDF Forms
Creating Interactive PDF Forms Using Adobe Acrobat X Pro for the Mac University Information Technology Services Training, Outreach, Learning Technologies and Video Production Copyright 2012 KSU Department
More informationMicrosoft Word Important Notice
Microsoft Word 2013 Important Notice All candidates who follow an ICDL/ECDL course must have an official ICDL/ECDL Registration Number (which is proof of your Profile Number with ICDL/ECDL and will track
More informationMicrosoft Excel Tutorial
Microsoft Excel Tutorial 1. GETTING STARTED Microsoft Excel is one of the most popular spreadsheet applications that helps you manage data, create visually persuasive charts, and thought-provoking graphs.
More informationProgram and Graphical User Interface Design
CHAPTER 2 Program and Graphical User Interface Design OBJECTIVES You will have mastered the material in this chapter when you can: Open and close Visual Studio 2010 Create a Visual Basic 2010 Windows Application
More informationComputer Systems & Application
For updated version, please click on http://ocw.ump.edu.my Computer Systems & Application Computer System and Application Development Process By Mr. Nor Azhar Ahmad Faculty of Computer Systems & Software
More information