Category

UX

DIAGRAMDESIGN FOR FORLAGET TROJKA

By | Branding, Design, UX | No Comments
Omslag 'Organisation' 7. udg. Eksempel på figur jv. ny designguide

‘Organisation’ 7. udg. Nye figurer og ny designguide, Bjerager©2020. Omslag: Ann Scales

 

BRUGER-FEEDBACK ER KONGE

Forlagsredaktør Peter Schmalz på Trojka sendte mig i starten af januar 2021 denne tilbagemelding fra en bruger:

”Jeg glæder mig til at undervise med den nye bog. Det er en god opdatering, I har lavet.

Og jeres figurer er fantastisk gode… ligesom jeres service ift. at bruge figurer til undervisning. Det kunne andre forlag godt lære noget af.”

Peter hyrede mig i 2020 til at foretage et visuel audit på flere lærerbøger, herunder ’Organisation’, for at afdække om formidlingen var up-to-date, fagligt og mediemæssigt.

Min analyse og kategorisering af over 300 figurer blev grundlaget for diagnosen: patienten kræver behandling.

Resultatet blev en design guide til kommende udgaver.

7. udgave af ‘Organisation’ blev første titel – figurerne er radikalt andeledes, ikke mindst, fordi den visuelle formidling er videnbaseret.

Viden om øjets måde at afkode synsindtryk kan gøre forskellen på om kommunikation bliver effektiv.

Som lidt ekstra i posen fik Trojka entydigt defineret brug af logo.

#effektivkommunikation #forlag #videnbaseretvisuelkommunikation

ENKLERE FORMIDLING

Jo mindre visuel støj, jo enklere for øjet at opfatte og afkode.

Eksempel på nyt forenklet figurdesign.

Nyt forenklet figur ved siden af 6.udgaves figurdesign.

 

 

Stephen Fews forskning i øjets og hjernes funktionsmåder bidrager til en væsentlig forståelse for, hvordan effektiv kommunikation kan designes.

Hvis man vil have sit budskab formidlet effektivt, så er det derfor godt at vide, at æstetik blot er en af flere parametre. Men ikke den væsentligste.

Æstetik er et tveægget svær ligesom visuel retorik.

Det emne tog jeg under behandling i forbindelse med Olympiaden i London i artiklen ’Lipstic on a Pig’ om brandet Innocent – emnet er stadig lige aktuelt.

 

SKAL MAN ILLUSTRERE EN TEORI…

…kan man have brug for al den hjælp man kan få.

Gammelt og nyt figurdesign

Den nye figur til højre illustrerer, hvad et ledergitter handler om.

 

Er man så heldig, at skulle udarbejde en figur med det stærkt billeddannede navn ’Ledergitteret’, og teoriværktøjet oven i købet handler om at score på en x og en y-akse, så giver løsningen næsten sig selv.

Men det er ikke ualmindeligt at en forfatter/underviser gerne vil have alle nuancerne med fra the-get-go i deres figur.

Så må vi som designere agere co-creators og tilbyde vores specialist viden om effektiv visuel kommunikation.

For modtageren, den studerende, lettes forståelsen med et entydigt framework for teorien, der implicit lader plads til nuancerne.

 

GØR DET VÆSENTLIGE VÆSENTLIGT

… og giv brugeren mulighed for at få en aha oplevelse.

Hofsteade figur.

Hofsteade kulturparametre. Tidligere figurdesign til højre.

 

Måske har du en formodning om, at danskere er mere impulsive end tyskerne? Men hvor meget?

Det bidrager en kulørt papirguirlande reelt ikke ret meget til.

Men en konkret akse kan tydeliggøre, hvordan Tyskland og Danmark scorer i Hofstedes kulturundersøgelse – uden anden farvebrug end de respektive flags.

Det væsentlige fremgår af flagenes relative indbyrdes placering. Al anden farvekodning er unødvendig, meningsforstyrrende visuel støj.

Visuel kommunikation bliver ikke bedre ved brug af farver for farvernes egen skyld.

Omvendt, er det værd at erkende, at farver besidder en iboende karakter. De aktiverer vores følelser og er stemningsskabende.

Relevant farvebrug kan gøre et produkt mere indbydende, signalere troværdighed, og være anslag for det indhold der venter, jf. omslaget til ’Organisation’.

 

DRØMMEN OM SPLIT TESTS

Skulle det have været designforslag A frem for B?

Nyt figurdesign. To variable af samme indhold.

To variable af samme figur med samme indhold.

 

I et e-handelsunivers ville der have været udført split-tests – testning af A og B for at skaffe konkret data og etablere et grundlag for at træffe en beslutning.

