WIMP-käyttöliittymät: Ikkunointi Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tarjolla tänään WIMP Windows, Icons, Menus, Pointing Device Mikä on ikkuna? Ikkunan osat Navigointi ikkunoiden välillä, ikkunanhallinta Esimerkkejä erilaisista ikkunointijärjestelmistä 2 Saila.Ovaska@uta.fi 1
WIMP-käyttöliittymien historiaa 3 Tietojenkäsittelyn historiaa Isot tietokoneet, kaukana konesaleissa Eräkäyttö (batch processing) osituskäyttö (time sharing) käyttäjän kannalta vuorovaikutteista the IBM Personal Computer 1981 DOS kunnes Windows 3.0 vuonna 1990 v. 1983 myyty jo 1 300 000 PC-konetta Paul Allen & Bill Gates Microsoft 1975 Steve Wozniak & Steve Jobs Apple 1975 Xerox PARC Palo Alto Research Center first Alto 1972-1973 The best way to predict the future is to invent it. 4 Saila.Ovaska@uta.fi 2
Xerox 8010 Xerox Star April 1981 Double-clickable icons, mouse, overlapping windows, dialog boxes and a 1024*768 monochrome display. J. Johnson, T. L. Roberts, W. Verplank, D. C. Smith, C. Irby and M. Beard, K. Mackey, The Xerox "Star": A Retrospective. Human Computer Interaction: Toward the Year 2000, Morgan Kaufman Publishers. http://www.digibarn.com/friends/curbow/star/retrospect/index.html 5 Historiaa lyhyesti WIMP-käyttöliittymien kaupallinen kehitys Xerox Star, 1981: työpöytä ja ikkunointi Yksittäisen pikselin tarkkuus grafiikassa; 72 dpi käyttöliittymässä uusia mahdollisuuksia visuaaliseen suunnitteluun: fontit ja typografia, eri kielet, vektorigrafiikka ja muu kuvitus (mutta näyttö oli mustavalkonäyttö, ei vielä värejä käytössä vaan mustan eri vaaleusasteita) Ethernet ja lasertulostus http://www.youtube.com/watch?v=cn4vc80pv6q Kuvan lähde: www.digibarn.com http://www.digibarn.com/friends/curbow/star/retrospect/index.html 6 Saila.Ovaska@uta.fi 3
Historiaa lyhyesti Xerox Star on esikuva WIMP-käyttöliittymille Mutta siinä ei ollut roskakoria Osa toiminnallisuudesta näppäimistön geneerisillä näppäimillä valitse kohde (tiedosto, viiva piirroksessa, ) hiirellä ja paina Delete-painiketta http://www.youtube.com/watch?v=cn4vc80pv6q Kuvan lähde: www.digibarn.com http://www.digibarn.com/friends/curbow/star/retrospect/index.html 7 Mikä on WIMP? Alkuperäiseen WIMP-käyttöliittymään kuuluu Windows Ikkunoita voi avata, sulkea, vierittää, muuttaa kokoa, liikutella työpöydällä, pitää limittäin Icons Ikonit, kuvakkeet esittävät sovelluksia, objekteja, komentoja ja työkaluja ja ne avataan tai aktivoidaan klikkaamalla Menus Valikot tarjoavat listan vaihtoehdoista, listaa voi vierittää ja valinnan voi tehdä klikkaamalla (vrt. ruokalista eli menu ravintolassa) Pointing device (osoitinlaite) Hiirellä tai muulla osoitinlaitteella ohjataan kursoria, jolla manipuloidaan näytöllä olevia ikkunoita, kuvakkeita ja valikoita 8 Saila.Ovaska@uta.fi 4
Apple Macintosh 1984 http://en.wikipedia.org/wiki/mac_os, http://www.mac-history.net/ http://www.openculture.com/2009/02/steve_jobs_demos_the_first_macintosh_in_1984.html 9 Windows 1.01-1985 Ei vapaasti liikuteltavia ikkunoita, vaan ikkunat aseteltiin vierekkäin (tiled). http://toastytech.com/guis/guitimeline.html 10 Saila.Ovaska@uta.fi 5
Windows 2.03 e Liikuteltavat ikkunat ja ikkunoiden hallintatyökaluja. http://toastytech.com/guis/guitimeline.html 11 Windows 95 http://toastytech.com/guis/guitimeline.html 12 Saila.Ovaska@uta.fi 6
http://www.xwinman.org/ Kuvassa: KDE 3.3 http://www.kde.org/ http://en.wikipedia.org/wiki/x_window_system 13 ja uusia versioita: KDE 4.7 http://www.kde.org/announcements/4.7/ KDE 4.7. Plasma and applications 14 Saila.Ovaska@uta.fi 7
Ulkonäkö 15 Ikkunat uudistuvat Ikkunoiden ulkoasu ennen Kaikki ikkunassa kulmikasta Raskas ja synkkä ulkoasu, mm. pseudo-3d varjostukset painikkeissa Vuorovaikutuksen näkökulmasta Käyttöliittymäelementit olivat paisuneet (työkalupalkit, kuvakkeet, ) ja veivät suuren tilan ikkunoista sisällön sijaan Mac OS, 2002 Ulkoasun suunnittelun lähtökohtana: väriä ja hauskuutta Vuorovaikutus: Mac OS 8.5ssä oli seitsemän tapaa hallita ikkunoita tavoitteeksi ikkunoinnin yksinkertaistaminen 16 Saila.Ovaska@uta.fi 8
Vista & Windows 7: ikkunoiden Glass-ulkonäkö Standardi-ikkunoilla läpinäkyvät kehykset Joskus kontrollit sijoitetaan kehykseen 17 Maksimoidulla ikkunalla on erilainen ulkonäkö. ja mukaan on tullut ikkunoita, joita ei raamiteta. Windows desktop gadgets 18 Saila.Ovaska@uta.fi 9
Pääikkunat, ali-ikkunat Modaalidialogin käsite 19 Ikkuna (window) Ikkuna (window) = Näyttöpinnan osa, joka tarjoaa käyttäjälle liittymän tietojärjestelmään tai sen toimintoon. ATK sanakirja Ikkuna on ruudulla oleva rajattu alue, joka voi sisältää toiminnallisuutta, tekstiä, grafiikkaa Ikkunalla on tiettyjä ominaisuuksia (riippuen ikkunan tyypistä ja ohjelmasta) Otsikkorivi? Valikkorivi? Vierityspalkki? Liikuteltavuus? Koon säädeltävyys? Samanaikaisesti voi olla auki monta ikkunaa useampi käyttäjän tehtävä voi olla näkyvillä yhtä aikaa fokus on kuitenkin vain yhdessä niistä 20 Saila.Ovaska@uta.fi 10
Ikkunointi Ohjelma aukeaa pääikkunassa (main window) Pääikkunan osat Otsikkorivi Pienennyspainike Suurennuspainike Sulkemispainike Valikkorivi Tilarivi Vierityspalkki Ali-ikkunat (secondary window) Mm. dialogit, viestiruudut, paletit Tukevat pääikkunassa tapahtuvaa käyttäjän toimintaa Valikkokomennossa ali-ikkunan aukeaminen osoitetaan merkinnällä komennon nimen jälkeen 21 Ali-ikkunan aukeaminen Pääikkunan valikko Valikosta avautunut dialogi 22 Saila.Ovaska@uta.fi 11
Tuttuja dialogeja 23 Usein ns. modaalidialogeja mitä tapahtuu, kun ohjelman suorituksessa on avattu ali-ikkuna ja käyttäjä yrittää napsauttaa pääikkunan aktiiviseksi? miksi tapahtuu näin (eli miksi tarvitaan modaalidialogeja)? Modal dialogue vs. modeless dialogue Anna esimerkki moodittomasta dialogista! 24 Saila.Ovaska@uta.fi 12
Macintosh OS X Sheet Lakana [Apple HIG] 26 Aktiiviset ikkunat Macissa [Apple HIG] Päällimmäisenä oleva ikkuna ( Key window ) ottaa käyttäjän syötteen Fontin muutos vaikuttaa samalla hetkellä pääikkunassa. Fonts-dialogia ei tarvitse sulkea, kun palataan pääikkunaan. 27 Saila.Ovaska@uta.fi 13
Ikkunoiden hallinta Mac OSX [Apple HIG] The foremost document or application window that is the focus of the user s attention is referred to as the main window. The main window is often also the key window. The key window is the window that accepts user input, whether from the keyboard, mouse, or alternative input device. The close window keyboard shortcut, Command-W, targets the key window. Main and key windows are both active windows. An active window is visually distinct from an inactive window in that its title bar (and its toolbar, if there is one) displays the standard window-frame color, while the title bar (and toolbar) of an inactive window displays a lighter shade of the window-frame color. 28 Eriasteisia modaalisia dialogeja Fonts-dialogi on esimerkki moodittomasta dialogista (lapsi-ikkunasta) auki rinnalla eikä estä pääikkunan käyttöä Macintoshissa tunnetaan kaksi modaalidialogin muotoa Document-modal Application-modal Windows-ikkunat Application-modal (System-modal) 29 Saila.Ovaska@uta.fi 14
Ikkunan osia 30 Windows-pääikkunan osia otsikkorivi (title bar Valikkorivi pienennyssuurennus- sulkemispainike vieritys- ruutu (scroll box) Pysty vierityspalkki Tehtäväruutu (task pane) 31 Saila.Ovaska@uta.fi 15
Ikkunoita on monenlaisia [WindowsUserExperience] [Apple HIG] 32 Ikkunoita: Windows 2000 Mistä erottaa pääikkunan ja ali-ikkunan? [WindowsUserExperience] 33 Saila.Ovaska@uta.fi 16
Windowsin ali-ikkunoita Secondary windows (ali-ikkunat, ei-pääikkunat) Dialogit, kuten Tallenna nimellä... tai Avaa... Otsikkorivi kertoo ikkunan tarkoituksen Välilehdelliset dialogit, kuten Asetukset ja Ominaisuudet Viestiruudut (message box), virheilmoitukset 34 Microsoft Windows: suosituksia [vanha Windows User Experience] 35 Saila.Ovaska@uta.fi 17
Ikkunoita: Macintosh OS X kun dokumentissa on tallentamattomia muutoksia huomaa: pääikkunassa ei ole valikkoriviä. Missä Macissa on valikko? Proxy-kuvakkeesta esim. raahaus mailin liitteeksi [Apple HIG] http://www.apple.com/macosx/ 36 valikkorivi tällä hetkellä käytössä Finder Dock vrt. Windows tehtäväpalkki taskbar [Apple HIG] Saila.Ovaska@uta.fi 18
Windows 7 Valintanauha (Ribbon) Perusvalikoiden ja -työkalupalkkien uudelleensuunnittelu Tarkemmin valikoiden yhteydessä [UXGuide] 38 Ikkunatyyppejä Dialog box Keskusteluikkuna (KÄLIn suositus) Valintaikkuna (Windowssuomennos) Viestiruutu (Atk-sanakirja) Message box Viestiruutu, viesti-ikkuna tai sanomaruutu Palette window / panel Valikoimaikkuna (Windowssuomennos) Property sheet (Windows) / Inspector window (Mac) Ominaisuusikkuna A transparent panel [Apple HIG] Inspector window 39 Saila.Ovaska@uta.fi 19
Vista: Property windows Asettelu pystyyn tai vaakaan 40 Mac OSX: Preferences window Huomaa: ei OK- eikä Cancel-painikkeita. Miten ikkunat suljetaan? Milloin muutokset astuvat voimaan? 41 Saila.Ovaska@uta.fi 20
Vieritys 42 Vierityspalkit [Apple Human Interface Guidelines] Scroll bar Vierityspalkki Scroll arrow Vieritysnuoli Scroll box Vieritysruutu 43 Saila.Ovaska@uta.fi 21
Mietittäväksi Mihin suuntaan teksti liikkuu vieritettäessä? Miten paljon se liikkuu vierityspalkin eri osista? Vieritysruudusta raahaamalla Vieritysnuolia napauttamalla Miten saa aikaan automaattisen vierityksen? 44 Vierittimiin liittyviä ongelmia Kenguruefekti: vieritysruudun kulkeutuminen hiiriosoittimen alle tai ohitse, kun vieritetään sivu kerrallaan Vierityksen pysähtyminen, jos hiiriosoitin harhautuu liian kauas vieritysruudusta Liian vähäinen palaute siitä, missä kohdassa dokumentissa ollaan 45 Saila.Ovaska@uta.fi 22
Miten palautetta voisi lisätä? 46 Miten voisi helpommin löytää takaisin? Footprints scrollbar - Merkintä automaattista - Käydyn paikan merkki - Thumbnail-pikkukuva - Värikoodaus, jälki vanhenee - Vain 10 kpl/dokumentti - Vanhimmat häipyy kokonaan Toimiiko se? Taustalla oleva metafora: kirjanmerkki jalanjälki Alexander et al. (2009). Revisiting read wear: analysis, design and evaluation of a footprints scrollbar. CHI 09. ACM DOI. 47 Saila.Ovaska@uta.fi 23
Mietittäväksi Kun käyttäjä raahaa kohdetta, mistä järjestelmä tietää, pitääkö vierittää kansion sisällä (automatic scroll) vai haluaako käyttäjä siirtyä pois tästä kansiosta? 48 Vierityksen tehostaminen Tuplanuolilla sivu kerrallaan selaaminen Microsoft Word: vierityspalkin yhteydessä erilaisia dokumentin selaustapoja piilotettuina Uudemmissa Wordeissa selaaminen kuva kuvalta tai taulukko taulukolta jne. 49 Saila.Ovaska@uta.fi 24
Ikkunoinnin erikoistapauksia 50 Ikkunan jako ruutuihin pane = ruutu [UXGuide] [UXGuide] 51 Saila.Ovaska@uta.fi 25
Ikkunan jako ruutuihin Miten ruudutus ja jakaminen osiin eroavat toisistaan? vrt. split-operaatio (split = Jaa) ikkunan sisällä vaakasuora jakopalkki (esim. Excelissä myös pystysuora jakopalkki) [WindowsUserExperience] [UXGuide] 52 Ikkunan jako ruutuihin Javassa Nested split panes: http://java.sun.com/products/jlf/ed2/book/hig.windows3.html 53 Saila.Ovaska@uta.fi 26
Ei näkyviä kehyksiä Gadgets Vistassa Vrt. Macissa Dashboard widgets 54 Työpöydän pienoisohjelmat normaalitilassa vs. asetuksia muutettaessa [UXGuide] 55 Saila.Ovaska@uta.fi 27
Ikkunoiden hallinta 56 Mietittävää Milloin ikkuna on aktiivinen? 57 Saila.Ovaska@uta.fi 28
KDE Window Behavior Settings 58 Mietittävää Milloin ikkuna on aktiivinen? Miten voi liikkua ikkunoiden välillä helposti? Alt + tab [UXGuide] 59 Saila.Ovaska@uta.fi 29
Windows 7 Alt+Tab Tehtäväpalkissa olevista ikkunoista saa pikkukuvan (thumbnail) näkyviin hiiren kursorilla. Flip 3D ikkunoiden selaus Windows logo key+tab [UXGuide] 60 Macintosh OS X Dock-valikko sovelluksien avaamiseen ja auki olevien sovellusten välillä liikkumiseen sisältää usein käytettyjen sovellusten ja auki olevien sovellusten ja tiedostojen kuvakkeita vaihteleva määrä kuvakkeita, skaalautuu työpöydän leveyteen ja kursorin kohdalla olevat kuvakkeet suurenevat Exposé Auki olevan ikkunan löytäminen, työpöydän esiin tuominen http://www.apple.com/macosx/what-is/ http://mactutorial.wikidot.com/macbasics:a06 61 Saila.Ovaska@uta.fi 30
Macintosh OS X Dock Stacks Viimeiset lataukset ja dokumentit ponnahtavat viuhkaksi tai ruudukoksi http://images.appleinsider.com/leopard-preview-dock-12.png 62 Useat työpöydät KDE:ssa tarjolla neljä virtuaalista työpöytää (virtual desktops) Pikkukuvassa (pager) näkyy kullakin työpöydällä auki olevat ikkunat asetteluineen Macintosh OS X Spaces Liikkuminen useamman yhtäaikaisen työpöydän välillä Ei enää käytössä (vrt. seuraava kalvo) 63 Saila.Ovaska@uta.fi 31
Monta virtuaalista työpöytää Työpöydät (ja Dashboard) saatavilla esim. Exposé-näkymässä Ks. Mission Control [Apple HIG] 64 Ikkunoiden asettelun termejä Tiled vierekkäiset ikkunat Overlapping päällekkäiset ikkunat Cascading limittäiset ikkunat cascading windows Kuvan lähde: http://www.answers.com/topic/cascading-windows 65 Saila.Ovaska@uta.fi 32
Dokumentti-ikkunoiden hallinta Multiple document interface, MDI Vanhempi-ikkuna (sovellus) ja lapsi-ikkunat (dokumentit) Käyttäjä voi työskennellä useamman dokumentin kanssa yhtä aikaa [WindowsUserExperience] 66 Multiple Document Interface [WindowsUserExperience] 67 Saila.Ovaska@uta.fi 33
Dokumentti-ikkunoiden hallinta Multiple document interface, MDI Vanhempi-ikkuna (sovellus) ja lapsi-ikkunat (dokumentit) Käyttäjä voi työskennellä useamman dokumentin kanssa yhtä aikaa Vaikeutena hahmottaa, mitkä ikkunat ovat milloinkin auki Ratkaisuja: tehtäväpalkit, tehtävien hallinta, dock-valikko yms. ikkunoiden välillä liikkumiseen Nykyisin yleistynyt ratkaisu: välilehdet (tabbed document interface, TDI) Single Document Interface, SDI Kaikki ikkunat erillisiä toisistaan [WindowsUserExperience] 68 Uusia ikkunointi-ideoita 69 Saila.Ovaska@uta.fi 34
Uusia tuulia... Metisse desktop Välilehdet (tabbed windows) Kääntyvät (rotating) ikkunat Kuoriutuvat/taittuvat (peeling) ikkunat Beaudouin-Lafon, Novel Interaction Techniques for Overlapping Windows. Proc. UIST 01. http://insitu.lri.fr/metisse/ Ikkunoiden välillä liikkuminen Kiertyvät ikkunat (rolling) Copy-paste päällekkäisten ikkunoiden välillä Chapuis & Roussel. Copy-and Paste Between Overlapping Windows. Proc. CHI 07. 70 Project Looking glass Looking glass tuo 3D metaforan työpöydälle Kolmiulotteisuus, läpinäkyvyys, Javaan perustuva, alustasta riippumaton Käyttäjät voivat organisoida työtään paremmin ja olla vuorovaikutuksessa visuaalisesti miellyttävällä ja rakentavalla tavalla. - John Fowler, Sun Microsystems Muistiinpanojen lisääminen kääntyvän ikkunan takapuolelle. http://www.youtube.com/watch?v=smwd1fogr18 Kuvan lähde: http://en.wikipedia.org/wiki/project_looking_glass 71 Saila.Ovaska@uta.fi 35
BumpTop Desktop Fyysisen työpöydän metafora Dokumentit pinoissa ja epämääräisessä (mutta merkityksellisessä järjestyksessä) Ominaisuuksia Tabletop UI Pinot keskeinen organisointitapa Nätit ja sotkuiset pinot Dokumenttien heittely, törmäily University of Toronto, Dynamic Graphics Project http://bumptop.com/ Agarawala & Balakrishnan (2006). Keepin' it Real: Pushing the Desktop Metaphor with Physics, Piles and the Pen. Proceedings of CHI 2006, 1283-1292. 72 Ikkunointi yhteenveto Ulkonäköeroja järjestelmien välillä perus-gui mutta oma look & feel Toiminnallisia eroja vuorovaikutuksessa Erilaisia ikkunointimalleja Yhden dokumentin käsittelystä monen dokumentin samanaikaiseen avoinna oloon Ikkuna jaettu osiin jotta saadaan samaan aikaan useita näkymiä avoinna olevaan sisältöön (kuten excelissä) Samaan kohteeseen liittyviä (eri hierarkiatasojen) ruutuja samalla kertaa näkyvillä Esimerkiksi sähköpostiohjelman kansiot, tulleet postit ja yksi viesteistä Myös uusia ratkaisuja ikkunoiden esittämiseen ja käsittelyyn Useinkaan käyttäjä ei ole kiinnostunut ikkunasta sinänsä vaan sen sisällöstä. Ikkuna tarjoaa raamit, joissa sisältöä voidaan tarkastella 73 Saila.Ovaska@uta.fi 36