Der følger nemlig tegneredskaber med, der egentlig er lavet til annotationer, men de kan også bruges til at tegne rigtigt med. Så Chris har lavet et benspænd for sig selv. Han tegner i note-app’en og det kommer der nogle skønne værker ud af.

Se Chris Silverman’s notesblok-kunst på notes.art.

Min vurdering:
(5/5)

Jeg har konsumeret bogen som lydbog.
Bogen kan lånes på eReolen her

Hør også Anders Høgh Nissen og Jens Hjerrild Poders anmeldelse på Scifisnak.

Frøken Klokken

Forleden faldt jeg over et opslag med en plakat med teksten “Fascism is not to be debated – It is to be smashed”. Hvorfor bør der ikke gives plads til fascistiske holdninger i et liberalt demokrati, der bryster sig af ytringsfrihed?

Ytringsfrihed er en grundforudsætning i et liberalt demokrati og den fordrer tolerance. Man skal kunne tolerere den andens synspunkt.
Den forudsætning findes ikke i fascismen, og derfor kan fascisme, kort fortalt, ikke tolereres i det ellers tolerante, liberale demokrati.

Filosoffen Karl Popper beskriver tolerancens paradoks som den tilsyneladende selvmodsigende ide, at for at kunne opretholde et tolerant samfund, må samfundet forbeholde sig retten til at være intolerant over for intolerance.

“Ubegrænset tolerance”, siger Popper, “må føre til tolerancens forsvinden. Hvis vi tillader ubegrænset tolerance, hvis vi ikke er parate til at forsvare et tolerant samfund mod angreb fra de intolerante, vil de tolerante blive destrueret og tolerancen med dem.”

We should therefore claim, in the name of tolerance, the right not to tolerate the intolerant. We should claim that any movement preaching intolerance places itself outside the law and we should consider incitement to intolerance and persecution as criminal, in the same way as we should consider incitement to murder, or to kidnapping, or to the revival of the slave trade, as criminal.”

– Karl Popper, The Open Society and Its Enemies

Popper mener dog ikke, at alle former for intolerance bør forbydes. Så længe, de intolerante kan imødegås med rationelle argumenter og holdes i skak i den offentlige opinion, vil det være uklogt at undertrykke dem.

Skyldes det filterbobler og sociale medier, at fascismens grimme ansigt i disse år igen dukker op i Europa og USA? Det kan være en årsag. En anden årsag kan være, at de tolerante har været for tolerante. Derfor kan sloganet om fascisme på ovenstående plakat godt give mening i et frit samfund, hvor der i øvrigt er ytringsfrihed. “It is to be smashed”.

Læs evt. mere om tolerancens paradoks på Wikipedia.

Hvad er en karrusel i et brugergrænsefladedesign?

En karrusel er et element i en brugergrænseflade, der tillader flere stykker indhold at optage en enkelt, ofte eftertragtet plads. Oftest viser en karrusel et eller flere elementer ad gangen, mens resten skjules. Der kan som regel navigeres ved at swipe med finger eller pegeredskab, ved tryk på frem- og tilbage-knapper eller tryk på prikker eller miniaturebilleder. Karrusellen skifter oftest visning i en horisontal bevægelse og skifter i nogle tilfælde visning automatisk.

Karruseller kaldes også ofte swipers, sliders eller slideshows.

Karruseller i anvendelse: En brugsstatistik

På TV MIDTVEST arbejder vi med en del karruseller. I forbindelse med implementering af et nyt statistikværktøj har vi sat nogle mål op for netop at undersøge brugen af indholdet i vores karruseller. Vi kan allerede se et mønster i en måling over 10 dage. Her er et par eksempler.

Seneste Nyt – en karrusel på forsiden af tvmidtvest.dk

Vores “Seneste nyt”-karrusel har over de 10 dage samlet set 16.000 klik.

