Cs338-l11

3y ago
27 Views
1 Downloads
4.61 MB
22 Pages
Last View : 16d ago
Last Download : 2m ago
Upload by : Konnor Frawley
Transcription

Web interface origins Origins of the web interfaces lie inhypermedia and hypertext Early beginnings.Lecture 11:Interfaces on the Web– Vannevar Bush (Roosevelt science advisor, 1945) memex tool: microfilm with encyclopedias ofinformation and associative trails just stare at short text and it would be “amplified”– Ted Nelson (1960s) coined term “hypertext” along with “docuverse” and “stretch text” “computopian hopes” !!!CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web interface originsHypertext Development & implementation. Writing & reading hypertext is different thanwriting/reading normal text Three Golden Rules (Shneiderman):– Douglas Englebart (1960s) – remember him? Human Augmentation system: point-and-click,expanding outlines, etc.– 1. There is a large body of information organized intonumerous fragments.– 2. The fragments relate to one another.– 3. The user needs only a small fraction of the fragments atany one time.– Andries van Dam earliest electronic books exploited new technologies, especially graphics andanimation (2d & 3d) What’s not (easily) amenable to hypertext?(according to Shneiderman ) By mid-1980s, hypertext was mainstream– primarily as a publication tool — presentinginformation with “convenient jumps”– Apple HyperCard (Bill Atkinson, 1987)CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.2– novels, poems– reference books?– news articles?3CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 14

Hypertext to web pagesCategorizing web sites Hypertext was a necessary condition forweb pages, but not a sufficient one What else dowe need? Categorizing by site goals––––––– Sell products e.g., book sellers, eBay– Advertise products or services e.g., real estate agents, auto dealerslayoutimages/iconsstylesGUI elementsanimation?scripted objs?– Inform and announce e.g., universities, governments– Provide access e.g., libraries, newspapers– Create discussions e.g., bboards, chat rooms– Nurture communities e.g., professional orgs, political orgsCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.5CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Categorizing web sitesIs web design different from GUI design? Categorizing by size/genre– 1 - 10 pages personal site, projectsummary– 5 - 50 pages conference program,organization overview– 50 - 500 pages city guide, product catalog– 500 - 5,000 pages technical reports, filmdatabaseCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.6 Hmm. Experts don’t agree on this one. “It’s basically the same”– 5,000 - 50,000 pages university guide,newspaper site– web site is clearly a user interface,and often one with GUI(-like) elements– usability ideas for GUIs transfer to the web– evaluation like user testing & heuristic evaluationremain largely the same (though might need newheuristics/ideas in this domain)– 50,000 - 500,000 pages directories/indices,airline schedules– 500,000 – 5,000,000pages congressional digest– 5,000,000 pages Library of Congress,NASA archives7CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 28

Is web design different from GUI design?Web site design “It’s very different” Site prototyping– you only design part of the interface;you don’t control one big part: the browser– user can manipulate many aspects of interaction– storyboards are very useful– flowcharts / hierarchies provide nice overviewsof entire sites (or parts thereof) e.g., resizing windows, changing fonts, navigating backand forth, bookmarking, etc. e.g., site for “Aquatic Entomology” course– some things are out of both your & users’ control e.g., download times, security– your pages are a tiny part of the web space thus, seen by a small fraction of people,or (likely) a self-selected group of people– scale of particular sites can large sites really be designed?Next bunch of slides derived from information athttp://www.edtech.vt.edu/edtech/id/interface/CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.9CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web site designWeb site design Navigation types Navigation types– menu-tree navigation– tab-stop navigation menu hierarchy is visible at all times,user can go down then backtrack upCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.10 like menu-tree, but uses “tab” physical metaphor11CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 312

Web site designWeb site design Navigation types Navigation types– index navigation– pull-down menu navigation (almost) all information visible/accessible from top levelCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. uses Javascript to select next page display current selection?13CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web site designWeb site design Navigation types Navigation types– iconic navigation– page-turning navigation find information by picture (perhaps) less ordered than textual menus (?)CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.14 natural for sequential information,not as useful for large and/or complex sites15CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 416

Web site designWeb site design Navigation types Navigation types– navigation by site map or table of contents– navigation by search site map has grouping linking, table of contents doesn’tCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. essentially, builds an index on the flybased on given search terms17CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web site designWeb site design Navigation types Screen layout– mixing navigation types.CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.18– balance is an essential component,as it is for any window19CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 520

