1. 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

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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. Interactor Tree (Java)
If a widget isnt visible at the mouse, you may have to “redispatch” events to it. See 7 8 9 4 5 6 + - 1 2 3 =
93.54
ENT
9/20/2018

17. 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

18. 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

19. 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

20. 1024 x 768
9/20/2018

21. 1280 x 1024
9/20/2018

22. 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

23. 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

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

25. 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
Cable modem statistics from
US Internet users statistics from
9/20/2018

26. 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
In Search for Online Success, 'Easy Does It' Is Good Theme
9/20/2018

27. 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

28. 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

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

30. 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

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

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

33. 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

34. Fast Downloading Web Pages
9/20/2018

35. 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

36. 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
Georgia Institute of Technology
9/20/2018

37. 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 and Human Computer Interaction Institute Technical Report CMU-HCII August 1994.
Brad A. Myers. A Brief History of Human Computer Interaction Technology.
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.
9/20/2018

38. 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
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

39. 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
Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994.
Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.
9/20/2018

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

41. Further Reading Websites on Web Design
New York Times Ecommerce Times, at
Webword.com usability log
CNet Builder.com, info on building sites
ACM’s CHI-Web Mailing List
Goodexperience.com web log
Jakob Nielsen useit.com
9/20/2018