© 1999 Franz Kurfess UI Development Tools 1 Course Overview  Introduction  Understanding Users and Their Tasks  Principles and Guidelines  Interacting.

Slides:



Advertisements
Similar presentations
Alternate Software Development Methodologies
Advertisements

Case Tools Trisha Cummings. Our Definition of CASE  CASE is the use of computer-based support in the software development process.  A CASE tool is a.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
© 1999 Franz Kurfess UI Development Tools 1 Course Overview  Introduction  Understanding Users and Their Tasks  Principles and Guidelines  Interacting.
UI Standards & Tools Khushroo Shaikh.
Software: Systems and Application Software
Automating Tasks With Macros
Lecture 7 Date: 23rd February
Chapter 1 The Systems Development Environment 1.1 Modern Systems Analysis and Design Third Edition.
CASE Tools CIS 376 Bruce R. Maxim UM-Dearborn. Prerequisites to Software Tool Use Collection of useful tools that help in every step of building a product.
Chapter 2: The Visual Studio.NET Development Environment Visual Basic.NET Programming: From Problem Analysis to Program Design.
Chapter 10 Application Development. Chapter Goals Describe the application development process and the role of methodologies, models and tools Compare.
Stanford hci group / cs376 research topics in human-computer interaction I/O Toolkits Scott Klemmer 29 November 2005.
Silberschatz, Galvin and Gagne ©2009 Operating System Concepts – 8 th Edition Chapter 2: Operating-System Structures Modified from the text book.
Chapter 2 Introduction to Systems Architecture. Chapter goals Discuss the development of automated computing Describe the general capabilities of a computer.
Your Interactive Guide to the Digital World Discovering Computers 2012.
Introduction 01_intro.ppt
MVC pattern and implementation in java
COMPUTER SOFTWARE Section 2 “System Software: Computer System Management ” CHAPTER 4 Lecture-6/ T. Nouf Almujally 1.
 2002 Prentice Hall. All rights reserved. 1 Introduction to Visual Basic.NET,.NET Framework and Visual Studio.NET Outline 1.7Introduction to Visual Basic.NET.
Copyright 2002 Prentice-Hall, Inc. Chapter 1 The Systems Development Environment 1.1 Modern Systems Analysis and Design.
Software Construction Lecture 10 Frameworks
An Introduction to Software Architecture
XIP™ – the eXtensible Imaging Platform A rapid application development and deployment platform Lawrence Tarbox, Ph.D. September, 2010.
DIFFERENCE BETWEEN ORCAD AND LABVIEW
IE 411/511: Visual Programming for Industrial Applications
11.10 Human Computer Interface www. ICT-Teacher.com.
Summary Data Modeling SDLC What is Data Modeling Application Audience and Services Entities Attributes Relationships Entity Relationship Diagrams Conceptual,Logical.
Why Java? A brief introduction to Java and its features Prepared by Mithat Konar.
Introduction to Eclipse Plug-in Development. Who am I? Scott Kellicker Java, C++, JNI, Eclipse.
COSC 3461: Module 6 UI Design in the Workplace. 2 What is User-Centered Design? Three major components: –Iterative design –Early focus on users and tasks.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Steps in simulation study 1. - Clearly understand problem - Reformulation of the problem 2. - Which questions should be answered? - Is simulation appropriate?
The Chameleon Development Environment The Chameleon™ Development Environment Application delivery using Microsoft Excel®
BLU-ICE and the Distributed Control System Constraints for Software Development Strategies Timothy M. McPhillips Stanford Synchrotron Radiation Laboratory.
CHAPTER TEN AUTHORING.
CS 390 Unix Programming Summer Unix Programming - CS 3902 Course Details Online Information Please check.
Design Rules-Part B Standards and Guidelines
1 Implementation support chapter 8 programming tools –levels of services for programmers windowing systems –core support for separate and simultaneous.
Swing and MVCS CompSci 230 Software Construction.
SE: CHAPTER 7 Writing The Program
Systems Analysis and Design in a Changing World, 3rd Edition
CHAPTER TWO INTRODUCTION TO VISUAL BASIC © Prepared By: Razif Razali 1.
CE Operating Systems Lecture 3 Overview of OS functions and structure.
Manag ing Software Change CIS 376 Bruce R. Maxim UM-Dearborn.
E.g.: MS-DOS interface. DIR C: /W /A:D will list all the directories in the root directory of drive C in wide list format. Disadvantage is that commands.
Chapter 2 Introduction to Systems Architecture. Chapter goals Discuss the development of automated computing Describe the general capabilities of a computer.
Java GUI building approaches Aleksandar Kartelj Faculty of Mathematics, Belgrade 11 th Workshop “Software Engineering Education and.
Frameworks CompSci 230 S Software Construction.
Chapter 6 CASE Tools Software Engineering Chapter 6-- CASE TOOLS
Introduction to Interactive Media Interactive Media Tools: Authoring Applications.
CASE (Computer-Aided Software Engineering) Tools Software that is used to support software process activities. Provides software process support by:- –
© 2013, published by Flat World Knowledge Chapter 10 Understanding Software: A Primer for Managers 10-1.
Architecture View Models A model is a complete, simplified description of a system from a particular perspective or viewpoint. There is no single view.
USER INTERFACE DESIGN (UID). Introduction & Overview The interface is the way to communicate with a product Everything we interact with an interface Eg.
1 Lecture 5: Interactive Tools: Prototypers (HyperCard, Director, Visual Basic), Interface Builders Brad Myers Advanced User Interface Software.
Chapter 1 Basic Concepts of Operating Systems Introduction Software A program is a sequence of instructions that enables the computer to carry.
Lesson 1 1 LESSON 1 l Background information l Introduction to Java Introduction and a Taste of Java.
Chapter – 8 Software Tools.
Introduction to Visual Basic. NET,. NET Framework and Visual Studio
Chapter 1 The Systems Development Environment
GUI Design and Coding PPT By :Dr. R. Mall.
Java Look-and-Feel Design Guidelines
Chapter 1 The Systems Development Environment
Chapter 1 The Systems Development Environment
Tools of Software Development
An Introduction to Software Architecture
Outline Chapter 2 (cont) OS Design OS structure
Chapter 1 The Systems Development Environment
Overview Activities from additional UP disciplines are needed to bring a system into being Implementation Testing Deployment Configuration and change management.
Presentation transcript:

