7/27/2019 KRAD Sense Making

1/20

KRAD - UIMMaking Sense 09.29.11Kevin Makice, Kuali Student (IU)

William Washington, Kuali Student (UW)

7/27/2019 KRAD Sense Making

2/20

Purpose

Give an overview of KRAD architecture to

User Experience Designers (UX)

Business Analysts (BA) Developers (Devs)

This document is not a comprehensive description of KRAD

architecture or technical capabilities, but instead representsgeneral concepts and usage.

7/27/2019 KRAD Sense Making

3/20

UIM

KRAD

Under

the Hood

parts of KRAD that

are automatic or not

touched for typical

development

Configuration

settings and applied classes that change the behavior,

appearance, and content of a component.

Data

the hooks and

structures in thedatabase thatconnect to the

KRAD code

Guide

design guides which include

design patterns, persona

informs

Components

coding objects that are standalone used by

developers to build applications using Rice

Design

ComponentsUI objectsnot limited to

KRAD componentsthat

are used by designers to

user interfaces

Architecture

7/27/2019 KRAD Sense Making

4/20

UIM

KRAD

Components

Containers

modify

,

define

Fields

Under the Hood

HTML Elements

KRAD

Keyed Messages

ConfigurationConstraints

Layouts

Advanced

Widgets

bind to,

populate

Data

Default Definitions

Controls

7/27/2019 KRAD Sense Making

5/20

UIM

KRAD

Components

Data Fields

KRAD Data

Input Field* (Attribute Field) binds data to [web

object]

Control gathers input from end-users

Action Field sends information to the servers

bind to,

populate

Data

Data objects

Data Attributes (rows (a.k.a.

tuples), columns)

Data Collections

Tree (structure) * Input Field name change (from Attribute Field) is desired, butfurther discussion depends on the impact on the code.

7/27/2019 KRAD Sense Making

6/20

UIM

KRAD

Under the Hood

HTML Elements

KRAD Under the Hood

Raw HTML markup

Keyed MessagesMessages that are linked to specific inputfields (attribute

fields) or containers via a unique field key. These messages

map to the ErrorField for fields or containers and

communicate validation errors automatically.

Default (Bean) Definitions

ControlsGather input from end-users

7/27/2019 KRAD Sense Making

7/20

UIM

KRAD

Configuration

WidgetsEncapsulated chunks of code and functionality that configure fields and containers

KRAD Configuration / Widgets

Field Widgets

Inquiry

Direct Inquiry

Quick Finder

Suggest

Date Picker

Container Widgets

Disclosure* (Accordion)

Tabs Tab Group only

Table Tools Table Layout only

Help

Growls View only

Breadcrumbs View only

Layouts AdvancedConstraints

* Disclosure name change (from Accordion) is desired, but

further discussion depends on the impact on the code.

7/27/2019 KRAD Sense Making

8/20

UIM

KRAD

Configuration

LayoutsDetermines how the components within a container are arranged

KRAD Configuration / Layouts

Grid

Box (Vertical and Horizontal)

Stacked for collections only

Table for collections only, includes optional Table Tools widget Lightbox currently lightboxes only support lookups

Widgets AdvancedConstraints

7/27/2019 KRAD Sense Making

9/20

UIM

KRAD

Configuration

ConstraintsConfigured requirements for entered or pre-existing information that dictate state and behavior of a component

KRAD Configuration / Constraints

Widgets AdvancedLayouts

State Value

Required

Prerequisite

Must Occurs

Progressive Disclosure of Fields

Progressive Disclosure of Groups

Conditional Refresh

Java Class Pattern

Case

Min/Max length and value Pattern Matching:

Timestamp, Year, Month, Fixed Point, Floating Point,

Phone Number, Email Address, Date Configuration,

Zipcode, Alphanumeric, Alpha, Any Character,

Charset, Numeric

Valid Characters

7/27/2019 KRAD Sense Making

10/20

UIM

KRAD

Configuration

Advanced

KRAD Configuration / Advanced

Modifiers

Comparable Info

Compare Field Create

Component Convert

Label Field Separate

Core

Binding Info

Maintenance Active

Collection Filter

Method Invoker Config

Property Replacer

Other

History Entryprovides data to navigation

Ad Hoc Action RequestCodes Values Finder

Concrete Key Value

Widgets ConstraintsLayouts

7/27/2019 KRAD Sense Making

11/20

UIM

KRAD

Components

FieldsThe basic unit for building applications, encapsulating HTML, content and other data into a single configurable object

KRAD Component Fields

Data Fields Other Fields

Link

Image

iFrame

Blank

Generated

Generic

Input Field (Attribute Field)

binds data to a web object

Action Fieldsends information to theservers (Button)

Lookup Attribute

Field Group

Header

Message

Label

* The Input Field name change (from Attribute Field) is desired,

but further discussion depends on the impact on the code.

7/27/2019 KRAD Sense Making

12/20

UIM

KRAD

Components

Fields

Data Fields

KRAD Component Fields / Input Field

Under the Hood

Input Field (Attribute Field)Controlsgather input from

end-users

Radio Group

Checkbox

Checkbox

Group

Selection

Text Area

Text

Hidden

MultiValue

File

GroupKIM

control

UserKIM

control

Lookup

