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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26. Summary
Metaphors
GUIs
Form follows function

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