Versions Compared

Version Old Version 2 New Version 3
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

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


Lead:  Liav Nadler 

Status
colourYellow
titleongoing

Table of Contents


Description

  • A popup is a window that forces the user to interact with it before they can go back to using the parent application.
  • A popup window

...

  • contains of these elements:
    • A colored header, including a title and a closing button
    • A content area, which may contain text, inputs and controls
    • A primary action button
    • A secondary action button, if relevant

Types

TypeUsageFor more information
Popup messagesDisplay warnings, error messages and important informationSee Popup Messages
DialogsCollect information from users or allowing them to make decisionsSee Dialogs

Usage & Behaviour

General guidelines

  • A popup window appears on users' action, usually clicking a button, icon or link
  • The popup appears over a semi-transparent background
  • The popup is centered horizontally and vertically on the screen
  • The user cannot resize the width or height of a popup window
  • The user cannot move the popup across the screen
  • The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action buttonThe semi-transparent background appears and disappears with a fade effect (TBD)
  • The popup window itself appears and disappears with a slide down / slide up effect (TBD)

General guidelines

<<describes the component, use sub-section when they are relevant to the components>>

Expand
titleExample for heading in general

<<use heading 3>>

  • Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
  • Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
  • Content (for example, in dropdowns and lists)
  • Length (e.g. length of list)
  • Order (e.g. order of drop down menu)
  • Placement or Positioning (when this is important, e.g. toast message)
  • Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
  • Default section or Default values 

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

...

Interaction

  • The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button
  • For interaction within dialog windows see Dialogs

Validations and errors

  • Popup messages does not involve special validations. For validations and errors within dialog windows see Dialogs

Best practices

  • A popup window should carry a limited amount of information. If the content you wish to display is extensive consider using other patterns

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

...