10/23/2008. CSG 170 Round 6. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes

Size: px
Start display at page:

Download "10/23/2008. CSG 170 Round 6. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes"

Transcription

1 Human-Computer Interaction CSG 170 Round 6 Prof. Timothy Bickmore Quiz Open book / Open notes 15 minutes 1

2 Team Project task #3 Start thinking about high-level design Interaction Metaphors Make a list of possible interaction metaphors for your interface, following the examples in Rosson & Carroll Ch 3, Tables 3.1 and 3.2. For each of your scenarios list at least two options for interaction metaphors and some of their implications. Activity Design Scenarios Transform each of your problem scenarios into an activity design scenario, documenting analyses of design features, following the examples in Rosson & Carroll Ch 3, Figures 3.4 and 3.5, and Table 3.3. Project: Looking Forward Next assignment will be paper prototyping You need 3 test users per team I provide: pool of older candidates a mechanism for reaching them Compensation ($) place to do the testing Marcus Garvey Apartments, Roxbury 2

3 UI Design UI Design 3

4 Why is UI Design Hard? Infinite possibilities Many, many published heuristics, guidelines, rules Everything comes together Desired functionality User abilities, knowledge Aesthetics Conventions Best solution approach Try (& evaluate) lots of stuff Parallel design Generate several options at once, by different designers Cyclic design Generate, evaluate, repeat 4

5 Rosson & Carroll Scenario-Based Design Forces you to think in detail about your Forces you to think in detail about your users and their activities throughout the design process. Problem Scenarios Activity Scenarios Activity Scenarios elaborated with information design Interaction Scenarios 5

6 Rosson & Carroll Information Design Consider each of the metaphors you developed in Activity Design Can any of these be used to guide the overall interface design? A questionnaire A television A magazine Design Guidelines Browse the Java Look and Feel Design Browse the Java Look and Feel Design Guidelines (link on the course Bibliography page) 6

7 Usability heuristics Many to choose from Neilsen s 10 principles Shneiderman s 8 golden rules Tognazzini s 16 principles Norman s rules from Design of Everyday Things Mac, Windows, Gnome, KDE, Java guidelines Help designers choose design alternatives Help evaluators find problems in interfaces ( heuristic evaluation ) Some we ve already discussed User-centered design Know your users Understand their tasks Fitts s Law Size and proximity of controls should relate to their importance Tiny controls are hard to hit Screen edges are precious Memory Use chunking to simplify information presentation Minimize working memory Rely more on recognition than recall Color guidelines Don t depend solely on color distinctions (color blindness) Principles of direct manipulation Affordances Feedback Grouping 7

8 Nielsen s Heuristics (some) 1. Match the Real World aka Speak the User s s Language Use common words, not techie jargon But use domain-specific terms where appropriate Don t put limits on user defined names Allow aliases/synonyms in command languages g Metaphors are useful but may mislead Nielsen s Heuristics (some) 2. Consistency and Standards Principle of Least Surprise Similar things should look and act similar Different things should look different Other properties Size, location, color, wording, ordering, Follow platform standards Kinds of Consistency Internal External Metaphorical 8

9 Nielsen s Heuristics (some) 4. User Control and Freedom Provide undo Long operations should be cancelable All dialogs should have a cancel button Nielsen s Heuristics (some) 5. Visibility of System Status Keep user informed of system state Cursor change Selection highlight Status bar Response time < 0.1 s: seems instantaneous s: user notices, but no feedback needed 1-5 s: display busy cursor > 1-5 s: display progress bar 9

10 Nielsen s Heuristics (some) 6. Flexibility and Efficiency Provide easily-learned learned shortcuts for frequent operations Keyboard accelerators Command abbreviations Bookmarks History Nielsen s Heuristics (some) 7. Error Prevention Selection is less error-prone than typing Disable illegal commands Description Error when two actions are too similar e.g., case sensitivity different things should look and act different Mode Error Eliminate modes Visibility of mode Spring-loaded or temporary modes 10

11 Nielsen s Heuristics (some) 8. Recognition, Not Recall Use menus, not command languages Use combo boxes, not textboxes Use generic commands where possible (Open, Save, Copy Paste) All needed information should be visible Nielsen s Heuristics (some) 9. Error Reporting, Diagnosis, Recovery Be precise; restate user s s input Not Cannot open file, but Cannot open file named paper.doc Give constructive help why error occurred and how to fix it Be polite and non-blaming Not fatal error, not illegal Hide technical details (stack trace) until requested 11

12 Nielsen s Heuristics (some) 10. Aesthetic and Minimalist Design Less is More /KISS Omit extraneous info, graphics, features Some of Tog s Principles Anticipation Put all needed information and tools within the user s easy reach. Why a File Save dialog box needs a way to create a new folder Defaults common answers already filled into a form Speeds up learning Increases overall efficiency Explorable interfaces Support user s poking around 12

13 Design Sketches Team Project Homework 1. First revisit your 3 Task analyses and Problem & Activity Scenarios Make sure they represent a task that can & should be performed in your system. Revise if necessary. Design Sketches Team Project Homework 2. Interaction Scenarios Expand each of your activity design scenarios (3) into full interaction scenarios, indicating what the user perceives and the actions he/she performs at each major step in the scenario 3. Preliminary Design Sketches final plus alternatives you considered 4. Scenario Storyboards for each scenario 13

14 14

