Ch. 12 Balancing Function and Fashion www.hansung.ac.kr.

Slides:



Advertisements
Similar presentations
Recuperação de Informação B Cap. 10: User Interfaces and Visualization 10.1,10.2,10.3 November 17, 1999.
Advertisements

Chapter 11 Designing the User Interface
Chapter 11 user support. Issues –different types of support at different times –implementation and presentation both important –all need careful design.
ORGANIZING THE CONTENT Physical Structure
Member FINRA/SIPCThursday, November 12, 2009 Resource Menu Changes - Report User Experience Study | Kevin Cornwall.
Display (Output) Design Cognitive functions Present task data Communicate task organization Grouping and ordering Draw attention Aid discrimination/searching.
Copyright © 2005, Pearson Education, Inc. Chapter 12 Balancing Function and Fashion.
User Interface Design Yonsei University 2 nd Semester, 2013 Sanghyun Park.
Information Retrieval: Human-Computer Interfaces and Information Access Process.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Presentation Styles Balancing Function And Fashion Ben Carson Rajesh Golla Sunil D’souza.
User Interface Design Notes p7 T120B pavasario sem.
Design Activities in Usability Engineering laura leventhal and julie barnes.
Interaction Styles Course 6, CMC, 07/10/03 Direct Manipulation
6/11/20151 Multiple Windows Strategies CIS 577 Bruce R. Maxim UM-Dearborn.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
1 / 31 CS 425/625 Software Engineering User Interface Design Based on Chapter 15 of the textbook [SE-6] Ian Sommerville, Software Engineering, 6 th Ed.,
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Information Retrieval: Human-Computer Interfaces and Information Access Process.
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
© De Montfort University, Design Process Howell Istance Department of Computer Science De Montfort University.
Copyright © 2005, Pearson Education, Inc. An Instructor’s Outline of Designing the User Interface 4th Edition by Ben Shneiderman & Catherine Plaisant Slides.
Principles and Methods
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
Balancing Function and Fashion
Chapter 2: The Visual Studio.NET Development Environment Visual Basic.NET Programming: From Problem Analysis to Program Design.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
Balancing Function and Fashion (Shneiderman and Plaisant, Ch. 11)
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
Systems Analysis and Design in a Changing World, 6th Edition
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem
10/8/2015© Jeff Offutt, Menu Design Guidelines Jeff Offutt SWE 432 Design and Implementation of Software for.
Copyright © 2005, Pearson Education, Inc. Chapter 9 Balancing Function and Fashion.
Principles of Good Screen Design
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Balancing Function and Fashion (Shneiderman and Plaisant, Ch. 11)
CHAPTER TEN AUTHORING.
1 Balancing Form and Function  Form and Function  High Usability  Aesthetically Pleasing  Error Messages  Non-anthropomorphic Design  Design Display.
Ch 9 Colors Yonglei Tao School of Computing & Info Systems GVSU.
User Support Chapter 8. Overview Assumption/IDEALLY: If a system is properly design, it should be completely of ease to use, thus user will require little.
Software Architecture
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
INTRODUCTION TO USER DOCUMENTATION Function and purpose Production specifications Evaluate the effectiveness.
Chapter 13 Andrew Bates Jay Babb Steve Haroz. Introduction We want as much information on the screen as possible without too much eye- head movement Window.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Introduction to Interactive Media Interactive Media Tools: Authoring Applications.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Topic 4 - Database Design Unit 1 – Database Analysis and Design Advanced Higher Information Systems St Kentigern’s Academy.
Ch16: User Interface Design Users often judge a system by its interface rather than its functionality Poorly designed interfaces can cause users to make.
Using Document Collaboration, Integration, and Charting Tools
1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman
© 2016 Cognizant. © 2016 Cognizant Introduction PREREQUISITES SCOPE Heuristic evaluation is a discount usability engineering method for quick, cheap,
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
CHAPTER 12: Advancing the User Experience
Human Computer Interaction Lecture 21 User Support
Chapter 6 : User interface design
Error Messages and Other Feedback
Human Computer Interaction Lecture 21,22 User Support
Chapter 2 Hix & Hartson Guidelines.
Kuliah 11: Balancing Function and Fashion
CHAPTER 11: Balancing Function and Fashion
Chapter 11 user support.
Lecture 22: HCI Design March 15, /6/2019
Presentation transcript:

