Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Design principles Stimulus intensity Proportion Screen complexity Resolution/closure.

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

Exams and Revision Some hints and tips.
Cornell Notes.
Interaksi Manusia Komputer – Marcello Singadji. design rules Designing for maximum usability – the goal of interaction design Principles of usability.
Choose the Proper Screen-Based Controls
Introduction to Microsoft Excel 2010 Chapter Extension 3.
Chapter 4 Design Approaches and Methods
Chapter 6 Design Principles Principles of Interaction Design Comprehensibility Learnability Effectiveness/Usefulness Efficiency/Usability Grouping Stimulus.
Microsoft Access A Hands-On Introduction Chapter 4.
Copyright © 2013 Pearson Education, Inc. Publishing as Prentice Hall. Microsoft Office 2010 PowerPoint, Workshop 1 Communication with Presentations.
User Interface Design 2 Constructing an Interface for an ATM.
Usability 2004 J T Burns1 Usability & Usability Engineering.
Principles and Methods
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
Chapter 8 Lists. Copyright © 2005 Pearson Addison-Wesley. All rights reserved. 8-2 Chapter Objectives Examine list processing and various ordering techniques.
Chapter 7 design rules.
Copyright 2006 Prentice-Hall, Inc. Essentials of Systems Analysis and Design Third Edition Joseph S. Valacich Joey F. George Jeffrey A. Hoffer Chapter.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
Bill Querry EDU 742 Help Students take organized Notes
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
User Interface Evaluation CIS 376 Bruce R. Maxim UM-Dearborn.
Copyright 1999 all rights reserved Human Visual Understanding System n Anything that is seen by our eyes has to be processed n The processing difficulty.
1. Learning Outcomes At the end of this lecture, you should be able to: –Define the term “Usability Engineering” –Describe the various steps involved.
Copyright © 2010 Pearson Education, Inc. Publishing as Prentice Hall.1 Exploring Microsoft Office Excel Copyright © 2008 Prentice-Hall. All rights.
Chapter 5 Models and theories 1. Cognitive modeling If we can build a model of how a user works, then we can predict how s/he will interact with the interface.
Chapter 6.7 Determinants. In this chapter all matrices are square; for example: 1x1 (what is a 1x1 matrix, in fact?), 2x2, 3x3 Our goal is to introduce.
Principles of User Centred Design Howell Istance.
Copyright © 2008 Pearson Prentice Hall. All rights reserved. 1 1 Copyright © 2008 Prentice-Hall. All rights reserved. Committed to Shaping the Next Generation.
11 Exploring Microsoft Office Excel 2007 Chapter 4: Working with Large Worksheets and Tables Chapter 04 - Lecture Notes (CSIT 104)
Gary MarsdenSlide 1University of Cape Town Computer Architecture – Introduction Andrew Hutchinson & Gary Marsden (me) ( ) 2005.
10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.
Design for Interaction Rui Filipe Antunes
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Principles of Good Screen Design
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application.
Lecture 5(b), Slide 1 CP2030 Copyright © University of Wolverhampton CP2030 Visual Basic for C++ Programmers v Component 5(b) HCI aspects of VB programming.
June 5, 2007Mohamad Eid Design Principles Chapter 7.
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.
INTRO TO USABILITY Lecture 12. What is Usability?  Usability addresses the relationship between tools and their users. In order for a tool to be effective,
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Prof Jim Warren with reference to sections 7.4 and 7.6 of The Resonant Interface.
COMPSCI 345 / SOFTENG 350 Review for mid-semester test AProf Beryl Plimmer.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 15 Advanced Tables.
Coming up: Interaction Diagrams Sequence Diagrams Dan Fleck.
Chapter 1: What is interaction design?. Bad designs From:
Usability Engineering Dr. Dania Bilal IS 582 Spring 2006.
Grade Book Database Presentation Jeanne Winstead CINS 137.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Lecturer: Prof Jim Warren Based on Chapter 6 The Resonant Interface HCI Foundations.
Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with Programming Logic & Design Second Edition by Tony Gaddis.
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 – Graphical User Interfaces Java Foundations: Introduction to Programming.
Cognitive Walkthrough More evaluating with experts.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
Dr. Gitte Lindgaard HOTLab (Human Oriented Technology Lab) Carleton University.
TYPE OF READINGS.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
Overview In this tutorial you will: learn what an e-portfolio is learn about the different things e-portfolios may be used for identify some options for.
Interaction Frameworks COMPSCI 345 S1 C and SoftEng 350 S1 C Lecture 3 Chapter (Heim)
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
Design rules.
Principles of Good Screen Design
User-centred system design process
Building a User Interface with Forms
HCI – DESIGN RATIONALE 20 November 2018.
Step-3: Principles of Good Interface and Screen Design
Chapter 7 design rules.
Chapter 7 design rules.
Chapter 7 design rules.
Chapter 7 design rules.
Presentation transcript:

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Design principles Stimulus intensity Proportion Screen complexity Resolution/closure Usability goals Heim, Chapters Lecture 14 Design Principles #2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Learning Objectives To be able to apply design principles in the context of user interface design tasks To understand the role of intensity in perception of content To be able to assess the relative complexity of screen designs 1-2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-3 Other Principles of Perception - Stimulus Intensity We respond first to the intensity of a stimulus and only then do we begin to process its meaning.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Stimulus versus cognition In general, the ‘hard wired’ responses to stimulus will be processed quicker than those that require processing of coded information 1-4

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-5 Other Principles of Perception – Proportion Proportion can be used to represent logical hierarchies Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-6 Other Principles of Perception – Proportion Golden Ratio - The golden ratio expresses the relationship between two aspects of a form such as height to width, about –Actually (1+sqrt(5)) / 2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-7 Other Principles of Perception – Proportion Golden Ratio –Occurs in nature, common in architecture –Widely believed to be inherently pleasing

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-8 Other Principles of Perception – Proportion Fibonacci - A sequence of numbers in which each number is the sum of the two preceding numbers. –The relationship between the numbers in the Fibonacci series is similar to the golden ratio 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, …

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Golden ratios & Fibonacci 1-9 journalofcosmology.com

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-10 Other Principles of Perception - Screen Complexity The measure of complexity developed by Tullis (1984) can be used to calculate the relative complexity, and therefore the difficulty, of a design. –This measure of complexity uses information theory (Shannon & Weaver, 1949)

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-11 Other Principles of Perception - Screen Complexity Formula for calculating the measure of complexity C, complexity of the system in bits N, total number of events (widths or heights) m, number of event classes (number of unique widths or heights) p n, probability of occurrence of the n th event class (based on the frequency of events within that class)

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Half time entertainment Bit to close to Novapay for comfort? 4khttps:// 4k 1-12

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-13 Other Principles of Perception - Screen Complexity More practical (approximate) way to calculate the measure of complexity for a particular screen, do the following: 1.Count the number of elements 2.Count the number of columns (horizontal alignment points) 3.Count the number of rows (vertical alignment points) 4.Sum up these three counts for a complexity score

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-14 Other Principles of Perception - Screen Complexity Labelling from the text is a bit confused, but conveys the general idea

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-15 Other Principles of Perception - Screen Complexity Redesigned screen –Original had 22 elements + 6 horizontal alignment points (columns) + 20 vertical alignment points (row) = 48 complexity –New design has 18, 7 and 8 respectively = 33 complexity (31% reduction)

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley About screen complexity More important as a heuristic than as a precise quantity –Higher complexity places more ‘load’ on the eye, and hence the brain –Gives a good indication of the relative complexity of alternative designs 1-16

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-17 Other Principles of Perception - Screen Complexity Complexity vs. Usability –Comber and Maltby (1997) found that both overly simple and overly complex screens were low in usability –This could, for instance, be due to lack of opportunity to form logical groupings in very low complexity designs (lecture on grouping later in the semester)

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-18 Other Principles of Perception - Screen Complexity Comber and Maltby found tradeoffs between usability and complexity: –As complexity decreased, predictability increased. –As complexity decreased, it became harder to differentiate among screen objects; the screen became artificially regular. –Decreased complexity meant that there were fewer ways to group objects. –Excessive complexity made screens look artificially irregular. –Increased complexity could occur from increased utility.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Complexity and usability In general, use layout as a code –If you have something to say, then do things that add complexity such as indenting a group, putting a box around it, or having some groups shorter than others –If there’s no ‘message’ intended, keep it simple with uniform margin and working across as well as down where screen width permits However –If you find yourself with large undifferentiated areas (e.g. a huge grid of captions and entry fields), the user will glaze over –Find some logical groupings to add meaning (anybody try to census form recently? – very thoughtful!) 1-19

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Complexity and usability (contd.) KISS (keep it simple, stupid) –Obviously, if you need less screen components, then the screen will be simpler And faster both for user comprehension as well as actual user work if you can eliminate an input field! Notice an interaction with ‘progressive disclosure’ here –Can show a simpler screen and only confront user with more complexity if they ask for it 1-20

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-21 Other Principles of Perception - Resolution/Closure Resolution/Closure - Relates to the perceived completion of a user’s tasks. –When the user’s objective is satisfied, he or she will consider the task complete and move on to the next goal It’s good to create closure in the dialog structure –Frees the user’s attention –Satisfying to give feedback

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Caution on closure Be sure the task is really completed before your user moves on –A problem with ATM machines is that the user may walk away when they’ve gotten their cash, and leave their card in the machine! They went for cash: cash = closure –Textbook suggests to swipe (or insert and withdraw) card so it gets put away in advance of closing step Actually a lot of machines (e.g. PackNSave self-serve fuel pump) do this, although my WestPac ATM instead just beeps at the end of the transaction (no matter how quickly I retrieve my card – Arg!) And lots of people forget their receipt at the PackNSave pump (prints after they got their fuel! [probably didn’t want it anyway]) 1-22

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Putting usability goals into effect User-centred design (UCD) puts the focus on the user’s tasks and goals Generally-accepted goals for an interface are that it be: –Understandable –Learnable –Effective / useful –Efficient / usable Hard to argue with that! But how do we run a project such that usability goals are achieved? 1-23

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-24 Usability Goals – Principles - Guidelines One approach is to articulate key project-specific pathways from goals, to principles to guidelines for the development team – for example… Usability Goal—Easy to use –One of the most important goals of user-centered design is to make things easy to use. Let’s say we’re confident that this is very important to our users. Design Principle—Simplicity –Simple things require little effort and can often be accomplished without much thought. If interaction designs are guided by the principle of simplicity, they will be easier to use.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-25 Usability Goals – Principles – Guidelines (contd.) Project Guideline— All dialogue boxes should present only the basic functions that are most often used and that other, less used functions can be accessed using an expandable dialogue with a link for “More Options.” This is something that could be communicated to even a large team and used as a design guideline and checked in heuristic evaluations and walkthroughs

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-26 Summary Intensity is perceived before semantics Consider classically pleasing proportions Aim for simple interfaces, but not simplistic –Complexity can be measured and contrasted across alternative designs Understand and plan for where your interface creates closure Projects (esp. when large) should choose focus usability goals and related principles to formulate guidelines