© 1999 Franz Kurfess UI Development Tools 1 Course Overview  Introduction  Understanding Users and Their Tasks  Principles and Guidelines  Interacting with Devices  Interaction Styles  UI Design Elements  Visual Design Guidelines  UI Development Tools  Iterative Design and Usability Testing  Project Presentations and Selected Topics  Case Studies  Recent Developments in HCID  Conclusions

© 1999 Franz Kurfess UI Development Tools 2 Chapter Overview UI Development Tools  Motivation  Objectives  UI Development Tools  Tool Categories  User Interface Management Systems  Evaluation of UI Development Tools  Important Concepts and Terms  Chapter Summary

© 1999 Franz Kurfess UI Development Tools 3 Agenda  HW 10 Demos  hand in Project Documentation Part 2  hand in HW 5: CLUES evaluation

© 1999 Franz Kurfess UI Development Tools 4 Why UI Development Tools?  Write down three important reasons to use UI development tools! 

© 1999 Franz Kurfess UI Development Tools 5 Implementation Support for HCID  For three program development environments, describe the support they offer for the development of user interfaces

© 1999 Franz Kurfess UI Development Tools 6 Motivation  a substantial part of the development effort for software goes into the user interface  current technology allows complex user interfaces:  graphics, windows, multi-tasking, drag and drop, etc  differences in I/O devices, customization of user interfaces  competitive pressure  user interfaces are the most visible part of a system  fast development cycles  UI development tools are business opportunities  savings in development time, more attractive appearance,

© 1999 Franz Kurfess UI Development Tools 7 Objectives  to be familiar with different types of UI development tools  to know important selection criteria for UI development tools  to be able to select a UI development tool for a specific task  to have pointers for finding further information on UI development tools

© 1999 Franz Kurfess UI Development Tools 8 Evaluation Criteria

© 1999 Franz Kurfess UI Development Tools 9 UI Development Tools  characterization  requirements  benefits  drawbacks  selection of tools  UI development tool categories [ Mustillo ]

© 1999 Franz Kurfess UI Development Tools 10 [ Mustillo ] Characterization  software packages that provide automated support for any part of the UI development process  UI development tools make it easier to prototype systems  support many of the activities of a UI developer  not necessarily complex  e.g. a simple routine that controls the movement of a mouse, or  a complex software system that oversees the operations, administration, and maintenance of an entire system  e.g., telephone network

© 1999 Franz Kurfess UI Development Tools 11 [ Mustillo ] Requirements for Tools  help with the design of the UI  translation of the end user’s task specification  prototype the UI given the design specification  help create easy-to-use UIs  permit designers to rapidly evaluate different prototype designs and alternatives  permit non-programmers to design and prototype UIs  portability across different platforms and devices  easy to use

