SlideShare uma empresa Scribd logo
1 de 34
Chapter 17




                    User Interface Design



McGraw-Hill/Irwin    Copyright © 2007 by The McGraw-Hill Companies, Inc. All rights reserved.
Objectives
       • Distinguish between different types of computer users
         and design considerations for each.
       • Identify several important human engineering factors
         and guidelines and incorporate them into a design of
         a user interface.
       • Integrate output and input design into an overall user
         interface that establishes the dialogue between users
         and computer.
       • Understand role of operating systems, web browsers,
         and other technologies for user interface design.
       • Apply appropriate user interface strategies to an
         information system. Use a state transition diagram to
         plan and coordinate a user interface.
       • Describe how prototyping can be used to design a
17-2     user interface.
17-3
System User Classifications
       Expert User – an experienced computer user
         • Spends considerable time using specific application
           programs.
         • Use of a computer is usually considered non-
           discretionary.
         • In the mainframe computing era, this was called a
           dedicated user.

       Novice User – a less experienced computer user
         • Uses computer on a less frequent, or even
           occasional, basis.
         • Use of a computer may be viewed as discretionary
           (although this is becoming less and less true).
17-4     • Sometimes called a casual user.
Interface Problems

       According to Galitz, the following problems result
       in confusion, panic, frustration, boredom, misuse,
       abandonment, and other undesirable
       consequences.

         • Excessive use of computer jargon and acronyms
         • Nonobvious or less-than-intuitive design
         • Inability to distinguish between alternative actions
           (“what do I do next?”)
         • Inconsistent problem-solving approaches
         • Design inconsistency
17-5
Commandments of User
       Interface Design
       •   Understand your users and their tasks.
       •   Involve the user in interface design.
       •   Test the system on actual users.
       •   Practice iterative design.




17-6
Human Engineering Guidelines
       • The user should always be aware of what to
         do next
         •   Tell user what the system expects right now.
         •   Tell user that data has been entered correctly.
         •   Tell user that data has not been entered correctly.
         •   Explain reason for a delay in processing.
         •   Tell user a task was completed or not completed.
       • Format screen so instructions and messages
         always appear in same general display area.
       • Display messages and instructions long
         enough so user can read them.
17-7
Human Engineering Guidelines
       (continued)
       • Use display attributes sparingly.
       • Default values should be specified.
       • Anticipate errors users might make.
       • Users should not be allowed to proceed
         without correcting an error.
       • If user does something that could be
         catastrophic, the keyboard should be locked
         to prevent any further input, and an instruction
         to call the analyst or technical support should
         be displayed.
17-8
Guidelines for dialogue Tone
       and Terminology
         Dialogue – the overall flow of screens and messages
         for an application

       • Tone:
         • Use simple, grammatically correct sentences.
         • Don’t be funny or cute!
         • Don’t be condescending.

       • Terminology
         •   Don’t use computer jargon.
         •   Avoid most abbreviations.
         •   Use simple terms.
         •   Be consistent in your use of terminology.
17-9
         •   Carefully phrase instructions—use appropriate action verbs.
User Interface Technology
        • Operating Systems and Web Browsers
           • GUI
           • Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE
           • Growing importance of platform independence
        • Display Monitor
           • Regular PC monitors
           • Non-GUI terminals
           • Growing importance of devices such as handhelds
             Paging – Display complete screen of characters at a time.
             Scrolling – Display information up or down a screen one
             line at a time.
        • Keyboards and Pointers
           • Mouse
17-10      • Pens
Graphical User Interfaces
        Styles and Considerations
        • Windows and frames
        • Menu-driven interfaces
           •   Pull-down and cascading menus
           •   Tear-off and pop-up menus
           •   Toolbar and iconic menus
           •   Hypertext and hyperlink menus
        • Instruction-driven interfaces
           • Language-based syntax
           • Mnemonic syntax
           • Natural language syntax
        • Question-answer dialogue
17-11
A Classical Hierarchical Menu
        Dialogue




17-12
Sample Dialogue Chart




17-13
Pull-Down and Cascading
        Menus
                                                  menu
                                                   bar
                               Cascading
                                 menu

                             Ellipses indicates
                               dialogue box

                 Pull-down
                   menu




17-14
Dialogue Box




17-15
Pop-Up Menus




17-16
Tool Bars




17-17
Iconic Menus




