compiled by a suny iitg intro cs team needs scrutinize and consolidate 10/6/2015graohical user...

Compiled by a SUNY IITG Intro CS Team

Needs scrutinize and consolidate

04/19/23 Graohical User Interface & HCI 1

Graphic User Interface and Human Computer Interaction

Outline• Learning outcomes• List of Terms• GUI Definition• Fundamentals of a Graphical User Interface

– Components/Definitions– Interaction

• Human Computer Interaction– The concept– How humans operate technology

• Graphic User Interface– How GUI and HCI tie together

• Examples– Why humans need both GUI and HCI in the modern day world.

• Summary• Questions• References


Learning Outcomes

• Understand GUI related terms


Terms

• To be identified

Graphical User Interface (GUI)

• User interface– Interface between user and computer– Both input and output– Affects usability of computer

• Interface improving with better hardware– Switches & light bulbs– Punch cards & teletype (typewriter)– Keyboard & black/white monitor (text)– Mouse & color monitor (graphics)


• Goal– Present information to users clearly & concisely–Make interface easy to use for users–Make software easy to implement / maintain for

programmers


• Design issues– Ease of use– Ease of understanding– Ability to convey information– Efficiency


Graphic User Interface: The concept

• A graphical interface of a computer allows users to click and drag objects with a mouse instead of entering text at a command line.

• Almost all of modern day computers use operating systems that use a graphic user interface.

• The two most common operating systems that use a GUI are, Windows and the Mac OS.


GUI: Where it Came From

• Now while many understood the idea of HCI it was not until 1984 that it was implemented into a GUI and commercially successful.

• Steve Jobs’ Apple Macintosh was the first computer that incorporated GUI and showed the value and appeal of it.– Thus making computers available for the general

public.• From then on most developers incorporated GUI

into their operating system.


Graphic User Interface: Components

• A GUI uses a combination of technologies and devices to provide a platform that users can interact with.

• A series of elements conforming a visual language have evolved to represent information stored in computers.

• This makes it easier for people with few computer skills to work with and use computer software.


Components, continued

• The most common combination of such elements in GUIs is the Window, Icon, Menu, and Pointing device. – More commonly known as WIMP


Going deeper into components.

http://www.delphibasics.co.uk/Article.asp?Name=Standard

Interaction Devices

Input •Keyboards

•Pointing devices – Mouse

– Joystick

– Game controller

Output•Speakers

•Headphones

•Screen (Monitor)

•Printer

•Projector

•Television

•Radio


Graphic User Interface: Examples


Unity

Xfce

An early X windows System

The Breakdown


GUI Definition

• In short, a graphical user interface (GUI) is an interface a human uses to interact with a technological device, often comprising windows, icons and

menus and which can be operated/accessed by an input device

or method.


Where GUIs are found

• Almost any Interactable, technological device.

• Most notably on computers, phones and gaming consoles.

• Using most types of technology to retrieve/ display information means that interaction with a GUI has occurred.


“Good design is obvious. Great design is transparent.”Joe Sparano, Designer


Command-Line Interface (CLI)

• Comparable interface to GUI• Far less familiar among device

users• Generally considered more

complex• However, while more prone to

errors and time consuming to learn, CLI is argued to be more versatile than GUI.


Example of a CUI Interface. OMG!!

(left)Current, tradition Personal Computer GUI

Console commands for a video game via GUI

Modern cellphone game with simple GUI


Charted DataClearly, PC users vastly outnumbered Mac users.


Fundamentals of a GUI


Display

• Any screen that displays information, data, or programs a user may interact with.


Windows

• Section of the monitor screen that can show contents separately from the rest of the display

• User has ability to utilize multiple open windows simultaneously


Icons

• Symbol in an interface that signifies a program, file, directory, or external device.

• When selected, acts as a link to the desired/implied program

• Includes folders


Input Methods

How a User gives commands to a GUI


Keyboard and Mouse

• Most common means of interacting with a computer-based GUI.

