hyperteksti navigaation suunnittelu - tampereen · pdf filehyperteksti navigaation suunnittelu...

Käyttöliittymien perusteet 30.11.2011

[email protected] 1

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

1

Hyperteksti Navigaation suunnittelu

Saila Ovaska

Informaatiotieteiden yksikkö

Tampereen yliopisto


2

Tässä kalvosetissä

• Hyperteksti ja hypermedia

• Navigaation suunnittelu– Keskeisimmät periaatteet

• Suunnittelumalleja verkkosivuille

• Navigoinnin helpottaminen


[email protected] 2


3

Mitä on hyperteksti ja hypermedia?

• Perusidea:– solmuja (joissa tekstisisältöä)– ja linkkejä, jotka yhdistävät solmuja– Solmuja kutsutaan eri tavoin eri järjestelmissä:

• Sivuja, kortteja, kehyksiä, …

• Hypermedia = tekstisolmuja + muita mediatyyppejä

– Linkitys eri mediatyyppien välillä voi olla haaste toteuttaa– mutta myös käyttää

• Esim. Linkki voidaan sijoittaa kuvaan tai graafiseenelementtiin, mutta mistä käyttäjä tietää että siinä on linkki? Esimerkiksi: kuinka monta eri paikkaan vievää linkkiä on sivulla http://www.eyeball-design.com/


4

Hypertekstin historia

• Vanha idea– Vannevar Bush, 1945: Memex – visio hypertekstistä– Douglas Engelbart, NLS-järjestelmä, 1960-luvun alku– Theodore Nelson, 1960-luku: termi ”hypertext”

• Laajempi leviäminen 1980-luvulla– Omia hypertekstijärjestelmiä: – Hypercard-pinot (Macintosh)– Hyperties (PC)

• World Wide Web ideoitiin 1989-1990– 1990-luvulla räjähdysmäinen kasvu – 2005 ”Web 2.0”

http://oreilly.com/web2/archive/what-is-web-20.html


[email protected] 3


5

Memex, 1945

Vannevar Bush

http://www.theatlantic.com/doc/194507/bush, http://www.acmi.net.au/AIC/BUSH_BERRNIER.html

• Visio hypertekstistä– Vannevar Bush: ”As we may think”– Suuri tietosäiliö, jossa dokumentit linkitettyjä toisiinsa


6

Memex-skenaario (Bush, 1945)

• “The owner of the memex, let us say, is interested in the origin and properties of the bow and arrow. Specifically he is studying why the short Turkish bow was apparently superior to the English long bow in the skirmishes of the Crusades. He has dozens of possibly pertinent books and articles in his memex.

• First he runs through an encyclopedia, finds an interesting but sketchy article, leaves it projected. Next, in a history, he finds another pertinent item, and ties the two together. Thus he goes, building a trail of many items. Occasionally he inserts a comment of his own, either linking it into the main trail or joining it by a side trail to a particular item.

• When it becomes evident that the elastic properties of available materials had a great deal to do with the bow, he branches off on a side trail which takes him through textbooks on elasticity and tables of physical constants. He inserts a page of longhand analysis of his own. Thus he builds a trail of his interest through the maze of materials available to him.”


[email protected] 4


7

Memex-skenaario (Bush, 1945)

• “And his trails do not fade. Several years later, his talk with a friend turns to the queer ways in which a people resist innovations, even of vital interest. He has an example, in the fact that the outraged Europeans still failed to adopt the Turkish bow. In fact he has a trail on it. A touch brings up the code book. Tapping a few keys projects the head of the trail. A lever runs through it at will, stopping at interesting items, going off on side excursions. It is an interesting trail,pertinent to the discussion. So he sets a reproducer in action, photographs the whole trail out, and passes it to his friend for insertion in his own memex, there to be linked into the more general trail.”


8

Hyperteksti ja hypermedia

• Hyperteksti– Theodor (Ted) Holm Nelson

1960-luku

• Xanadu-projekti (1960--) jaXanaduSpace 3D http://xanadu.com/

• non-sequential writing

HT’07 keynotehttp://xanadu.com/XanaduSpace/btf.htm


[email protected] 5


9

Hypertekstin määritelmä (1965)

• Theodor Holm Nelson kuvasi hypertekstiä seuraavasti:– “Let me introduce the word ”hypertext” to mean a body of

written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper. It may contain summaries, or maps of its contents and their interrelations; it may contain annotations, additions and footnotes from scholars who have examined it.

