Download - 1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 1: User Oriented Design

1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.

Lecture 1:User Oriented Design

CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1

Hello!

About me– Michael Czajkowski,

• Adjunct Professor, CS Department

– Email: [email protected]– Office: Korman 233– Office hours: Wednesday 5-6pm, or by

appointment. About this course– Course web site:

http://www.cs.drexel.edu/~mczajkow/Courses/cs338-f03


Who / what / where / when / why / how Prerequisites Lectures Readings Assignments Exams Grading Communication Policies Questions?


What’s a Graphical User Interface? In the narrow sense...– a graphical information channel between a

user and computer system/application• e.g., most Windows & Mac applications

– any interface with buttons, menus, etc (“widgets”)

In the broader sense...– ATMs, cell phones, navigation devices, etc.– GUIs don’t have to have standard widgets!– GUIs don’t have to be on your desktop!

This course focuses on the first group,but we’ll keep the second group in mind


This course's objectives

This is a GUI Design Course. – In order to pass this class you must

understand not only how to program a GUI, you must also know how to design one.

GUI Programming:– All of the GUI programming done for this

class will be done in the Java programming language, using the Swing library.

GUI Design:– This is the heart of the course. It is much

more important than the programming aspect. How do you design an interface to be usable?


GUI Design? Who cares! I want to program GUI Design is not easy! It is a complicated

thourough process involving many people at many levels of an organization.

Its not just for programmers! GUI Design involves cognitive psychology,

graphic arts, human factors engineering, communication, and then programming!

All of this is for one purpose:“If achieving the user's goals is the basis of our

design process, the user will be satisfied and happy. If the user is happy, he will gladly pay us money, and we will succeed at business.” - Alan Cooper


Who is Alan Cooper? Alan Cooper is the author of our course

textbook, “About Face 2.0: The Essentials of Interaction Design”

Alan Cooper's track record:– Created first serious business software for

PCs.– Father of Visual Basic– Owns a multi-million dollar usability

engineering consulting firm, www.cooper.com– Inventor of the “Goal-Directed” process of

design.• This is the design methodology we will be following!

– Author of many design books including, “The Inmates are Running the Asylum


Usability Today

Some problems with GUIs today:– software is “rude”

• e.g., inappropriateor derogatoryerror messages

– software makes unwarranted assumptions• e.g., assumes user knows underlying

mechanisms,such as saving to a hard drive

– software is obscure• “Use passive mode on FTP proxy?”

– software exhibits inappropriate behavior• open Word document, print it, close it

— “Save?”


To set the stage...

Why do we have these problems?– we have a conflict of interest

• for whom exactly are we developing the system?

– we lack a process• how can we think like engineers to evaluate

user needs and develop appropriate, usable systems?

• one simple, common, but not-so-good process:


Bad GUIs can ruin a company! GUI Applications must:– 'Be more advanced than our competitor!'

(technology)• Too much of this: Novel. No Desirability.

– 'Be more desirable than our competitor!' (desirable)• Too much of this: Apple. No Viability.

– 'Sustain our company's bottom line!' (viable)• Too much of this: Micro$oft. No Desirability.

In the end: The objective is a product that is desirable, viable, and buildable!

If you get all three just right, you will always win!


When Usability Fails When GUIs Fail:– Software does not enhance productivity.– A Productivity Paradox exists.– People can not use their computers

effectively.– People get angry at their computer.– Computers fail to understand what the human

wants from them.– Failures in communication lead to failures in

understanding, which can have negative results.

– You hear many many stories about bad computers.

Lets take a good close look


Bad GUIs


Upset Users


Bad Software can have Fatal Results


Whose Fault, and what can we do?

Programmers made the GUIs, is it their fault?

What about their managers? What about the people at marketing? Whose suppose to do all of this work,

so that GUIs don't turn out bad? Thats what GUI Design is for. It

includes everybody, not just the programmer.

How are we going to Design a usable GUI?


Goal Oriented Design: High Level

Users have goals in using our GUIs User-centered design involves...– goals: what is the user trying to

accomplish?– needs: what does the user need to do

this?– user constraints: what can/can’t the user

do?– task constraints: what can/can’t be done?– and lots of other things to consider


Goal Oriented Design: Low Level

Users embody all aspects of being human

Being human means having limitations:– visual attention (e.g., noticing

animation)– visual processes (e.g., reading a word)– motor processes (e.g., mouse

movement)– cognitive processes (e.g., memory)


Goal Oriented Design

Cooper’s 5-component process:

Each of these is covered in future lectures,

in great detail.

Researchusers &

the domain

Modelingusers &

use contexts

Requirementsuser, business, &technical needs

Frameworkstructure

& flow

Refinementof behavior,

form, context


Human-computer interaction Human-computer interaction is a discipline

concerned with the design, implementation, and evaluation of interactive systems for human use and with the study of the major phenomena surrounding them.

The HCI lifecycle is an iterative cycle that involves designing and evaluating with “users”as much as possible.

The HCI academic world is huge, thousands of people perform research and achieve accomplishments that serve the purpose of better computer interaction.

A good research link: www.hcibib.org


Building user interfaces Much of this process is smart, good ol’

software engineering– applicable to the GUI parts of the system– applicable to non-GUI parts of the system

This course focuses on the implementation of the GUI parts

BUT... We always keep in mind the other aspects of the process, particularly design

Use your knowledge of Software Design and engineering here, it applies!

Swing code: very tedious, long, and ugly!


Mental & implementation models Implementation models describe how we,

as programmers, think about the system– there are many levels to these models– e.g., when you write “x++”, we increment x– but what happens in the processor? cache? ...

Mental models describe how the userthinks about the system– not the same as the implementation model!– e.g., saving changes (Word file vs. file system) – e.g., TV and movie projection– e.g., household electricity


Represented models

Represented models fall between implementation and mental models

ImplementationModel

MentalModel

RepresentedModels


Designing for the mental model

Computer Science people build systems.Not surprisingly, then, most systems conform to implementation models.

Book example: Windows file system– drag file within drive (e.g., CC drive)

file moves to new location– drag file to another drive (e.g., CD drive)

file is copied to new location– why? implementation of file system– this puts the burden of understanding low-

level file system details on the user!!!


Designing for the mental model

Another example: Word references– link number to other part of the document– mental model: this stays linked– implementation model: link gets broken,

but software doesn’t correct — makes you do it!


New technology & mental models

Sometimes, new technology warrants breaking old mental models — carefully!

Example: the good ol’ calendar


Design & implementation: Summary Good, clean implementations facilitate

good, clean user interfaces.– efficient code leads to faster response– well structured code leads to simple

interfaces(and simple is good! -- easy to learn, remember)

– robust code doesn’t crash Good implementation doesn’t make up

for bad design, and good design doesn’t help a bad implementation.

Implementation & design go hand-in-hand!


We want to make Good GUIs

When GUIs work well...– shorter training time lower costs– fewer errors less hassle, lower costs– less maintenance less hassle, lower

costs– high transfer lower future costs

In other words...– Good Design saves time– Good Design saves money– Good Design earns happy customers!

Download - 1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 1: User Oriented Design

Top Related