Informationsarkitektur. DM, 16. marts 2016, Børge Kristensen

Transkript

1 Informationsarkitektur DM, 16. marts 2016, Børge Kristensen

2 Program Informationssøgnings-adfærd Kategorisering Navigationsmenuer Navigationssider Tekst og research: Børge Kristensen og Marie Soelberg. Grafik: Marie Soelberg. 2

3 You can t use what you can t find. Peter Morville: Search Patterns (2010), s. 41 3

4 Hvad er IA? 4

5 The structural design of shared information environments. IA Institute: What is IA? 5

6 The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability. IA Institute: What is IA? 6

7 An emerging community of practice focused on bringing principles of design and architecture to the digital landscape. IA Institute: What is IA? 7

8 Tre-cirkel-modellen Formål Brugere Indhold Peter Morville & Louis Rosenfeld: Information Architecture for the World Wide Web ( ) 8

9 Ca. halvdelen af alle usabilityproblemer har med IA at gøre Loop 11: Airline Website Usability: British Airways Soars Ahead! (2010) 9

10 Findbarhed påvirker tilfredshed 60 % af dem, der har svært ved at finde informationen, er tilfredse eller meget tilfredse med indholdet. 90 % af dem, der har nemt ved at finde informationen, er tilfredse eller meget tilfredse med indholdet. Tilfreds Utilfreds Tilfreds Utilfreds Kilde: Copenux 10

11 IA-komponenter Tertiær menu Global navigation Brødkrumme Søgefunktion Page tools Lokal navigation Relateret indhold Indhold 11

12 Informationssøgningsadfærd 12

13 Informationssøgningsadfærd Known item searching Orientering/udforskning Surfing (serendipitet) Selektiv research Grundig research Monitorering Sammenligning Finde igen 13

14 Each user has a different type of information need depending on what he s trying to find and why he s trying to find it. Louis Rosenfeld: Information Needs Analysis (2002), 14

15 Known item searching Jeg ved præcis, hvad jeg leder efter, og hvad det hedder. Louis Rosenfeld: Information Needs Analysis (2002), 15

16 Orientering/udforskning Jeg ved ikke helt, hvad jeg leder efter, men jeg undersøger nogle forskellige muligheder. Louis Rosenfeld: Information Needs Analysis (2002), 16

17 Surfing (serendipitet) Jeg leder ikke efter noget bestemt; jeg klikker bare lidt rundt. Louis Rosenfeld: Information Needs Analysis (2002), 17

18 Selektiv research Jeg skal lige hurtigt vide, hvad det her er for noget. Louis Rosenfeld: Information Needs Analysis (2002), 18

19 Grundig research Jeg vil vide alt om emnet og søger det komplette overblik. Louis Rosenfeld: Information Needs Analysis (2002), 19

20 Monitorering Jeg vil gerne holde øje med, hvordan det her udvikler sig. Donna Spencer: A Practical Guide to Information Architecture (2010), s

21 Sammenligning Jeg vil gerne sammenligne de ting, jeg har udvalgt. Donna Spencer: A Practical Guide to Information Architecture (2010), s

22 Finde igen Jeg har fundet det én gang; nu skal jeg bare finde det igen. Donna Spencer: A Practical Guide to Information Architecture (2010), s

23 Identificér det mest realistiske informationssøgningsadfærdsmønster på udvalgte sider. 23

24 Pause 24

25 Kategorisering 25

26 Kategorisering Efter målgruppe Efter emne Efter opgave Efter genre Alfabetisk Kronologisk Geografisk 26

27

28 Home Services Courses Articles About us Evaluation Writing for the Web SEO Values Information Architecture Usability Web Writing Biography Usability testing Information Architecture Navigation References Relaunch Content Management Web Process Contact Web Strategy Usability Project Planning User Experience Technology Assessment Web Technology Web Governance 28

29 Efter målgruppe 29

30 Efter emne

31 Efter opgave

32 Efter type (genre)

33 Alfabetisk

34 Kronologisk

35 Geografisk

36 Blandet

37 Facetteret navigation

38 Hvilke(t) kategoriseringssystem(er) er anvendt i jeres navigationsmenuer? 38

39 Pause 39

40 Navigation 40

41 Navigation giver adgang til information, viser, hvor man er, viser, hvad sitet handler om (aboutness), reflekterer brandet og påvirker sitets troværdighed. James Kalbach: Designing Web Navigation (2007), s

42 Navigationsdesign 42

