Types of Widgets.
Thingworx UI Build Process is derived from 5 Planes of UX Design. Each plane describes an area of design and development of Usercentric application.
Widely know book in UX Design Community By Jessie James.
Strategy – we Define User needs and specific use cases.
Scope – we Define Application specific functional requirement based on your user and use case.
Structure – we define how user navigates application and browse the individual webpages.
Skeleton – Where UI elements like button and text are placed in UI.
Surface – Where you complete sensory design of typography and sensory scheme.
Why Modeling?
To avoid building a single application that does everything, it is best to think of applications as role-based, where the features are focused on a single role.
Experience – Outcome is design document.
Design Phase.
3 Phases of application design.
High-level –
Come up with User and its concise feature list.
Central User Journey.
We will begin with defining our high-level design by creating the feature list and central user journey. The feature list identifies the key capabilities and functions of our UI. It aligns with the IoT use cases defined in the Experience documentation. The central user journey describes how the user will navigate the application, thus defining the number of pages required for it.
Mid-Level – Navigation and Structure
Structure and Skeleton overlapping.
The mid-level design identifies pages and individual mashups for each segment in the central user journey, and selects a general layout of each mashup that fits the information architecture.
Low level Design
We will add more details to this wireframe.
Skeleton and surface.
Principles of UI Design.
Convention – Using general structure/design/layouts that other applications use pertaining to your application’s industry.
Consistency – Layout, interactions and styling same for all application pages.
Simplicity – Show most needed features, exclude any extra features.
Proximity Alignment – coloring, font size.
Thingworx UI Build Process Framework – Similar to industry methods to designing and creating user centered applications.
Style definition is like CSS.
You should UI/Graphic designers for some standard Design and colors.
Design – Define core style definitions for basic layouts like sidebars headers etc.
Format – Change/Update/Add existing styles.
Working with Static and Responsive Areas
Power System Application: Development – Single Page Application with Multiple Mashups
Duplicating mashups.
Development – Introducing Dynamic Data
Static entity provides data for that particular entity whereas dynamic entity requires an entity name at runtime, this entity name tells the service who to retrieve data for.
Dynamic entity types are typically Thingshapes or Thingtemplates in which selections can be changed at runtime.