Webdagene2007 netlife usability netlife ixd UI webutvikling christianjohansen brukervennlig brukervennlighet

1. Webdagene 2007
Webutvikling Effektiv, lønnsom og
tilgjengelig webutvikling
Christian Johansen

2. Hvorfor bry seg om utvikling?
Nå flere brukere
Effektiviser prosjekter
Effektiviser prosjektdeltakere
Unngå teknisk søkemotoroptimalisering
Unngå nettleserlås
Imøtekom fremtidige lover

3. Problem: for liten tekst

4. Problem: for liten tekst

5. Problem: For liten tekst

6. Tekststørrelse intet problem

7. Problem: Liten avkrysningsboks

8. Stort klikkbart område

9. Bruk logisk strukturert data

10. og maskiner forstår innholdet

11. Tilgjengelighet
Nå ut til flere brukere
Lovforslag foreligger

12. Ferdig søkemotoroptimalisert
Ranger høyt med riktig implementasjon
Unngå dyr teknisk optimalisering i etterkant

13. Unngå nettleserlås

14. Hva er grensesnittsutvikling?
Implementering av skjermbilder
HTML/XHTML
CSS
Javascript
Flash
AJAX, DHTML (ikke egne teknologier)
Kunnskap om W3C-standarder

15. Hva er HTML?
Strukturert tekst
IKKE et design-verktøy
W3C-standard

16. Hva er XHTML?
HTML reformulert som XML
W3Cs arvtaker for HTML

17. Hva er CSS?
Designverktøy kontroller nettsidenes utseende
W3C-standard

18. HTML-eksempel

19. HTML har ikke et utseende

20. Samme dokument, annen CSS

21. Samme dokument, annen CSS

22. HTML eller XHTML?
Ingen store praktiske forskjeller
Bruk semantisk HTML/XHTML

23. Hva er semantisk HTML?
Et begrep/en praksis, ikke en standard
Elementer brukes for å beskrive hva
innhold er, ikke hvordan det ser ut
Eksempler:
<ul>, <ol> og <dl> for lister
<h1>, <h2> <h6> for overskrifter
<abbr> for forkortelser
<blockquote> for lengre sitater
Og flere

24. Nytteverdi #1
Ekstrahering av data Semantic Extractor

25. Nytteverdi #2
Ekstrahering av data Semantic Extractor

26. Nytteverdi #3 - Mikroformater

27. Nytteverdi #3 - Mikroformater

28. Hva er WCAG?
WAI W3Cs tilgjengelighetsgruppe
WCAG retningslinjer for tilgjengelighet

29. Hvem gjør grensesnittsutvikling?
Webdesignere
Interaksjonsdesignere
Grafiske designere
Webutviklere
Utviklere/systemutviklere
Kreative utviklere
Hvem gjør hva?

30. Forventninger vs kompetanse
Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roger Guttormsen, .IXD
Svar fra 109 kommunikatører, 130 utviklere og 48 designere

31. Forventninger vs kompetanse
Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roger Guttormsen, .IXD
Svar fra 109 kommunikatører, 130 utviklere og 48 designere

32. Forventninger vs kompetanse
Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roger Guttormsen, .IXD
Svar fra 109 kommunikatører, 130 utviklere og 48 designere

33. Dedikerte grensesnittsutviklere
Grensesnittet får en klart definert rolle
Designere og (backend)utviklere kan
konsentrere seg om sitt
Teknisk søkemotoroptimalisering blir
innebygget

34. Sentralisert design

35. er raskt å skinne om

36. og raskt å endre struktur på

37. Prototype som arbeidsverktøy

38. Prototype som arbeidsverktøy

39. Tydelige roller og oppgaver
Alle vet hva de skal gjøre
Alle vet hva de jobber ut ifra
Alle vet hva de skal levere

40. Jeg vil ha:
Design som Photoshop-filer
Wireframe som PDF, Visio, Powerpoint osv
Andre funksjonelle beskrivelser

41. Jeg leverer
Klikkbar prototype
Semantiske HTML-maler
CSS
Bilder og grafikkelementer
Eventuell Javascript
Annet(?)

42. Stå på krava
Ikke avleggs å kreve gode løsninger
Ikke la backenden styre prosjektet
Ha krav til kvalitet!

43. Bry deg om utvikling
Få flere brukere (tilgjengelighet)
Ranger bedre i søkemotorene
Effektiviser prosjekter
Bruk riktig håndtverkere
Krev godt håndtverk

44. Takk for meg
Christian Johansen
Grensesnittsutvikler
.IXD
christian@ixd.no - Mob. 934 17 480
www.ixd.no - www.kuttisme.no www.cjohansen.no
Lær mer på Dataforeningens kurs:
Webteknologi for ikke-teknologer 11. oktober