Arkiv for januar, 2009

En uke før Interaction ‘09

Før jul vant jeg IxD-stipendet til BEKK og får reise med de til konferansen Interaction ‘09 i Vancouver 4. februar.

Konferansen arrangeres for andre året av Interaction Design Association (IXDA) og er blitt et viktig samlingspunkt for interaksjonsdesignere. Chris Baum hos Boxes and Arrows kommenterer:

[...] I feel like I haven’t done enough to let people know how great the conference was. Here we are, two weeks from to Interaction 09 in Vancouver, and I feel nostalgic about last year and realize that I will miss not being able to go this year [...] Interaction is fresh, vibrant, and takes a usefully different perspective on the issues we encounter every day. I know I’ve designed differently because of that experience.

Programmet er veldig spennende. Jeg får med meg en workshop med Luke Wroblewski i skjemadesign (litt skuffet over at den går samtidig med “Designing for Touch screens and Interactive Gestures” med Dan Saffer), og workshop’ene:

  • Drawing Ideas med Mark Baskinger og William Bardel, gir en inføring i sketching og quick’n dirty triks for å tegne mennesker, steder, ting og idéer. Ja, jeg er ikke så god til å tegne…
  • Design Studio med Jeannine Harriman og Liya Zheng, har som mål å gjøre oppmerksom på hvordan ulike designtilnærminger kan gi ulike løsninger og hvor viktig det kan være å angripe en problemstilling på en annen måte enn du er vant med.

I tillegg til keynotes med bl.a. Kim Goodwin, Dan Saffer og Jared Spool (with friends), er det en rekke korte sesjoner. Av de jeg har sett meg ut til nå vil jeg nevne:

Interaction ‘09 bruker CrowdVine til konferanseprogrammet og som sosial programvare for deltakerne, noe Webdagene også hadde god erfaring med i fjor. Jeg har laget en oversikt over programmet jeg kan tenke meg å få med meg, men vet ikke om den er endelig eller om jeg rekker alt.

Jeg har savnet blogging fra konferanser av norske bloggere og vil prøve å blogge fra konferansen selv. Erfaringen min fra Webdagene var at liveblogging tok mer tid enn jeg først antok. Om ikke det kommer bloggposter under selve konferansen, vil jeg skrive om erfaringene i etterkant.

iallenkelhet.no har en fin oversikt over kommende konferanser i 2009 (men hvordan kunne de glemme Interaction ‘09?) og brukskvalitet.no har en god oversikt.

Vil du se programmet for Interaction ‘08 finnes det også video fra enkelte av foredragene tilgjengelig. Luke W skriver om workshopen han skal holde på bloggen sin.

Konferanser handler om å møtes, dele og delta. Skal du på Interaction ‘09 eller har tips om noe du synes jeg burde få med meg, ta kontakt på epost eller legg meg til på Twitter.

Legg igjen et notat her

Kan steder ha informasjonsskygger? Hva er en god gateway til denne informasjonen? Hvordan lagre og fange steders informasjonsskygger?

Brightkite er et lokasjonsbasert sosialt nettverk hvor du kan se hvor vennene dine befinner seg og hva de gjør.

Det som fascinerer meg med Brightkite er muligheten til å legge igjen notater og bilder på lokasjoner slik at andre kan se, lese og kommentere disse.

Hvordan designe tjenester uten å være:

  • avhengig av en kritisk masse av brukere for at brukerne selv skal oppleve tjenesten som nyttig til eget bruk?
  • bundet til proprietær teknologi?

Brightkite, gratis wifi-tips om Bøker og Børst, Stavanger

Brightkite, tips om god kaffe, Damplassen, Oslo

Brightkite, tips om når du bør gå på Godt Brød en lørdag, Trondheim

Brightkite, kake på Pascal, Oslo

Oppdatering: NRKbeta skriver om Hvor er du?-tjenester og brightkite.

Webdesign-trender for 2009

Glimrende Smashing Magazine gjør en oppsummering av trender innen webdesign for 2009, sammen med skjermklipp av smakfulle eksempler:

Jeg gjør et klipp-og-lim-utvalg basert på egne preferanser.

Rich User Interfaces

Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. [...] many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look, confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

mobileme date selector rich UI example

