Versions Compared

Version Old Version 5 New Version Current
Changes made by

ester glickstein

ester glickstein

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: /wiki/spaces/UserExp/pages/2033324017

...

Timeline enables easy view of a continues variables over time.
Area chart allows displaying a continues variable as the part-of-a-whole or view the difference between other variables.

...

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >> 
Special behaviour:

  • usually include an indication for the current time as a vertical line (e.g.: 10AM). Sometime may include a 2 lines as per time range.

  • in case of errors/notification, some of the data is indicate with a red color (specific point in time or a range).

Types 

Type

Usage

Image

Line chart

Image ModifiedImage ModifiedImage ModifiedImage Modified

Area chart

Image Modified

Chart with Stacked/Grouped (upto 100%),
Overlapping area charts

Image ModifiedImage ModifiedImage Modified

Image Modified

Usage & Behavior

General guidelines

...

Area - Line charts interactions

  • <<TBD convert to LUX>>

           

Structure

<<Describe the different parts that structure the component. See example: Numeric stepper structure >>

Placement and Positioning

<<Where should the component be located on the screen. See example: Pagination placement and positioning>>

Default State

<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>

Content

<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>

Internal Logic

<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>

  • <<use Click target to describe the interaction>>

    <<TBD - add a simple example of tooltip>>

    Example from Queue analytics for overlay area chart

States

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

State

Image

Comment

Regular

Hover

Active

Selected

Selected, Hover

Disabled

Read Only

Error

Warning

Focused

Focused, Hover

Focused, Selected

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

  • In case the X axis represents time, additional elements may appear: (move to the charts examples table, the rest is as in legend above)

Examples

Type

Description

Image

Vertical line

to indicate the current time (e.g.: 12:30 PM)

Image Modified

Special values (red line/text)

to indicate special values (e.g. Forecast above Volume)

Image Modified

Special values (red dot)

to indicate special values (e.g. Forecast above Volume)

special values (e.g. Forecast above Volume) are indicated (as red dot/line/text) - keep the full text???

Image Modified

zoom mechanism component

  • enables focusing on a sub-set of data by the time period selected using: zoom in/out or jump/move to another selected period of time.

  • where exists, usually located at the lower part of the chart

Image Modified

Validations and errors

<<Show images for Errors and warnings. See example: Radio button validations and errors>>

Transitions

<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>

Best practices

<Whenever a recommendation (not a must) is provided>>

Use Line chart:

  • for showing comparisons, distributions, or trends between continuous data sets.

...

  • Do not insert too many data categories (should better no more than five data groups).

  • Try to highlight the most important data group of your resources.

  • Avoid very light or very close colors for your data groups. Make sure all of your details in the chart do not fade into the background.

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

  • <…>

  • <…>

Accessibility Compliance

...

Focus management

Text field

Drop-down

<<Images with Focus>>

<<Images with Focus>>

Tab

<<Description >>

Space

Enter

Esc

Arrows

<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924198/Copy+of+Combo+Box+Temporary#Focus-management , https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924759856/Copy+of+Numeric+Stepper+Temporary#Focus-management >>

Focus regions

1st level regions

<<Image>>

1st level

2nd level

3rd level

<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924444/Copy+of+Dual+List+Selector+Temporary#Focus-regions >>

Design

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

...

To delete afterwards:

...