Mattias Axelssons från webbyrån Happiness föredrag från konferensen "Morgondagens webbplatser" som hölls i Kista den 7-8 november 2007 av IBC Euroforum. Programpunkten var "Användarvänlighet i framkant - lyssna till en vinnare av Web Service Award!".

1. [T O
F I E D] PS
CLASSI
[ EC
RE
T]
HEMLIGHETERNA BAKOM SVERIGES
BÄSTA INFORMATIONSSAJT
mattias.axelsson@happiness.se

2. MATTIAS AXELSSON
• ARBETE: Happiness
• UTBILDNING: Stockholms Universitet
Multimedia Pedagogik-Teknik, 120p
• TIDIGARE: Pacer, Clockwork, Everyday,
Telia, Stockholms Universitet Institutionen
för reklam och PR

3. HAPPINESS
• Webbyrå, produktionsinriktad
• Styrka: Pedagogik och användbarhet –
både i design och systemutveckling

4. PROJEKTET PREVENT.SE
• Uppdrag: Redesign och ny informationsstruktur
• Projekttid: 4 månader
• Luftig kravspecifikation – lång relation &
förtroende
• Tidigare erfarenheter guld värda
• Iterativ designprocess
• Resultat: Bästa webbplats information och
service Web Service Award 2006

5. VAD ÄR HEMLIGHETERNA?
• Hur kan man producera en webbplats som
är tillgänglig och användbar till ett
fördelaktigt pris?

6. ANVÄND WEBBSTANDARDER

7. ANVÄND WEBBSTANDARDER
Webbstandarder är regler för hur man kodar
•
Separera innehåll och design, helst strikt
•
Logiskt och korrekt uppmärkt innehåll
•
God sökbarhet
•
God tillgänglighet
•
Snabbare laddningstider
•
Innehållshanteringssystemet måste klara av detta
•
Prevent.se använder Consolo (www.consolo.se)
•
Finns även bra open source system
•

8. HAR DU WEBBSTANDARDER?
• Testa din webbplats på http://validator.w3.org/

9. TÄNK SÖKBARHET

10. TÄNK SÖKBARHET
• Webbplatsens egen sökmotor är viktig
• Prevent.se använder Google Search API
(som ”är” var gratis) för att söka på sina
egna sidor utan att det märks
• Detta ger bra gratis optimering i
sökmotorer
• Vokabulär / rubriksättning, använd bra ord

11. ÄR DU SÖKBAR?
• Testa att söka på din webbplats med
Google men skriv också
site:dinwebbplatsnamn.se
• Om du bara skriver
site:dinwebbplatsnamn.se ser du hur
många sidor och filer som finns i Google

12. TÄNK GRÄNSSNITT, INTE DESIGN

13. TÄNK GRÄNSSNITT, INTE DESIGN
• Look & feel, design, manér, känsla, estetik
• Ett mardrömsscenario kan vara när vi får
en färdig skiss på hur webbplatsen ska se
ut
• Prevent hade en bra grafisk manual där
mycket kunde anpassas för prevent.se
• Gör saker i en bra ordning, börja inte i fel
ände

14. VÅRA MILSTOLPAR
1. Förstudie, undersökning
2. Kreativ workshop – målgrupper – funktioner
3. Informationsstruktur med prioritering
4. Funktionsspecifikation
5. Skisser på gränssnitt
6. Prototyp och testning
7. Produktion
8. Lansering
9. Uppföljning

15. VAD ÄR ETT GRÄNSSNITT?

16. VAD ÄR ETT GRÄNSSNITT?

17. VAD ÄR ETT BRA GRÄNSSNITT?
Likadant överallt (konsistent)
•
Gör som andra gör (konventionellt)
•
Funktionellt (ett verktyg att användas)
•
Pedagogiskt (snabbt att lära)
•

18. PREVENT.SE GRÄNSSNITT

20. LOGISKA SÖKVÄGAR LOGISKA SIDTITLAR
UTNYTTJA SIDANS BREDD
RUBRIKSÄTTNING
KLICKBAR STRUKTURMARKERING SÖKRUTA
BILDPOLICY ANNONS/PUFFYTA
FOKUS PÅ NYHETER
TYDLIGA INGÅNGAR
TYPOGRAFI. LUFTIGHET. VERDANA.
SIDFOT & KONTAKT

21. SÖKRESULTAT SOM GOOGLE

22. AVSÄNDARE / IDENTIFIKATION
HUVUDNAVIGATION
STRUKTURMARKERING SÖK
NAVIGATION
INNEHÅLL
ANNONS
NYHETSBREV
PUFFYTA
IBLAND TVÅSPALT
EXTRA
FUNKTIONER

23. LÄTTJOBBAT INNEHÅLLSHANTERINGSSYSTEM (CMS)

24. FÖLJ UPP

25. FÖLJ UPP
• Använd ett statistikverktyg
• Prevent.se använder Urchin
• Urchin köptes upp av Google och blev Google Analytics
som är gratis och finns på svenska
• Spåra populära funktioner, avdelningar eller innehåll och
lyft fram dessa
• Spåra buggar och fixa
• Spåra felaktigt innehåll och rätta till, eller radera det
• Spåra ointressant innehåll och prioritera ned det
• Titta på trender, få en känsla för webbplatsen
• Gör undersökningar löpande

26. PROBLEM

27. PROBLEM
• Integration av andra system som är gamla
eller som inte är bra, t ex dåliga
innehållshanteringssystem
• Dubbla sökningar – sajten och bokhandeln
• Oseriösa sökmotoroptimeringsföretag
• Många småsaker, t ex förstoring av text

28. MEGATRENDER

29. MEGATRENDER
• Bredband (bredband mer än 50%)
- multimedia, video, flash
• Sökbarhet (Google mer än 50%)
- webbstandarder, xhtml
• Öppenhet
- Open source, LAMP, designmönster,
öppna API som t ex Google Search,
bloggar, släpp in användarna

30. FRAMTIDEN

31. FRAMTIDEN
Inloggning, kanske OpenID?
•
RSS-flöden
•
Kommentarer, kommunikation
•
Mikroformat
•
Etiketter och sökmoln
•
Utnyttja smarta tjänster på webben via API
•

32. KOM IHÅG

33. KOM IHÅG
• Använd webbstandarder
• Tänk sökbarhet
• Tänk gränssnitt, inte design

34. OCH DET VIKTIGASTE

35. GE ALLT
“Don't do anything by half. If you love
someone, love them with all your soul.
When you go to work, work your ass off…”
Henry Rollins