INFORMATION SYSTEMS @ X INFO425: Systems Design Chapter 14 Designing the user interface

INFORMATION SYSTEMS @ XINFORMATION SYSTEMS @ X

INFO425: Systems DesignINFO425: Systems Design

Chapter 14Chapter 14

Designing the user interfaceDesigning the user interface



CaseCase

Contrast PM Sara’s approach to analysis and Contrast PM Sara’s approach to analysis and design vs. the previous PMdesign vs. the previous PM

What techniques were used to define the system UIWhat techniques were used to define the system UI What were key findings from UI design sessions? What were key findings from UI design sessions?

Why were they important?Why were they important?



Learning ObjectivesLearning Objectives

Describe the difference between user interfaces Describe the difference between user interfaces and system interfacesand system interfaces

Explain why the user interface Explain why the user interface isis the system to the the system to the usersusers

Discuss the importance of the three principles of Discuss the importance of the three principles of user-centered designuser-centered design



Learning Objectives (Learning Objectives (continuedcontinued))

Describe the three metaphors of human-computer Describe the three metaphors of human-computer interactioninteraction

Discuss how visibility and affordance affect Discuss how visibility and affordance affect usabilityusability

Apply the eight golden rules of dialog design when Apply the eight golden rules of dialog design when designing the user interfacedesigning the user interface

Define the overall system structure as a menu Define the overall system structure as a menu hierarchyhierarchy



Learning Objectives (Learning Objectives (continuedcontinued))

Write user-computer interaction scenarios as Write user-computer interaction scenarios as dialogsdialogs

Create storyboards to show the sequence of forms Create storyboards to show the sequence of forms used in a dialogused in a dialog

Use UML class diagrams and sequence diagrams Use UML class diagrams and sequence diagrams to document dialog designsto document dialog designs

List the key principles used in Web designList the key principles used in Web design



OverviewOverview

User interfaces handle input and output that involve a User interfaces handle input and output that involve a user directlyuser directly

Focus on interaction between user and computer called Focus on interaction between user and computer called human-computer interaction (HCI)human-computer interaction (HCI)

Metaphors to describe the user interfaceMetaphors to describe the user interface

What’s a metaphor?What’s a metaphor?

(1)

(2)



Identifying and Classifying Identifying and Classifying Inputs and OutputsInputs and Outputs

Identified by analyst when defining system scopeIdentified by analyst when defining system scope

Requirements model produced during analysisRequirements model produced during analysis

Event table includes trigger to each external eventEvent table includes trigger to each external event

Triggers represent inputsTriggers represent inputs

Outputs are shown as responses to eventsOutputs are shown as responses to events



Traditional and OO Approaches to Inputs and Traditional and OO Approaches to Inputs and OutputsOutputs

Traditional approach to inputs and outputs Traditional approach to inputs and outputs Shown as data flows on context diagram, data flow diagram Shown as data flows on context diagram, data flow diagram

(DFD) fragments, and detailed DFDs(DFD) fragments, and detailed DFDs OO approach to inputs and outputsOO approach to inputs and outputs

Defined by message entering or leaving systemDefined by message entering or leaving system Documented in system sequence diagram (SSD)Documented in system sequence diagram (SSD) Actors provide inputs for many use casesActors provide inputs for many use cases

> Under what circumstances do actors Under what circumstances do actors notnot provide inputs? provide inputs?



User versus System InterfaceUser versus System Interface

System interfaces System interfaces –– I/O requiring minimal human I/O requiring minimal human interactioninteraction

Goal is *no* human interactionGoal is *no* human interaction

User interfacesUser interfaces I/O requiring human interactionI/O requiring human interaction User interface is everything end user comes into contact with while User interface is everything end user comes into contact with while

using the systemusing the system To the user, the interface To the user, the interface isis the system the system When is UI design critically important to an organization?When is UI design critically important to an organization?

Analyst designs system interfaces separate from user Analyst designs system interfaces separate from user interfaces interfaces

Requires different expertise and technologyRequires different expertise and technology



Understanding the User InterfaceUnderstanding the User Interface

Physical aspects of the user interfacePhysical aspects of the user interface Devices touched by user, manuals, documentation, and Devices touched by user, manuals, documentation, and

formsforms

Perceptual aspects of the user interfacePerceptual aspects of the user interface Everything else user sees, hears, or touches such as screen Everything else user sees, hears, or touches such as screen

objects, menus, and buttonsobjects, menus, and buttons

Conceptual aspects of the user interfaceConceptual aspects of the user interface What user knows about system and logical function of What user knows about system and logical function of

systemsystem



Aspects of the User InterfaceAspects of the User Interface

PhysicalPhysical

PerceptualPerceptual

ConceptualConceptual



User-Centered DesignUser-Centered Design

1.1. Focus Focus earlyearly on the on the users users and their work by focusing and their work by focusing on requirementson requirements Workflow analysis Workflow analysis