Ch. 12 Balancing Function and Fashion

2 Introduction  User experiences play a critical role in influencing software acceptance  Conversational messages have their limits  Design needs to be comprehensible, predictable, and controllable  Information layout is important  Multiwindow coordination  Large, fast, high-resolution color displays have potential

3 Error messages  Phrasing of error messages or diagnostic warnings is critical, especially when dealing with novices  Avoid  imperious tone that condemns user  messages that are too generic WHAT? SYNTAX ERROR  messages that are too obscure FAC RJCT )

4 Error messages  Specificity PoorBetter SYNTAX ERRORUnmatched left parenthesis ILLEGAL ENTRY Type first letter: Send, Read, or Drop INVALID DATA Days range from 1 to 31 BAD FILE NAME File names must begin with a letter

5 Error messages  Constructive guidance and positive tone  Messages should, where possible, indicate what users should do to correct the problem  Unnecessarily hostile messages using violent terminology can disturb non-technical users: FATAL ERROR, RUN ABORTED CATASTROPHIC ERROR: LOGGED WITH OPERATOR Negative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used infrequently

6 Error messages PoorBetter Run-Time error ‘ (800405): Method ‘Private Profile String’ of object ‘System’ failed. Virtual memory space consumed. Close some programs and retry. Resource Conflict Bus: 00 Device: 03 Function: 01 Remove your compact flash card and restart Network connection refused. Your password was not recognized. Please retype. Bad date. Drop-off date must come after pickup date.

7 Error messages  User-centered phrasing  user controls the interface  initializing more than responding  control over amount of information system screen tips a help button for context-sensitive help an extensive online user manual’

8 Error messages  Good example We’re sorry, but we are unable to complete your call as dialed Please hang up, check your number, or consult the operator for assistance  Bad example Illegal telephone number Call aborted Error number 583-2R6.9 Consult your user manual for further information

9 Error messages  Appropriate physical format  use uppercase only messages for brief, serious warnings  avoid code numbers if required, include at end of message  debate over best location of messages near where problem arose placed in consistent position near to, but not obscuring relevant information  audio signals useful, but can be embarrassing place under user control

10 Error messages  Development of effective messages  Messages should be evaluated by several people and tested with suitable participants  Messages should appear in user manuals and be given high visibility  Users may remember the one time when they had difficulties with a computer system rather than the 20 times when everything went well

11 Error messages  Recommendations Increase attention to message design Establish quality control Develop guidelines –Have a positive tone –Be specific and address the problem in the user's terms –Place the users in control of the situation –Have a neat, consistent, and comprehensible format Carry out usability test Collect user performance data

12 Nonanthropomorphic Design  Concerns  attributions of intelligence, autonomy, free will, etc can deceive, confuse, and mislead users  important to clarify differences between people and computers  users and designers must accept responsibility for misuse of computers  produce anxiety computers can make people feel dumb computers should be transparent and support concentrating on the task in hand

13 Nonanthropomorphic Design  mature technology should avoid Mumford's obstacle of animism  anthropomorphic interfaces may distract users Microsoft’s ill-fated Clippet character was intended to provide help suggestions –Amused some, but annoyed many –Disruptive interference –Lacked appropriate emotional expressions

14 Nonanthropomorphic Design

15 Nonanthropomorphic Design  Advocates of anthropomorphic interfaces suggest that they may be most useful as teachers, salespeople, therapists, or entertainment figures  An alternative design is to present a human author of a package through prerecorded audio or video

16 Nonanthropomorphic Design  Guidelines  Be cautious in presenting computers as people.  Design comprehensible, predictable, and controllable interfaces.  Use appropriate humans for introductions/guides.  Use cartoon characters in games or children’s software, but usually not elsewhere  Provide user-centered overviews for orientation.  Do not use 'I' pronouns when the computer responds to human actions.  Use "you" to guide users, or just state facts.

