Käyttöliittymien perusteet

Transkriptio

1 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 myyty jo 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 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. 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 Kuvan lähde: Saila.Ovaska@uta.fi 1

2 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 Kuvan lähde: 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 Apple Macintosh 1984 Windows Ei vapaasti liikuteltavia ikkunoita, vaan ikkunat aseteltiin vierekkäin (tiled) Windows 2.03 e Windows 95 Liikuteltavat ikkunat ja ikkunoiden hallintatyökaluja Saila.Ovaska@uta.fi 2

3 ja uusia versioita: KDE 4.7 Kuvassa: KDE KDE 4.7. Plasma and applications Ikkunat uudistuvat 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 Vuorovaikutus: Mac OS 8.5ssä oli seitsemän tapaa hallita ikkunoita tavoitteeksi ikkunoinnin yksinkertaistaminen Vista & Windows 7: ikkunoiden Glass-ulkonäkö Maksimoidulla ikkunalla on erilainen ulkonäkö. Standardi-ikkunoilla läpinäkyvät kehykset Joskus kontrollit sijoitetaan kehykseen 17 ja mukaan on tullut ikkunoita, joita ei raamiteta. Windows desktop gadgets 18 Saila.Ovaska@uta.fi 3

4 Ikkuna (window) Ikkuna (window) = Näyttöpinnan osa, joka tarjoaa käyttäjälle liittymän tietojärjestelmään tai sen toimintoon. ATK sanakirja Pääikkunat, ali-ikkunat Modaalidialogin käsite 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ä Ikkunointi Ali-ikkunan aukeaminen 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 Pääikkunan valikko Valikosta avautunut dialogi Tuttuja dialogeja 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! Saila.Ovaska@uta.fi 4

5 Macintosh OS X Sheet Lakana Aktiiviset ikkunat Macissa 26 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 Ikkunoiden hallinta Mac OSX Eriasteisia modaalisia dialogeja Fonts-dialogi on esimerkki moodittomasta dialogista (lapsi-ikkunasta) auki rinnalla eikä estä pääikkunan käyttöä 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. Macintoshissa tunnetaan kaksi modaalidialogin muotoa Document-modal Application-modal Windows-ikkunat Application-modal (System-modal) Windows-pääikkunan osia otsikkorivi (title bar Valikkorivi pienennyssuurennus- sulkemispainike vieritys- ruutu (scroll box) Pysty vierityspalkki Tehtäväruutu (task pane) Ikkunan osia Saila.Ovaska@uta.fi 5

6 Ikkunoita on monenlaisia Ikkunoita: Windows 2000 Mistä erottaa pääikkunan ja ali-ikkunan? [WindowsUserExperience] 32 [WindowsUserExperience] 33 Windowsin ali-ikkunoita Microsoft Windows: suosituksia 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 [vanha Windows User Experience] 35 Ikkunoita: Macintosh OS X valikkorivi tällä hetkellä käytössä Finder kun dokumentissa on tallentamattomia muutoksia huomaa: pääikkunassa ei ole valikkoriviä. Missä Macissa on valikko? Proxy-kuvakkeesta esim. raahaus mailin liitteeksi 36 Dock vrt. Windows tehtäväpalkki taskbar Saila.Ovaska@uta.fi 6

7 Windows 7 Valintanauha (Ribbon) Ikkunatyyppejä Dialog box Keskusteluikkuna (KÄLIn suositus) Valintaikkuna (Windowssuomennos) Viestiruutu (Atk-sanakirja) Message box Viestiruutu, viesti-ikkuna tai sanomaruutu Palette window / panel Valikoimaikkuna (Windowssuomennos) Perusvalikoiden ja -työkalupalkkien uudelleensuunnittelu Tarkemmin valikoiden yhteydessä 38 Property sheet (Windows) / Inspector window (Mac) Ominaisuusikkuna A transparent panel Inspector window 39 Vista: Property windows Mac OSX: Preferences window Asettelu pystyyn tai vaakaan 40 Huomaa: ei OK- eikä Cancel-painikkeita. Miten ikkunat suljetaan? Milloin muutokset astuvat voimaan? 41 Vierityspalkit [Apple Human Interface Guidelines] Vieritys Scroll bar Vierityspalkki Scroll arrow Vieritysnuoli Scroll box Vieritysruutu Saila.Ovaska@uta.fi 7

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 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 46 Alexander et al. (2009). Revisiting read wear: analysis, design and evaluation of a footprints scrollbar. CHI 09. ACM DOI. 47 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 Saila.Ovaska@uta.fi 8

9 Ikkunan jako ruutuihin pane = ruutu Ikkunoinnin erikoistapauksia 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] 52 Nested split panes: 53 Ei näkyviä kehyksiä Työpöydän pienoisohjelmat Gadgets Vistassa Vrt. Macissa Dashboard widgets normaalitilassa vs. asetuksia muutettaessa Saila.Ovaska@uta.fi 9

10 Mietittävää Milloin ikkuna on aktiivinen? Ikkunoiden hallinta KDE Window Behavior Settings Mietittävää Milloin ikkuna on aktiivinen? Miten voi liikkua ikkunoiden välillä helposti? Alt + tab Windows 7 Macintosh OS X Alt+Tab Tehtäväpalkissa olevista ikkunoista saa pikkukuvan (thumbnail) näkyviin hiiren kursorilla. 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 Flip 3D ikkunoiden selaus Windows logo key+tab Saila.Ovaska@uta.fi 10

11 Macintosh OS X Useat työpöydät Dock Stacks Viimeiset lataukset ja dokumentit ponnahtavat viuhkaksi tai ruudukoksi 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) Monta virtuaalista työpöytää Ikkunoiden asettelun termejä Työpöydät (ja Dashboard) saatavilla esim. Exposé-näkymässä Ks. Mission Control Tiled vierekkäiset ikkunat Overlapping päällekkäiset ikkunat Cascading limittäiset ikkunat cascading windows 64 Kuvan lähde: 65 Dokumentti-ikkunoiden hallinta Multiple Document Interface Multiple document interface, MDI Vanhempi-ikkuna (sovellus) ja lapsi-ikkunat (dokumentit) Käyttäjä voi työskennellä useamman dokumentin kanssa yhtä aikaa [WindowsUserExperience] 66 [WindowsUserExperience] 67 Saila.Ovaska@uta.fi 11

12 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 Uusia tuulia... Project Looking glass 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 Ikkunoiden välillä liikkuminen Kiertyvät ikkunat (rolling) Copy-paste päällekkäisten ikkunoiden välillä 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. Chapuis & Roussel. Copy-and Paste Between Overlapping Windows. Proc. CHI Kuvan lähde: 71 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 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 Agarawala & Balakrishnan (2006). Keepin' it Real: Pushing the Desktop Metaphor with Physics, Piles and the Pen. Proceedings of CHI 2006, Saila.Ovaska@uta.fi 12