Af dem får indhold på første position 43,75% af klikkene. Indhold på position 2 får 21,25%, position 3 får 12,5%, position 4 får 7,5% mens position 5 – 10 må deles om smulerne.

Specifikt på mobil er tendensen endnu tydeligere. Af de i alt 4.700 klik får første position 48,9%, position 2 får 16,4%, position 3 får 8%, position 4 får 6,7% og position 5 – 10 er næsten ikke værd at nævne.

Episode Decks – karruseller i TV MIDTVESTs Play univers

I Episode Deck-karrusellerne har vi samlet set 1.900 klik.

Af dem får indhold på første position 43,8% af klikkene. Indhold på position 2 får 26,8%, position 3 får 12,1%, position 4 får 6,5% mens position 5 og frem må deles om resten.

Af de i alt 852 klik specifikt på mobil får første position 47,5%, position 2 får 19,6%, position 3 får 6,1%, position 4 får 4,7% og position 5 og frem får næsten ingenting.

Hvad kan vi lære af statistikken?

Mønsteret er nogenlunde ens for begge typer karruseller. Indhold på position 1 får omtrent halvdelen af interaktionen, indhold på position 2 omtrent det kvarte, derefter falder interaktionen og er næsten fraværende efter position 4.

På desktop eksponerer vi i TV MIDTVESTs karruseller typisk fire positioner og det er de fire, der interageres med. På mobil eksponerer vi typisk to og det er på samme vis de to, der interageres med.

Alt, hvad der i udgangspunktet er skjult, forbliver skjult og opdages ikke.

Intet nyt fra TV MIDTVEST-fronten – Resultat bekræfter usability research

Resultatet af TV MIDTVESTs lille undersøgelse er ingen ny opdagelse, men det bekræfter research foretaget af Nielsen Norman Group af flere omgange.

I september 2013 publicerede Nielsen Norman Group en række fund og anbefalinger til brug af karruseller i artiklen “Carousel Usability: Designing an Effective UI for Websites with Content Overload“. I august 2018 fulgte de op med anbefalinger specielt rettet mod mobile enheder i artiklen “Carousels on Mobile Devices“. Selvom undersøgelserne og anbefalingerne har nogle år på bagen, er de fortsat aktuelle. Nok især, fordi vi mennesker tilsyneladende har lidt svært ved at ændre adfærd, selvom vi har levet med en bestemt teknologi i en årrække.

Anbefalinger

Blandt Nielsen Norman Group’s anbefalinger finder vi følgende:

• Inkludér 5 eller færre rammer i karrusellen, da det er usandsynligt at brugere vil interagere med flere end det.
• Brug skarpt udseende tekst og billeder. Jo klarere tekst og billeder, des større sandsynlighed for interaktion.
• Indikér hvor mange rammer, karrusellen indeholder og hvor brugeren befinder sig i progressionen.
• Brug ikoner og links, der er forståelige og genkendelige
• Sørg for, at navigationskontrollen befinder sig inde i karrusellen, ikke nedenunder eller adskildt af underkanten på skærmbilledet.
• Sørg for, at links og knapper er store nok til at dechifrere og klikke på.
• Undgå automatisk afspilning, hvis korrekt timing ikke kan opnås eller hvis indholdet ligner reklame.
• Undlad automatisk afspilning på mobil, da brugerne nemt kommer til at scrolle forbi.

Konkluderende skriver Nielsen Norman Group, at man bør overveje at bruge en statisk karrusel eller et simpelt hero billede.

UX-forslag fra TV MIDTVEST

• Brug karruseller sparsomt.
• Brug hero billeder.
• Overvej at lave en kø med hero billeder, der vises ét af gangen, men kan rulles tilfældigt igennem ved indlæsning af siden.
• Vis indhold på katalogsider (produktbilleder, coverbilleder, videoer) fortløbende i et liste- eller gitter-layout.

Konklusion