Modal Boxes (Lightboxes)

Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

Grooveshark Lightbox example

One-Page Layouts

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”).

taptaptap one-page layout example

Multi-Column Layouts

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

31three three column example

More White Space Than Ever

White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

werck whitespace example

Dynamic Tabs

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time

xpressionengine dynamictabs example

Informasjonsskygger

Stencil barcode

Strekkoder er unike id’er på objekter og produkter. De gir muligheten til å hente frem informasjon om produktet som er lagret i en database. Informasjonen bak strekkodene er ikke tilgjengelig med øyet, du trenger en leser og tilgang til databasen.

Ethvert objekt med en unik id - som en strekkode med informasjon lagret i en database - eksisterer både i den fysiske verden og i en verden av data. Mike Kuniavsky kaller den datainformasjonen til et objekt for information shadows.

Until recently, accessing the information shadow was difficult. The world of objects and the world of information shadows were separated by the difficulty of getting at the information. When you’re in a store, you don’t know what the barcode means, the store does, because only the store had the database and the hardware. And even they only know a small part of what’s going on because a barcode only identifies the class of objects, not the individual object and only has the data that they put into it.

‘Information shadows’ er et begrep på objekters informasjon som er tilgjengelig i dataverden.

Det er flere teknologier som støtter slik informasjonslagring.

QR Code: “A QR Code is a matrix code (or two-dimensional bar code) [...] The “QR” is derived from “Quick Response”, as the creator intended the code to allow its contents to be decoded at high speed. QR Codes are common in Japan, where they are currently the most popular type of two dimensional codes.”

Data Matrix: “A Data Matrix code is a two-dimensional matrix barcode consisting of black and white “cells” or modules arranged in either a square or rectangular pattern. The information to be encoded can be text or raw data.”

ShotCode: “ShotCode is a circular barcode [...] It uses a dartboard-like circle, with a bulls eye in the centre and datacircles surrounding it. The technology reads databits from these datacircles by measuring the angle and distance from the bulls eye for each.”

I Norge har Cybstickers vært et sosialt og teknologisk eksperiment på lagring av informasjonsskygger. Her brukes et ikon i tillegg til det visuelle kodemerket for å gi brukeren en idé om hva som skjuler seg bak koden. De kaller symbolene for digitale hellerisninger.

Teknologiene gir muligheter for å lage tjenester:

Semacodes: “No longer do you have to say “find me on Facebook.” All you need is a camera in your phone and Semacode software.”

Barcode-Sticker: “Make MOO stickers with QR codes on!”

Kaywa Reader: “2D Barcodes (QR Code, Datamatrix) can hold several types of information: an URL, respectively a mobile site’s address; a SMS message; a phone number; any kind of text; an email address”

Alle disse tjenestene er avhengig av visuelle, fysiske representasjoner av en slags gateway til informasjonen.

Bilde av seanbonner.

Gode innganger gir sympatiske nettsteder

StudentWeb er en typisk tjeneste jeg kan møte med usikkerhet og irritasjon hver gang jeg er innom. Samtidig vet jeg at alle studenter ved NTNU (og UiB og UiO, m.fl.) må forholde seg til nettjenesten og er avhengig av den for å få registrert og fulgt opp studieprogresjonen sin. StudentWebsidene gir studenter tilgang til data som utdanningsplan, eksamensoppmelding, semesteravgifter og karakterer.

Som bruker av en nettjeneste er det ikke gøy å være usikker på om det du gjør eller har gjort er riktig og tilstrekkelig. Det gjelder for nye og erfarne studenter i møte med StudentWeb også. I denne bloggposten vil jeg bruke StudentWeb som utgangspunkt når jeg beskriver gode innganger. Fordi denne bloggposten skal handle om gode innganger generelt og ikke StudentWeb spesielt kommer jeg ikke til å kommentere tungvint venstremeny, dårlig prioritering av innhold og ukritisk bruk av system- og stammespråk.

Jeg skriver heller ikke om dette fordi det er spesielt for StudentWeb, men fordi flere nettjenester kunne vært flinkere med å forstå konteksten av en oppgave og gjøre det enklere for brukeren å nå sitt mål.

Nedenfor er et skjermbilde av hvordan forsiden til StudentWeb ser ut etter innlogging.

