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 osoitinta eli kursoria, jolla valitaan ja 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
ja Windows 8 http://toastytech.com/guis/win8.html 15 Ulkonäkö 16 Saila.Ovaska@uta.fi 8
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 Ns. Aqua suunnitteluohjeisto Vuorovaikutus: Mac OS 8.5ssä oli seitsemän tapaa hallita ikkunoita tavoitteeksi ikkunoinnin yksinkertaistaminen http://toastytech.com/guis/guitimeline.html 17 Vista & Windows 7: ikkunoiden Glass-ulkonäkö Standardi-ikkunoilla läpinäkyvät kehykset Joskus kontrollit sijoitetaan kehykseen 18 Saila.Ovaska@uta.fi 9
Maksimoidulla ikkunalla on erilainen ulkonäkö. ja mukaan on tullut ikkunoita, joita ei raamiteta. Windows desktop gadgets 19 Pääikkunat, ali-ikkunat Modaalidialogin käsite 20 Saila.Ovaska@uta.fi 10
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ä http://msdn.microsoft.com/en-us/library/windows/desktop/ff381403%28v=vs.85%29.aspx 21 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 22 Saila.Ovaska@uta.fi 11
Ali-ikkunan aukeaminen Pääikkunan valikko Valikosta avautunut dialogi-ikkuna 23 Tuttuja dialogeja 24 Saila.Ovaska@uta.fi 12
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 dialog vs. modeless dialog Anna esimerkki moodittomasta dialogista! 25 Esimerkiksi Macintoshissa: [Apple HIG Ch. 7] (OSXHIG on muuttunut, 23.7.2012-versiossa ei ole lukujen numerointia! tätä asiaa löytyy s. 168). 26 Saila.Ovaska@uta.fi 13
Macintosh OS X Sheet Lakana [Apple HIG] 27 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. 28 Saila.Ovaska@uta.fi 14
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. 29 Ikkunoihin liittyviä termejä [UXGuide, glossary]: parent window The container of child windows (such as controls or panes). child window A window, such as a control or pane, that is contained completely within another window, referred to as the parent window. owner window A window from which an owned window originates. Appears beneath the owned window in Z order. owned window A secondary window used to perform an auxiliary task. It is not a top-level window (so it isn't displayed on the taskbar); rather, it is "owned" by its owner window. For example, most dialog boxes are owned windows. Z order The layered relationship of windows on the display. Kuvan lähteenä: Learn to program for Windows in C++ instructions What is a window: http://msdn.microsoft.com/en-us/library/windows/desktop/ff381403%28v=vs.85%29.aspx 30 Saila.Ovaska@uta.fi 15
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) 31 Ikkunan osia 32 Saila.Ovaska@uta.fi 16
Windows-pääikkunan osia otsikkorivi (title bar Valikkorivi pienennyssuurennus- sulkemispainike vieritys- ruutu (scroll box) Pysty vierityspalkki Tehtäväruutu (task pane) 33 Ikkunoita on monenlaisia [WindowsUserExperience] [OSXHIG] 34 Saila.Ovaska@uta.fi 17
Ikkunoita: Windows 2000 Mistä erottaa pääikkunan ja ali-ikkunan? [WindowsUserExperience] 35 Monenlaisia 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 36 Saila.Ovaska@uta.fi 18
Microsoft Windows: suosituksia [vanha Windows User Experience] look and feel 37 Ikkunoita: Macintosh OS X kun dokumentissa on tallentamattomia muutoksia Proxy-kuvakkeesta esim. raahaus mailin liitteeksi [Apple HIG] http://www.apple.com/macosx/ 38 Saila.Ovaska@uta.fi 19
Uutena: Scope bar Scroller (ei enää vierityspalkkia) Macintosh OS X ikkunan osat [OSXHIGuidelines] huomaa: pääikkunassa ei ole valikkoriviä. Missä Macissa on valikko? 39 valikkorivi tällä hetkellä käytössä Finder Dock vrt. Windows tehtäväpalkki taskbar [Apple HIG] Saila.Ovaska@uta.fi 20
Vierityspalkin osia [WindowsUserExperience, Windows XP] [OSXHIG, 2011] 2012: [OSXHI Guidelines s. 173] Vierityspalkki ei ole oletusarvoisesti esillä 41 Windows 7 Valintanauha (Ribbon) Perusvalikoiden ja -työkalupalkkien uusi ilme Tarkemmin valikoiden yhteydessä [UXGuide] 42 Saila.Ovaska@uta.fi 21
Ikkunatyyppejä Dialog box Keskusteluikkuna (KÄLIn suositus) Valintaikkuna (Windowssuomennos) Viestiruutu (Atk-sanakirja) Message box Viestiruutu, viesti-ikkuna tai sanomaruutu Palette window / panel Valikoimaikkuna (Windows-suomennos) Paletti Property sheet (Windows) / Inspector window (Mac) Ominaisuusikkuna A transparent panel [Apple HIG] Inspector window 43 Windows 7: Property windows Asettelu pystyyn tai vaakaan 44 Saila.Ovaska@uta.fi 22
Mac OSX: Preferences window [OSXHI Guidelines p. 221] Pane selectors 45 Mac OS: Tab View [OSXHI Guidelines s. 297] kutsutaan nimellä tab - Sisältö-alue pane - Huomaa harmaa reunus Huomaa: ei OK- eikä Cancel-painikkeita. Miten ikkunat suljetaan? Milloin muutokset astuvat voimaan? 46 Saila.Ovaska@uta.fi 23
Tabbed Dialog vs. tabit muissa sovelluksissa Taustalla kansion välilehtien metafora Tarvitaanko painikkeita kuten OK? Jos dialogi, tarvitaan painikkeet, selkeyden vuoksi Verkkosivuilla joskus välilehtien näköisiä navigointielementtejä, esim Amazon.com Selainohjelmassa (e.g., Firefox) Jokainen välilehti on oma sessionsa, eikä niiden välillä ole loogisia sidoksia kuten dialogissa (jossa kaikki valinnat eri välilehdillä hyväksytään/hylätään poistuttaessa) Excel-taulukkolaskennassa myös välilehtiä, joihin voi kaavoissa viitata välilehti metafora voi tarkoittaa aika erilaisia asioita käyttöliittymissä. 47 Vieritys 48 Saila.Ovaska@uta.fi 24
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? 49 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 50 Saila.Ovaska@uta.fi 25
Miten palautetta voisi lisätä? 51 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. 52 Saila.Ovaska@uta.fi 26
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? 53 Vierityksen tehostaminen Tuplanuolilla sivu kerrallaan selaaminen Microsoft Word: vierityspalkin yhteydessä erilaisia dokumentin selaustapoja piilotettuina Uudemmissa Wordeissa selaaminen kuva kuvalta tai taulukko taulukolta jne. 54 Saila.Ovaska@uta.fi 27
Ikkunoinnin erikoistapauksia 55 Ikkunan jako ruutuihin pane = ruutu [UXGuide] [UXGuide] 56 Saila.Ovaska@uta.fi 28
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] 57 Ikkunan jako ruutuihin Javassa Nested split panes, Java Look and Feel Design Guidelines, 2005. Sun Microsystems. Kirja saatavilla sivulta http://www.ashcavai.com/jlfdg05.pdf 58 Saila.Ovaska@uta.fi 29
Ei näkyviä kehyksiä Gadgets Vistassa Vrt. Macissa Dashboard widgets 59 Työpöydän pienoisohjelmat normaalitilassa vs. asetuksia muutettaessa [UXGuide] 60 Saila.Ovaska@uta.fi 30
OSXHI Guidelines: ikkunan maksimointi [Mac OSXHI Guidelines, p. 14] auttaa keskittymään 61 Ikkunoiden hallinta 62 Saila.Ovaska@uta.fi 31
Mietittävää Milloin ikkuna on aktiivinen? 63 KDE Window Behavior Settings 64 Saila.Ovaska@uta.fi 32
Mietittävää Milloin ikkuna on aktiivinen? Miten voi liikkua ikkunoiden välillä helposti? Alt + tab [UXGuide] 65 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] 66 Saila.Ovaska@uta.fi 33
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 67 Macintosh OS X Dock Stacks Viimeiset lataukset ja dokumentit ponnahtavat viuhkaksi tai ruudukoksi http://images.appleinsider.com/leopard-preview-dock-12.png 68 Saila.Ovaska@uta.fi 34
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) 69 Monta virtuaalista työpöytää Työpöydät (ja Dashboard) saatavilla esim. Exposé-näkymässä Ks. Mission Control [Apple HIG] 70 Saila.Ovaska@uta.fi 35
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 71 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] 72 Saila.Ovaska@uta.fi 36
Multiple Document Interface [WindowsUserExperience] 73 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] 74 Saila.Ovaska@uta.fi 37
Uusia ikkunointi-ideoita 75 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. 76 Saila.Ovaska@uta.fi 38
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 77 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 78 Saila.Ovaska@uta.fi 39