© 1999 Franz Kurfess UI Development Tools 12 [ Mustillo ] Benefits  simple GUI  for designing windows and screens  greater access and use  permit non-programmers to contribute their expertise  prototype development  can be used to build prototypes throughout the development cycle  some tools provide a mode for testing displays without compiling and executing the entire application  user input  users can evaluate each prototype and provide feedback  users are more satisfied with the final product

© 1999 Franz Kurfess UI Development Tools 13 [ Mustillo ] Benefits (cont.)  automatic code generation  some tools can generate part of the interface code  less code to write  generated code is more consistent  coding standards like naming conventions and standard headers and comments are maintained automatically  generated graphics code contains fewer bugs when isolated from the functional code  tool-generated display designs, components, and generated code can sometimes be reused  saves development time  provides consistency across different Uis  different applications are more likely to have consistent UIs if they are built using the same tool

© 1999 Franz Kurfess UI Development Tools 14 [ Mustillo ] Drawbacks  steep learning curve  learning to use a tool may be slow  especially if a tool has a complicated UI and is difficult to use  can make the development process less efficient  resistance to use  developers may resist using a tool  especially if they believe it makes work harder  hindrance to development  tool that automatically generates code can be helpful  it may also hinder development if poorly implemented

© 1999 Franz Kurfess UI Development Tools 15 [ Mustillo ] Drawbacks (cont.)  increased task difficulties  the automatically generated code can be extremely difficult to read and modify  integration with the rest of the application can be difficult  impact development schedule  can affect the UI development schedule  tool may be complex, slow, not robust, inconsistent, buggy  limited functionality  a tool may not take advantage of the hardware and native platform capabilities  often occurs with multi-platform tools  may implement only a set of display functionality that is common to all of the supported platforms

© 1999 Franz Kurfess UI Development Tools 16 [ Mustillo ] Selection of Tools  decisions  whether to use or not to use a UI development tool  if yes, which one?  considerations  benefits/drawbacks  application needs, development environment, time, resources, money,...  goals  simplify the development process  develop a better product

© 1999 Franz Kurfess UI Development Tools 17 UI Development Tool Categories  GUI builders  User Interface Management Systems (UIMS)  graphical user environments  specialized widgets  plotting and analysis tools  3D visualization tools  cross-platform development tools  GUI porting tools  application development tools  other development environments [ Mustillo ]

© 1999 Franz Kurfess UI Development Tools 18 [ Mustillo ] GUI Builders  simple interface development environment  developers can create and manipulate GUIs in a WYSIWYG environment  examples:  Builder Xcessory (Integrated Computer Solutions)  $3,200   X-Designer (Imperial Software Technology)  $3,500 

© 1999 Franz Kurfess UI Development Tools 19 [ Mustillo ] User Interface Management Systems  provide the functionality of GUI builder, plus  the capability to define and execute the functionality of the displays from within the tool  can generate code to build a version of the UI that will execute independently of the tool  high-level and interactive  to free designers from low-level details  to provide them with a comprehensive set of tools  separation of responsibility between UIMS and application  the application responsible for carrying out the work  the UIMS handles all communication details with the end user

© 1999 Franz Kurfess UI Development Tools 20 UIMS (cont.)  typically consist of three complementary parts:  a graphics or text environment  a linkage function that defines the operational aspects of a dialog, and couples the design of an interface to the functionality of its underlying system  a management function that controls interaction during run time (session tools)  underlying any UIMS is an interaction library  toolkit of routines for building UIs  UIMS take care of low-level things  like the drawing of dialog boxes, and the tracking of the cursor as the user moves the mouse [ Mustillo ]

© 1999 Franz Kurfess UI Development Tools 21 UIMS (cont.)  the applications programmer must deal with higher- level abstractions  for example “request an answer to this question from the user” reduces the amount of coding required for a GUI  also separates the UI specification from the underlying functionality  changes in one do not always require changes in the other  UIMS provide a way for a designer to specify the interface in a high-level language  UIMS then translate that specification into a working interface, managing both the details of the display and its associated input and output, and the interaction with the rest of the program [ Mustillo ]

© 1999 Franz Kurfess UI Development Tools 22 UIMS Architecture [ Mustillo ] Application UIMSToolkit Window management system & graphics package Operating System Hardware

© 1999 Franz Kurfess UI Development Tools 23 [ Mustillo ] UIMS Benefits  UI code is easier and more economical to create and maintain  low-level and repetitive tasks can be eliminated  e.g. menu handling, button construction  more time to concentrate on UI design aspects  UI code can take up to 80% of the total code  Use of UIMS can reduce development time and costs by a factor of 4X or more.  UI specifications can be represented, validated, and evaluated more easily.  less code to write  much of it is supplied by the UIMS

