Tarjolla tänään WIMP-käyttöliittymät: Ikkunointi Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto WIMP Windows, Icons, Menus, Pointing Device Mikä on ikkuna? Ikkunan osat Navigointi ikkunoiden välillä, ikkunanhallinta Esimerkkejä erilaisista ikkunointijärjestelmistä 1 2 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 WIMP-käyttöliittymien historiaa Paul Allen & Bill Gates Microsoft 1975 Steve Wozniak & Steve Jobs Apple 1975 Xerox PARC Palo Alto Research Center first Alto 1972-1973 3 The best way to predict the future is to invent it. 4 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 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 5 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 1
Historiaa lyhyesti Mikä on WIMP? 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 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 Apple Macintosh 1984 Windows 1.01-1985 Ei vapaasti liikuteltavia ikkunoita, vaan ikkunat aseteltiin vierekkäin (tiled). 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 http://toastytech.com/guis/guitimeline.html 10 Windows 2.03 e Windows 95 Liikuteltavat ikkunat ja ikkunoiden hallintatyökaluja. http://toastytech.com/guis/guitimeline.html 11 http://toastytech.com/guis/guitimeline.html 12 Saila.Ovaska@uta.fi 2
http://www.xwinman.org/ ja uusia versioita: KDE 4.7 Kuvassa: KDE 3.3 http://www.kde.org/ http://en.wikipedia.org/wiki/x_window_system http://www.kde.org/announcements/4.7/ KDE 4.7. Plasma and applications 13 14 ja Windows 8 http://toastytech.com/guis/win8.html Ulkonäkö 15 16 Ikkunat uudistuvat Vista & Windows 7: ikkunoiden Glass-ulkonäkö 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 Standardi-ikkunoilla läpinäkyvät kehykset Joskus kontrollit sijoitetaan kehykseen http://toastytech.com/guis/guitimeline.html 17 18 Saila.Ovaska@uta.fi 3
Maksimoidulla ikkunalla on erilainen ulkonäkö. ja mukaan on tullut ikkunoita, joita ei raamiteta. Windows desktop gadgets Pääikkunat, ali-ikkunat Modaalidialogin käsite 19 20 Ikkuna (window) Ikkunointi 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 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 Ali-ikkunan aukeaminen Tuttuja dialogeja Pääikkunan valikko Valikosta avautunut dialogi-ikkuna 23 24 Saila.Ovaska@uta.fi 4
Usein ns. modaalidialogeja Esimerkiksi Macintoshissa: 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 [Apple HIG Ch. 7] (OSXHIG on muuttunut, 23.7.2012-versiossa ei ole lukujen numerointia! tätä asiaa löytyy s. 168). 26 Macintosh OS X Sheet Lakana Aktiiviset ikkunat Macissa [Apple HIG] [Apple HIG] 27 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 Ikkunoiden hallinta Mac OSX Ikkunoihin liittyviä termejä [UXGuide, glossary]: [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 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 5
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) Ikkunan osia 31 32 Windows-pääikkunan osia otsikkorivi (title bar Valikkorivi pienennyssuurennus- sulkemispainike Ikkunoita on monenlaisia vieritys- ruutu (scroll box) Pysty vierityspalkki Tehtäväruutu (task pane) [WindowsUserExperience] [OSXHIG] 33 34 Ikkunoita: Windows 2000 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 Mistä erottaa pääikkunan ja ali-ikkunan? [WindowsUserExperience] 35 36 Saila.Ovaska@uta.fi 6
Microsoft Windows: suosituksia Ikkunoita: Macintosh OS X kun dokumentissa on tallentamattomia muutoksia [vanha Windows User Experience] look and feel Proxy-kuvakkeesta esim. raahaus mailin liitteeksi [Apple HIG] http://www.apple.com/macosx/ 37 38 Uutena: Scope bar Scroller (ei enää vierityspalkkia) Macintosh OS X ikkunan osat [OSXHIGuidelines] valikkorivi tällä hetkellä käytössä Finder huomaa: pääikkunassa ei ole valikkoriviä. Missä Macissa on valikko? 39 Dock vrt. Windows tehtäväpalkki taskbar [Apple HIG] Vierityspalkin osia [WindowsUserExperience, Windows XP] [OSXHIG, 2011] Windows 7 Valintanauha (Ribbon) 2012: [OSXHI Guidelines s. 173] Vierityspalkki ei ole oletusarvoisesti esillä Perusvalikoiden ja -työkalupalkkien uusi ilme Tarkemmin valikoiden yhteydessä 41 42 Saila.Ovaska@uta.fi 7
Ikkunatyyppejä Windows 7: Property windows 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 Asettelu pystyyn tai vaakaan 44 Mac OSX: Preferences window Mac OS: Tab View [OSXHI Guidelines p. 221] Pane selectors [OSXHI Guidelines s. 297] kutsutaan nimellä tab -Sisältö-alue pane - Huomaa harmaa reunus 45 Huomaa: ei OK- eikä Cancel-painikkeita. Miten ikkunat suljetaan? Milloin muutokset astuvat voimaan? 46 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 Vieritys välilehti metafora voi tarkoittaa aika erilaisia asioita käyttöliittymissä. 47 48 Saila.Ovaska@uta.fi 8
Mietittäväksi Vierittimiin liittyviä ongelmia Mihin suuntaan teksti liikkuu vieritettäessä? Miten paljon se liikkuu vierityspalkin eri osista? Vieritysruudusta raahaamalla Vieritysnuolia napauttamalla Miten saa aikaan automaattisen vierityksen? 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 49 50 Miten palautetta voisi lisätä? 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 51 Alexander et al. (2009). Revisiting read wear: analysis, design and evaluation of a footprints scrollbar. CHI 09. ACM DOI. 52 Mietittäväksi Vierityksen tehostaminen 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? Tuplanuolilla sivu kerrallaan selaaminen Microsoft Word: vierityspalkin yhteydessä erilaisia dokumentin selaustapoja piilotettuina Uudemmissa Wordeissa selaaminen kuva kuvalta tai taulukko taulukolta jne. 53 54 Saila.Ovaska@uta.fi 9
Ikkunan jako ruutuihin pane = ruutu Ikkunoinnin erikoistapauksia 55 56 Ikkunan jako ruutuihin Ikkunan jako ruutuihin Javassa Miten ruudutus ja jakaminen osiin eroavat toisistaan? vrt. split-operaatio (split = Jaa) ikkunan sisällä vaakasuora jakopalkki (esim. Excelissä myös pystysuora jakopalkki) [WindowsUserExperience] 57 Nested split panes, Java Look and Feel Design Guidelines, 2005. Sun Microsystems. Kirja saatavilla sivulta http://www.ashcavai.com/jlfdg05.pdf 58 Ei näkyviä kehyksiä Työpöydän pienoisohjelmat Gadgets Vistassa Vrt. Macissa Dashboard widgets normaalitilassa vs. asetuksia muutettaessa 59 60 Saila.Ovaska@uta.fi 10
OSXHI Guidelines: ikkunan maksimointi [Mac OSXHI Guidelines, p. 14] auttaa keskittymään Ikkunoiden hallinta 61 62 Mietittävää KDE Window Behavior Settings Milloin ikkuna on aktiivinen? 63 64 Mietittävää Windows 7 Milloin ikkuna on aktiivinen? Miten voi liikkua ikkunoiden välillä helposti? Alt+Tab Alt + tab Tehtäväpalkissa olevista ikkunoista saa pikkukuvan (thumbnail) näkyviin hiiren kursorilla. 65 Flip 3D ikkunoiden selaus Windows logo key+tab 66 Saila.Ovaska@uta.fi 11
Macintosh OS X 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 Dock Stacks Viimeiset lataukset ja dokumentit ponnahtavat viuhkaksi tai ruudukoksi 67 http://images.appleinsider.com/leopard-preview-dock-12.png 68 Useat työpöydät Monta virtuaalista työpöytää Työpöydät (ja Dashboard) saatavilla esim. Exposé-näkymässä Ks. Mission Control [Apple HIG] 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 70 Ikkunoiden asettelun termejä Dokumentti-ikkunoiden hallinta Tiled vierekkäiset ikkunat Overlapping päällekkäiset ikkunat Cascading limittäiset ikkunat cascading windows Multiple document interface, MDI Vanhempi-ikkuna (sovellus) ja lapsi-ikkunat (dokumentit) Käyttäjä voi työskennellä useamman dokumentin kanssa yhtä aikaa Kuvan lähde: http://www.answers.com/topic/cascading-windows 71 [WindowsUserExperience] 72 Saila.Ovaska@uta.fi 12
Multiple Document Interface 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] 73 [WindowsUserExperience] 74 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/ Uusia ikkunointi-ideoita 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. 75 76 Project Looking glass Ikkunointi yhteenveto 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. 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 http://www.youtube.com/watch?v=smwd1fogr18 Kuvan lähde: http://en.wikipedia.org/wiki/project_looking_glass 77 78 Saila.Ovaska@uta.fi 13