User Interface Design With

Home , Diagram, User interface, User interface design

......

UserUser InterfaceInterface DesignDesign withwith UMLUML

FourthFourth WorkshopWorkshop OnOn UMLUML forfor EnterpriseEnterprise ApplicationsApplications

ATC Enterprises, Inc. 7402 Borman Avenue St. Paul, MN 55076 651.554.1771 www.atcenterprises.com UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ObjectivesObjectives ...... • Process overview and • Tips for detailing use cases and how to handle user interface (UI) requirements • Using UML collaborations for UI design • Identify UI elements • Identify their responsibilities • Identify their relationships • Using Rational Rose, RequisitePro, and SoDA

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved SM TM .AdaptiveAdaptive ...... TeamTeam ...... CollaborativeCollaborative ...... ProcessProcess ...... (ATCP(ATCP...... )) . . . • Practical, agile, and iterative • Extreme Programming (XP) • Use case based and risk driven • Adaptive Software Development (ASD) • Customer-centric and adaptive • Usage-Centered Design (UCD) • Applies practical UML guidance • Object-Oriented Analysis and • Supports MDA through Design (OOAD) traceability strategy and tool • Unified Modeling Language usage (UML) • Based on Software Process • Rational Unified Process (RUP) Engineering Metamodel (SPEM) • Capability Maturity Model (CMM) • Will be available open • UCD adopted ATCP Actor/Role license/freeware UML notation – Oct 2002 • Leverages tool transparency for • http://www.foruse.com/newsletter/for use26.htm real-time measurement

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .SampleSample ...... ATCPATCP ...... WorkflowWorkflow ......

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .UserUser . . . . . Interface.Interface ...... AnalysisAnalysis ...... and.and. . . . DesignDesign...... • ATCP recognizes user interface analysis and design as separate discipline • Follow very similar process pattern as in object-oriented analysis and design • However, do not focus on what happens “inside” system – just at the system boundary • Similar to steps 6-8 in Agile UCD process • Build the content model and navigation map using UML

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ATCPATCP ...... UserUser ...... InterfaceInterface ...... And And. . . . .MDA MDA......

Requirements Use Model Fine-grainedFine-grained Cases ttraceabiraceabililtyity

UI Analysis Platform Independent Model UIUI ArchiArchitecturetecture // Model (PIM) TransforTransfor mat matiionon RulesRules

UI Design UI Design Platform Specific Model Model #1 Model #2 (PSM) (Platform A) (Platform B)

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ATCPATCP ...... UseUse . . . . .CaseCase ...... SpecificationSpecification......

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .UserUser . . . . . Interface.Interface ...... AnalysisAnalysis ...... • Create user interface realization • Identify candidate UI elements • Model role-boundary interaction • Re-factor UI responsibilities • Model UI navigation

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ArchitectureArchitecture ...... ProcessProcess...... Pattern Pattern...... Given the description of a set of related behaviors • Find candidate components • Describe their services • Describe how they interact • Group them into structures to support their interactions such that their aggregate behavior constitutes the set of behaviors in question

This way of looking at software can be applied at all levels of abstraction and at all degrees of granularity; ATCP applies this viewpoint to derive one model from another

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .CreateCreate ...... UserUser . . . . . Interface.Interface ...... RealizationRealization ...... • Use UML collaboration to capture the behavior and use case structure of the user Register for Event interface model “realizes” • Stereotype the collaboration relationship as <> collaboration • Connect to use case using Register for Event <> realization relationship

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .UIUI . . .AnalysisAnalysis ...... Model.Model ...... StereotypesStereotypes ...... • View • Form • List • Menu

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ModelModel ...... Role Role. . . . .- -.BoundaryBoundary ...... Interaction Interaction...... • Use UML collaboration diagram SystemSystem ResponsibResponsibiliiltiitesies

UserUser IntentIntentionsions 2: display event list( ) 4: display event info( ) 1: view event list( ) 8: display confirmation( ) 3: select event( ) 5: register for event( ) 6: enter attendee info( ) 7: enter payment info( ) 9: confirm registration( )

: Registrant : Event Registration Form

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .AssignAssign ...... UserUser . . . . . Interface.Interface ...... ResponsibilitiesResponsibilities ...... • Use UML class diagram • Look messages that are going to objects • They become responsibilities of the destination object • Model as operations in a class icon

<> Event Registration Form

confirm registration() display confirmation() display event info() display event list() enter attendee info() Registrant enter payment info() register for event() select event() view event list()

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ReRe . . .-- Factor.Factor ...... UserUser...... Interface Interface...... ResponsibilitiesResponsibilities...... • We followed a pretty simple guideline to get started • One boundary class per use case per actor • Following this guidelines helps us focus on identifying responsibilities • Inspect them to see if they could be re-factored to a larger number of more fine-grained user interface elements • Support engineering principles • Loosely coupled • Highly cohesive

: Registrant : Event Confirmation Message 4: sort by event by date( ) : Attendee View 5: select event( ) 15: confirm registration( ) 16: send( ) 3: display event list( ) 8: register for event( ) 14: display confirmation( ) 10: enter attendee info( ) 11: enter payment info( ) 2: open( ) 12: submit registration( ) 7: display event info( )

13: open( ) : Event List 9: open( ) : Event Confirmation Form 6: open( ) SixSix UIUI eelele m m e e nts nts : Event Details insteainstea d d ofof one!one! : Event Registration Form • Collaboration diagrams show patterns of interaction • Shows relationships in addition to behavior • Easy to draw free hand UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ReRe . . .-- Factor.Factor ...... UserUser...... Interface Interface...... ResponsibilitiesResponsibilities......

: Registrant : Attendee : Event : Event : Registration : Confirmation : Confirmation View List Details Form Form Message

1: view event list( ) 2: open( ) 3: display event list( ) 4: sort by event by date( ) 5: select event( ) 6: open( ) 7: display event info( ) 8: register for event( ) 9: open( ) 10: enter attendee info( ) 11: enter payment info( ) 12: submit registration( ) 13: open( ) 14: display confirmation( ) 15: confirm registration( ) 16: send( ) 17: view( ) • Sequence diagrams can be easier to read • Do not show relationships • Not as easy to draw free hand UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ModelModel ...... User User...... InterfaceInterface ...... NavigationNavigation...... • After creating several user interface realizations for a set of use cases • Look for common responsibilities and continue to re-factor • Use generalization and composition • Can create a navigation map that spans multiple use cases for overall flow • Use UML class diagram

UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .ModelModel ...... User User...... InterfaceInterface ...... NavigationNavigation...... <> WW e e choosechoose notnot toto Attendee View <> showshow anyany atatttrributesibutes Event Confirmation Message view event list() atat ththisis timetime send() view() <> Event List

open() display event list() sort by event by date() <> select event() Event Confirmation Form Use Registrant open() attributes display confirmation() confirm registration() <> to sho w Event Details which open() <> display event info() data Event Registration Form register for event() ele m e nts enter attendee info() enter payment info() to submit registration() display UML. . Workshop. . . . 2003: . . User. . Interface . . . Design. . . with . .UML ...... Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved .UserUser . . . . . Interface.Interface ...... DesignDesign ...... • Platform-specific model • Influenced by UI architecture, standards and conventions, and platform constraints • Many possible design models for one analysis model • Apply similar technique as in analysis • Use collaborations! • Use new stereotypes for classes • Dependent on platform • <>, <>, <>, <> • <