Computer Graphics and Interactive Systems

Computer Graphics and
Interactive Systems Laboratory


User Interface Design

  1. Objectives
  2. Specialization and Activities
  3. Course Syllabus
  4. Laboratory Works
  5. Project Activity
  6. Knowledge Assessment
  7. References



The course emphasizes the problems of the user interface design from the point of view of the software designer. The presentation concerns on the notions and concepts involved in the user interface development: communication concepts, knowledge modelling into the interactive component, commands, presenters, structure modelling, user interface representation, interaction techniques, interaction style, prototyping, control structures, user interface development tools, and so on. A user interface design methodology  is detailed. The formal design as the main phase of the  methodology involves a set of steps such as  task analysis, task model, user model, formal specification, prototyping and evaluation.

Lecturer: Prof. Dorian Gorgan

Specialization: Computer Science and Information Technology

Year of study: 4th year, 1st semester

Teaching language: Romanian, English

Activities: 2C (Course), 1L (Lab), 1P (Prj) each week


Course Syllabus:

Introduction. Interactive Applications
Concepts of the GUI Development Process
Communication Concepts
Output communication concepts
Input communication concepts
User Interface Design Methodology
User centered development methodology
Lifecycle models
Usability Engineering Lifecycle
User Requirements
Task Description and Task Analysis
User Interface Evaluation
User Interaction Techniques
Interaction Styles
Command based interaction style
Continuous interaction style
GUI  development principles and guidelines
Web Technologies
Interactive Application Development Environments

Laboratory Works:

Basic CSS & HTML
Introduction to JavaScript and DHTML
Asynchronous JavaScript – AJAX technology
Dynamic user interface through JavaScript – jQuery library
Adobe Flash – introduction (basic animations)
Adobe Flash – Action Script 3
Adobe FLEX – introduction (interface prototype)
Adobe FLEX – Action Script 3.0 (add functionalities to the interface prototype)
Communication between Adobe Flash, Adobe FLEX and JavaScript
Java – JavaFX technology
Microsoft Blend – interface design with Microsoft Expression Blend
Microsoft Silverlight – introduction
Microsoft Silverlight – functionality


Project Activity:

Administratives. Thems, methodology, deliverables, project evaluation
Project proposal. User evaluation plans
Task description and analysis
Low fidelity prototyping and scenarios
Walkthrough evaluation
Heuristic evaluation
Prototype plan
High fidelity prototyping
Use test cases
Prototype evaluation and user reports
Iterative prototype enhancement
Final graphical user interface
Project documentation
Project presentation and evaluation


Knowledge Assessment:

Assessment approach: There are four types of assessment - written paper (E), practical coloqvium (C), home works (T), and activity at the course (AC).
Mark computation: M=0,4*E+0,5*[(C+T)/2]+0.1*AC
Graduate req.: M≥5; E≥5; C≥5; T≥5



1. Course Resources Repository,
2. Shneiderman B., "Designing the User Interface. Strategies for Effective Human Computer Interaction", Addison-Wesley, 1992.
3. Hix, D., Hartson, H.R., "Developing User Interfaces. Ensuring Usability Through Product & Process", John Wiley & Sons, Inc., New York, 1993.
4. Newman W.M., Lamming M.G., "Interactive System Design". Addison Wesley, 1996.