17-18
Consumer-Style Interface




17-19
Hybrid Windows/Web Interface




17-20
Instruction-Driven Interfaces

        • Language-based syntax is built around a
          widely accepted command language that can be
          used to invoke actions
          • SQL
        • Mnemonic syntax is built around commands
          defined for custom information systems.
          • Commands unique to that system and meaningful to
            user
        • Natural language syntax allows users to enter
          questions and command in their native
17-21     language
Instruction-Driven Interface




17-22
Special Considerations for User
        Interface Design
        • Internal Controls – Authentication and
          Authorization
          • User ID and Password
          • Privileges assigned to roles
          • Web certificates
        • Online Help
          •   Growing use of HTML for help systems
          •   Help authoring packages
          •   Tool tips
          •   Help wizards
          •   Agents – reusable software object that can operate
17-23         across different applications and networks.
Authentication Log-in Screen
        and Error Screen




17-24
Server Security Certificate




17-25
Help Tool Tip, Help Agent, and
        Natural Language Processing




17-26
Help Wizard




17-27
Automated Tools for User
        Interface Design & Prototyping
        • Microsoft
          Access
        • CASE
          Tools
        • Visual
          Studio
        • Excel
        • Visio                 Visual
                             Studio .NET
                                Menu
17-28
                             Construction
Additional User Interface
        Controls in Visual Basic




17-29
The User Interface Design
        Process
        1. Chart the user interface dialogue.
           State Transition Diagram– a tool used to depict the
           sequence and variation of screens that can occur
           during a user session.

        3. Prototype the dialogue and user interface.

        4. Obtain user feedback.
          •   Exercising (or testing) the user interface

        5. If necessary return to step 1 or 2
17-30
SoundStage Partial State
        Transition Diagram




17-31
SoundStage Main Menu




17-32
SoundStage Options and
        Preferences Screen




17-33
SoundStage Report
        Customization dialogue Screen




17-34

Mais conteúdo relacionado

Mais procurados

Transition from Systems Analysis to Systems Designs
Transition from Systems Analysis to Systems DesignsTransition from Systems Analysis to Systems Designs
Transition from Systems Analysis to Systems DesignsAnalene de Guzman
 
Views on building blocks
Views on building blocksViews on building blocks
Views on building blocksRitesh Khanna
 
Strategy of software design
Strategy of software designStrategy of software design
Strategy of software designSelf-employed
 
Cs8092 computer graphics and multimedia unit 5
Cs8092 computer graphics and multimedia unit 5Cs8092 computer graphics and multimedia unit 5
Cs8092 computer graphics and multimedia unit 5SIMONTHOMAS S
 
System Analysis And Design
System Analysis And DesignSystem Analysis And Design
System Analysis And DesignLijo Stalin
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design pptfarazimlak
 
Chapter 2 analyzing the business case
Chapter 2 analyzing the business caseChapter 2 analyzing the business case
Chapter 2 analyzing the business caseRaquel Miranda
 
System engineering
System engineeringSystem engineering
System engineeringSlideshare
 
software requirements
 software requirements software requirements
software requirementsZaman Khan
 
An overview of software requirements engineering
An overview of software requirements engineeringAn overview of software requirements engineering
An overview of software requirements engineeringIan Sommerville
 
Structured System Analysis and Design-1
Structured System Analysis and Design-1Structured System Analysis and Design-1
Structured System Analysis and Design-1Shylesh Prabhu
 

Mais procurados (14)

Chap11
Chap11Chap11
Chap11
 
Chapter 08
Chapter 08Chapter 08
Chapter 08
 
Transition from Systems Analysis to Systems Designs
Transition from Systems Analysis to Systems DesignsTransition from Systems Analysis to Systems Designs
Transition from Systems Analysis to Systems Designs
 
Views on building blocks
Views on building blocksViews on building blocks
Views on building blocks
 
Strategy of software design
Strategy of software designStrategy of software design
Strategy of software design
 
Cs8092 computer graphics and multimedia unit 5
Cs8092 computer graphics and multimedia unit 5Cs8092 computer graphics and multimedia unit 5
Cs8092 computer graphics and multimedia unit 5
 
System design
System designSystem design
System design
 
System Analysis And Design
System Analysis And DesignSystem Analysis And Design
System Analysis And Design
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design ppt
 