15 Swing Layout Managers JFrame A stand-alone alone window The only way to get a GUI for a stand-alone app. Applets can use them too! 15

16 JFrame guts We re just going to focus on the Content Pane Creating a JFrame class MyFrame extends JFrame { public MyFrame() { super("my Example"); setdefaultcloseoperation(jframe.exit_on_close); //populate the content pane: getcontentpane() pack(); } public static void main(string args[]) { java.awt.eventqueue.invokelater(new Runnable() { public void run() { new MyFrame().setVisible(true); } }); } } 16

17 JDialog Just like a JFrame except you can make it modal Note: Use JOptionPane for simple, standard alert & informational message dialogs. JColorChooser, JFileChooser built in, special-purpose dialogs. Layout Managers Decide how to display the Components within a Container. To use a layout manager: Construct an instance of the manager. Assign the instance to the container using: setlayout(layoutmanager) Each Container can only have one layout manager. Or in NetBeans: R-click on component and choose Set Layout 17

18 FlowLayout The default for JPanel Strategy: Keeps components at their preferred size. Place components in rows, left-to-right. When a row fills up, a new row is started. Rows can be centered, left or right justified. Example FlowLayout class FlowLayoutExample l extends JFrame { public FlowLayoutExample() { super("flow Layout Example"); setdefaultcloseoperation(jframe.exit_on_close); Container frame=getcontentpane(); frame.setlayout(new FlowLayout(FlowLayout.LEFT,10,10)); frame.add(new Button("Button 1")); frame.add(new Button("Button 2")); frame.add(new add(new Button("Button 3")); frame.add(new Button("Button 4")); frame.add(new Button("Button 5")); pack(); } 18

19 BorderLayout Partitions the layout space into regions You specify which region you want to place Components into by name At most one component can go into each region add(component,<where>) BorderLayout Example class BorderLayoutExample extends JFrame { class BorderLayoutExample extends JFrame { public BorderLayoutExample() { super("border Layout Example"); setdefaultcloseoperation(jframe.exit_on_close); Container frame=getcontentpane(); frame.setlayout(new BorderLayout()); frame.add(new Button("Button 1"),BorderLayout.NORTH); frame.add(new Button("Button 2"),BorderLayout.SOUTH); frame.add(new Button("Button 3"),BorderLayout.EAST); frame.add(new Button("Button 4"),BorderLayout.WEST); frame.add(new Button("Button 5"),BorderLayout.CENTER); pack(); } 19

20 GridLayout Forms a rectangular grid of rows and columns You specify the number of rows, columns, or both Components are forced into the same shape for every cell. Grid is filled left-to-right, top-down Constructor GridLayout(int rows,int cols) Value of zero denotes undefined GridLayout Example l G idl te l t d JF { class GridLayoutExample extends JFrame { public GridLayoutExample() { super("grid Layout Example"); setdefaultcloseoperation(jframe.exit_on_close); Container frame=getcontentpane(); frame.setlayout(new GridLayout(0,2)); frame.add(new Button("Button 1")); frame.add(new Button("Button 2")); frame.add(new Button("Button 3")); frame.add(new Button("Button 4")); frame.add(new Button("Button 5")); pack(); } 20

21 CardLayout Swaps among each of its components Each component can be named: add( name,component) First component displayed initially To swap among components CardLayout.next(Container parent) CardLayout.first(Container parent) CardLayout.last(Container parent) CardLayout.show(Container parent, name ) JTabbedPane Acts like a JPanel with a CardLayout 21

22 Hierarchical Example class HierarchyExample extends JFrame { public HierarchyExample() { super("hierarchy Layout Example"); setdefaultcloseoperation(jframe.exit_on_close); Container frame=getcontentpane(); JPanel P1=new JPanel(); JPanel P2=new JPanel(); JPanel P3=new JPanel(); P1.setLayout(new BorderLayout()); P1.add(new TextArea(5,15),BorderLayout.CENTER); P1.add(new Button("Clear"),BorderLayout.SOUTH); P2.setLayout(new GridLayout(0,1)); P2.add(new Button("Option 1")); P2.add(new Button("Option 2")); P2.add(new Button("Option 3")); P3.setLayout(new FlowLayout()); P3.add(new Button("OK")); P3.add(new Button("Cancel")); frame.setlayout(new BorderLayout()); frame.add(p1,borderlayout.east); frame.add(p2,borderlayout.west); frame.add(p3,borderlayout.south); pack(); } Exercise what will this look like? P1.setLayout(new BorderLayout()); P1.add(new TextArea(5,15),BorderLayout.CENTER); P1.add(new Button("Clear"),BorderLayout.SOUTH); P2.setLayout(new GridLayout(0,1)); P2.add(new Button("Option 1")); P2.add(new Button("Option 2")); P2.add(new Button("Option 3")); P3.setLayout(new FlowLayout()); P3.add(new Button("OK")); P3.add(new Button("Cancel")); frame.setlayout(new BorderLayout()); frame.add(p1,borderlayout.east); frame.add(p2,borderlayout.west); frame.add(p3,borderlayout.south); 22

23 Layout demo in Netbeans Homework I5 Build a JFrame and a modal JDialog that can be launched from an applet. Your interfaces must include: A JTabbedPane and a JScrollPane. Nested JPanels including the following layout managers: GridLayout, FlowLayout, BorderLayout Some interaction widgets (JButton, etc.) on every JPanel and tab. Reasonable behavior when the JFrame is resized. NOTE: You may not use GridBagLayout, absolute (null) layout, or the NetBeans Free Design layout anywhere in the project. Hints: You can t use EXIT_ON_CLOSE or always on top options in applets. 23

24 To do Read Rettig article on paper prototyping Dix Ch 10 Universal Design 2 Social Interfaces papers Do Individual Homework I6 Layout Managers Do Team Homework T4 Design Sketches Research Papers Tangible Interfaces MusicCube: making digital music tangible - CHI'05 [Priyanka] Illuminating Clay: A 3-D Tangible Interface for Landscape Analysis - CHI'02 [Kaiyu] HandSCAPE: A Vectorizing Tape Measure for On-Site Measuring Applications - CHI'00 [Vamshi] 24

Human-Computer Interaction IS4300. I5 painting app due

Human-Computer Interaction IS4300. I5 painting app due Human-Computer Interaction IS4300 1 I5 painting app due Your mission in this exercise is to implement a very simple Java painting application. The app must support the following functions: Draw curves,

More information

Due Today: Painting App

Due Today: Painting App Evaluation Due Today: Painting App Implement a very simple Java painting application supporting the following functions: Draw curves, filled rectangles and filled ovals specified by a mouse drag (don't

More information

Plenty to choose from. Help designers choose design alternatives Help evaluators find problems in interfaces (heuristic evaluation)

Plenty to choose from. Help designers choose design alternatives Help evaluators find problems in interfaces (heuristic evaluation) Plenty to choose from Nielsens 10 principles One version in his book A more recent version on his website Tognazzinis 16 principles Normans rules from Design of Everyday Things Mac, Windows, Gnome, KDE

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 Quiz 3 1 I5 due next class Your mission in this exercise is to implement a very simple Java painting applet. The applet must support the following functions: Draw curves,

More information

Human-Computer Interaction Round 7. I6: Heuristic Evaluation. T5: Paper Prototyping #2 2/26/2012. (Organized) comprehensive list Due next week

Human-Computer Interaction Round 7. I6: Heuristic Evaluation. T5: Paper Prototyping #2 2/26/2012. (Organized) comprehensive list Due next week Human-Computer Interaction Round 7 I6: Heuristic Evaluation (Organized) comprehensive list Due next week Shared with class T5: Paper Prototyping #2 Big deal... Get going! 1 UI Design Why is UI Design Hard?

More information

Human-Computer Interaction IS 4300

Human-Computer Interaction IS 4300 Human-Computer Interaction IS 4300 Prof. Timothy Bickmore Overview for Today Brief review. Affordances & Cognitive Models. Norman's Interaction Model Heuristic Evaluation. Cognitive Walk-through Evaluation

More information

CS 251 Intermediate Programming GUIs: Components and Layout

CS 251 Intermediate Programming GUIs: Components and Layout CS 251 Intermediate Programming GUIs: Components and Layout Brooke Chenoweth University of New Mexico Fall 2017 import javax. swing.*; Hello GUI public class HelloGUI extends JFrame { public HelloGUI ()

More information

Usability. CSE 331 Spring Slides originally from Robert Miller

Usability. CSE 331 Spring Slides originally from Robert Miller Usability CSE 331 Spring 2010 Slides originally from Robert Miller 1 User Interface Hall of Shame Source: Interface Hall of Shame 2 User Interface Hall of Shame Source: Interface Hall of Shame 3 Redesigning

More information

Introduction to the JAVA UI classes Advanced HCI IAT351

Introduction to the JAVA UI classes Advanced HCI IAT351 Introduction to the JAVA UI classes Advanced HCI IAT351 Week 3 Lecture 1 17.09.2012 Lyn Bartram lyn@sfu.ca About JFC and Swing JFC Java TM Foundation Classes Encompass a group of features for constructing

More information

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation KF5008 Program Design & Development Lecture 1 Usability GUI Design and Implementation Types of Requirements Functional Requirements What the system does or is expected to do Non-functional Requirements

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 I4 Swing! Due Now Implement a Java applet to provide online ordering for your favorite restaurant. The interface need not be functional, but the controls should be laid

More information

Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008

Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008 Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008 Announcements A3 is up, due Friday, Oct 10 Prelim 1 scheduled for Oct 16 if you have a conflict, let us know now 2 Interactive

More information

Graphical User Interface (GUI)

Graphical User Interface (GUI) Graphical User Interface (GUI) Layout Managment 1 Hello World Often have a static method: createandshowgui() Invoked by main calling invokelater private static void createandshowgui() { } JFrame frame

More information

Top-Level Containers

Top-Level Containers 1. Swing Containers Swing containers can be classified into three main categories: Top-level containers: JFrame, JWindow, and JDialog General-purpose containers: JPanel, JScrollPane,JToolBar,JSplitPane,

More information

Swing UI. Powered by Pentalog. by Vlad Costel Ungureanu for Learn Stuff

Swing UI. Powered by Pentalog. by Vlad Costel Ungureanu for Learn Stuff Swing UI by Vlad Costel Ungureanu for Learn Stuff User Interface Command Line Graphical User Interface (GUI) Tactile User Interface (TUI) Multimedia (voice) Intelligent (gesture recognition) 2 Making the

More information

What is Widget Layout? Laying Out Components. Resizing a Window. Hierarchical Widget Layout. Interior Design for GUIs

What is Widget Layout? Laying Out Components. Resizing a Window. Hierarchical Widget Layout. Interior Design for GUIs What is Widget Layout? Laying Out Components Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and position Main problem: what if

More information

Java. GUI building with the AWT

Java. GUI building with the AWT Java GUI building with the AWT AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses the controls defined by your OS therefore

More information

Handout 14 Graphical User Interface (GUI) with Swing, Event Handling

Handout 14 Graphical User Interface (GUI) with Swing, Event Handling Handout 12 CS603 Object-Oriented Programming Fall 15 Page 1 of 12 Handout 14 Graphical User Interface (GUI) with Swing, Event Handling The Swing library (javax.swing.*) Contains classes that implement

More information

Laying Out Components. What is Widget Layout?

Laying Out Components. What is Widget Layout? Laying Out Components Interior Design for GUIs What is Widget Layout? Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and position

More information

Announcements. Usability. Based on material by Michael Ernst, University of Washington. Outline. User Interface Hall of Shame

Announcements. Usability. Based on material by Michael Ernst, University of Washington. Outline. User Interface Hall of Shame Announcements Usability Based on material by Michael Ernst, University of Washington Optional cumulative quiz will be given online in Submitty on May 2. Replaces your lowest Quiz 1 10. More details on

More information

This quiz is closed book, closed notes. You have 80 minutes to complete it. Your name:

This quiz is closed book, closed notes. You have 80 minutes to complete it. Your name: 6.831 User Interface Design & Implementation Fall 2004 Quiz 1 This quiz is closed book, closed notes. You have 80 minutes to complete it. Your name: 1. (3 points) Which of the following are measurable

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 Ethnography Homework I3 2 1 Team Projects User analysis. Identify stakeholders (primary, secondary, tertiary, facilitating) For Primary Stakeholders Demographics Persona(s)

More information

Expert Evaluations. November 30, 2016

Expert Evaluations. November 30, 2016 Expert Evaluations November 30, 2016 Admin Final assignments High quality expected Slides Presentation delivery Interface (remember, focus is on a high-fidelity UI) Reports Responsive Put your best foot

More information

Interaction Techniques. SWE 432, Fall 2016 Design and Implementation of Software for the Web

Interaction Techniques. SWE 432, Fall 2016 Design and Implementation of Software for the Web Interaction Techniques SWE 432, Fall 2016 Design and Implementation of Software for the Web Today What principles guide the design of usable interaction techniques? How can interaction designs help support

More information

Lecture 22: Heuristic Evaluation. UI Hall of Fame or Shame? Spring User Interface Design and Implementation 1

Lecture 22: Heuristic Evaluation. UI Hall of Fame or Shame? Spring User Interface Design and Implementation 1 Lecture 22: Heuristic Evaluation Spring 2008 6.831 User Interface Design and Implementation 1 UI Hall of Fame or Shame? From Shauni Deshmukh: Kayak.com is a website that allows people to search for flights.

More information

Graphical User Interface (GUI)

Graphical User Interface (GUI) Graphical User Interface (GUI) Layout Managment 1 Hello World Often have a run method to create and show a GUI Invoked by main calling invokelater private void run() { } JFrame frame = new JFrame("HelloWorldSwing");

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 Midterm I. Concepts & Definitions (20%) 1. What is usability? 2. Why is the classic waterfall development methodology inappropriate for HCI? 3. What is one UI design

More information

Interaction Techniques. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Interaction Techniques. SWE 432, Fall 2017 Design and Implementation of Software for the Web Interaction Techniques SWE 432, Fall 2017 Design and Implementation of Software for the Web Today What principles guide the design of usable interaction techniques? How can interaction designs help support

More information

INTRODUCTION TO (GUIS)

INTRODUCTION TO (GUIS) INTRODUCTION TO GRAPHICAL USER INTERFACES (GUIS) Lecture 10 CS2110 Fall 2009 Announcements 2 A3 will be posted shortly, please start early Prelim 1: Thursday October 14, Uris Hall G01 We do NOT have any

More information

Containers and Components

Containers and Components Containers and Components container A GUI has many components in containers. A container contains other components. A container is also a component; so a container may contain other containers. component

More information

Human-Computer Interaction: An Overview. CS2190 Spring 2010

Human-Computer Interaction: An Overview. CS2190 Spring 2010 Human-Computer Interaction: An Overview CS2190 Spring 2010 There must be a problem because What is HCI? Human-Computer interface Where people meet or come together with machines or computer-based systems

More information

CS5340 Human-Computer Interaction.! February 21, 2013!!

CS5340 Human-Computer Interaction.! February 21, 2013!! CS5340 Human-Computer Interaction February 21, 2013 www.hcibook.com/e3 Today s Class T4 & T5 Design practicalities Evaluation techniques Paper Presentations T4 & T5 Due 6pm Feb 28 T4: Concept Selection

More information

GUI Implementation Support

GUI Implementation Support GUI Implementation Support Learning Objectives: Why GUIs? What is a GUI? Why is implementation support needed? What kinds of implementation support are available? Basic concepts in OO GUI toolkit & app

More information

GUI Design Principles

GUI Design Principles GUI Design Principles User Interfaces Are Hard to Design You are not the user Most software engineering is about communicating with other programmers UI is about communicating with users The user is always

More information

CSE 331 Software Design & Implementation

CSE 331 Software Design & Implementation CSE 331 Software Design & Implementation Hal Perkins Autumn 2013 Usability (Slides by Mike Ernst and David Notkin based on slides by Robin Miller) 1 Usability A lecture on usability won t make anyone an

More information

Building Java Programs Bonus Slides

Building Java Programs Bonus Slides Building Java Programs Bonus Slides Graphical User Interfaces Copyright (c) Pearson 2013. All rights reserved. Graphical input and output with JOptionPane JOptionPane An option pane is a simple dialog

More information

WIMP Elements. GUI goo. What is WIMP?

WIMP Elements. GUI goo. What is WIMP? WIMP Elements GUI goo What is WIMP? 1 There are many kinds of WIMPs WIMP The GUI Interface Windows Icons Menus Pointers 2 Windows Icons Pointers Menus Windows Windows are areas of the screen that act like

More information

10/16/2008. CSG 170 Round 5. Prof. Timothy Bickmore. User Analysis Task Analysis (6) Problem Scenarios (3)

10/16/2008. CSG 170 Round 5. Prof. Timothy Bickmore. User Analysis Task Analysis (6) Problem Scenarios (3) Human-Computer Interaction CSG 170 Round 5 Prof. Timothy Bickmore T2: Requirements Analysis Review User Analysis Task Analysis (6) Problem Scenarios (3) 1 T2 Review Requirements Analysis Who is the user?

More information

15/16 CSY2041 Quality and User-Centred Systems

15/16 CSY2041 Quality and User-Centred Systems 15/16 CSY2041 Quality and User-Centred Systems INTERACTION DESIGN 1 Heuristic evaluation and walkthroughs 2 1 Aims: Describe the key concepts associated with inspection methods. Explain how to do heuristic

More information

11/6/15. Objec&ves. RouleQe. Assign 8: Understanding Code. Assign 8: Bug. Assignment 8 Ques&ons? PROGRAMMING PARADIGMS

11/6/15. Objec&ves. RouleQe. Assign 8: Understanding Code. Assign 8: Bug. Assignment 8 Ques&ons? PROGRAMMING PARADIGMS Objec&ves RouleQe Assign 8: Refactoring for Extensibility Programming Paradigms Introduc&on to GUIs in Java Ø Event handling Nov 6, 2015 Sprenkle - CSCI209 1 Nov 6, 2015 Sprenkle - CSCI209 2 Assign 8:

More information

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering Prof. Dr. Armin B. Cremers Sascha Alda Overview Introduction: What is usability? Why is usability an important non-functional

More information

Java: Graphical User Interfaces (GUI)

Java: Graphical User Interfaces (GUI) Chair of Software Engineering Carlo A. Furia, Marco Piccioni, and Bertrand Meyer Java: Graphical User Interfaces (GUI) With material from Christoph Angerer The essence of the Java Graphics API Application

More information

MIT GSL week 4 Wednesday. User Interfaces II

MIT GSL week 4 Wednesday. User Interfaces II MIT GSL 2018 week 4 Wednesday User Interfaces II User Centered Design Prototyping! Producing cheaper, less accurate renditions of your target interface! Essential in spiral design process, useful in later

More information

CO328- Human Computer Interaction Michael Kölling Caroline Li. Heuristic Evaluation

CO328- Human Computer Interaction Michael Kölling Caroline Li. Heuristic Evaluation CO328- Human Computer Interaction Michael Kölling Caroline Li Heuristic Evaluation Signage: What does this tells you? - History, what went earlier there before - Tells you more about a problematic situation

More information

CSE 143. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

CSE 143. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT CSE 143 Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT slides created by Marty Stepp based on materials by M. Ernst, S. Reges, D. Notkin, R. Mercer, Wikipedia http://www.cs.washington.edu/331/

More information

Resizing a Window. COSC 3461: Module 5B. What is Widget Layout? Size State Transitions. What is Widget Layout? Hierarchical Widget Layout.

Resizing a Window. COSC 3461: Module 5B. What is Widget Layout? Size State Transitions. What is Widget Layout? Hierarchical Widget Layout. COSC 3461: Module 5B Resizing a Window Widgets II What has changed? scrollbar added menu has wrapped toolbar modified (buttons lost) 2 What is Widget Layout? Size State Transitions Recall: each widget

More information

Quality Assurance User Interface Modeling

Quality Assurance User Interface Modeling Quality Assurance User Interface Modeling Part II - Lecture 4 1 The University of Auckland New Zealand 254 18/09/ /2012 Interviewing Methods of the FBI 254 18/09/ /2012 Cognitive interview: method to enhance

More information

HCI and Design SPRING 2016

HCI and Design SPRING 2016 HCI and Design SPRING 2016 Topics for today Heuristic Evaluation 10 usability heuristics How to do heuristic evaluation Project planning and proposals Usability Testing Formal usability testing in a lab

More information

CSE 1325 Project Description

CSE 1325 Project Description CSE 1325 Summer 2016 Object-Oriented and Event-driven Programming (Using Java) Instructor: Soumyava Das Graphical User Interface (GUI), Event Listeners and Handlers Project IV Assigned On: 07/28/2016 Due

More information

Dr. Hikmat A. M. AbdelJaber

Dr. Hikmat A. M. AbdelJaber Dr. Hikmat A. M. AbdelJaber JWindow: is a window without a title bar or move controls. The program can move and resize it, but the user cannot. It has no border at all. It optionally has a parent JFrame.

More information

Graphical User Interfaces. Swing. Jose Jesus García Rueda

Graphical User Interfaces. Swing. Jose Jesus García Rueda Graphical User Interfaces. Swing Jose Jesus García Rueda Introduction What are the GUIs? Well known examples Basic concepts Graphical application. Containers. Actions. Events. Graphical elements: Menu

More information

Learn Java Programming, Dr.Hashamdar. Getting Started with GUI Programming

Learn Java Programming, Dr.Hashamdar. Getting Started with GUI Programming Learn Java Programming, Dr.Hashamdar Getting Started with GUI Programming 1 Creating GUI Objects // Create a button with text OK JButton jbtok = new JButton("OK"); // Create a label with text "Enter your

More information

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson) Graphics programming COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson) Overview Aims To provide an overview of Swing and the AWT To show how to build

More information

Software Quality. Martin Glinz. Thomas Fritz. Lecture 7 UI Design, Usability & Testing. Many thanks to Meghan Allen and Daniel Greenblatt.

Software Quality. Martin Glinz. Thomas Fritz. Lecture 7 UI Design, Usability & Testing. Many thanks to Meghan Allen and Daniel Greenblatt. Institut für Informatik Software Quality Lecture 7 UI Design, Usability & Testing Thomas Fritz Martin Glinz Many thanks to Meghan Allen and Daniel Greenblatt. Overview Introduction to UI design User-centered

More information

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p.

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p. Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p. 17 MVC Architecture p. 19 The MVC Architecture p. 20 Combined

More information

User Interface. Three Mile Island. January 14, 2011 CSE 403, Winter 2011, Brun

User Interface. Three Mile Island. January 14, 2011 CSE 403, Winter 2011, Brun User Interface Three Mile Island January 14, 2011 CSE 403, Winter 2011, Brun Chernobyl How do we avoid bad UI? Learn from past mistakes Build prototypes Big questions What's the point of prototyping? Should

More information

2110: GUIS: Graphical User Interfaces

2110: GUIS: Graphical User Interfaces 2110: GUIS: Graphical User Interfaces Their mouse had a mean time between failure of a week it would jam up irreparably, or... jam up on the table--... It had a flimsy cord whose wires would break. Steve

More information

Packages: Putting Classes Together

Packages: Putting Classes Together Packages: Putting Classes Together 1 Introduction 2 The main feature of OOP is its ability to support the reuse of code: Extending the classes (via inheritance) Extending interfaces The features in basic

More information

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7 PROGRAMMING DESIGN USING JAVA (ITT 303) Graphical User Interface Unit 7 Learning Objectives At the end of this unit students should be able to: Build graphical user interfaces Create and manipulate buttons,

More information

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN CSSE 220 Day 19 Object-Oriented Design Files & Exceptions Check out FilesAndExceptions from SVN A practical technique OBJECT-ORIENTED DESIGN Object-Oriented Design We won t use full-scale, formal methodologies

More information

Java Swing Introduction

Java Swing Introduction Course Name: Advanced Java Lecture 18 Topics to be covered Java Swing Introduction What is Java Swing? Part of the Java Foundation Classes (JFC) Provides a rich set of GUI components Used to create a Java

More information

No SVN checkout today. Object-Oriented Design

No SVN checkout today. Object-Oriented Design No SVN checkout today Object-Oriented Design Software development methods Object-oriented design with CRC cards LayoutManagers for Java GUIs BallWorlds work time Analysis Design Implementation Software

More information

China Jiliang University Java. Programming in Java. Java Swing Programming. Java Web Applications, Helmut Dispert

China Jiliang University Java. Programming in Java. Java Swing Programming. Java Web Applications, Helmut Dispert Java Programming in Java Java Swing Programming Java Swing Design Goals The overall goal for the Swing project was: To build a set of extensible GUI components to enable developers to more rapidly develop

More information

1.1 GUI. JFrame. import java.awt.*; import javax.swing.*; public class XXX extends JFrame { public XXX() { // XXX. init() main() public static

1.1 GUI. JFrame. import java.awt.*; import javax.swing.*; public class XXX extends JFrame { public XXX() { // XXX. init() main() public static 18 7 17 1 1.1 GUI ( ) GUI ( ) JFrame public class XXX extends JFrame { public XXX() { // XXX // init()... // ( )... init() main() public static public class XXX extends JFrame { public XXX() { // setsize(,

More information

Fall UI Design and Implementation 1

Fall UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 1 1 Three ways to print in Microsoft Office File/Print menu item Print toolbar button Ctrl-P keyboard shortcut Fall 2004 6.831 UI Design and Implementation

More information

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing Introduction to Graphical Interface Programming in Java Introduction to AWT and Swing GUI versus Graphics Programming Graphical User Interface (GUI) Graphics Programming Purpose is to display info and

More information

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN CSSE 220 Day 19 Object-Oriented Design Files & Exceptions Check out FilesAndExceptions from SVN A practical technique OBJECT-ORIENTED DESIGN Object-Oriented Design We won t use full-scale, formal methodologies

More information

Java Swing. Recitation 11/(20,21)/2008. CS 180 Department of Computer Science, Purdue University

Java Swing. Recitation 11/(20,21)/2008. CS 180 Department of Computer Science, Purdue University Java Swing Recitation 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University Announcements Project 8 is out Milestone due on Dec 3rd, 10:00 pm Final due on Dec 10th, 10:00 pm No classes,

More information

Window Interfaces Using Swing Objects

Window Interfaces Using Swing Objects Chapter 12 Window Interfaces Using Swing Objects Event-Driven Programming and GUIs Swing Basics and a Simple Demo Program Layout Managers Buttons and Action Listeners Container Classes Text I/O for GUIs

More information

Starting Out with Java: From Control Structures Through Objects Sixth Edition

Starting Out with Java: From Control Structures Through Objects Sixth Edition Starting Out with Java: From Control Structures Through Objects Sixth Edition Chapter 12 A First Look at GUI Applications Chapter Topics 12.1 Introduction 12.2 Creating Windows 12.3 Equipping GUI Classes

More information

Layout. Dynamic layout, Swing and general layout strategies

Layout. Dynamic layout, Swing and general layout strategies Layout Dynamic layout, Swing and general layout strategies Two Interface Layout Tasks Designing a spatial layout of widgets in a container Adjusting that spatial layout when container is resized Both

More information

CSE 331. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

CSE 331. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT CSE 331 Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT slides created by Marty Stepp based on materials by M. Ernst, S. Reges, D. Notkin, R. Mercer, Wikipedia http://www.cs.washington.edu/331/

More information

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class. Q1. If you add a component to the CENTER of a border layout, which directions will the component stretch? A1. The component will stretch both horizontally and vertically. It will occupy the whole space

More information

Introduction to Human-Computer Interaction

Introduction to Human-Computer Interaction Introduction to Human-Computer Interaction User Interface Design Lecture 5 Nadia Boukhelifa nadia.boukhelifa@inria.fr with acknowledgements to: Petra Isenberg, Anastasia Bezerianos, Anthony Tang, Nic Marquardt,

More information

Java Programming Lecture 6

Java Programming Lecture 6 Java Programming Lecture 6 Alice E. Fischer Feb 15, 2013 Java Programming - L6... 1/32 Dialog Boxes Class Derivation The First Swing Programs: Snow and Moving The Second Swing Program: Smile Swing Components

More information

Additional reading for this lecture: Heuristic Evaluation by Jakob Nielsen. Read the first four bulleted articles, starting with How to conduct a

Additional reading for this lecture: Heuristic Evaluation by Jakob Nielsen. Read the first four bulleted articles, starting with How to conduct a Additional reading for this lecture: Heuristic Evaluation by Jakob Nielsen. Read the first four bulleted articles, starting with How to conduct a heuristic evaluation and ending with How to rate severity.

More information

Heuristic Evaluation. Ananda Gunawardena. Carnegie Mellon University Computer Science Department Fall 2008

Heuristic Evaluation. Ananda Gunawardena. Carnegie Mellon University Computer Science Department Fall 2008 Heuristic Evaluation Ananda Gunawardena Carnegie Mellon University Computer Science Department Fall 2008 Background Heuristic evaluation is performed early in the development process to understand user

More information

Input part 3: Interaction Techniques

Input part 3: Interaction Techniques Input part 3: Interaction Techniques Interaction techniques A method for carrying out a specific interactive task Example: enter a number in a range could use (simulated) slider (simulated) knob type in

More information

Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI

Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI CBOP3203 Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI components like button, text input, scroll bar and others.

More information

Datenbank-Praktikum. Universität zu Lübeck Sommersemester 2006 Lecture: Swing. Ho Ngoc Duc 1

Datenbank-Praktikum. Universität zu Lübeck Sommersemester 2006 Lecture: Swing. Ho Ngoc Duc 1 Datenbank-Praktikum Universität zu Lübeck Sommersemester 2006 Lecture: Swing Ho Ngoc Duc 1 Learning objectives GUI applications Font, Color, Image Running Applets as applications Swing Components q q Text

More information

cs465 principles of user interface design, implementation and evaluation

cs465 principles of user interface design, implementation and evaluation cs465 principles of user interface design, implementation and evaluation Karrie G. Karahalios 24. September 2008 1. Heuristic Evaluation 2. Cognitive Walkthrough 3. Discuss Homework 3 4. Discuss Projects

More information

Graphic User Interfaces. - GUI concepts - Swing - AWT

Graphic User Interfaces. - GUI concepts - Swing - AWT Graphic User Interfaces - GUI concepts - Swing - AWT 1 What is GUI Graphic User Interfaces are used in programs to communicate more efficiently with computer users MacOS MS Windows X Windows etc 2 Considerations

More information

Event Driven Programming

Event Driven Programming Event Driven Programming Part 1 Introduction Chapter 12 CS 2334 University of Oklahoma Brian F. Veale 1 Graphical User Interfaces So far, we have only dealt with console-based programs Run from the console

More information

Introduction. Introduction

Introduction. Introduction Introduction Many Java application use a graphical user interface or GUI (pronounced gooey ). A GUI is a graphical window or windows that provide interaction with the user. GUI s accept input from: the

More information

Prototyping. Readings: Dix et al: Chapter 5.8 Marc Rettig: Prototyping for tiny fingers, Communications of the ACM, April 1994.

Prototyping. Readings: Dix et al: Chapter 5.8 Marc Rettig: Prototyping for tiny fingers, Communications of the ACM, April 1994. Prototyping Readings: Dix et al: Chapter 5.8 Marc Rettig: Prototyping for tiny fingers, Communications of the ACM, April 1994. 1 What is prototyping? producing cheaper, less accurate renditions of your

More information

Input: Interaction Techniques

Input: Interaction Techniques Input: Interaction Techniques Administration Questions about homework? 2 Interaction techniques A method for carrying out a specific interactive task Example: enter a number in a range could use (simulated)

More information

Lecture 14: Heuristic Evaluation. Fall UI Design and Implementation 1

Lecture 14: Heuristic Evaluation. Fall UI Design and Implementation 1 Lecture 14: Heuristic Evaluation Fall 2006 6.831 UI Design and Implementation 1 1 UI Hall of Fame or Shame? Fall 2006 6.831 UI Design and Implementation 2 The next version of Microsoft Office (Office 2007)

More information

What is Widget Layout? COSC 3461 User Interfaces. Hierarchical Widget Layout. Resizing a Window. Module 5 Laying Out Components

What is Widget Layout? COSC 3461 User Interfaces. Hierarchical Widget Layout. Resizing a Window. Module 5 Laying Out Components COSC User Interfaces Module 5 Laying Out Components What is Widget Layout? Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and

More information

Introduction to Human-Computer Interaction

Introduction to Human-Computer Interaction Introduction to Human-Computer Interaction User Interface Design Lecture 5 Petra Isenberg petra.isenberg@inria.fr with acknowledgements to: Anastasia Bezerianos, Anthony Tang, Nic Marquardt, Tobias Isenberg,

More information

Chapter 6: Graphical User Interfaces

Chapter 6: Graphical User Interfaces Chapter 6: Graphical User Interfaces CS 121 Department of Computer Science College of Engineering Boise State University April 21, 2015 Chapter 6: Graphical User Interfaces CS 121 1 / 36 Chapter 6 Topics

More information

CHAPTER 2. Java Overview

CHAPTER 2. Java Overview Networks and Internet Programming (0907522) CHAPTER 2 Java Overview Instructor: Dr. Khalid A. Darabkh Objectives The objectives of this chapter are: To discuss the classes present in the java.awt package

More information

FirstSwingFrame.java Page 1 of 1

FirstSwingFrame.java Page 1 of 1 FirstSwingFrame.java Page 1 of 1 2: * A first example of using Swing. A JFrame is created with 3: * a label and buttons (which don t yet respond to events). 4: * 5: * @author Andrew Vardy 6: */ 7: import

More information

Basicsof. JavaGUI and SWING

Basicsof. JavaGUI and SWING Basicsof programming3 JavaGUI and SWING GUI basics Basics of programming 3 BME IIT, Goldschmidt Balázs 2 GUI basics Mostly window-based applications Typically based on widgets small parts (buttons, scrollbars,

More information

User Interface Evaluation

User Interface Evaluation User Interface Evaluation Heuristic Evaluation Lecture #17 Agenda Evaluation through Expert Analysis Cognitive walkthrough Heuristic evaluation Model-based evaluation Cognitive dimension of notations 2

More information

17 GUI API: Container 18 Hello world with a GUI 19 GUI API: JLabel 20 GUI API: Container: add() 21 Hello world with a GUI 22 GUI API: JFrame: setdefau

17 GUI API: Container 18 Hello world with a GUI 19 GUI API: JLabel 20 GUI API: Container: add() 21 Hello world with a GUI 22 GUI API: JFrame: setdefau List of Slides 1 Title 2 Chapter 13: Graphical user interfaces 3 Chapter aims 4 Section 2: Example:Hello world with a GUI 5 Aim 6 Hello world with a GUI 7 Hello world with a GUI 8 Package: java.awt and

More information

Lecture 10 Usability

Lecture 10 Usability Lecture 10 Usability Mark Woehrer CS 3053 - Human-Computer Interaction Computer Science Department Oklahoma University Spring 2007 [Taken from Stanford CS147 with permission] Learning Goals Understand

More information

Announcements. Introduction. Lecture 18 Java Graphics and GUIs. Announcements. CSE 331 Software Design and Implementation

Announcements. Introduction. Lecture 18 Java Graphics and GUIs. Announcements. CSE 331 Software Design and Implementation CSE 331 Software Design and Implementation Lecture 18 Java Graphics and GUIs Announcements Leah Perlmutter / Summer 2018 Announcements Quiz 6 due Thursday 8/2 Homework 7 due Thursday 8/2 Regression testing

More information

Heuristic Evaluation of NUIG Participate Module 1

Heuristic Evaluation of NUIG Participate Module 1 Heuristic Evaluation of NUIG Participate Module 1 Nielsen s 10 Usability Heuristics (Nielsen & Mack, 1994) 1. Aesthetic & Minimalist Design Pages should not contain information which is irrelevant or rarely

More information

Command-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages.

Command-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages. 1 CS257 Computer Science I Kevin Sahr, PhD Lecture 14: Graphical User Interfaces Command-Line Applications 2 The programs we've explored thus far have been text-based applications A Java application is

More information

11/17/2008. CSG 170 Round 8. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes

11/17/2008. CSG 170 Round 8. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes Human-Computer Interaction CSG 170 Round 8 Prof. Timothy Bickmore Quiz Open book / Open notes 15 minutes 1 Paper Prototyping Team Project Review Models 2 Categories of User Models 1. Hierarchical structuring

More information