Informatics 121 Software Design I Lecture 8 André van der Hoek & Alex Baker Duplication of course material for any commercial purpose without the explicit written permission of the professor is prohibited. November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Today’s Lecture Design theory Design Studio I continued November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Positioning Software Design Waterfall: once, in between requirements and implementation “design is a phase” Incremental: repeatedly, in between requirements and implementation Prototyping: once, in between prototyping/requirements and implementation Spiral: intermittently, when the risks being faced demand it XP: all the time, when coding “design is in the code” … November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Software Design: Our View in 121 and 122 Application design Interaction design Architecture design Implementation design Maintenance design All five types of design take place throughout the software life cycle November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Software Design: Our View in 121 and 122 Application design Interaction design Architecture design Implementation design Maintenance design All five types of design have their own design methods and representations November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Software Design: Our View in 121 and 122 Application design Interaction design Architecture design Implementation design Maintenance design Users Alternative Designs Product Experiences Designers Stakeholders Final Design All five types of design involve the design cycle November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Software Design: Our View in 121 and 122 Application design Interaction design Architecture design Implementation design Maintenance design Users Alternative Designs Product Experiences Designers Stakeholders Final Design All five types of design closely interrelate and must often be addressed in parallel November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Focus of 121 Application design Interaction design Architecture design [Implementation design] Users Alternative Designs Product Experiences Designers Stakeholders Final Design November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Predicting The Product-Use-Experience Cycle Mental simulation Applying knowledge Creating approximations November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Creating Approximations November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Creating Approximations Many different approximations can be created… sketches models mock-ups formal models internal prototypes computer simulations walkthroughs videos …but keep in mind they need to be tested in some form! running the simulation cognitive walkthroughs focus groups user trials November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Which Approximation Do You Want to Use? What questions are you trying to answer about a potential design? Is the approximation “high fidelity”? does it need to be? How easily can you create and reflect on the design? How easily can others interpret and provide feedback on the design? Maybe make a quick allusion to the reflective conversation / reflection in action on that last one November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Concerns A typical design problem consists of many different concerns that must all be addressed by a design solution Some of these concerns are more important and/or have more impact than others Sometimes, the importance and/or impact of a concern is not obvious (the devil is in the details) As a designer, you need to find the concerns that are most important and have most impact: the essence of the design problem November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design Problem – Where? Structure Context Communication User interface Persistence Algorithms Naming Interchange … Internal data structures Error handling Distribution Glue … November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design Problem – Where? Often, the essence is located in multiple places, related or unrelated internal data structures and persistence communication and protocols user interface, persistence, and internal data structure The essence usually constitutes a nucleus of concerns of high importance and high impact The essence needs to be detailed at an appropriate depth in one or more suitable approximations These approximations, in turn, each need to be specified in one or more appropriate languages November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Depth Some concerns need to be designed in much greater depth than others call control sequence of a cell phone versus the menu input mechanism of that same cell phone This depth relates to importance impact audience This depth requires a rationale As a designer, you need to work out each concern to the appropriate level of depth needed November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Depth Concern 1 Concern 2 Concern 3 Concern 4 Concern 5 Concern 6 … System “A” November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Depth Concern 11 Concern 12 Concern 13 Concern 14 Concern 15 Concern 16 … System “B” November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Depth Concern 21 Concern 22 Concern 23 Concern 24 Concern 25 Concern 26 … System “C” November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design – Where? Often, the essence is located in multiple places, related or unrelated internal data structures and persistence communication and protocols user interface, persistence, and internal data structure The essence usually constitutes a nucleus of concerns of high importance and high impact The essence needs to be detailed at an appropriate depth in one or more suitable approximations These approximations, in turn, each need to be specified in one or more appropriate languages November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Architecture description November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Architecture description or... November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Statecharts November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Statecharts or... November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages UML Design November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages UML Design or... November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Data Flow Diagrams November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Data Flow Diagrams or... November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Design Languages Design Data Flow Diagrams Etc., etc., etc. November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Design Languages: Our Approach Booch … Pi calculus UML Design Sketches Pseudo code Architecture description Text Any and all as needed Code Data Flow Diagrams Statecharts JSD November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Which Language Do You Want to Use? What questions are you trying to answer about a potential design? Is the approximation “high fidelity”? does it need to be? How easily can you create and reflect on the design? How easily can others interpret and provide feedback on the design? Maybe make a quick allusion to the reflective conversation / reflection in action on that last one November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design Problem – Where? Structure Context Communication User interface Persistence Algorithms Naming Interchange … Internal data structures Error handling Distribution Glue … November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Structure Why may the essence be found here? what if the design concerns a distributed application? what if the design concerns a highly scalable application? what if the design concerns a business application with highly changeable business rules? … What may be a good design notation? software architecture diagrams UML2 component diagrams simple drawings November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Structure – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Structure – Examples Not as formal, or even as informative, but helps people understand whats going on November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Context Why may the essence be found here? what if the design concerns an integrated system constituting many existing systems? what if the design concerns an application that will automate a significant portion of an organization’s business? what if the design concerns an application spanning multiple businesses? … What may be a good design notation? context diagrams informal drawings of external entities November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Context – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Context – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Communication Why may the essence be found here? what if the design concerns a sensor network consisting of many different sensors emitting much different data? what if the design concerns network quality of service? what if the design concerns a broadcasting satellite? what if the design concerns a document-centric system? … What may be a good design notation? labeled transition systems UML sequence diagrams data flow diagrams protocols November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Communication – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Communication – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek User Interface Why may the essence be found here? what if the design concerns real-time visualization? what if the design concerns multiple kinds of displays? what if the design concerns a drawing program? what if the design concerns a new interaction mechanism? what if the design concerns an e-commerce system? … What may be a good design notation? sketches mock-ups interaction scenarios prototypes November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

