T-121.5300 User Interface DesignIntroduction

Marko NieminenHelsinki University of Technology

Usability and User Interfaceshttp://www.soberit.hut.fi/~mhtn

http://www.soberit.hut.fi/T-121/T-121.5300

Marko Nieminen

www.soberit.hut.fi

T-121.5300 Staff and Contact Information

Teacher

Marko NieminenAssistanta

Lasse Lumiaho

web pages

https://noppa.tkk.fi/noppa/kurssi/t-121.5300/ Web-based learning environment Optima

Contact

t1215300@soberit.hut.fiDiscussion forum Optima

Marko Nieminen

www.soberit.hut.fi

http://www.acm.org/sigchi/cdg/figure_1.gifACM SIGCHI Curricula for Human-Computer Interaction

T-121.5300

Context of Interaction Design

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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ä

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

Kurssin suorittaminen

Luennot Kirja Verkkoaineisto Harjoitustehtävät 0-4 Tentti

Marko Nieminen

www.soberit.hut.fi

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, 13Kirja soveltuu hyvin taustamateriaaliksi myös muille käyttöliittymiä käsitteleville kursseille.

Marko Nieminen

www.soberit.hut.fi

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, 12Kirja 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.

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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!

Marko Nieminen

www.soberit.hut.fi

Kurssin esitiedot

perustiedot: T-121.3100 hyvä ymmärtää:

käyttöliittymän perusohjelmointi

visuaalinen suunnittelu

Marko Nieminen

www.soberit.hut.fi

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)

Marko Nieminen

www.soberit.hut.fi

HP Laserjet Series II

HP Laserjet Series II Front Panel

ONLINE CONTINUE

RESET

PRINTFONTS

TEST

ENTER

RESETMENU

FORM FEED

MENU

FONT = 01*

+

-

READY

Marko Nieminen

www.soberit.hut.fi

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

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

http://www.printerworks.com/Catalogs/SX-Catalog/SX-HP_LaserJet-II.html

Johdanto

Vuorovaikutteisia sovelluksia, järjestelmiä ja laitteita

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

HP 560C – Panel UI

http://www.cit.rcc.on.ca/hf100/hf100m2.htm

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

Xerox Star GUI

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

Marko Nieminen

www.soberit.hut.fi

Marko Nieminen

www.soberit.hut.fi

CommandLine

Interface

”CLI”

Marko Nieminen

www.soberit.hut.fi

CLI today

Marko Nieminen

www.soberit.hut.fi

Käyttöliittymät alusta- ja vuorovaikutusriippuvaisia

http://www8.org/w8-papers/5b-hypertext-media/uiml/uiml.htmlAbrams & al. 1999

Marko Nieminen

www.soberit.hut.fi

Mobile Touch Screen

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

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, ...

Marko Nieminen

www.soberit.hut.fi

Typical UIDE(Borland Delphi)

Marko Nieminen

www.soberit.hut.fi

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 endend

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 = 0end

Marko Nieminen

www.soberit.hut.fi

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 0set m .menu.filemenu $m -tearoff 0.menu add cascade -label "File" \ -menu $m -underline 0$m add command -label "Exit" -command "destroy .". configure -menu .menu

frame .buttonspack .buttons -side bottom -fill x -pady 2mbutton .buttons.quit -text OK -command "destroy ."pack .buttons.quit -side left -expand 1

Create UIElement/controlType: “Label” Name and “path”

of the elementProperties andbehaviour

Marko Nieminen

www.soberit.hut.fi

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

Marko Nieminen

www.soberit.hut.fi

UI Prototyping / Development Tools

Traditional Development Tools Visual Studio (available via MSDNAA agreement) Eclipse Codegear JBuilder / Delphi Qt: C++, Java

Flash / Adobe

Silverlight / Microsoft

Marko Nieminen

www.soberit.hut.fi

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/oneconnectBlueprint http://mobile.yahoo.com/developersFire eagle http://fireeagle.yahoo.netZonetag http://zonetag.research.yahoo.com

Google http://code.google.com/android/download.html