eyereply: guidelines til brugervenligt responsivt webdesign

EyeReply!Improve your visual reach

© EyeReply ApS - 2014! All rights reserved - eyereply.com Side

EyeReply Guidelines

BRUGERVENLIGT RESPONSIVT WEBDESIGN !!!EyeReply ApS - Oktober 2014

1

http://eyereply.com


© EyeReply ApS - 2014! All rights reserved - eyereply.com Side 2

RESPONSIVT DESIGN - HVAD KRÆVER DET?

Billede fra: Magentotutorial.net

GRUNDLÆGGENDE FUNKTIONALITET DER SKAL VÆRE PÅ PLADS ‣ Grids der tilpasser sig skærmstørrelsen.‣ Billeder der er skaleret relativt til skærmstørrelsen.‣ Style sheet som ændres baseret på vinduesstørrelse og browsertype.!OVERVEJELSER OMKRING NYE INTERAKTIONSPARADIGMER OG HVORDAN DE INTEGRERES ‣ Interaktionspunkter skal have en størrelse, så de let kan rammes med tommeltotten

eller klikkes på med musen.‣ Ikoner har fået en ny værdi i RWD de fungerer som knapper og synliggør interaktion

med menuer på tværs af platforme.‣ Infinite scroll er et oplagt interaktionsvalg, fremfor paging, for alle sidetyper.‣ Navngivning i niveau 1 menuen er vigtigere end nogensinde - Menupunktet skal kunne

stå alene uden at have niveau 2 i menuen til at danne en forståelig helhed.!

TILTAG DER GØR EN RESPONSIVE WEBLØSNING ENDNU MERE BRUGBAR ‣ Hastighed der er i top, så billeder, navigation og det øvrige indhold hentes hurtigt.‣ En komplimenterende oplevelse til desktoppen, ikke bare mobil “venlig”.‣ En gnidningsløs oplevelse på tværs af platforme.

67% højre tommeltot!33% venstre tommeltot!kilde::http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Billeder fra: http://en.wikipedia.org/wiki/Pointer_%28graphical_user_interfaces%29

og http://shrineofapple.com/blog/2011/11/05/lisamouse/

http://eyereply.com



VISUELT DESIGN - FORSKELLIGE SKÆRMSTØRRELSER

element 1

element 2

element 3

element 4

element 5

EFFEKTIV SKÆRMKOMMUNIKATION PÅ TVÆRS AF SKÆRMSTØRRELSER ‣ Brug gridstørrelser der gør det nemt at knytte info sammen.‣ Definer informationen i spalter med margin og whitespace for at hjælpe hjernen til at finde struktur på siden.‣ Minimer den kognitive belastning ved at bruge få elementer i lister og menuer, så der skabes et hurtigere overblik.‣ Brug headlines, farver, kontraster, former og billeder der effektivt fanger opmærksomheden til at bringe brugeren rundt på skærmen.

Anvend et overskueligt antal listelementer.

Anvend en gridstørrelse der hjælper brugeren med at knytte informationen sammen.

Ring eller skriv til EyeReply så hjælper vi med brugerevaluering af strukturen i jeres informationsarkitektur eller en eyetracking der afdækker om informationen ses og om jeres interface er overskueligt, og nemt at anvende og navigere i for jeres brugere. +45 2235 7808, [email protected]

Billede fra: www.waldbeek.com/en/responsive-webdesign

http://eyereply.com

mailto:[email protected]



VISUELT DESIGN - FRA STOR SKÆRM TIL LILLE SKÆRM

NÅR INDHOLD FRA DEN STORE SKÆRM SKAL NED PÅ DEN LILLE SKÆRM ‣ Fokuser på at vise kerneindholdet; 1) Prioriter indholdet via brugerindsigter, 2) Afdæk brugen af den specifikke platform og 3)

Vælg det indhold der passer til behov og brugssituation på den givne platfom.‣ Reducer baggrundsbilleder og teksturer (mobile enheder øger opmærksomheden og fokus hos brugerne så der skal “larmes”

mindre i interfacet for at fange opmærksomheden).‣ Fjern unødvendigt white space, linjeskift og visuelt støj imellem budskaberne.‣ Anvend eventuelt nemt afkodelige ikoner som genkendelige call-to-actions.

