CSCD 487/587 Human Computer Interface Winter 2013 Lecture

CSCD 487/587 Human Computer Interface Winter 2013 Lecture

CSCD 487/587 Human Computer Interface Winter 2013 Lecture 11 Interfaces 2011 Overview Interface design began long long ago in a galaxy far far away At first, we had the command line !!!

Now, we have brain/computer interfaces Or, eye controlled interfaces The User interface has evolved Goal of this chapter is to understand some of the basic interfaces Where and when they are best used What do users really want in an interface 2 2011 Note where research is going 3 2011

Command Based Commands are extremely abbreviated, Ex.: ls - for List Files du disk usage cp for Copy Files rm remove files Typed in at system prompt Some commands are hard wired at keyboard, Others can be assigned, shortcut keys, AltCtl-Del Advantages: Efficient, precise, and fast Disadvantages: Large overhead to learning set of commands 4 2011

Command Interpreters Long history of use for user interfaces Predated GUI interface for most OS's Examples include Unix/Linux shells: sh, ksh, csh, tcsh, bash

Historical CP/M CCP, and MS-DOS/IBMDOS/DR-DOS's COMMAND.COM, Plus, OS/2 and Windows CMD.EXE programs 2011 Command Line Interface History From 1960s onwards, user interaction with computers was primarily by means of command-line interfaces, initially on machines like Teletype Model 33 ASR,

Replaced by CRT-based computer terminals such as the VT52 These devices were purely text based, no way to display graphic or pictures 2011 Command Line Interface History

Early 1970s Unix operating system pioneered the concept of powerful command-line environment, Unix called "shell", with ability to "pipe" output of one command in as input to another Saved and re-run strings of commands as "shell scripts" which acted like custom commands Example: ls | wc -l Greatly expanded the power of commands 2011 Windows 95/98 FTP command based application through the Windows Command Window 2011

Play Games via Commands? Number of command based adventure games during this time Long descriptions of text, you then typed next move Examples: Zork, Hunt the Wumpus and many others 2011

MUD's Extension of single player text based games Mulit-user Dungeon or Multi-user Domain Pre-cursor to MMORG Many MUDs were fashioned around the

dice-rolling rules of Dungeons & Dragons series of games Interaction was via typing natural language 2011 Research and design issues Format, command names and structure are key research questions Consistency is most important design principle Ex: Always use first letter of command

Command interfaces popular for any scripting or programming languages 11 2011 WIMP and GUI Xerox Star first WIMP -> rise to GUIs Windows Could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse magic

Icons Represented applications, objects, commands, and tools that were opened when clicked on Menus Offering lists of options that could be scrolled through and selected Pointing device Mouse controlling the cursor as a point of entry to 12 the windows, menus, and icons on the screen 2011

Graphical User Interfaces Same basic building blocks as WIMPs but more varied Color, 3D, sound, animation, Many types of menus, icons, windows New graphical elements Toolbars, docks, rollovers

13 2011 Windows Windows were invented to overcome physical constraints of a computer display Enable more information to be viewed and tasks to be performed Scroll bars within windows also enabled more

information to be viewed Yet, multiple windows can make it difficult to 14 2011 find desired one Early Window Designs MS Windows 3.1 2011 Windows Too Many

Yet, current displays often have many windows can even make it difficult to find desired one Listing, iconising, shrinking are techniques that help Trade-off, make it difficult to read 16

2011 Apples shrinking windows 17 2011 Safari panorama window view 18 2011

OS's Have Customized Windows Apple's OS-X Complete guide to window types A document window contains file-based user data. An app window is the main window of an app that is not document-based A panel floats above other windows and provides tools

A dialog appears in response to a user action and typically provides ways users can complete the action userexperience/conceptual/applehiguidelines/Windows/ 2011 Windows.html#//apple_ref/doc/uid/20000961-TP9 OS's Have Customized Windows Microsoft Windows have a different set of guidelines A top-level window has no owner window and is displayed on the taskbar An owned window has an owner window and isn't

displayed on the taskbar A user-initiated window is displayed as the direct result of a user's action A contextual window is a user-initiated window that has a strong relationship to the object from which it was launched desktop/aa511262.aspx#concepts 2011 Research and design issues Window management Want to enable users to move fluidly between different

windows How to switch attention between windows without users getting distracted Design principles of spacing, grouping, and simplicity More difficult when many windows on 21 2011 Menus A number of menu interface styles

Flat lists, Drop-down, Pop-up, Contextual, and Expanding ones, e.g., scrolling and cascading 22 2011

Menus Flat menus Good at displaying a small number of options at the same time and where the size of the display is small, e.g. iPods Nest lists of options within each other, requiring several steps to get to the list with the desired option Users Moving through previous screens can be tedious

23 2011 iPod Flat Menu Structure A sequence of options selected shown in the 4 windows 24 2011 Expanding menus Enables more options to be shown on a single screen than is possible with a single flat menu More flexible navigation, allowing for

selection of options to be done in the same window Most popular are Cascading ones Primary, secondary and even tertiary menus Downside is that they require precise 25 mouse control 2011

Cascading menu 26 2011 Contextual menus Provide access to often-used commands that make sense in context of a current task Appear when user presses the Control key while clicking on an interface element

