Hvordan vi designet sideeksempler til Wikipedia - og hvad der kunne gøres med dem i fremtiden

Billede af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0.

I dag frigav vi en ny funktion til Wikipedia's læsere på previews på desktop - side. Her er et par designnyancer bag det.

Kaninhullet

Folk elsker Wikipedia. Folk elsker Wikipedia af specifikke grunde. Her er en af ​​de populære, som forklaret af XKCD:

Den siger ”Problemet”, men jeg tror, ​​han elsker det. Billede af Randall Monroe / xkcd, CC BY-NC 2.5

Vi kalder dette ”kaninhul” omkring hallerne på Wikimedia Fonds kontor. (Skamløst stik til Wikipedia kaninhul t-shirt.)

Dette er et af de mest ikoniske og populære brugermønstre, vi ser på Wikipedia. Folk starter med en artikel, og går derefter et andet sted og derefter et andet sted, hvor de lærer om mange forskellige emner undervejs.

Design er lige så godt, hvad det er optimeret til. Vi designer til disse læsere, optimerer ikke til sidevisninger eller engagement - men til læring. Og det viser sig, at kontekst er en vigtig del af læring.

Kontekst betyder noget, men kontekstskift er dyrt

Sideeksempler er som funktion et utilitaristisk interaktionsmønster, der har eksisteret siden opfindelsen af ​​Javascript.

Sådan bruger Twitter previews til at få kontekst om en bruger. Screenshot / GIF via Twitter, fair brug.

Det er ikke en banebrydende løsning til at give kontekst uden at miste tråden. Alligevel har selv de mest grundlæggende interaktionsændringer på Wikipedia deres egne unikke udfordringer. Lad os kaste lys over, hvorfor dette er en big deal:

Et par numre til at hjælpe dig med at grok

  • Næsten en fjerdedel af Wikipedia's trafik kommer fra at klikke på interne blå links. a.k.a ned ad kaninhullet
  • Blå links tegner sig for 4 milliarder sidevisninger pr. Måned
  • mere end 10.000 links svæves hvert sekund på tværs af alle Wikipedia

Blå links er med andre ord de mest anvendte interaktive elementer på Wikipedia. Dette gør rod med eller ændre enhver funktion relateret til blå links lidt mere ... delikat og udfordrende.

Merværdi ikke smerter

Det er vanskeligt at ændre sådan hyppig adfærd. Vi begyndte med at bruge kvalitativ og kvantitativ indsigt for at afslutte interaktionens tidslinje til at vise en forhåndsvisning:

Tidslinjen viser begivenheder, efter at en bruger svæver på et blåt link. Graf af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0.

I betragtning af Wikipedia's skala kan en mindre ændring i nogen af ​​disse variabler altid resultere i en massiv indflydelse på oplevelserne fra slutbrugeren såvel som på vores infrastruktur. Ved hjælp af evaluerende undersøgelser lærte vi, at nogle mennesker læste tekst online ved at holde musen hen over sætninger, hvilket gør forhåndsvisning af sider potentielt irriterende for dette publikum.

At opbygge kunstige forsinkelser, før forhåndsvisning af siden vises - ca. 650 millisekunder - gjorde det muligt for os at reducere antallet af uønskede forhåndsvisninger. Vi gjorde det også nemt at deaktivere denne funktion uden at skulle hoppe gennem bøjler.

Repræsenterer konteksten

Den næste udfordring var at repræsentere en artikel med information, der er tilgængelig, og information, der ikke er tilgængelig. Hvordan gør du rede for ukendt indhold? Nå, du designer til alle mulighederne.

Kantsager, kantsager og kanter

Jeg kan ikke lide udtrykket, personligt. Mest fordi det bliver misbrugt til at tage designbeslutninger. Det er endnu mere unøjagtigt, når det kommer til design til Wikipedia.

Wikipedia's indhold er skrevet af mere end 200.000 mennesker og bots på 300 sprog. Det adskiller sig i tone, format, tilgængelighed, detaljeringsniveau og emne. Alt er en kantsag, hvorfor intet er.

At designe forhåndsvisningen var som at spille Tetris uden at vide, hvad det næste stykke bliver. Her er forskellige variationer af forhåndsvisninger, der er lagt ud:

Grafik af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0.

Dette forskellige sæt brugssager resulterer i forskellige repræsentationer af en artikel, der spænder fra liggende billeder, forhåndsvisning af høje portrætter, forhåndsvisning af højre til venstre for links, der fører til en liste over artikler. Justering af linjehøjde for matematikrelaterede sider på tamil-side-forhåndsvisninger, så sætningsklipningen fungerer korrekt er en del af designet til sideeksempler.

Grafik af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0. Tekst og billeder fra de angivne Wikipedia-artikler på forskellige sprog.

Fremtiden for sideeksempler

Dette er bare en startside-forhåndsvisning af åbne muligheder i flere områder, da konteksten bliver mere og mere vigtig, ikke kun på Wikipedia, men på internettet generelt. (Bemærk, at dette kun er ideer og ikke er i aktiv udvikling.)

Support til flere typer indhold

I øjeblikket er forhåndsvisninger kun beregnet til artikler, men vi har bygget dem på en sådan måde, at de kunne bruges til forskellige typer indhold og formater.

Grafik af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0. Tekst fra de angivne sider på Wikimedia wikier.

Power previews til redaktører

Fra nu er sidereksempler designet til læsere - men de kan tilpasses til magtredaktører ved at være vært for omfattende information og nyttige handlinger, der er mere relevante for redaktører.

I dag bruger mange redaktører et værktøj kaldet Navigation Popups, der er beregnet til det samme formål. Funktionerne fra popup-popups kan let tilpasses til sideeksempler -

Grafik af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0. Tekst fra Mona Lisa.

Wikipedia uden for Wikipedia

Vi opfordrer Wikipedia som andet kildemateriale. Ligesom en ordbog bruges til at forklare betydningen af ​​et ord, mens du læser en bog, bruges Wikipedia ofte som en anden kilde til at kende kontekst til læsning selv uden for Wikipedia.

Grafik af Nirzar Pangarkar / Wikimedia Foundation, CC BY-SA 3.0. Inkluderer Wikipedia-tekst fra behåret næse-oter og er baseret på Jeremy Coles, “Conservation succes for oter på randen”, BBC Earth, 20. juni 2017.

Wikipedia-forhåndsvisninger kunne vedtages af andre udgivere som et middel til at skabe hurtig kontekst omkring emner.

Indpakning af det

Sideeksempler baner en sti til en anden måde at interagere med Wikipedia på. Læseoplevelsen på Wikipedia kan opdeles i mindre stykker. Vi ser frem til flere måder at bevæge sig væk fra den traditionelle opfattelse af enkelt monolitiske artikler hen imod mere modulopbygget og kontekstuel læring.

Giv dig gerne feedback på vores projektside.

Tak skal du have!

Nirzar Pangarkar, Design Manager, Publikum Design
Wikimedia Foundation

Du kan også læse dette indlæg på Wikimedia-bloggen.