Presentation on theme: "Learning Objectives Give names to computing features that you know intuitively Explain placeholders and the placeholder technique Explain how “metaphor”"— Presentation transcript:
2 Learning ObjectivesGive names to computing features that you know intuitivelyExplain placeholders and the placeholder techniqueExplain how “metaphor” is used in computingDescribe the desktop metaphor, giving examples of appropriate iconsDescribe the touch metaphor, giving sample motionsExplain how the desktop and touch metaphors differ
3 Feedback A computer assists us, doing whatever we ask it to do We want our “assistant” to report on the progress of the task it is doingWe need to know that the task was done and when to give another oneAlways expect feedback about what is happening
4 FeedbackFeedback is an indication that either the computer is still working or it is doneFeedback takes many forms:The revision is visibleAreas on the screen become highlighted, shaded, gray, underlined, color change, or you might hear a click
5 FeedbackMost obvious form of feedback is that the computer is performing a time-consuming operationCursor is replaced by a different iconSome apps give custom feedbackOr use a progress bar to give an estimate on time remaining
6 Consistent InterfaceRegardless of who makes the software, icons and menus tend to be similarEspecially so within a specific company (Microsoft for example)Look for similar menu names, like File and EditLook for similar functions within the menus, like Cut, Copy, Paste in the Edit menu
7 Consistent Interface Why? Companies reuse the same code in each of their applicationsAids you in learning and using additional applicationsCertain operations are so fundamental to processing that all apps just use those operations
8 New Instance Under File you usually find a command, New New creates a “blank” instance of the kind of files the application createsWhat is “blank information”?An empty structure to hold (record) all of the properties of that file and store its contentExample: A new/empty address book entry is ready to hold names, images, and phone numbers about the new individual
10 Perfect ReproductionComputers encode information as a sequence of binary digits, 0’s and 1’sBecause of the use of two digits, we call it digital informationUsing only 0’s and 1’s means that digital information can be perfectly reproduced or replicated
11 Exact DuplicateA second copy is made simply by duplicating the sequence of 0’s and 1’sThis is one way digital improves on analog informationAnalog information comes from or is stored on a continuously variable mediumA copy of an image, for example, could come out too dark or too light when compared to the original
12 The Perfect Reproduction Property of Digital Information It also doesn’t matter where the copy came from:Both the original and the copy are the same sequence of 1’s and 0’sEvery copy can be made from the last copy, and still be identical to the original!
13 The Desktop Screen image displayed when a PC starts up A metaphor Colored or patterned backgroundInformation displayed on top, bottom, or sideA metaphorAppearance and means of interaction suggest something familiar to us: physical desk and papersWork goes in filesFiles go in foldersTools (calculator, recorder) used to perform tasksVery successful, near universal now
14 The DesktopIn the ‘70s the first personal computer (the Alto) was developed by XeroxIt introduced a graphical user interface instead of the (usual) text user interfaceSince the Alto was designed for office use, the metaphor that was used for the screen was desktopOther office metaphors: files, folder, documents
15 The DesktopSteve Jobs and Steve Wozniak founded Apple and built computers TUIs at firstApple Macintosh was first successful GUI PC.Extended ideas from Alto with new iconsShowcased painting and drawingMicrosoft introduced Windows a year and a half later
16 More Computer Metaphors The Mac first introduced the mouse to the public…another component in desktop metaphorApple did not invent itStanford Research Institute invented the mouse in December 1968When introduced, it was stated that they called it a mouse and didn’t know why they didn’t change the name!
17 Changing Metaphors A new idea, the touch metaphor Users touch the content, smart phones, tablets, and other mobile devicesExample: the Cover Flow mechanism for scanning through a list, using a sweeping motion of the pointer
19 Metaphor Relationships The touch metaphor is intended to simplify the use of smart phone and tabletsThis technology is not new (use of stylus and touch screen interaction at kiosks)Touch has no mouseIt’s possible to use the touch metaphor with a trackpad or mouse so it is not limited to mobile devices
20 Why is Touch a Metaphor? It’s a way to eliminate the mouse, but… It changes how humans interact with the computerScrollbars using the desktop metaphor for moving through a displaySmall screens don’t have room for scrollbarsDirection of motion is opposite between touch and desktop metaphors
21 Why is Touch a Metaphor?It changes how humans interact with the computerWith the touch metaphor, your hands are “on” the contentYou move the content to where you want it to beWith the desktop metaphor you “slide a window over the content”
22 GUI: Graphical User Interface Desktop is also an example of a GUIGUI elementsWIMP: windows, icons, menus, pointersMost new software uses GUIsContrast with command-line interfaces (CLIs)Examples of CLI interfaces?
26 Common GUI ElementsLooking at the Chrome GUI we see several things we recognize from other browsersURL window, for specifying the page you wish to browseContent window, for displaying the web pageBack “button”Reload buttonSeveral icons we don’t recognize… wrench, paperStar icon?
27 Unknown Icon? Hover. Try to hover and get tooltip Hovering tells us “star” bookmarks current page
29 Triangle Pointers Chrome has no menu bar Triangle pointers indicate hidden options“page” for file operations“wrench” for mechanics of browser operationChrome interface has changedThree bars (why?)Pro tip: Ctrl-T for new tab
30 Common Menu Behavior Menus on the top bar are called drop-down FamiliarSame operations may be available by icon on a toolbarMicrosoft uses RibbonRecently used functions usu. displayed
31 Standard Menu Functions File operationsNew, open, close, save, save as, print, exitEdit operationsUndo, cut, copy, paste, select all, find, clearMany menu operations have keyboard shortcuts (non-GUI)
37 Principle: Form Follows Function Design principlePurpose dictates appearanceFunctionality same similar appearance
38 Similar Applications, Similar Features Text processing applications allUse a cursorHave operations for typing, deleting, selecting, copying, searching, replacing, etc.Two music players will look different, but both willopen music streams, play them, pause, advance to future point, control volume, etc.
39 Illustrating Form Follows Function: Searching Text Using Find Text search (or find) used in many applicationsOften Ctrl-F shortcutGUIs may look different, but underlying concepts will be familiar
40 How Search is DoneComputer searching starts at beginning of document or at cursor position"Slide" the search string along the textAt each position, look for token matchIf there is a match, the process stops and displays the found instanceIf there is no match, slide the search string one position along until found, or we hit the end of the textby the content of their character^^^^^^^content
41 Search Complications Case Sensitivity Computer stores uppercase and lowercase letters as different charactersMatch only occurs when both the letters and the case are identicalUser has the option to ignore case-sensitive capabilityOften the default
42 Search Complications (cont'd) Hidden TextSearch may need to account for formatting info
43 Search Complications (cont'd) SubstringsSearch will turn up words that contain the search string (searching for "you" will turn up "your")Word processors usually have ability to search for whole wordsMultiword StringsIf the number of spaces in the search string is different from the number in the text being searched, no match is found
44 Editing Text Using Substitution Search and replace combines searching and editing (sometimes Ctrl-H)Useful for correcting all occurrences of search stringChange "west coast" to "West Coast"Eliminate extra spacesFormatting text
47 Quiz How many KB are in a MB? What type of hardware is an Intel Core i7?What’s the difference b/w memory (RAM) and storage (disk drive)?Give an example of form following function.
48 SummaryFind and ReplaceAll are standard operations that simplify our computer useMetaphors are essential to computer usage because the guide us in learning and using softwareThe desktop metaphor is classic; the touch metaphor is newer; they will co-exist