Style mockups

Examples of possible visual styles to choose between, built out of standard Bootstrap styles. Parts of the forms not relevant to the discussion are elided or disabled.

#1
A way to select units using two dropdowns. Selecting the first one changes which type of units are offered in the second one:
#2
A way to select units using a single dropdown. There are grouping labels that can't be selected, but which can not have their look controlled:
#3
A way to select units using a single dropdown with a button to open. We can place arbitrary web page contents in this list, including styling the group headers however we like:
mass/volume
volume/volume
#4
Like #3 but show the word “Units” until a unit is selected:
mass/volume
volume/volume
#5
A form with “native” rendering of errors. A web page has control over wording of native errors but not their appearance. Try filling out the form with positive and negative values, or leaving values empty, and clicking “Calculate!”. Changing the inputs clears the “Dose” field.
#6
Similar to #5 but with “bootstrap” rendering of errors. Once “Calculate!” is clicked, the error status of each box updates as it is edited.
#7
Bootstrap errors are shown even though the user has not yet started to edit the form, and native errors appear if “Calculate!” is clicked while there are errors.
#8
Similar to #6 but with an error message below each box. This has the limitation that everything horizontally on the same line as the input must succeed or fail together, sharing their red/green state and error message box.
Negative numbers are not permitted!
Please fill in a value.
Negative numbers are not permitted!
Please fill in a value.
#9
Similar to #8 but the error messages float in space below the field. This removes the restriction in #8 that a row of fields must succeed or fail together.
Negative numbers are not permitted!
Please fill in a value.
Negative numbers are not permitted!
Please fill in a value.
#10
A form with no calculate button. Filling in any two fields causes the third field to become readonly.
#11
A horizontal version of #5. Horizontal space is divided up into 1⁄12ths and we can assign a different portion to the left and right sides, per row. We can also make individual rows have their labels above while other rows have labels above, though this is both messy in code and for a reader to view.
#12
Two examples of fixed units, the first uses plain text for the units while the second uses input groups to visually attach the text to the field.
kg
kg
#13
Like #12 with the numbers right-justified so that they press up against the units. Also a horizontal form variation.
kg
kg
kg
#14
Like #3 but items in a group have been indented.
mass/volume
volume/volume
#15
Vertical list of calculator options. Not a nav, this is a list group. The titles are “Heading 3” and the descriptions are “lead” text, intended for text designed to stand out. In this example, the “Inhalation Dose Calculator” is active.

  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

#16
Vertical list of calculator options as a list group. The text is smaller than #15 using normal body text for the descriptions and lead text for the titles.

  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry
#17
Vertical list of calculator options as a list group. The text is smaller than #16 using small text for the descriptions and normal body text for the titles.
  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

#18
Vertical list of calculator options as a list group without descriptions.
  • Dose Calculator
  • Inhalation Dose Calculator
  • Human Equivalent Dose Calculator
#19
Vertical list of calculator options as a list group with a border.
  • Dose Calculator
  • Inhalation Dose Calculator
  • Human Equivalent Dose Calculator
#20
Horizontal list of calculator options as a nav.
#21
Vertical list of calculator options as a nav.
#22
Vertical list of calculator options as a nav with pills. (We skip nav-tabs because they don't work vertically.)
#23
Vertical list of calculator options as a nav with pills and the descriptions as small text.
  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

#24
Vertical list of calculator options as a nav with pills where the descriptions are indented.
  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

#25
Vertical list of calculator options as a nav with pills where the links are lead text and the descriptions are indented.
  • Dose Calculator

    Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

  • Inhalation Dose Calculator

    Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

  • Human Equivalent Dose Calculator

    Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

#26
Native rendering of abbreviation used to describe terminology. The look and feel is controlled by the browser.
#27
Bootstrap tooltip used to describe terminology. The tooltip can contain arbitrary HTML. “Concentration” has the tooltip below, but above, left and right are also options.
#28
A question mark button to expand an explanation below.
Lengthy description of what exactly what we mean by concentration.
#29
A vertical list with the name of each calculator and a long description packed horizontally. The column widths are 3⁄12, 7⁄12, 2⁄12 except on very narrow screens where the right-most column disappears and donates its space to the middle column.
Dose Calculator
Multidirectional calculator that solves for concentration, intake rate or dose when given any of the other two variables. Calculator can handle liquids in liquids (e.g. ethanol in water), solids in liquids (e.g. sugar in water) or solids in solids (e.g. sugar in flour). Calculator adjusts for differences in substance or solution density.

›
Inhalation Dose Calculator
Multidirectional calculator that converts ppm or % in air to mg/m³ and mg/m³ to dose in mg/kg body weight.

›
Human Equivalent Dose Calculator
Converts a dose in animals to a dose in humans using the FDA Guidance for Industry or EPA Guidance for Industry

›
#30
Like #10 but attempts to keep the calculation up to date as the fields are edited.
#31
Like #30 but clears the result field if you enter any of the input fields. The result only appears while none of the inputs have focus. A calculate button is added, but its real purpose is simply to take focus away from the inputs. It does nothing, but could serve as a place to trigger error messages.
#32
Like #31 but uses onfocusin and onfocusout instead of onblur and onfocus.
#33
A dropdown with an inline text box.
#34
Like #33, a dropdown with an inline text box but with separated with a divider.
#35
A dropdown with an inline text box that follows the label “Custom:”. This can also be done rounded if you prefer.
Custom:
#36
The same as #35 but with a bootstrap standard form entry control inside the dropdown.
Custom:
#37
A dropdown with “custom” after a separator. Choose it and two new entry boxes appear.
#38
A dropdown with “custom” after a separator. Choose it and a modal dialog box appears to enter the details.
#39
Justification edited in a modal dialog box, one line shown below the field.
kg
Include a justification …
#40
Justification edited in a textarea with a collapsing control. When collapsed, one line of text is shown.
kg
Include a justification
#41
Justification edited in a textarea which doesn't appear until “Include a justification” is clicked. Save and cancel buttons collapse the textarea. When collapsed, if a justification is present, one line of the justification appears truncated with an ellipsis and an edit link, similar to #39.
kg
Include a justification
Justification:
#42
User is allowed to edit the factor directly. Radio buttons add to the factor (if present) when selected. When the factor is an output, the radio buttons are unselected and disabled.
Appearance when F3 is the output of the calculation.
#43
User is allowed to edit the factor directly. Dropdown adds to the factor (if present) when selected.
Appearance when F3 is the output of the calculation.
#44
Radio buttons for each option. One “custom value” option provides a box to provide a custom value. If “custom value” is selected and the box is blank, it may be the calculation output.
Appearance when F3 is the output of the calculation.
#45
Same as #44 but the custom value box disappears when “a custom value” is not selected.
#46
Like #37 but with radio buttons in place of a dropdown. Choose “a custom species” and options for the name and factor appear.
with F1=