© 1999 Franz Kurfess UI Development Tools 24 UIMS Benefits (cont.)  better modularization due to the separation of the UI component from the application  UI can change without affecting the application  Changes in the application are possible without affecting the UI  level of programming expertise of the interface designers and implementers can be lower  hides much of the complexities of the underlying system  reliability of the UI will be higher  the code of the UI is created automatically from a higher- level specification

© 1999 Franz Kurfess UI Development Tools 25 UIMS Benefits (cont.)  promote the creation of higher-quality UIs  designs can be rapidly prototyped and implemented  possibly even before the application code is written  incorporation changes discovered during user testing  there can be multiple UIs for the same application  more effort can be spent on the tool than may be practical on any single UI  the tool will be used with many different applications  consistent UIs for different applications  if they are created using the same UIMS  involvement of domain experts  rather than having the UI created entirely by programmers [ Mustillo ]

© 1999 Franz Kurfess UI Development Tools 26 [ Mustillo ] UIMS Drawbacks  too much emphasis on control flow and screen design  neglecting other key elements of UIs  such as context-sensitive menus, direct manipulation of interactively created objects, macros, undo, etc.  level of abstraction is sometimes too low  forces the UI designer to deal with too many details  for a good reference on UIMS, see Myers, B.A. (1996): UIMS, Toolkits, Interface Builders.  available at dex.html dex.html

© 1999 Franz Kurfess UI Development Tools 27 [ Mustillo ] UIMS Examples  commercial, industrial-strength examples:  UIM/X (Visual Edge Software, Montreal)  $5,000  available in the CS dept.   TeleUSE (Aonix)  $7,500 

© 1999 Franz Kurfess UI Development Tools 28 [ Mustillo ] Graphical User Environments  also referred to as data visualization tools  provide dynamic data representations and visualization  developers can define and animate objects or scenes of objects  design static displays with standard or custom objects.  attach dynamic behavior to objects  useful for real-time applications

© 1999 Franz Kurfess UI Development Tools 29 Examples  DataViews (Dataviews Corporation)  $17.7K   SL-GMS (SL Corp.)  $12,500 

© 1999 Franz Kurfess UI Development Tools 30 [ Mustillo ] Specialized Widgets  provide specific functionalities  beyond the basic capabilities of a typical widget set like X/Motif  customization  individual widgets or libraries of widgets from different vendors can be integrated

© 1999 Franz Kurfess UI Development Tools 31 Examples  GroupKit (University of Calgary)  free  upkit/groupkit.html upkit/groupkit.html  INT Widgets (INT Corp.)  $1,750 - $3,000 

© 1999 Franz Kurfess UI Development Tools 32 [ Mustillo ] Plotting and Analysis Tools  let designers display technical data  via a variety of generic &/or customized graphs  technical analysis of data  ability provided by some tools  example  PV-Wave (Visual Numerics)  $ ? 

© 1999 Franz Kurfess UI Development Tools 33 [ Mustillo ] 3D Visualization Tools  specialized category of tools  generally most practical on hardware platforms that support the extensive calculations required in 3-D graphics  examples:  AVS/Express (Advanced Visual Systems)  $ ?   IDL (Research Systems)  $Free? 

© 1999 Franz Kurfess UI Development Tools 34 [ Mustillo ] Cross-Platform Development Tools  essential for multi-platform application  common “look-&-feel” across different platforms  layered Application Programming Interface (API) or a simulated API  API provides a common programming interface  across all the available platforms  adds a layer between the application and the native windowing system

© 1999 Franz Kurfess UI Development Tools 35 Examples:  XVT Development Solution for C and C++ (XVT Software)  $1,950 -$6,300  for C  for C++  Open Interface Element (Neuron Data)  $10,000 

© 1999 Franz Kurfess UI Development Tools 36 [ Mustillo ] GUI Porting Tools  automatically port UI code to a different platform.  native calls from the original platform are replaced with native calls of the new platform  example  Wind/U (Bristol Technology) ports Visual C++ UI by replacing Windows 95 or Windows NT with native platforms such as X/Motif  $ ? License 

© 1999 Franz Kurfess UI Development Tools 37 [ Mustillo ] Application Development Tools  miscellaneous capabilities beyond UI design and development  distributed application communications, real-time system capabilities, database access, expert system development  examples:  Galaxy (Ambiencia Information Systems, Brazil)  $ ?   RTworks (Talarian Corp.)  $ ? 

