Based on notes by Jason Hong and James Landay CS 160: Lecture 11 Professor John Canny Fall 2001 Oct 9, 2001 Based on notes by Jason Hong and James Landay 9/20/2018

Outline Window events Event dispatching Widget communication & layout 9/20/2018

GUI Toolkits Main Concepts: Describes how most GUIs work Event-driven programming Widgets Interactor Tree Describes how most GUIs work Closest to Java But similar to Windows, Mac, Palm Pilot 9/20/2018

Event-Driven Programming All generated events go to a single event queue provided by operating system ensures that events are handled in the order they occurred hides specifics of input from apps Mouse Software Event Queue Keyboard Software 9/20/2018

Widgets Reusable interactive objects Handle certain events widgets say what events they are interested in event queue/interactor tree sends events to the “right” widget Update appearance e.g. button up / button down Describe the widgets on the side, button, combo box, checkbox, etc ComboBox Button 9/20/2018

Widgets (cont.) Generate some new events “button pressed” “window closing” “text changed” But these events are sent to interested listeners instead custom code goes there ComboBox 9/20/2018

Main Event Loop Source Code while (app is running) { get next event send event to right widget } Mouse Software Events Source Code Keyboard Software 9/20/2018

Interactor Tree Decompose interactive objects into a tree interactive objects also known as “widgets” based on screen geometry of objects nested rectangles Used for dispatching events events are dispatched (sent) to code in widget the code then handles the event Variety of methods for dispatching events return to this later 9/20/2018

Interactor Tree 1 Display Screen “F:\cs160\Public” window Inner Window title bar horizontal scroll bar contents area “CDJukebox” folder “Home Ent…” folder … size control “Web Newspaper” window 9/20/2018

Interactor Tree 2 7 8 9 4 5 6 + - 1 2 3 = 93.54 Display Screen + - 1 2 3 = 93.54 ENT Display Screen Outer Win [black] ????? 9/20/2018

Interactor Tree 2 Display Screen Outer Win [black] Inner Win [green] 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT Inner Win [green] Result Win [tan] Result String Keypad [Teal] = button - button + button 0 button 9/20/2018

Interactor Tree (Java) Display Screen Frame [black] 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT Panel [green] Text Entry [tan] Result String Keypad Panel [Teal] Button(“=”) Button(“-”) Button(“+”) Button(“0”) 9/20/2018

Who gets the events? To catch events, a widget registers a “listener” for that event Mouse click typed input drag… Events go to a widget containing the pointer 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT 9/20/2018

Who gets the events? But there are often several widgets containing the pointer Events go down the “stack” of visible widgets at the pointer until there is a widget that has registered a listener for that event 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT 9/20/2018

Interactor Tree (Java) Display Screen Frame [black] Panel [green] Mouse click listener Text Entry [tan] 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT Result String Keypad Panel [Teal] Button(“=”) Mouse click listener Button(“-”) Mouse click listener Button(“+”) Mouse click listener Button(“0”) Mouse click listener 9/20/2018

Interactor Tree (Java) If a widget isnt visible at the mouse, you may have to “redispatch” events to it. See http://sun.java.com/javaone/track1.html#awt.tut 7 8 9 4 5 6 + - 1 2 3 = 93.54 ENT 9/20/2018

Screen Resolution Different resolutions out there 640 x 480 800 x 600 1024 x 768 1280 x 1024 Web pages look different depending on resolution Affects what people can see What can people see when a page is first loaded? What can people see on a page in general? 9/20/2018

640 x 480 Outpost.com, a website for selling electronics and software online This is what their website looks like at 640 x 480 Can see logo, so you know where you are Can see navigation bar, so you can see most of the major choices you have Can see search Can see the value proposition Can see shopping cart Overall, very nice! Problems with this website (from what you can see here)? Part of the navigation bar is cut off Part of the main body navigation is cut off Have to do horizontal scrolling to see more too (yuck!) But very few people have 640 x 480 monitors now (around 5% or less), so it’s probably ok in most cases 9/20/2018

800 x 600 9/20/2018 Can see a few more things on the larger screen (But note that most of the content was viewable in lower resolution!) Note how the value proposition is embedded throughout In the navigation (gift gallery, shopping, etc) In the self-advertising In the prices at the right Also note the redundant navigation here! 9/20/2018

1024 x 768 9/20/2018

1280 x 1024 9/20/2018

Above the Fold “Above the Fold” is a term from the newspaper business, putting the most important content above the fold of the newspaper In this example, can see: Name and logo of newspaper Main headlines The first part of the articles With a microscope, you could also see: Date of the newspaper Price of the newspaper 9/20/2018

1024x768 1280x1024 800x600 640x480 “Above the Fold” also applies for web design too! However, “Above the Fold” means many different things depending on the screen resolution But in general, it means having the most important information at the top Where you are (Logo in top-left helps, short text describing the site) Where you can go (Navigation bars, main navigation, search) Value proposition (for website and for web page) When designing, need to consider the minimum size you want to support 9/20/2018

Network Download Speeds Everyone hates slow websites Don’t let this be your website!!!! 9/20/2018

