Do Multi-Fidelity Levels Improve Mockup- Driven

Do Multi-Fidelity Levels improve MockupDriven Development?René Milzarek, 19.12.2016, Garching-ForschungszentrumSoftware Engineering for Business Information Systems (sebis)Department of InformaticsTechnische Universität München, Germanywwwmatthes.in.tum.de

Overview1.Introduction2.Problem Identification§Requirements Elicitation§Research Gap Identification§Research Questions3.Solution Design§Definition of Term§Prototyping Process§Implementation4.Evaluation5.Outlook160606 Matthes sebis sebis2

IntroductionCooperation PartnerSiemens GS IT HR(Information Technology – Human Ressources)Human Resources and Supply ChainManagement services and solutions for alldivisions worldwide.160711 Matthes sebisHeadquarterSiemens AGGlobal Services – Information TechnologyOtto-Hahn-Ring 681739 München sebis3

Overview1.Introduction2.Problem Identification§Requirements Elicitation§Research Gap Identification§Research Questions3.Solution Design§Definition of Term§Prototyping Process§Implementation4.Evaluation5.Outlook160606 Matthes sebis sebis4

Problem IdentificationRequirements Elicitation – Core IdeaCore IdeaSystematic reuse of user interface prototypesfor the generation or scaffolding of userinterface code.à Non-disposable UI prototypes160606 Matthes sebis sebis5

Problem IdentificationRequirements Elicitation - Informal InterviewInformal InterviewsConducted with the head of the departmentand the head of develoment (N 2).1.2.3.4.5.6.7.160606 Matthes sebisCollaborationCustom component catalogExport UI codeIntegration with ALM solutionOn-premise solutionTest on target platformPlatform support of the prototypes sebis6

Problem IdentificationRequirements Elicitation - Semi-structured InterviewSemi-structured InterviewsRole within the companyConducted with N 11 experts of differentprofessional and organisational backgrounds.§§§§§§§Majority of interviewees worked for a largecompany (72.7%).6 different roles were covered.Mean of professional experience in yearswas 11.82 years (σ 7.93).81.8% have used UCD design methods intheir professional lifes.Remaining 18.2% received high-fidelitymockups as a specification document.Application focused on the requirementselicitation phase.81.8% (9 persons) worked with highfidelity mockups exclusively.160606 Matthes sebis9% (1)28% (3)9% (1)9% (1)18% (2)28% (3)ManagementOperations ManagerDemand ManagerRequirements EngineerSoftware DeveloperTeam Lead sebis7

Problem IdentificationRequirements Elicitation – Semi-structured InterviewSemi-structured Interviews§§9 persons (81.8%) did not have anestablished UCD process.81.8% (9 persons) rated the applicationpredominatly positive.Application of UCD methods18% (2)Negative aspects:§§§§Create wrong expectation of a productionready user interfaceDisposable character of UCD artefactsCollaboration and communicationbetween stakeholders is challengingLack of a standard UI component catalog82% (9)Yes160606 Matthes sebisNo sebis8

Problem StatementResearch Gap gm ? ? JustinmindiRiseStudio Custom Component CatalogExport CodeMost mature Enterprise SolutionsCollaboration(deliver to endusers, collect feedback)Integration with ALM(Link to requirements, single source forreporting)On-Premise Solution(Host collaboration platform internally)Test on the Target PlatformPlatform-SupportAcademic Research Gap(create mockups for mobile and desktopapplication)Multi-Fidelity Mockups(support transitions between fidelitylevels) applies, partially applies, does not apply160606 Matthes sebis sebis9

Problem IdentificationResearch QuestionsRQ1What is the definition of Mockup-Driven Development and the different fidelitylevels?RQ2What are the requirements for a Multi-Fidelity Mockup-Driven Developmentsystem and how could a implementation look like?RQ3How to evaluate if a Multi-Fidelity Mockup-Driven Development system improvesthe software development process?160606 Matthes sebis sebis10

Overview1.Introduction2.Problem Identification§Requirements Elicitation§Research Gap Identification§Research Questions3.Solution Design§Definition of Term§Prototype-Driven Development Process§Implementation4.Evaluation5.Outlook160606 Matthes sebis sebis11

Solution DesignDefinition of Terms – Fidelity-LevelDefinition„Degree of exactness with which something iscopied or reproduced“, Oxford Dictionary§Performed literature review to identifyfidelity-levels and their artefacts§§§Low-Fidelity Prototypes(Sketch & Wireframe)High-Fidelity Prototypes(Mockup & Software Prototype)Analysed the number of style properties ofa button across different fidelity levels(Sketch: 7 à Mockup: 37 à Product: 71)Low-Fidelity delity iveNavigationInteractivitySoftware Prototype160606 Matthes sebisMockup sebis12

Solution DesignDefinition of Terms – Multi-FidelityPrototypesLow-Fidelity PrototypeHigh-Fidelity PrototypeProductSketch160606 Matthes sebisWireframeMockupSoftwarePrototype sebis13

Solution DesignDefinition of Terms – Multi-FidelityPrototypesLow-Fidelity PrototypeHigh-Fidelity PrototypeProductSketch160606 Matthes sebisWireframeMockupSoftwarePrototype sebis14

Solution DesignDefinition of Terms – Mockup-Driven DevelopmentRelated WorkMockup-Driven Development: Providingagile support for Model-Driven WebEngineering, Rivero 2014§Coined the term: MockupDD (MockupDriven Development)§Create User Stories and Mockupsà Mapping through a SUI (Structural UserInterface) Model§Use the SUI Model to generate Code andMDWE Modelsà Focusing on the transition betweenhigh-fidelity mockup and the productà No benefits from a multi-fidelityapproach160606 Matthes sebis sebis15

Solution DesignPrototype-Driven Development ProcessCreate and sEngineerUserUI ComponentCatalogIncludePrototypingToolSpecify newComponentSoftwareEngineer160606 Matthes EngineerUI Code sebis16

Solution DesignImplementationComponent CatalogPrototype for the creation and maintenance ofUI components§Utilizing the „backend-as-a-service“ Parsein a Docker Compose setup§Definition of custom view model based onUIML§Development of an AngularJS webapplication160606 Matthes sebis sebis17

Solution DesignImplementation - Demo160606 Matthes sebis sebis18

Overview1.Introduction2.Problem Identification§Requirements Elicitation§Research Gap Identification§Research Questions3.Solution Design§Definition of Term§Prototyping Process§Implementation4.Evaluation5.Outlook160606 Matthes sebis sebis19

Solution DesignDefinition of Terms – Mockup-Driven DevelopmentUsability Walkthrough§Custom and System Usability Scale (SUS)questionnaire conducted (N 8)§ 5 point Likert-scale§75% (6 persons, σ 1.07) strongly agreedthat the collaboration and reuse of existingcomponents is improved4 persons (50%, σ 0.76) agreed that theprocess could accelerate the softwaredevelopment§§SUS score of 67.19 (average of 68 inliterature)à No clear benefits from a multi-fidelityapproachà Process enhances collaboration andenables systematic reuse160606 Matthes sebis sebis20

Overview1.Introduction2.Problem Identification§Requirements Elicitation§Research Gap Identification§Research Questions3.Solution Design§Definition of Term§Prototyping Process§Implementation4.Evaluation5.Outlook160606 Matthes sebis sebis21

OutlookFuture WorkCreate and ImproveMockupsSource CodeRepositoyCustomerImportUserUI ComponentCatalogIncludePrototypingToolSpecify newComponentUI Code160606 Matthes sebis sebis22

Thank you! Questions?René MilzarekB.Sc.Technische Universität MünchenDepartment of InformaticsChair of Software Engineering forBusiness Information SystemsBoltzmannstraße 385748 Garching bei MünchenTelFax 49.89.289. n.tum.de

Backup160606 Matthes sebis sebis24

Solution DesignDefinition of Terms – Fidelity xpensiveexpensivemostexpensiveLow-Fidelity Medium-Fidelity High-Fidelity Navigation Interactive Elements Responsive Designmultiple staticscreensmultiplestatic screenssingleinteractivescreenCSS / OtherTechnologyCSS / OtherTechnology oftwarePrototypeStructurePlaceholders applies, optionally applies, not applied160711 Matthes sebis sebis25

Solution DesignDefinition of Terms – Fidelity oductSketchWireframeMockupSoftwarePrototypeLabel Text Images Colorsblack & whiteblack & whitecoloredcoloredcoloredIcons Typography applies, optionally applies, not applied160711 Matthes sebis sebis26

Solution DesignLow FidelityMedium FidelityHigh on of Terms – Multi-Fidelity160606 Matthes sebis„Paper and Pencil“ or „Whiteboard and Post-It“approach.Focus:No transitionspossibleBasic functionality & UI interactionSkeletal illustration of the UI, which usually has nostyling, colors or graphics.Focus:Content of the UIAlmost undistinguishable from the final UI, couldoften be executed on the final platform.Focus:Design, Fully executable UI prototypeCode of the final UI, which often relies on frontendframeworks (e.g. Bootstrap, Foundation)è Automatically generate! sebis27

Solution DesignDefinition of Terms – Multi-FidelityMulti-fidelity Prototyping of User Interfaces§ Identified the same research gap ofmissing support for fidelity transitions§ Focus on the transition from “nofi” (hand drawn) to “lo-fi”à Gesture recognizer§ Low shape detection speedà Problematic when used forcomplex UIs§ Static templating: “custom elementcould be drawn in lo-fi and apredefined widget could be added inme-fi or hi-fi”Source: Coyette, A., Kieffer, S., & Vanderdonckt, J. (2007). Multi-fidelityprototyping of user interfaces. Human-Computer Interaction –INTERACT, 4662, 150–164. doi:10.1007/978-3-540-74796-3 16160606 Matthes sebis sebis28

Solution DesignDefinition of Terms – Mockup-Driven DevelopmentMockup Driven Web DevelopmentMockup-Driven Development: Providingagile support for Model-Driven WebEngineering§ Definition of Cascading Tree Sheets(CTS)à Describe relationship between contentand structure§ Coined the term: MockupDD (MockupDriven Development)§ CTS as input for the generation of a webapplication§ Create User Stories and Mockupsà Mapping through a SUI (StructuralUser Interface) Model§ Mockup as “requirement elicitation helper”§ Use the SUI Model to generate Code andMDWE ModelsBenson, E. (2013). Mockup Driven Web Development. Proceedings ofthe 22nd International Conference on World Wide Web Companion,337–341.160711 Matthes sebisSource: Rivero, J. M., Grigera, J., Rossi, G., Robles Luna, E., Montero,F., & Gaedke, M. (2014). Mockup-Driven Development: Providing agilesupport for Model-Driven Web Engineering. Information and SoftwareTechnology, 56(6), 670–687. doi:10.1016/j.infsof.2014.01.011 sebis29

Solution DesignImplementation – UIML160606 Matthes sebis sebis30

Solution DesignImplementation – View Model160606 Matthes sebis sebis31

§ High-Fidelity Prototypes (Mockup & Software Prototype) § Analysed the number of style properties of a button across different fidelity levels (Sketch: 7 à Mockup: 37 à Product: 71) Fidelity Speed Cost Navigation Interactivity Responsivene Style Information Low-Fidelity Protot