CSE333

Course CSE333
Title User Interface Development
Credits 3
Course Coordinator

Rob Kelly

Description

Survey of user interface systems, including topics such as command language, windowing, multiple input/output devices, architecture of user interface management systems, and tool kits for designing user interfaces. Additional topics may include human factors, standards, or visual languages. Students participate in a project involving the design and implementation of a user interface system. This course is offered as both CSE 333 and ISE 333.

Prerequisite CSE 214 or CSE 260; CSE or ISE major
Course Outcomes
  • An ability to develop high-quality user interfaces for desktop, web-based, and mobile interactive systems
  • An understanding of guidelines, principles, and theories of user interface design
  • Working understanding of major interaction styles such as direct manipulation, command and natural languages, interaction devices, and collaboration
  • An ability to develop user interfaces using industry-standard software platforms including Windows, Java, and various web programming techniques
  • An understanding of usability issues

Textbook
  • Designing the User Interface:Strategies for Effective Human-Computer Interaction by Shneiderman & Plaisant; Addison Wesley (ISBN # 978-0321537355)
  • Core Java Vol 1-Fundamentals, 8th ed. by Horstmann & Cornell; Prentice Hall (ISBN # 978-0132354769)
  • Core Java Vol 1-Advanced Features, 8th ed. by Horstmann & Cornell; Prentice Hall (ISBN # 978-0132354790)

Major Topics Covered in Course
  • Usability of Interactive Systems
  • Guidelines, Principles, and Theories
  • AWT & Swing
  • Graphic Programming
  • Font, Color, and Images
  • Event Handling
  • Direct Manipulation
  • Menu Selection, Form Fill-in, and Dialog Boxes
  • Layout Management
  • Model-View-Controller Design Pattern
  • Swing Components
  • Command and Natural Language
  • Interaction Devices
  • Collaboration
  • Balancing Function and Fashion
  • Web Interface
  • Mobile and Handheld Interfaces
  • Tablet Interface
  • Information Search and Visualization

Laboratory Projects

Some sample projects are listed here:

  • Design and develop a simple GUI which allows users to draw several types of UML diagrams such as use case diagrams and class diagrams. The interface should allow users to enter text to label the diagram components, and provide buttons, pull-down and pop-up menus so that users can control the behavior of components in the diagrams. This project focuses on graphic programming, event handling, layout management, and using various user interface components. It can be a project of 3-4 weeks or be broken down into two smaller assignments, each for 1.5-2 weeks.
  • Design and develop a simple HTML browser. A "File" menu should allow users to "Open" a local HTML file and "Exit" the program. A tool bar with 4 buttons, namely, "Back", "Forward", "Reload", and "Home", should be implemented to support basic navigation. A combo box is used for the user to enter URL's, which maintains a list of 10 URL's that the user has entered most recently. For extra credits, a "History" button and a "Favorites" menu should be implemented. Also, the program can be extended to allow for managing multiple browser windows. Therefore, two more menu items, namely, "New" and "Close", should be added into the "File" menu. This project focuses on using various user interface components, handling events, sophisticated layout management, and using appropriate data structure such as link lists and trees. This can be a project of 2-3 weeks.
  • Design and develop a simple file browser which is similar to Microsoft Windows Explorer. This browser should include a menu bar which contains a "File" menu with possible menu items such as "New Folder", "Delete", "Rename", and "Close"; and a "View" menu with possible menu items such as "Icons", "Details", "Sort by Name", "Sort by Size", and "Sort by Date". Also included in the browser is a toolbar which includes buttons such as "Back", "Forward", "Up", and "Home"; and an address box which shows the full path of the currently selected item (either a file or a directory). The browser window should be split into a left pane and a right pane. The left pane presents the hierarchical structure of the files and directories. The right pane shows details of files and subdirectories inside the selected directory. This project focuses on using various user interface components, handling events, sophisticated layout management, and using data structures such as trees and tables. This project is also a good practice of the Model-View-Controller design pattern. It can be a project of 2-3 weeks.

Course Webpage

CSE333