![Page 1: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/1.jpg)
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
![Page 2: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/2.jpg)
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
![Page 3: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/3.jpg)
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
![Page 4: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/4.jpg)
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
![Page 5: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/5.jpg)
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
![Page 6: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/6.jpg)
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ä
![Page 7: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/7.jpg)
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
![Page 8: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/8.jpg)
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
![Page 9: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/9.jpg)
Marko Nieminen
www.soberit.hut.fi
Kurssin suorittaminen
Luennot Kirja Verkkoaineisto Harjoitustehtävät 0-4 Tentti
![Page 10: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/10.jpg)
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.
![Page 11: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/11.jpg)
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.
![Page 12: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/12.jpg)
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
![Page 13: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/13.jpg)
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
![Page 14: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/14.jpg)
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!
![Page 15: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/15.jpg)
Marko Nieminen
www.soberit.hut.fi
Kurssin esitiedot
perustiedot: T-121.3100 hyvä ymmärtää:
käyttöliittymän perusohjelmointi
visuaalinen suunnittelu
![Page 16: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/16.jpg)
Marko Nieminen
www.soberit.hut.fi
![Page 17: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/17.jpg)
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)
![Page 18: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/18.jpg)
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
![Page 19: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/19.jpg)
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
![Page 20: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/20.jpg)
Johdanto
Vuorovaikutteisia sovelluksia, järjestelmiä ja laitteita
![Page 21: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/21.jpg)
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
![Page 22: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/22.jpg)
Marko Nieminen
www.soberit.hut.fi
![Page 23: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/23.jpg)
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
![Page 24: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/24.jpg)
Marko Nieminen
www.soberit.hut.fi
HP 560C – Panel UI
http://www.cit.rcc.on.ca/hf100/hf100m2.htm
![Page 25: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/25.jpg)
Marko Nieminen
www.soberit.hut.fi
Xerox Star - 1980http://www.acypher.com/wwid/Chapters/05SmallStar.html
![Page 26: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/26.jpg)
Marko Nieminen
www.soberit.hut.fi
Xerox Star GUI
http://startupblog.files.wordpress.com/2007/06/xerox-star.jpg
![Page 27: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/27.jpg)
Marko Nieminen
www.soberit.hut.fi
![Page 28: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/28.jpg)
Marko Nieminen
www.soberit.hut.fi
CommandLine
Interface
”CLI”
![Page 29: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/29.jpg)
Marko Nieminen
www.soberit.hut.fi
CLI today
![Page 30: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/30.jpg)
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
![Page 31: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/31.jpg)
Marko Nieminen
www.soberit.hut.fi
Mobile Touch Screen
![Page 32: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/32.jpg)
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
![Page 33: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/33.jpg)
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, ...
![Page 34: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/34.jpg)
Marko Nieminen
www.soberit.hut.fi
Typical UIDE(Borland Delphi)
![Page 35: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/35.jpg)
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
![Page 36: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/36.jpg)
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
![Page 37: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/37.jpg)
Marko Nieminen
www.soberit.hut.fi
Eclipse IDE http://www.eclipse.org/articles/Article-UI-Guidelines/Contents.html
![Page 38: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/38.jpg)
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
![Page 39: T 121 5300 (2008) User Interface Design 1 Final](https://reader035.vdocuments.us/reader035/viewer/2022070304/54c2bf184a7959286f8b45a7/html5/thumbnails/39.jpg)
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