Widget

Inquiry/Direct Inquiry

Widget

On all fields

Only for Text controls

defined

for each

ErrorFieldOn all fields

A keyed message

Date Picker

Widget

SuggestOnly for Text controls

7/27/2019 KRAD Sense Making

13/20

UIM

KRAD

Components

ContainersA way to group componentsfields and other containers--into cohesive units

KRAD Component Containers

ViewHighest-level container, requiring at least one Page and

optionally a Navigation Group. Views can also have a

Breadcrumb widget, workflow, and data.

Groups

Container for fields and other containers, with special

containers embedded (Help widget, header, instruction

(summary), errors, and footer) and a layout manager

assigned to its contents Inquiry (view)

Maintenance (edit)

Lookup (search & select)

Transaction (just on the back end--creates

relationships; one-time)

Form (for custom views)

Document (for workflow?)

Page

Section

Collection Group

Tab Group* utilizes Tabs widget

Navigation Group*contains lists of pages, and

displays as Tabs or Menu

Link Group* expects a list of links as content

Tree Group* requires tree structure

*Doesnt use layout manager to configure content

7/27/2019 KRAD Sense Making

14/20

UIM

KRAD

Components

Containers

KRAD Component Containers / View

ViewBreadcrumb

Instruction (MessageField)

Error(ErrorFielda keyed message)

Header(HeaderField)

Help

Items:Fields, Containers

Must have at least one Page container and optional Navigation Group

Footer(property for the view, footer for all pages in the view)

Navigation

Group

Under the Hood

binds to,

populatesData

Configuration

Layouts

Grid Box (Vertical

and Horizontal)

Stacked forcollections only

Table forcollections only,

includes optional

Table Tools widget

Lightbox currently lightboxes

only support

lookups

Applied to

Applied to

7/27/2019 KRAD Sense Making

15/20

KRAD

UIM

Best Practices

Design Components

UIM

Patterns

Style GuideArtifacts

Combined

into

7/27/2019 KRAD Sense Making

16/20

KRAD

UIM

Design Components

InputThings that get information from people to pass to the system

UIM Design Components / Input

Buttons:Add Multiple, Close Dialog, Icons

Dropdown

Checkbox:

Checkbox List, Opt-in Checkbox

Radio Buttons

Slider:Range Slider, Simple Scrollbar

Text Field

Text Area

Watermark Text

Date Selector:Restrict Date Range, Date Range, Display Month & YearMenus, Icon Trigger, Localize Calendar, Display Multiple

Months

File Upload Tool

7/27/2019 KRAD Sense Making

17/20

KRAD

UIM

Design Components

UIM Design Components / Organization

OrganizationThings to do with the basic composition of a page, regardless of content

Field GroupingsWith Header, With Message, Validation

Nested GroupsWith Header, Collections

Navigation Panel:Tabs, Select View, Links

Lightbox:Required Acknowledgement, Confirmation Dialog, Workflow

Dialog, Suppress Lightbox Effect

Add Another Input

Page Layouts:Dashboard View, Browse Tree View, Compare View, Tab

View, Table View, Form, Search, Tiles

Page Footer

Page Header Page Titles Area

7/27/2019 KRAD Sense Making

18/20

KRAD

UIM

Design Components

Widgets (?)Holistic interactions that encapsulate many different components into one pattern

UIM Design Components / Widgets (?)

Breadcrumbs

Lookup:Scrollable Results, Multiple Values, Combobox, Categories,

Remote Datasource (With Caching, Custom Data and

Display, XML Data Parsed Once), Advanced Lookup,

Custom Lookup, Lookup From Results

Sortable Table

Table-Column Filtering

Additional Help

Accordion:Fill Space, Collapse Content, Customize Icons, Sortable, No

Auto-height

Progressbar:Animated

Is there a better name for Widget? If we use this moniker,

does it align with what KRAD is defining as a widget?

7/27/2019 KRAD Sense Making

19/20

KRAD

UIM

Design Patterns

UIM Design Patterns

Messaging:Success Messaging, Errors, Validation, Impermanent

Messaging, Persistent Message

Hub and Spoke Navigation

Landing Page

New Windows or Lightboxes

Show Hide:Hierarchical Tree, By Section, Accordion (Fill Space,

Collapse Content), Customize Icons, Sortable, No Auto-

height, Expand All

Responsive Disclosure

Responsive Enabling

Hierarchical List Builder

Manage Collaborators

Save:Save & Continue, Save Dialog

"Don't Show Me This Again

Search:Simple Search, Advanced Search, Custom Search

Search with Results:Browse Data, Faceted Search

Filtering:Filtering Search Results, Filtered Browsing, Column

Filtering,

Commenting

Wizard:

Enforced Order Wizard, Implied Order Wizard

7/27/2019 KRAD Sense Making

20/20

KRAD

UIM

Best Practices

UX Artifacts Style Guide

UIM Best Practices

Capitalization

Color Palette

Header and Text Styles

Icons

Instructions

Target Browser Size

Tone

Visual Design

Screenflow

Combined Screen and

Task Flow

Comprehensive

Layout

High-Fidelity

Wireframe

Low-Fidelity

Wireframe

Persona

Prototype

Scenario

Sitemap Taskflow

Usability Test Report

Use Case