17 Display design  Effective display designs must provide all the necessary data in the proper sequence to carry out the task  Mullet and Sano's categories of design principles:  Elegance and Simplicity: unity, refinement and fitness  Scale, Contrast, and Proportion: clarity, harmony, activity, and restraint

18 Display design  Organization and Visual Structure: grouping, hierarchy, relationship, and balance  Module and Program: focus, flexibility, and consistent application  Image and Representation: immediacy, generality, cohesiveness, and characterization  Style: distinctiveness, integrity, comprehensiveness, and appropriateness

19

20 Display design  Field layout  Blank spaces and separate lines can distinguish fields.  Names in chronological order, alignment of dates, familiar date separators.  Labels are helpful for all but frequent users.  Distinguish labels from data with case, boldfacing, etc.  If boxes are available they can be used to make a more appealing display, but they consume screen space.

21 Display design  Specify the date format for international audiences  Other coding categories – background shading, color, and graphic icons  Empirical results  structured form superior to narrative form  improving data labels, clustering related information, using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performance

22 Display design  performance times improve with fewer, denser displays for expert users  screen contents should contain only task-relevant information  consistent location, structure, and terminology across displays important  sequences of displays should be similar throughout the system for similar tasks

23 Display design  Display-complexity metrics  Although knowledge of the users’ tasks and abilities is key to designing effective screen displays, objective and automatable metrics of screen complexity are attractive aids  four task-independent metrics for alphanumeric displays  Overall Density  Local Density  Grouping  Layout Complexity

24 Display design

25 Display design

26 Display design  task-dependent metric called layout appropriateness to assess whether the spatial layout is in harmony with the users ’ tasks

27 Display design

28 Window design  Introduction  Users need to consult multiple sources rapidly  Must minimally disrupt user's task  With large displays, eye-head movement and visibility are problems  With small displays, windows too small to be effective

29 Window design  Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement opening, closing, moving, changing size time spent manipulating windows instead of on task  Can apply direct-manipulation strategy to windows  Rooms - a form of window macro that enables users to specify actions on several windows at once

30 Window design  Coordinating multiple windows  Designers may break through to the next generation of window managers by developing coordinate windows, in which windows appear, change contents, and close as a direct result of user actions in the task domain  Such sequences of actions can be established by designers, or by users with end-user programming tools

31 Window design  A careful study of user tasks can lead to task- specific coordinations based on sequences of actions  Important coordinations: Synchronized scrolling Hierarchical browsing Opening/closing of dependent windows Saving/opening of window state

32 Window design  Image browsing  A two-dimensional cousin of hierarchical browsing Work with large images Overview in one window (context), detail in another (focus) Field of view box in the overview Panning in the detail view, changes the field of view box Matched aspect ratios between field of view box and the detail view

33 Zoom factors: 5-30 –Larger suggests an intermediate view is needed Semantic zooming Side by side placement, versus fisheye view

34 Window design  Image browsing  The design of image browsers should be governed by the users’ tasks, which can be classified as follows: Image generation Open-ended exploration Diagnostics Navigation Monitoring

35 Window design  Personal role management  A role centered design emphasizes he users’ taks rather than the applications and documents Vision statement Set of people Task hierarchy Schedule Set of documents

36 Window design  Personal role management  The requirements for personal role management include: Support a unified framework for information organization according to users' roles Provide a visual, spatial layout that matches tasks Support multi-window actions for fast arrangement of information Support information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information. Allow fast switching and resumption among roles Free user's cognitive resources to work on task domain actions rather than interface domain actions. Use screen space efficiently and productively for tasks.

37 Color  Color can  Soothe or strike the eye  Add accents to an uninteresting display  Facilitate subtle discriminations in complex displays  Emphasize the logical organization of information  Draw attention to warnings  Evoke string emotional reactions of joy, excitement, fear, or anger

38 Color  Guidelines  Use color conservatively  Limit the number and amount of colors  Recognize the power of color to speed or slow tasks  Color coding should support the task  Color coding should appear with minimal user effort  Color coding should be under user control  Design for monochrome first

39 Color  Consider the needs of color-deficient users  Color can help in formatting  Be consistent in color coding  Be alert to common expectations about color codes  Be alert to problems with color pairings  Use color changes to indicate status changes  Use color in graphic displays for greater information density 39