csci 6316 design for information technology class introduction fall, 2014

CSCI 6316Design for

Information Technology

Class IntroductionFall, 2014

Introduction

• Welcome

• Introductions (and emails) – Name, where from, program, year of study (when finish, if 2nd year

about program), “goals” – from course and more generally

• About the course structure – class web site– Syllabus– Exams– Critiques –

• Web sites and (perhaps) mobile applications

• Now, some details

About the Course Content“Design for Information Technology”

• The course …– “Provides design technique for information technology systems, including

web and mobile technologies. Students complete projects focusing on the critique of existing systems and the design of new application systems.”

• Will look in detail about how to design the interfaces for web sites and current mobile applications

– No programming (a first semester course), – Rather, skills to design

• Will develop skills through both the study of design principles from the literature and their application to critique of systems

• The literature is principlely that of human-computer interaction

• The application through critique is to web sites and mobile applications

Familiar Systems …

• What is the below?– Right, a computer

• Many (essentially all) courses concerned with, e.g., algorithms, architecture, operating systems, …


• What is the below?– Right, a human

• Not so many courses in your curriculum talk about design for

• However, without humans there would be no computers!– (because they buy, and use, them)


• So, the subject(s) of this course – human computer interaction– Interaction of human and computing (more generally, information

technology) systems

– How design of interfaces is important

Why Design for the Human?

• Practically …– Design of systems often “neglected” element– At least in context of curriculum– Products succeed or not, depending much more on their design, than,

e.g., efficiency of implementation

• Bigger picture …– “External aids to cognition”, as critical for humans– Ability of computers to store and retrieve information may have deep

implications– History of computing systems leads to emphasis on interactive system– This is the 50 year lesson

• i.e., the perspective that will help you think across your career

Amplifying Cognition

• A really big idea …

• Humans think by interleaving internal mental action with perceptual interaction with the world

• This interleaving is how human intelligence is expanded– Within a task (by external aids)– Across generations (by passing on techniques)

• Computer in general, and interactive systems in particular, are important class of external aids

• A quick example, then back to the abstract

External Cognition – A Demo

• In your head: 34 x 72

External Cognition – A Demo

• In your head: 34 x 72

• Without special purpose algs, it’s a choreNeed to remember intermediate results:

34 x 2 and 34 x 70 and add them

• External aids make it easy to remember int. results– paper and pencil, easy

• Or do away with altogether – calculator, fast

External Aids

• In fact a long history of external aids

• Slide rule exploits addition of logs for multiplication– Analog device

• Computers are general purpose external aids

External Aids to Cognition

• A tool is a tool is a tool …– (arguably)– Whether mechanical or electronic (information)

• Levers multiply physical forces, information tools multiply …– Computer as “mind tool” …

• Don Norman: – “The power of the unaided mind is highly overrated. Without

external aids, memory, thought, and reasoning are all constrained. But human intelligence is highly flexible and adaptive, superb at inventing procedures and objects that overcome its own limits. The real powers come from devising external aids that enhance cognitive abilities. How have we increased memory, thought, and reasoning? By the invention of external aids: It is things that make us smart.” (Norman, 1993, p. 43)

Ratio of Human Cost to Hardware Cost

• Interface styles have changed over time

• As cost of hardware has decreased, has resulted in increasing need for efficiency of human time utilization


• Change in the relative cost of computer to human time,

– coupled with tasks that can be performed due the processing power are responsible for the change in interface style

– (put another way:)

• Power of computer essentially ALLOWS more computing power to be directed toward the interface

– Today, even "entry-level" PC's have "way more" processing power than needed for most task

• e.g., word processing

• Today, cost of hardware is essentially trivial compared to the cost of human user!


• Moore’s law is the 800 pound elephant in the room

• But, no real change in change in interaction style since mid ’80’s

– 25 year’s!– Approaching a complete human

generation

• Rather, more computing devices

– Shneiderman notes and his current edition reflects this

• Also, connectivity of devices and storage

Moore’s Law

• … the 800 pound elephant in the room

Moore’s Law – CPUsExponential growth

• Hardware revolution drives everything – ~ every 18 months, transistor count improves by factor of 2 in price/count

• Below has linear y axis for emphasis, next with log y axis

– Moore's Law, mid ‘60’s … really, ~Law, or even metaphor

Gordon Moore, 1962

Moore’s Law – CPUsExponential Growth – log scale graph

• Hardware revolution drives everything – ~ every 18 months, transistor count improves by factor of 2 in price/count

• Below log y axis

– Moore's Law, mid ‘60’s … really, ~Law, or even metaphor

Another Example of Exp. Growth• The Internet … by whatever metric

Another Example of Exp. Growth• And digital camera resolution ….

Taking Advantage of Exp. Growth?(humor)

The Other Side of Moore’s LawComputing Becomes Exponentially Cheaper

• With implications for interface design, ubiquitous computing, …

• Computing power a commodity– E.g., cpu power for gui such as Mosaic, IE, ~50 cents! today, cf. Kuniavsky

On Exponential Growth …• Some “technology” is exponential in advancement• Other things are not …

– E.g., software and …

Moore’s Law Dead?

• … and transistor count not equal to power

Moore’s Law Dead?

• Transistor count not equal to performance

Parallelism and Moore’s Law

• Moore’s law is alive and well for graphics and may be fine too for “gpu computing”

– Because lends itself to parallelization

– Pipeline architecture works well with current approach to cg

• Now, gpu processing power significant fraction of cpu processing power in pc’s

• How to use parallel, here, gpu, architectures is not a new question

• Cf. Nvidia gpu programming language (CL)


• Moore’s law is the 800 pound elephant in the room

• But, no real change in change in interaction style since mid ’80’s

– 25 year’s!– Approaching a complete human

generation

• Rather, more computing devices

– Shneiderman notes and his current edition reflects this

• Also, connectivity of devices and storage

And Ratio of Human Cost to Hardware Cost for Computing … and “Neural Power”

Hans Moravec, When will computer hardware match the human brain? Dec. 1997 http://www.frc.ri.cmu.edu/~hpm/

But, like, not …1. Promise of future fallacy2. Computer processing not (at all) like neural processing

(but, cf. this month’s CACM, “Cognitive Computing”)

Chronology of System Development

1945-1955 Pioneer

1955-1965 Historical

1965-1980 Traditional

1980-1995 Modern

1995-? Future

UI Paradigm batch processing command languages

full screen (menus, forms)

WIMP noncommand based

interfaces

Terminal Technology TTY typewriter

line oriented terminals (“glass

TTY” CRT) full screen terminals

graphical displays

desktop workstations

heavy portables

“Dynabook” multimedia I/O

easily portable

cellular modem

User Types experts, pioneers

technocrats

professional computerists

specialized groups without computer

knowledge

business professionals

hobbyists

everybody

Operating Mode one user

batch

central processing

time sharing

remote access single user PC’s

networked single user

embedded systems

Programming Language

machine language assembler high level languages

problem oriented languages

spreadsheets

nonimperative visual programming

Wise, 1997

So, what is the “Future”?

1945-1955 Pioneer

1955-1965 Historical

1965-1980 Traditional

1980-1995 Modern

1995-? Future

UI Paradigm batch processing command languages

full screen (menus, forms)

WIMP noncommand based

interfaces

Terminal Technology TTY typewriter

line oriented terminals (“glass

TTY” CRT) full screen terminals

graphical displays

desktop workstations

heavy portables

“Dynabook” multimedia I/O

easily portable

cellular modem

User Types experts, pioneers

technocrats

professional computerists

specialized groups without computer

knowledge

business professionals

hobbyists

everybody

Operating Mode one user

batch

central processing

time sharing

remote access single user PC’s

networked single user

embedded systems

Programming Language

machine language assembler high level languages

problem oriented languages

spreadsheets

nonimperative visual programming

Wise, 1997

Future?

• Web is part of it

• Mobile applications are part of it

• What else?

• First, intellectual precursors to “web as we know it”– Example of what “the idea” looked like, before the technology to support it

was available

Future?

• Web is part of it

• Mobile applications are part of it

• What else?

WWW = Hypertext

• Real “power” interest in Internet only arose well after its initial implementation– ARPANET– Relatively few people cared about ftp, bbs, …– At least “few” compared to current use of WWW

• Interest and use arose only after:– Specification of WWW

• How to go from one file/document to another via its address … the link!– And then only with design of a graphic user interface for it

• Text-based browsers not too neat (at least to non-computer types)• How to “navigate” easily and with use of pictures/images/icons

• Essential idea of “navigation” among documents dates to Vannevar Bush’s Memex, 1945

W W W = Hypertext(a quick example of why vision and history matter)

• Real “power” interest in Internet only arose well after its initial implementation

– ARPANET– Relatively few people cared about ftp, bbs, …– At least “few” compared to current use of WWW




W W W = Hypertext(a quick example of why vision and history matter)

• Real “power” interest in Internet only arose well after its initial implementation

– ARPANET– Relatively few people cared about ftp, bbs, …– At least “few” compared to current use of WWW




• Essential idea of “navigation” among documents dates to Vannevar Bush’s Memex, 1945

– Building an information system with 1945 technology … quaint, but visionary– Needed to look ahead 50 years to be realized

History: Bush's MEMEX, 1945

• "As We May Think", 1945– MEMory EXtender system– Atlantic Monthly!– available at:

http://www.theatlantic.com/atlantic/atlweb/flashbks/computer/bushf.htm

– “new knowledge not reaching the people who would benefit from it”

– Concerned about the explosion of scientific literature which made it impossible even for specialists to follow developments in a field,

– “A Memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.”

– desk, slanting screens, buttons, levers, and keyboard

• “A memex looked like a desk with two pen-ready touch screen monitors and a scanner surface. It had several gigabytes of storage space filled with textual and graphic, indexed, information”

History: Bush's MEMEX, 1945

• Microfilm projectors for viewing different information

– uses mircofilm for storage – new material can be added via

microfilm or by direct entry via ‘‘dry photography'‘

• Supports indexing, cross referencing, keywords

– supports associative indexing via links and creation of ``trails'' which can later be followed

– allows annotations comments, and marginal notes .

– envisions multimedia i/o: other senses, such as, speech and audio

• Associative indexing– "The process of tying things together

is the important thing.“– New profession of ``trail blazing"– Trail building and trail following by

user

Editor’s foreword to Bush’s 1945 Atlantic Monthly article

As Director of the Office of Scientific Research and Development, Dr. Vannevar Bush has coordinated the activities of some six thousand leading American scientists in the application of science to warfare. In this significant article he holds up an incentive for scientists when the fighting has ceased. He urges that men of science should then turn to the massive task of making more accessible our bewildering store of knowledge. For years inventions have extended man's physical powers rather than the powers of his mind. Trip hammers that multiply the fists, microscopes that sharpen the eye, and engines of destruction and detection are new results, but not the end results, of modern science. Now, says Dr. Bush, instruments are at hand which, if properly developed, will give man access to and command over the inherited knowledge of the ages. The perfection of these pacific instruments should be the first objective of our scientists as they emerge from their war work. Like Emerson's famous address of 1837 on "The American Scholar," this paper by Dr. Bush calls for a new relationship between thinking man and the sum of our knowledge. --THE EDITOR

Design of the Internet and its Access

• History of Berners-Lee specification

• History of Mosaic

Design/Invention of the WWW

• ARPANET, 1969 – then, NSFNET – then, Internet

– DOD sponsored distributed network with alternate routes to withstand nuclear attack

– Internet Protocol added, 1978

• Tim Berners-Lee– CERN

• Organisation européenne pour la recherche nucléaire

• European Organization for Nuclear Research

– 1980, ENQUIRE• Hypertext with linked pages

– 1989, First proposal for “large hypertext system”

– 1990, with Robert Caillau standards for www published

Design/Invention of the WWW

• 1990, CERN phone book first document on WWW

– 1st web server a NeXT designed by Steve Jobs

– info.cern.ch

• 1st web browser– Tim Berners-Lee– Text only

• Paul Kuntz, 1991– Brought NeXT software back to

Stanford Linear Accelerator Center– Louise Addis adapted for VM/CMS

os on IBM mainframe– Display center’s documents

From alt.hypertext, August 6, 1991

In article <[email protected]> [email protected] (Nari Kannan) writes:

> Is anyone reading this newsgroup aware of research or development efforts in > the following areas:

> 1. Hypertext links enabling retrieval from multiple heterogeneous sources of > information?

The WorldWideWeb (WWW) project aims to allow links to be made to any information anywhere. The address format includes an access method (=namespace), and for most name spaces a hostname and some sort of path. We have a prototype hypertext editor for the NeXT, and a browser for line mode terminals which runs on almost anything. These can access files either locally, NFS mounted, or via anonymous FTP. They can also go out using a simple protocol (HTTP) to a server which interprets some other data and returns equivalent hypertext files. For example, we have a server running on our mainframe (http://cernvm.cern.ch/FIND in WWW syntax) which makes all the CERN computer center documentation available. The HTTP protocol allows for a keyword search on an index, which generates a list of matching documents as annother virtual hypertext document.

If you're interested in using the code, mail me. It's very prototype, but available by anonymous FTP from info.cern.ch. It's copyright CERN but free distribution and use is not normally a problem.

The NeXTstep editor can also browse news. If you are using it to read this, then click on this: <http://info.cern.ch/hypertext/WWW/TheProject.html> to find out more about the project. We haven't put the news access into the line mode browser yet.

We also have code for a hypertext server. You can use this to make files available (like anonymous FTP but faster because it only uses one connection). You can also hack it to take a hypertext address and generate a virtual hypertext document from any other data you have - database, live data etc. It's just a question of generating plain text or SGML (ugh! but standard) mark-up on the fly. The browsers then parse it on the fly.

The WWW project was started to allow high energy physicists to share data, news, and documentation. We are very interested in spreading the web to other areas, and having gateway servers for other data. Collaborators welcome! I'll post a short summary as a separate article.

Tim Berners-Lee [email protected] World Wide Web project Tel: +41(22)767 3755 CERN Fax: +41(22)767 7155 1211 Geneva 23, Switzerland (usual disclaimer)

The WorldWideWeb (WWW) project aims to allow links to be made to any information anywhere. . .

A Design to Popularize the WWW

• Early adopters of www were universities, centers, etc.

– As with ARPANET

• Text based browsers with embedded links

– Primitive functionality and interface elements

• Erwise and Viola, 1992– For X-windows– 1st graphical browsers outside NeXT-based

• Mosaic– Code still available! (checked, 3/1/11)

• ftp://ftp.ncsa.uiuc.edu/Mosaic/– Marc Andreesen and Eric Bina

• Undergraduate students at UIUC and working at NCSA• Used computers belonging to UIUC to develop, so belonged to

university• 1993 demo:

– http://www.totic.org/nscp/demodoc/demo.html

– Strongly support of integrate multimedia– Responsive to bug fixes– Mosaic – Netscape Navigator

• Jim Clark, founded SGI• “browser wars”

Some More HistoryVision, or Design, then Technology to (fully) Support

• Doug Englebart– A Turing Award for vision in interaction

• Ivan Sutherland– A early 1960’s “paint program” that foreshadowed much

• Alan Kay– The “personal computer” – also, dynabook, Apple II

• Today’s ubiquitous interaction style– Xerox Star and Alto– Then, Steve Jobs visits Xerox, … Apple Lisa and Macintosh

Douglas Engelbart, 1963

• Turing Award, 1998 – this is a big deal

• Augmentation of human intellect (1963) – “... increasing the capability of man to approach a complex

problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems.”

– Recognized his ideas built on Bush's idea of a machine that would aid human cognition

– hierarchical structures for ordinary documents– group creation and problem solving

• NLS System (1965 1968):– outline editors for idea development – hypertext linking – tele-conferencing, word processing, e-mail

• System required:– mouse pointing device for on-screen selection: Invented the mouse

(1965) as a replacement for light pens for use in his NLS system– a one-hand chording device for keyboard entry – full windowing software environment – on-line help systems– concept of consistency in user interfaces

Sutherland’s Sketchpad• Ivan Sutherland

– “Pioneer” of … lots of things– Visualization– Graphics– Interaction– Still around

• Evans and Sutherland graphics

• First truly interactive graphics system, Sketchpad

– A fairly sophisticated “paint” (or drawing) program

• MIT, Ivan Sutherland’s 1963 Ph.D. thesis

– “Sketchpad, A Man-Machine Graphical Communication System”

• Available: www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf

• Video: www.youtube.com/watch?v=mOZqRJzE8xg

• “Among most important works in computer science”

Ivan Sutherland using Sketchpad in 1963 CRT monitor, light pen and function-key panel

Ivan Sutherland’s Sketchpad, 1963

• Regarded as the first to implement much of what called “visualization”, “immersion”, and “virtual reality” (not to mention cg)

• Some quotes:

– ….. If the task of the display is to serve as a looking-glass into the mathematical wonderland constructed in computer memory, it should serve as many senses as possible.

– ….. By working with such displays of mathematical phenomena we can learn to know them as well as we know our own natural world. Such knowledge is the major promiseof computer displays.

– ….. The ultimate display would, of course, be a room within which the computer can control the existence of matter. A chair displayed in such a room would be good enough to sit in. Handcuffs displayed in such a room would be confining, and a bullet displayed in such a room would be fatal. With appropriate programming such a display could literally be the Wonderland into which Alice walked.

Sutherland’s 1960’s equipment

• “Ultimate display”, 1965

• 1st HMD, stereoscopic (3D) display– Sword of Damocles– Actual camera-like metal shutters

• Not OSHA approved

The “Personal Computer”, 1Vision, or Design, then Technology to Support

Dynabook (Alan Kay, 1977): "The best way to predict the future is to invent it."

Conceptualized notebook computer:

cardboard prototype

“...a self contained knowledge manipulator in a portable package the size of an

ordinary notebook...”

powerful processor, lots of memory, high resolution graphics, hi fi audio

Altair 8800 (1975):Considered to be first microcomputer

2 MHz Intel 8080 with 256 bytes standard RAM and interfaced

with the user through octal front panel switches appeared in Popular Electronics home computer

people, could build for around $400

Altair 8800

The “Personal Computer”, 2 Vision, or Design, then Technology to Support

Apple II (1977):Was “easy to use”

Color graphics

High-level language embedded in ROM

4K of memory, more could be added to a maximum of 12K (if using the 4K chips) or 48K (if using the 16K chips)

~$1,000 = ~$3,800 today

Seems to be a role for those who find the technology for the design

Has worked out well for Apple

Innovations at Xerox PARC in Late 1970s Xerox Alto

Comprehensive combination of many ideas developed at Xerox PARC and other pioneering systems:

• user conceptual model via the desktop metaphor .

• direct manipulation, property/option sheets to specify appearance of objects .

• what you see is what you get (WYSIWYG) . • universal generic commands that are used

throughout the system (e.g., move, copy, edit, delete).

• high degree of consistency, look and feel . • modeless interaction and limited amount of

user tailorability

(FYI) Xerox Alto

The Xerox Alto (1979):• Always referred to as the "personal computer“• Used high resolution bit-mapped graphics, a mouse, menus, icons and other

features• Single user machine supplied with software for word processing, electronic mail

and other office tasks• 15 inch display was bit-mapped and had 72-dpi resolution (about 1000 x 800)

– 1/2 meg of memory, 29 mb of disk storage, and a mouse – about the minimum specifications to support a graphic interface

• Pioneered developments of GUIs and applications text editing, drawing, document processing, e mail, windows, menus, scrollbars, mouse control and selection

• First What-You-See-Is-What-You-Get (WYSIWYG) editor • lead to the creation of Ethernet, a local area networking protocol, to link Altos

within PARC (1975)

Screen shots of an Alto

Xerox Alto (1979)

• Designed for business professionals in an office environment.

• Contained all of the Alto's capabilities plus multilingual software, the Mesa programming language, and interim file servers

• The most distinguishing features of the Star were technologies like bitmapped screens, windows, a mouse-driven interface, and icons.

• The system allowed users to create complex documents by combining computing, text editing and graphics, and to access file servers and printers around the world through simple point-and-click actions

The Xerox Star (1981), 1"The best way to predict the future is to invent it."

--Alan Kay

FYI - The Xerox Star (1981)

Star did not turn out to be a commercial success.

The reasons for failure:• it was ahead of its time and the full potential of the

software was only visible to the PARC developers

• the software was designed for users with no computer knowledge, it became very demanding on the hardware

• perceived as too slow unreasonable speed because of memory consumption and the number of hardware cycles needed

• costly, $16,595 in 1981 (~42,000 today!) – IBM introduced a cheaper machine . – ~$5,000 (~12,000 today), “changed everything

• limited functionality: no spreadsheet • lacked an open architecture

• no 3rd party application development: because the programming language was never publicly released.

• direct manipulation was overly used and not the best in some cases

Apple Computer – Lisa(precursor to Macintosh)

Apple Lisa (1983)

Steve Jobs, “after a visit to Xerox …”

Based on ideas from Xerox Star

Could be used as an office tool but also individuals

At $10,000 (23,000 today) was cheaper than the Star

but... also failed...

A personal story …

Apple Computer - Macintosh

Apple Macintosh (1984):

same ideas from the Lisa, but much improved

Reasons for success: – cheaper: only $2500 . – previous systems prepared the market . – ‘‘second generation,'' many problems

with Lisa were fixed . – open architecture and powerful

developers toolkit . – published interface guidelines: consistent

look and feel for apps . – excellent graphics and emergence of

desktop publishing . – Apple had marketing expertise,

distribution channels, and experienced computer sales and support staff

A question to ponder …

A question to ponder …• Recall, ui history

– Nothing much new lately (20 years since wimp)

• Is this because ui (or is) design awaits a fundamentally new way of conceptualizing the use of computers?

• A fact:– Second language use acquired after some young, e.g., 5-8 years

old, is fundamentally different than language skills acquired earlier• E.g., translation vs. thinking, forming phonemes

• A way that can only be conceptualized by a person (or really some critical mass of people) who have fundamentally (neurologically) different ways of perceiving computers?– Has it happened already?– When might that happen?– How might it happen?– “Digital natives?”

Shneiderman Text“Human Computer Interaction”

• “Designing the User Interface”

• Some of the key points …

But first …

• Ben Sheiderman– Pioneer, academic, popularizer, …– U. Maryland Human Computer Interaction Lab– http://www.cs.umd.edu/hcil/

• Provocative statements

But first …

• Ben Sheiderman– Pioneer, academic, popularizer, …– U. Maryland Human Computer Interaction Lab– http://www.cs.umd.edu/hcil/

• Provocative statements

• “User-interface designers are becoming heroes of a profound transformation. Their work has turned the personal computer into the social computer, enabling users to communicate and collaborate in remarkable ways. The desktop applications that once served the needs of professionals are now enabling broad communities of users to prepare user-generated content that can be shared with millions of WWW users. And … through billions of cellphones…”

“The interface is the system.”

• Interface provides/conveys the only view of the “underlying” system– Provides:

• Model of task, system capabilities … more later

• User interface strongly affects perception of software– Usable software sells better– Unusable web sites are abandoned

• Perception is sometimes superficial– Users blame themselves for UI failings– People who make buying decisions are not always end-users

Interfaces – Should and Must Do Right

• Always should have “good” interfaces– Computing time (power) is getting

cheaper– Users’ time isn’t– Ratio discussed last time

• Sometimes must have “good” interfaces

• Disasters happen (notes)– Therac-25 radiation therapy

machine– Aegis radar system in USS

Vincennes

Leveson, N. (1995). Appendix - Medical Devices: The Therac-25http://sunnyday.mit.edu/papers/therac.pdf

In fact, User Interfaces are Hard to Design

• Software designers (let alone coders!) are not the user– As we’ve discussed

– Most software engineering is about communicating with other programmers

– UI is about communicating with users

• The user is always right– Consistent problems are the system’s fault

• …except when the user is not right– Users aren’t designers

Usability

• Is it a “good” interface?– In what ways?

• Usability: – How well users can use the system’s functionality

• Dimensions of usability (quick look):– Learnability: is it easy to learn?– Efficiency: once learned, is it fast to use?– Memorability: is it easy to remember what you learned?– Errors: are errors few and recoverable?– Satisfaction: is it enjoyable to use?

Usability Dimensions Vary In Importance

• So, what are the elements of usability?

• … It depends on the user– Novice users need learnability– Infrequent users need memorability– Experts need efficiency

• But no user is uniformly novice or expert– Domain experience– Application experience– Feature experience

Usability Is Only One Attribute of a System

• BTW, in developing large systems, development process entails a (often large) team

• Software designers have a lot to worry about:– Functionality – Usability– Performance – Size– Cost – Reliability– Security – Standards

• Many design decisions involve tradeoffs among different attributes– Which is the essence of the design process

Usability Engineering Is a Process


• … an iterative process

• Design

• Implement

• Evaluate

• Will later look at the “spiral” model of software engineering, which systematically incorporates iteration and change

Design

Evaluate Implement


• Design

• Task analysis– “Know thy user”– “Know thy domain”

• Design principles– Overarching

• Design guidelines– Avoid obvious mistakes– May be vague or contradictory

Design

Evaluate Implement


• Implement

• Prototyping– Cheap, throw-away

implementations– Low-fidelity: paper, Wizard of

Oz– Medium-fidelity: HTML, Visual

Basic

• GUI implementation techniques– Input/output models– Toolkits– UI builders

Design

Evaluate Implement


• Evaluate

• Evaluation tests prototypes, using …

• Expert evaluation– Heuristics and walkthroughs

• Predictive evaluation– Testing against an engineering

model (simulated user)

• Empirical evaluation– Watching users do it

Design

Evaluate Implement

Usability of Interactive Systems

• Introduction– What is an interface?– Examples of good and bad design– Principles of design

• About the field– Evolution of hci and interface design

• Interaction Design: – Some principles through examples

• Usability – What, why, examples, motivation

• Universal Usability

• Goals for the Profession

Theories, Principles, Guidelines

• Guidelines:– Navigating interface, organizing display– Getting user’s attention, data entry

• Principles:– “Rules that distill out the principles of

effective user interfaces”– Determine users’ skill level– Identify tasks– Choose an interaction style– “Golden rules of interface design”– Integrating automation and human

control

• Theories and models:– Levels of analysis theories– Stages-of-action models– GOMS and keystroke-level model– Consistency through grammars– Widget level – Context of use

Theories

Guidelines

Principles

Exs.: Design Processes(Will see these in detail later)

• Organizational design to support usability– Shneiderman talks about both “design” and organizational context in which it occurs

• Carroll and Rosson’s characterization of design– “radically transformational”

• Shneiderman’s “three pillars of design”– Guidelines documents and processes– User interface software tools– Expert reviews and usability

• Development methodologies– IBM: Ease of Use, Lucid

• “Ethnographic” user observation• Participatory design• Scenario development• Social impact statement for early design review• Legal Issues

Balancing Function & Fashion

• Interface design, both graphics and interaction, not yet “high art” (Shneiderman)

– Architecture and fashion are old, interfaces are not

• But, not too sure how far analogy goes …

– Usually, consider that interface design is about software engineering, usability, etc.

• Recall, early discussions– Perhaps better, computer interface design is

young

• Yet, there is style– And it elements can be examined

• Where “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are made

– Recall, guidelines constraints, etc.

“Look and Feel”

• “Look and feel”

– Lots of things you can interact with:• main WIMP components

(windows, menus, icons)• Buttons• Dialogue boxes• Palettes• … Collectively known as widgets

• appearance + behavior = look and feel

And … Learning by CritiquingCourse Schedule Overview

• Design of systems (interface) – Introductory weeks

– Design detail for web sites

• Group critiques of individual web sites

• More Design of systems (interface)

• Individual critiques of web sites

• Design details for mobile applications

• Critiques of (mobile) applications

End

• .

csci 6316 design for information technology class introduction fall, 2014

Documents

external cognition

familiar systems

important slide

information technology

interactive systems

design of interfaces

fast slide

abstract slide