käyttöliittymien perusteet 26.10 - uta.fi · käyttöliittymien perusteet 26.10.2011...

Käyttöliittymien perusteet 26.10.2011

[email protected] 1

TAUCHI – Tampere Unit for Computer-Human InteractionTAUCHI – Tampere Unit for Computer-Human Interaction

1

WIMP-käyttöliittymät: Ikkunointi

Saila Ovaska

Informaatiotieteiden yksikkö

Tampereen yliopisto


2

Tarjolla tänään

• WIMP – Windows, Icons, Menus, Pointing Device– Mikä on ikkuna?– Ikkunan osat– Navigointi ikkunoiden välillä, ikkunanhallinta

• Esimerkkejä erilaisista ikkunointijärjestelmistä


3

WIMP-käyttöliittymien historiaa


4

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 GatesMicrosoft 1975

Steve Wozniak & Steve JobsApple 1975

Xerox PARCPalo Alto ResearchCenterfirst Alto 1972-1973

The best way to predict the future is to invent it.


5

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


6

Historiaa lyhyesti…

• WIMP-käyttöliittymienkaupallinen 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

Kuvan lähde: www.digibarn.com http://www.digibarn.com/friends/curbow/star/retrospect/index.html

http://www.youtube.com/watch?v=Cn4vC80Pv6Q


[email protected] 2


7

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

Kuvan lähde: www.digibarn.com http://www.digibarn.com/friends/curbow/star/retrospect/index.html

http://www.youtube.com/watch?v=Cn4vC80Pv6Q


8

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


9

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


10

Windows 1.01 - 1985

Ei vapaasti liikuteltavia ikkunoita, vaan ikkunat aseteltiin vierekkäin (tiled).

http://toastytech.com/guis/guitimeline.html


11

Windows 2.03 e

Liikuteltavat ikkunat ja ikkunoiden hallintatyökaluja.



12

Windows 95



[email protected] 3


13

http://www.xwinman.org/

Kuvassa: KDE 3.3 http://www.kde.org/

http://en.wikipedia.org/wiki/X_Window_System


14

… ja uusia versioita: KDE 4.7

http://www.kde.org/announcements/4.7/KDE 4.7. Plasma and applications


15

Ulkonäkö


16

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


17

Vista & Windows 7: ikkunoiden Glass-ulkonäkö

Standardi-ikkunoillaläpinäkyvät kehykset

Joskus kontrollit sijoitetaan kehykseen


18

Maksimoidulla ikkunalla on erilainen ulkonäkö.

… ja mukaan on tullut ikkunoita, joita ei

raamiteta.Windows desktop gadgets


[email protected] 4


19

Pääikkunat, ali-ikkunatModaalidialogin käsite


20

Ikkuna (window)

• 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ä

Ikkuna (window) = Näyttöpinnan osa, jokatarjoaa käyttäjälle liittymäntietojärjestelmään tai sen toimintoon.‐ ATK‐sanakirja


21

Ikkunointi

• Ohjelma aukeaapää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

Pääikkunan valikko

Valikosta avautunut dialogi


23

Tuttuja dialogeja


24

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!


[email protected] 5


26

Macintosh OS X Sheet – ”Lakana”

[Apple HIG]


27

Aktiiviset ikkunat Macissa

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.

[Apple HIG]


28

Ikkunoiden hallinta Mac OSX

• 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.

[Apple HIG]


29

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)


30

Ikkunan osia


31

Windows-pääikkunan osia

Pystyvieritys-palkki

Tehtävä-ruutu(task pane)

Valikko-rivi