Ring eller skriv til EyeReply så hjælper vi med brugerindsigter og prioriteringsprocessen omkring indholdet. Herudover tester vi med eyetracking om jeres interface virker på en stor såvel som en lille skærm. +45 2235 7808, [email protected]

VISUELT DESIGN - STOR SKÆRM VS LILLE SKÆRM - FORSKELLE

Flerspalte layout der ikke kan overskues samtidigt. < > Enkeltspaltelayout der ikke er bredere end at det kan overskues. Mere plads mere information. < > Mindre plads mindre information. Mere plads giver ofte mere støj. < > Mindre plads giver mere fokus på specifikt indhold.

Sværere at fange opmærksomheden i den, for afkodningen, rette rækkefølge. < > Det er hurtigt at afkode hvad der er på skærmen. Sværere at zoome ind for brugeren og finde detaljen. < > Sværere at zoome ud for brugeren og få overblikket.

vs

http://eyereply.com




VISUELT DESIGN - TEKST & LÆSBARHED

TEKST & LÆSBARHED PÅ DEN STORE SKÆRM ‣ Sikre at teksten er læsbar og ikke forsvinder ind i baggrunden (især hvis den er anbragt på billeder).‣ Bredt centreret layout som fylder browservindue helt ud (men vær stadig opmærksom på at ikke alle har wide-screen).‣ Brug en regulær skrift der er læsbar på en skærm, fed tekst til tekst der skal skille sig ud og tiltrække opmærksomhed.‣ 60 tegn per linje er et godt udgangspunkt på desktop, når en tekst skal læses.

Ring eller skriv til EyeReply så hjælper vi med at teste brugernes forståelse af jeres redaktionelle indhold gennem brugerinterviews samt læsbarheden af jeres tekster via en eyetracking. +45 2235 7808, [email protected]

TEKST & LÆSBARHED PÅ DEN LILLE SKÆRM ‣ Gør ikke overskrifterne for store. På en stor skærm er det nødvendigt at bruge meget synlige overskrifter for at fange

opmærksomheden på et stort areal blandt meget andet, dette er ikke nødvendigt på en lille skærm.‣ Gør ikke brødteksten for lille (skal kunne læses uden at zoome).‣ Justering af linjeafstand på mobil if til desktop kan have en positiv betydning for læsbarheden.‣ Tynd skrift kan bruges på mobil men kan give problemer på desktop hvor en federe skrift ofte er god.‣ 35-40 tegn per linje er et godt udgangspunkt på mobilen, når en tekst skal læses.

5

http://eyereply.com




VISUELT DESIGN - VISUELLE HIERARKIER

VISUELLE HIERARKIER PÅ DEN STORE SKÆRM ‣ Led opmærksomheden hen på det vigtigste (redaktionelle) indhold med tydelige overskrifter, farver,

kontraster og billeder som trigger det perifere syn (gør det vigtigste mest synligt).‣ Undgå for meget støj og mange elementer på siden.‣ Gør hovedbudskabet visuelt tydeligt, så det fanger opmærksomheden inden for de første 2-3 sekunder.‣ Gør call-to-action visuelt tydeligt i et klart sprog.

Ring eller skriv til EyeReply så hjælper vi med at afdække om jeres informationshieraki er effektivt og om brugerne for den rette information på det rette tidspunkt. +45 2235 7808, [email protected]

VISUELLE HIERARKIER PÅ DEN LILLE SKÆRM ‣ Brug mindre proportioner mellem overskrift og brødtekst.‣ Brug mindre afstand for at differentiere hierarkiet omkring overskrifter. Brug i stedet

andre værktøjer som eksempelvis kontrast, farve og fed skrift til at definere hierarkiet.‣ Brug en enkelt simpel margin for at undgå at spilde pladsen.

6

http://eyereply.com




Billede fra: www.nextgen-gallery.com

VISUELT DESIGN - BILLEDER & GRAFIK