2.2. UsabilityUsability - system is easy to learn and use - system is easy to learn and use3.3. Iterative developmentIterative development keeps focus on user keeps focus on user

Continually return to user requirements and evaluate system after Continually return to user requirements and evaluate system after each iterationeach iteration

Human – Computer Interaction as field of studyHuman – Computer Interaction as field of study Study of end users and interaction with computersStudy of end users and interaction with computers Human factors engineering (ergonomics)Human factors engineering (ergonomics)



Fields Contributing to the Study of HCIFields Contributing to the Study of HCI



Metaphors for Metaphors for Human-Computer InteractionHuman-Computer Interaction

Direct manipulation metaphorDirect manipulation metaphor User interacts with objects on display screenUser interacts with objects on display screen

Document metaphorDocument metaphor Computer is involved with browsing and entering data in Computer is involved with browsing and entering data in

electronic documentselectronic documents WWW, hypertext, and hypermediaWWW, hypertext, and hypermedia

Dialog metaphorDialog metaphor Much like carrying on a conversationMuch like carrying on a conversation



Desktop Metaphor Based on Direct Desktop Metaphor Based on Direct Manipulation Shown on Display ScreenManipulation Shown on Display Screen



Document Metaphor Shown as Document Metaphor Shown as Hypermedia in Web BrowsersHypermedia in Web Browsers



Dialog Metaphor Expresses the Dialog Metaphor Expresses the Messaging ConceptMessaging Concept



Guidelines for DesigningGuidelines for DesigningUser InterfacesUser Interfaces

AffordanceAffordance Appearance of control should suggest its functionality – Appearance of control should suggest its functionality –

purpose for which it is usedpurpose for which it is used

VisibilityVisibility All controls should be visibleAll controls should be visible Provide immediate feedback to indicate control is respondingProvide immediate feedback to indicate control is responding

System developers should use published System developers should use published interface interface design standardsdesign standards and guidelines and guidelines



Eight Golden Rules for Eight Golden Rules for Interactive Interface DesignInteractive Interface Design

Strive for consistencyStrive for consistency Consistent way of performing functions, laying out data on Consistent way of performing functions, laying out data on

forms, navigation through menusforms, navigation through menus

Shortcuts for expertsShortcuts for experts Ability to use keystrokes (Ctl C) or enter commands on a Ability to use keystrokes (Ctl C) or enter commands on a

command linecommand line

Offer informative feedbackOffer informative feedback Think of Windows error feedback …. The opposite of that Think of Windows error feedback …. The opposite of that Let users know that system recognizes what they have Let users know that system recognizes what they have

enteredentered Effective error and help messagesEffective error and help messages

Dialogs have ClosureDialogs have Closure Clear sequence….like a good movie…beginning, middle, endClear sequence….like a good movie…beginning, middle, end



Eight Golden Rules for Eight Golden Rules for Interactive Interface DesignInteractive Interface Design

Simple error handlingSimple error handling PreventativePreventative When error made, easy for user to understand what error is, When error made, easy for user to understand what error is,

how to fixhow to fix

Easy reversal of ActionsEasy reversal of Actions Ability to ‘undo’Ability to ‘undo’

Support ‘internal locus of control’Support ‘internal locus of control’ Make users think they are in control of the systemMake users think they are in control of the system Wording of promptsWording of prompts

Reduce short term memory loadReduce short term memory load The rule of 7 +/- 2The rule of 7 +/- 2 Make sure necessary info from previous steps, etc easily Make sure necessary info from previous steps, etc easily

accessibleaccessible



Documenting Dialog DesignsDocumenting Dialog Designs

Done simultaneously with other system activitiesDone simultaneously with other system activities

Based on inputs and outputs requiring user Based on inputs and outputs requiring user interactioninteraction

Used to define menu hierarchy Used to define menu hierarchy Allows user to navigate to each dialogAllows user to navigate to each dialog Provides overall system structureProvides overall system structure

Storyboards, prototypes, and UML diagramsStoryboards, prototypes, and UML diagrams



Overall Menu Hierarchy DesignOverall Menu Hierarchy Design

Use cases grouped logically – Use cases grouped logically – become menusbecome menus

System utilities identified System utilities identified in Design phase added in Design phase added

laterlater



Dialogs and StoryboardsDialogs and Storyboards

Many methods exist for documenting dialogsMany methods exist for documenting dialogs

Written descriptions following flow of activities like in use Written descriptions following flow of activities like in use case descriptioncase description

Narratives Narratives

Sketches of screensSketches of screens

Storyboarding Storyboarding – showing sequence of sketches of display – showing sequence of sketches of display screen during a dialogscreen during a dialog





Dialog Documentation with UML DiagramsDialog Documentation with UML Diagrams

OO approach provides UML diagrams OO approach provides UML diagrams Use case descriptionsUse case descriptions