Mavefornemmelser og antagelser i den sammenhæng dutter ikke og kan blive dyre bekendtskaber.

Design er ikke en eksakt videnskab – hverken når der designes til web eller udarbejdes lærerbøger – og resulterer ofte i forskellige løsningsforslag.

Hvor ville det være befriende, hvis nogle diskussioner i en redaktion kunne erstattes af quick-and-dirty brugerundersøgelser.

’Organisation’, 7. udgave er ude men jeg er stadig uafklaret.
A eller B?

 

HVAD HAR KAREN BLIXEN OG BERTEL HAARDER TIL FÆLLES

… karakteristiske næser.

Logoopdatering, Designco©2020

Logoopdatering, Designco©2020

 

Næsen er det mest centrale element i ansigtet, der medvirker til at vi husker hinanden.

Logoer er lidt som næser.

De udgør et fast element ved virksomheders identitet og ændrer sjældent karakter fra dag til dag. Derfor husker vi også lettere hvem virksomhederne er.

I forbindelse med udarbejdelsen af en design guide til Forlaget Trojkas lærerbogsserie blev det besluttet at opdatere logoets udformning.

Fra 2021 vil alle seriens bøger bærer det samme logo, i de samme farver og med det samme antal ringe.

Udformningen refererer til bog layoutet:
– Kapitler markeres med mørk jadegrøn
– Figurer og specielt indhold markeres med orange.

Karen Blixen og Bertel Haarder huskes uden tvivl for langt mere end deres næser, men der er næppe tvivl om, at næserne gør, at vi husker dem.

NB: Omslag: Ann Scales.

INFOGRAFIK og DATAVISUALISERING

By | Branding, Brugervenlighed, Designuddannelse, Etik, UX | No Comments

Data visualisering eller ’data viz’ går også under navnet infografik, fordi det handler om visning af data sets på en grafisk, visuel måde.

I sin rene form er infografikker uden tekst, men oftest som en kombination af grafik (billede) og tekst.

Formålet med infografik er at lette forståelse, ved at vise kompleks information på en klar og enkel måde.

Vi skal bruge nogle diagrammer!

”Kan du ikke lave nogle diagrammer, som forklarer det på en enkel måde?”

Hvilken designer har ikke hørt sin kunde sige det?

Hvortil du måske har spurgt:
”Mener du infografik eller data viz?”

Kunden nikker og svarer måske:
“Lad mig lige få en pris på, hvad det koster!”

Og så kan det være godt at have gode argumenter for, hvorfor infografik kan være en god  investering?

Fem fair argumenter for at investere i infografik

  1. Infografik er imødekommende, engagerende og letter forståelsen af indholdet.
  2. Infografik er overskuelig og skaber overblik.
  3. Infografik er let at dele og kan sprede sig viralt.
  4. Infografik kan skabe trafik og trække brugere til dit site eller dine  sociale medier.
  5. Infografik er søgbart og giver en højere rating på SERPs (Search Engine Results Pages), dvs. gør dit site mere synligt.

Disse fem argumenter er alle relevante – sande med visse forbehold*) – men det tungeste argument leveres sjældent.

Og det er ærgerligt, fordi det handler om  det væsentligste ved effektiv visuel formidling: forståelse for visuel kognition.

Altså, hvordan vi bearbejder in-put, som hjernen modtager via synssansen.

*) Jeg laver et visual audit nederst i bloggen på to infografikker.
Det gør jeg for at vise, at et par af argumenterne kun er sande med visse forbehold, og så for at påpege et par af de mest almindelige fejl.

Argumentet handler om visuel kognition

– og det er lidt langhåret

Vores måde at opleve og agere i verden på er i stor udstrækning resultatet af viden, som er gemt i vores hukommelse – data lejret i den menneskelige hjerne – din personlige CPU.

Hjernen kan på mange måder hævdes at fungere som et hard drive, der konstant søger at matche nye in-put med eksisterende data.

Så når vi taler om input gennem øjnene, så hjælper CPUen os i meget høj grad. Den screener ubemærket og i baggrunden hele tiden for genkendelighed, og reagerer kun, hvor der er tale om nyt, ved at bevidstgøre os om det.

Det betyder, at bevidstgørelse om visuelt input består af to ting

  1. det vi reelt ser på (oplever)
  2. datatræk fra CPUen

hvor datatrækket supplerer informationsbilledet og bevidstgør os om en helhed, der er mere kompleks og nuanceret end det øjet reelt bearbejder.