BILLEDER & GRAFIK PÅ DEN STORE SKÆRM ‣ Brug billeder til at styre afkodningen af siden og til at trække blikket hen på de vigtigste budskaber først.‣ Brug billeder i kontekst til at understrege pointer, skabe tryghed og troværdighed.‣ Brug farver og kontraster til at styre blikket rundt på siden i den rækkefølge budskabet bør afkodes.

Ring eller skriv til EyeReply så hjælper vi med at afdække brugernes oplevelse af jeres billeder og grafik, og om billederne sender det rigtige budskab og fanger opmærksomheden effektivt via interviews og/eller en eyetracking. +45 2235 7808, [email protected]

BILLEDER & GRAFIK PÅ DEN LILLE SKÆRM ‣ Skaler billeder relativt ift skærmen, undgå billeder der går ud over “kanten” på den mobile skærm.‣ Sørg for at detaljegraden i billedmaterialet er høj nok til at brugeren kan afkode indholdet uden at

skulle zoome unødvendigt.‣ Undgå at der er for stor afstand mellem billed og billedtekst og for massive farvefelter så siden som

bryder siden op.

7

http://eyereply.com




VISUELT DESIGN - DEN LILLE FORSKEL VED EN LILLE SKÆRM

TILTAG DER KAN GØRE OPLEVELSEN PÅ EN LILLE SKÆRM MEGET MERE TILGÆNGELIG ‣ Yderligere info eller hjælp der indgår i kontekst, så det er tilgængeligt hvor der er brug for det.‣ Undgå pop-up.‣ Sørg for at det vigtigste redaktionelle indhold vises helt i toppen af siden.‣ Udnyt at løsningen er på en mobil platform og gør det nemt at anvende f.eks. telefonen.‣ Led brugeren videre ved at have tilbage til top, eller navigation videre i bunden af siden.‣ Kollaps kolonner i tabeller som ikke kan være på skærmen pga skærmbredden, undgå scroll og at

det bliver nødvendigt at zoome ind eller ud.

Ring eller skriv til EyeReply så hjælper vi med viden omkring den specifikke platform, med at analysere brugssituationen, motiver og behov hos jeres brugere. +45 2235 7808, [email protected]

HERUDOVER ‣ Forstå brugen af den specifikke platform.‣ Forstå brugssituation som løsningen indgår i.‣ Forstå brugernes motiver og behov.

8

http://eyereply.com



COOKIE ART INGEN KONVENTIONER ENDNU…

9

Billede fra: switchboard.org.uk/cookie-policy-2/

http://eyereply.com



DIGITAL KOMMUNIKATION

MÅL DIN WEBINDSATS Kontakt EyeReply og hør hvordan I kan evaluere jeres digitale løsning.

10

http://eyereply.com



UX-Lab i det centrale KøbenhavnEyetracking udstyr: Tobii X2 22”- 40” skærm,

Mobile eyetracking til tablet og smartphone

EYEREPLY BRUGERTESTER VIA TRADITIONELLE METODER KOMBINERET MED EYETRACKING

Typisk proces for hver respondent 1. (5 min) Brief og forinterview.!

2. (25 min) Respondenten udfører opgaver på desktop, tablet og mobil og interviewes efterfølgende.!

3. (10 min) Udfyldelse af spørgeskema.!

Interviewvarighed for hver respondent ca. 40 minutter.!

!Rekruttering Respondenterne er rekrutteres gennem vores eget brugerpanel og delvist gennem eksterne rekrutteringspartnere, alt efter målgruppedefinitionen.!!Alle respondenterne benytter som udgangspunkt smartphone og/eller tablet udover desktop til at gå på internettet.!!

Tid og sted En almindelig undersøgelse tager fra et par dage og op til et par uger, alt efter kompleksiteten. Vi laver undersøgelsen hvor målgruppen er og har gode partnere og felt-erfaring i mange verdensdele.

EyeReply HQ

INDIEN & KINA Lokalt velafprøvet

eyetracking netværk og stor erfaring med

feltarbejde.Globale eyetracking, UX og market research erfaringer med et

netværk i 21 lande.

US Lokal eyetracking

partner med lokationer i

supermalls i 14 stater.

11

http://eyereply.com



