Download - If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT
![Page 1: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/1.jpg)
If I wanted to Simulate the Next Screen…TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT
![Page 2: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/2.jpg)
Agenda Prefabricated Screens– “Templates” User Centered Design – “Screen” Incremental Improvement – “Modular Design”
![Page 3: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/3.jpg)
TemplateWhat 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 Portal EIDIM Innovation Center
StandardsUnique Gold ButtonsExpanding Elements• Header• Breadcrumb• Blank Content
Region• Footer
StandardsUnique Gold ButtonsExpanding Elements• Header• FooterFloating Elements• Portlet Content
Region – Blue Gradient
• Round Buttons
StandardsUnique Gold Buttons • “Mega Menu”Expanding Elements• Unique Header• Unique Footer• Portlet Content
Region – No Gradient
Collapsing Elements
Three CICDIM Templates
Repeatable Best Practices
![Page 4: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/4.jpg)
Four Design Dimensions
SCREENFour typical complaints
• STYLE: “This looks odd”
• DATA: “This isn’t correct”
• LOGIC: “That doesn’t make sense”
• BEHAVIOR: “That is surprising”ComputerHuman
Interaction
User Centered Design
![Page 5: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/5.jpg)
ComponentsTwo 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
![Page 6: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/6.jpg)
In conclusion
Template ScreenComponents
Continuous Incremental Improvement of Templates, Pages, and Components
![Page 7: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/7.jpg)
BONEYARD
![Page 8: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/8.jpg)
Difference between components?
XML
JavaScript CSSHTML
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
![Page 9: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/9.jpg)
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
1) DRAG2) DROP
![Page 10: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/10.jpg)
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
1) DRAG2) DROP
![Page 11: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/11.jpg)
Screens Replicated from TemplatesOUT 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
![Page 12: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/12.jpg)
Two types of Reusable ComponentsBUILT 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
![Page 13: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/13.jpg)
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
1) DRAG2) DROP
![Page 14: If I wanted to Simulate the Next Screen… TEMPLATES, COMPONENTS, AND INCREMENTAL IMPROVEMENT](https://reader036.vdocuments.mx/reader036/viewer/2022062423/5697bf7d1a28abf838c84820/html5/thumbnails/14.jpg)
How would iRise integrate code?TWO STEP PROCESS
1. Code: ◦ JavaScript◦ HTML
2. Compile: Into iBloc Directory
All data exchange need a good story
1) CODE
2) COMPILE
XML
JavaScript CSSHTML
Resource Libraries