krad sense making
Post on 02-Apr-2018
227 Views
Preview:
TRANSCRIPT
-
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
top related