Vil du helt ind i maskinrummet, så læs: http://www.stephen-few.com/nysi.php

Øjet kan håndtere 2-3 informationspakker ad gange

Den del af hjernen, som bearbejder de input øjet får er relativt afgrænset, idet den kun kan håndtere to-tre informationspakker ad gangen.

Selv om to-tre informationspakker ikke syner af meget, så er det heldige, at kompleksiten i hver pakke kan være relativt høj, helt afhængig af, hvad der er lagret af forhåndsviden på din personlige CPU.

Dvs. at hvis vi ser på en tabel med rækkevis af seks cifrede tal (fx: 346739, 564739, 384720, 132436, 009132, 719385, 994335, 545759, 8456718, 552908 …), så skal vi være meget trænede i at aflæse netop denne type tabel for at opfatte og gennemskue sammenhænge mellem flere af disse data set.

Konverterer vi derimod disse data set til en data viz, så de bliver repræsenteret af en eller flere grafer, kan vil let se afvigelser og indbyrdes relationer.

Øjet kan stadig kun aflæse to-tre informationspakker ad gangen, men nu kan en pakke bestå af samtlige data i en graf, måske stillet over for en anden graf med afvigelser, evt. sat i et koordinatsystem med to akser, som en tredje dataenhed.

Data vizen nedenfor består af mange data set. De enkle grafer skaber overblik og forståelse for de indbyrdes relationer og giver læseren mulighed for at skabe sig et klart overblik.

Enkelhed og klarhed. Financial Times.

Det reelle argument
for at investere i data viz
handler om visuel kognition

At have viden om og forståelse for visuel kognition – altså hvordan vi erkender visuelt – burde være hovedargumentet for at udarbejde infografik.

De øvrige argumenter er naturligvis stadig relevante.

Velovervejet brug af infografik kan være den korteste vej til på en enkel måde at formidle kompleks information, så den bliver vedkommende* og let forståelig.

*) Jeg lovede ovenfor at vende tilbage nederst i bloggen til nogle af infografikkens problematikker. Vedkommende er en af dem.

Findes der regler for at udarbejde
effektive infografikker

Finacial Times diagram eksempel

Ja, og der er både does and don’ts!

Grafiker Ole Munk, der er ekspert i visuel journalistik, behandler emnet uddybende i sin bog Visuel Journalistik fra 2018

https://visuel-journalistik.dk/.

I den kan du blive klogere på infografik, som blot er et af flere grafiske værktøjer en journalist anvender.

På DMJX (Danmarks Medie- og Journalist højskole), hvor Ole tillige underviser, var Alan Smith, OBE, Head of Visual and Data Journalism at Financial Times i 2018 indbudt til at holde et oplæg om arbejdet med FTs Visual Vocabulary (VV).

Selv om megen infografik forfalder til don’ts med alt for meget farvelade, meningsløse ikoner og irrelevant illustration, så lyser FT op som en aktør, der går seriøst til værks.

No b.s., just the numbers in a visuel way!

 

Financial Times Visual Vocabulary
– et ‘periodisk system’ over infografik typer

Financial Times har udarbejdet et VV med does til deres journalister og grafikere.

De kan vælge mellem 74 diagramtyper, når de udarbejder infografik til dagens avis. www.ft.com/vocabulary Og FTs VV er tilgængeligt for enhver der vil kommentere eller bidrage.

Disse does er udarbejdet for at FT til enhver tid kan være sikre på, at infografikerne ikke manipulerer med data, og dermed manipulerer med læserne.

Manipuleret data, som tilsyneladende repræsenterer sammenhænge som ikke er faktuelle, vil naturligvis sænke avisens troværdigheden. Og for FT er troværdighed brandets DNA.

FTs VV gør også samarbejdet mellem journalister og grafikere lettere, idet hver diagramtype er blevet defineret og beskrevet, så journalist og grafiker ved, hvad grafikken kan bruges til – og ikke mindst hvad den ikke kan bruges til.

Det gør det muligt for journalisten at sikre, at netop den visuelle repræsentation, der er ønsket, også bliver udarbejdet.

Dk referencetekst til FT Visual Vocabulary: Deviation grafik

 

Til undervisningssammenhæng har jeg udarbejdet en dansk oversættelse, som du her får et link til: FT_Visual_Vocabulary_DK-v.01 

Jeg har forsøgt at holde grafik titlen i samme farve som FT anvender til hver grafik gruppe.

Har du kommentarer, så skriv endelig. Det er tale om et work in progress, og formålet med oversættelsen er vidensdeling.

Andre data viz evangelister

