2- 2

2. Learning the Technology • People do not have any innate technological abilities or understanding • Our experience using (related) physical devices, and similar software, shows us what to expect when faced with new technology • Designers who create devices, including software, know about this experience and design products to match what we already know 2-2

3. The Desktop • The screen image displayed when a PC starts up • Colored or patterned background • Information displayed on top, bottom, or side • A metaphor • Appearance and means of interaction suggest something familiar to us: physical desk and papers • Work goes in files • Files go in folders • Tools (calculator, recorder) used to perform tasks • Very successful, near universal now • Designed at XeroPARC & Apple who created the idea of a personal computer 2-3

4. GUI: Graphical User Interface • Desktop is also an example of a GUI • Graphical elements (pictures) used for user manipulation of information represented • WIMP: windows, icons, menus, pointers • New software today usually has a GUI • Elements of the new GUI are familiar to us from earlier software GUIs • Designers “reuse” concepts familiar to us so we can use the new systems more easily 2-4

5. Consistent Familiar Interfaces • Designers reuse metaphors similarly • When we see an icon or metaphor we have seen before, we know how it works • Music or video player will use GUI icons that look like symbols on a physical player • A new web browser (like Google Chrome) will look largely similar in form and function to older, existing browsers 2-5

6. 2-6

7. Common GUI Elements • Looking at the Chrome GUI we see several things we recognize from other browsers • URL window, for specifying the page you wish to browse • Content window, for displaying the web page • Back “button” • Reload button • Several icons we don’t recognize… wrench, paper • Star icon? 2-7

8. Unknown Icon? Hover. • We are not sure what the “star” icon does • Hovering is moving the mouse pointer over an icon but not clicking • GUIs commonly will pop up a small balloon help message when hovering lasts a second or two • This message briefly explains what function the icon provides • Hovering over the “star” icon in the Chrome GUI tells that clicking it will bookmark the page • We understand bookmarking from other browsers 2-8

9. Triangle Pointers • No menu tabs as we expect from other browsers • We do see unknown icons, and triangle pointers beside • triangles indicate presence of hidden or alternative information • Clicking on triangles in the Chrome GUI reveals menus grouped by major function • “page” for file operations • “wrench” for mechanics of browser operation 2-9

10. 2-10

11. Common Menu Behavior • Menus on the top bar are called pull-down or drop-down • Mouse click reveals list of operations • Sliding mouse down the list highlights items • Clicking or releasing button on highlighted item causes computer to perform that operation • Same operations may be available by icon on a toolbar • Recently used functions may be shown clearly, and other available functions (or submenus) hidden and shown as triangle pointers 2-11

12. Standard Menu Functions • Menu functions have become fairly standard across applications • Grouped into menus based on similarity of items being manipulated • File operations • New, open, close, save, save as, print, exit • Edit operations • Undo, cut, copy, paste, select all, find, clear • Many menu operations have keyboard shortcuts (non-GUI), for rapid access to heavily used functions 2-12

13. 2-13

14. Exploring New GUI Features • Not all elements of a new GUI will be familiar • We use the GUI capabilities to learn it… hovering, triangle pointers, help, experimental clicks, undo • Consider the “+” plus icon in the Chrome top bar • Clicking it opens a blank content page and makes a tab for the new page in the bar • Allows browsing several pages at one time, easily move from one to the other • This may be unfamiliar, as older browsers did not do tabs, but we explore and learn 2-14

15. 2-15

16. Summary: the Designer's Intent • Software designers try to pick easy-to-understand user interfaces • We can expect good software to be well crafted so we can "brain out" how it works • We use this idea every time we use new software • Experienced users look for familiar metaphors and learn new ones when they are encountered 2-16

17. Important General Concept:New Instance • New menu item creates a "blank" instance • What is blank information? • Information is grouped into types based on properties • Digital photographs are a type of information; length and width are among the properties • Text documents are a type of information; length of document in characters is a property • A blank instance is the structure of the information item, with no properties or content filled in • A prudent user will Save As right away to specify a name and location for this new instance 2-17

18. 2-18

19. Important General Concept:Expecting Feedback • Feedback is any indication that the computer is still working, or has completed a task • User should not be left wondering what is going on • For editing change, proof of completion is that the revision is visible • For button click, GUI shows highlighting, shading, color change or graying, audible click • Hourglass or progress bar shows a long task is still underway 2-19

20. Learning New Software (step 1):"Clicking Around" • A term for exploring a user interface • Noting basic GUI features • Checking each menu to see what operations are available • Helps user figure out what operations are available without being taught • Clicking around works because consistent metaphors and interfaces make new software predictable 2-20

