Ingen%20bildrubrik

1
(No Transcript)
2
svart - mellan dröm och verklighet
www.magazine.se/webbdesign
3
svart texten är bortglömd
ATT UTFORMA GRÄNSSNITT
4
DU BESTÄMMER INTE

• Användaren bedömer, väljer och använder efter
  förmåga
• Enda vägen till framgång är att anpassa sig till
  användaren
• Webben saknar i princip regler
• Användaren lär sig inte av dig utan av andra!

5
WEBBDESIGN EJ ESTETIK

• Designen övergår från estetik och
  informationsöverföring till att vara ett verktyg.
• Webbsidan innehåller ofta 50 verktyg och bara
  50 information
• Webbdesign är mer likt industridesign än klassisk
  grafisk design

6
IDAG SKA VI TALA OM

• Vi definierar gränssnittet
• Argument för att bry sig
• Skilja på webbdesign och grafisk form
• Hur kan man arbeta för att lyckas?
• Ta fram en checklista tillsammans
• Göra en hel del övningar

7
ETT BRA GRÄNSSNITT /1

• Ska vara konsistent
• Ska vara konventionellt
• Ett verktyg att användas

8
VAD ÄR ETT GRÄNSSNITT?

• Kommunikation
• In- och utmatning
• Återkoppling
• Grafisk design Grafiskt gränssitt

9
ETT BRA GRÄNSSNITT /2

• Datorn ska inte verka dum
• Användaren ska inte känna sig dum

10
ETT BRA GRÄNSSNITT /3

• Gå snabbt att lära
• Hjälpa användaren att utföra och förstå
• Ge få misstag

11
ETT BRA GRÄNSSNITT /4

• Trygg miljö bra
• Visa möjligheterna
• Allt för att maximera användbarheten!

12
VIKTIGAST

• överblick
• navigation
• position

13
VIKTIGT

• avsändare
• datering
• kontakt

14
TYPER AV INTERAKTION

• Kommando
• Inmatning
• Manipulation
• Återkoppling

15
LITE ATT TÄNKA PÅ

• Effektivitet kontra lärbarhet
• Det som görs ofta ska vara enklast
• Det är lättare att känna igen än att komma ihåg.

16
svart texten är bortglömd
TEXTEN ÄR BORTGLÖMD
17
FUNKTIONELL TEXT INFORMATIV TEXT

• Texten är ett verktyg också.
• Måste visa rätt och avslöja.
• Hjälp läsaren att fatta rätt läsbeslut.

18
TEXT ÄR SVÅRT

• Läsaren är otålig
• Informationsmängden är enorm
• Det är lätt att gå därifrån
• Typografin styrs av användaren

19
WEBBTEXT ÄR SPECIELLT

• Besökaren vill inte läsa utan skummar
• Besökaren letar efter information
• Besökaren ser texten före grafiken
• Text är mycket hög grad av abstraktion
• Läshastigheten är låg

20
LÄSHASTIGHET

• Tal 120 ord/min
• Datorskärm 150 ord/min
• Skrivmaskinstext 200 ord/min
• Ordbehandlad utskrift 320 ord/min
• Professionellt typograferad text 460 ord/min
• Källa Retrac

21
ETT FALL

• Webb för naturupplevelser i Nebraska
• Testad utifrån
• att utföra en uppgift
• fel som användaren gör
• hur mycket man minns av webbtjänsten
• hur man minns strukturen
• subjektiv känsla för webbtjänsten

22
ORIGINALTEXTEN

• Nebraska is filled with internationally
  recognized attractions that draw large crowds of
  people every year, without fail. In 1996, some of
  the most popular places were Fort Robinson State
  Park (355,000 visitors), Scotts Bluff National
  Monument (132,166), Arbor Lodge State Historical
  Park Museum (100,000), Carhenge (86,598), Stuhr
  Museum of the Prairie Pioneer (60,002), and
  Buffalo Bill Ranch State Historical Park (28,446).

23
HALVERAD LÄNGD

• In 1996, six of the best-attended attractions in
  Nebraska were Fort Robinson State Park, Scotts
  Bluff National Monument, Arbor Lodge State
  Historical Park Museum, Carhenge, Stuhr Museum
  of the Prairie Pioneer, and Buffalo Bill Ranch
  State Historical Park.

58
24
PUNKTER

• Nebraska is filled with internationally
  recognized attractions that draw large crowds of
  people every year, without fail. In 1996, some of
  the most popular places were
• Fort Robinson State Park (355,000 visitors)
• Scotts Bluff National Monument (132,166)
• Arbor Lodge State Historical Park Museum
  (100,000)
• Carhenge (86,598)
• Stuhr Museum of the Prairie Pioneer (60,002)
• Buffalo Bill Ranch State Historical Park
  (28,446).

47
25
OBJEKTIV TEXT

• Nebraska has several attractions. In 1996, some
  of the most-visited places were Fort Robinson
  State Park (355,000 visitors), Scotts Bluff
  National Monument (132,166), Arbor Lodge State
  Historical Park Museum (100,000), Carhenge
  (86,598), Stuhr Museum of the Prairie Pioneer
  (60,002), and Buffalo Bill Ranch State Historical
  Park (28,446).

27
26
ALLT PÅ EN GÅNG

• In 1996, six of the most-visited places in
  Nebraska were
• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park Museum
• Carhenge
• Stuhr Museum of the Prairie Pioneer
• Buffalo Bill Ranch State Historical Park