Chapter 2 analyzing the business case
Chapter 2 analyzing the business caseChapter 2 analyzing the business case
Chapter 2 analyzing the business case
 
System engineering
System engineeringSystem engineering
System engineering
 
software requirements
 software requirements software requirements
software requirements
 
An overview of software requirements engineering
An overview of software requirements engineeringAn overview of software requirements engineering
An overview of software requirements engineering
 
Structured System Analysis and Design-1
Structured System Analysis and Design-1Structured System Analysis and Design-1
Structured System Analysis and Design-1
 

Destaque

Risk taking and emotions
Risk taking and emotionsRisk taking and emotions
Risk taking and emotionsNitesh Singh
 
Erakartzeko marketing aurkezpena
Erakartzeko marketing aurkezpenaErakartzeko marketing aurkezpena
Erakartzeko marketing aurkezpenaioritzrz
 
School Database Management System
School Database Management SystemSchool Database Management System
School Database Management SystemHasSan Farooqi
 
system analysis and design Chap002
 system analysis and design Chap002 system analysis and design Chap002
system analysis and design Chap002Nderitu Muriithi
 
Information Systems Analysis and Design
Information Systems Analysis and DesignInformation Systems Analysis and Design
Information Systems Analysis and DesignChristian Reina
 
A&D - Use Case Diagram
A&D - Use Case DiagramA&D - Use Case Diagram
A&D - Use Case Diagramvinay arora
 
Data Flow Diagram and USe Case Diagram
Data Flow Diagram and USe Case DiagramData Flow Diagram and USe Case Diagram
Data Flow Diagram and USe Case DiagramKumar
 
School management system
School management systemSchool management system
School management systemSoumya Behera
 
School management system
School management systemSchool management system
School management systemasd143
 
Software requirements specification of Library Management System
Software requirements specification of Library Management SystemSoftware requirements specification of Library Management System
Software requirements specification of Library Management SystemSoumili Sen
 

Destaque (20)

Chap03
Chap03Chap03
Chap03
 
Risk taking and emotions
Risk taking and emotionsRisk taking and emotions
Risk taking and emotions
 
Chap05
Chap05Chap05
Chap05
 
Chap04
Chap04Chap04
Chap04
 
Asi Chap005
Asi Chap005Asi Chap005
Asi Chap005
 
Erakartzeko marketing aurkezpena
Erakartzeko marketing aurkezpenaErakartzeko marketing aurkezpena
Erakartzeko marketing aurkezpena
 
Chap06
Chap06Chap06
Chap06
 
School Database Management System
School Database Management SystemSchool Database Management System
School Database Management System
 
Algorithms
AlgorithmsAlgorithms
Algorithms
 
Problem statement
Problem statementProblem statement
Problem statement
 
Design of input
Design of inputDesign of input
Design of input
 
Chap09
Chap09Chap09
Chap09
 
system analysis and design Chap002
 system analysis and design Chap002 system analysis and design Chap002
system analysis and design Chap002
 
Information Systems Analysis and Design
Information Systems Analysis and DesignInformation Systems Analysis and Design
Information Systems Analysis and Design
 
A&D - Use Case Diagram
A&D - Use Case DiagramA&D - Use Case Diagram
A&D - Use Case Diagram
 
IT Supply Chain Management
IT Supply Chain ManagementIT Supply Chain Management
IT Supply Chain Management
 
Data Flow Diagram and USe Case Diagram
Data Flow Diagram and USe Case DiagramData Flow Diagram and USe Case Diagram
Data Flow Diagram and USe Case Diagram
 
School management system
School management systemSchool management system
School management system
 
School management system
School management systemSchool management system
School management system
 
Software requirements specification of Library Management System
Software requirements specification of Library Management SystemSoftware requirements specification of Library Management System
Software requirements specification of Library Management System
 

Semelhante a Chap17

User Interface design & methods for easy utilization
User Interface design & methods for easy utilizationUser Interface design & methods for easy utilization
User Interface design & methods for easy utilizationDipali M
 
Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).pptskknowledge
 
HUMAN COMPUTER INTERACTION.pptx
HUMAN COMPUTER INTERACTION.pptxHUMAN COMPUTER INTERACTION.pptx
HUMAN COMPUTER INTERACTION.pptxMRahul20
 
Chapter 8 User Interface Design
Chapter 8 User Interface DesignChapter 8 User Interface Design
Chapter 8 User Interface DesignMeryl C
 