21. Learning New Software (step 2):"Blazing Away" • The next step after clicking around • Assertively exploring features even without a clear idea of their functions • Nothing will break: • Only risk is losing time and having to re-start or reboot • Remember the Undo operation • Making mistakes is fine, you will learn from them • Concentrate on operations related to whatever task needs to be done 2-21

22. Watching Others • Complicated software systems usually have features that are not obvious, too advanced, or too specialized to learn by clicking around • Shift-Select Operation • Allows you to select adjacent pieces • Control-Select Operation • Allows you to select non-adjacent pieces • Many obscure features, tricks, and shortcuts can be learned by watching others 2-22

23. 2-23

24. Principle: Form Follows Function • Fundamental operations of a software system and the way they work are determined by the task being solved • GUIs may look different, but two software systems for the same task will have same basic operations and will work similarly • “Glitz” of a GUI is superficial, task defines the underlying operations and their functions 2-24

25. Similar Applications, Similar Features • Text processing applications all: • Use a cursor to mark your place, backspace removes a character to the left • Have operations for typing, deleting, selecting, copying, searching, replacing, etc. • Two music players will look different, but both will • open music streams, play them, pause, advance to future point, control volume, etc. • Vendors compete with non-fundamental features • convenience, speed, interaction with other systems, etc. 2-25

26. Take Advantage of Similarities • Form follows function principle is important because: • New versions of familiar software will share core functions, and many features and quirks of earlier versions • When we must perform a familiar task with unfamiliar software, we are already experienced and familiar with its basic features • When we are frustrated with one vendor's software, we can easily learn another 2-26

27. Illustrating Form Follows Function:Searching Text Using Find • Text search, or find, is used in many applications such as word processors, browsers, e-mail readers, and operating/file systems • Found under Edit or File menu (shortcut Ctrl-F) • GUIs may look different, but the underlying concepts in searching will help up know what to expect in all of them • Tokens are the things to be searched • Single characters like letters, numbers, special symbols • Composite items like dates 2-27

28. How Search is Done • Computer searching starts at beginning of document or at current cursor position • "Slide" the search string along the text • At each position, look for token match • If there is a match, the process stops and displays the found instance • If there is no match, slide the search string one position along until found, or we hit the end of the text by the content of their character ^^^^^^^ content 2-28

29. Search Complications • Case Sensitivity: • Computer stores uppercase and lowercase letters as different characters • Match only occurs when both the letters and the case are identical • Search tools are case-sensitive in word processors but not necessarily in all applications • User has the option to ignore case-sensitive capability • This is often the default 2-29

30. Search Complications (cont'd) • Hidden Text: • There are two types of characters: keyboard characters typed by user, and formatting information added by the application • Search generally ignores application's formatting tags • Some systems allow user to search for formatted text such as italic. 2-30

31. Search Complications (cont'd) • Substrings • User may be looking for words, but the tokens are the characters in the word • Search 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 words • Multiword Strings • Words are separated by spaces. If the number of spaces in the search string is different from the number in the text being searched, no match is found 2-31

32. Editing Text Using Substitution • Search and replace combines searching and editing to make corrections to documents • Useful for correcting all occurrences of search string • Change "west coast" to "West Coast" • Eliminate extra spaces • Formatting text 2-32

33. 2-33

34. Technology: Take It Personally • We have learned we can expect intuitive interfaces • To learn to use new software, we should ask ourselves: • What do I have to learn about this software to do my task? • What does the designer of this software expect me to know? • What does the designer expect me to do? • What metaphor is the software showing me? • What additional information does the software need to do its task? • Have I seen these operations in other software? 2-34

35. Take it Personally (Cont'd) • Other questions you may ask yourself about Information Technology: • Is there IT that I am not now using that could help me with my task? • Am I more or less productive using this technological solution for my task? • Can I customize the technology I'm using to make myself more productive? • Have I assessed my uses of information technology recently? 2-35

36. Summary • People are either taught new technology, or they explore and learn it • We can figure out new software because designers use consistent interfaces, suggestive metaphors, and standard functionality • We apply our previous experience to learn new applications • In computer software if we make mistakes, nothing breaks 2-36

37. Summary • We explore new applications by “clicking around” and “blazing away” • We should watch other users, and ask questions • Form follows function • Searching and replacement are in many different GUIs but work consistently in all • We should think personally about technology and apply general principles and ideas to become more expert users 2-37