10/23/2008. CSG 170 Round 6. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes
|
|
- Roxanne Gallagher
- 6 years ago
- Views:
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 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 informationDue 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 informationPlenty 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 informationHuman-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 informationHuman-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 informationHuman-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 informationCS 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 informationUsability. 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 informationIntroduction 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 informationKF5008 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 informationHuman-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 informationIntroduction 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 informationGraphical 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 informationTop-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 informationSwing 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 informationWhat 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 informationJava. 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 informationHandout 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 informationLaying 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 informationAnnouncements. 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 informationThis 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 informationHuman-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 informationExpert 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 informationInteraction 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 informationLecture 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 informationGraphical 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 informationHuman-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 informationInteraction 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 informationINTRODUCTION 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 informationContainers 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 informationHuman-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 informationCS5340 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 informationGUI 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 informationGUI 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 informationCSE 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 informationBuilding 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 informationWIMP 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 information10/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 information15/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 information11/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 informationChapter 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 informationJava: 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 informationMIT 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 informationCO328- 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 informationCSE 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 informationResizing 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 informationQuality 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 informationHCI 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 informationCSE 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 informationDr. 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 informationGraphical 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 informationLearn 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 informationGraphics 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 informationSoftware 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 informationIntroduction 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 informationUser 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 information2110: 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 informationPackages: 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 informationPROGRAMMING 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 informationCSSE 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 informationJava 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 informationNo 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 informationChina 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 information1.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 informationFall 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 informationIntroduction 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 informationCSSE 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 informationJava 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 informationWindow 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 informationStarting 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 informationLayout. 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 informationCSE 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 informationAll 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 informationIntroduction 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 informationJava 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 informationAdditional 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 informationHeuristic 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 informationInput 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 informationGraphical 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 informationDatenbank-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 informationcs465 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 informationGraphic 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 informationEvent 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 informationIntroduction. 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 informationPrototyping. 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 informationInput: 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 informationLecture 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 informationWhat 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 informationIntroduction 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 informationChapter 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 informationCHAPTER 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 informationFirstSwingFrame.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 informationBasicsof. 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 informationUser 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 information17 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 informationLecture 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 informationAnnouncements. 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 informationHeuristic 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 informationCommand-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 information11/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