if i wanted to simulate the next screen… templates, components, and incremental improvement
TRANSCRIPT
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”
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
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
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
In conclusion
Template ScreenComponents
Continuous Incremental Improvement of Templates, Pages, and Components
BONEYARD
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
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
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
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
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
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
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