– Let me suggest that such an object and system, properly designed and administered, could have great potential for education, increasing the student's range of choices, his sense of freedom, his motivation, and his intellectual grasp. Such a system could grow indefinitely, gradually including more and more of the world's written knowledge.”

Theodor H. Nelson, Complex information processing: a file structure for the complex, the changing and the indeterminate. Proc. ACM’65. [ACM DOI]http://dx.doi.org/10.1145/800197.806036


10

Hypertekstisolmun perusmalli 1: kortti

Lähde: Jakob Nielsen, Two Basic Hypertext Presentation Modelshttp://www.useit.com/alertbox/hypertextmodels.html

- Solmuilla on vakiokokoja asettelu

- koko solmun sisältö kerralla näkyvillä

- rajoittaa solmussa olevan tiedon määrää

-käyttäjän on liikuttava solmusta toiseen

- navigointiin tarjotaan apua, mm. historia

HyperCard – pino koostuu vakiomuotoisista korteista


[email protected] 6


11

Hypertekstisolmun perusmalli 2: vieritysikkuna

-Vieritysikkunassa solmu voi sisältääenemmän tietoa kuin on kerralla näkyvissä

-Käyttäjä liikkuu solmussa vierittämälläikkunaa

-Ei kiinteääsivukokoa

-Linkitys eteenpäin vaihtelevista kohdista

Lähde: Jakob Nielsen, Two Basic Hypertext Presentation Modelshttp://www.useit.com/alertbox/hypertextmodels.html


12

Hajautetun hypermedian ongelmia

• Ongelmina mm.– Selainten ja selainversioiden väliset eroavaisuudet– Laitekirjo, joilla kaikilla voidaan haluta selata verkkosivuja– Medioiden integrointi osaksi sisältöä

• Mm. videokoodekkien runsaus!• Selainlaajennosten (plug-in) tarve

