1 22

WELCOME TOINTERACTION

DESIGN:GRAPHICAL

INTERFACES, 6pSus Lundgren

2 22

What’s it all about?• To practice design of graphical user

interfaces, focusing on interaction and expression

• To practice how to adapt an interface as well as the input and output to it, to a given situation and user group

• To practice how to create interfaces that are dynamic and yet easy to interact with

See clearer requirements for each project!

3 22

What’s it all about?

4 22

It’s NOT about• Creating good-looking surfaces

– Looks is a bonus but consideration is a necessity

• Creating full-working prototypes

5 22

Stuff you’ll like:• You will learn a lot

– From the lectures

– From your fellow group members

– Through practical work

• There’s no ”tenta”

• You’ll have fun!

6 22

Stuff You’ll dislike• You might think that the

demands/specifications on how to succeed with a project are unclear– It’s hard to make them clearer

• Your group might not work very well

• Your computer/the studio computers won’t work or don’t have the programs you prefer installed

• It may take some time until you get a working mail address – I will communicate with you via the web

page

7 22

Welcome!• This course has one regular lecturer

– Sus Lundgren, lundsus@cs.chalmers.se

• The course runs from today, 29/8, to 21/10 (last lecture 12/10)

• Lectures, exercises and project presentations are always scheduled on Mondays and Wednesdays

• Mandatory parts are– To take part in all projects and exercises

– To take part in the literature assignment

– To be present at project presentations

8 22

Literature• Edward R. Tufte: Envisioning Information

– To understand principles of information visualization and graphical design

• Alan Cooper & Robert Reimann: About Face 2.0: The Essentials of Interaction Design– To understand principles of interaction

design related to traditional graphical user interfaces

– Your ”Bible”: When in doubt – ask Cooper

• Various papers– Concerning subjects such as non-traditional

input and non-effective applications…

9 22

10 22

course contents• Lectures

• Literature assignment

• Exercises

• Projects– Two projects performed in groups

– One project performed individually

• Grades will be based on the outcome of the projects

No examination (”tenta”)

11 22

Contents: Lectures• The lectures cover the following subjects:

– What is a good GUI?

– Group dynamics (mini)

– Traditional user interfaces I,II and III

– What is information? (mini)

– Web design

– Information visualization

– Non-traditional ways to input & output data

– Non-effective applications: Informative Art and Slow Technology

12 22

Literature Assignment• There will be one literature assignment

– Your group will present one or more chapters from Coopers book

– You will serve as opponent to other groups

• Circa 10 minutes per group including questions

• 14/9

13 22

Contents: Exercises• Exercises are performed in groups of 3

people; not necessarily those in your project group– Taking part is mandatory

• There are five scheduled sessions

• At each session, there are two exercises to choose from– Choose the one where you will learn the

most; exercises are not graded

• Exercises are supervised, and one supervisor will register and give feedback on last weeks exercise

14 22

Contents: Exercises• Subjects are

– Programming a robot or To draw icons

– Alorithms or Designing a Popup

– Designing Search or Designing Menus

– Visualizing statistics or ?

– Making the GUI to a small game or Vusualizing unpredictable data

– Redesigning a GUI

15 22

Contents: Projects• The course contains three mandatory

projects

• Group project I: Traditional GUIs (60p)

• Group project II: Non-traditional graphical interfaces (15p)

• Individual project: choose one of– Creating a complex search GUI (45p)

– Creating a web system (30p)

• The points represent– A measure on how many hours to spend

– How much a project is worth when it come to grading

16 22

On grading• Each project is worth a number of points

– These points are divided between the different parts of the project for clarity on what’s important

• Thus, in total 120 or 105 points can be earned, depending on which individual project you choose

• The points earned give the grade:– 60 - 74 = 3 (CTH)

– 75 - 99 = 4 (CTH)

– 100 - 120 = 5 (CTH)

– 60 - 95 = G (GU)

– 96 – 120 = VG (GU)

17 22

To get good marks• You have to attest your design decisions

• You have to analyze and discuss your design and the implications of your design decisions.

• You have to articulate your design process

I am not a mind reader :)

18 22

Example• We used brainstorming to get an idea, and

we came up with a really cool lamp.

• We decided to use a red light bulb since red is said to be an energetic color.

• It turned out that the red light bulb gave the lamp and hence the room a sort of pornographic and gloomy touch that was clearly not suitable for the elderly users. In retrospect we should have used a light bulb of normal color, or perhaps a lightly yellow one to create a cozy atmosphere.

19 22

Thus…• If you do something that is crap but explain

– how you did it

– why the design choices seemed to be a good idea at the time

– why it went wrong

– what should have been done differently and how

• …it is still possible, (but quite hard!) to get a high grade.

20 22

Thus…• If you do something brilliant, but do NOT

explain how and why you cannot get a high grade. – How am I supposed to know if you are

really good or just plain lucky?

Don’t be afraid to fail

21 22

On Myself• Advantages

– Have worked as an IT-consultant for 5 years

lots of practical ´”real life” knowledge

– Have experienced all ”editions” of this course

• Drawbacks– Not very up-to-date when it comes to the

latest academic findings within HCI

• Hang-ups– Gets annoyed with people who come late or

miss deadlines without a very good excuse

– Dislikes PowerPoint

22 22

What about you?• Name

• E-mail address

• Education & relevant work experience

• What’s your most prominent role: rank the following:– Programmer

– Graphical designer

– Project leader

– Writer

• Illustrate yourself!