User Interface – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

User Interface – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Persistence Why may the essence be found here? what if the design concerns a database application? what if the design concerns a system that must be fail safe? what if the design concerns an application that must span multiple sessions? … What may be a good design notation? entity-relationship diagram file format definition UML class diagram database schema November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Persistence – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Persistence – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Algorithms Why may the essence be found here? what if the design concerns a search engine? what if the design concerns encryption? what if the design concerns a scheduling tool? what if the design concerns a file converter? … What may be a good design notation? pseudo code flow chart Petri net November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Algorithms – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Algorithms – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Naming Why may the essence be found here? what if the design concerns a distributed system? what if the design concerns replicated data? what if the design concerns a complex set of interrelated data items? … What may be a good design notation? examples and counterexamples regular expressions November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Naming – Examples http://www.clothes.com/mens/shirts/formal.html http: protocol // separators www.clothes.com/ domain name mens/ subdirectory name shirts/ subdirectory name formal.html document name (Web page) November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Naming – Examples D:/eclipse/edu/uci/isr/palantir/core/PalantirPlugin:1.2::.80c318ce.109c2515402.f96511d31371ce2.0::null artifactID = filename:VID::wsID::parentID parentID = artifactID | null VID = [0-9.]* wsID = [a-b0-9.]* filename = <<continue with regular expression for pathnames>> November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

© 2009 University of California, Irvine – André van der Hoek Interchange Why may the essence be found here? what if the design concerns a manufacturers supply chain management system? what if the design concerns a credit report system? what if the design concerns an airline booking system? … What may be a good design notation? ontology data declarations application programmer interface November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Interchange – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Interchange – Examples November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design Solution – Where? Structure Context Communication User interface Persistence Algorithms Naming Interchange … Internal data structures Error handling Distribution Glue … November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Which Language Do You Want to Use? What questions are you trying to answer about a potential design? Is the approximation “high fidelity”? does it need to be? How easily can you create and reflect on the design? How easily can others interpret and provide feedback on the design? Maybe make a quick allusion to the reflective conversation / reflection in action on that last one November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Design Languages: Our Approach Booch … Pi calculus UML Design Sketches Pseudo code Architecture description Text Any and all as needed Code Data Flow Diagrams Statecharts JSD November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

The Essence of a Design Problem – Where? Often, the essence is located in multiple places, related or unrelated internal data structures and persistence communication and protocols user interface, persistence, and internal data structure The essence usually constitutes a nucleus of concerns of high importance and high impact The essence needs to be detailed at an appropriate depth in one or more suitable approximations These approximations, in turn, each need to be specified in one or more appropriate languages November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Design Studio I Continued What are some of the essential concerns in Professor E’s design problem? How to represent traffic? Map creation (user input)? How to visualize feedback to the students so it is educationally useful? How to specify the details of traffic lights? How to specify how an intersection works? [THIS ONE IS MANDATORY] Including sensors How to model the map? How to handle traffic behavior? The idea that we filter them here. November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Design Studio I Continued Create 2 preliminary design documents Pick three essential concerns, and produce three partial design solutions for each of the three concerns, independent of the other concerns. For each concern, spend 2-3 pages… …providing a summary of the design issues related to that concern …explaining each of your 3 partial design solutions, including a brief analysis of their strengths and weaknesses Separately, produce a 2-3 page document that takes a more holistic view of your design: which of the partial designs do you think are best, how do they align, and how might they be integrated into one or more overall, high-level designs November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek

Design Studio I Continued Choose your approximations (yes, they are expected) carefully what do they tell you what do they tell others (especially, since other teams will be asked to provide feedback) Bring five copies of the document pertaining to the concerns Bring one copy of the holistic document Due Tuesday, at the beginning of class November 16, 2018 – 19:57:06 © 2009 University of California, Irvine – André van der Hoek