KOMMUNIKATION ER INTET UDEN OPMÆRKSOMHED EyeReply er passionerede omkring optimering af visuel opmærksomhed, motivation og brugeroplevelse. Vi er dedikerede til at sikre dit brand, budskab og produkt bliver set og brugt. Gode købs- og brugeroplevelser kræver at kundskaben at kommunikere effektivt visuelt og kombineres optimalt med æstetikken og kvalitetsoplevelsen i designet. Giv brugerne en helhedsoplevelse, der brænder sig fast og som er effektiv, intuitiv og enkel.!

Vi kan godt lide traditionelle undersøgelsesmetoder, men også nye teknologier og innovative tilgange til at måle visuel effektivitet og brugeroplevelse. Vi tror på, at vi gennem innovativ tænkning er i stand til at flytte grænserne for vores indsigt, og dermed ikke kun svare på hvad, der fungerer i en given situation, men også hvorfor, det fungerer.!

Vi finder vores inspiration i blandt andet eyetracking, neurovidenskab, computer-videnskab, psykologi, psykometri, biometri, socialøkonomi, brugeroplevelse, usability, menneske-maskine interaktion, ergonomi, fysiologi, kognition og mange andre steder.!

!

BAG EYEREPLY Sofie Bech ([email protected]), mob: +45 2819 3000!Sofie har mere end 10 års erfaring i analysebranchen inden for brugervenlighed og brugercentreret design. Kvalitativ analyse er Sofies fokusområde. Eyetracking er en del af metodeapparatet og kombineres sammen med de kvalitative interviews for at skabe solid viden.!Sofie har rådgivet og leveret analyser til bl.a. TDC, DR, Udenrigsministeriet, Codan, Virk.dk, ATP og Berlingske Media.!!Jakob de Lemos ([email protected]) mob: +45 3124 6588!Jakob er ekspert i evaluering af opmærksomhed, visuel perception og kommunikation via traditionelle metoder samt biometriske mål. Jakob har mere end 10 års erfaring med eyetracking, forbrugerindsigt og softwareudvikling og har modtaget et patent for sit arbejde inden for området.!Jakob har med succes har kombineret traditionelle kvalitative og kvantitative analysemetoder med de seneste modeller indenfor evaluering og kvantificering af visuel opmærksomhed, motiv- og behovsanalyse. Teknikker som bliver anvendt af mange virksomheder i dag. Jakob har leveret know-how og rådgivet virksomheder som P&G, Nestlé, Givaudan, Arla, McDonald’s, Telenor, Nordea, Carlsberg, ATP og Kraft Foods blandt mange andre.

Kontakt info:!EyeReply aps!Læderstræde 15, 1. sal!1201 København H!!Mail: [email protected]!Tlf: +45 2235 7808!

Kunder som vi blandt andre har løst opgaver for det seneste år (referencer ved forespørgsel):

OM EYEREPLY

12

http://eyereply.com

mailto:[email protected]?subject=





OPHAVSRET

Alle rettigheder til guidelines, brugertestmateriale, know-how, teknikker, metoder, tabellayout, skemaer, billeder, datamateriale og tekster i “EyeReply Guidelines - Brugervenligt Responsivt Webdesign” tilhører EyeReply ApS, med mindre andet er angivet - og må ikke anvendes uden forudgående tilladelse fra EyeReply ApS.!

Repræsenterer du et nyhedsmedie, er du velkommen til at citere og gengive indhold fra “Guidelines #2 - Brugervenligt responsivt design” så længe det sker på en loyal måde og med tydelig kildeangivelse (Kilde: EyeReply ApS).!

Uden en forudgående tilladelse fra EyeReply må tekst, tabeller eller billeder fra guidelines ikke "embeddes" på andre hjemmesider.!

Alle er velkomne til at sende guidelines rundt i komplet uredigeret form, men du må ikke klippe i guidelines og vise dele heraf i egne præsentationer eller på internettet.!

Ønsker du at anvende dele af guidelines herunder tabeller og tekst i en anden kontekst så kontakt os på [email protected]!

13

http://eyereply.com




Tak for opmærksomheden!


www.eyereply.com !

Email: [email protected] Telefon: +45 22 357 808

14

http://eyereply.com

http://www.eyereply.com

eyereply: guidelines til brugervenligt responsivt webdesign

Presentations & Public Speaking