Network Download Speeds Lots of different speeds out there Modems (28.8 kbps, 33.6 kbps, 56 kbps) DSL (384 kbps, 1.5 mbps, 8mbps) Cable Modems (1 to 27 mbps) Note #1 – Few people have fast connections About 3 million have DSL in US (1Q01) About 6 million have cable modems in US (1Q01) About 167 million have home Internet access in US Keep in mind fuzziness of statistics + Internet access at work and school + laptop modems DSL statistics from www.xdsl.com, http://www.xdsl.com/content/resources/deployment_info.asp Cable modem statistics from http://www.cabledatacomnews.com/cmic/cmic16.html US Internet users statistics from http://www.nielsen-netratings.com/ 9/20/2018

Network Download Speeds Note #2 – Faster instead of features Multimedia-rich kilobyte-heavy websites may not be best use of your users' connection in many cases "We already have lots of users in the workplace where they have 10-megabit connections. They don't want a lot of whiz-bang features. They just want the same site to work even faster.“ (Yahoo) In Search for Online Success, 'Easy Does It' Is Good Theme http://www.nytimes.com/2000/12/11/technology/11SIMP.html In Search for Online Success, 'Easy Does It' Is Good Theme http://www.nytimes.com/2000/12/11/technology/11SIMP.html 9/20/2018

Network Download Speeds Note #3 - These only measure bandwidth Bandwidth is the amount of data that can be sent per unit time Latency is the inherent delay in sending data Getting from NYC to London Concorde Cruising speed ~1330 mph (3.5 hours) Seats about 100 passengers Boeing 747 Cruising speed ~500 mph (7.5 hours) Seats about 500 passengers 9/20/2018

What does this mean for design? Still need to design for speed 1 sec download times rarely possible Can’t do much about latency Can address low-bandwidth Images make up the majority of bytes Making images faster makes site faster 9/20/2018

Fast Downloading Web Pages Use ALT tags for images Using ALT also has benefits for blind and mobile users too 9/20/2018

Fast Downloading Web Pages Know the differences between the various image formats GIF 256 colors, best for line art (Illustrator etc) Supports transparency Some compression, keeps all the data JPG Millions of colors, good for photos (or Photoshop) But no transparency Lots of compression, throws data away 9/20/2018

Fast Downloading Web Pages Use progressive / interlaced images Progressive JPG Interlaced GIF 9/20/2018

Fast Downloading Web Pages Use cropping and shrinking Usually no advantage to natural images in jpeg > 100kb 9/20/2018

Fast Downloading Web Pages Can use thumbnail pages This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works Dog | Quickly | A Loaf of Bread | Cute girls | Sweet wine Loaf of Bread | Cute girls | Sweet wine nonsensical This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works Dog | Quickly | A Loaf of Bread | Cute girls | Sweet wine Loaf of Bread | Cute girls | Sweet wine nonsensical 9/20/2018

Fast Downloading Web Pages 9/20/2018

Summary Overview of GUI systems Web design and technology Event-driven programming, widgets, interactor trees Web design and technology Screen resolutions affect what people see Network speeds influence web pages Technology is a part of design Can't be considered as an afterthought But shouldn't be primary driver of design 9/20/2018

Further Reading Books and Links on Building UIs Introduction to User Interface Software. Dan Olsen Jr. Morgan Kaufmann Publishers, 1998. Courses with notes online: Carnegie Mellon University http://www.cc.gatech.edu/classes/AY2001/cs4470_fall/ Georgia Institute of Technology http://www.cs.cmu.edu/~hudson/teaching/05-631/ 9/20/2018

Further Reading Research Papers on Building UIs Brad A. Myers. User Interface Software Tools. Carnegie Mellon University School of Computer Science Technical Report, no. CMU-CS-94-182 and Human Computer Interaction Institute Technical Report CMU-HCII-94-107. August 1994. http://reports-archive.adm.cs.cmu.edu/anon/1994/CMU-CS-94-182.ps Brad A. Myers. A Brief History of Human Computer Interaction Technology. http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html Brad Myers, Scott E. Hudson, and Randy Pausch, Past, Present and Future of User Interface Software Tools. ACM Transactions on Computer Human Interaction. In the Special Millennium Issue. http://www.cs.cmu.edu/~amulet/papers/futureofhci.pdf 9/20/2018

Further Reading Books on Web Design Designing Visual Interfaces. Kevin Mullet and Darrell Sano. Web Design in a Nutshell. Jennifer Niederst. O'Reilly , 1999. Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2001. Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998. Don’t Make Me Think! Steven Krug. Que, 2000. 9/20/2018

Further Reading Books on Web Design Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000. Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press. 1994. Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994. Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999. 9/20/2018

Further Reading Websites on Web Design UsableWeb.com, links to other usability sites Usability.gov, for building accessible websites Web pages that suck, at http://www.webpagesthatsuck.com/ Net tips for designers, at http://www.dsiegel.com/tips/ User Interface Engineering, at http://www.uie.com ZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce. 9/20/2018

Further Reading Websites on Web Design New York Times Ecommerce Times, at http://www.nytimes.com/pages-technology/cybertimes/commerce/ Webword.com usability log CNet Builder.com, info on building sites ACM’s CHI-Web Mailing List http://www.acm.org/sigchi/web/chi-web.html Goodexperience.com web log Jakob Nielsen useit.com 9/20/2018