43 Navigationsdesign Global menu Lokal menu Tertiær menu Drop down-menu Fly out-menu Mega-drop down Navigation midt på siden Faneblade Relaterede links Links i teksten Brødkrummesti Footer Sitemap Tag cloud 43

44 Global menu

45 Lokal menu

46 Tertiær menu

47 Drop down-menu

48 Fly out-menu

49 Mega-drop down

50 Navigation midt på siden

51 Faneblade

52 Relateret navigation

53 Navigation i teksten

54 Brødkrummesti

55 Footer

56 Sitemap

57 Tag cloud

58 Navngivning 58

59 The best labels: call things by their correct name are consistent use terms that your audience uses are as clear as possible Donna Spencer: A Practical Guide to Information Architecture (2010), s

60 Links er problematiske, når de er Muneo Kitajima, Marilyn H. Blackmon, Peter G. Polson: A Comprehension-based Model of Web Navigation and Its Application to Web Usability Analysis 61

61 3 kriterier for brugernes valg Bogstaveligt sammenfald Objektet kan være eller hedde præcis det, brugeren leder efter. Semantisk similaritet Objektet kan have en vis betydningsmæssig lighed med det, brugeren leder efter. Frekvens Brugeren kan have haft succes med at anvende objektet, eller et tilsvarende objekt, tidligere. Muneo Kitajima, Peter G. Polson and Marilyn H. Blackmon: CoLiDeS and SNIF-ACT 62

62 Rækkefølge 63

63 Det vigtigste/mest populære først

64 Alfabetisk når brugeren kender navnet

65 Nogle gange har menuen sin egen logik Institutioner > Børnehave > Efterskole > Gymnasium Institutioner > Vuggestue > Børnehave > Skole > Skole > Universitet > Vuggestue > Efterskole > Gymnasium > Universitet

66 Navigation på mobil 67

67 Burger-menu 68

68 Burger-menu med ordet Menu 69

69 Hub/akkordeon på forsiden 70

70 Tab-menu (i bunden) 71

71 Gennemfør en guidelineinspektion af navigationsmenuer. 72

72 Pause 73

73 Navigationssider 74

74 Navigationssider Sidetyper Katalog-modellen 75

75 Sidetyper 76

76 Indholdsside

77 Funktionsside

78 Navigationsside

79 Katalog-modellen 80

80 Dårligt udnyttet navigationsside Venstremenuen er lang og uoverskuelig. Blikket falder naturligt midt på siden, men det væsentlige står i periferien i venstrespalten. Der er kun plads til korte ord, men der skal 7-12 ord til, for at brugerne forstår et link. Brugerne er ikke motiverede for at læse, så længe de navigerer. 81

81 82

82 When users are searching for content on a site, each page they encounter must do one of two things. Either the page provides the content they are seeking or it delivers them closer to the page that does. Jared M. Spool: The 8 Types of Navigation Pages (2005), 83

83 As we ve watched users search for their desired content, we ve realized there are patterns to the pages we see. We ve started to catalogue these patterns and have concluded there are essentially 8 types of pages a user can run into, when searching content-rich sites. Jared M. Spool: The 8 Types of Navigation Pages (2005), 84

84 These different page types turned out to be important as we discovered users behave differently as they encounter each one. If the design of a given type doesn t support the user s behavior, then the user is less likely to succeed in finding their target content. Often, pages fail because designers don t realize they were designing for the wrong type. Jared M. Spool: The 8 Types of Navigation Pages (2005), 85

85 5 niveauer (+ søgning) Forside Supersektion Supersektion Sektion Sektion Sektion Galleri Galleri Galleri Galleri Indhold 86