Grafiker Kai Tomboc har lavet en infografisk oversigt over infografikkens historie.

Der er tale om en udpræget amerikansk måde at arbejde med data viz, som appellerer til følelserne på bekostning af informationsklarhed. Lidt cute.

Over there er ethos king, og selv om det beviseligt ér et effektivt virkemiddel i markedsføringssammenhæng, så fremmer det ikke altid faktuel formidling.

Brugere på sociale medier vil generelt gerne have noget ’pænt’ at se på, hvor stereotypt og profiling det end måtte være, og ofte får vi pænhed på bekostning af informationsværdien.

Vurder selv, om du mener Kai forbryder sig mod reglerne for effektiv og klar kommunikation i hendes infografik tidslinje om infografikken historie. https://learn.g2.com/history-of-infographics

Don’ts all over

Jeg lovede ovenfor, at foretage et visuel audit på to infografikker vedrørende generelle problematikker.

Problematikkerne vedrører nedenstående to punkter:

  1. overskuelighed,skabelse af overblik.
  2. imødekommende, engagerende og letter forståelsen af indholdet.

De to eksempler jeg har valgt, har det samme kommunikationsformål:

At skabe opmærksomhed om vigtigheden ved at holde sig i form

Det betyder ikke så meget at teksten ikke er læsbar i det ene eksempel. De problemstillinger jeg vil nævne er generiske og vedrører kombinationen af brug af ikoner og det centrale motiv.

To eksempler for infografikker med irrelevante visuelle elementer elementer. Stephanie Eisele, August, 2019. Kai Tomboc, April 2019 © easelly

 

Det centrale motiv – fokus på emnet

Løberen/løberne matcher overskriften. De to centrale elementer er anvendt for at fange din opmærksomhed.Emnet er tilsyneladende overskueligt.

Allerede nu har vores CPU registreret de seks ikoner ( samme farvebrug i venstre infografik er optimal. De forskellige ikonfarver kræver CPU aktivitet: betyder farverne noget?), og intuitivt tænker vi, at ikonerne giver referenceviden til seks specifikke punkter på kroppen, der udvikles eller forbedres ved træning. Helheden afstedkommer et overblik over emnet.

Men har ikonbrugen den forventede funktion?

Du blive sandsynligvis en smule skuffet, når du opdager, at der faktisk ikke er en 1:1 sammenhæng mellem ikon, tekst og det punkt på kroppen, der refereres til.

Faktisk er der ingen sammenhæng overhovedet i visse af tilfældende.

Letter ikonerne forståelsen af indholdet

CPU’en er vandt til at aflæse ikoner, så nærlæser du ikke  grafikken, laver din hjerne sin egen fortolkning, som måske er bedre en grafikeren, hvis du er mere vidende end vedkommende.

Med lidt god vilje kan et led-ikon referere til en lægmuskel eller et knogle ikon (hundeben) kan referere til et knæled, men reelt set er det meningsforstyrrende.

Infografikken letter ikke nødvendigvis forståelse af indholdet, fordi ikonerne ikke er 1:1 relevante.

Infografikkens imødekommenhed drukner nogle gange i illustratitis

Man må formode, at grafikeren bevidst har søgt at disponere fladen – eller er årsagen horror vacui/ – angsten for det tomme rum?

Der synes at være gået illustratitis i den i forsøget på at skabe en imødekommende data viz.

Grafikeren har glemt at sikre en entydig formidling af hovedbudskabet.

I stedet synes der at være fokuseret på at skabe noget ‘pænt’, noget vedkommende, et ideal vi kan arbejde henimod, drømme om eller identificere os med.

Dvs infografikken måske kan skabe engagement?

Eksempelvis ligner det ikon, der knytter sig til en tekstblok, om at kun 3 ud af 10 high school elever får 60 minuters fysisk aktivitet dagligt, et USB-stik eller en varmedunk, eller …?

Dit gæt kan være lige så godt som mit, for der er reelt ingen sammenhængen mellem tekst og ikon?

Entydighed er ikoners eksistensberettigelse – det gælder også brug

Resulterer ikonbrug i uklarhed eller ender de som rebusser, har man fejlet.

Ikoner anvendes alt for ofte som staffage, pynt uden mening. Det bør undgås.

Farver taler til vores følelser

Og farvebrugen? Er den bevidst valgt ?

Den venstre infografik hæver sig over den højre ved sin økonomiske farvebrug, der tydeligvis er valgt for at opnå væsentlig kontrast mellem forskellige elementer. Professionelt og tempereret klinisk. Troværdigt.