På forsiden er det uthevet to linjer med viktig informasjon for meg nå før semesteret starter.

  • Du er ikke semesterregistrert Vår 2009
  • Semesteravgift er ikke betalt Vår 2009. På betalingssiden får du mer informasjon om betaling av semesteravgift.

Å ikke være ‘semesterregistrert Vår 2009’ høres skummelt ut når du vet at både studiefremtid og lånekasseutbetalinger forutsetter dette. Det høres mer ut som en advarsel enn en ting jeg må inn på StudentWeb for å få hjelp til å ordne. At semesteravgiften ikke er betalt er et godt tips, her får jeg også en beskrivelse på hvordan jeg kan løse dette.

En påminnelse om viktige oppgaver kan være bra å fremheve på et nettsted som har en så spesifikk funksjon som StudentWeb. Men kunne det vært gjort annerledes?

Et eksempel på det jeg kaller en god inngang er glemt passord-lenken sammen med innloggingsfunksjonen på typisk nettsted. Forestill deg å ikke finne den lenken hvis du skal logge inn og har glemt passordet. Du vet funksjonen finnes et sted på nettsiden, men hvor skal du begynne?

Eksempel på plassering av glemt passord-lenke hos facebook.

Glemt passord-lenken er ikke plassert ved siden av innloggingsfeltene fordi det er en funksjon som er mye brukt, men fordi det er en oppgave brukeren kan trenge hjelp med i en slik situasjon.

Flickr.com er flinke til å skape gode innganger rundt om på sidene sine. Når du som ny bruker har fullført profilen din, gir en kort tekst hint om hva du kan gjøre. I stedet for å forklare dette i lange ordelag eller med omfattende beskrivelser lenker flickr til funksjonene hvor du kan utføre oppgavene dine - eller utforske nettstedet videre.

Hvordan hadde flickr vært uten gode innganger? Et noe banalt eksempel på hvordan flickr sin hilsen til nye brukere hadde sett ut er illustrert nedenfor. En metabeskrivelse av funksjonalitet i stedet for direktelenking er dessverre vanlig på mange nettsteder.

Et annet nettsted som gir brukerne gode innganger er nettverktøyet dopplr.com for folk som reiser. Her finner brukerne veier videre til viktige og sentrale oppgaver uten å måtte navigere et menysystem som en venstremeny.

dopplr_trondheim_godeinnganger

Hvordan kan StudentWeb skape gode innganger?

StudentWeb minner meg på viktige oppgaver de kan hjelpe meg med å løse. Men hvorfor må jeg leke gjemsel med funksjonene når jeg er i riktig kontekst?

De to beskjedene jeg får når jeg logger inn kan løses ved å gå inn på henholdsvis Registreringer og Bestillinger i venstremenyen. Jeg får altså utført oppgavene på StudentWeb, men må lete meg frem til riktig punkt i menyen.

I eksempelet nedenfor gir påminnelsene veier videre der hvor brukeren får løst oppgaven.

studweb_beskjed_godeinnganger

Om StudentWeb lenker direkte til disse funksjonene ved hjelp av tydelige, meningsbærende lenker får brukeren et helt annet møte med nettstedet.

Ved å hjelpe brukeren å nå sitt mål gjennom gode innganger viser nettstedet forståelse for brukerens behov og velvilje til å gjøre oppgaven enklere for brukeren.

Enkelhet og hjulet

John Maeda har skrevet Laws of Simplicity hvor han utdyper et paradoksalt komplekst emne: Enkelhet. Boken handler om å balansere enkelhet og kompleksitet i forretningsvirksomhet, teknologi og design.

Det gjør han gjennom å formulere ti lover.

Han trekker frem iPodens rene og enkle design, og viser også hvordan utviklingen i dette designet har gått fra enkelt til enda enklere.

Endringer i design av iPod-hjulet

Lov nummer 10 sier:

“Simplicity is about subtracting the obvious, and adding the meaningful”

Du har kanskje sett farsotten til The Onion den siste uken? Videoen spiller på hypen rundt lanseringen av nye Apple produkter. I Onions versjon av Apple-verden er MacBook Wheel et fantastisk revolusjonerende produkt - det er så enkelt! Tastaturet har blitt erstattet med et hjul.

