1 / 50

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

conlan
Download Presentation

Course Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Course Overview

  2. Bridge-In Pre-Test Motivation Objectives Evaluation Criteria UI Development Tools Tool Categories User Interface Management Systems Evaluation of UI Development Tools Post-Test Evaluation Important Concepts and Terms Chapter Summary Chapter OverviewChapter-Topic

  3. Agenda • HW 10 Demos • hand in Project Documentation Part 2 • hand in HW 5: CLUES evaluation

  4. Why UI Development Tools? • Write down three important reasons to use UI development tools!

  5. 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,

  6. Objectives

  7. Evaluation Criteria

  8. UI Development Tools • characterization • requirements • benefits • drawbacks • selection of tools • UI development tool categories [Mustillo]

  9. 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) [Mustillo]

  10. 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 [Mustillo]

  11. Benefits • simple GUI • for designing windows and screens • greater access and use • permit non-programmers and human factors specialists to contribute their expertise • one does not need to be a programmer to use these tools • prototype development • can be used to build prototypes throughout the development cycle • some tools provide a test/prototype 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 [Mustillo]

  12. Benefits (cont.) • automatic code generation • some tools can automatically generate at least 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. [Mustillo]

  13. 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, but it may also hinder development if poorly implemented [Mustillo]

  14. Drawbacks (cont.) • increased task difficulties • if the code generator is not properly designed, the generated code can be extremely difficult to read and modify • also inefficient and can make integration with the rest of the application a difficult task • impact development schedule • can affect the UI development schedule if the tool’s performance is poor • i.e. slow, not robust, inconsistent, buggy • limited functionality • functionality of the final product can be limited if a tool does not take advantage of the hardware and native windowing 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 [Mustillo]

  15. 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 [Mustillo]

  16. 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]

  17. GUI Builders • simple interface development environment • developers can create and manipulate GUIs in a WYSIWYG environment • examples: • Builder Xcessory (Integrated Computer Solutions) • $3,200 • http://www.ics.com/Products/BX40/BX40Datasheet/Welcome.html • X-Designer (Imperial Software Technology) • $3,500 • http://www.dvcorp.com/mktg/xd.html [Mustillo]

  18. User Interface Management Systems (UIMS) • provide the functionality of GUI builder as well as 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, and to provide them with a comprehensive set of tools • mediate the interaction between the end user of an application and the application code itself • separation of responsibility between the UIMS and the application • the application responsible for carrying out the work • the UIMS handles all communication details with the end user [Mustillo]

  19. 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, i.e., a 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 • the applications programmer must deal with higher-level abstractions • for example “request an answer to this question from the user” [Mustillo]

  20. UIMS (cont.) • reduces the amount of coding required for a GU • 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]

  21. UIMS Toolkit Window management system & graphics package Operating System Hardware UIMS Architechture Application [Mustillo]

  22. UIMS Capabilities [Mustillo]

  23. 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 [Mustillo]

  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 • ;evel of programming expertise of the interface designers and implementers can be lower • the UIMS 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

  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]

  26. 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 an excellent reference on UIMS, see Myers, B.A. (1996). UIMS, Toolkits, Interface Builders. • available at http://www.cs.cmu.edu/afs/cs/user/bam/www/toolnames/index.html [Mustillo]

  27. UIMS Examples • Commercial, industrial-strength examples: • UIM/X (Visual Edge Software, Montreal) • $5,000 • http://www.vedge.com/prods/uimx.html • TeleUSE (Aonix) • $7,500 • http://www.aonix.com/Products/teleuse/teleuse.html [Mustillo]

  28. 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 [Mustillo]

  29. Examples • DataViews (Dataviews Corporation) • $17.7K • http://www.dvcorp.com/mktg/dv.html • SL-GMS (SL Corp.) • $12,500 • http://www.sl.com

  30. 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 [Mustillo]

  31. Examples • GroupKit (University of Calgary) • free • http://www.cpsc.ucalgary.ca/projects/grouplab/projects/groupkit/groupkit.html • INT Widgets (INT Corp.) • $1,750 - $3,000 • http://www.int.com/products

  32. 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) • $ ? • http://www.vni.com/products/wave/newoverview.html [Mustillo]

  33. 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) • $ ? • http://www.avs.com/products/index.htm • IDL (Research Systems) • $Free? • http://www.rsinc.com/idl/index.html [Mustillo]

  34. 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 [Mustillo]

  35. Examples: • XVT Development Solution for C and C++ (XVT Software) • $1,950 -$6,300 • http://www.xvt.com/docs/dsc.html for C • http://www.xvt.com/docs/dscpp.html for C++ • Open Interface Element (Neuron Data) • $10,000 • http://www.neurondata.com/Products

  36. 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 • http://www.bristol.com/Products/windu.html [Mustillo]

  37. 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) • $ ? • http://www.ambiencia.com • RTworks (Talarian Corp.) • $ ? • http://www.talarian.com/rtworks.html [Mustillo]

  38. UI Development Environments • Visual BASIC • example of a GUI builder that provides 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 [Mustillo]

  39. 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 • http://www.cs.cmu.edu/~amulet [Mustillo]

  40. Other UI Development Environments • Java • see below • Virtual Reality Modeling Language (VRML) • for 3D environments • prototyping tools • MacroMind Director • powerful demo tool [Mustillo]

  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.)

  42. 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 [Mustillo]

  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

  44. 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 [Mustillo]

  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.).

  46. [Mustillo]

  47. [Mustillo]

  48. Important Concepts and Terms graphical user interface (GUI) human factors engineering human-machine interface input/output devices Rapid Prototyping user interface design user requirements What You See Is What You Get” (WYSIWYG) window

  49. Chapter Summary

More Related