System Design: User-Centered Approach

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

What is the primary purpose of requirement analysis in the overall design process?

  • To prioritize user experience and usability standards.
  • To establish the goal for the development of a system from the viewpoint of the target users. (correct)
  • To determine the software interface components.
  • To create a rough visual profile of the interface.

User analysis is entirely separate from the original requirements analysis and does not influence it.

False (B)

What is the main goal of scenario and task modeling in the design process?

Identify the application task structure and the sequential relationship between the different elements of the program or system

The process of creating a rough visual profile of an interface is known as ______.

<p>storyboarding</p> Signup and view all the answers

Match the hardware platforms with their typical use cases:

<p>Desktop = Office and multitasking Smartphones = Quick, simple tasks Tablets = Larger-screen mobile tasks TV/Consoles = Limited interaction</p> Signup and view all the answers

What does WIMP stand for in the context of graphical user interfaces?

<p>Windows, Icons, Menu, Pointer. (C)</p> Signup and view all the answers

Overlapping windows are commonly used in mobile phones due to their large display sizes.

<p>False (B)</p> Signup and view all the answers

What is an 'earcon' and for whom is it primarily designed?

<p>A brief distinctive sound used to represent a specific event or convey other information; people with special needs.</p> Signup and view all the answers

A Windows Metro-style interface introduced a new type of icon called a ______ that can dynamically change its appearance.

<p>tile</p> Signup and view all the answers

What are the three subtasks involved in the selection of a menu item?

<p>Activating the menu, scanning the items, and selecting an item. (D)</p> Signup and view all the answers

Before the mouse era, human-computer interaction primarily involved voice commands.

<p>False (B)</p> Signup and view all the answers

Name three direct manipulation actions made possible through pointer-based interaction.

<p>Drag and drop, copy and paste, rubber banding</p> Signup and view all the answers

A ______ is a GUI component used for making short to medium alphanumeric input.

<p>text box</p> Signup and view all the answers

Which GUI component is best suited for collecting long and interrelated input from a user?

<p>Forms. (C)</p> Signup and view all the answers

A dialog box is best used for collecting long and interrelated input due to its flexible design.

<p>False (B)</p> Signup and view all the answers

Describe what a 'combo box' is and how it functions.

<p>A drop-down list box that includes an option for the user to either choose an option from the list or type in their own option in the text box.</p> Signup and view all the answers

A 3D interface provides the perception of ______.

<p>depth</p> Signup and view all the answers

What is a common limitation when operating 3D interfaces using 2D controls like a mouse or touch screen?

<p>It often leads to exhaustion and inconvenience for the users. (A)</p> Signup and view all the answers

Smartphones and tablets lack advanced sensors for 3D spatial input, limiting their interaction with 3D interfaces.

<p>False (B)</p> Signup and view all the answers

In what contexts are 3D interfaces now commonly used?

<p>Developing video games and very large displays</p> Signup and view all the answers

______ is a way to design a website or application at a structural level, focusing on content and functionality.

<p>Wire-framing</p> Signup and view all the answers

What is the primary advantage of using wire-framing early in the development process?

<p>Rearranging elements quickly and easily for iteration and approval. (A)</p> Signup and view all the answers

Wire-framing involves creating high-fidelity prototypes with detailed visual designs from the outset.

<p>False (B)</p> Signup and view all the answers

Name three tools that can be used for wire-framing.

<p>Fluid UI, Wireframe CC, Sketch</p> Signup and view all the answers

What is the main purpose of using basic shapes and elements in wire-framing?

<p>To block out where each piece of content and UI element will appropriately fit. (C)</p> Signup and view all the answers

Flashcards

Requirement Analysis

Initial investigation from a user's perspective to optimize system-user interaction by understanding user needs, context, and existing systems.

User Analysis

Reinforces initial requirement analysis, focusing on user experience and prioritizing usability standards to identify supplementary UI necessities.

Scenario and Task Modeling

Identifies the application task structure and relationships between program elements. Allows assessment of system appropriateness and requirement feasibility.

Interface Selection and Consolidation

Selecting and integrating software interface components, interaction techniques, and hardware specifications into a practical, working package.

Signup and view all the flashcards

Desktop hardware platform

Suitable for office and multitasking environments like documentation.

Signup and view all the flashcards

Smartphones hardware platform

Best for quick, simple tasks like calls.

Signup and view all the flashcards

Tablets hardware platforms

Ideal for larger-screen mobile tasks, such as sales pitches.

Signup and view all the flashcards

Embedded Systems hardware platforms

Designed for specific, on-the-spot tasks, like printers.

Signup and view all the flashcards

TV/Consoles hardware platforms

Suited for limited interaction, such as gaming.

Signup and view all the flashcards

Kiosks hardware platforms

Used for public, short tasks like information displays.

Signup and view all the flashcards

VR (Virtual Reality) hardware platforms

Applicable for immersive tasks, such as training simulations.

Signup and view all the flashcards

Free Form hardware platforms

Involve customized hardware for specialized applications, like military devices.

Signup and view all the flashcards

Software Interface Components

Integrated parts of a system or application interface that simplify software complexity for easier user interaction.

Signup and view all the flashcards

WIMP (Windows, Icons, Menus, Pointer)