© 1999 Franz Kurfess UI Development Tools 38 [ Mustillo ] UI Development Environments  Visual BASIC  GUI builder with access to the Windows interface tools  can also be considered a visual programming language  Visual C++  example of a cross-platform development tool  standard development environment for both Windows 95 and Windows NT platforms  programming language  C/C++ compiler  Windows host integrated development environment (IDE)  supports design, development and debugging, and Microsoft Foundation Class (MFC) applications

© 1999 Franz Kurfess UI Development Tools 39 [ Mustillo ] Amulet  Automatic Manufacture of Usable and Learnable Editors and Toolkits (Brad Myers CMU)  UI development environment for C++  supports 3D, gestures, speech, multimedia, multiple users at the same time, WWW access  extensive end-user customization  set of flexible widgets  buttons, check boxes, radio buttons, option pop-up windows, menus, menu bars, scroll bars, scrolling windows, text input fields, selection handles  portable across X11, Microsoft Windows 95 and Windows NT, and the Mac 

© 1999 Franz Kurfess UI Development Tools 40 [ Mustillo ] Other UI Development Environments  Java  see below  Virtual Reality Modeling Language (VRML)  for 3D environments  prototyping tools  MacroMind Director  powerful demo tool

© 1999 Franz Kurfess UI Development Tools 41 Java Swing  GUI toolkit for developing windowing components  part of a new class library called the Java Foundation Classes (JFC)  swing makes up the bulk of JFC  evolution of the Abstract Windowing Toolkit (AWT)  platform independent  Pluggable Look and Feel (PL&F)  lets developers choose the appearance and behavior of the windowing components  Java, Mac, Motif, Windows  accessibility  compatibility with h/w and s/w designed for people with special needs (e.g., limited sight, motor problems, etc.)

© 1999 Franz Kurfess UI Development Tools 42 [ Mustillo ] Tools for Other Modalities  Speech Development Kits (SDKs), and Speech APIs (SAPIs)  are beginning to appear from companies like Microsoft and JavaSoft (Java Speech API)  dedicated toolkits for developing speech UIs and applications are emerging

© 1999 Franz Kurfess UI Development Tools 43 Examples  SpeechWorks 4.0  Applied Language Technologies (Altech)  DialogModules (high-level application building blocks), SpeechBuilder (set of tools for customizing DialogModules, and for creating other apps)  CSLUrp  Center for Spoken Language Understanding at the Oregon Graduate Institute. rp = rapid prototyper  Nuance Developers' Toolkit  open architecture  Java and ActiveX APIs, C and C++ interfaces  OpenSpeech Recognizer Developer Kit  Nortel Networks  Speech Assistant, Natural Language Assistant  Unisys

© 1999 Franz Kurfess UI Development Tools 44 [ Mustillo ] Evaluation of Tools  usability  should be easy to install, easy to learn, and easy to use  functionality  should match the requirements of the UI  should provide the widgets you need  should provide a convenient way to extend the widget set  flexibility  should be responsive to changing application requirements

© 1999 Franz Kurfess UI Development Tools 45 Evaluation of Tools (cont.)  portability  support  should include documentation, training, and other information provided by the vendor, as well as on-line technical help  cost  consider non-recurring costs (e.g., purchase price) as well as recurring costs (e.g., licensing, technical support, maintenance, updates, training, etc.)

© 1999 Franz Kurfess UI Development Tools 46 Post-Test [ Dix, Preece, Mustillo ]

© 1999 Franz Kurfess UI Development Tools 47 Evaluation  Criteria [ Dix, Preece, Mustillo ]

© 1999 Franz Kurfess UI Development Tools 48 Important Concepts and Terms  3D visualization tools  application development tools  cross-platform development tools  graphical user environments  graphical user interface (GUI)  GUI builders  GUI porting tools  human factors engineering  human-machine interface  input/output devices  Java Swing  plotting and analysis tools  rapid prototyping  user interface design  UI development tools  UI management systems  user requirements  Visual Basic  What You See Is What You Get” (WYSIWYG)  widget  window

© 1999 Franz Kurfess UI Development Tools 49 Chapter Summary  UI development tools facilitate the efficient design and implementation of consistent user interfaces  re-use of components and libraries with frequently used functions and objects (“widgets”)  some tools provide support for the development of cross-platform systems with consistent, but platform- specific interfaces  currently the main emphasis is on tools for visual user interface design (GUIs)

© 1999 Franz Kurfess UI Development Tools 50