Det er tale om en disciplineret infografik, hvor baggrundsillustrationerne ikke virker forstyrrende.

Men kigger man nærmere, så bliver de til små rebusser, fordi prikker og progressionsbaren ikke umiddelbart er selvforklarende. Visuel støj.

Det er pænt, men også en smule forvirrende.

Test og få røde ører

Kan du huske det med de tre informationspakker?

CPUen laver simpelt hen sin egen historie, hvis noget virker bekendt, det giver mening i konteksten og formidlingen ikke er entydig.

Som producenter af data viz og infografikker får vi let røde ører, hvis vi ikke tester vores infografikker, fordi det kræver faktisk noget ud over det æstetiske.

Min opfordring er derfor: opsøg de røde øre så ofte du kan ved at teste blandt kollegaer og de nærmeste.

Det er lærerrigt og koster ikke så meget, som når kunden giver dig røde øre, fordi slutbrugeren måske ikke forstod budskabet, og du undlod at teste.

Det gør dig også til en bedre infografiker og måske en dag til en sand data vizard.

Kvantitativ data er en gave

Når nu overskriften er Exercise and fitness: By the numbers, så havde det været mere effektivt at anvende den orange farve til at fremhæve de kvantitative data set, altså talstørrelserne i teksten frem for den vårgrønne.

Og samtlige statistiske informationer på den venstre infografik, kunne med fordel have været vist, så man kunne forstå de kvantitative forskelle indholdt i teksten.

Ikonerne ville tillige have fået en mere tilbagetrukket plads, hvis de havde været vårgrønne. Og det havde jo passet ganske fint, da de ikke entydigt tilføjer noget til The numbers.

I stedet får vi profiling af en hvid veltrænet mænd i 30’erne – der med knyttede næver og løbeshorts, der gik af mode for 20 år siden – viser vejen, ganske som hans buddy i den anden infografik.

Han fører også an, så den kvindelige løber ikke farer vild.

Du spørger måske, om der findes en uskreven regel om, at der altid skal ligge en cirkulær form bagerst i billedet.

Det er et godt spørgsmål!

Grafikkerne er hver for sig sympatiske. De forsøger at være vedkommende, Hævet over enhver diskussion er, at den venstre er mere rugbrød end lagkage. Tak.

Når det handler om data viz: KISS – Keep It Simple Sweatheart.

 

Visual thinking er et effektivt værktøj,

når data viz handler om data sets og processer

 

Visual Thinking – måde at gøre processer og kvantitative data let forståelige. En slægtning til infografik. The Back of the Napkin, Dan Roam ©2009

 

Nogle gange handler den visuelle repræsentation måske ikke så meget om data sets, som om procesbeskrivelse.

Så har vi behov for andre værktøjer fx visual thinking.

Dvs. at visualisere tænkning som i tankeforløb og procesforløb. Flow.

Det handler denne blog ikke om, men er du nysgerring, så er Dan Roam et rigtig godt sted at starte. https://www.danroam.com/

 

 

SMADRET AF DESIGN – Ruined by Design

By | Brugervenlighed, Design, Etik, UX | No Comments

En radikal afklapsning til digitale designere

Er der behov for etiske retningslinjer for digitale designere?
spørger Mike Monteiro i Ruined by Design.

Det tænker jeg, også er en dansk diskussion værd, og foreslog at oversætte bogen, så studerende såvel som professionelle i Danmark kan deltage i diskussionen.

“Nothing would make me happier… ” svarede Mike
umiddelbart efter, 3 July 2019

24. september, da bogen var oversat ønskede han alligevel ikke at få en udgivelse i Danmark.

Bogens aktualitet reduceres hver dag, men som historisk dokumentar vil den være væsentlig mange år frem.

[  Oversættelsen er derfor ikke på min blog, kun en ultra kort kapitel- og afsnitsoversigt ]

Oversættelsen ligger backed up i Skyen, hvis nu …

Read More

TOUCHSCREENS intro

By | Brugervenlighed, Touchscreendesign, UX | No Comments

Introduktion: design til touchscreens

Touchscreens har siden starten af ’10erne vendt op og ned på, hvordan vi skaber den gode brugeroplevelse.

Touch opleves personligt. Det vi peger direkte på forekommer mere værdifuldt end det vi klikker på. Derfor anvender vi touch 77% oftere end mus, hvis vi har mulighed for det.

Josh Clark afdækker i bogen ’Designing for Touch’ fra A Book Apart, hvordan man ved at følge nogle få, enkle designprincipper ved design af touchscreens kan understøtte den gode brugeroplevelse. Read More