Infor Ming.le Homepage Widgets€¦ · Infor Ming.le Homepage Widgets DRAFT V1. 4 / 2016. Infor...

Infor Ming.le Homepage WidgetsDRAFT V1. 4 / 2016

Infor SoHo Xi Widget Guidelines2016

2

2 WIDGET BASICS

GENERAL USAGE

Infor Ming.le Homepages

A key feature of Infor CloudSuite is the ability to create, curate, and use collections of high level views into a user’s work. These collections are pre-sented as “homepages”.

Infor Ming.le™ provides the framework in which homepages can be created, edited, shared, assigned, and published. The initial use of widgets is within this framework.

The Infor Ming.le homepages are responsive, and therefore the widgets need to be built as responsive, so they can reformat automatically along with the homepage framework as the viewport changes size.


3

3 WIDGET BASICS

What makes a great widget?

• Being able to surface the needed information in an easliy digestable manner.• Be able to efficiantly answer what do the end-users need to do?• Displaying high level insights along with the informational values.

Widgets are small functional units that serve a very limited purpose, such as:

• Displaying basic information in lists• Affording navigation deeper into the CloudSuite• Displaying data visualization• Providing high-level messaging• Affording one-click actions and very simple inputs

Currently, widgets are not intended to be used for more complex interactions or business functionality. Complexity of functionality may be increased in the future if widgets are used in deeper levels of the CloudSuite.

Widgets can be created by any Infor product development team, and registered with Infor Ming.le into a central widget catalog.

GENERAL USAGE

Infor Ming.le widgets


4

4 WIDGET BASICS

Widgets are containers for a wide variety of information that is organized in ways that suit the content. However, there are some guidelines around hierachy and organization.

Actions: In general, actions that apply to the content are dis-played on the right of said content. For example, if a widget contains a list, the actions that affect a single line item (e.g. edit, delete) are displayed in-line, and to the right of that line item.

Status & Alerts: With some exceptions, status and alerts of line items are displayed above the line item. See the style guidelines for alert icons and typography. Some statuses can be displayed in-line to the right of the line item, using col-or-coded badges (e.g. “My Projects” widget).

Navigation: Some widgets containing a large dense amount of information require navigation within the widget. If this is the case, it is displayed and fixed on the bottom of the card. Navigation may include buttons or pagination. In some cases, content may be expanded to show more. The affordance for expanding a line is displayed on the right, in line with the title.

Note that expandable lines and lines that show the status icon on the right, are not usually used in the same widget.

OVERVIEW

Content hierarchy

Widget title

Line item titleSecondary information

Status/alert Status/alert

Line item titleSecondary information

Status/alert

Navigation area

CONTEXT HEADER TEXT


5

5 WIDGET BASICS

OVERVIEW

widget hierarchy

TITLE AREA

CONTENT AREA

Packaging Queue

2-GTP Left hand bonding bracketShip to: WH-045 Watsonville, CA

Delfin 5mm HeatsinkShip to: WH-045 Watsonville, CA

5.0mm Copper wire bundle, 100mShip to: WH-045 Watsonville, CA

3.9MHz wave balancing resistorShip to: WH-045 Watsonville, CA

Qty21

Qty14

Qty51

Qty63

32 ItemsGROUP ACTION AREA

1. A title area. This area contains the name of the widget - what is does and what it contains, in a concise descriptive title. It also contains the “More” (ellipsis) menu icon which contains any actions that apply to the widget as a whole (e.g. Delete, Save, etc.). This icon always appears in the upper right corner of the title area. It is the only icon that is displayed at this level.

2. Group action area. This area is reserved for any action and messaging that apply to the content in the widget be-low, such as filter or sort. The area may contain text to de-scribe the content within the widget (e.g. Number of filtered results, current view, etc.) Content header text is not always needed (e.g. if no filters are applied). Actions in this area always appear on the right, the header on the left.

Exception: this area may also be used for a widget-level search. In this case, the search field would use the whole area and follow standard Soho component styles for search.

3. Content area. This area is used for the primary content of the widget. Further guidelines on content area hierarchy and action will be outlined in the next section.


6

6 WIDGET BASICS

