Scribd
Upload
13 views5 pages

Lesson 10

Lesson 10 covers Graphical User Interface (GUI) design and programming, explaining its components, importance, and tools used in user-interface software. It details the layers of UI software, including windowing systems, toolkits, and higher-level tools, emphasizing the role of user experience design in creating effective interfaces. The lesson also highlights various tools and frameworks for web development and the user experience design process.

Uploaded by

Jhon Kenneth Banog
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views5 pages

Lesson 10

Lesson 10 covers Graphical User Interface (GUI) design and programming, explaining its components, importance, and tools used in user-interface software. It details the layers of UI software, including windowing systems, toolkits, and higher-level tools, emphasizing the role of user experience design in creating effective interfaces. The lesson also highlights various tools and frameworks for web development and the user experience design process.

Uploaded by

Jhon Kenneth Banog
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Lesson 10: Graphical User-

Interface Design and


Programming
Human Computer Interaction
Topics Covered:

 What is GUI?

 Components of User-Interface Software

o Windowing System

o Toolkits

o Higher-level Tools

What is GUI?

Graphical User Interface (GUI) is a system of interactive visual components for computer
software. It displays objects that convey information and represent actions users can take, such
as icons and buttons. GUIs are more user-friendly than text-based interfaces like MS-DOS or
Unix shells. The GUI was first developed at Xerox PARC in 1981 by Alan Kay, Douglas Engelbart,
and others.

Examples of GUI Operating Systems:

 Apple System 7 and macOS

 Microsoft Windows

 Chrome OS

 Linux
Importance of User Interface Tools

1. Higher Quality Interfaces:

o Rapid prototyping allows early design validation and iterative improvements.

o Ensures consistency and reliability across applications.

2. Easier Development & Maintenance:

o Modular design separates UI from application logic.

o Reduces need for programming expertise.

o Supports cross-platform compatibility.

Components of User-Interface Software

UI software is built in layers:

1. Windowing System: Manages display contexts (e.g., X Window System, NeWS).

2. Toolkits: Libraries of widgets (e.g., buttons, menus) like Java Swing or SWT.

3. Higher-Level Tools: Simplify UI creation through frameworks (e.g., React, Flutter).


Windowing System

 Definition: Software that partitions displays into manageable windows.

 Functionality Layers:

o Window System: Handles core graphics and input.

o Window Manager: Controls window placement and user interactions.

 Examples:

o Early: EMACS, Smalltalk.

o Modern: X Window System, macOS Quartz.

Toolkits

 Purpose: Provide reusable widgets (e.g., buttons, sliders) for applications.

 Types:

o Procedural (e.g., SunTools): Call functions directly.

o Object-Oriented (e.g., Java Swing): Customizable via OOP.


 Virtual Toolkits: Cross-platform tools like wxWidgets or Flutter.

Example Widget Set (Java Swing):

 Buttons, Combo Boxes, Progress Bars, Text Fields.

Higher-Level Tools

1. Phases of UI Development:

o Design-Time: Layout creation using visual editors.

o Run-Time: Managed by User Interface Management Systems (UIMS).

2. Specification Styles:

o Language-Based: State diagrams, event languages (e.g., Java Swing).

o Application Frameworks: Pre-built components (e.g., MFC, AngularJS).

3. Model-Based Automation: Generates UI from high-level models (e.g., Mickey, Jade).

Direct Graphical Specification

 Allows designers to "draw" UIs visually (e.g., Adobe XD, Figma).

 Enables collaboration between non-programmers (e.g., psychologists, graphic


designers).

Tools for the World Wide Web

1. Basic Tools: HTML/CSS for static pages.

2. Visual Tools: WYSIWYG editors (e.g., Microsoft FrontPage).

3. Advanced Tools:

o Front-End: React, Vue.js, Bootstrap.

o Back-End: Django, Node.js, Ruby on Rails.

o IDEs: Visual Studio Code, WebStorm.


User Experience Design Process

1. Research: Define user demographics and goals.

2. Empathize: Identify challenges and metrics.

3. Create: Wireframes and style guides.

4. Test: Usability tests and iterative improvements.

Thank You!

Lesson 10: Human Computer Interaction

You might also like