1 / 27

The Desktop

Explore the Desktop screen metaphor in GUI design, common elements like windows, icons, menus, and pointers, and how form follows function in software interfaces. Learn about search functionalities, text editing features, and the importance of familiar metaphors in UI design. Engage in a quiz on computer hardware basics and design principles.

bannon
Download Presentation

The Desktop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Desktop 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  20. Summary • Metaphors • GUIs • Form follows function

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

More Related