På TV MIDTVEST kan vi konstatere, at brugerne interagerer begrænset med det indhold i vores karruseller, de ikke umiddelbart kan se. Det bekræftes bl.a. af research foretaget af Nielsen Norman Group. På den baggrund foreslår vi at bruge karruseller sparsomt.

Ikoner

Begrebet “ikon” bruger vi på TV MIDTVEST om den grafik, der repræsenterer en serie. Begrebet har vi angiveligt arvet fra TV2 Play, som bruger det på samme vis.

I grafiske brugergrænseflader dækker begrebet dog over en forsimplet visuel repræsentation af en applikation, en filtype, en egenskab, en henvisning eller specifik entitet med mening for brugeren.

Thumbnails

Ligeledes bruger vi begrebet “thumbnail” om den grafik, der repræsenterer en video i vores streaming-univers, uanset billedets størrelse.

Det giver mening, så længe grafikkerne præsenteres i et oversigtsformat. I grafiske brugergrænseflader dækker begrebet nemlig oftest over en repræsentation af foto eller video i mini-udgave, altså på størrelse med en tommelfingernegl, heraf navnet, med det formål hurtigt at kunne skabe overblik over en mængde mediefiler.

Et fælles sprog

Det vigtigste er naturligvis, at vi ved, hvad vi snakker om. Men vi, der arbejder med brugergrænseflader til dagligt, studser lige en ekstra gang, når kollegerne siger “ikon” eller “thumbnail”. Det bidrager til forvirringen, at vi bruger ord, der betyder noget forskelligt afhængigt af konteksten. Der mangler en fælles begrebsramme. Ord, vi alle kan forstå og nemt kan afkode.

Jeg har kigget på class names i en række streaming frontends og forsøger at lure en navngivnings-tendens til inspiration:

• Disney+ viser i udgangspunktet alle grafikker i bredformat og kalder det “cards”.
• DR TV kalder det “packshot–tile” i bredformat og “packshot–poster” i højformat.
• NRK bruger hhv. “landscapelogo” til 16:9 bredformat og “portraitlogo” til højformat.
• Netflix kalder det “boxart” og her er grafikken altid i 16:9 bredformat.
• HBOMax bruger arbitrære, autogenererede class names.
• TV4 bruger arbitrære, autogenererede class names.
• SRF.ch har serier i højformat, episoder/programmer i bredformat og kalder grafikken “PlayImage”, uanset orientering.
• TV2 Play kalder grafikken “episode_teaser” for episoder/programmer i bredformat og “movie_teaser” for film i højformat.
• YouTube kalder grafikken “thumbnail”, uanset orientering.

Hvad kan vi uddrage af det?

Når ingen streaming-tjenester tilsyneladende bruger en fælles begrebsramme, indikerer det, at den simpelthen ikke findes.

Disney+s “cards” er frontend-sprog, der kun tales af udviklere. Netflix’ “boxart” trækker tråde til en fortid som fysisk videoudlejnings-virksomhed. SRFs “Playimage” fortæller kun noget om eget play-univers. Youtube’s “thumbnail” er UI-sprog og medfører samme problem, som beskrevet ovenfor. Alle disse har det til fælles, at de hverken fortæller noget om grafikkens orientering eller anvendelse.

NRKs “landscapelogo” og “portraitlogo” fortæller os derimod om orienteringen af grafikken og det tjener til inspiration.

Hvis vi skærer “packshot” af DRs navngivning, har vi noget kort og kontant, der beskriver orienteringen: Poster og tile.

Semantik: Vi har især brug for at kommunikere orientering

Grafikken kan være lodret, vandret eller kvadratisk. Hvilke ord kan indikere disse orienteringer? En hurtig brainstorm:

• Lodret: vertical, poster, portrait, tall.
• Vandret: horizontal, banner, tile, landscape, wide.
• Kvadrat: box, square.

Dernæst evt. anvendelse. Grafikken bruges som teaser-billede, forside-billede eller cover til video i form af en serie, en episode, et selvstændigt program, en film etc.

