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

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

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

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

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

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

BONEYARD

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

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

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

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

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

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

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