The Desktop Screen image displayed when a PC starts up A metaphor 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

GUI: Graphical User Interface Desktop is also an example of a GUI GUI elements WIMP: windows, icons, menus, pointers Most new software uses GUIs Contrast with command-line interfaces (CLIs) Examples of CLI interfaces?

Consistent Familiar Interfaces Designers use familiar interfaces E.g., music player Web browser (like Chrome)

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?

Unknown Icon? Hover. Try to hover and get tooltip Hovering tells us “star” bookmarks current page

Triangle Pointers Chrome has no menu bar Triangle pointers indicate hidden options “page” for file operations “wrench” for mechanics of browser operation Chrome interface has changed Three bars (why?) Pro tip: Ctrl-T for new tab

Common Menu Behavior Menus on the top bar are called drop-down Familiar Same operations may be available by icon on a toolbar Microsoft uses Ribbon Recently used functions usu. displayed

Standard Menu Functions 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)

Summary: the Designer's Intent Software designers try to create easy-to-understand UIs Experienced users look for familiar metaphors and learn new ones when they are encountered

Important General Concept: Expecting Feedback Computers are virtual assistants Good assistants give feedback Operation is ongoing Revision has been made Greying out Sounds

Tips for Selecting Shift-Select Operation Control-Select Operation Allows you to select adjacent pieces Control-Select Operation Allows you to select non-adjacent pieces

Principle: Form Follows Function Design principle Purpose dictates appearance Functionality same  similar appearance

Similar Applications, Similar Features Text processing applications all Use a cursor 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.

Illustrating Form Follows Function: Searching Text Using Find Text search (or find) used in many applications Often Ctrl-F shortcut GUIs may look different, but underlying concepts will be familiar

How Search is Done Computer searching starts at beginning of document or at 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

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 User has the option to ignore case-sensitive capability Often the default

Search Complications (cont'd) Hidden Text Search may need to account for formatting info

Search Complications (cont'd) Substrings 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 If the number of spaces in the search string is different from the number in the text being searched, no match is found

Editing Text Using Substitution Search and replace combines searching and editing (sometimes Ctrl-H) Useful for correcting all occurrences of search string Change "west coast" to "West Coast" Eliminate extra spaces Formatting text

Summary Metaphors GUIs Form follows function

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.