QWERTY-tastaturet, det tastaturet som er vanlig i dag, er en gammel standard. Tastene er utformet slik fordi hammerne på gamle skrivemaskiner ikke skulle kile seg fast i hverandre. Det er med andre ord ikke den mest hensiktsmessige utformingen ut fra hvilke bokstaver og tegn som brukes oftest.

Hvordan gir vi input til dingsene våre i nær fremtid? Er det med tankene eller skygger og projisering? Er the Onions visjoner så veldig utenkelige? Hva kommer vi til å le av i fremtiden?

Om tenketing.net og 2008

Bridge people

Okey, litt navlebeskuelse i form av en kommentar om notatboken tenketing.net og besøkende i 2008. Jeg begynner med å oppsummere hensikten bak bloggen:

Jeg begynte på min mastergrad i informatikk og menneske-maskin interaksjon ved NTNU høsten 2007, og brukte et halvt år på å finne ut at en blogg er en hensiktsmessig måte å gjøre refleksjon på innimellom bok- og artikkel-lesing. Her på bloggen kommenterer jeg det som opptar meg og det jeg har tid til - men jeg har alltid mer å skrive om og mindre tid til å gjøre det…

Idéen var at på denne veien ville kanskje andre også ha glede av tanker jeg kom over eller gjorde meg. Det har jeg hatt stor glede av selv. Det jeg ikke kommenterer her, samler jeg i utklippsboken, som bokmerke på delicious, som bilde på flickr eller kommentar på twitter.

Derfor vil jeg også dele litt triviell data med de som leser og kommenter tenketing.net. Denne bloggen er bare halvparten så meningsfull uten kommentarer og lesere.

Fun with statistics

Første bloggpost (bortsett fra testposten Lorem ipsum Hello World) var Skoeske, 29. januar 2007.

Siden da er 73 bloggposter publisert, de har fått i alt 314 kommentarer. Mellom 5 og 10 gode kommentarer ble dessverre slettet da jeg aktiviserte spamfilteret Akismet en gang i høst.

Google Analytics ble installert 25. april 2007, nesten fire måneder for sent. Oversikten over besøkende siden da ser slik ut:
Oversikt over besøkende på tenketing.net

Bruk totalt

  • 2,484 besøkende
  • 5,563 sidevisninger
  • 00:02:55 gjennomsnittlig tid på siden

Tre mest leste poster:

  1. Topp tre web 2.0 tjenester for akademia?
  2. Digitale fotavtrykk
  3. Refleksjon rundt observasjon

(Tre minst leste poster: Informasjonsdesign Patterns; Internett og marsmåned; Domestisering: En kanin på kjøkkenet)

De mest kommenterte innleggene er:

  1. Digitale fotavtrykk (15)
  2. Innmating, fôr eller feed? (12)
  3. Topp tre web 2.0 tjenester for akademia? (12)
  4. Bokmerker du sosialt? (12)
  5. Innlogging på Netvibes (10)

De fleste leserne som kommer fra andre nettsteder kommer fra:

  1. netvibes.com
  2. flickr.com
  3. planet.idi.ntnu.no
  4. twitter.com
  5. google.com

Jeg bruker feedburner til å tilpasse innholdsstrømmen til bloggen (RSS). Her får jeg også oversikt over bruken. Tjenesten ble satt opp 29. januar og i oversikten nedenfor vises antall abonnenter for perioden:
Oversikt over abonnenter via feedburner.com

De siste månedene har bloggen hatt rundt 35 abonnenter. De mest populære innleggene fra innholdsstrømmen har vært:

  1. Pekende hånd
  2. Grensesnittskygger
  3. Topp tre web 2.0 tjenester for akademia?

Så, det var 2008. Jeg vil fortsette å blogge i 2009 selv om jeg nok ikke får bedre tid. Håper du som leser kommer over noe du har glede av eller vil dele i form av en kommentar eller epost.

Legg meg gjerne til som kontakt på flickr, delicious, twitter, brightkite, dopplr - og abonnér på tenketing.net.

Til slutt: et utvalg poster du kanskje ikke har lest, som kan være noe å lese igjen eller som kan leses som en introduksjon til hva du kan finne på tenketing.net i fremtiden.

Godt nytt år, takk for det gamle :)