e.g., clicking on a photo in a website together with holding down the Control key results in options, open it in a new window, save it, or copy it Helps overcome some navigation problems 27 2011

Research and design issues What are best names/labels/phrases to use? Placement in list is critical Quit and save need to be far apart Many international guidelines exist emphasizing depth/breadth, structure and navigation 28 2011

Icon Design Icons are assumed to be easier to learn and remember than commands Can be designed to be compact and variably positioned on a screen Now pervasive in every interface Represent desktop objects, Tools (e.g. paintbrush), Applications (e.g. web browser), and Operations (e.g. cut, paste, next, accept, change) 29 2011 Icons Since Xerox Star days icons have changed in their look and feel: black and white -> color, shadowing, photorealistic images, 3D rendering, and animation Many designed to be very detailed and animated making them both visually attractive and informative GUIs now highly inviting, emotionally appealing, and feel alive

30 2011 Icon Forms The mapping between representation and underlying object can be: Similar (e.g., a picture of a file to represent the object file), Analogical (e.g., a picture of a pair of scissors to represent cut) Arbitrary (e.g., the use of an X to represent delete)

Most effective icons are similar ones, duh!!! Many operations are actions making it more difficult to represent them Combination of objects and symbols capture important part of an action 31 2011 Early icons 32

2011 Newer icons 33 2011 Simple icons plus labels 34

2011 In-Class Activity Lets test our artistic talent . Sketch simple icons to represent the operations to appear on a digital camera LCD screen: Delete last picture taken Delete all pictures stored Format memory card 35

2011 Toshibas icons Which is which? Are they easy to understand Are they distinguishable? What representation forms are used? How do yours compare? 36 2011 Research and design issues

Currently, Wealth of resources now so do not have to draw or invent new icons from scratch Guidelines, style guides, icon builders, libraries Text labels can be used alongside icons to help identify for small icon sets For large icon sets (e.g. photo editing or word processing) use rollovers 37 2011

Summary Evolution of Interfaces from command line to GUI ba Windows is considered a progression for purposes o Usability GUI's are more in line with how humans operate, mo Visually oriented, have limited short-term memory a Better at recognition rather than recall Sophisticated interfaces like virtual reality and Blended Human/computer interfaces are at the high End of the Interface spectrum 38

2011 End This Friday, first part of project is due, the proposal, no class that day either !!! 2011

Recently Viewed Presentations



    W.M.Davis' concept of cyclicity in landform development (1893) dominated Western geomorphology at this time. Grund (1903) and Cvijic (1918) proposed the cycles shown here. At bottom left a 1988 conception for the Guilin karst by Zhu Xuewen. Grund. 1903. Cvijic.
  • IIR Filters and Equalizers R.C. Maher ECEN4002/5002 DSP

    IIR Filters and Equalizers R.C. Maher ECEN4002/5002 DSP

    Times New Roman Symbol Default Design IIR Filters and Equalizers IIR Filter Description IIR Direct Form I IIR Direct Form II Implementation Issues Implementation Issues (cont.) Engineering an IIR filter 2nd-order Sections 2nd-order Sections (cont.) Bilinear Transform Bilinear Transform (cont.)...
  • Cinco de Mayo Activities - Henry County School District

    Cinco de Mayo Activities - Henry County School District

    Over, the years Cinco de Mayo has become very commercialized and many people see this holiday as a time for fun and dance. Oddly enough, Cinco de Mayo has become more of Chicano holiday than a Mexican one. ... Poetry...
  • Life's Molecular Diversity Based on Properties of Carbon

    Life's Molecular Diversity Based on Properties of Carbon

    CH 4: Carbon & the Molecular Diversity of Life. The major elements of life are C, H, O, N, P, S. All organic compounds contain carbon, and most also contain hydrogen. Carbon is unparalleled in its ability to form molecules...
  • Tips & Tricks to Make the Most Out of Your SharePoint Site ...

    Tips & Tricks to Make the Most Out of Your SharePoint Site ...

    Tips & Tricks to Make the Most Out of Your SharePoint Site and Maximize Adoption. Jennifer Mason & Laura Rogers. SharePoint Consultants. Rackspace Hosting
  • FLORIDA STATE UNIVERSITY The Office of Human Resources

    FLORIDA STATE UNIVERSITY The Office of Human Resources

    New Hire FRS Certification Forms. Name and SSN - as clearly as possible. Must be signed by the employee "State of Florida administered retirement plan" Includes Pension Plan, Investment Plan, SUSORP, SCCORP*, SMSOAP* Does not include Bencor (OPS) Leasa Howard,...
  • Star Wars and Homer - Monmouth College

    Star Wars and Homer - Monmouth College

    Catalogue Homer's Iliad and the Catalogue of Ships Divine Machinery in Homeric Epic The Divine Assembly Parthenon Frieze Athena Games A pottery fragment 580 - 570 BC (Sophilos) François Vase Museum: Florence, Museo Archeologico Size: 66cm.
  • Elements of Nonfiction - Montgomery Township School District

    Elements of Nonfiction - Montgomery Township School District

    Elements of Nonfiction What is nonfiction? It is writing about real people, places things, and ideas. Purposes on Nonfiction To inform To give an opinion To persuade To entertain Types of Nonfiction Biography/autobiography Personal narrative (one incident) Informative article True-life...