86 Lorem ipsum lacinia fermentum Om kommunen I Kontakt os I Log ind I English Kultur & Fritid I Børn & Unge I Sundhed & Sygdom I Service & Pleje I By & Bolig I Trafik & Veje I Job & Uddannelse I Politik Forside Søg Vestibulum euismod sapien. Lacinia fermentum, sem est blandit eros. Cras lacinia sapien. Lorem ipsum sapien. Lacinia fermentum, sem est blandit. Nyheder 6. juni 2009 Lorem ipsum at varius dolor 6. juni 2009 Lorem ipsum wisi nec lacinia KULTUR & FRITID SUNDHED & SYGDOM OVERSIGT Overskrift Lorem ipsum sapien. Lacinia fermentum, sem est blandit eros. Alt om Kultur & Fritid Overskrift Vestibulum euismod. Lacinia fermentum. Lorem ipsum cras. Alt om Sundhed & Sygdom BØRN & UNGE SERVICE & PLEJE Overskrift Vestibulum euismod sapien. Cras lacinia, lacinia cras. Alt om Børn & Unge Overskrift Cras lacinia sapien. Sapien lacinia sapien, est blandit eros. Alt om Service & Pleje 6. juni 2009 Cras lacinia, wisi nec lacinia fermentum 5. juni 2009 Sapien in arcu consectetuer dolores 5. juni 2009 Sapien in arcu consectetuer cursus 4. juni 2009 Lorem ipsum at varius dolor 4. juni 2009 Lorem ipsum wisi nec lacinia 3. juni 2009 Lorem ipsum at varius dolor Kultur & Fritid > Sport & Idræt > Museer & Udstillinger > Musik, teater, litteratur & film > Foreninger & Kulturhuse > Støttemuligheder > Sapien est > Varius dolor Børn & Unge > Cras lacinia Sundhed & Sygdom > Lorem ipsum > Euismod cras > Cras ipsum > Wisi nec Service & Pleje > In arcu consectetuer > At varius dolor > Cras lacinia sapien > Nec Lacinia fermentum > Sapien nec wisi By & Bolig > Varius est > Cras wisi nec > At varius ipsum > Fermentum ipsum cras > Lacinia at varius > Euismod est blandit > Sapien eros dolor > Wisi lacinia at > Cras sapien euismod > Fermentum nec est > Est varius blandit

87 Lorem ipsum lacinia fermentum Om kommunen I Kontakt os I Log ind I English Kultur & Fritid I Børn & Unge I Sundhed & Sygdom I Service & Pleje I By & Bolig I Trafik & Veje I Job & Uddannelse I Politik Supersektion Søg Forside > Kultur & Fritid Kultur og Fritid Vestibulum euismod sapien. Lacinia fermentum, est sem est blandit eros. Cras lacinia sapien. Lorem at ipsum sapien. Lacinia fermentum, sem est blandit. SPORT & IDRÆT MUSIK, TEATER & FILM UD I NATUREN > Svømmehaller > Idrætshaller > Stadioner & Baner Alt om sport og idræt > Spillesteder > Musikøvelokaler > Biograffilm Alt om musik, teater, litteratur & film > Gåture og motionsruter > Naturens Dag > Links til oplevelser Alt om ud i naturen MUSEER & UDSTILLINGER FORENINGER & KULTURHUSE STØTTEMULIGHEDER > Lokalhistoriske arkiver > Skulpturer og kunstværker > Udstillinger Alt om museer og udstillinger > Euismod lacinia cras > Sem est blandit > Cras lacinia sapien Alt om foreninger & kulturhus > Kulturstøtte > Musikudvalgets støttemuligheder > Honorar-støtteordningen Alt om støttemuligheder

88 Lorem ipsum lacinia fermentum Om kommunen I Kontakt os I Log ind I English Kultur & Fritid I Børn & Unge I Sundhed & Sygdom I Service & Pleje I By & Bolig I Trafik & Veje I Job & Uddannelse I Sektion Politik Søg Forside > Kultur & Fritid > Sport & Idræt Sport & Idræt > Svømmehaller > Idrætshaller > Stadioner & Baner > Fermentum ipsum cras > Lacinia at varius > Euismod est blandit > Sapien eros dolor > Wisi lacinia at > Cras sapien euismod > Fermentum nec est > Est varius blandit Sport & Idræt Vestibulum euismod sapien. Lacinia fermentum, lorem sem est blandit eros. Cras lacinia sapien. Lorem sapien ipsum sapien. Lacinia fermentum, sem est wisi blandit. SVØMMEHALLER Grønnemarkens Svømmehal Lorem ipsum sapien. Vestibulum euismod sapien. Lorem ipsum. Lollandsgade Badet Vestibulum euismod sapien. Sem est sapien fermentum ipsum. Se alle svømmehaller IDRÆTSHALLER Overskrift Lacinia fermentum, sem est blandit eros. Lacinia est varius. Overskrift Lorem ipsum sapien sem est blandit euismod eros est vestibulum wisi. Se alle idrætshaller STADIONER & BANER Overskrift Cras sapien lorem ipsum blandit eros sem est at varius lacinia nec wisi. Overskrift Lorem ipsum varius. Lacinia fermentum, blandit est euismod eros. Se alle stadioner & baner