• Keyboard– Built in to laptops– Plugged into desktop computersMouse

TrackballMouse


Other Input Methods

• TV Remotes and Video Game controllers may also be considered input devices for a GUI.

• More recent advances have brought motion sensors on portable devices and consoles.

• Touch screens are now a common Input Device as well.

• How Touchscreens work: https://www.youtube.com/watch?v=qBbxSEp3-6o


https://www.youtube.com/watch?v=qBbxSEp3-6o

https://www.youtube.com/watch?v=qBbxSEp3-6o

Human Computer Interaction: The Concept

• HCI is the study, design or development between humans and their connection with computers.

• HCI is the study behind Graphic User Interface.• The main idea behind HCI is that design principles

must incorporate and acknowledging, human abilities, skills and differences.

• This applies to all machines that humans use on a regular basis.– For example: cars, cell phones, or even workout

equipment.


HCI: Where it Came From• In the late 1970s, the only humans who interacted with

computers were information technology professionals.• This changed with the rise of personal computing in the

later 1970s. • Personal computing, included both personal software,

such as text editors and spreadsheets, and interactive computer games

• This made everyone in the world a potential computer user.– Thus the problem of the usability for these potential users,

showed the deficiencies of computers.


Human Computer Interaction


“The archetype of all humans, their ideal image, is the computer, once it has liberated itself from its creator, man. The computer is the essence of the human being. In the computer, man reaches his completion.”

~ Friedrich Dürrenmatt

• Human Computer Interaction• Graphic User Interface• How do they tie

together

HCI vs Graphic User Interface

• The concept of graphic user interface is hard to understand, the development behind it comes from the study of Human Computer Interaction.

• Allows users to interact with electronic devices through graphical icons and visual indicators.

• Before GUI all computers were operated through a text based interface, something similar to what you would see in Dreamweaver.

Intro to GUI


The user interacts directly with hardware for the human input and output such as displays through a graphical user interface.

This woman teaches kids around the world to use computers. Humans using computers is a major part of HCI.

HCI focuses on ways computer systems support people at work, at home and at play.

Another example of how humans interact with computers is a pilot operating the cockpit of a plane.


The Connection


Summary

• GUI is now a standard for human-computer interaction, and has influenced the products of millions of technology users. In short, it allows any user to quickly learn how to operate a device in a simplistic, convenient manner.


Questions

• 1. What do GUI and CLI stand for?– `Graphical User Interface and

Command-Line Interface

• 2. What are at least 2 devices that a GUI can be identified on?– Computer, Cellphone


Questions

• What is Human Computer Interaction?• What is Graphic User Interface?


Answer: HCI is the study, design or development between humans and their connection with computers.

Answer: Basically HCI is the study that develops GUI or Graphic User Interface. GUI is the point of interaction that allows humans or the user to explore, interact and operate the computer

SummarySo where does GUI fit in to HCI? For one, human information

processing characteristics and the nature of human communication all

builds up an interface that incorporates suitable human computer

interaction. Ergonomics, the study of work place design, goes behind the

devolvement of the arrangement of display and controls. Understanding

how humans visualize the computer’s information, files, controls,

windows, and how we interact with them is included in the study of HCI.

GUI then creates the output we see and for example the cursor we use to

interact with it.


References

http://www.youtube.com/watch?v=bJ0BgKJcdy4

https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

http://www.hastingsresearch.com/services/user-interface.shtml

http://www.webopedia.com/TERM/G/Graphical_User_Interface_GUI.html

http://www.delphibasics.co.uk/Article.asp?Name=Standard•http://www.linfo.org/gui.html•http://www.linfo.org/command_line_interface.html•http://www.computerhope.com/jargon/g/gui.htm•Simple Explanation•http://news.filehippo.com/2014/04/mac-versus-pc/


http://www.youtube.com/watch?v=bJ0BgKJcdy4

https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

compiled by a suny iitg intro cs team needs scrutinize and consolidate 10/6/2015graohical user...

Documents