Slides from my lecture on Interaction Design at BI Bergen, 14.04.09 Part 3

1. IxD3
interaksjonsdesign

2. Grensesnitt
IxD elementer
Nå skal vi se nærmere på grensesnitt og andre elementer som preger interaksjonsdesign.

3. Først ut er det grafiske grensesnittet. Vi kjenner alle dette fra PC’en. Et desktop GUI består av
vinduer til å vise innhold, ikoner til å representere innhold, menyer for å liste funksjoner,
håndtak for å justere vinduer, og widgets, som lar oss endre verdier med slidere, radiobokser
og lignende.

4. Menyer
• Visuell oversikt over alle funksjoner
• Tydeliggjør hierarkiske sammenhenger
• Husker på vegne av brukeren
Dropdownmenyer er en visuell fremstilling av alle funksjoner i et gitt program. - De
tydeliggjør de hierarkiske sammenhengene mellom funksjoner ved å gruppere og sortere
dem. - Og ikke minst gjør menyer det lett å huske kommandoer og funskjoner.

5. Ikoner
• Snarvei for mye brukte funksjoner
• Visuell påminner
• Forklarende visuelle metaforer
Ikoner brukt i programmer er snarveier for mye brukte funksjoner, - og en visuell påminner
om en mulighet. - Ikoner er visuelle metaforer som kan forklare en funksjon på en lettfattelig
måte

6. Det skulle være lett å se hva disse gjør. Gode metaforer tar utgangspunkt i abstrakte
symboler, fremfor konkrete avbildninger.

7. Hvor mange har bruktHva gjør denne?
en?
Hva gjør for eksempel dette ikonet? - Hvor mange har faktisk brukt en floppy disk? Det
konkrete blir fort foreldet, spesielt når det gjelder teknologi.

8. Standarder
• Standarder nødvendig
• Enkelt å ta i bruk nye produkter
• Infrir forventet respos
• Gradvis evolusjon
Et mye diskutert tema er standarder. Standarder er nødvendig for - å gjøre det enkelt å ta
ibruk nye produkter, og - for å innfri forventet respons. - Interaksjonsdesign er likevel en
stadig forbedring, en konstant evolusjonsprosess etterhvert som teknologi og metoder
forbedres.

9. “ Obey standards unless there is a truly superior alternative”
- Alan Cooper
men regler er som kjent til for å brytes, men når? “Obey standards unless there is a truly
superior alternative”. Av og til ser en muligheten til å gjøre ting på en måte som virkelig
forbedrer brukeropplevelsen. Det er slik interaksjonsdesign beveger seg fremover.

10. Tilpasningsdyktig
• Smarte løsninger tilpasser seg brukeren
• Skreddersøm: Endre utseende
• Personifisering: Endre preferanser
• Tilpasning: Endrer form/innhold/features
• Hacking: Innovativ bruk av produktet
Avanserte løsninger i dag er mer enn bare kvalifiserte gjett om hva brukeren ønsker og
trenger. De er i stand til å tilpasse seg brukeren. Dette gjøres på flere måter: - Skreddersøm
lar brukeren endre utseende på siden (MySpace) - Personifisering lar brukeren endre
preferanser for hvordan siden skal oppføre seg - Automatisk tilpasning endrer hva som vises,
og hvordan, basert på bruksmønster etc - og til sist Hacking, hvor brukeren selv tar i bruk
løsningen på innovative måter.

11. Hacking
• Tilpasning av et produkt til en oppgave
den ikke var tiltenkt
• Brukere er minst like kreative
• Eksperimentering
• Sosial/politisk statement
• Personliggjøring av teknologi
• Et godt produkt tar høyde for dette
• Synliggjøre sømmer gjennom åpne API’er
Hacking er et slitt begrep, men det er oftest ikke snakk om annet en veldig, veldig dedikerte
brukere. Brukere som er villige til å perfeksjonere produktet med egne hender. (punkter)

12. Hacking
Fast layers Stuff Blog posts, configuration
Services Customer service, prices
Frequent an easy changes
Skin Look and feel, cases
Structure OS’es, functionality, CMS
Slow layers
Site Databases, servers, hardware
Stability and continuity
Et system som viser sømmene, som åpner opp for å la brukere hacke seg frem bygger ofte en
lagdelt løsning, hvor ‘sømmene’ ligger åpent tilgjengelig på toppen, mens de lukker kritisk
funksjonalitet i bunnlagene. Eksempler på dette er (på den lovlige siden): Firefox plugins og
Facebook apps, (og på den mindre lovlige siden) homebrew-programmer til PSP og iPhone

13. “ e street has its own uses for technology”
- William Gibson
Det er egentlig ikke snakk om å gi fra seg kontrollen. Det er snakk om å gi brukerne
muligheten til å gjøre produktet til sitt eget, på måter du ikke kunne forstille deg.

14. Uten ansikt
• Informasjon blir allestedsnærværende
• Ikke lenger bare øye og hånd:
• Stemme (begrenset i offentlige rom)
• Gester (multitouch, tilt)
• Tilstedeværelse (bevegelsesensorer, GPS)
Så langt har vi fokusert på visuelle grensesnitt. Men informasjon er på vei til å bli
allestedsnærværende, og vi begynner å interagere med den på andre måter enn gjennom
PC’en. - Dette gjør at vi beveger oss vekk fra den tradisjonelle skjermen og musen, og mot
grensesnitt preget av - stemme, selv om talekommandoer har sine begrensninger i det
oentlige rom - gester, som multitouch og tiltsensorer - og tilstedeværelse, registrert
gjennom bevegelsessensorer og GPS. Dette gir uante muligheter (og utfordringer) for
interaksjondesign

15. Remix
• På terskelen til nettverkssamfunnet
• Sosiale samfunn (Facebook)
• Kollektiv sammenligning (Amazon)
• Sanntids-tilgang (NYSE)
• Enkel posting av egne data (Youtube)
• Aggregering av datakilder (Google News)
En annen viktig endring er overgangen til nettverkssamfunnet. Vi konsumerer ikke lenger, vi
produserer informasjon og opplevelser Sentrale elementer i vår Remix-kultur er ... (liste)

16. Remix
• Økt kompleksitet vs brukervennlighet
• Hvordan vil det bli designet?
• Distinkte websider - aggregering og remix
• brukerdefinerte filtre og agenter
Remix-kulturen er også en stor utfordring. Den innebærer en voldsom økning i kompleksitet,
samtidig som kravene til en intuitiv brukeropplevelse øker. - Dette er en oppgave for
interaksjonsdesigneren. - Vi går fra isolerte websider til en aggregering og remix av info -
basert på brukerdefinerte filtre og agenter. Disse begynner å bli enklere å bruke, men det er
et godt stykke igjen ennå....

17. Remix
P3’s Twitterfeed via Yahoo Tubes
Dette er P3 sin Twitterfeed, generert med filtre på Yahoo Tubes. Utgangspunktet er RSS-
feeds, Twitterkontoer etc fra forskjellige deler av nettet. Alt samlet i Tubes, og presentert
som en newsticker på P3’s nye nettTV.

18. web 3.0?
• Det semantiske internett
• 2.0: Leses av mennesker, ikke maskiner
• 3.0: Når maskiner forstår innholdet
Dette brukerdrevne, remixbaserte nettet blir ofte kalt web 2.0. Men hva blir web 3.0? Hvis vi
spør Tim Bernes Lee, mannen som fant opp web 1.0, svarer han Det semantiske internett. -
for dagens nett forstås i beste fall av mennesker. Maskiner har ikke sjangs. - Web 3.0 er et
nett hvor informasjonen er tilstrekkelig godt beskrevet, eller tagget, til at maskiner forstår
innhold og kontekst, og kan tilby semantiske søkeresultater, og sette sammen innholdet på
nye måter.

19. IxD3
interaksjonsdesign

20. Fremover
IxD i morgen
Nå skal vi se enda litt lengre inn i krystallkulen. Hvordan antar man at internett har utviklet
seg om et par år, og hva innebærer det for interaksjonsdesign?

21. quot;e future is already here - it is just unevenly distributedquot;
- William Gibson
Det første vi gjør er å se på det som allerede er her. Hva drømmes det om, i filmer, spill etc?

22. Visjonen: The Minority Report
Video link: http://vimeo.com/1739970
Filmen The Minority Report ble kjent for sin grundige research hvor de dro inn både forskere
og designere fra både universitetsmiljører, silicon valley, bilindustrien etc. Denne scenen har
gjort sitt for at multitouch-teknologien har kommet så langt idag.

23. Realitet: Perceptive Pixel
Video link: http://vimeo.com/1131546
Et av selskapene som har kommet langt i å realisere denne drømmen er Perceptive Pixel. De
har blant annet levert skjermer til CNN’s valgkamp i 2008, og til det amerkanske forsvaret.

24. Eksperimentering: Open Framework
Funky Forest link: http://vimeo.com/1131546
Contact link: http://vimeo.com/1131546
Delicate boundaries link: http://vimeo.com/1131546
Et annet, og langt mer lekent eksempel er Open Framework. Dette er en open source
plattform som er mye brukt til å lage interaktive kunstinstallasjoner, performancer. Det er en
banebrytende teknologi, som åpner for helt nye måter å interagere på.

25. Lek: Siftables
Video link: http://www.ted.com/talks/david_merrill_demos_siftables_the_smart_blocks.html
MIT’s Media Lab har lenge forsket på nye interasjonsmåter. Prototypen av lekeklossene
Siftables imponerte mange på TED konferansen tidligere i år.

26. Projeksjon: Sixth sense
Video link: http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
Også fra MIT’s Media Lab: Prototypen Sixth sense utforsker nye måter å tenke bærbart på

27. Visjon: Aurora / Mozilla Labs
Video link: http://vimeo.com/1347289
Mozilla labs bad det renomerte interaskjonsselskapet Adaptive Path om å formulere sitt syn
på morgendagens nettleser, i prosjektet Aurora

28. Businessvisjonen: Microsoft 2019
Video link: http://vimeo.com/1347289
Businessvisjonen for 2019, signert Microsoft. Et noe mer polert utrykk, men vi ser mange av
de samme idéene gjengitt her.

29. quot;e best way to predict the future is to invent it.quot;
- Alan Kay

30. Takk for meg :)
jon.skivenes@mediacircus.no
twitter.com/ioon
ionsgarage.com

31. Interaction Design Association: ixda.org

32. IxD3
interaksjonsdesign