14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

Week 2 The Object-Oriented Approach to Requirements
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Systems Analysis and Design in a Changing World, Fourth Edition
User Interface Structure Design
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
© 2010 Bennett, McRobb and Farmer1 Use Case Description Supplementary material to support Bennett, McRobb and Farmer: Object Oriented Systems Analysis.
User Interface Design Notes p7 T120B pavasario sem.
Systems Analysis and Design in a Changing World, Fourth Edition
Human Computer Interface. HCI and Designing the User Interface The user interface is a critical part of an information system -- it is what the users.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Principles and Methods
2 Object-Oriented Analysis and Design with the Unified Process Objectives  Understand the differences between user interfaces and system interfaces 
© 2005 by Prentice Hall Chapter 3c Designing Interfaces and Dialogues.
Chapter 13: Designing the User Interface
Where Do I Start REFERENCE: LEARNING WEB DESIGN (4 TH EDITION) BY ROBBINS 2012 – CHAPTER 1 (PP. 3 – 14)
Chapter 14 Designing the User Interface
Object-Oriented Analysis and Design LECTURE 8: USER INTERFACE DESIGN.
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Chapter 7: The Object-Oriented Approach to Requirements
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
Chapter 6: The Traditional Approach to Requirements
System Analysis Overview Document functional requirements by creating models Two concepts help identify functional requirements in the traditional approach.
Systems Analysis and Design in a Changing World, 6th Edition
Designing the User Interface. 2 Overview User interfaces handle input and output that involve a system user directly Focus on interaction between user.
Systems Analysis and Design in a Changing World, 6th Edition
CHAPTER 11 DESIGNING THE USER INTERFACE LAYER
Systems Analysis and Design in a Changing World, 6th Edition
User Interface Theory & Design
Systems Analysis and Design in a Changing World, 6th Edition
Overview of system design
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Systems Analysis and Design in a Changing World, 6th Edition
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
2 Object-Oriented Analysis and Design with the Unified Process Identifying and Classifying Inputs and Outputs  Inputs and outputs are defined early in.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
Web Technologies Website Development Trade & Industrial Education
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
12 Systems Analysis and Design in a Changing World, Fifth Edition.
1 LECTURE 11: User Interface and System Security and Controls ITEC 3010 “Systems Analysis and Design, I” [Prof. Peter Khaiter]
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.
User Interface Structure Design Chapter 11. Key Definitions The user interface defines how the system will interact with external entities The system.
Slide 1 Chapter 11 User Interface Structure Design Chapter 11 Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman.
INFORMATION X INFO425: Systems Design Chapter 14 Designing the user interface.
Systems Analysis and Design in a Changing World, 3rd Edition
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
User Interface Theory & Design Lecture 6a 1.  User interface is everything the end user comes into contact with while using the system  To the user,
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Systems Analysis and Design in a Changing World, Fourth Edition
Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.
Importance of user interface design – Useful, useable, used Three golden rules – Place the user in control – Reduce the user’s memory load – Make the.
Systems Analysis and Design in a Changing World, 6th Edition 1 Chapter 7 - Designing the User and System Interfaces.
Design Phase intro & User Interface Design (Ch 8)
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
1 CS 501 Spring 2003 CS 501: Software Engineering Lecture 13 Usability 1.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
7 Systems Analysis – ITEC 3155 The Object Oriented Approach – Use Cases.
13 Systems Analysis and Design in a Changing World, Fourth Edition.
13 Systems Analysis and Design in a Changing World, Fourth Edition.
UI Requirements and Design Material in part from Marty Stepp and Valentine Razmov, past 403 classes. CSE 403, Spring 2008.
And On To Design: Output Design Input Design Data Design Processing Selection Implementation.
Objectives Understand the differences between user interfaces and system interfaces Explain why the user interface is the system to the users Discuss the.
And On To Design: Why in this particular sequence?
Guidelines for designing Windows and Forms
Systems Analysis and Design
Systems Analysis and Design in a Changing World, 6th Edition
Systems Design Project Deliverable 3
Presentation transcript:

14 Chapter 11: Designing the User Interface

14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and Outputs u Identified by analyst when defining system scope u Requirements model produced during analysis l Event table includes trigger to each external event l Triggers represent inputs l Outputs are shown as responses to events