List of steps followed as system and user interactList of steps followed as system and user interact

Activity diagramsActivity diagrams Document dialog between user and computer for a use caseDocument dialog between user and computer for a use case

System sequence diagrams (SSD)System sequence diagrams (SSD) Actor (a user) sends messages to system Actor (a user) sends messages to system System returns information in form of messagesSystem returns information in form of messages



Sequence Diagram for the RMO Sequence Diagram for the RMO Look Up Item Availability Look Up Item Availability dialog dialog (Figure 13-10)(Figure 13-10)



Class Diagram Showing Interface Classes Class Diagram Showing Interface Classes Making up ProductQueryFormMaking up ProductQueryForm



Sequence Diagram Showing Specific Interface Sequence Diagram Showing Specific Interface Objects Objects (Figure 13-12)(Figure 13-12)



Guidelines for Designing Guidelines for Designing Windows and Browser FormsWindows and Browser Forms

Each dialog might require several windows formsEach dialog might require several windows forms Standard forms are widely availableStandard forms are widely available

Windows: Visual Basic, C++, C#, JavaWindows: Visual Basic, C++, C#, Java Browser: HTML, VBScript, JavaScript, ASP, Java servletsBrowser: HTML, VBScript, JavaScript, ASP, Java servlets

ImplementationImplementation Identify objectives of form and associated data fieldsIdentify objectives of form and associated data fields Construct form with prototyping toolsConstruct form with prototyping tools



Form Design IssuesForm Design Issues

Form layout and formatting Form layout and formatting ConsistencyConsistency Headings, labels, logosHeadings, labels, logos Font sizes, highlighting, colorsFont sizes, highlighting, colors Order of data-entry fields and buttonsOrder of data-entry fields and buttons

Data keying and data entry (use standard control)Data keying and data entry (use standard control) Text boxes, list boxes, combo boxes, and so onText boxes, list boxes, combo boxes, and so on

Navigation and support controls Navigation and support controls Help supportHelp support

TutorialsTutorials IndexesIndexes Context-sensitiveContext-sensitive



Guidelines for Designing Web SitesGuidelines for Designing Web Sites

Draw from guidelines and rules for designing Draw from guidelines and rules for designing windows forms and browser formswindows forms and browser forms

Web site usesWeb site uses

Corporate communicationCorporate communication

Customer information and serviceCustomer information and service

Sales, distribution, and marketingSales, distribution, and marketing

Must work seamlessly with customers 24/7Must work seamlessly with customers 24/7



Ten Good Deeds in Web DesignTen Good Deeds in Web Design

Place organization’s name and logo on every page Place organization’s name and logo on every page and link to the homepageand link to the homepage

Provide a search functionProvide a search function Use straightforward headlines and page titles so it Use straightforward headlines and page titles so it

is clear what page containsis clear what page contains Structure page to help readers scan itStructure page to help readers scan it Use hypertext to organize information into Use hypertext to organize information into

separate pagesseparate pages



Ten Good Deeds in Web Design Ten Good Deeds in Web Design (Continued)(Continued)

Use product photos (preferably thumbnails), but avoid Use product photos (preferably thumbnails), but avoid cluttered and bloated pages that load slowlycluttered and bloated pages that load slowly

Use relevance-enhanced image reduction; zoom in on Use relevance-enhanced image reduction; zoom in on needed detailneeded detail

Use link titles to provide users with a preview of where link Use link titles to provide users with a preview of where link will take themwill take them

Ensure that pages are accessible by users with disabilitiesEnsure that pages are accessible by users with disabilities Do the Do the basicsbasics the same thing as everybody else because the same thing as everybody else because

users come to expect certain featuresusers come to expect certain features Shopping cartShopping cart SearchSearch



SummarySummary

User interface is everything user comes into User interface is everything user comes into contact with while using the systemcontact with while using the system

Physically, perceptually, and conceptuallyPhysically, perceptually, and conceptually

To some users, user interface To some users, user interface is is the systemthe system

User-centered design meansUser-centered design means Focusing early on users and their workFocusing early on users and their work

Evaluating designs to ensure usabilityEvaluating designs to ensure usability

Applying iterative developmentApplying iterative development



Summary (Summary (continuedcontinued))

User interface is described with metaphors User interface is described with metaphors (desktop, document, dialog) (desktop, document, dialog)

Interface design guidelines and standards are Interface design guidelines and standards are available from many sourcesavailable from many sources

Dialog design starts with use cases and adds Dialog design starts with use cases and adds dialogs for integrity controls, user preferences, dialogs for integrity controls, user preferences, helphelp

OO approach provides UML models to document OO approach provides UML models to document dialog designs, including sequence diagrams, dialog designs, including sequence diagrams, activity diagrams, and class diagramsactivity diagrams, and class diagrams

Documents

INFORMATION SYSTEMS @ X INFO425: Systems Design Chapter 14 Designing the user interface