CS 580 Client-Server Programming Spring Semester, 2006 Doc 21 Some GUI Apr 13, 2006 Copyright ©, All rights reserved. 2006 SDSU & Roger Whitney, 5500 Campanile.

Slides:



Advertisements
Similar presentations
Programming Logic and Design Fourth Edition, Introductory
Advertisements

1 CS 501 Spring 2003 CS 501: Software Engineering Lecture 2 Software Processes.
16/13/2015 3:30 AM6/13/2015 3:30 AM6/13/2015 3:30 AMIntroduction to Software Development What is a computer? A computer system contains: Central Processing.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 24, 2004.
CSCI 4550/8556 Computer Networks Comer, Chapter 3: Network Programming and Applications.
Paper Prototyping A tool for iterative design Wai Yong Low.
Midterm Exam Review IS 485, Professor Matt Thatcher.
2/23/991 Low-fidelity Prototyping & Storyboarding SIMS 213, Spring ‘99 Professor James Landay, EECS Dept. February 23, 1999.
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
CS 635 Advanced Object-Oriented Design & Programming Spring Semester, 2006 Doc 2 Terms & Testing Jan 24, 2006 Copyright ©, All rights reserved SDSU.
SE 555 Software Requirements & Specification 1 SE 555 Software Requirements & Specification Prototyping.
Starting Out with C++: Early Objects 5/e © 2006 Pearson Education. All Rights Reserved Starting Out with C++: Early Objects 5 th Edition Chapter 1 Introduction.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
Copyright © 2009 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Java Software Solutions Foundations of Program Design Sixth Edition by Lewis.
By Bob Bunson  Simulation of software development project  Fictitious system from Concept to Code  Oriented around the.
Web Application Architecture: multi-tier (2-tier, 3-tier) & mvc
Sofia Carlander Kinoshita Laboratory 2004/2005
INTROSE Introduction to Software Engineering Raymund Sison, PhD College of Computer Studies De La Salle University User Interface Design.
1 Software Testing (Part-II) Lecture Software Testing Software Testing is the process of finding the bugs in a software. It helps in Verifying and.
ProCol~ A jEdit Plugin for Remote Project Collaboration Justin Dieters Spring 2004 CS470 Final Presentation.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
1 Low-fidelity Prototyping. 2 Interface Hall of Shame or Fame? PowerBuilder List of objects with associated properties.
DMS 546/446 INTERFACE DESIGN AL LARSEN – SPRING 2008 PAPER PROTOTYPING Lecture draws from multiple sources, including: Jakob Nielsen, Shawn Medero (
Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004.
HCI 특론 (2010 Spring) Low-fi Prototyping. 2 Interface Hall of Shame or Fame? Amtrak Web Site.
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
June 2004 User Interface Design, Prototyping, and Evaluation 1 Outline Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools Hi-fi prototyping.
CS 390- Unix Programming Environment CS 390 Unix Programming Environment Topics to be covered: Distributed Computing Fundamentals.
4/2/03I-1 © 2001 T. Horton CS 494 Object-Oriented Analysis & Design Software Architecture and Design Readings: Ambler, Chap. 7 (Sections to start.
Putting together a complete system Chapter 10. Overview  Design a modest but complete system  A collection of objects work together to solve a problem.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
CS298: HCI Design Clinics Paper Prototyping 03/01/10 Berkel ey UNIVERSITY OF CALIFORNIA.
Prof. James A. Landay University of Washington Autumn 2008 Low-fi Prototyping November 4, 2008.
CSE 219 Computer Science III Program Design Principles.
Presenting in Prof. Eckert’s Classes Please make sure your presentation gives an opinion or argument on some idea: for example, evaluate the book, or.
Usability Testing Chapter 6. Reliability Can you repeat the test?
Usability When you design the userinterface to a computer system, you decide which screens the system will show, what exactly will be in each screen and.
Guide to Programming with Python Chapter One Getting Started: The Game Over Program.
Part TWO The Process of Software Documentation Chapter 5: Analyzing Your Users Chapter 6: Planning and writing your Doc. Chapter 7: Getting Useful reviews.
Architectural Patterns Support Lecture. Software Architecture l Architecture is OVERLOADED System architecture Application architecture l Architecture.
Intermediate 2 Software Development Process. Software You should already know that any computer system is made up of hardware and software. The term hardware.
CS 580 Client-Server Programming Spring Semester, 2006 Doc 16 Some Parsing Mar 30, 2006 Copyright ©, All rights reserved SDSU & Roger Whitney, 5500.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
1 CS Tutorial 5 Frid. Oct 23, 2009 Design Document Tutorial.
Requirements Engineering Southern Methodist University CSE 7316 – Chapter 3.
1 Paper (low-fidelity) Prototypes. 2 When we are designing When we are thinking about design We are visualizing the interface inside our head (imaginary)
Software Prototyping Rapid software development to validate requirements.
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
Project Overview Bag-It Game E-Learning By Design Group Presenters: Cheryl Anderson Chuck Chills Tim Davis Lisa Fuller Susan Genden.
Lab Course / Praktikum: S ummer Semester 2012 Project Management and Software Development for Medical Applications Computer Aided Medical Procedures (CAMP),
Design and Planning Or: What’s the next thing we should do for our project?
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Wednesday Running A Paper Prototyping Session Paper Prototyping Video: Paper.
Low-fidelity Prototyping. Outline Low-fidelity prototyping Wizard of OZ technique Informal user interfaces Sketching user interfaces electronically Informal.
HCI 특론 (2007 Fall) Low-fi Prototyping. 2 Hall of Fame or Shame? Password dialog in Eudora Pro for Mac.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Tuesday CS 321 Human-Computer Interaction Paper Prototyping Video: Paper Prototyping.
Automated Testing April 2001WISQA Meeting Ronald Utz, Automated Software Testing Analyst April 11, 2001.
DOCUMENTATION REF: Essentials of IT (Hamilton et al) Chapter 1.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
School of Engineering and Information and Communication Technology KIT305/607 Mobile Application Development Week 7: Usability (think-alouds) Dr. Rainer.
Types for Programs and Proofs
T Project Review Group: pdm I2 Iteration
Prototyping.
The Client/Server Database Environment
Low-fidelity Prototyping
Computer Basics Applications.
SOFTWARE DEVELOPMENT LIFE CYCLE
Software Mr. Yip BTT 1O.
Presentation transcript:

CS 580 Client-Server Programming Spring Semester, 2006 Doc 21 Some GUI Apr 13, 2006 Copyright ©, All rights reserved SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA USA. OpenContent ( license defines the copyright on this document.

2 References Rettig, Marc. Interface Design When You Don't Know How, Communications of the ACM, Jan. 1992, Vol. 35, No. 1, pp Rettig, Marc. Prototyping for Tiny Fingers, Communications of the ACM, April. 1994, Vol. 37, No. 4, pp Domain-Driven Design, Eric Evans, 2004, Addison-Wesley Patterns of Enterprise Application Architecture, Martin Fowler, 2003, Pearson Education User Interface Design for Programmers, Joel Spolsky,

3 Recommended Reading – Designing GUIs User Interface Design for Programmers, Joel Spolsky, 2001 There is a printed longer version of the book. The on-line version is free and will get you started. Design of Everyday Things, Donald Norman, 1990 This is an excellent book, is entertaining and only costs $12 new at Amazon. Anyone that designs or builds anything has to read this book. These books do not cover the mechanics building a GUI. They do not cover which fonts and colors to use. They just get you started thinking about the really important questions related to GUI design.

4 Software Structure with UI & Database Tiers – parts of program run on different machines Layers – parts of program run on same machine Layers Presentation – Display of Data Domain – Logic related to purpose of the application Data Source – Communication with data source

5 Keep the presentation & domain layers separate GUI code should not contain domain logic In simple cases different methods in one class may handle presentation and domain logic A single method does either presentation or domain logic Can you test the domain logic with automated unit testing

6 Time Date Domain Layer public class TimeDateClient{ private static final char CARRIAGE_RETURN = (char) 13; private static final char LINE_FEED = (char) 10; String server; int serverPort; public TimeDateClient(String serverNameOrIP, int port){ server = serverNameOrIP; serverPort = port;} public String date() throws IOException { return sendMessage("date");} public String time() throws IOException{return sendMessage("time"); } public String sendMessage(String message) throws IOException{ Socket serverConnection = new Socket(server, serverPort); writeMessage(message, serverConnection); byte[] result = readMessage(serverConnection); serverConnection.close(); return new String(result); }

7 Time Date Domain Layer private byte[] readMessage(Socket serverConnection) throws IOException { UpToFilterInputStream in = new UpToFilterInputStream( new BufferedInputStream( serverConnection.getInputStream())); byte[] result = in.upTo(LINE_FEED); return result; } private void writeMessage(String message, Socket serverConnection) throws IOException { OutputStream out = new BufferedOutputStream( serverConnection.getOutputStream()); out.write((message + CARRIAGE_RETURN).getBytes()); out.flush(); }

8 Now add a GUI that uses Domain layer

9 Smart UI Pattern “the separation of UI and domain is so often attempted and so seldom accomplished that its negation deserves a discussion” Eric Evans, Domain-Driven Design The Pattern Put all business logic into user interface Divide the application into different small user interfaces Use relational databases as back end Use automated UI building and visual programming tools

10 Smart UI Pattern Advantages High and immediate productivity for simple applications Little training need by the developer Short development time for small modules Disadvantages No reuse – code gets duplicated Integration of applications difficult Very difficult to add new functionality to existing application Difficult to build complex applications

11 GUI Clients & Servers GUI Clients Used to get work done Good when they help people get work done Users do not care about the client-server protocol Don’t expose the user to the client-server protocol Build the GUI to help people accomplish a task, not just to perform the client-server protocol

12 Example: Time Date Client Protocol has two messages Date Time Client has one button to get time & date

13 Interface Design When You Don't Know How

14 Basic Rule for Good Visual Design Hire a graphic/GUI designer

15 Basic Rule for Almost Everything Else Painstakingly follow established standards

16 What Makes a Good GUI? A user interface is well-designed when the program behaves exactly how the user thought it would Deleting a file on a Mac Move it to the trash can! How do you unmount floppies & external hard drives? Move it to the trash can But users think this will delete or erase it

17 Mental Models & Users Users don’t read the manual More text on the screen - fewer people will read it Users have a mental model of how your program works Make sure your program fits their mental model Users think the trash can deletes things

18 The Process of Creating a GUI Plan ahead Use bite-sized chunks Abandon the waterfall life cycle in favor of iterative design Conduct user testing early and often Focus on the users' needs and involve them in the process Come up with good, testable usability goals Hire a graphic designer

19 Why iterative design?

20 But we don't have time to redo the GUI!

21 Prototype the GUI?

22 Problems with Software Prototypes Software Prototypes take too long to build and change Testers tend to comment on "fit and finish" issues Developers resist changes Managers ship the prototype Software Prototypes set false expectations Single bug in a software prototype can halt a test

23 Use Paper Prototypes

24 Paper Prototype Kit White paper Unlined Heavy enough to endure repeated testing and revisions 5-by-3-inch cards Use as construction material Taking notes Adhesives Tape: clear, colored, double-backed, etc. Glue sticks Post-It glue White correction paper Markers Colored pens and pencils Highlighters Fine and thick markers Sticky note pads Acetate sheets Scissors, X-acto knives, straightedges, Band-Aids White-out

25 Build A Paper Prototype Do it fast Construct Models, not illustrations

26 Test your Prototype with Users

27 Preparing for a Test Select your users Know the demographics of your users Testers should represent the whole range of users Prepare test scenarios Practice

28 Conducting a Test Greeter Welcomes users Puts users at ease Facilitator Runs the test Gives users instruction Encourage the user to express their thoughts Computer Runs the computer Observer Takes notes

29 The Test Video tape the test Before starting the test, explain the process to the user Debrief the user after the test Evaluate the Results