t 121 5300 (2008) user interface design 1 final
DESCRIPTION
First lecture at course T-121.5300 User Interface DesignTRANSCRIPT
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
[email protected] 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