14 Systems Analysis and Design in a Changing World, 3rd Edition 3 Traditional and OO Approaches to Inputs and Outputs u Traditional approach to inputs and outputs l Shown as data flows on context diagram, data flow diagram (DFD) fragments, and detailed DFDs u OO approach to inputs and outputs l Defined by message entering or leaving system l Included in event table as triggers and responses l Actors provide inputs for many use cases l Use cases provide outputs to actors

14 Systems Analysis and Design in a Changing World, 3rd Edition 4 User versus System Interface u System interfaces: I/O requiring minimal human interaction u User interfaces: l I/O requiring human interaction l User interface is everything end user comes into contact with while using the system l To the user, the interface is the system u Analyst designs system interfaces separate from user interfaces u Requires different expertise and technology

14 Systems Analysis and Design in a Changing World, 3rd Edition 5 Understanding the User Interface u Physical Aspects of the User Interface l Devices touched by user- keyboard, mouse, touch screen, Physical parts- manuals, documentation, and forms u Perceptual Aspects of the User Interface l Everything else user sees, hears, or touches such as screen objects, menus, and buttons u Conceptual Aspects of the User Interface l What user knows about system and logical function of system

14 Systems Analysis and Design in a Changing World, 3rd Edition 6 Aspects of the User Interface

14 Systems Analysis and Design in a Changing World, 3rd Edition 7 User-Centered Design u User-centered design techniques emphasize THREE important principles: 1. Focus early on the users and their work 2. Evaluate designs to ensure usability 3. Use iterative development u Focus early on the users and their work u In O-O, focuses users by identifying actors, use cases, scenarios….

14 Systems Analysis and Design in a Changing World, 3rd Edition 8 User-Centered Design u Evaluate designs to ensure usability l Usability - system is easy to learn and use l Ease of Learning u Example: Menu-based application with many forms, many dialog boxes, extensive prompts & instructions u Self-explanatory u Suitable for system that used infrequently.

14 Systems Analysis and Design in a Changing World, 3rd Edition 9 User-Centered Design l Ease of Use u Example: Shortcuts u Difficult to learn, once you know, easy to use u Fast and flexible u Suitable for system that used frequently. u Iterative development keeps focus on user l Continual return to user requirements and evaluate system after each iteration

14 Systems Analysis and Design in a Changing World, 3rd Edition 10 Metaphors for Human-Computer Interaction u Direct manipulation metaphor l User interacts with objects on display screen u Document metaphor l Computer is involved with browsing and entering data on electronic documents l WWW, hypertext, and hypermedia u Dialog metaphor (refer to page 452) l Much like carrying on a conversation

14 Systems Analysis and Design in a Changing World, 3rd Edition 11 Dialog Metaphor Expresses the Messaging Concept

14 Systems Analysis and Design in a Changing World, 3rd Edition 12 Guidelines for Designing User Interfaces u Visibility l All controls should be visible l Provide immediate feedback to indicate control is responding l Example: Button make sound / change look when it is clicked. u Affordance l Appearance of control should suggest its functionality – purpose for which it is used l Example: Steering button used to turn.

14 Systems Analysis and Design in a Changing World, 3rd Edition 13 Eight Golden Rules for Interactive Interface Design

14 Systems Analysis and Design in a Changing World, 3rd Edition 14 Documenting Dialog Designs u Done simultaneously with other system activities u Based on inputs and outputs requiring user interaction u Used to define menu hierarchy l Allows user to navigate to each dialog l Provides overall system structure u Storyboards, prototypes, and UML diagrams

14 Systems Analysis and Design in a Changing World, 3rd Edition 15 Overall Menu Hierarchy Design

14 Systems Analysis and Design in a Changing World, 3rd Edition 16 Dialogs and Storyboards u Many methods exist for documenting dialogs l Written descriptions following flow of events l Narratives l Sketches of screens l Storyboarding – showing sequence of sketches of display screen during a dialog

14 Systems Analysis and Design in a Changing World, 3rd Edition 17 Storyboard for Downtown Videos

14 Systems Analysis and Design in a Changing World, 3rd Edition 18 Dialog Documentation with UML Diagrams u OO approach provides UML diagrams u Use case descriptions l List of steps followed as system and user interact u Activity diagrams l Document dialog between user and computer for a use case u System sequence diagrams (SSD) l Actor (a user) sends messages to system l System returns information in form of messages

