if i wanted to simulate the next screen… templates, components, and incremental improvement

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