UI Interactive Objects: Widgets. Widgets. Different Types of Widgets. UI Design Elements

Transcription

1 UI Interactive Objects: Widgets UI Design Elements Widgets Interactive objects, basic building blocks Used for input and output of information Graphical objects for UI design Part of UI design is choosing appropriate widgets and laying them out on the screen Often hierarchical E.g. Windows can be widgets Need ways of structuring and representing widget hierarchies, e.g. interactor tree. Different Types of Widgets Windows Usually one root window per application Canvas Drawing area Menus Ordered list of options and choices Dialog boxes E.g. pop-up to confirm some action (Y/N) 1

2 Different Types of Widgets (2) Control Objects Discrete choice buttons (push, radio), check box Continuous choice Scroll bars, sliders Editable fields List box Tree view Window Examples Each window has other widgets nested within it this raises the issue of widget communication Windows Organize related activities and information into discrete areas of the screen Goal is to reduce UI complexity Number of windows can sometimes be an issue Some controls provided with a window E.g. close, resize, position, scroll Types of windows Tiled, Overlapping Sometimes see both of these in the same application 2

3 Windows Tiled Windows example Overlapping windows in Metisse IBM Websphere Business Modeler Widget Organization GUI toolkits typically provide hierarchical containers Panels and/or panes For resizable layout, scrollbars, tabs, etc. 3

4 Canvas Drawing area for 2D/3D graphics, e.g. in a Paint program, or Photoshop Display and interaction driven by application The canvas is embedded within a containing parent window Menus Organize actions, objects, properties, and state for a collection of similar items Items may be words, icons, buttons or an assortment Good for novices, casual users, and less frequently used tasks (but tend to slow experienced users down) Ways to select items in a menu: Pull-down: good for novices, uses screen space Pop-up: hidden functionality, for casual & expert users Icon/Button panel: best for novices, efficient close to workspace conceptual model Menu Examples 4

5 Dialog & Alert Boxes Dialog Box Collects several parameters of information at once, alternatively text May contain message, editable fields, buttons Frequently moded (e.g. Yes/No) Alert Box Notify user of a problem Contains message and acknowledgement button Moded (e.g. Do you want to quit and lose your work? Yes/No ) Dialog/Alert Box Examples Modal Interaction Most dialog boxes are modal frequently, the user must make a choice The user must respond to the dialog Many dialog boxes don t have close buttons, and won t go away until user responds! Usually better to have an explicit button to close a dialog box, rather than just click on X forces the user to make a conscious decision When the dialog box is active, the user cannot choose other widgets on the desktop Typically use sound feedback to alert the user if they click outside the dialog box 5

6 Control Objects Push and radio buttons, check boxes List box and tree view Scroll bar & sliders Typical Control Objects Buttons Selection of discrete parameters (actions, objects, properties, states) Push buttons e.g. OK Text or image label Radio Buttons & check boxes Add options as necessary Radio buttons for mutually exclusive options Typical Control Objects (2) Scroll bars and sliders Selection of continuous parameters, e.g. within a bounded range of values, volume control Labels Cannot be changed by user Editable Field String parameter must be supplied for default Allows editing, can retrieve string later 6

7 Typical Control Objects (3) List Box Select discrete values from a list of options combo box is a variation Optionally can select multiple entries, usually through the use of modifier keys Tree View Useful for hierarchical information E.g. file system Toolbars / Palettes Control objects are often grouped into toolbars and palettes Usually kept around the work area, so as to given an undisturbed view of the canvas Toolbars at top and bottom Palettes at sides and bottom Widget Properties Text Properties String, font, size, style, List contents (for list box widgets) Graphic Properties Colour, size (constant/variable - important for resizable screens), orientation, line width, Properties of widgets can be set/retrieved via associated methods Sometimes read from a resource file Also used for customization and internationalization\ These are statically set when the application starts up 7

8 Dynamic Widget Properties Run-time Properties: Acquired/Released E.g. menu systems are inactive most of the time Acquired when resources allocated Enabled/Disabled Grey out options that don t make sense in current context E.g. copy/cut only make sense when something is selected Dynamic Widget Properties (2) Feedback Active/Inactive Conveys widget is responding to user input (active mode vs. inactive mode) click! Echo data to user Reflects current state Internationalization & Localization Internationalization: Writing an application suitable for a global audience E.g. instead of using words directly in widgets, use resource identifiers and a database Localization: Customizing an application for a particular language or region Icons, colours, etc. may not have the same meanings in different countries (e.g. checks and X s) 8

9 Things to consider: Localization Colours, date/time formats, icons, messages, online help, personal titles, postal addresses, units of measurement, currency formats, graphics, labels, number formats, page layouts, phone numbers, sounds 9