89 Lorem ipsum lacinia fermentum Om kommunen I Kontakt os I Log ind I English Kultur & Fritid I Børn & Unge I Sundhed & Sygdom I Service & Pleje I By & Bolig I Trafik & Veje I Job & Uddannelse I Politik Galleri Søg Forside > Kultur & Fritid > Sport & Idræt > Svømmehaller Sport & Idræt > Svømmehaller > Idrætshaller > Stadioner & Baner > Fermentum ipsum cras > Lacinia at varius > Euismod est blandit > Sapien eros dolor > Wisi lacinia at > Cras sapien euismod > Fermentum nec est > Est varius blandit Svømmehaller Vestibulum euismod sapien. Lacinia fermentum, eros sem est blandit eros. Cras lacinia sapien. Lorem est ipsum sapien. Lacinia fermentum, sem est blandit. Grønnemarkens Svømmehal Lorem ipsum sapien. Vestibulum euismod sapien. Lorem ipsum. Adresse: Grønnemarken 84, 1234 Xkøbing Faciliteter: 50 m bane, babysvømning, kurbad, 10 m vippe Lollandsgade Badet Vestibulum euismod sapien. Sem est sapien fermentum ipsum. Adresse: Lollandsgade 15, 1234 Xkøbing Faciliteter: 25 m bane, koldtvandsbassin, massage, karbad Badeanstalten Bakkelund Lorem ipsum sapien. Vestibulum euismod sapien. Lorem ipsum. Adresse: Smallegade 41, 1234 Xkøbing Faciliteter: 25 m bane, boblebad Xby Svømmestadion Lorem ipsum sapien. Vestibulum euismod sapien. Lorem ipsum. Adresse: Stadionvej 4, 1234 Xkøbing Faciliteter: 50 m bane, babysvømning, kurbad, 5 og 10 m vipper

90 Lorem ipsum lacinia fermentum Om kommunen I Kontakt os I Log ind I English Kultur & Fritid I Børn & Unge I Sundhed & Sygdom I Service & Pleje I By & Bolig I Trafik & Veje I Job & Uddannelse I Indhold Politik Søg Forside > Kultur & Fritid > Sport & Idræt > Svømmehaller > Grønnemarkens Svømmehal Sport & Idræt > Svømmehaller > Idrætshaller > Stadioner & Baner > Fermentum ipsum cras > Lacinia at varius > Euismod est blandit > Sapien eros dolor > Wisi lacinia at > Cras sapien euismod > Fermentum nec est > Est varius blandit Grønnemarkens Svømmehal Andre svømmehaller > Lollandsgade Badet > Badeanstalten Bakkelund > Xby Svømmestadion > Vestergade svømmehal > Ykøbing svømmehal > Kløvervænge Badet Grønnemarkens Svømmehal er Af Jens Andersen 7. september, 2008 Vestibulum euismod sapien. Vestibulum euismod sapien. at Cras lacinia, wisi nec lacinia fermentum, sem est blandit est eros, at varius dolor velit at justo. Vestibulum euismod sapien Vestibulum euismod sapien. Cras lacinia, est wisi nec at est lacinia fermentum, sem est blandit eros, at varius sapien dolor velit at justo. Print Tip en ven Tekststørrelse Curabitur magna dolor, auctor vel, volutpat vitae, sit amet posuere ut, odio. In sit amet orci. Vestibulum euismod est sapien. Cras lacinia, wisi nec lacinia fermentum. Vestibulum eusimod wisi nec. Lacinia fermentum lorem sem est blandit eros Cras lacinia sapien. Lorem sapien ipsum sapien. Lacinia fermentum, sem est wisi blandit. Lorem ipsum dolor sit amet consetetur. Vestibulum eusimod sapien. Cras lacinia, est wisi nec lacinia fermentum, sem est sapien dolor lorem ipsum sit amet odio, curabitur magna auctor vel, volutpat vitae blandit at cras est Del Om svømmehallen Brochure (PDF, 105 kb) Ordensreglement (PDF, 24 kb) Det nye friluftsbassin (PowerPoint, 18 mb) Svømmeklubber Lorem ipsum Sem est blandit wisi. Curabitur magna Vestibulum euismod. Lacinia fermentum Cras lacinia magna.

91 Supersektionsforside 92

92 Formålet med supersektionen (store page) er at skabe overblik over sektioner og eksemplificere dem. 93

93

94

95

96

97

98 Sektionsforside 99

99 Formålet med sektionsforsiden er at skabe overblik over gallerisider (listesider) og eksemplificere dem. 100

100

101 Galleriside 102

102 Formålet med gallerisiden er at skabe komplet overblik over indholdet i kategorien og at gøre det muligt for brugeren med sikkerhed at vælge den rigtige side uden at han skal bevæge sig frem og tilbage mellem oversigt og indhold (pogosticking). 103