Forslag til en navnekonvention

Ordene “poster”, “tile”, “square” og “banner” fungerer godt, fordi de indikerer grafikkens orientering og er mundrette. Altså:

Evt. kan man om nødvendigt sætte en type på som præfiks. F.eks. series-poster, episode-tile, etc.

Genkendelighed vs. genkaldelse

Webdesign er kedeligt – alle websites ligner hinanden. Med tiden er der opstået en række design-konventioner i disciplinen webdesign: Logoet står øverst til venstre, primær navigation ligger i toppen, sekundær navigation ligger i venstre side, links ligner links osv. osv.

Men det er der en grund til.

Vi mennesker er dårlige til at huske. Korttids- eller arbejdshukommelsen er ineffektiv og glemmer lige så hurtigt, som den bliver fodret. Langtidshukommelsen, vores informationslager, er arbejdskrævende og langsom at hive information ud af og den information, vi kan genkalde, dvs. fremdrage derfra, er sjældent helt korrekt.

Bryder man konventionerne, tvinger man brugerne til at lære en helt ny brugergrænseflade at kende. Man sætter både deres korttidshukommelse og deres langtidshukommelse på overarbejde. Dermed henleder man opmærksomheden på brugergrænsefladen i sig selv fremfor på det indhold, brugergrænsefladen skal formidle.

Vores synapser er derimod bygget til genkendelse. Vi kan genkende øjeblikkeligt og er meget bedre i stand til det, end til at genkalde. Webdesign konventioner sikrer, at en brugergrænseflade har en vis genkendelighed. Derfor er det vigtigt at have webdesign konventioner in mente og være sig bevidst om de design-valg, man foretager, hvis man vil give brugerne en god oplevelse.

Men brutalister er ligeglade

På det seneste er der opstået en trend i webdesign, der går under navnet brutalisme. Retningen ses som en yngre generation af designeres reaktion eller oprør mod det ellers fremherskende rationelle og funktionelle design. Brutalisterne er komplet ligeglade med eksisterende webdesign konventioner. De griner dem snarere op i ansigtet. Her er et eksempel:

A School, A Park 2018

A School, A Park 2018 er et website, der promoverer workshops for grafiske designere i Montreal, Canada, over sommeren 2018. Fra indledningen på websitet:

A School, A Park is a graphic design program based in Montreal, Canada. It is primarily driven by a workshop format, where participants spend 3–5 days at a time, working on projects both individually and collaboratively, under the guidance of invited tutors who structure these workshops in relation to their own practice.

Hvor er logoet? Identifikation af dette site er svær at få øje på og er begrænset til sitets visuelle stil i sig selv.

Hvordan navigerer man? Navigationen er ved første øjekast tilsyneladende rent scroll-baseret. Der sker i hvert fald en hel masse, når man forsøger at scrolle. Kigger man meget nøje efter, vil man se, at den primære navigation ligger nederst til højre. Eller spejlvendt nederst til venstre. Når man klikker på de enkelte menu-punkter, scroller siden automatisk. Endvidere ligner navigationen ikke navigation og er meget svær at få øje på pga. den ringe kontrast.

Hvordan bruger man indholdet? Det primære indhold består af en relativt stor tekstmængde. Men hvor starter man? Normalt vil man i vestlig kultur læse fra venstre mod højre. Men her står indholdet spejlvendt i venstre side, mens højre side kan læses. Ved nærmere øjesyn er den spejlvendte tekst i venstre side en fransk oversættelse af den engelske tekst i højre side. Klikker man på den, drejer den rundt, så den kan læses fra den rigtige retning, mens den engelske tekst spejlvendes. Intet indikerer dog, at der kan klikkes. Al tekst er endvidere delvist transparent og har enormt dårlig kontrast til de meget urolige baggrundsbilleder, hvilket gør teksten næsten ulæselig.

