Getting Input From Users

GETTING INPUT FROM USERS

Forms and Controls

Principles of Form Design Make sure the user understands what’s asked for, any

whyClear Labels with carefully chosen vocabularyConsider text explanations in line

If you can, avoid asking the question at allExtra questions distract the user from the task at handConsider prefilling, auto-completion, good defaults, etc

Help the user recall or choose itemsUse lists of items when possible, drop down, list box, etcUse more advanced display types when possible – imgs, etcAid the user with input hints, structured format, etc

Principles of Form Design Separate physical presentation from the

data/programming modelLabel, input, label, input is not always the best choice

for understandability or visual appealUse whitespace, headings, images to your advantage

Do Usability TestingYou need empirical evidence of what worksDevelopers tend to make poor assumptions

Choose your controls wiselyA drop down suggests a single item choice, a single line

text box suggests a short answer, etc

Factors For Control Choice Available space User’s aptitude to computer usage User’s expertise in target domain Expectations driven by other applications Available technology

Controls for Binary SectionCheckbox• Pros: Simple, low space consumption• Cons: Can only express one choice, so inverse is implied

Two Radio Buttons• Pros: Both choices are stated and visible• Cons: Higher space consumption

Two Choice Dropdown List• Pros: Both choices stated; lower space consumption• Cons: Only one choice visible at time; requires some

dexterity

Controls for Binary SectionToggle Button• Pros: Same as checkbox; can also be iconic• Cons: Same as checkbox; also, not as standard as checkboxes

Menu of two radio buttons items• Pros: Very low space consumption since it’s a popup menu• Cons: Discovery is deductive; requires dexterity

Controls for Selecting one of N, where N is small

N radio buttons• Pros: All choices are always visible• Cons: High space consumption

N-item dropdown list• Pros: low space consumption• Cons: only one item visible at a time; requires some dexterity

N-item set of mutually exclusive iconic toggle buttons• Pros: low space consumption; all choices visible• Cons: icons may be cryptic; users may not understand mutual

exclusivity

Controls for Selecting one of N, where N is small

Single selection list or table• Pros: many choices can be visible; frame can scroll• Cons: high space consumption

Spinner• Pros: low space consumption• Cons: only one item visible at a time; requires dexterity; non

standard control choice

Menu of N radio-button Items• Pros: very low space consumption; All choices visible• Cons: Popups can be hard to discover; requires dexterity

Controls For Selecting One of N Items, Where N is Large

N-item dropdown list, scrolled if necessary• Pros: Low space consumption• Cons: Only one choice visible at a time; requires

dexterity to scroll through list

Single-selection list or table• Pros: Many choices can be visible; scrollable• Cons: High space consumption

Single-selection tree or cascaded list• Pros: Many choices are visible; categories can be helpful• Cons: High space consumption; requires dexterity; may

not be an advanced control for casual users

Controls For Selecting One of N Items, Where N is Large

Single-selection tree or cascaded list dropdown• Pros: Low space consumption; categories can be

helpful• Cons: Requires a lot dexterity; advanced control for

casual users

Custom Browser• Pros: Suited for browsing available choices, may be

user friendly• Cons: May also be more complex; separate window

feels separated from main form

Controls for selecting many of N items

Array of N checkboxes• Pros: All choices are stated and visible• Cons: High space consumption

Array of N toggle buttons• Pros: low space consumption; all choices visible• Cons: icons may be cryptic; may be mistaken for mutually

exclusive

Menu of N check-box menu items• Pros: Very low space consumption; all choices visible when open• Cons: Popup menus may require user to deduce location;

requires dexterity


N-item dropdown list, scrolled if necessary• Pros: Low space consumption• Cons: Not all selected choices visible at a time; requires dexterity to scroll

through list; not common

Multiple-selection list or table• Pros: Many choices are visible; can be kept small if needed• Cons: Not all choices are visible without scrolling; high space

consumption; may not appear multi-selectable; May HAVE to scroll to see all selected items!

List with checkbox items• Pros: many choices are visible; can be kept small; affordance for selection

is obvious• Cons: Not all choices are visible without scrolling; high space

consumption; May HAVE to scroll to see all selected items!


Multiple-selection tree or cascaded list• Pros: Many choices visible; organization helps findability• Cons: May be a foreign paradigm to novice users; requires high dexterity;

may be mistaken for a single selection tree; May HAVE to scroll to see all selected items!

Custom Browser• Pros: Suited for browsing available choices• Cons: May be unfamilar paradigm; separate window does not feel tied to

the main form