DESIGN FUNDAMENTALS

Container SizesWidgets should be constructed with responsive web design principles so they can adapt to the size of the container.

In the Infor Ming.le homepages, the size of widget container is fixed. Here, the base size for a widget is 320px wide by 370px tall, including the 50px header. In the homepage framework, the widget header is distinct from the widget content.

3 x 1 Widget Container

CONTENT AREA

HEADER AREA

1000px

320p

x50

px

4 x 1 Widget Container

CONTENT AREA

HEADER AREA

1340px

320p

x50

px

1 x 1 Widget Container 2 x 1 Widget Container

CONTENT AREA

HEADER AREA

320px

320p

x50

px

CONTENT AREA

HEADER AREA

660px


7

7 WIDGET BASICS

DESIGN FUNDAMENTALS

Container SizesWithin the homepages, widgets may be resized vertically as well as horizon-tally. This is generally a user-defined display rule. There the height is twice the base height plus 20px for padding between widgets.

Again, the container is managed by the homepage framework. The widget may be defined to allow vertical resizing or not.

The grid is 4 columns wide and can be extended down the page as far as needed to support the Widgets on the page.

1 x 2 Widget Container 2 x 2 Widget Container

CONTENT AREA

HEADER AREA

320px

660p

x50

px

CONTENT AREA

HEADER AREA

660px20


8

8 WIDGET BASICS

1x2

1x2

HEADER

HEADER

3x1

3x1

3x1

HEADER AREA

HEADER AREA

HEADER AREA

4x2

HEADER AREA

1x1

HEADER AREA

1x1

HEADER AREA

1x1

HEADER AREA

1x1

HEADER AREA

2x1

HEADER AREA

1x2

HEADER

3x1

HEADER AREA

1x1

HEADER AREA

1x1

HEADER AREA

1x1

HEADER AREA

2x1

HEADER AREA

DESIGN FUNDAMENTALS

Container Sizes on Homepages Examples

1x2

HEADER


9

9 WIDGET BASICS

DESIGN FUNDAMENTALS

Widget CompositionWidgets are composed of controls that provide quick access to information or functionality. For homepages, widgets will be composed inside a card control. All components should align to a 5px square base grid. With few exceptions, all spacing should be in units of 10px.

Refer to these guidelines.

SPECS & INFO

STYLINGBest Practices


11

11 STYLING

STYLING

Keylines & MetricsAll components should align to a 5px square base grid. With few exceptions, all spacing should be in units of 10px. *List item height is flexible to content.

MARGINS & PADDING

Lists

Layout

Object list with profile/avatar and two-line text

Keylines and Horizontal Margin

Inner horizontal margin: 20px

Vertical Margins and Padding

Inner vertical margin: 10px from avatar 20px from line textPadding between lines: 10px

My Team

Angela Baker

Donna Horrocks

Sandra Peterson

Shadi Rais

Luis Salazar

Senior Account Representative





My Team

Angela Baker

Donna Horrocks

Sandra Peterson

Shadi Rais

Luis Salazar






20

20

10

10

80

20

My Team

Angela Baker

Donna Horrocks

Sandra Peterson

Shadi Rais

Luis Salazar






The widgets reflect the patterns and components that underpin SoHo XI. These patterns and components provide a unified language and consistent look and feel when creating widgets within the Cloud Suite ecosystem.

STYLING

Design Principles


12

12 STYLING

STYLING

IconsAs in the SoHo Xi user interface in general, icons can be used to denote type, status, or available actions. Icon use should follow guidelines stated on soho.infor.com.

A library of SVG and markup-based icons are at soho.infor.com.

Contacts

ICONS WHEN / WHERE TO USE

FILTER

MORE This icon is standard in the widget header. It functions as an overflow for multiple actions. None of the actions have a higher priority than the others, so there is no default. This action affects the widget as a whole.

The icon should always positioned on the right topmost corner of the header.

Refer to Card styles.

SPECS

Contacts

245 Contacts

Andrew Abrams 512-456-1241

20

This action icon appears in a list under the header. This action makes filter actions available in a dropdown list or in an input dialog (modal). This action affects the content below it.