System Analysis and Design
System Analysis and DesignSystem Analysis and Design
System Analysis and DesignMay Belleza
 
Software engineering 18 user interface design
Software engineering 18 user interface designSoftware engineering 18 user interface design
Software engineering 18 user interface designVaibhav Khanna
 
COMPUTER LANGUAGES AND PROGRAMMING
COMPUTER LANGUAGES AND PROGRAMMINGCOMPUTER LANGUAGES AND PROGRAMMING
COMPUTER LANGUAGES AND PROGRAMMINGABHINAV SINGH
 
Chapter 8 User Interface Design .pptxInformation Technology Project Managemen
Chapter 8 User Interface Design .pptxInformation Technology Project ManagemenChapter 8 User Interface Design .pptxInformation Technology Project Managemen
Chapter 8 User Interface Design .pptxInformation Technology Project ManagemenAxmedMaxamuudYoonis
 
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...DennisAnaafi1
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationSalocin Dot TEN
 
Application Design, Development and User Experience Methodologies for the 2 i...
Application Design, Development and User Experience Methodologies for the 2 i...Application Design, Development and User Experience Methodologies for the 2 i...
Application Design, Development and User Experience Methodologies for the 2 i...Intel® Software
 

Semelhante a Chap17 (20)

User Interface design & methods for easy utilization
User Interface design & methods for easy utilizationUser Interface design & methods for easy utilization
User Interface design & methods for easy utilization
 
Final
FinalFinal
Final
 
HCI
HCIHCI
HCI
 
Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).ppt
 
User interface design
User interface designUser interface design
User interface design
 
HUMAN COMPUTER INTERACTION.pptx
HUMAN COMPUTER INTERACTION.pptxHUMAN COMPUTER INTERACTION.pptx
HUMAN COMPUTER INTERACTION.pptx
 
Chapter 8 User Interface Design
Chapter 8 User Interface DesignChapter 8 User Interface Design
Chapter 8 User Interface Design
 
System Analysis and Design
System Analysis and DesignSystem Analysis and Design
System Analysis and Design
 
Software engineering 18 user interface design
Software engineering 18 user interface designSoftware engineering 18 user interface design
Software engineering 18 user interface design
 
Unit 2
Unit 2Unit 2
Unit 2
 
System softare
System softareSystem softare
System softare
 
Chapter 6 implementation support
Chapter 6 implementation supportChapter 6 implementation support
Chapter 6 implementation support
 
COMPUTER LANGUAGES AND PROGRAMMING
COMPUTER LANGUAGES AND PROGRAMMINGCOMPUTER LANGUAGES AND PROGRAMMING
COMPUTER LANGUAGES AND PROGRAMMING
 
Chapter 8 User Interface Design .pptxInformation Technology Project Managemen
Chapter 8 User Interface Design .pptxInformation Technology Project ManagemenChapter 8 User Interface Design .pptxInformation Technology Project Managemen
Chapter 8 User Interface Design .pptxInformation Technology Project Managemen
 
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
Application Design, Development and User Experience Methodologies for the 2 i...
Application Design, Development and User Experience Methodologies for the 2 i...Application Design, Development and User Experience Methodologies for the 2 i...
Application Design, Development and User Experience Methodologies for the 2 i...
 
Compilers.pptx
Compilers.pptxCompilers.pptx
Compilers.pptx
 
Design rule 3
Design rule 3Design rule 3
Design rule 3
 
Design rule 3
Design rule 3Design rule 3
Design rule 3
 

Último

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 

Último (20)

DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 