Jamen hvad er det, der sker? Den uindviede eller uerfarne bruger vil være fuldstændig tabt på dette site. Designet kræver udforskning og at man ved, hvordan man bruger browserens funktioner. Intet indikerer interaktion og det er meget svært tilgængeligt. Finder man ud af at interagere med sitet, er alt animeret, bimler og bamler og støjer visuelt, så brugere med tendens til epilepsi skal være forsigtige.

Mere brutalisme

Man kan finde flere eksempler på brutalisme på brutalistwebsites.com.

Test: horsensbibliotek.dk

Jeg har testet min arbejdsplads, Horsens Biblioteks, website op imod tilgængelighedskriterierne s. 124 i bogen “Usability – Testmetoder til mere brugbare websites“. Disse tilgængelighedskriterier er baseret på det tidligere IT og Telestyrelsens årlige undersøgelse “Bedst på nettet”, hvor offentlige institutioner kæmpede om at opnå flest mulige point og op til 5 “netkroner”. Undersøgelsen laves ikke længere, men en stor del af kriterierne er fortsat relevante og kan stadig findes på Archive.org.

Jeg har testet 4 sider, der hver repræsenterer en essentiel template på sitet. Der er plads til forbedringer. Det maksimale antal point er 73. Herunder ses scoren for de 4 forskellige sidetyper på horsensbibliotek.dk.

Du kan se hele min undersøgelse i dette Google Docs dokument.

Hvad er en ekspertvurdering?

Ekspertvurderingen er et billigere alternativ til usability undersøgelsen. Et antal “eksperter” vurderer websitet på baggrund af nogle generelle retningslinjer for usability. Eksperter kan finde mange fejl, men sjældent alle. 1 ekspert kan finde ca. 35% af fejlene. 5 eksperter kan finde ca. 75% af fejlene.

Usability eksperten Jakob Nielsen har opstillet 10 heuristikker (tommelfingerregler), der kan bruges til at vurdere et webdesign. Dem kan du se her.

Opgave 1: Ekspertvurdering af Bornholmermarked.dk

Se skema i dette Google Docs dokument.

Opgave 2: Re-design af Bornholmermarked.dk

Se opgaven i dette Google Docs dokument.

Se min prototype her.

Redesign skal man være forsigtig med

Det kan virke forstyrrende for brugere, hvis de pludselig og på én gang skal forholde sig til en helt ny brugergrænseflade og visuelt udtryk. Selv subtile forandringer kan undertiden vække vrede. Det er set flere gange, når Facebook har lavet ændringer og bekræftes af Nielsen Norman Group, der anbefaler at lave forandringer små trin af gangen, såfremt sitet overordnet fungerer.

Derfor har jeg bevidst fravalgt at lave et gennemgribende redesign af Bornholmermarked.dk. Visuelt har websitet formentlig i forvejen et velkendt udtryk og det er der ikke grund til at pille for meget ved. Således har jeg valgt at fokusere på de punkter, jeg mener giver problemer for brugerne og som derfor trænger til en overhaling, foreslå nogle forbedringer i informationsarkitekturen samt visuelt stramme op hist og her.

Sidehoved, navigation og struktur

Topmenuen videreføres. Den fungerer og det er nemt at forstå de enkelte menupunkter. Men links heri gøres kontekst-afhængige, således at funktionalitet, der kræver eller bør kræve login, sendes omkring login-formularen først.

Mit Bornholmermarked

Funktionerne i dropdown menuen bør først være tilgængelige, når brugeren er logget ind. Er brugeren ikke logget ind, vil jeg derfor sende brugeren videre til login-formularen, før vedkommende kan bruge disse funktioner. Den information, der i det nuværende design vises i et modal-vindue, er enten overflødig eller kan forkortes og vises på login-siden.

Opret annonce

På Bornholmermarked.dk var det ikke klart, hvad der skete, når man forsøgte at oprette en annonce. Det viste sig, at man faktisk kan oprette en annonce uden at være logget ind. For det første undrede jeg mig, fordi det ikke rigtig var klart, hvorvidt annoncen var blevet oprettet. For det andet giver det ikke rigtig mening, når man alligevel skal være logget ind for at følge sin annonce.