Web site designWeb site design Screen layout Screen layout– focal point guides viewer’s eye to desired placesCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.– high-density layouts are difficult to navigate,especially without strong visual grouping21CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web site designWeb site design Screen layout Screen layout– consistency (as always) is key from page to pageCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.22– metaphors can evoke mental models ofwell-known objects and improve recognition23CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 624

Web GUIsExercise Two ways to think about web GUIs. Can we design a Java IDE for the web?– (1) The web page itself is a GUI. ––––links buttonsradio buttons & check boxesinput fields text fieldspull-down menuslayoutkeyboard shortcuts (browser)provide editing, compiling, running, debuggingwhat would it look like?what functions would you expect from it?how does this compare to “on-your-machine”? interaction feel? other issues?– (2) The web page can contain “sub-GUIs.” i.e., applets! Swing & Java give us the tools to make appletsCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Note: Not too far-fetched! Could be good for a newprogramming language.25CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.AppletsApplets Ok, let’s return to Web GUIs as applets. Applet methods Event handling, Part I– drawing by painting handling events manuallypublic class Simple extends Applet {. . .public void init() { . . . }public void start() { . . . }public void stop() { . . . }public void destroy() { . . . }. . .}class Simple extends Applet {public void paint(Graphics g) { . . . }. . .}.public boolean mouseDown (Event event, int x, int y) {addItem("click!. ");return true;}– init() : fast one-time initialization should contain code normally in the constructor Event handling, Part II– start() : performs some work or starts threads– stop() : pauses work when applet not visible– destroy() : final cleanupCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.26– treat applet like a normal window JApplet is a top-level container, like JFrame & JDialog27CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 728

