Understanding Graphical User Interface & HCI: Fundamentals, Components, and Interaction

1. Graphic User Interface and Human Computer Interaction Compiled by a SUNY IITG Intro CS Team Needs scrutinize and consolidate Graohical User Interface & HCI

2. 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 Graohical User Interface & HCI

3. Learning Outcomes • Understand GUI related terms Graohical User Interface & HCI

4. Terms • To be identified

5. 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) Graohical User Interface & HCI

6. Goal • Present information to users clearly & concisely • Make interface easy to use for users • Make software easy to implement / maintain for programmers Graohical User Interface & HCI

7. Graphical User Interface (GUI) • Design issues • Ease of use • Ease of understanding • Ability to convey information • Efficiency Graohical User Interface & HCI

8. 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. Graohical User Interface & HCI

9. 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. Graohical User Interface & HCI

10. 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. Graohical User Interface & HCI

11. 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. Graohical User Interface & HCI

12. Interaction Devices Input • Keyboards • Pointing devices • Mouse • Joystick • Game controller Output • Speakers • Headphones • Screen (Monitor) • Printer • Projector • Television • Radio Graohical User Interface & HCI

13. Graphic User Interface: Examples Unity Xfce An early X windows System Graohical User Interface & HCI

14. The Breakdown Graohical User Interface & HCI

15. 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. Graohical User Interface & HCI

16. 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. Graohical User Interface & HCI

17. “Good design is obvious. Great design is transparent.”Joe Sparano, Designer Graohical User Interface & HCI

18. 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. Graohical User Interface & HCI

19. Example of a CUI Interface. OMG!! Modern cellphone game with simple GUI (left) Current, tradition Personal Computer GUI Console commands for a video game via GUI Graohical User Interface & HCI

20. Charted Data Clearly, PC users vastly outnumbered Mac users. Graohical User Interface & HCI

21. Fundamentals of a GUI Graohical User Interface & HCI

22. Display Any screen that displays information, data, or programs a user may interact with. Graohical User Interface & HCI

23. 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 Graohical User Interface & HCI

24. 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 Graohical User Interface & HCI

25. Input Methods How a User gives commands to a GUI Graohical User Interface & HCI

26. Keyboard and Mouse • Most common means of interacting with a computer-based GUI. • Keyboard • Built in to laptops • Plugged into desktop computers Mouse Trackball Mouse Graohical User Interface & HCI

27. 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 Graohical User Interface & HCI

28. 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. Graohical User Interface & HCI

29. 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. Graohical User Interface & HCI

30. Human Computer Interaction • Human Computer Interaction • Graphic User Interface • How do they tie together “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 Graohical User Interface & HCI

31. 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 Graohical User Interface & HCI

32. 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. Graohical User Interface & HCI

33. The Connection Graohical User Interface & HCI

34. 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. Graohical User Interface & HCI

35. 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 Graohical User Interface & HCI

36. 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 Graohical User Interface & HCI

37. Summary So 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. Graohical User Interface & HCI

38. 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/ Graohical User Interface & HCI