T 121 5300 (2008) User Interface Design 1 Final

T-121.5300 User Interface Design Introduction Marko Nieminen Helsinki University of Technology Usability and User Interfaces http ://www.soberit.hut.fi/~mhtn http://www.soberit.hut.fi/T-121/T-121.5300

T-121.5300 Staff and Contact Information

Teacher

Marko Nieminen

Assistanta

Lasse Lumiaho

web pages

https://noppa.tkk.fi/noppa/kurssi/t-121.5300/

Web-based learning environment Optima

Contact

[email_address]

Discussion forum Optima

Context of Interaction Design http://www.acm.org/sigchi/cdg/figure_1.gif ACM SIGCHI Curricula for Human-Computer Interaction T-121.5300

Vuorovaikutteisten järjestelmien suunnittelun keskeiset näkökulmat (Olsen)

Tietokonegrafiikka (Computer Graphics)

piirtämisen ”primitiivit”: viivat, polygonit, 2D, 3D

tekstin tulostaminen, kirjasimet, värit, varjostukset, pinnat

ikkunointi

erilaiset vuorovaikutusvälineet (input/output)

Käytettävyys (Human Factors and Usability)

iteratiivinen, käyttäjäkeskeinen suunnittelu

käytettävyyssuunnittelun perusmenetelmät: käyttäjäkeskeinen vaatimusmäärittely, käytettävyyden arviointi

käyttäjän piirteet: havaitseminen ja ymmärtäminen

erilaiset käyttöliittymäympäristöt, käyttöliittymien suunnitteluohjeistot

Oliopohjainen ohjelmistosuunnittelu

Kurssin teema-alueita

Vuorovaikutteisen ohjelmiston tekninen rakentaminen käyttöliittymäkehitysympäristöjen ja –ohjeistojen tuella

Graafisen käyttöliittymän peruselementit ja niiden käyttö

Vuorovaikutteisten järjestelmien arkkitehtuuriratkaisut

Vuorovaikutteisen järjestelmän kehittämiseen liittyvien käyttäjävaatimusten merkityksen ymmärtäminen

Käyttäjävaatimusten muuttaminen käyttöliiittymäksi

Oppimistavoitteet: Kurssin käytyään...

Opiskelija osaa tunnistaa käyttötilanteeseen liittyviä vaatimuksia

Opiskelija osaa huomioida käyttötilanteen suunnitellessaan käyttöliittymää

Opiskelija osaa valita käyttöliittymän suunnitteluun käyttöliittymäohjeiston sovellusalueen mukaisesti ja

osaa hyödyntää käyttöliittymäohjeistoja käyttöliittymän suunnittelussa

Opiskelija on saanut tuntumaa käyttöliittymien käytännön rakentamiseen

Opiskelijalla on kokemusta jonkun käyttöliittymän kehitysvälineen käytöstä

Sisältö ja tavoite pähkinänkuoressa

Kurssilla esitellään erilaisia käyttöliittymätekniikoita

erityisesti perehdytään kuitenkin tietokoneessa toimivan graafisen käyttöliittymän ja vuorovaikutteisen toiminnallisuuden toteuttamiseen

Jonkin verran käyttäjäkeskeisen suunnittelun metodologiaa ja jonkin verran toteutustekniikkaa

Kurssin tavoitteena on opettaa/oppia perusteet käyttöliittymän ja sen vuorovaikutteisten ominaisuuksien suunnittelusta ja toteutuksesta toiminnalliseksi, testauskelpoiseksi prototyypiksi

Tehtävä: Odotukset kurssia kohtaan

Keskustele vierustoverisi kanssa siitä, mitä odotuksia sinulla on kurssia kohtaan:

Mitä osaat mielestäsi jo käyttöliittymäsuunnittelusta?

Mitä odotat oppivasi kurssin kautta?

Varautukaa kertomaan odotuksista keskustelunne jälkeen lyhyesti

Kurssin suorittaminen

Luennot

Kirja

Verkkoaineisto

Harjoitustehtävät 0-4

Tentti

Kurssimateriaalia

Designing the User Interface 4th ed. -

Strategies for Effective Human-Computer-Interaction