Derfor har jeg valgt, at såfremt brugeren ikke er logget ind, sendes vedkommende forbi login-formularen, før annoncen kan oprettes. Formularerne kunne trænge til visuel opstramning, men de fungerer, så derfor har jeg ikke redesignet dem.

Hjælp/Feedback

I det nuværende design fører dette link til et eksternt site. Jeg vil foretrække en intern placering af denne side, da eksterne links i primær navigation nemt får brugere til at miste orienteringen. Jeg har dog ikke designet en side til det.

Opret bruger

Skal naturligvis føre til oprettelsesformularen. Formularen kunne trænge til visuel opstramning, men den fungerer, så derfor har jeg ikke redesignet den.

Log ind

Skal naturligvis føre til login-formularen. Menupunktet i topmenuen kunne styles som en knap for at indikere funktionalitet, men da “Opret annonce” allerede er udformet som knap og klart call-to-action, har jeg valgt at lade “Log ind” forblive i sin nuværende form, da det også står, hvor man ville forvente at finde en login-funktion. “Log ind” formularen kunne trænge til visuel opstramning, men den fungerer, så derfor har jeg ikke redesignet den.

Forside og kategori-sider

Disse sider er i det oprindelige design opbygget meget ens. Det har jeg valgt at videreføre.

Header-billede og søgefunktion

I det nuværende design indeholder header-billedet en tekstuel forklaring (i form af bitmap-grafik). Denne forklaring er i bedste fald overflødig og funktionaliteten i form af link der åbner i et nyt vindue er katastrofal, fordi brugeren nemt mister orienteringen.

Jeg har valgt at erstatte header-billedet med et baggrundsbillede, der tematisk passer bedre til sitet. Linket fjernes naturligvis helt. Søgefunktionen laves ikke synderligt om, men kontrasten til baggrunden gøres tydeligere, så søgningen træder tydeligt frem.

Brødkrummer

Brødkrumme-funktionaliteten på kategori-siderne fungerer ikke helt, som den bør i det nuværende design. Den bør gå helt tilbage til forsiden. Derudover følger den ikke helt konventionen fra produktsiderne. Det har jeg forsøgt at ensrette samt at tydeliggøre hvad der kan klikkes på ved at gøre links blå og understregede.

Navigation: Kategorier

Der er ingen grund til at skjule kategorierne bag en knap, når der er masser af plads på siden. Der skal skabes overblik over mulighederne. Derfor har jeg ommøbleret layoutet en anelse, således at kategorierne altid vises til venstre for produktoversigten.

Produkt-liste

Jeg har strammet oversigten over produkter op, så den følger et stringent layout-gitter, der gør siden mere overskuelig. Endvidere har jeg føjet en label til gitter- og listevisnings-ikonerne, således at der ikke er nogen tvivl om, hvad der sker, hvis man klikker på dem.

Banner-reklamer

Brugerne hader generelt reklamer og har lært sig at overse dem. De fleste website-ejere ved det godt. Men sitet skal finansieres, så reklamerne kan være et nødvendigt onde. Altså skal der være plads til dem. I det nuværende design virker deres placering dog lidt tilfældig.

Jeg har valgt at begrænse mængden af reklamer og placere dem udenfor layout gitteret på hver side af det primære indhold, således at de står pænt uden at genere det egentlige indhold for meget. Endvidere vil jeg undlade at placere reklamer i mellem produkterne i produktlisten.

Produktsider

De nuværende produktsider fungerer og indeholder den information, de skal. De kunne trænge til en layoutmæssig opstramning, men det er jeg ikke nået i mål med i denne omgang.

Se prototypen

Jeg har lavet en prototype baseret på mine mockups i Adobe XD. Prototypen kan ses her: