Lecture 12: User Controls

1
Lecture 12User Controls
2
This Week - Selection Controls

• We're continuing to focus on the Flow
• We're focussing on the Control part of the
  Model-View-Controller architecture

3
Controls

• How does a User communicate thoughts and desires
  to the software?
• Imperative Controls Initialization
• Selection Contros Selection
• Entry Controls Entering of Data
• Display Controls Manipulate Program Visually
• Most common controls are bound to the OS

4
One form of Control Dialog Box

• You've seen them before, we've talked about them
  before. This is a defacto-control.
• This is a fairly easy thing to do, and seems to
  be a programmer's quick input way.
• But, problems Modal, and Control-Laden

5
Control-Laden(ess)

• Dialog boxes, as well as other types of modal
  inputs exhibit this forced interaction.
• Remember, these things tend to cause discussion
  instead of direction
• No one likes Your blah blah blah at the blah
  blah blah place in memory broke blah blah blah.
  This means that you must reboot your computer.
  Also, how is the weather up there in blah blah
  blah?
• It tends to make an interface demand things of
  the user, things the user may not know.
• This breaks flow as mentioned last week.

6
Imperative Controls

• Commands are verbs.
• Nouns are the objects affected.
• Adjectives help identify the object.
• Adverbs describe a more specific action.
• Imperative Controls focus on the verb.
• They demand immediate action!
• There are some familiar characters here
• JButtons (icon and text both)
• JToolBar (using buttons)

7
Push Buttons (JButton)

• VERY Common component, used everywhere.
• Pressability gives a realistic feel.
• Web buttons Many links are in graphical buttons
  that don't press. This is misleading.
• We'll talk about this at the end of the year.
• Cursor indication or slight outlining is good,
• But Cooper thinks that you should go one step
  more Visually change color of the button chosen
  so there's no confusion at all.
• Careful which colors you pick!

8
Butcons (JToolBar)

• Introduced in Windows 3.0
• Almost as popular as the menu bar now!
• Its the half-button half-icon approach, butcon
• One nice advantage keeps you remembering what
  you can/can't do. It screams, click!
• Image icon is so very important, though!
• Tooltips really help here.
• Much more space-savvy, smaller.

9
Selection Controls

• This type of choice focusses on the noun of a
  command.
• Pick the noun that fits the best answer, a
  selection
• Familiar characters here Checkboxes, Radio
  buttons, Combo boxes
• Selection control can also be as simple as Yes or
  No, too.
• Try not to present this as boolean True or False!

10
Check Boxes (JCheckBox)

• The simple binary choice of choice.
• Think about where you'd use these in your life,
  beyond the interface.
• Shopping lists, to-do lists, packing for a trip?
• This thought is brought over to computers.
• Mostly they are square boxes, probably a good
  idea to stick to this as it is expected.
• Check Boxes may be better used as the latching
  butcon such as a Bold button where you can turn
  an icon on or off.

11
Flip-Flop buttons

• These types of buttons change their state every
  time they are clicked.
• Usually two states, like On or Off.
• Could be multiple Low, Medium, High
• Problem is, how do you know which one is actually
  selected? Is the visible one selected?
• Better idea Switch the flip-flop button into a
  series of radio buttons.
• Or Pictoral approach. Change a picture to
  represent the new state On (a lightbulb lit), or
  Low (a bar nearly empty, or gauge)

12
Radio Buttons (JRadioButton)

• As mentioned, this button provides the selection
  of one choice of many
• Like Checkboxes though, they waste space!
• Seems to give more of a conversation, sort of
  like a multiple choice question.
• Traditionally Circular lit buttons.
• The butcon toolbar approach has also replaced
  this and taken much less space.
• Example Changing the paragraph alignment!

13
Combutcon (JMenu Implementation)

• Like the Combo box, it provides a list of
  choices, but icon choices.
• These are small and hard to see
• But much better than Find menu, submenu, select
  option in a dialogue and then hit OK.
• This tends to help Flow as mentioned last week.
• Good for programs that have states where it is
  not likely the user means to change the state all
  that frequently.
• The concept is also easy to learn about.

14
List Controls (JList)

• A Picklist of options to choose from.
• Usually each is a noun as a String
• Does allow for multiple selection by usually
  using the control and shift keys.
• This is usually very hard and tiring, and can
  cause one wrong click to mess everything up.
• Instead, (and you can do this in Swing) how about
  putting check boxes in there?
• Change the view of the list itself.
• This is called earmarking

15
Earmarking

• Default selection
• Hard to convey idea that once you select a second
  option in the list, you deselected the other.
• How to fix that, well how about
• Each selection continues to add to the list of
  the selected (as if the control-key is locked)
• What if User Expected first?
• Instead Earmark, use Checkboxes so its very clear
  to the user which choices are picked.
• This also removes some problems of checkboxes
  taking up too much space!

16
Dragging and Dropping in Lists

• Sometimes you might want the user to choose from
  one list and put into another.
• The Drag-And-Drop works well here as an option
  over a --gt and lt-- button.
• User picks what they want, and then can see the
  movement by grabbing them and putting them into
  the next list.

17
Ordering the List

• What about ordering the list's contents?
• Most choose Alphabetical, date, size
• This is nice, but what about letting the user's
  most important choices be at the top!
• Remember these choices between sessions.
• This is algorithmically more hard and harder to
  engineer, but we're not in the early 90s here.
  This is all very possible and not as hard to do.
• By default, nothing in Swing (1.3.1) gives this
  to you. Its up to you to change the model and the
  view!

18
Horizontal Text Scrolling

• This is a really bad thing to do. Word-wrapping
  is much more preferred!
• Causes unnecessary strain upon the user to have
  to physically move the mouse to the right. Then,
  again to the left. Right, Left, Right, Left,
  Right, Left, Right, Left, Right, Left, Right,
  Left, Right, Left... annoyed yet?
• Sometimes wrapping isn't an option. Perhaps font
  size reduction, or graphical representation of
  what was put in the list.

19
ComboBox (JComboBox)

• Superior way of choosing one option from a list
  of options.
• Collapsable, space efficient.
• Has some limitations Must be a short list of
  options, more than 10 may be cumbersome and
  scrolling hard to manipulate.
• Drag and Drop in a ComboBox
• Worked well in a JList, why not here?
• Choose an option, and move it to another place.

20
Entry Controls

• Entry Controls focus on taking information from
  the user and putting it into the model.
• Not just a choice, this is actually information
  put into the display.
• Some familiar players here Text fields, Sliders,
  Gauge controls.
• Usually more than a simple ActionEvent for these
  types of Controls.

21
Bounded and Unbounded Entry

• Bounded entry A range of choice for entry into
  the program is specified. The user can never
  choose outside. IE, a number 1 to 100.
• Unbounded entry The user can enter whatever they
  want even if it is invalid.
• Handling Invalid entries
• Use bounded whenever it is needed, nowhere else.
  Users can grasp bounds well.
• Text fields that reject user input that didn't
  meet bounds isn't bounded, just rude!

22
Bounded Entry

• Slider bars (JSlider) is a bounded entry.
• Tick marks define the actual values.
• Labels of the ticks indicate what is chosen.
• Spinners
• These choose a specific number that increases or
  decreases depending on the little arrow used.
• Does actually allow the user to manually put in
  the value, but this would have to be corrected.
• Make sure there's upper bounds that make sense.

23
Unbounded Entry

• Text edit control. Any alpha-numeric entry is
  allowed. This is done all over the place, in fact
  I used one as this is written.
• Blank space is good to remember footnotes that
  previously was entered at a time past.
• Or.. just simple raw data as in a database.
• Either way Validation must be considered.
• Unbounded because there isn't a range.
• Unbounded still because its a format!

24
Validation

• User may put invalid text in the entry.
• How to solve this problem?
• Force user to go in a set formatted bounds.
• Did you, the designer, think of all bounds?
• IE 231-nmj-122 may not be a valid 3x3 number
  input, but perhaps the user was confused and
  thought nmj was needed.
• Accept everything the user gives and coerce the
  bounds.
• 231nmj122 isn't acceptable, but allow it anyways
  and consider 231-000-122.
• Probably a better idea. Be careful though.
• Visually distinguish validated fields!

25
Passive versus Active Validation

• Active validation corrects as you type.
• May confuse the user.
• The user may not actually know there was a
  problem.
• Must notify the user when typing!
• Could be very distracting.
• Passive validation waits until the user is done.
• Could be a modal dialogue
• Perhaps instead just highlight incorrect
  sections.
• Web pages tend to do this nicely!
• Use Clue Boxes, ToolTips!