AppletsApplets Example: HelloSwingApplet Example: AppletDemopublic class AppletDemo extends JAppletimplements ActionListener {protected JButton b1, b2, b3;public class HelloSwingApplet extends JApplet {public HelloSwingApplet() { “hack” to avoid error in 1.1}protected static final String DISABLE "disable";protected static final String ENABLE "enable";protected String leftButtonFilename "images/right.gif";protected String middleButtonFilename "images/middle.gif";protected String rightButtonFilename "images/left.gif";public void init() {JLabel label new JLabel("You are successfully running a Swing , BorderLayout.CENTER);}private boolean inAnApplet true;URL codeBase; //used for applet version only//Hack to avoid ugly message about system event access check.public AppletDemo() {this(true);}}CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.29CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.AppletsApplets Example: AppletDemo Example: AppletDemopublic AppletDemo(boolean inAnApplet) {.}public void actionPerformed(ActionEvent e) { handle enabling/disabling }public void init() {setContentPane(makeContentPane());}.public Container makeContentPane() {.b1 new JButton("Disable middle button", actButton.LEFT);b1.setMnemonic(KeyEvent.VK D);b1.setActionCommand(DISABLE); set up other buttons public static void main(String[] args) {JFrame frame new JFrame("Application version: AppletDemo");30// Following code only for running code as an application!frame.addWindowListener(new WindowAdapter() {public void windowClosing(WindowEvent e) {System.exit(0);}});JPanel pane new JPanel();pane.add(b1); add other buttons ,2,2,Color.black));AppletDemo applet new ;}return pane;}}CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.31CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 832

AppletsApplets Including applets on a web page Applet security– a simple way.– What applets typically cannot do(subject to particular browser) APPLET CODE AppletSubclass.class WIDTH anInt HEIGHT anInt /APPLET read or write files on the host that's executing it make network connections except to the host that itcame from start any program on the host that's executing it read certain system properties control certain aspects of window appearance– with parameters and alternate text. APPLET CODE "Animator.class" WIDTH 460 HEIGHT 160ALT "If you could run this applet, you'd see some animation" PARAM NAME "imageSource" VALUE "images/Beans" PARAM NAME "backgroundColor" VALUE "0xc0c0c0" PARAM NAME "endImage" VALUE 10 PARAM NAME "soundSource" VALUE "audio" PARAM NAME "soundtrack" VALUE "spacemusic.au" PARAM NAME "sounds"VALUE "1.au 2.au 3.au 4.au 5.au 6.au 7.au 8au 9.au 0.au" PARAM NAME "pause" VALUE 200 Your browser is completely ignoring the <APPLET> tag! /APPLET CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.33CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.AppletsWeb 2.0 Applet security What is “Web 2.0”?34– What applets typically can do(subject to particular browser) make network connections to the host they came from. cause HTML documents to be displayed. invoke public methods of other applets on the samepage keep running after you leave their page (though this isnot recommended/desired for most applets)– Note: Applets loaded from the local file systemhave fewer restrictions than network appletsNext few slides derived from material by Jim CueneCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.35CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 936

Web 2.0Web 2.0 Who uses Web 2.0 sites? Surprisingly, users find advertisingacceptable– If you believe that bloggers are roughly likeWeb 2.0 users CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.– Web 2.0 could open up marketing options?37CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Web 2.0Engineering Models of User Behavior What changes might we expect from marketers? We’ve talked recently about – More users are connecting to each other and contentthrough networked, peer-driven activities & content– engineering models to predict user behavior incertain situations– user model frameworks (e.g., KLM-GOMS) thatpredict time-on-task– computational user models (e.g., productionsystems) as used for intelligent interfaces andmodel tracing Linkedin now has service referrals as part of their package– API’s and Content syndication will lead to more machinegenerated connections “Non-compliant” content won’t fit into the flow as readily– Web 2.0 is truly two-way Marketers need to be very willing to “listen” and receive morethan broadcast The basic ideas also apply to the webdomain. but we can do better by focusingon specifics of this domain– User-generated content may be more valuable to usersthan content generated by companies/organizations– Adoption will drive investments in online advertisingCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.38– #1: SNIF-ACT model [Fu & Pirolli]– #2: Bloodhound system [Chi et al.]39CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1040

SNIF-ACTSNIF-ACT Goal: Encapsulate web-browsing behavior ina computational model Key component: Information Scent– distal info desired info a few clicks away– proximal cues info right now (e.g., link names)– . to better understand behavior– . to predict behavior (as we will see) Approach: Model based on.– Information Foraging– the ACT-R cognitive architecture –a production system frameworkCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.41CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.42SNIF-ACTSNIF-ACT Key component: Information Scent Key component: Information ScentActivationStrengths(log-prior odds)Try finding information aboutmajoring in Sociology at Drexel www.drexel.eduBase-levelactivationCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.43CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1144

SNIF-ACTSNIF-ACT Key component: Information Scent Key component: Information Scent– for G information goal (what user is seeking)and L link to that information.– Where do we get Sji? can construct activation networks from online textcorpora and calculate Sji for different words andinformation goals and base-rate frequencies Bi of all words and pairwiseco-occurrence frequencies of words can also becomputedInformationScentGCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.L45CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.SNIF-ACT 46SNIF-ACTDeclarative Memory– perception putsinfo in memory:link names, etc Web Behavior Graphs for two domains.– (different colors different web sites)Procedural Memory– knowledge ofusing thebrowser– stored asconditionactionproductionrules– e.g.,attend-to-link,click-linkCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.47CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1248

SNIF-ACTSNIF-ACT Model predicts. Results– (1) which links user will click on– (2) when people decide to leave a site– histogram showing predicted model rank forclicked links. Testing(bias to theleft better)– these two actions extracted from log files– actions compared to model predictions(Position modelsimply ranks byposition, top &left better)CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.49CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.SNIF-ACTBloodhound Results So SNIF-ACT, Information Foraging, etc.provide reasonable predictions of behavior How can we instantiate this into a real tool? Bloodhound is a system that analyzes theinformation cues on a web site– scent values before and right when leaving site values decrease below overall mean (dotted line)50– strives for a simpleapplication of theory– enter a web site search words,get a usability reportCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.51CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1352

BloodhoundBloodhound Overview of algorithm (Web User Flow byInformation Scent) and spreading activation Overview of algorithm (Web User Flow byInformation Scent) and spreading activationCS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.53CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.BloodhoundBloodhound Overview of algorithm (Web User Flow byInformation Scent) and spreading activation User testing54– 244 users, 1386 user sessions Domains––––CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.55help.yahoo.com (Yahoo! help system section)www.rei.com (a camping/outdoor online store)hivin-site.ucsf.edu (AIDS and HIV medical site)parcweb.parc.com (company intranet)CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1456

BloodhoundBloodhound Tasks Results (yellow good, green not so much)Help.yahoo.com (7484 documents): You want Yahoo! to add your site to the Yahoo! Directory. Find someguidelines for writing a description of your site. When is the playing season for Fantasy Football? You want to get driving directions to the airport, but you don’t know thestreet address. How else can you get accurate directions there?REI (36422 documents): You are planning a week-long hiking trip for this summer, and you're on abudget. Find a single person tent for less than 120. Find the location of the REI store nearest you. Find yourself some warm, fairly heavy long underwear for the upcomingski season.etc.CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.57CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.BloodhoundDeveloping Web Interfaces Summary So far, we’ve focused on Java Swing, whichis useful for standard & Web applications. Most “applications” on the Web, however,are not Swing applets. What else is used?– Information Foraging SNIF-ACTprovides the theory.– Bloodhound provides the usable system. part theory, part database (for associations),part usable interface– So many different things, we can’t cover them in1 lecture, or even 10.– But let’s check out the major ones. What about Web 2.0 applications?They’re working on it.CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.5859CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.Page 1560

Design GuidelinesDesign Guidelines The points we’ve seen earlier with designguidelines all apply to Web design. The dominant way of achieving consistencyin Web design: CSS. CSS Cascading Style Sheets CSS examplebody {!!background-color: #dfa;!!font-family: "Times New Roman";!!font-size: 11pt;!}!!h1 {!!font-size: 16pt;!!color: blue;!!text-align: center;!!margin-top: 12px;!– Defines the styl

Writing & reading hypertext is different than writing/reading normal text Three Golden Rules (Shneiderman): – 1. There is a large body of information organized into numerous fragments. – 2. The fragments relate to one another. – 3. The user needs only a small fraction of the fragments at any one time.

Related Documents:

Carrier Pro/Invoice Number as sent in the N9 02 on the EDI 990. Sent In The . Sent in the L11.01 with DJ qualfier in the L11.02 on the EDI 204 QN Stop Sequence Number Stop Number, 1 is the Pick-up. Increment each add

L05: 2 Nephi 1-8 L08: 2 Nephi 28-33 L09: Jacob 1-7 L10: Enos - Mosiah 3 L11: Mosiah 4-26 L12: Mosiah 27-Alma 7 L06: 2 Nephi 9-16 L13: Alma 8-16 L07: 2 Nephi 17-27 L14: Alma 17-29 FDREL 122 L01: Introduction L02: Alma 30-35 L08: 3 Nephi 12-17 L09: 3 Nephi 18-22 L03: Alma 36-42 L04: Alma 43-63 L10: 3 Nephi 23-30 L11: 4 Nephi - Mormon 9

MAC 2311 Calendar , Summer 201 6 Monday Tuesday Wednesday Thursday Friday May 9 L1 10 L2 11 12 L3 13 L4 16 L 5 17 L 6 18 WA HW 1 due 19 L 7 Quiz 1 (L1 -L 4) 20 L8 23 L9 24 L10 25 WA HW 2 due 26 L11 Quiz 2 (L5 -L 8) 27 L11 30 HOLIDAY N O CLASS 31 Review Jun 1 WA HW 3 due E XAM 1 2 L12 3 L13 6 L 14 7 L 15 8

L11 Solar Control & Shading Masks 5/6/08 ARCH 3/431 Spring 2008 3 1. Site Shading Masks Plotting a picture of the sun's path, and the landforms, buildings, trees and objects that block the sun. Sun Path Diagrams provide a very handy frame of reference for accessing horizon obstructions Obstructions from the previous diagram as seen on a .

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 1 Lecture 8: Design Guidelines CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2 The GUI development process We've now seen some tools that enable us to build our interface. So let's get back to the GUI process.

Technology Listening Library Audio, Interactive Vocabulary CD-ROM Talk About the Picture Introduce the picture of the spider web. Say: Describe what you see in the picture. As you support students in talking about images throughout the lesson, use the options below to meet students at their individual levels of English profi ciency. Build .

Labor Market Frictions, Firm Growth, and International Trade Pablo D. Fajgelbaum NBER Working Paper No. 19492 October 2013, Revised November 2019 JEL No. D92,F16,J62,L11 ABSTRACT I study the aggregate effects of labor market frictions in a small open economy where firms grow slowly and make fixed export investments.

Prof. Andreas Wagner Karlsruhe Institute of Technology (KIT) Published: April 2014 Third edition: May 2015 2. The significance of thermal insulation Arguments aimed at overcoming misunderstandings 3. 4 Preamble. The energy renovation of existing build-ings represents a key component of the “Energiewende” (energy revolution). The building envelope and the system technology used within the .