124
27
HUR SKRIVER MAN? /1

• Kort text
• Sammanfatta i punkter
• Ha bara ett budskap per mening
• Strukturera texten hierarkiskt/logiskt
• Markera viktiga ord med fetstil (ej med färg
  eftersom det blandas ihop med länkar)

28
HUR SKRIVER MAN? /2

• Hjälpsamma avslöjande rubriker
• Rubriker rakt på sak
• Bara det som syns finns
• Använd omvänd pyramid slutsatsen först
• Betydelsefulla underrubriker

29
SLUTSATSER

• Texter som gjorts för tryck passar sällan på
  webben direkt.
• Myndighetssvenska inte bra långa bakvända
  meningar med flera satser.
• Det går att förbättra sig!

30
svart texten är bortglömd
ATT VISA HÄNSYN
31
TESTA

• Testa med 3 7 användare
• Gör det i flera faser
• Gör det flera gånger
• Enkla tester räcker

32
(No Transcript)
33
HUR STRUKTURERA?

• Strukturera givetvis inte utifrån
  avsändarorganisationens struktur
• Bestäm dina mål med webbplatsen
• Låt användarna bestämma strukturen!

34
(No Transcript)
35
HUR TYPOGRAFERAR MAN?

• Ej kursivt (fult) eller understruket (länkar)
• Fetstil bra
• Punktuppställningar
• Skärpa och kantutjämning vid behov
• Peta i grafikbaserad text för hand
• Använd ej färgad text (länkar)

36
svart
SKAPA ORDNING
37
STRUKTURMODELLER

• Hypertext
• Hierarki
• Flerval
• Flöde
• Frågor och svar
• Svart låda

38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
(No Transcript)
44
(No Transcript)
45
(No Transcript)
46
Flikar
47
(No Transcript)
48
(No Transcript)
49
svart texten är bortglömd
FOTOGRAFIET ÄR DÅLIGT ANVÄNT
50
BILDER

• Lika viktigt som texten
• Skarpa och tydliga
• Beskär fram det viktiga
• Symbolbilder
• Snabba små och bredd och höjd spec.
• Effekter förvirrar

51
(No Transcript)
52
(No Transcript)
53
FÄRG

• Länkfärg
• Symbolik
• Indelning av sidan
• Navigation
• Färgsatt text
• Kulöromfång
• Färgblindhet

54
svart texten är bortglömd
KONKRETA TIPS
55
NAVIGATION

• Runt 7 huvudgrupper/länkar
• Ett klick till sök, hjälp och karta
• Länka på rätt sätt.
• Adressen ska leda rätt
• Kombinera navigation, position och överblick

56
NO FRAMES!

• Bokmärken fungerar ej
• Titel fungerar ej
• URL visas ej
• Utskrifter blir ofta fel
• Rullningslister tar plats och stör
• Svåranterat för användaren

57
VALSITUATIONER

• Metafor / Knappar
• Snabb / Effektfull
• Upplevelse / Nytta
• Titta / Interagera
• Profil / Experimentell
• Generell / Personanpassad
• Erfaren / Oerfaren
• Öppen / Teknikkrav

58
ARBETSGÅNGEN

• 1 Behovsanalys
• 2 Prioritering
• 3 Informationsstrukturering
• 4 Utformning av Gränssnitt och funktonell text
• 5 Interaktionsprototyp
• 6 Genomförande
• 7 Testning
• 8 Drift
• 9 Utvärdering

59
VERKTYG

• Strukturskisser
• Dispositionsdesign
• Interaktionsprototyper
• Lapptest
• Video
• REAL
• Större användartester

60
VAD GER FRAMGÅNG?

• Leva upp till läsarens förväntan
• Relevant innehåll
• Nytta och mervärde!
• Vara nära läsaren
• Innehåll anpassat till webben
• Delaktighet hos användaren

61
TEKNIK FÖR FRAMGÅNG
T

• Skiljer design, teknik och innehåll
• Enkel att använda
• Tillåter interaktivitet
• Lätt att bygga ut och förändra

I
D
D
62
RESURSER FÖR FRAMGÅNG

• Dedicerad personal
• Både informations- och teknikkunniga
• Satsa på förarbetet
• Vad händer när man webben växer - använd
  publiceringssystem
• Utvärdera och bygg om vid behov - webben lever

63
VILKA ÄR PROBLEMEN?

• Kunderna fast i traditionellt tänkande
• Blir ett sidoprojekt - liten budget
• Tro om att det går automatiskt
• Tro om att parallell publicering finns

64
KRAV PÅ INNEHÅLLET

• Text (läsning sker annorlunda)
• Bild (låg upplösning och litet format)
• Designen och layout (begränsad)
• Designen mer än estetik och informationsförmedling

65
CYKELSÄLLSKAPET

• Gissa
• Behovspröva
• Testa
• Sjösätt
• Omvärdera
• Dra nytta av erfarenheter

66
svart - mellan dröm och verklighet
HUR ARBETAR MAGAZINE?
67
VANLIGASTE FELEN

• Dålig överblick
• Ej användaranpassad struktur
• Papperstexter
• Ohjälpsam funktionell text
• Dålig testning

68
SAMMANFATTNING

• Se designen som ett verktyg
• Låt användaren bestämma
• Testa
• Webbanpassa textmaterialet
• Skilj på funktionell och informativ text