Getting Input From Users - PowerPoint Presentation

Slide1

Getting Input From Users

Forms and ControlsSlide2

Principles of Form Design

Make sure the user understands what’s asked for, any why

Clear Labels with carefully chosen vocabulary

Consider text explanations in line

If you can, avoid asking the question at all

Extra questions distract the user from the task at hand

Consider

prefilling

, auto-completion, good defaults, etc

Help the user recall or choose items

Use lists of items when possible, drop down, list box, etc

Use more advanced display types when possible –

imgs

, etc

Aid the user with input hints, structured format, etcSlide3

Principles of Form Design

Separate physical presentation from the data/programming model

Label, input, label, input is not always the best choice for understandability or visual appeal

Use whitespace, headings, images to your advantage

Do Usability Testing

You need empirical evidence of what works

Developers tend to make poor assumptions

Choose your controls wisely

A drop down suggests a single item choice, a single line text box suggests a short answer, etcSlide4

Factors For Control Choice

Available space

User’s aptitude to computer usage

User’s expertise in target domain

Expectations driven by other applications

Available technologySlide5

Controls for Binary SectionSlide6

Controls for Binary SectionSlide7

Controls for Selecting one of N, where N is smallSlide8

Controls for Selecting one of N, where N is smallSlide9

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

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

Controls for selecting many of N itemsSlide12

Controls for selecting many of N itemsSlide13

Controls for selecting many of N itemsSlide14

Controls for constructing an unordered list of user entered itemsSlide15

Controls for ordering a list of itemsSlide16

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

Standard text controls

Single-line text field

Multiline text area

Text area with inline tags

Rich-text editorSlide18

Controls for Entering NumbersSlide19

Controls for Entering Numbers from a Bounded RangeSlide20

Controls for Entering Numbers from a Bounded RangeSlide21

Controls for Entering a

SubRangeSlide22

Controls for Entering a

SubRangeSlide23

Controls for Dates or TimesSlide24

Controls for Dates or TimesSlide25

Advanced ControlsSlide26

Selecting one out of Many

Tough choicesSlide27

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

Selecting multiple of ManySlide29

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

Ordering a List of ItemsSlide31

Ordering a List of ItemsSlide32

Ordering a List of ItemsSlide33

Formatting NumbersSlide34

Advanced Controls

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

Entering a DateSlide36

Advanced

Controls

The

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

-JP

When 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

-SASlide37

Validation

ACTIVE

CustomErrorMessage

(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, shown

HasCalendar

(Boolean): If true and

ValidationType

is None or Date

*

, Calendar is loaded, shown

HasRecall

(Boolean): If true, a circular recall queue is instantiated. Size:

RecallStackSize

in .

resx

IsRequired

(Boolean): If true, the

RequiredFieldValidation

is enabled

Maximum

(String): Gets or sets the highest valid value

Minimum

(String): Gets or sets the lowest valid value

ValidateOn

(

enum

):

LostFocus

(default) or

PropertyChanged

triggers validation

ValidationPattern

(String): The validation pattern (mask) dependent on

ValidationType

ValidationType

(

enum

): None, Number, Date, Length,

NumberRange

,

DateRange

, or

RegEx

Value (object): The value of the input, type is based on the

ValidationType

Watermark (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 ValidationSlide38

Error Handling

The

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

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

.&#13;&#10;&#10;

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

>