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).

...

• enables comparing trend of multiple variables.

• enables discussing trends over a certain time.

• The Y axis shows numeric values and the X axis represents some key measurements (usually time).

• Clear and easy to understand since you can see the specific trend for individual data group.

• Useful when you need to compare multiple values line is better, or to show different data groups, or easily show positive or negative relationships between two or more variables.

• When more than 2 areas overlapping it’s not readable (even while using transparency).

• If your goal is to let readers understand the distribution of your selected data, or how a data group performed within a certain time period.

• Useful for knowing general tendency and some other related details in your values.

Area chart

• Area charts have a close pattern to line charts.

• However, the room/gap between each line and the X axis is filled with a certain color, which demonstrate the difference between the displayed variables.

• Very suitable for showing part-to-whole details.

• Ideal for indicating the change among different data sets.

• If your goals include the composition of some aspects of the data.

• We have two basic categories: stacked and 100% stacked charts.

...

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 >>

Interaction

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

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

<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>>

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

Design

Code

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

...

To delete afterwards:

• https://uxdesign.cc/guide-to-data-visualization-comparison-part-1-678382ceef00
  

...