Windows, icons, menus, and pointers which significantly contributed to the propagation of computer technologies.

Signup and view all the flashcards

Windows/Layers

The working area of an application, providing visual output channels for individual computational processes.

Signup and view all the flashcards

Icons

Simple, interactable, and intuitive objects visually represented as compact pictograms.

Signup and view all the flashcards

Menus

Allows activation of commands and tasks through selection, organized as lists or arrays.

Signup and view all the flashcards

Direct Interaction Through Pointer

Made it possible for users to apply a direct metaphoric touch to target objects.

Signup and view all the flashcards

Text Box

Used for making short to medium alphanumeric input.

Signup and view all the flashcards

Toolbar

A small group of frequently used icons or functions organized horizontally or vertically for quick direct access.

Signup and view all the flashcards

Forms

A mixture of menus, buttons, and text boxes for long and interrelated input.

Signup and view all the flashcards

Dialog Box

A mixture of menus, buttons, and text boxes used for short and mixed-mode input.

Signup and view all the flashcards

Combo Box

A drop-down list box that includes an option for the user to either choose an option from the list or type in their own option in the text box.

Signup and view all the flashcards

3D Interface

An image that provides the perception of depth, offering virtual reality when made interactive.

Signup and view all the flashcards

Wire-framing

A way to design a website or application service at a structural level, used to layout content and functionality on a page.

Signup and view all the flashcards

Study Notes

  • The design of a system begins with thorough research from a user perspective focusing on optimizing the user/system interaction.
  • Understanding user needs/characteristics, usage context, existing systems, and competitive aspects is critical.
  • Requirement analysis sets the goal for system development, reflecting the viewpoint of target users.

User Analysis

  • Reinforces initial requirements analysis for comprehensive system use.
  • Prioritizes user experience and usability standards, identifying supplementary UI requirements.

Scenario and Task Modeling

  • Identifies application task structure and element relationships.
  • A simple task model supports a detailed scenario of potential system utilization.
  • Developers/designers can assess system appropriateness and requirement feasibility.
  • Storyboarding creates a rough visual interface profile.

Interface Selection and Consolidation

  • Chooses software interface components, interaction techniques, and hardware specifications.
  • Selected components must be practically consolidated due to platform limitations.
  • Adjustments occur due to budget, time, personnel, and platform requirements.

Interface Selection Options - Hardware Platforms

  • Hardware platform configuration depends on the application's operating environment.
  • Different interactions require individual devices.
  • Desktop: Best for office and multitasking (e.g., documentation).
  • Smartphones: For quick, simple tasks (e.g., calls).
  • Tablets: Suitable for larger-screen mobile tasks (e.g., sales pitch).
  • Embedded Systems: Ideal for specific, on-the-spot tasks (e.g., printers).
  • TV/Consoles: For limited interaction (e.g., gaming).
  • Kiosks: For public, short tasks (e.g., info displays).
  • VR: For immersive tasks (e.g., training).
  • Free Form: Customized hardware (e.g., military devices).

Software Interface Components

  • Provides easy software interaction by breaking down complexity.
  • Sometimes referred to as user interface components.
  • GUI essentials are windows, icons, menus, and mouse/pointer-based interactions (WIMP).
  • WIMP interfaces enabled computer technology expansion.

Windows/Layers

  • Provide the working area, the application's user interface.
  • Interfaces are designed around windows, visual outputs for computational processes.
  • Multiple windows handle simultaneous subtasks for a single application.
  • Overlapping windows are common; small devices use non-overlapping ones.

Icons

  • Compact, intuitive objects visually represent applications.
  • Earcons serve as icons for aural modality, providing audio representation.
  • Windows Metro-style uses "tiles," icons dynamically updating with useful information.
  • Activate commands/tasks via selection, in lists or arrays.
  • Activation requires activating, scanning, and selecting.
  • Menu styles various, like pull-down, pop-up, application bar, 1D toolbar, and tabs.

Direct Interaction Through Pointer

  • Mouse allows a direct, metaphorical "touch" to target objects
  • Is tied to direct and visual interaction
  • "Virtual touch" extends to actions like drag-and-drop, copy-paste, and rubber banding.

GUI Components for User Input

  • Text Box: Short to medium alphanumeric input.
  • Toolbar: Quick access to frequently used icons/functions.
  • Forms: Long, interrelated input using menus, buttons, text boxes.
  • Dialog Box: Short, mixed-mode input.
  • Combo Box: Drop-down list with the option to type.

3D Interface

  • Provides the perception of depth, with user involvement leading to virtual reality.
  • Presented/operated in 2D (mouse/touch screen), which can be inadequate.
  • Mismatched operation degrees can cause user exhaustion/inconvenience.
  • Used in video games, large displays; smartphones/tablets have sensors for 3D spatial input.

Wire-framing

  • Designs website/application service at a structural level.
  • Lays out content/functionality, considering user needs/experience.
  • Establishes a page's basic structure before visual design/content.
  • Uses basic shapes/elements to block out content and UI elements.
  • Elements can be rearranged quickly for iteration/approval.
  • Examples of wireframe tools: Fluid UI, Wireframe CC, Sketch, InVision Studio, and Adobe XD.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser