1. If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT

2. Agenda  Prefabricated Screens– “Templates”  User Centered Design – “Screen”  Incremental Improvement – “Modular Design”

3. Template What is a Template? Something that automates standard screen production Why use a Template? Consistently standardize quality low cost screens Why create a Template? Existing templates don’t produce approximately correct screens CMS PortalEIDIM Innovation Center Standards Unique Gold Buttons Expanding Elements Header Breadcrumb Blank Content Region Footer Standards Unique Gold Buttons Expanding Elements Header Footer Floating Elements Portlet Content Region – Blue Gradient Round Buttons Standards Unique Gold Buttons “Mega Menu” Expanding Elements Unique Header Unique Footer Portlet Content Region – No Gradient Collapsing Elements Three CICDIM Templates Repeatable Best Practices

4. Four Design Dimensions SCREEN Four typical complaints STYLE: “This looks odd” DATA: “This isn’t correct” LOGIC: “That doesn’t make sense” BEHAVIOR: “That is surprising” Computer Human Interaction User Centered Design

5. Components Two type of components Native Components (designed in simulation tool) External Components (externally developed, with interface to simulation tool) Header Components Application Content Input Field Button Footer Components Modular Screen Design Simplify, reusable, specifications

6. In conclusion Template Screen Components Continuous Incremental Improvement of Templates, Pages, and Components

7. BONEYARD

8. Difference between components? XML JavaScript CSS HTML Resource Libraries External Web Components Internal Prototyping Widgets Style Logic Data Behavior Rapidly built component Simulated Component Precisely developed component, reused in simulation External Component

9. How would iRise replicate a template? TWO STEP PROCESS 1. Drag: Desired Template 2. Drop: Into Desired Workflow All data exchange need a good story

10. How would iRise improve a Page? TWO STEP PROCESS 1. Drag: Desired Component 2. Drop: Into Desired Page All data exchange need a good story

11. Screens Replicated from Templates OUT OF THE BOX  Automatic Standards  Styles  Behaviors  Dimensions  Data  Approximately Correct  Standard Header  Standard Footer  Reusable Components REUSABLE COMPONENTS  Portal Components  EIDIM Components  IC Components  Components  Custom CICDIM Components Templates produce new pages with approximately correct components

12. Two types of Reusable Components BUILT IN SIMULATION 1. Style: Visual Specifications 2. Data: Persona Information 3. Logic: Business Rules 4. Behavior: Screen Interaction INTEGRATED INTO SIMULATION 1.XML 2.HTML 3.JavaScript 4.CSS 5.Resources/Frameworks (jQuery, Bootstrap, D3, Fusion, SVG) All data exchange need a good story

13. How would iRise reuse JavaScript Libraries like jQuery, Bootstrap, D3, Google, Fusion, Sencha, …? TWO STEP PROCESS 1. Drag: Desired iBloc 2. Drop: Into Desired Page All data exchange need a good story

14. How would iRise integrate code? TWO STEP PROCESS 1. Code: ◦JavaScript ◦HTML 2. Compile: Into iBloc Directory All data exchange need a good story XML JavaScript CSS HTML Resource Libraries