List Builder• Pros: selected set is easy to view; selection list can be ordered; easily

handles large lists• Cons: Very high space consumption; breaks down if list of objects

selected is extremely large

Controls for constructing an unordered list of user entered items

List or table with “Add” or “New” button• Pros: “Add” action is visible and obvious• Cons: higher space consumption; visual clutter

List or table with New Item Row • Pros: lower space consumption; editing is done in place• Cons: “Add” actions is not as obvious

List or table that can receive drag-and-dropped items• Pros: visually elegant and space—saving; drag-drop is efficient and

intuitive• Cons: “Add” action is not visible, so users may not realize list is a drop

target=

Controls for ordering a list of items

Unordered list with “Up” and “Down” affordances• Pros: rearrangement actions are visible and obvious• Cons: higher space consumption

Unordered list that allows drag-drop reorder of items• Pros: visual elegant and space-saving; drag-drop is

efficient and intuitive• Cons: rearrangement actions are not visible; users may

not realize they are available

Controls for entering either one line of text, or a one-of-N Choice

Combo box• Pros: quicker to use than a separate dialog

box; common paradigm• Cons: limited number of items can reasonably

fit into a drop down

Text field with “More” button• Pros: permits the launch of a specialized

choose dialog• Cons: not as familiar as a combo box; not as

coupled to main user interface

Standard text controls Single-line text field Multiline text area Text area with inline tags Rich-text editor

Controls for Entering NumbersText Field with Forgiving Format• Pros: Visually Elegant; Permits a wide variety of formats and data types• Cons: Expected format is not evident from the form; Requires careful

validation

Text Field with Structured format• Pros: Desired format can be made evident in form; validate can occur

during user input• Cons: Possibly higher space consumption and visual complexity

Spinner• Pros: User can use mouse or keyboard to change value; good for

stepping through an index or steps• Cons: Not familiar to all users; Requires dexterity to use buttons

Controls for Entering Numbers from a Bounded Range

Slider• Pros: Obvious metaphor; Value is shown by

position; user cannot leave given range• Cons: High space consumption; unobvious

keyboard access; tick labels can be hard to read

Text Field with Validation• Pros: Low space consumption; very familiar

paradigm• Cons: Needs validation when focus is lost which

can be confusing; cannot see range values

Controls for Entering Numbers from a Bounded Range

Spinner• Pros: Values can be constrained when buttons are used;

low space consumption; supports both keyboard and mouse access

• Cons: Not familiar to all users; requires dexterity; needs validation when focus is lost which can be confusing; cannot see range values

Slider with Text Field or Spinner• Pros: Allows visual and numeric input; Allows both mouse

and keyboard navigation• Cons: High space consumption; visual complex; requires

validation for text field

Controls for Entering a SubRange

Double Slider• Pros: Lower space consumption that two

sliders• Cons: uncommon paradigm; complex

Two Sliders• Pros: Easy to understand that a double slider• Cons: High Space Consumption; unobvious

keyboard access

Controls for Entering a SubRange

Two Spinners• Pros: low space consumption; other benefits

of spiners• Cons: Same as other spinners; range not

apparent; etc

Two Text Fields• Pros: very familiar; lowest space

consumption• Cons: Requires Validation; range is not

apparent;

Controls for Dates or Times

Text Field with Forgiving Format• Pros: Visually simple; allows a variety for

formats; good keyboard access• Cons: Expected format not apparent;

requires careful validation

Text Field with Structured Format• Pros: Desired format more evident• Cons: possibly higher space consumption,

visual complexity

Controls for Dates or Times

Calendar or Clock • Pros: Obvious metaphor; input is constrained• Cons: very high space consumption;

keyboard access is tricky

Drowdown Calender or Clock• Pros: combines advantages of Text field and

Calendar control; low space consumption• Cons: complex interaction sequence; requires

dexterity

Advanced Controls

Selecting one out of Many Tough choices

Advanced Chooser Jump to Item navigation -

When focus is on tree, typing will go to location, one or more character recognized

Inline search offered below. This is obvious to the user. It also lets you cycle up and down through potential matches.

Selecting multiple of Many

Advanced Chooser Jump to Item navigation -

When focus is on tree, typing will go to location, one or more character recognized

Checkbox Item Selection, superior to multiple row select (ctrl/shift + click) or list builder

Selected items are panel in on the right. The allows the user to see the items checked on the left without scrolling up and down.

Right hand panel can be manual expanded/collapsed. By default it will self expand if the left hand list is greater than ~20 items. Therefore this paradigm works well for multiple sizes of N.

Ordering a List of Items