otsikkorivi (title bar

sulkemis-painike

pienennys-suurennus-

vieritys-ruutu(scroll box)


[email protected] 6


32

Ikkunoita onmonenlaisia

[WindowsUserExperience]

[Apple HIG]


33

Ikkunoita: Windows 2000

Mistäerottaapääikkunan jaali-ikkunan?



34

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


35

Microsoft Windows: suosituksia

[vanha Windows User Experience]


36

Ikkunoita: Macintosh OS X

http://www.apple.com/macosx/

kun dokumentissa on tallentamattomiamuutoksia

Proxy-kuvakkeestaesim. raahausmailin liitteeksi

huomaa: pääikkunassa ei ole valikkoriviä.Missä Macissa on valikko?

[Apple HIG]

valikkorivitällä hetkellä käytössäFinder

Dockvrt. Windows tehtäväpalkki taskbar

[Apple HIG]


[email protected] 7


38

Windows 7 Valintanauha (Ribbon)

• Perusvalikoiden ja -työkalupalkkien uudelleensuunnittelu– Tarkemmin valikoiden yhteydessä

[UXGuide]


39

Ikkunatyyppejä

Dialog box Keskusteluikkuna (KÄLIn

suositus) Valintaikkuna (Windows-

suomennos) Viestiruutu (Atk-sanakirja)

Message box Viestiruutu, viesti-ikkuna tai

sanomaruutu

Palette window / panelValikoimaikkuna (Windows-suomennos)

Property sheet (Windows) / Inspector window (Mac) Ominaisuusikkuna

Inspector window

[Apple HIG]

A transparentpanel


40

Vista: Property windows

Asettelu pystyyn tai vaakaan


41

Mac OSX: Preferences window

Huomaa: ei OK- eikä Cancel-painikkeita. Miten ikkunat suljetaan?Milloin muutokset astuvat voimaan?


42

Vieritys


43

Vierityspalkit

• Scroll bar– Vierityspalkki

• Scroll arrow– Vieritysnuoli

[Apple Human Interface Guidelines]

• Scroll box– Vieritysruutu


[email protected] 8


44

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?


45

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


46

Miten palautetta voisi lisätä?


47

Miten voisi helpommin löytää takaisin?

Alexander et al. (2009). Revisiting read wear: analysis, design and evaluationof a footprints scrollbar. CHI’09. ACM DOI.

Footprints scrollbar- Merkintä automaattista - Käydyn paikan merkki- Thumbnail-pikkukuva- Värikoodaus,”jälki vanhenee”- Vain 10 kpl/dokumentti- Vanhimmat häipyy kokonaanToimiiko se?

jalanjälkikirjanmerkkiTaustalla oleva metafora:


48

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?


49

Vierityksen tehostaminen

• Tuplanuolilla sivu kerrallaan selaaminen

• Microsoft Word: vierityspalkin yhteydessäerilaisia dokumentin selaustapoja ”piilotettuina”

• Uudemmissa Wordeissa selaaminen kuva kuvalta tai taulukko taulukolta jne.


[email protected] 9


50

Ikkunoinnin erikoistapauksia


51

Ikkunan jako ruutuihin

[UXGuide]

[UXGuide]

pane = ruutu


52

Ikkunan jako ruutuihin

vrt. split-operaatio (split = Jaa)ikkunan sisällä

vaakasuora jakopalkki(esim. Excelissä myöspystysuora jakopalkki)

Miten ruudutus ja jakaminen osiin eroavat toisistaan?


[UXGuide]


53

Ikkunan jako ruutuihin Javassa

Nested split panes: http://java.sun.com/products/jlf/ed2/book/HIG.Windows3.html


54

Ei näkyviä kehyksiä

• ”Gadgets” Vistassa Vrt. MacissaDashboardwidgets


55

”Työpöydän pienoisohjelmat”

• ”normaalitilassa” vs.

• asetuksia muutettaessa

[UXGuide]


[email protected] 10


56

Ikkunoiden hallinta


57

Mietittävää…

• Milloin ikkuna on aktiivinen?


58

KDE Window Behavior Settings


59

Mietittävää…

• Milloin ikkuna on aktiivinen?

• Miten voi liikkua ikkunoiden välillä helposti?

Alt + tab

[UXGuide]


60

Windows 7

Tehtäväpalkissa olevista ikkunoistasaa pikkukuvan (thumbnail) näkyviin hiiren kursorilla.

Alt+Tab

Flip 3D ikkunoiden selausWindows logo key+Tab

[UXGuide]


61

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




62

Macintosh OS X

• Dock Stacks– Viimeiset lataukset ja

dokumentit ponnahtavat viuhkaksi tai ruudukoksi

http://images.appleinsider.com/leopard-preview-dock-12.png


63

Useat työpöydät

• KDE:ssa tarjolla neljä virtuaalista työpöytää (virtualdesktops)– 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)


64

Monta virtuaalista työpöytää

Työpöydät (ja Dashboard) saatavilla esim. Exposé-näkymässäKs. ”Mission Control” [Apple HIG]


65

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


66

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



67

Multiple Document Interface





68

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 documentinterface, TDI)

• Single Document Interface, SDI– Kaikki ikkunat erillisiä toisistaan



69

Uusia ikkunointi-ideoita


70

Uusia tuulia...

• Metisse desktop– Välilehdet (tabbed windows)– Kääntyvät (rotating) ikkunat– Kuoriutuvat/taittuvat

(peeling) ikkunat

Beaudouin-Lafon, Novel Interaction Techniquesfor 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.


71

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ääminenkääntyvän ikkunan takapuolelle.

http://www.youtube.com/watch?v=SMWd1FOgr18Kuvan lähde: http://en.wikipedia.org/wiki/Project_Looking_Glass


72

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

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.

University of Toronto, Dynamic Graphics Project


73

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

käyttöliittymien perusteet 26.10 - uta.fi · käyttöliittymien perusteet 26.10.2011...

Documents