Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog

ERG5203 Graphical User Interfaces
Annotated Syllabus

Last Update: 2010-10-01 by Jörn Loviscach

• Monday (Sep 27) morning

  • Who am I? Examples of non-standard user interfaces

  • Outline of this course

  • From which level of knowlegde do we start?

  • Computer usage in the 21^st century: It’s not all about buying flight tickets, but includes search/serendipity, relaxation, amusement, curiosity, learning, exertion, cooperative work, motivation, triumph, giving and receiving recommendations, …

  • A brief history of human-computer interfaces

    • 1968. Seminal works: Ivan Sutherland, Douglas Engelbart

    • 1973, 1984/1985. Windows, Icons, Menus, Pointing Device (WIMP) and a desktop: Xerox Alto, Apple Lisa, X Window System, Microsoft Windows

    • 1991. Browser-based

    • 1993. Mobile, touch, apps

    • Today. Tangible/haptic, aural, speech-based, camera-based, 3D VR/AR/MR, zoomable, wearable, affective, brain-controlled, multimodal, intelligent, …

  • Graphical User Interface (GUI) technology for traditional apps

    • Defining GUIs by program (example: Windows Forms) vs. defining GUIs by declaration (examples: XAML, which is a full-blown concise way to store objects, and XUL). The declarative approach is related to using classic resource files.

    • WPF in Microsoft Visual Studio; code-behind; InitializeComponent; typing XAML with IntelliSense; using the property editor; event-based programming (event handlers, only one thread, etc.); accessing widgets

    • Model View Controller (MVC) pattern, Model View ViewModel (MVVM) pattern

    • Localization

  • Traditional GUI widgets and their use, explained using WPF

    • Menus (<Menu>, <MenuItem header=...>), submenus, checkmarks (IsChecked, IsCheckable), separators; context menus (<... . ContextMenu><ContextMenu>...), toolbars (ToolBarTray, ToolBar without Margin)

    • Checkboxes (independent of each other), radio buttons (exclusive alternatives; need at least two in a group), grouping

    • Editable fields, labels, lists, combo boxes, tables, trees

    • Sliders, scroll bars, progress bars

    • Dialog boxes (non-modal: .Show(), buttons Apply, Close; modal: .ShowDialog(), default buttons, IsDefault, IsCancel, DialogResult, buttons OK or more specific, Cancel); off-the-shelf dialogs (MessageBox, Microsoft.Win32.OpenFileDialog, Microsoft.Win32.SaveFileDialog)

    • Drawing (retained mode); better do this only on the Canvas element to prevent automated layout of the elements of the drawing

    • Drag & drop

    • Automated Layout: docking, grids (remove absolute dimensions!), tabs(<TabControl><TabItem Header=...>), ScrollViewer, Expander, GridSplitter; nesting

    • General considerations: workflow, grouping, supporting the TAB key (IsTabStop, TabIndex), alignment, visual balance; disabling (IsEnabled); standards for menus; naming, capitalization, ellipses, accelerators/shortcuts (underscore, InputGestureText); tooltips (ToolTip)

• Monday (Sep 27) afternoon: WPF lab

• Tuesday (Sep 28) morning

  • Web 2.0 design patterns

    • Basic elements: Bill Scott and Theresa Neil

    • Elements for social sites: Christian Crumlish and Erin Malone

    • Higher-level constructs, also for non-Web apps: Jenifer Tidwell

  • First steps into Web 2.0 GUI development

    • Editing, running, and debugging HTML, CSS, JavaScript, and PHP: To avoid installing software in the lab, we can (under-)use Microsoft Visual Studio as an editor for HTML and CSS, Server2Go as a personal, PHP-enabled Web server, and Microsoft Internet Explorer for debugging. Better choices, which require installation, however, would be Aptana Studio and/or Firebug.

    • The bare essentials of HTML and CSS

      • Separating style from content

      • Inline styles (as attributes), internal and external stylesheets

      • #id and .class, inheritance

    • The bare essentials of JavaScript

      • Separating content, style, and behavior

      • Hiding JavaScript from the browser: Escape </ to <\/ in HTML; wrap scripts in //<![CDATA[ … //]]> in XHTML.

      • Scoping: local to function with the keyword var, but not local to block

      • Type coercion (dangerous!), e.g., ""==0 evaluates to true, because JavaScript coerces types, better use === and !==

      • Arrays and Objects; JSON

      • Event handling in DOM Level 0 (onclick=...) and DOM Level 2 (addEventListener, not in Microsoft Internet Explorer, a vital reason to use libraries that hide this difference)

      • Forms, onsubmit="return false" to ensure the buttons as such do not work without JavaScript

      • Same Origin Policy

    • Basic elements and use of jQuery, which is one of many AJAX frameworks

    • Basic AJAX communication with a Server using jQuery and PHP

• Tuesday (Sep 28) afternoon: jQuery lab

• Wednesday (Sep 29) morning

• Usability and user experience: foundations

  • Objectives

    • Efficiency? Simplicity? Consistency? Responsiveness? Conflict of interests? (Should a game be efficient? And: quick learning, but suboptimal efficiency in the long run vs. slow learning vs. optimal efficiency in the long run)

    • Novelty vs. standards

    • Hedonic qualities? In particular, aesthetic Qualities?

    • Corporate interests, e.g. selling the more expensive products or selling ads (think Google)

    • Accessibility

  • Standards ISO 9241, ISO 13407

    • ISO 9241-10 (Dialog principles): suitability for the task, self-descriptiveness, controllability, conformity with user expectations, error tolerance, suitability for individualization, suitability for learning

    • ISO 9241-12 (Presentation of information): clarity, discriminability, conciseness, consistency, detectability/recognizability, legibility, comprehensibility

  • Selected theoretical basics

    • Fitts’ law, in particular in reference to a menu sitting in direct adjacency to the screen boundary; Hick’s law

    • Mental models, “Intuitivity”

    • Metaphors, which may be taken too far

    • Perceived affordances

    • Activity-based design

    • Models of user experiences: example

• Usability methods 1 2 3

  • Idea development

    • Use cases

    • Personas

    • Paper prototyping

  • Analysis

    • Heuristics

    • Cognitive walkthrough

    • GOMS

    • Statecharts

  • User testing

    • Surveys: Likert scale, asking the right questions right, validity, internal/inter-rater reliability, Cronbach's alpha;

    • Measurements, ANOVA, multiple comparisons

    • Think aloud

    • Poor man’s eye tracker

    • Only five users?

    • Ready-made questionnaires: AttrakDiff

    • Steve Krug: usability testing on 10 cents a day

  • User behavior in the wild

    • Google Analytics

    • HEART framework

  • Iterative process

• Hot topics

  • The cost of features (Alan Cooper)

  • User-centered design? “We don’t refer to bicycles as ‘cyclist-friendly’.” Gerry McGovern

  • Usability testing considered harmful (some of the time)

  • Perpetual beta: Has usability become obsolete?

• Wednesday (Sep 29) afternoon: UI studies lab