User Interface Design Principles

Interaction Design ISB36403

• The course is about design for desktop, mobile, and web.
• Part 1 focuses on desktop design.
• The outline includes designing for desktops, anatomy of desktop apps, windows on desktops, menus, toolbars, palettes, sidebars, pointing, selection, and direct manipulation, design for web, page-based interactions, the mobile web, and the future, design for mobile and other devices, anatomy of a mobile app, mobile navigation, content, and control idioms, multi-touch gestures, inter-app integration, and other devices.

Introduction

• Modern desktop interfaces are derived from the Xerox Alto.
• Macintosh has profoundly influenced technology, design, and culture.
• The lecture focuses on design considerations for modern desktop GUIs.
• It focuses on the behavior of windows, their structural and navigational components, and pointer-driven selection and manipulation.

Anatomy of a Desktop App

• Desktop apps have primary and secondary windows.
• The primary window structure contains menus, toolbars, index panes, tool palettes, and sidebars.

Primary and Secondary Windows

• A window is a movable and resizable container for content and app controls.
• Designing an application involves one primary window and potentially multiple secondary windows.
• The primary window typically presents document-based content, manipulatable elements, and customizable configurations, often with content divided into panes.
• Secondary windows often present supporting properties or functions (dialogs) and are often removable panes or palettes.

Primary Window Structure

• The primary window is divided into functional areas: a content or work area, a menu bar, and toolbars, panels, or palettes.

Menus and Toolbars

• Menus: collections of actions accessed by clicking on words arranged near the top of the screen.
• Standardization rules govern the placement and functionality of menus based on the operating system.
• Toolbars contain more specific application actions. Most commonly, they are triggered from menus and comprised of icons.

Content Panes

• Content panes are the primary work areas in desktop applications.
• An example is the editable view of a form or a document.
• They are generally divided into content-bearing panes.
• Some applications (e.g., CAD) may have multiple content panes.

Index Panes

• Index panes provide navigation and access to documents or objects that appear in the content view.
• They can display content configurations, such as email software organization.
• Objects can be added and removed from these panes without affecting the existing contents.

Tool Palettes

• Tool palettes allow rapid switching between application modes by selecting a tool.
• Each tool is associated with different operations (actions).
• Tool palettes change cursor visuals to match functionality.
• They're typically vertically placed on the primary window's left border.

Sidebars

• Sidebars allow manipulation of object or document properties efficiently without modal or modeless dialogs.
• They streamline complex authoring application workflows.
• Sidebars are usually positioned on either the right or left side of the primary window.
• They may also be found on the bottom of the window or as substitutes for the window itself.

Windows on the Desktop

• Overlapping windows, tiled windows, virtual desktop spaces, full-screen applications, multi-paned applications, and window states are all part of the desktop environment.
• Important considerations include how windows and documents relate, creating effective use of windows, avoiding unnecessary windows and rooms, and establishing purpose for each part of the window.

Overlapping Windows

• Windows can be moved over or stacked, independently resized, and control transferred between them easily.
• Without assisting navigation between applications, execution can be impractical.
• Misclicks can cause applications to unexpectedly disappear, and many layered windows can obscure content.

Tiled Windows

• Tiled windows allow users to have multiple applications active simultaneously.
• They divide the screen into rectangular tiles, making navigation fairly straightforward.
• However, overlapping applications can obscure certain elements.

Virtual Desktop Spaces

• Virtual desktop managers extend the display's size by adding virtual screens.
• Switching between them allows managing multiple applications efficiently.

Full-Screen Applications

• Full-screen applications occupy the entire screen, making the application the sole focus.
• They provide a dedicated workspace with better pixel usage and visual clarity.

Multi-Paned Applications

• Independent views or panes within a full-screen application improve visual clarity.
• Different panes handle various tasks within a single window.
• It simplifies display management by consolidating several functions into one area.

Window States

• Minimized, maximized, and pluralized states define window configurations (collapsed, full-screen, or in-between states).

Windows and Documents

• Multiple Document Interface (MDI) applications can use multiple sheets within a single application.
• Single Document Interface (SDI) applications need separate instances for each sheet.
• MDI applications tend to consume more resources than SDI applications.
• Navigation in MDI applications may require careful window management.

Making Use of Windows

• Applications use primary and secondary windows (dialog boxes) to structure functions and workflows.
• Defining the application framework requires careful consideration of how to use windows.

Unnecessary Rooms

• Unnecessary rooms are secondary windows used for functions that should be integrated into the primary window.
• Provide functions in the area where they are used, just like dialog boxes.

Necessary Rooms

• Necessary rooms are windows where functions are used in sequences that extend beyond the typical use case. Function location is critical to application workflow.

Menus

• Menus act as pedagogical tools for new users, providing context-aware guidance.
• Icons on menus should follow consistent visual patterns.
• Menus can also be disabled where functions are not applicable.

Accelerators

• Providing standard accelerators, showing how to access them, and ensuring they are usable are major considerations when designing the menu system.

Access Keys

• Access keys add additional ways to access menu commands.

Cascading Menus vs. Monocline

• Using cascading menus can make it difficult to browse the commands.
• Modern applications use a single level, simplifying command organization.

Toolbars, Palettes, and Sidebars

• Toolbars are collections of icon buttons displayed horizontally or vertically along the application's border.
• Palettes group tools that relate to a specific operating mode, such as creating, selecting, or editing objects.
• Sidebars are commonly displayed to the side of the window and are used for displaying related properties.

Toolbars and Menus

• Menus organize complete toolsets for new users, and toolbars offer quick access for experienced users.
• Experience with menus and toolbars varies between users, and they use them in different ways.

Toolbars versus Modeless Dialogs

• Toolbars are visually distinct from modal dialog boxes and continuously available.

Toolbar Buttons

• Toolbar icons do not necessarily need to explain functionality; their purpose is visibility and ease of distinction.

Tool Tips

• Tooltips provide context for toolbar buttons.

Disabling Toolbar Controls

• Toolbar controls are disabled when they are not applicable to the current selection.

Toolbar Control Proliferation

• Modern toolbars include icons and buttons, sometimes combined in visually rich menus.

Movable Toolbars

• Toolbars can be docked or dragged off the toolbar for flexibility.

Customizable Toolbars

• Advanced users can often customize toolbars, including the "ribbon control."

Contextual Pop-Up Toolbars

• Contextual toolbars appear when certain selections are made.

2D/3D Object Manipulation

• 2D object manipulation includes object repositioning, resizing, and connecting tools.
• 3D object manipulation has different considerations, including display issues and input issues based on the 3D environment.

Pointing, Selection, and Direct Manipulation

• Systems used for pointing, navigating, and selecting objects.
• Drag and drop, and all related operations, require carefully designed methods for feedback in order to provide an appropriate user experience.

Drop Candidates

• Drop candidates require clear visual indication of their receptiveness.
• Drag cursor visual cues identify the source object during the drag process.

Control Manipulation

• Control manipulation tools include modal tools and palettes, charged cursor tools, 2D/3D object manipulation commands, and other interaction functions.

Q&A

• A question-and-answer session.

Next Session

• Next session focuses on designing web interfaces.

Test your knowledge on essential direct manipulation techniques and the visual aspects of user interfaces. Explore concepts such as drag-and-drop, the functions of primary and secondary windows, and the significance of menu item design in desktop applications.