Shneiderman, Ben & Catherine Plaisant

Luvut: 2, 3.3, 3.7, 5, 7, 8, 12, 13

Kirja soveltuu hyvin taustamateriaaliksi myös muille käyttöliittymiä käsitteleville kursseille.

Kurssimateriaalia

Designing the User Interface 3rd ed. -

Strategies for Effective Human-Computer-Interaction

Shneiderman, Ben

Luvut: 2, 3.3, 3.7, 5, 7, 8, 11, 12

Kirja soveltuu hyvin taustamateriaaliksi myös muille käyttöliittymiä käsitteleville kursseille.

AMAZON : $74.00 (used from $1.84)

Availability: Usually ships within 24 hours.

Oppimateriaalia lisäksi

Task-Centered User Interface Design - A Practical Introduction

by Clayton Lewis & John Rieman

http:// hcibib.org/tcuid

Käyttöliittymän suunnittelua ohjeistavia sääntökokoelmia

kurssin verkko-oppimisympäristössä opintojakson edetessä

Muuta täydentävää verkkomateriaalia luentojen ohessa

T-121.5300 Harjoitustehtävät

Tehtäviä 4-5 kpl (ensimmäinen on orientoiva tehtävä)

Käyttöliittymän suunnitteluharjoituksia

Kehitysympäristöön tutustuminen

Komentokielikäyttöliittymä: pikaviestin / instant messenger

Perinteinen valikko-lomake-käyttöliittymä pöytäkoneeseen (Windows, Apple, GNOME, KDE)

Web-käyttöliittymä

Mobiilikäyttöliittymä

Tärkeää valitun käyttöliittymäympäristön ohjeistojen käyttö!

Kehitysvälineet ladattavissa mm. MSNAA-sopimuksen puitteissa

Viimeinen tehtävä niille, jotka suorittavat kurssin 4 op laajuisena

Sähköiset palautukset verkko-opetusympäristöön: “RUByRIC”

Interaktiosuunnitelmat myös mahdollista esitellä youtube-videona

Harjoitustehtäviin kuuluu

käyttöliittymätehtävän toteuttaminen

vuorovaikutteisuuden esittäminen kuvaruutukaappauksineen (tai muu havainnollistaminen)

toiminnallinen käyttöliittymä

lähdekoodi

työseloste eli raportti käyttöliittymän suunnittelun taustalla vaikuttaneista perusteista

tärkeää siis myös selkeä mutta tiivis raportointi!

Kurssin esitiedot

perustiedot: T-121.3100

hyvä ymmärtää: käyttöliittymän perusohjelmointi

visuaalinen suunnittelu

50% suunnitteluajasta menee käyttöliittymäsuunnitteluun 48% koodista kohdistuu käyttöliittymään Myers B.A. & Rosson M.B. in Survey on User interface programming in Human Factors in Computing Systems 1992. (SIGCHI’92)

HP Laserjet Series II HP Laserjet Series II Front Panel ONLINE CONTINUE RESET PRINT FONTS TEST ENTER RESET MENU FORM FEED MENU FONT = 01* + - READY

HP Laserjet Series II

To print lots of copies a document on a Hewlett Packard LaserJet II without waiting hours, do this:

On the LaserJet control panel, press the MENU Button.

Use the plus and minus keys to set the number of copies you want.

Press the ENTER RESET MENU Button.

Press the MENU Button repeatedly to scroll to "00 READY."

Press the CONTINUE RESET Button and hold until you see "07 RESET."

Now whatever image is sent to the printer's memory will be printed as many times as you want. This works because the print driver doesn't tell the Laser Jet how many copies to print, so it doesn't override the "Number of Copies" setting when it prints. Note: Remember to reset the number of copies to "one" when you are finished, because the printer retains the settings even when it's powered down.

http://www.geos-infobase.de/ND_DOCS/272HP.HTM

http://www.printerworks.com/Catalogs/SX-Catalog/SX-HP_LaserJet-II.html Model Data Model Number HP 33440 Introduction Date March 1987 Original MSRP $2,395 Replaces Model HP LaserJet Plus Replaced by Model HP LaserJet III

Johdanto Vuorovaikutteisia sovelluksia, järjestelmiä ja laitteita

Käyttöliittymätyyppejä

” fyysiset” käyttöliittymät rajatulla palautteella (ledit tms.)

muutaman rivin tekstinäytöt (yl. lcd, mahd. täydennettynä joillakin symboleilla)

pienet graafiset näytöt, näppäimistö

pienet graafiset näytöt, kosketusnäytöt, paneeli-tyyppiset käyttöliittymät

tekstipohjaiset isompaan näyttöön perustuvat käyttöliittymät (vanhemmat tietokoneet, usein nykyisin videot tv:n kautta)

graafiset ja suorakäyttöiset käyttöliittymät

myös käyttökontekstin mukainen jako: kiinteä vs. mobiili

Vuorovaikutteinen tietokoneohjelma: GUI

Perinteisesti tietotekniikkaympäristössä käyttöliittymällä ajatellaan tietokoneen graafista käyttöliittymää, tämä on kuitenkin vain yksi käyttöliittymätyyppi

HP 560C – Panel UI http://www.cit.rcc.on.ca/hf100/hf100m2.htm

Xerox Star - 1980 http://www.acypher.com/wwid/Chapters/05SmallStar.html

Xerox Star GUI http://startupblog.files.wordpress.com/2007/06/xerox-star.jpg

Command Line Interface ” CLI”

CLI today

Käyttöliittymät alusta- ja vuorovaikutusriippuvaisia http://www8.org/w8-papers/5b-hypertext-media/uiml/uiml.html Abrams & al. 1999

Mobile Touch Screen

How to Design & Develop User Interfaces?

” Design”

more emphasis on the product and the UI itself

layout issues

human perception and attention important

” interaction design”

” Develop”

more emphasis on the methods and process

what activities to perform in the user interface design

what material supports design: guidelines, patterns etc.

Often in everyday language: design = develop

UI Design in Practice

Development methods

generic

” iterative”, ”prototyping”

Development tools

platform-specific

guidelines

Apple, MS Windows, Gnome, KDE

Symbian, iPhone

service/provider-specific

Google, Yahoo, ...

Typical UIDE (Borland Delphi)

RAD/IDE Tools Enable Drag’n’Drop Design object MainMenu1 : TMainMenu Left = 8 Top = 8 object File1: TMenuItem Caption = '&File' object Exit1: TMenuItem Caption = 'E&xit' end end end object Label1 : TLabel Left = 56 Top = 8 Width = 61 Height = 13 Caption = 'Hello, World!' end object Button1 : TButton Left = 48 Top = 32 Width = 75 Height = 25 Caption = 'OK' TabOrder = 0 end

Example: User Interface with Tcl/Tk wm title . "Simple Tcl Example" label .msg -wraplength 3i -justify left -relief sunken -text "Hello, World" pack .msg -side top menu .menu -tearoff 0 set m .menu.file menu $m -tearoff 0 .menu add cascade -label "File" -menu $m -underline 0 $m add command -label "Exit" -command "destroy ." . configure -menu .menu frame .buttons pack .buttons -side bottom -fill x -pady 2m button .buttons.quit -text OK -command "destroy ." pack .buttons.quit -side left -expand 1 Create UI Element/control Type: “Label” Name and “path” of the element Properties and behaviour

Eclipse IDE http://www.eclipse.org/articles/Article-UI-Guidelines/Contents.html

UI Prototyping / Development Tools

Traditional Development Tools

Visual Studio (available via MSDNAA agreement)

Eclipse

Codegear JBuilder / Delphi

Qt: C++, Java

Flash / Adobe

Silverlight / Microsoft

Mobile UI Development Tools

Symbian / S60

http://wiki.forum.nokia.com/index.php/S60_3rd_Edition:_Application_Development

Windows Mobile

http://www.microsoft.com/windowsmobile/en-us/developers/default.mspx

iPhone

http://developer.apple.com/iphone/program/download.html

Yahoo

Oneconnect http:// mobile.yahoo.com/oneconnect Blueprint http:// mobile.yahoo.com /developers Fire eagle http:// fireeagle.yahoo.net Zonetag http:// zonetag.research.yahoo.com