Feature Wiki

Information about planned and released features

Tabs

KS-Entry: Primary Button

Page Overview

[Hide]

1 Guideline

  • DOM, LESS, JS / Screenshot*:
  • Less Variables:
    • Color: btn-primary-color
    • Background: btn-primary-background
    • Border: btn-primary-border
  • PHP Class: ilLinkButton (ilButton), ilSubmitButton (ilButton)
  • PHP Example:
  • External Library: Bootstrap Button
  • Status of Entry: To be revised
  • Status of Implementation: to be implemented
  • Description*:
    • Purpose: The Primary Button indicates the most important action on a screen. By definition there can only be one single “most important” action on any given screen and thus only one single Primary Button per screen.
    • Composition: The background color is the btn-primary-color. This screen-unique Button-color ensures that it stands out and attracts the user’s attention while there are several buttons competing for attention.
    • Effect: In Toolbars the Primary Button are required to be sticky, meaning they stay in view in the responsive view.
  • Background:
    • Tiddwell refers to the primary Button as “Prominent Done Button” and describes that “the button that finishes a transaction should be placed at the end of the visual flow; and is to be made big and well labeled.” She explains that “A well-understood, obvious last step gives your users a sense of closure. There’s no doubt that the transaction will be done when that button is clicked; don’t leave them hanging, wondering whether their work took effect”.
    • The GNOME Human Interface Guidelines -> Buttons also describes a Button indicated as most important for dialogs.
  • Context*:
    • “Start test” in Module “Test”
    • “Hand In” in exercise
  • Rules:
    • Usage:
      1. Most pages SHOULD NOT have any Primary Button at all.
      2. There MUST no more than one Primary Button per page in ILIAS.
      3. The decision to make a Button a Primary Button MUST be confirmed by the JF.
  • Relations:
    • Is A: Button
    • Must Use: Text
    • May Use:
  • Todo in ILIAS 5.2:
    • Less:
      1. Currently Primary Buttons are rendered using a custom less mixin which uses, lighten (brand-default, 15%) to color the background and border of the button. This is misleading, we have a variable btn-primary-bg/border for that.
      2. Currently white is used for the button color, this is misleading since there exists a less variable btn-primary-color for that.

2 Status

  • Effective from release: Release 5.2
  • Approved by Jour Fixe at: JourFixe-2016-06-21
  • Implementation status: partly implemented
  • Funding for streamlining existing features: Universität Bern
  • Implementation of guideline: { all developers | name of responsible developer }

3 Components that are not compliant with the Guideline

  • …

4 Discussion

JourFixe, ILIAS [jourfixe], June 20, 2016: Highly appreciated and scheduled for 5.2.

Last edited: 21. Jun 2016, 12:36, Kunkel, Matthias [mkunkel]