Chap17

  • 1. Chapter 17 User Interface Design McGraw-Hill/Irwin Copyright © 2007 by The McGraw-Hill Companies, Inc. All rights reserved.
  • 2. Objectives • Distinguish between different types of computer users and design considerations for each. • Identify several important human engineering factors and guidelines and incorporate them into a design of a user interface. • Integrate output and input design into an overall user interface that establishes the dialogue between users and computer. • Understand role of operating systems, web browsers, and other technologies for user interface design. • Apply appropriate user interface strategies to an information system. Use a state transition diagram to plan and coordinate a user interface. • Describe how prototyping can be used to design a 17-2 user interface.
  • 4. System User Classifications Expert User – an experienced computer user • Spends considerable time using specific application programs. • Use of a computer is usually considered non- discretionary. • In the mainframe computing era, this was called a dedicated user. Novice User – a less experienced computer user • Uses computer on a less frequent, or even occasional, basis. • Use of a computer may be viewed as discretionary (although this is becoming less and less true). 17-4 • Sometimes called a casual user.
  • 5. Interface Problems According to Galitz, the following problems result in confusion, panic, frustration, boredom, misuse, abandonment, and other undesirable consequences. • Excessive use of computer jargon and acronyms • Nonobvious or less-than-intuitive design • Inability to distinguish between alternative actions (“what do I do next?”) • Inconsistent problem-solving approaches • Design inconsistency 17-5
  • 6. Commandments of User Interface Design • Understand your users and their tasks. • Involve the user in interface design. • Test the system on actual users. • Practice iterative design. 17-6
  • 7. Human Engineering Guidelines • The user should always be aware of what to do next • Tell user what the system expects right now. • Tell user that data has been entered correctly. • Tell user that data has not been entered correctly. • Explain reason for a delay in processing. • Tell user a task was completed or not completed. • Format screen so instructions and messages always appear in same general display area. • Display messages and instructions long enough so user can read them. 17-7
  • 8. Human Engineering Guidelines (continued) • Use display attributes sparingly. • Default values should be specified. • Anticipate errors users might make. • Users should not be allowed to proceed without correcting an error. • If user does something that could be catastrophic, the keyboard should be locked to prevent any further input, and an instruction to call the analyst or technical support should be displayed. 17-8
  • 9. Guidelines for dialogue Tone and Terminology Dialogue – the overall flow of screens and messages for an application • Tone: • Use simple, grammatically correct sentences. • Don’t be funny or cute! • Don’t be condescending. • Terminology • Don’t use computer jargon. • Avoid most abbreviations. • Use simple terms. • Be consistent in your use of terminology. 17-9 • Carefully phrase instructions—use appropriate action verbs.
  • 10. User Interface Technology • Operating Systems and Web Browsers • GUI • Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE • Growing importance of platform independence • Display Monitor • Regular PC monitors • Non-GUI terminals • Growing importance of devices such as handhelds Paging – Display complete screen of characters at a time. Scrolling – Display information up or down a screen one line at a time. • Keyboards and Pointers • Mouse 17-10 • Pens
  • 11. Graphical User Interfaces Styles and Considerations • Windows and frames • Menu-driven interfaces • Pull-down and cascading menus • Tear-off and pop-up menus • Toolbar and iconic menus • Hypertext and hyperlink menus • Instruction-driven interfaces • Language-based syntax • Mnemonic syntax • Natural language syntax • Question-answer dialogue 17-11
  • 12. A Classical Hierarchical Menu Dialogue 17-12
  • 14. Pull-Down and Cascading Menus menu bar Cascading menu Ellipses indicates dialogue box Pull-down menu 17-14
  • 21. Instruction-Driven Interfaces • Language-based syntax is built around a widely accepted command language that can be used to invoke actions • SQL • Mnemonic syntax is built around commands defined for custom information systems. • Commands unique to that system and meaningful to user • Natural language syntax allows users to enter questions and command in their native 17-21 language
  • 23. Special Considerations for User Interface Design • Internal Controls – Authentication and Authorization • User ID and Password • Privileges assigned to roles • Web certificates • Online Help • Growing use of HTML for help systems • Help authoring packages • Tool tips • Help wizards • Agents – reusable software object that can operate 17-23 across different applications and networks.
  • 24. Authentication Log-in Screen and Error Screen 17-24
  • 26. Help Tool Tip, Help Agent, and Natural Language Processing 17-26
  • 28. Automated Tools for User Interface Design & Prototyping • Microsoft Access • CASE Tools • Visual Studio • Excel • Visio Visual Studio .NET Menu 17-28 Construction
  • 29. Additional User Interface Controls in Visual Basic 17-29
  • 30. The User Interface Design Process 1. Chart the user interface dialogue. State Transition Diagram– a tool used to depict the sequence and variation of screens that can occur during a user session. 3. Prototype the dialogue and user interface. 4. Obtain user feedback. • Exercising (or testing) the user interface 5. If necessary return to step 1 or 2 17-30
  • 31. SoundStage Partial State Transition Diagram 17-31
  • 33. SoundStage Options and Preferences Screen 17-33
  • 34. SoundStage Report Customization dialogue Screen 17-34

