1cs 480: graphical user interfaces. dario salvucci, drexel university. lecture 1: introduction to...

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

Lecture 1:Introduction to GUIs

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

Welcome!

About me– Michael Czajkowski– Email: [email protected]– Office Hours: Appointment Only, on Thursdays

About this course– Syllabus, timeline, & resources on-

line athttp://www.mcs.drexel.edu/~mczajkow/Courses/cs338-f02/

Shared Resources with Dr. Salvucci


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


What’s a GUI?

GUI = Graphical User Interface For many programs in CS

coursework…

For GUIs we’ll be building…

argsfiles

stdout,files

Programuser user

user

manualinput

programgraphicalinterface


Where are GUIs?

Everywhere!– Windows / Mac applications– Linux desktops / window managers– Web pages of every kind– ATM machines, cell phones, watches,

military applications ...


Why have GUIs?

Can present a lot of information in small area but still maintain readability

Can present different types of information (e.g., pictures, animations)

Can store “functions” on-screen without forcing user to remember them

Can provide “direct-manipulation” interfaces with various input


Challenges of a GUI

Limitations of the display– space / area– resolution

Limitations of the user– visual attention– visual processes

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

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

(e.g., memory)


How do we design GUIs?

Psychology of HCI User-centered design– 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?– Design with the User's Mind in Mind– and lots of other things to consider

Design is not the focus of this course, BUTWe always need to keep the user in mind !!!


Problems in user understanding

Difference of evaluation– Users need to take what they see and

encode it with respect to their goals.– possible problems:

• ergonomic factors (e.g., font)• lack of structure and/or consistency• lack of information

Difference of execution– Users have to decide how to execute their

goals.– possible problems:

• lack of procedural knowledge about interface• inadequate feedback


When GUIs go bad

Choose-your-own-example One very good example:

• user goal(s)?• task demands?• user limitations?

• user expectations?


When GUIs get better

A much better interface, IMHO(though for a different purpose)

• flexible• redundant• contextual• problems?


Cash Register example Meetingmaker example Serious Problem: Productivity

Paradox What's going on here? Listen to your surroundings

When The User was Forgotten


What makes a good GUI?

Mac OS X launcher — what do you think?


Avoiding GUI pitfalls

Jakob Nielsen's“Top Ten Mistakes in Web Design”

Is good design really this easy? Q: How can we do better?

A: Keep the user's mind in mind!

1. Using Frames2. Gratuitous Use of Bleeding-Edge Technology3. Scrolling Text, Marquees, and Constantly Running Animations4. Complex URLs

5. Orphan Pages6. Long Scrolling Pages7. Lack of Navigation Support8. Non-Standard Link Colors9. Outdated Information10. Overly Long Download Times


Knowing your users

Thanks to Scott MacKenzie @ York U for the this slide!!

User Populatio

n

Assembler code0.01%

Program (any language)1%

C++ code0.1%

Linux15%

Usability

MS Windows

70%

Television

98%


When GUIs “go good”

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.

Whole businesses based on this philosophy.


How do we build GUIs?

Ah, the real focus of this course. :-) Good, clean implementations

facilitategood, 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 GUI: Have both good design

and good implementation.


Design & implementation

What are the implementation costs forthese two interfaces?


Implementation: OOP principles

Modularity: Most important principle when applied to building GUIs.

“Components” Useage of inheritance principles You will be graded on how modular

your code is! Its important. :) Event-Based Systems


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 aniterative cycle thatinvolves designing andevaluating with “users”as much as possible.

DesignPrototype

EvaluateThanks to Scott MacKenzie @ York U for the next few slides!!

Human-computer interaction


Multidisciplinary nature of HCI

Human side:– cognitive psychology– ergonomics and human factors – sociology and anthropology – linguistics – communication theory – social and organizational psychology – graphic and industrial design


Multidisciplinary nature of HCI

Machine side: – computer science – engineering – computer graphics – operating systems – programming languages – software engineering – development environments – artificial intelligence


Why are good GUIs hard to build?

50% of design, implementation, maintenance, code size, etc.

Multiprocessing: UIs are inherently concurrent!– multiple inputs, redraws– synchronization, deadlock prevention

Flexible: Must deal with many different kinds of users. No one human is exactly like another!

Real-time requirements Must be robust (users do lots of odd

things!)


Why are good GUIs hard to build? (2) API & UI logic complexity Reactive instead of proactive: the

user dictates what the system should do

Hard to modularize (OOP interface design)

Exhaustive testing of UIs is hard – how to ensure robustness?

Evaluation with users is time consuming

And more...


Course overview

Our task for this course:Learn how to build great GUIs with a user-centered design!

How we’ll do this:Implement GUIs in Java & Swing

What is Java?What is Swing?

1cs 480: graphical user interfaces. dario salvucci, drexel university. lecture 1: introduction to...

Documents

graphical user interfaces

user goals

user limitations

user constraints

user expectations

salvucci slide

dario salvucci

drexel university