14 Systems Analysis and Design in a Changing World, 3rd Edition 19 Sequence Diagram for the RMO Look Up Item Availability dialog

14 Systems Analysis and Design in a Changing World, 3rd Edition 20 Class Diagram Showing Interface Classes Making up ProductQueryForm

14 Systems Analysis and Design in a Changing World, 3rd Edition 21 Sequence Diagram Showing Specific Interface Objects

14 Systems Analysis and Design in a Changing World, 3rd Edition 22 Guidelines for Designing Windows and Browser Forms u Each dialog might require several window forms u Standard forms are widely available l Windows: Visual Basic, C++, Java l Browser: HTML, VB-Script, JavaScript, ASP or Java servlets u Implementation l Identify objectives of form and associated data fields l Construct form with prototyping tools

14 Systems Analysis and Design in a Changing World, 3rd Edition 23 Forms Design Issues u Form layout and formatting consistency l Headings, labels, logos l Font sizes, highlighting, colors l Order of data-entry fields and buttons u Data keying and data entry (use standard control) l Text boxes, list boxes, combo boxes, etc. u Navigation and support controls u Help support: tutorials, indexed, context-sensitive

14 Systems Analysis and Design in a Changing World, 3rd Edition 24 Guidelines for Designing Web Sites u Draw from guidelines and rules for designing Windows forms and browser forms u Website uses: l Corporate communication l Customer information and service l Sales, distribution, and marketing u Must work seamlessly with customers 24/7

14 Systems Analysis and Design in a Changing World, 3rd Edition 25 Guidelines for Designing Web Sites u Ten Good Deeds in Web Design 1. Placement of organization’s name and logo. 2. Search function. 3. Headlines and page titles. 4. Facilitate reader scanning. 5. Hypertext to structure the content space. 6. Product photos. 7. Use relevance-enhanced image reduction. 8. Use link titles- to provide a preview of where each link goes, 9. Accessible for users with disabilities- visually impaired users. 10. Do the same as everybody else.

14 Systems Analysis and Design in a Changing World, 3rd Edition 26 Dialog Design for RMO Phone-Order u Steps in dialog models 1. Record customer information 2. Create new order 3. Record transaction details 4. Produce order confirmation u Traditional approach – produce structure chart u OO approach – expand SSD to include forms

14 Systems Analysis and Design in a Changing World, 3rd Edition 27 Required Forms for RMO u Main menu u Customer u Item search u Product detail u Order summary u Shipping and payment options u Order confirmation

14 Systems Analysis and Design in a Changing World, 3rd Edition 28 Design Concept for Sequential Approach to Create New Order Dialog

14 Systems Analysis and Design in a Changing World, 3rd Edition 29 Design Concept for Order-Centered Approach to Create New Order Dialog

14 Systems Analysis and Design in a Changing World, 3rd Edition 30 Prototype Forms for an Order-Centered Approach to the Dialog

14 Systems Analysis and Design in a Changing World, 3rd Edition 31 Prototype Forms for an Order-Centered Approach to the Dialog ( continued )

14 Systems Analysis and Design in a Changing World, 3rd Edition 32 Dialog Design for RMO Web Site u Basic dialog between user and customer similar to phone-order representative u Web site will provide more information for user, be more flexible, and be easier to use u More product pictures are needed u Information needs are different for customer than for phone-order employees u Guidelines for visibility and affordance are used to convey positive company image

14 Systems Analysis and Design in a Changing World, 3rd Edition 33 RMO’s Home Page

14 Systems Analysis and Design in a Changing World, 3rd Edition 34 Product Detail Page from RMO Web Site

14 Systems Analysis and Design in a Changing World, 3rd Edition 35 Shopping Cart Page from RMO Web Site

14 Systems Analysis and Design in a Changing World, 3rd Edition 36 Summary u User interface is everything user comes into contact with while using the system l Physically, perceptually, and conceptually u To some users, user interface is the system u User-centered design means: l Focusing early on users and their work l Evaluating designs to ensure usability l Applying iterative development

14 Systems Analysis and Design in a Changing World, 3rd Edition 37 Summary ( continued ) u User interface is described with metaphors (desktop, document, dialog) u Interface design guidelines and standards are available from many sources u Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus u OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams