3461 Course Summary COSC 3461A Fall 2002

3461 Intro to UI Design  Course plan: Implementation, Evaluation, Design  Human Computer Interaction is an interdisciplinary field  Benefits of a good UI design

3461 Interaction Style Categories  Command-line interfaces  Menus  Natural Language  Q&A & query dialogs  Form-fills and spreadsheets  WIMP  Point and click  Three-dimensional interfaces Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Program Categories  Sequential  Event-driven Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Types of Events  User-initiated events  System-initiated events Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Java Events  Event class hierarchy  Event sources  E.g., mouse events, key events  Listening for events  Using Listeners vs. Adapters

3461 Swing Basics  AWT vs. Swing  Creating a window using JFrame  JFrame’s content pane

3461 Wimp Elements  Windows  Icons  Pointers  Menus Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Containment Hierarchy  Top-level containers  E.g., JFrame  Intermediate containers  E.g., JPanel  Automic components  E.g. JButton

3461 Menus  Recognize vs. recall  Parts  E.g., menu bar  Types  E.g., popup, cascading  Features  e.g., separators  Designing

3461 Widgets  Buttons  Combo boxes  Tool bars  Text components  Sliders  Scrollbars  etc. Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Buttons  Push  Radio  Checkbox  Modal Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Text Components  Output (aka non-editable)  Labels  Labelled borders  Tool tips  Message Boxes  Input/output (aka editable)  Text fields  Text areas  Editable combo boxes  Dialog boxes Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Validating Input  Keystroke-level  Focus-level  Data-model level Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Navigation Techniques  Clicking with mouse pointer  Generates mouse/focus events  TAB key  Generates focus event  ENTER key  Generates key/action events Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Widget/Component Layout  The task: determine size and position of each component  Component size properties critical  These are…  Preferred size  Minimum size  Maximum size  Used in different ways (sometimes ignored!) by layout managers

3461 Widget Layout Models  Absolute (aka fixed)  Control for component size and position  Struts and springs  Control for component position  Variable intrinsic size  Control for component size Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Java’s Layout Managers  BorderLayout  FlowLayout  GridLayout  BoxLayout  GridBagLayout  CardLayout  OverlayLayout  etc. Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Layout Design  What do users want in a layout?  What are the goals of a good layout?  What are the qualities of a good layout?  How can layout complexity be quantified?  Balance  Symmetry  Regularity  Predictability  Sequentiality  Economy  Unity  Proportion  Simplicity  Groupings

3461 Output Model  Coordinate systems  Device  Physical  Things to know about:  Pixels, raster, display size, resolution, video RAM requirements, aspect ratio, dot pitch  Color models  RGB, HSB

3461 UI Design in the Workplace  Roles and required skills  User Centered Design Process  User, designer, & programmer models Graphic Designers GUI Programmers (Software Developers) UI Designers Usability Testers Technical Writers/Documentation Marketing

3461 Java’s Graphics Features  Drawing primitves for…  Shapes, lines, curves, images, text  Text characteristics  Font family, size, style  Font metrics  Images  File formats

3461 Images  Images  File formats  gif, jpg, tiff, bmp  Drawing images in panels  Animation user threads  Timer class

3461 User Help  Error Messages  Documentation Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Model-View-Controller Architecture  Model  Holds & manages data  View  Implements visual display of data/component  Controller  Maps input into commands

3461 MVC and Java/Swing  Know how MVC is implemented in Swing component  View & controller combined into UI delegate

3461 Design for Humans  SR Compatibility  S = Stimulus, the input device that is being manipulated or stimulated  R = Response, the visual, aural, or kinesthetic sense that is affected by the stimulus  Compatibility refers to the correctness of the match between the stimulus and the response

3461 Senses  Of primary concern…  Vision  Aural  Kinesthetic Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 2D vs 3D Interaction  Dimensions vs degrees of freedom

3461 Human Limits and Capabilities  Bailey’s framework  The two-handed desktop interface lecture…  Bimanual control +  Handedness +  Scrolling =  New keyboard design

3461 Types of Limits  Sensory (visual/audio intensity/frequency)  Responder (Fitts’ law)  Cognitive (short-term memory)

3461 Charactersistics of Good UIs  Consistency  Lexical, Syntatic, Semantic  Feedback  Lexical, Syntatic, Semantic  Use of hierarchy and grouping  Explicitly shows states and state changes  Avoids overload Know.. What they are Advantages Disadvantages Features Comparisons Etc.

3461 Readings  Java/Swing Tutorial  MVC article by Fowler  Java API (Swing components and other classes used in 3461)  PowerPoint slides  Demo program code and documentation  etc.

3461 Thank you!