• Sisällön hallinnan ongelmia– Linkkien yksisuuntaisuus– Linkkien ylläpito (linkrot eli kuolleet linkit;

http://www.useit.com/alertbox/980614.html)

• … vai World Wide Wait?– Web-palvelin vs. käyttäjän oma kone– Verkkosivun haun kestoon vaikuttaa sivun raskaus ja verkkoyhteyteen

liittyvät (käyttäjälle näkymättömät) ominaisuudet


[email protected] 7


13

Verkkosivun haun kesto:Kaistanleveys, verkkoviive ja sen vaihtelu

• Kaistanleveys (bandwidth) vaihtelee paljon– Huomioi sivun raskaus, erityisesti grafiikka– Vaihtelu (jitter) johtuu kuormituksen vaihtelusta

• Viive (latency)– Mitä palautetta käyttäjä saa haun kestäessä?

lähettää

vastaanottaa

aika

Kaistanleveyspaljonko kerralla liikkuu

Viivekauanko kestää

vaihtelumiten vakiona siirtonopeus pysyy?

Kuvan lähde: http://www.hcibook.com/e3-docs/slides/ppt/e3-chap-21.ppt

Viime aikojen kehitys- AJAX- pilviteknologiatOsa sisällöstä valmiiksikäyttäjän koneella tainopealla palvelimella

palvelin

Käyttäjänkone


14

Verkkopalveluissa keskeistä

Lähde: Jesse J. Garrett, The Elements of User Experience. http://www.jjg.net/elements/

On the software side we are mainly concerned with tasks –the steps involved in a process and how people think about completing them. Here, we consider the site as a tool or set of tools that the user employs to accomplish one or more tasks.

On the hypertext side, our concern is information – what information the site offers and what it means to our users. Hypertext is about creating an information space that users can move through.‐ Jesse James Garrett


[email protected] 8


15

The Elements of User Experience

Jesse J. Garretthttp://www.jjg.net/elements/pdf/elements.pdf


16

”Lost in hyperspace”

• Hypermedian vaarana on että käyttäjä hukkuudokumenttiin

• Kaksi toisiinsa liittyvää ongelmaa– Sisältö ja käyttäjän kognition tuki (tuki sille että hallitsee

koko sisällön): ongelmana tiedon sirpaleisuus, kokonaisuutta on vaikea hahmottaa eikä siitä muodostu selkeäämentaalimallia

– Rakenne ja navigaatio: missä olen?


[email protected] 9


17

Navigaation suunnittelu

• Navigaatioratkaisut kertovat sivuston sisällöstä ja rakenteesta– navigaatio on sivuston “sisällysluettelo”– navigaatiovalikot kertovat toiminnoista – mitä voi tehdä

• Navigaatiossa käytetty terminologia (kategoriat, linkin nimet jne.) keskeistä– ymmärrettäviä termejä käyttäjille/kohderyhmälle– yksiselitteisiä ja selkeästi toisistaan erottuvia

• linkin/navigaatiopainikkeen on kerrottava mitä sen takaa löytyy, sillä se on usein kaikki, mitä käyttäjänäkee


18

Navigaation suunnittelu

• Epälineaarisuus: sovelluksen tekijä ei voi tietää, mitäkautta solmuun on tultu– Navigaation on autettava käyttäjää hahmottamaan, missä

hän on

• Navigaation/linkkien on hyvä kertoa käyttäjälle missäollaan ja mahdollisesti missä ollaan oltu– Missä olen: navigointipalkista tulee ilmetä, missä kohtaa

sovellusta käyttäjä on tällä hetkellä– Missä olen ollut: linkkien on hyvä ilmaista onko käyttäjä jo

käynyt niiden tarjoamassa paikassa (linkkien väritys vaihtuu)

• “Leivänmuru”-navigaatio on myös usein hyödyllinen– polku kertoo rakenteesta ja nykyisestä sijainnista siinä– polku auttaa navigoimaan hierarkiarakenteessa erityisesti

rakenteeltaan syvillä sivustoilla


[email protected] 10


19

Sijainnin osoittaminen leivänmurupolku

sijainnin osoittaminen

päänavigaatiossa

ja ali-navigaa-

tiossa

Kuvan lähde: www.terrieri.net


20

Johdonmukaisuus ja standardit

• Käyttäjät odottavat johdonmukaisuutta– Yksittäisiltä sivuilta ja kokonaisuudelta– Ole siis johdonmukainen!

• Verkkosivustoilla muotoutunut epävirallisia standardeja eriaihealueille– Esim. ”Kotisivu” - sivuston ensimmäinen sivu.

• Kunnioita olemassa olevia konventioita, jos sellaisia on– Käyttäjä haluaa käyttää sivustoa päämääränsä saavuttamiseen,

ei opetella uutta tapaa navigoida

http://usability.gov/guidelines/index.html




21

Kultainen sääntö

Mistä tulin? Missä olen? Minne voin edetä?

• Hypermedian ”retoriikka”: käyttäjän tiedettävä miksi linkkiä kannattaisi seurata, ja kohdesolmusta on nähtävä, miten se liittyy lähtösolmuun– Rhetorics of departure– Rhetorics of arrival


22

Toinen kultainen sääntö

• Sisältö on syy, miksi käyttäjä on sivulla– Sisällön tarkoitus ja ydin viestittävä käyttäjälle tehokkaasti– Sivun visuaalinen rakenne tärkeää (mm. sisällön jaottelu,

otsikoiden erottuminen, …)

Mistä tulin? Missä olen? Minne voin edetä?

Mitä täällä on?




23

Navigaatiopalkit ovat valikoita

• Navigaatiopalkkien suunnittelussa pätee valikkosuunnittelun perusperiaatteet– Organisointi (tasot, lukumäärä, ryhmittely, järjestys)– Nimeäminen– Valinnan (eli nykysijainnin) osoittaminen

• Käyttäjän vuorovaikutus valikon kanssa– vrt. viikkoharjoitus 11

• Dynaamiset valikot vs. kaikki näkyvillä erikseen avaamatta valikkoa

• Hierarkkiset valikot (valikkoalkiosta avautuu uusi hierarkiataso)• ”Megavalikot”

– kuinka niitä selataan ja niistä valitaan


24

Suunnittelumalleja navigaatioon

• Welie: esimerkkejä– Leivänmurupolku– Fly-out menu– Directory navigation– Accordion– Minesweeping– Doormat navigation– Teaser menu– …

Kuvien lähde: http://www.welie.com/patterns/

Teaser menu

Doormat navigation

Accordion menu




25

Navigaation rinnalle haku

50% kävijöistä navigoi itse, muut löytävät perille hakua käyttäen…

Kuvien lähde:http://webstyleguide.com/wsg3/4-interface-design/2-navigation.html


26

Lisätietoa verkkopalveluiden suunnittelusta

• Lynch & Horton: Web style guide - Basic design principles for creating web sites– http://webstyleguide.com/wsg3/

• Usability.gov-sivusto ja sieltä saatavilla oleva kirja: The Research-Based Web Design & Usability Guidelines – http://usability.gov/guidelines/index.html

• Erilaisia blogeja tms. paljon– Nielsenin www-suunnittelun ohjelistoja

• http://www.useit.com/alertbox/




27

IDEOITA NAVIGOINNIN HELPOTTAMISEKSI


28

• Usean vaihtoehtoisen navigointitavan tarjoaminen

• Linkitystapojen kehittäminen– Tekstinä tai graafisesti (esim. pienoiskuva, thumbnail)

• Navigointihistorian ylläpito muistin tueksi– Samassa istunnossa ja eri aikoina

• Opastettu navigaatio

• Sosiaalinen navigointi

Navigoinnin helpottaminen




29

Linkkien suunnittelusta

• Linkissä voisi antaa paljon tietoa käyttäjälle• yleensä kerrotaan vain kohteena oleva sivu…

– Sivun tekijä– Sivun ikä– Linkit voisivat itsekin olla eri tyyppisiä

• Esim. Moodlessa linkin kuvake kertoo onko PDF-muotoinen doku• Linkin seurantakertojen määrä (sosiaalinen navigointi)

• Linkkien ”esikatselu”– Tarjoaa tietoa kohteesta ennen kuin käyttäjä poistuu

nykyisestä kontekstistaan– Auttaa käyttäjää valitsemaan, mitä linkkiä kannattaisi

seurata


30

Linkityksen kehittäminen:ennakkotietoa kohteesta

• Esimerkki: Fluid links -idea

• Gloss-vihje tarjoaa käyttäjälleennakkotietoa kohteesta, jonne linkkivie, ennen linkin seuraamista– Voi vähentää tarvetta seurata linkkiä– Vaatii kuitenkin sisällön tuottamista

vihjetietojen generoimista varten

Lähteet: http://www2.parc.com/istl/projects/fluid/http://www.open-video.org/details.php?videoid=4975




31

Erilaisia ”esikatselu-tiivistelmiä”

Linkin kohdesivu

Snippet: ”tiivistelmä”hakutuloksesta


32

Hakukoneen tulossivujen esikatselu(pienoiskuva, thumbnail)




33

Summary thumbnails-idea pienille näytöille

• Suurelle näytölle suunniteltujen verkkosivujen katselu on vaikeaa mobiililaitteella– Tavallisten thumbnail-tietojen

ongelmana liian pieni teksti

• Summary thumbnail– Vähemmän tekstiä, mutta

luettavan kokoisena– Säilyttää alkuperäisen layoutin

(sivun tunnistettavuus)– Zoomaamalla näkyviin

alkuperäinen lyhentämätön sivu

http://patrickbaudisch.com/projects/summarythumbnail/index.htmlLam & Baudisch (2005) Summary thumbnails: readable overviews for small screen web browsers. Proc. of CHI’05.


34


• Linkityksen kehittäminen

• Navigointihistorian ylläpito muistin tueksi– Samassa istunnossa ja eri aikoina





35

Navigointihistoria: samassa istunnossa

Monia avoimia ikkunoita tai välilehtiä: Takaisin-painike jaavautuva lista:

URL-osoitteen automaattinen täydennys:


36

Entä myöhemmissä istunnoissa?

URL-osoitteet talteeneri dokumenttiin:

Historialistat:Kirjanmerkit: Haku:

Social bookmarking esim. Del.icio.ushttp://www.youtube.com/watch?v=HeBmvDpVbWc




37

Mitä keinoja käytetään?

94% carry out web research tasks either “very often” (50%) or “sometimes” (44%)

Popular:1. return via search2. additional bookmarks3. return via URL entry

Neutral:4. use History tool5. write URL on paper

Unpopular:6. write queries on paper7. self-emailed URL's9. URL's saved in a document

0

5

10

15

20

25

30

1 2 3 4 5 6 7 8

very often sometimes never rarely

Natalie Jhaveri and Kari-Jouko Räihä, The advantages of a cross-session web workspace. Proc. CHI’2005.

Kyselytutkimus, 2005 (n=34)


38

Session Highlights -työkalu

Lähteet: Natalie Jhaveri and Kari-Jouko Räihä, The advantages of a cross-session web workspace. Proc. CHI’2005.http://www.cs.uta.fi/research/theses/masters/Jhaveri_Natalie.pdf




39

Sittemmin selain tukee myös näitä…

Google Chrome: käydyimmät

Firefox: Avoinna olevien välilehtientallennus seuraavaan istuntoon

Firefox: mukautuva osoitepalkki


40



• Navigointihistorian ylläpito muistin tueksi






41

Opastettu navigaatio

• Avustaja auttaa käyttäjäänavigoimaan sisällössä– Kysymys-vastaus dialogit

• Kuten Ikean Anna…mutta Anna ei ehdottele mitään

• Esimerkki aktiivisista oppaistaEncyclopedia Americana - Guides– Kullakin oppaalla oma näkökulma

( ja polku aineistossa)– Opas linkittää eri mediat toisiinsa– Oppaina intiaanipäällikkö,

uudisraivaajanainen, eräopas• sekä järjestelmän käyttöön tarkoitettu opas

• ja mahdollisuus tehdä (esim. opetustarkoituksissa) omia oppaita

– Tuki sekä selailulle että määrätietoiselle haulle


42



• Navigointihistorian ylläpito muistin tueksi


• Sosiaalinen navigointi





43

Sosiaalinen navigointi

• Navigointi perustuen ”muiden vaeltajien tallaamaan polkuun”– Toiset ihmiset muokkaavat informaatioympäristöä ja jättävät

sinne jälkensä• Tietoisesti (esimerkiksi arvioidessaan jotain)• Tietämättään (esimerkiksi sivun kävijämäärän laskuri)

• Sosiaalinen navigointi on– Dynaamista: polku metsässä, muokkaantuu kulkijoiden mukaan vs.

kivetty katu kaupungissa– Personoitua: neuvon kysyminen infotiskin oppaalta vs. opaskyltin

lukeminen vs. opiskelijavirran seuraaminen suosittuun kuppilaan

• Suosittelujärjestelmät ja käyttötilastot– Millaisia arvosteluja tästä tuotteesta / palvelusta on kirjoitettu?– Ihmiset, jotka pitivät X:stä pitivät myös Y:stä

• Ennuste pidänkö minä– Esimerkkejä: Amazon, TripAdvisor, LastFM, …

Dieberger et al. (2000) Social navigation: techniques for building more usable systems. interactions. ACM DOI


44

Esimerkki: Amazon




45

Tagit

Tagit =Käyttäjän antamiamääritesanoja

Kuvan lähde: http://en.wikipedia.org/wiki/Tag_cloud


46

LOPUKSI: SAAVUTETTAVUUSYHTEENVETO




47

Verkkopalveluiden saavutettavuus(accessibility)

• Saavutettavuus (eli esteettömyys): erilaiset käyttäjät voivat käyttää palvelua– Erilaiset vammaisryhmät: näkövammaiset,

kuulovammaiset, kognitiivisista vaikeuksista tai motorisista ongelmista kärsivät ihmiset

– Lapset, ikääntyneet, pohjoisen Suomen asukkaat, …– Erilaisten laitteiden käyttäjät (esim. mobiililaitteet)

• Suomessa ei toistaiseksi lainsäädäntöä– Julkisille palveluille ohjeistus– Vrt. USAn ”Section508”

http://www.section508.gov/

• Tasa-arvoinen tietoyhteiskunta?


48

Saavutettavuusohjeita

• WAI (Web Accessibility Initiative)– http://www.w3.org/WAI/

• WCAG (Web content accessibility guidelines) 2.0– http://www.w3.org/TR/WCAG/

• Versio 2.0 suomennettu – http://www.w3.org/Translations/WCAG20-fi/

• Muita resursseja– Esimerkiksi näkövammaisten liiton ohjeet

http://www.nkl.fi/fi/etusivu/tietoa/esteettomyys/tiedons

– TIEKE http://www.tieke.fi/julkaisut/oppaat_yrityksille/esteettomyysopas/

– Automaattiset testaustyökalut, ks.http://www.w3.org/WAI/eval/Overview.html




49

Lisätään metatietoa:semanttinen verkko

• "The Semantic Web is an extension of the currentweb in which information is given well-definedmeaning, better enabling computers and peopleto work in cooperation."

-- Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001http://www.w3.org/2001/sw/

• Lisätietoa http://www.w3.org/standards/semanticweb/


50

Yhteenveto: hypermedian haasteet

• Käyttäjän kannalta hypermedian ongelmana– Navigoinnin vaikeus, eksyminen – Uusien medioiden haaste: sisältö hukkuu mediaghettoon

• Suunnittelijan kannalta ongelmana – Rakenteen suunnittelu käyttäjän tarpeiden mukaiseksi – Miten esitys tulisi jäsentää? – Erilaiset navigointitarpeet huomioon – Viihdyttämistavoite vai ...?

• Verkkomediassa lisäksi ongelmana – Verkon hitaus – Selainkohtaiset ja näyttökohtaiset oletukset– Selainlaajennosten tarve– Kokonaisuus ei ole suunnittelijan omassa hallinnassa

hyperteksti navigaation suunnittelu - tampereen · pdf filehyperteksti navigaation suunnittelu...

Documents