Notas do Editor

  1. This repository of slides is intended to support the named chapter. The slide repository should be used as follows: Copy the file to a unique name for your course and unit. Edit the file by deleting those slides you don’t want to cover, editing other slides as appropriate to your course, and adding slides as desired. Print the slides to produce transparency masters or print directly to film or present the slides using a computer image projector. Each slide includes instructor notes. To view those notes in PowerPoint, click-left on the View Menu; then click left on Notes View sub-menu. You may need to scroll down to see the instructor notes. Teaching Notes This slide shows the how this chapter's content fits with the building blocks framework used throughout the textbook. The emphasis of this chapter is with the physical design phase, focusing on COMMUNICATION. It involves system designers and systems analysts.
  2. No additional notes.
  3. Chapter 17 – User Interface Design Teaching Notes This slide shows the how this chapter's content fits with the building blocks framework used throughout the textbook. The emphasis of this chapter is with the physical design phase, focusing on the communication building blocks. It involves system designers and systems analysts.
  4. Teaching Notes Emphasize that expert and novice users are actually extremes in the continuum of all users. The totally novice user who hasn’t used a computer is becoming less common. Mention some people that the students might know (perhaps a department secretary, yourself, another colleague, etc.) and ask the students to characterize them as an expert or novice user. Be sure to acknowledge, once again, that some individuals may fit in between the two extremes. A given user might be an expert at PowerPoint, a novice at PhotoShop, and something in between at Excel.
  5. Teaching Notes The above points can be driven home by providing the students with some sample screen designs that exhibit the various problems.
  6. Teaching Notes These also come from Galitz.
  7. Teaching Tips The above points can be driven home by providing the students with some sample screen designs that exhibit a failure to take into consideration the above guidelines. Alternatively, obtain some screen shots of a sample application from a local company and have the students assess the screens relative to the above guidelines.
  8. Teaching Notes Entire books have been written on the subject of user interface design. Feel free to add additional user interface design considerations you want to bring to the students attention (such as the user of color, consideration of handicapped individuals, etc.). We provided several references to books on the subject of user interface design.
  9. Teaching Notes The above points can be driven home by providing the students with some sample screen designs that exhibit the and incorrect use of tone and terminology. Have the students give examples of instructions that might appear on a screen. Is the tone and terminology acceptable?
  10. Teaching Notes The manner in which the display area is shown to the user is controlled by both the technical capabilities of the display and the operating system capabilities. Paging and scrolling are the two most common approaches to showing the display area to the user. Scrolling is often used in web sites where a web page can be infinitely long. However users can get lost if they have to scroll too much to enter their inputs. In those cases, paging gives more control both to the user and the programmer.
  11. Teaching Notes These will be illustrated in the following slides. Consider using a laptop and projection capability to demonstrate a software product(s) or application and its use of the different types of GUI menus. Emphasize to the students that the above styles/strategies should not be viewed as alternatives.
  12. No additional notes.
  13. Teaching Notes This screen dialogue chart was take from the First Edition of our textbook. This tool was created by the authors as a tool for designing dialogues for on-line mainframe-based computing solutions. Subsequently, the tool has been adopted and adapted by numerous authors of systems development textbooks. The authors emphasize that this tool has become ineffective in design GUI screens because today’s GUI design solutions are not naturally hierarchical.
  14. No additional notes.
  15. No additional notes.
  16. Teaching Notes: Be sure to emphasize that such menus are not as appropriate for the novice user because they are less likely to even know the menu exists (since there is no visual hint of its existence).
  17. No additional notes.
  18. No additional notes.
  19. Teaching Notes Consumer-style interfaces are somewhat more artistic The primary look and feel is more web-like The interface consists of clickable icons and buttons that replace more traditional Windows menu approaches
  20. No additional notes.
  21. No additional notes.
  22. No additional notes.
  23. Teaching Notes Screens to illustrate these concepts are on the following slides
  24. No additional notes.
  25. No additional notes.
  26. No additional notes.
  27. No additional notes.
  28. No additional notes.
  29. Teaching Notes: Feel free to provide additional screen shots of other user interface controls not presented in the textbook. These are only a few of the many controls that continue to evolve.
  30. Teaching Notes In practice these steps are not strictly sequential.
  31. No additional notes.
  32. No additional notes.
  33. No additional notes.
  34. No additional notes.