The icon should always positioned on the right top corner with title on the left side.

Use this solution when you have over X amount of values to filter within the widget.

20

Icons for ActionsIcons used for actions follow design guidelines for buttons. Where space al-lows, actions should be paired with text, especially if the icons are not univer-sally understood symbols for the associated action.

In most cases, actions should be oriented to the right side of the widget (THE GENERAL RULE IN SOHO XI IS NAVIGATION ON THE RIGHT, ACTIONS ON THE LEFT).

20


13

13 STYLING

ICONS WHEN / WHERE TO USE SPECS

SEARCH LIST

The search is the preferred choice when there is large amounts of data the user must filter through.

The icon should always positioned on the left under the header title

Refer to Lists.psd

DROPDOWN A dropdown list provides a discrete set of values for selection. Use this when it is not necessary for users to see all available options at a time. The list values are easily describable with a word or two. The dropdown can handle medium sized data sets but should not be overused for larg-er data sets.

The icon should always positioned on the right topmost corner under the header.

20

fluid container

Lists of Tasks

h:40px

Search for a taskh:40px 10SEARCH

EXPAND / COLLAPSE

The expandable area hides blocks of content underneath, saving widget real estate.

The icon should be positioned to the left of the content.


14

14 STYLING

DRAGThis icon is

The icon should be positioned

SWAPLISTUse this solution if users need a high

level of visibility into both selected and

non-selected options. The Swap List is

also designed based on a use case of a

large number of expected selections.

The icon should always positioned

My Team

Angela Baker

Donna Horrocks



Lists of Tasks

REMOVE1 SELECTED

Allows for multiple selections.

Triggers the contextual action bar.

NOT SELECTED


15

15 STYLING


16

16 STYLING

STYLING

IconsIcons for Object Type IdentificationIn some cases, it is useful to indicate certain types of records, for example: folders, documents, employees, groups, systems, etc.

My Documents

Kamminga Project

Q4 NE Region Report.doc

Q1 Project Planning.xls

4 Subfolders, 356 Files

Last Updated: 09/12/2015

Last Updated: 09/12/2015


FILE TYPE ICONS These icons should be paired with the record name / ID and placed to the left.

Refer to Icon guidelines.

SPECS

20

10

20

Team Files

Q2-Planning.xlsx

NW-Region-Quarterly-Report...

Q1-PerformanceReport4.xls

PO12030130.pdf

Icon size: 18px x 18px


17

17 STYLING

STYLING

Empty State WidgetsYou can find all empty state widgets here.


18

18 STYLING

Icons for StatusIcons can be useful for indicating status when the meaning of the symbol is easily or universally understood. Warnings, alerts, and completed tasks are the most common icons to indicate status. Status icons are purely informational, so no actions should be available on status icons.

My Projects

8 Mile Resurfacing

Bishop Park

$125k of $300k

$249k of $250k

Refer to Alerts guidelines.


ALERT ICONS

Alert Icons should only be used for call-ing out high-priority, actionable items. Do not use icons simply to provide visual interest or decoration.

Placement varies.

SPECS

STYLING

Icons


19

19 STYLING

STYLING

Status Indicators

The primary method for indicating status should be to use text labels. Where icons are universally understood (error, alert, complete, etc), text labels are not required.

Notes on color:Color should never be used as a primary status indicator, but should be used as a secondary indication along with text and/or icon indications.

Avoid too many different color associations. Generally, the following conventions are a good guide to associations.

Critical Alert / Error : Alert Red

Standard Alert / Caution: Alert Orange

Weak Alert / On Hold: Alert Yellow

Positive Condition / Complete: Alert Green

Neutral / Inactive: Graphite/Slate 03

Normal / Active: Azure 06

TEXT, ICONS & COLOR

My Projects

8 Mile Resurfacing

Bishop Park

Ford Woods Swimming Pool

Maplewood St Resurfacing

Hilbert Middle School

City of DetroitOn Hold

Complete

Late

Active

Archived

City of Detroit

City of Dearborn

Garden City

Redford Charter Township

Accounts

Abbott Ltd.

Brandt Aeronautics

Camus Medical Supplies

Drafting Supply Warehouse

Elite Dynamics

837-203-2341

928-232-1414

823-124-1515

928-525-2345

934-242-3024

Refer to Badges guidelines.


20

20 STYLING

Charts can be used to for indicating status. Reference this guide for helpful data visualization guidance.

Target Achievement / Progress Bar ChartsStepped Progress Indicator

DATA VISUALIZATION

Requests

PO12010401

PO12012657

PO12012425

PO12019768

PO12018604

STYLING

Status Indicators

My Projects

7 of 7 Steps Completed


2 of 7 Steps Completed 5 Days Remaining


2 of 7 Steps Completed 2 Days Overdue


21

21 STYLING

STYLING

Navigation ElementsNavigating from a Widget

HyperlinksWidgets may use text hyperlinks as an affordance for navigation to specific locations within the CloudSuite. Standard SoHo Xi usage and style guidelines apply to hyperlinks in widgets.

TilesIn widgets that are composed of lists, the row in the list may be used to navigate to the page or detail view of the object referenced in the list. Each row in these types of lists is considered a “tile”. Tiles do not require an affordance to indicate that they are navigable.

The following lists do not use the full tile for navigation:• Lists with selectable rows/tiles (these use a contextual action bar

to apply available actions to those objects).• Lists with inline actions. Tiles with inline actions should use Hyper-

links as the affordance for navigation.• Display-only lists. These lists do not present a hover or pressed

state when the user interacts with the list.

2.5mm Copper Wire, 100ft

IT20003025

5.0mm Copper Wire, 100ft

IT20003050

ADD

ADD

Quick Links

Create a New PO

Create a New Supplier

Create a New Item

Analytics


22

22 STYLING

STYLING

Navigation ElementsNavigating within a widget

Expand / CollapseWidgets can hide information of secondary importance within expanding and collapsing content areas. A condensed state of a content area presents the most critical information, and an ex-panded state shows additional contextual information. The af-fordances for expand/collapse actions are the chevron and plus/minus icons, or “Show More / Show Less” text. Tree hierarchies generally use the plus/minus icons, while field sets and other content areas generally use chevrons or the “Show More / Show Less” text.

PaginationAnother method for navigation within a widget is pagination. Although this is not the preferred method for viewing long lists, it is a valid option for cases where scrolling is not possible or desir-able. It is, however, a useful method for presenting a limited num-ber of single items (charts, products, etc.).

1 2 3 4 5

PO20342145 $25,234.76Abbott, Ltd Planned Delivery: 09/15/2015

Nikon 24-85mm f/2.8-4.0D IF Auto Focus Zoom

$750.00

Numbered Pagination

View More / View Less text

Expand/Collapse chevron affordance

Circle Pagination

Age of Plant Ratio

5.70View More

Total Asset Turnover Ratio

6.00View Less

Total Operating RevenueTotal Fixed Assets

$300,000$50,000

Preparation

Reviews (15)

by Open Table Diner on November 20, 2014

Thanksgiving NYC 2014

We had three in our group and all ordered different

selections of prix fixe which was a good value for the scale of service and remarkable quality. One had turkey


23

23 STYLING

STYLING

ScrollingMany widgets are lists, and users will want to view more items than fit in a single view of a small card. There are two primary methods for handling scrolling.

Load MoreOne method is to allow the user to actively request more records to be displayed in the list. Scrolling would be used in this case, with an action button at the end of the current list to load more. Records could be added 10 or 20 at a time.

Lazy LoadingAnother method for scrolling through long lists is to load new records automatically when the user scrolls to the bottom of the current dis-played records. This should be used instead of the Load More ap-proach when the user would want to browse through a large number of records without the friction points of enacting many “Load More” actions. An example of this would be an activity feed or news feed.

Navigate to List (No scrolling)When you want to avoid scrolling, allow the user to navigate to a sep-arate list page. This approach is particularly useful if the user needs to modify views of the list with filtering and sorting. For instance, a sales representative wants to review her accounts. In this case, the widget may show a short list of accounts with some basic attributes (recent activity, top deal sizes, most promising opportunities, etc.), and then have a footer button that reads “View All Accounts”. Select-ing that link navigates the user away from the homepage and into the full account list.

Shipment will arrive past the

planned delivery date.

View All Accounts

Please note the schedule change for the ra-

diology lab on Monday due to maintenance.

3 0

LOAD MORE

Escalated (1x)

Camus Medical Supplies823-124-1515

Hyperlink to full list

Lazy loading with busy indicator

“Load More” footer button


24

24 STYLING

STYLING FUNDAMENTALS

Dos and Don’ts

Reduce cognitive load

Show data sets in list view rather than simply presenting a datagrid. Data grids often contain too many catego-ries to display sufficient information at a glance, and require horizontal scrolling (which should be avoided in widgets).

Using lists instead of data grids pro-vides hierarchy of information, and shows “just enough” data for the user to make a decision or take action.

Add value smartly

Widgets are a great opportunity to present low density information in ways that convey additional dimensions of the data.

Combining low density data (like a summary count) with higher density tools (like a list), allows the user to peek into the next level of data, and navigate directly to records.

Keep interactions simple

Keep interactions within widgets simple. Users should be able to scan and perform any actions with a minimum amount of clicking/tapping.

Simple inputs and one-click actions are appropriate for widgets. Complex inputs should be avoided, and should be re-served for interfaces that are designed to support greater complexity. If complex input is required, the widget should allow the user to navigate deeper into the appli-cation or suite.

Packaging Queue

System Status

Send Kudos

System Status

Performance Review

Line

10

20

30

40

50

60

70

80

ID

84839

04050

20345

20402

20340

50606

40360

03406

Description

2-GTP Left hand bo...

Delfin 5mm Heatsink

5.0mm copper wire...

3.9 MHz wave bala...

5 stage current swit...

3-hole bracing pac...

Benchmarking sole...

56mm Multiport cou..

Q

21

14

51

63

65

56

65

24

Packaging Queue

2-GTP Left hand bonding bracketShip to: WH-045 Watsonville, CA

Delfin 5mm HeatsinkShip to: WH-045 Watsonville, CA

5.0mm Copper wire bundle, 100mShip to: WH-045 Watsonville, CA

3.9MHz wave balancing resistorShip to: WH-045 Watsonville, CA

LATEST ALERTS

AlertConnection lost: HL-7 P02341 has lost connection to the system.

Qty21

Qty14

Qty51

Qty63

32 Items

12 Alerts

34 Tasks

Alerts

12 34

Tasks

Do.

Do.

Do.

Don’t.

Don’t.

Don’t.

Send kudos to:

David Weber Sophia Brown

Message:

Great job on the Abbott deal. We couldn’t have done it without you!

SEND

Employee Information

Responsibility 1

Responsibility

A sales manager will be responsible for ensuring sales team high level performance accross all major markets in the

Employee Comments

Widget Examples


26

26 EXAMPLE WIDGETS

LISTS

Single Line

Single Line, Text Only

Single Line with Spark Chart and Total

Single Line with Numerical Value Single Line with Time and DescriptionSingle Line with Checkbox, Descrip-tion, Input Field and Numerical Value

Single Line with Icons

Single Line with Numeric Column

Single Line with Avatar, hyperlink and action icon

Single Line with Avatar, Numeric, and “More Action” icon

Quick Links

Create a New PO

Create a New Supplier

Create a New Item

Requisition Conversion Workbench

Analytics

Shipment Status Board

Infor Ming.le Feed

Supplier List

Top Sales Performers

Dani Acevedo $123k

Jenny Yang $118k

Francis Dole $112k

Jose Alejandro $108k

William Shippens $106k

Samantha Kwan $106k

Angela Davis $102k

Shadi Reis $98k

Appointments

Breakfast with John Young8:30a

Conference Call with Abbott Ltd10:00a

Interview with Alexa Thompson11:00a

Lunch with Anne Young12:00p

Call with Brandt Aeronautics2:00p

Interview with Steve Cho4:00p

Pick up print job5:30p

Dinner with Brody Daniels7:00p

Team Files

Q2-Planning.xlsx

NW-Region-Quarterly-Report...

Q1-PerformanceReport4.xls

PO12030130.pdf

PO30204000.pdf

My Team

Angela Baker

Donna Horrocks

Sandra Peterson

Shadi Rais

Luis Salazar

Latest Candidates

Pamela Roos 98

Shari Banks 97

Jonathan McKee 96

Alex Rojas 96

James Simpson 95

Supplier Scoreboard

Abbott Ltd1

2

3

4

5

Brandt Aeronautics

Camus Medical Supplies

Drafting Supply Wareho...

Elite Dynamics

Top Products

$123k

DM203401204 €2.94m

BW202140501 €2.91m

JV403020402 €2.90m

DM30402 €2.89m

WP304020 €2.70m

OS019239 €2.68m

BB0304010 €2.67m

ALL REGIONS 6 YTD 2015 6

Quick Order

Items PriceQty

Letter Copy Paper (500ct) 0

0

0

0

0

0

0

$12.80

Black Pens (12ct) $19.99

1 lb Rubber Bands (M) $20.50

Standard Staples (1000ct) $24.29

No 2 Pencils (144ct) $35.98

Whiteboard Markers (6ct)

Whiteboard Eraser (1ct)

$40.00

$49.99


27

27 EXAMPLE WIDGETS

LISTS

Double Line

Double Line, Text Only Double Line with Icons Double Line with Avatar, hyperlink and action icon

Quick Links

Create a New PO1 Comment

Create a New Supplier13 Comments

Create a New Item27 Comments

Requisition Conversion Workbench3 Comments

Analytics2 Comments

Shipment Status Board10 Comments

Team Files

Q2-Planning.xlsx2/4/16

NW-Region-Quarterly-Report...2/10/16

Q1-PerformanceReport4.xls2/11/16

PO12030130.pdf2/14/16

PO30204000.pdf2/14/16

My Team

Angela Baker

Donna Horrocks

Sandra Peterson

Shadi Rais

Luis Salazar



Junior Account Representative

Junior Account Representative

Account Representative


28

28 EXAMPLE WIDGETS

Widgets

Chart Examples

Account A

Account C

Account B

10 42 3 5 6 7 8 9 1210 11

PAST 12 MONTHS 6

Single series

Single Series

Stacked Column

100

80

60

40

20

0

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

MORE 6

Variable 01 Variable 02

100% Stacked column

100

80

60

40

20

0

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

MORE 6

Variable 01 Variable 02

100% Stacked column


29

29 EXAMPLE WIDGETS

WIDGETS IN ACTION

Homepage Examples

Grids and Responsive Behaviors


31

31 GRIDS

We use a 12 column responsive grid as a guideline for how our applications are going to work when being viewed on multiple devices. Grids are also used to maintain consistency throughout our products and designs.

We have established 4 primary breakpoints: 1440px, 1160px, 768px, and 320px.

Above these breakpoints, the grid would expand to a 16 column grid, allowing for a 4 column layout in the homepages.

DESKTOP

1440px | 1160pxTABLET

768px MOBILE

320px

GRIDS

Overview


32

32 GRIDS

Vertical expansion snaps to 1x, 2x, 3x, or 4x the base row height.

3x

3x

4x

2x

2x

2x

2x

1x

1x

1x 1x

1x

1x

1x

1x

1x

1x

1x

1x

1x

As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate extreme narrowness or width.

Reference here for specs.

GRIDS

Overview


33

33 GRIDS

GRIDS

Responsive Behavior

While the widget containers are currently designed for fixed sizes, forward-thinking teams will design their widgets to behave respon-sively. In most cases, the “tiny tweaks” method will be sufficient, since most widgets will be fairly simple lists, charts, or reports.

Tiny TweaksUsing this approach, not much changes in the layout beyond the hori-zontal positioning of content.

Column DropAnother strategy for responsive display of content is to show or hide some content as the container size changes. Starting with the nar-rowest view, show the most critical information, and then reveal more information in order of importance.

Infor Ming.le Homepage Widgets€¦ · Infor Ming.le Homepage Widgets DRAFT V1. 4 / 2016. Infor...

Documents

Transcript of Infor Ming.le Homepage Widgets€¦ · Infor Ming.le Homepage Widgets DRAFT V1. 4 / 2016. Infor...