Formatting Numbers

Advanced ControlsThe Calculator is invoked using the calculator icon or by pressing the Pause/Break key and dismissed either by loss of focus or pressing Esc. It provides built-in functions for most arithmetic operations plus memory operations. Pressing the equal sign (=) updates the TextBox content. The leftmost (brown foreground) keys control the “tape”: decrease or increase number of decimals, change the font, or print the “tape”. The Calculator is culture-aware and displays the appropriate decimal separator as well as digit representations. The “tape” is also displayed according to the current thread’s culture. (The Calculator can perform hexadecimal conversions, too: set the ValidationPattern to “x”. The TextBox will display hex while the Calculator will operate in decimal mode.)

Simple Calculator

Simple Calculator with Printable Tape

Entering a Date

Advanced ControlsThe TextBox is an exceptionally versatile control. It can be a date picker, a currency editor and as you have seen, it handles complex validations. It can even provide you with a collection of all field errors on a form – more about that later. The next two pages focus on the date picker and currency editor features. The TextBox is culture-aware: it presents formatted content (e.g.: dates and currency values) formatted according to the culture of the current thread and the language of the TextBox.

Culture: en-US Culture: jp-JPWhen not using the pop-up calendar, the date parts can be scrolled using the arrow keys and/or the mouse wheel. When the pop-up calendar is active, the keyboard keys scroll the days (← or → to scroll days and ↑ and ↓ to scroll weeks; PageUp and PageDown to scroll months). The calendar can be invoked by pressing Pause/Break and dismissed using Esc. ValidationType is Date or DateRange, ValidationPattern can be a standard or custom date and/or time format string.

Culture: ar-SA

ValidationACTIVECustomErrorMessage (String) You can pass in to the Validator a more meaningful error message.ErrorText (String): The validation error text, or String.Empty if none.HasCalculator (Boolean): If true and ValidationType is None or Number*, Calculator is loaded, shownHasCalendar (Boolean): If true and ValidationType is None or Date*, Calendar is loaded, shownHasRecall (Boolean): If true, a circular recall queue is instantiated. Size: RecallStackSize in .resxIsRequired (Boolean): If true, the RequiredFieldValidation is enabledMaximum (String): Gets or sets the highest valid valueMinimum (String): Gets or sets the lowest valid valueValidateOn (enum): LostFocus (default) or PropertyChanged triggers validation ValidationPattern (String):The validation pattern (mask) dependent on ValidationTypeValidationType (enum): None, Number, Date, Length, NumberRange, DateRange, or RegExValue (object): The value of the input, type is based on the ValidationTypeWatermark (String): The TextBox’s Watermark (see example below)

Watermark Number Validation (F2) Date Validation (d)

Required Field Validation^\d{5}$|^\d{5}-\d{4}$ Number Range

Validation

Error HandlingThe TextBox’s ErrorText property contains the text of the current error, or String.Empty if none.

.It is a dictionary object where the Key is the name of the control throwing the error and the Value is the text of the error. The ErrorCollection has an attached property called ErrorMessage. Bind each of the validated TextBoxes’ ErrorText property to the ErrorMessage attached property of the ErrorCollection. This way, your instance of the ErrorCollection will always have the collection of errors present in your view.

rn:ErrorCollection.ErrorMessage="{Binding RelativeSource={RelativeSource Self}, Path=ErrorText}"

private ErrorCollection ec = new ErrorCollection();ErrorCollection.SetErrorCollection(this, this.ec);ec.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(ec_PropertyChanged);

// You can update some TextBlock with a collection or errors via an event handler, e.g.:void ec_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e){

ErrorsTextBlock.Text = String.Empty;if (null == ec || 0 == ec.errorCollection.Count)

return;

foreach (string key in ec.errorCollection.Keys){

if (0 < ErrorsTextBlock.Text.Length)ErrorsTextBlock.Text += "; ";

ErrorsTextBlock.Text += key + ": " + ec.errorCollection[key];}

}

XAML

C#

Tooltips

The ToolTip follows the Microsoft Fluent UI Guidelines..

ToolTip Usage:<rn:TextBox.ToolTip>

<rn:ToolTip HeaderText=“ToolTip Header (Ctrl+Shift+H)” Content="This is a sample ToolTip (and ScreenTip) style to be used (and/or re-styled)

to suit the needs of the developer.

Its content can span multiple paragraphs, with the height adjusting to the ToolTip's content.“ FooterText=“Press F1 for more help.” Width="200" />

</rn:TextBox.ToolTip>

Documents

Getting Input From Users