Vi intervjuet Vitor live på Twitter 21. mai. Han svarte på våre og andres spørsmål om hans tanker om design og hvordan han har forbedret Twitter.

Her er Twitterviewet i sin helhet:

webdagene: Please tell us who you are – in 140 characters.

vl: I’m a Product Designer. I’ve been working @Twitter for the last 2 yrs, helping change the world 140 chars at a time

webdagene: When did you start doing design?

vl: Around 10 yrs ago. I started designing personal sites just for fun, and never planned to pursue this as a career.

webdagene: Then what made you turn this into a career?

vl: I really loved what I was doing. When I was 18, I joined the major media company in Brazil and after that, Yahoo!

webdagene: And then you went on to Twitter after that?

vl: Exactly. I started consulting for Twitter, and later on joined as a full-time employee and moved from Brazil to SF.

dnmack: how he feels about twitter is the most popular social network?

vl: I don’t see Twitter as a social network. It can be social too, but it’s a real-time information network.

webdagene: Please tell us, what is most important to you when creating a great design?

vl: Scannability. If people can scan through your page for key points, they may decide to stay and use your product.

webdagene: How do you design for scannability?

vl: Be visual, but avoid unnecessary decoration. Use large typography and keep concise paragraphs.

webdagene: You may already have answered this in a way, but what is a great design to you?

vl: A great design/interface is the one that fades gracefully, allowing *content* to be in the very front row.

webdagene: That’s interesting, esp. as many attendants at Webdagene are primarily working with content. Why should design be important to them?

vl: No one picks up a boring book cover. Design generates interest & plays a primary role in the interpretation of a msg. Design should be created around content, not the other way around. Requires collaboration between designers & editors.

webdagene: Can you tell us a little about how you have improved Twitter through your design?

vl: We’ve been listening to users carefully, polishing things, adding new features but trying to keep the core simplicity.

aregh: how do you maintain the core simplicity when everyone is crying for more feautures?

vl: Follow Maeda’s mantra “SHE” (Shrink, Hide, Embody), so you can add more things, but keep the core elegant and easy to use.

aregh: Shrink, Hide, Embody? Please elaborate

vl: Shrink what’s less relevant, hide what’s not needed all times and group things together so they look like just 1 element. That’s basically designing around reduction, organization and efficiency. Example: see how we hide the tweet actions until you hover over a tweet? This helps keeping the overall page simplicity.

aregh: Sweet! I think you need to go in more detail about this when you get her in september

vl: Sure, will do!

aregh: Twitters 140chars is an extreme constraint – how do you deal with constrains when designing?

vl: Constraints are everything. They help me a lot. Design is more about problem solving than blue-sky thinking.

webdagene: What are your thoughts on design and marketing?

vl: The best marketing strategy is to have a remarkable/viral product. Build a purple cow and people will talk about it.

Mr_Rollo: which designers would you recommend following on twitter?

vl: I have a design list with great recommendations. Check out http://twitter.com/vl/design

khamnes: What are your thoughts on culture in design? Do users in different cultures use twitter in different ways?

vl: We try to come up with more universal solutions, but there’re differences around language, color interpretation, etc. There are also behavioral differences. Twitter is very open/public by nature. And we’re big in Brazil, for instance.

webdagene: What are your thoughts on having culture-specific versions of a site like Twitter vs. one site that should fit all?

vl: It’s crucial to at least support users native languages. That’s why we’re internationalizing the whole site.

webdagene: Many sites come in a regular and a mobile version, as do Twitter.com. What do you think of this practice?

vl: It’s critical, as more and more consumers rely on their mobile device as their primary Internet browsing device. And mobile also means tablet devices. Touch is far superior than trackballs/keypads. We should embrace that on the web.

webdagene: In what way do people’s use of Twitter.com on a mobile device differ from how they use it in a desktop browser?

vl: Twitter on mobile is a great way to learn more about what’s happening *around* you, using geo tweets for example. And we’ve been mobile since day one (SMS). It’s definitely part of Twitter’s DNA.

aregh: What are the key differences when designing for touch?

vl: Everything can be more familiar. You can interact with the UI/content the same way you interact with real world objects. For instance, the fact that you don’t need UI controls to scale up a photo or video is a breakthrough.

aregh: So u’re saying that the constraints of touch forces us to simplicity? That sounds promising

webdagene: As we increasingly use networks as Twitter to seek information, what do you think’ll be the role of web sites in the future?

vl: Websites can give you a more immersible experience by grouping things together and providing clear start points. But it’s more important to focus on social media presence: listen to what people are saying about you & engage.

webdagene: Finally, can you give us a short teaser for what you will be talking about at Webdagene?

vl: I’ll talk about how Twitter changed the way we communicate and how design played a primary role in that

webdagene: Sounds great! Maybe you’ll touch upon the principles for simplicity we talked about today as well? Looking forward to it!

vl: Will do. And maybe a couple of more things. Looking forward to the event!

Hør mer fra Vitor på Webdagene…

1. Se det som skjer akkurat nå

Michael Jacksons død var en hendelse som virkelig testet søkemotorene. Det tok 3 timer og 17 minutter fra nyheten kom på kjendisnettstedet TMZ.com til det ga treff på Google, mens nyheten ble spredt umiddelbart på Twitter og dukket opp som ”trending topic” innen to timer, i følge seomoz.org.

Dette ble brukt som eksempel i en paneldebatt om sanntidssøk på Web 2.0 Expo, der Erick Schonfeld fra TechCrunch, Akhil Wable fra Facebook, Tobias Peggs fra OneRiot, Vik Singh fra Yahoo og Gerry Campbell fra Collecta diskuterte hvordan søk kan forbedres ved å skje mer i sanntid og ved å involvere sosiale aspekter.

Blogger og sanntidsmedier som Twitter har gitt oss høyere forventninger til hvor raskt vi forventer å finne oppdateringer på nettet, og en følge av dette er at søkemotorene må jobbe raskere med å indeksere nettet.

Men det viser også en svakhet ved tradisjonelle søkeresultater. Et søk på Michael Jackson vil typisk gi michaeljackson.com og Wikipedias side om ham som første treff. Dette passer godt når du søker for å finne historiske fakta, men søker du for å finne ut hva som skjer med Michael Jackson akkurat nå, er ikke dette nødvendigvis det du ser etter.

Yahoo (og flere andre) viser nå treff i nyheter på toppen av det tradisjonelle søkeresultatet for å gi et mer ”tidsaktuelt” søketreff, men de andre i debatten mente at nyheter bare er en liten del av det totale bildet. Treff fra blogger, Twitter og så videre må også være med for å gi et riktig bilde av en sak akkurat nå.

2. Sosialt relevante treff

En annen tendens rett etter Michael Jackons død var at veldig mange som søkte på navnet hans endte opp med å se Thriller-videoen på YouTube for å minnes ham.

Ved et søk vil ønsket treff være avhengig av den situasjonen man er i. Mens michaeljackson.com kanskje er det ”riktigste” treffet i tradisjonelle søkemotorer, kan Thriller-videoen være et mer relevant og ”sosialt riktig” treff i denne sammenhengen. Dette kan søkemotorene fange opp og tilby som søketreff når de justerer prioriteringen av treffene i forhold til trender i sosial nettverk og hvilke treff som får klikk til enhver tid.

Digg.com er et eksempel på noen som allerede gjør dette. Ved at folk stemmer på det de liker kan de tilby innhold som andre sannsynligvis også vil like.

Dersom ditt eget sosiale nettverk brukes til å prioritere søketreffene, kan du kanskje komme enda nærmere det du ønsker – i hvert fall om du har et nettverket av nogenlunde likesinnede.

3. En strøm av treff

En tredje type søketreff vi nok vil få se mer til, er ”strømmen” av treff på et tema. Du får opp noen treff med en gang, mens nytt innhold dukker opp hele tiden opp etter hvert som det blir lagt ut. Et eksempel er Twitterfall, der det kommer nye treff jevnlig når folk twitrer om temaet du har søkt på. Collecta er et annet eksempel, som tar for seg flere kilder enn bare Twitter.

Eksempelet med Michael Jacksons død vil være perfekt for et slikt søk. Du har hørt rykte om at han er død og gjør et søk for å se om det stemmer. Deretter kan du følge med på avkreftelsene og bekreftelsene etter hvert som de utfolder seg.

En konferanse er et annet eksempel på en hendelse der en slik type søkeresultat fungerer god. På Web 2.0 Expo ble strømmen av tweets om konferansen vist på stormskjermer flere steder i lokalene og bak foredragsholderne under de største foredragene. Tweets fra deltakere, men også folk som satt og fulgte med på videostreamingen hjemme i Norge og resten av verden, rullet forbi på skjermen og plasserte konferansen i en større, internasjonal sammenheng.

4. Søkemotoren kjenner deg

Søk kan også filtreres etter det du selv har foretatt deg i sosiale medier. Deltar du stadig i diskusjoner om programmering og andre tekniske temaer, kan en søkemotor bruke dette når du søker på ”Python” til å anta at det er programmeringsspråket – og ikke slangen – du er ute etter. Søker du etter ”Jobb” kan du umiddelbart få treff på jobber som er aktuelle for deg, fordi søkemotoren vet hva slags utdanning du har fra din LinkedIn-profil.

Akhil Wable fra Facebook mente at mange søk nå starter med utgangspunkt i en diskusjon på f.eks. Facebook. Hvorfor skal man da måtte forlate diskusjonen og gå et annet sted for å søke? Gjøres søket direkte fra diskusjonen kan diskusjonen selv fungere som et filter på søket.

Det ble nevnt at for eksempel Twitter-meldinger kan sees på som søkestrenger. En melding vil som regel bare inneholde noen få meningsbærende ord når man tar bort mer generelle ord som ”er”, ”jeg”, etc. På denne måten kan hver Twitter-melding brukes som utgangspunkt for søk.

Dette var foreløpig bare tanker, uten at deltakerne i debatten hadde noen eksisterende tjenester å vise til.

5. Få svar fra et annet menneske

Damon Horowitz fra Aardvark presenterte en helt annen tilnærming til sosialt søk. Vark.com er en type sosialt nettverk der du kan stille spørsmål og få svar fra andre mennesker.

Spørsmålet tolkes maskinelt for å finne ut hvilket tema det gjelder. Så letes det etter en person som med stor sannsynligvis kan svare på spørsmålet, ut ifra hva vedkommende har skrevet av meldinger og oppgitt som interesser. Vedkommende får spørsmålet ditt og du får (forhåpentligvis) et svar.

Dette er en litt ny vinkling med kombinasjonen kunstig intelligens og sosiale nettverk.

Et annet eksempel er Hunch.com, en ny tjeneste fra Catarina Fake fra Flickr, som hjelper deg å ta valg. Du skriver inn et tema og får en del oppfølgingsspørsmål før Hunch gir deg en anbefaling. Søk for eksempel etter ”New York City Hotels”, og du får en del spørsmål om hva du foretrekker av prisklasse, beliggenhet, komfort med mer, før du får tre anbefalte hoteller i prioritert rekkefølge.

Svaret er basert på statistikk fra hva andre har anbefalt etter å ha gitt de samme svarene på de innledende spørsmålene.

Tror du sosiale søketjenester kommer til å bli nyttige, eller er det bare nok en hype?

(Kort teori: En publiseringsløsning består enkelt sagt av en database som lagrer innholdet ditt, maler som viser innholdet, og et administrasjonsgrensesnitt som lar deg oppdatere innholdet. Malene inneholder design og hovednavigasjon, og har felter der innholdet kan puttes inn.)

Eksempel: Slik kan det gå når malene bestemmer

Hos Oslo City ser det ut som om malene har fått bestemme over innholdet. Butikkene presenter seg med litt informasjon og et bilde til venstre. I midtfeltet finner vi navnet på butikken, en beskrivelse og merkene som føres.

Dette fungerer greit for de aller fleste butikker, og det er sikkert butikker som Hennes & Mauritz som har blitt brukt til å teste ut sidene under utviklingen. Antakeligvis har det blitt laget en ”butikkmal” med egne felter for informasjonen til venstre, bildet, overskriften, hovedteksten og merkene som føres, slik at det skal være lett å fylle ut informasjonen om en butikk.

Dette er en vanlig måte å gjøre det på.

Men så har jo ikke Oslo City bare butikker. Det er kafeer og restauranter også, og de benytter den samme malen som butikkene:

Oslo City har også hatt behov for å legge ut informasjon om toalettene sine. Da blir det enda rarere:

Fangenskap skyldes ønsket om enkelhet

Når et nettsted utvikles går det mye arbeid med til å lage malene som skal vise innholdet. Det kan være én mal for å vise butikker, som hos Oslo City. Én for å vise kontaktsiden, én for å vise info om en ansatt, én for å vise artikler osv.

Malene skreddersys til formålet, med akkurat de feltene man trenger og den layouten innholdet skal vises med. Vår kontakt-side har for eksempel felt for overskrift, innholdet i midten, innholdet til høyre og kart. Selve kontaktskjemaet er her en del av malen.

Fordelen med å dele inn i felter på denne måten er at de som oppdaterer nettstedet til daglig slipper å tenke på layouten – innholdet fra hvert felt plasseres inn i malen på rett sted og med det designet det skal ha.

Felter brukes også for å hindre at de som oppdaterer tukler med designet. For å unngå at det legges inn store overskrifter overalt i teksten lager man overskriften som et eget felt og fjerner muligheten til å legge inn stor skrift i tekstfeltet. Dermed blir det enklere å gjøre riktig.

Noen ganger går det for langt

Ønsket om å gjøre det enkelt å legge inn innhold i rett layout tas noen ganger altfor langt. Nettredaktørene blir fullstendig overgitt til å skrive innhold slik det ble bestemt i utviklingsprosjektet, ofte på bekostning av hvordan innholdet bør presenteres for å fungere godt.

Det er da man får rart innhold, som hos Oslo City, der en kafé må oppgi navnet sitt som et merke de fører, for å tilfredsstille malen. Hva skulle Al dente ellers skrevet? At de fører merker som ”Focaccia, ciabatta, pizza, tagliatelle”? Eller ”Prior, Gilde, Evergood”?

Ingen av disse gir mening. I stedet ville de kanskje lagt ut menyen sin? Men det var det ikke et felt for i malen…

Slik blir du fri

Så fort utviklingsprosjektet er avsluttet er det gjerne en større prosess å få endret eller laget nye maler. Den viktigste jobben gjør du altså mens malene lages. Men er du allerede fange i CMS-et ditt kan det være verdt å ta jobben med å endre noen maler for å bli fri.

Her er noen tips til hva du bør tenke på når malene utvikles eller endres:

1. Krev å få se malene og feltene under utvikling

I mange utviklingsprosjekter legges alt fokus på den delen av nettstedet som er synlig for kunder og besøkende, mens oppsett av administrasjonsgrensesnittet overlates i det store og hele til utviklerne.

Først når alt er godkjent og arbeidet med å legge inn innhold starter, oppdager du hva som er satt opp som forskjellige maler og hva som ligger i hvilke felter. Da kan det være for sent å gjøre noe med det.

2. Legg inn mer enn bare det vanligste innholdet under utviklingen

Uten at jeg kjenner historien bak sidene til Oslo City, vil jeg tippe at de har fått se eksempelsider med vanlige butikker under utviklingen, og at spørsmålet om hva som skal stå under ”merker vi fører” for kafeer og toaletter, har dukket opp først etterpå.

Pass på å bruke flere typer innhold under utviklingsprosessen, så kan slike problemer bli avdekket tidligere.

3. Hold igjen på antall maler

Dette er en balansekunst. Du bør ha så mange maler at det dekker behovet for ulike layouter og ulikt innhold, men jo flere maler du får, jo vanskeligere er det å holde styr på dem og velge riktig mal.

Noen ganger kan to maler slås sammen til en litt smartere mal, så pass på at utviklerne ikke lager en ny mal uten at det er helt nødvendig.

4. Hold igjen på antall felter

Nok en balansekunst. For få felter gjør at du selv må sørge for at innholdet får rett design og layout, mens for mange felter gir deg mindre fleksibilitet og du blir fanget.

Pass derfor på at utviklerne har en god grunn til å legge noe som et eget felt. Har de ikke det? Slå det sammen med andre felter, slik at du får mer kontroll.

5. Feltene må være fleksible og valgfrie

Selv om det kan være fornuftig å lage et eget felt for å legge inn bakgrunnsinformasjon i en liten boks til høyre i teksten, er det ikke alltid du ønsker å legge inn bakgrunnsinformasjon. Det må derfor være mulig å ikke fylle inn noe i feltet, og malen må være fleksibel nok til å ikke vise boksen når feltet er tomt.

Tommefingerregelen er at alle felter skal være valgfrie så sant det ikke er en veldig god grunn til at de må være utfylt.

6. Gjør det mulig å fravike streng formattering

Noen ganger legges innhold i et eget felt fordi det skal knyttes logikk til dette innholdet, og det kreves derfor at det oppgis i et spesielt format. For eksempel må vi oppgi startdato og sluttdato når vi legger inn kurs og konferanser på våre sider, og disse må oppgis med år, måned og dag i hvert sitt felt. Da kan malen som viser kursoversikten sortere kursene i rett rekkefølge, og skille på de som har vært og de som ikke har vært.

Men hva om vi ønsker å legge ut kurs før datoen er satt? Det er ikke mulig å legge inn ”Oktober 2009”. Sørg for at du har fleksibilitet til å overstyre også strenge formater.

7. Legg inn fritekstfelter rundt mer spesielle felter og elementer

Noe innhold må være i et eget felt av en god grunn. Vi har for eksempel eget felt for kartet på kontaktsiden vår, der vi legger inn posisjonen til kontoret, mens koden for å vise kartet ligger i malen.

I starten var det kun kartet som ble vist i høyrespalten, og det var ikke mulig å legge inn noe annet her. For å vise kontaktinformasjon over kartet måtte vi endre malen og legge inn et tekstfelt her. Vær forutseende og legg inn fritekstfelter der det kan bli aktuelt å legge inn mer innhold enn det som er strengt definert i malen.

8. Sett opp ulike tekststiler som kan brukes i fritekstfeltene

Jeg holder en knapp på fritekstfelter fremfor felter som bare tillater en viss innholdstype, fordi det gir mer fleksibelhet. Men for at dette skal fungere må du som skal oppdaterer ha noen verktøy å jobbe med slik at du kan presentere innholdet i fritekstfeltene på en egnet måte.

Valg av fonter og farger er allerede tatt av en designer, så det bør du slippe å forholde deg til, men et sett med tekststiler bør du ha. Pass på at det blir satt opp stiler for mellomtitler i forskjellige størrelser, sitater, bildetekster, fremhevet tekst, mindre viktig tekst (litt mindre skrift), faktabokser, punktlister osv.

9. Skill på maler og innholdstyper

Noen nettsteder er satt opp slik at det knyttes logikk til hvilken mal innhold vises med. For eksempel kan en oversikt over butikker være laget slik at den viser de sidene som bruker butikkmalen, og du er dermed tvunget til å bruke denne malen for å få butikken din med i listen.

Noen ganger er slik logikk nødvendig, og det kan gjøres mindre kritisk med fleksible maler, men om det er mulig – unngå at valg av mal får betydning for annet enn hvordan innholdet vises på siden.

10. Ha alltid en generell mal for hånden

Det er umulig å forutse alle behov som kan dukke opp på et nettsted. Noen ganger må man ta et steg tilbake og endre noen maler eller lage noen nye.

Du kommer allikevel langt om du har en mal som er helt generell – det vil si ingen spesialfelter, og fritekstfelter der det er aktuelt å legge inn innhold. Pass på å få utviklet en slik, også når den ikke brukes til å begynne med.

English version: http://iallenkelhet.no/ie6/eng/index.html
Norwegian version: http://iallenkelhet.no/ie6/nor/index.html

You may also download the files and put them on your own server. Feel free to add other languages.

We have currently tested with Windows XP Professional – English and Norwegian editions, but the page could use more testing. Please test the page and report any errors on this blog.

Demo versions without the browser check are available both in English and Norwegian.

A minimal and non-technical download page

Our download page is targeted primarily at users that find upgrading their browser to be a daunting task. They will be greeted with a short text assuring them that they will be guided through this:

At the push of the big «Update now» button, the download from Microsoft will start, and instructions will show up on the left and the right side of the installation dialogue:

The Norwegian version has an additional step before the download begins, where the user is asked to select the language of her Windows installation:

In essence, our goal has been to:

• cut down to the minimal information and questions needed to complete the process
• avoid any technical terms, and use only words a computer novice may relate to
• make the instructions fit the most common installation process instead of accounting for all eventualities

We hope that we have succeded with this. Please comment if we have left something important out, or we have included something unnecessary.

By the way, we have only provided links to the Windows XP version of IE7. There are also server versions of Windows, and a x64 version, but we figure that if you run any of these systems, you don’t need this page to tell you how to update… And for Windows 2000, the updates stopped with IE6.

Some advice on designing the warning message on your site

There are already a lot of different warning messages out there, and you’ll find code for implementing it on your site on the «IE6: Do NOT want» page.

However, as we have already spoken up about, there is a lot of potential for confusing and alienating the user when putting this kind of message on your site. We have a few recommendations:

• Keep in mind that many of the users targeted by this campaign is far from experienced with Internet and computers. Use plain and non-technical language
• Make the option to upgrade to Internet Explorer 7 the main and most prominent choice. You might add links to other browsers as well, as we have also done on our download page, but if a user don’t want to put any thought into this, they should get what their used to – Internet Explorer
• Don’t link to download pages by using browser icons only. It will not be clear to all users what their supposed to do. At least, provide a text link or a button in addition
• Include a close button, as Finn.no has done. This way, users unable to upgrade will not be bothered by the warning every time they visit your site
• Concider where you put the warning on your page. It should obviously be placed so that the users will notice it, but at the same time it should not be in the way for a user coming to your site with a specific task in mind. After all, having people use your site should be more important than making them upgrade their browser

Hopefully, this campaign will result in a fast forward to a future free of Internet Explorer 6, without frustrating to many users along the way.

Bakgrunnen for kampanjen er at IE6 er en gammel nettleser med mye feil, som dessverre fortsatt er mye brukt. Derfor er de fleste nettsteder nødt til å gjøre egne tilpasninger for IE6, dersom sidene skal fungere også for brukere som ikke har hengt med på oppgraderingene. Dette er det mange med ansvar for nettsteder som er leie av.

Melding til brukere av IE6 på Finn.no

Finn.no, VG.no, Start.no, og flere blogger har nå lagt ut meldinger som kun vises til brukere av Internet Explorer 6. Der står det at de har en eldre versjon av nettleseren og kan laste ned en nyere versjon gratis. (Du kan se bilder av meldingene hos Teknisk Ukeblad, hvis du er en av de som har oppgradert.)

Det hele startet på Twitter, ved at Erlend Schei luftet tanken om en dugnad for å bli kvitt IE6. Du kan følge med på hvordan dette utvikler seg ved å søke etter #IE6 i Twitter.

Skal vi henge oss på kampanjen?

Jeg fikk også spørsmål om vi skal henge oss på og vise en slik melding på netliferesearch.no.

Selv om jeg støtter kampanjens formål 100 % – det er ingen tvil om at verden ville vært et bedre sted uten IE6, må jeg si jeg er skeptisk til å legge ut en slik melding. Jeg er rett og slett ikke sikker på at det vil være i brukerens beste interesse når de kommer til nettstedet vårt.

Det er utvilsomt bra å få oppgradert nettleseren sin, men når kunder eller potensielle kunder kommer til nettstedet vårt med et mål – f.eks. å kontakte oss eller finne ut mer om oss, er det viktig at vi gjør alt vi kan for å støtte dem i dette. Forstyrrer vi dem ikke bare ved å fortelle at nettleseren deres er utdatert?

Dersom de tar oppfordringen og klikker linken for å oppgradere, vil de havne på en heller forvirrende side hos Microsoft. Her er de tydeligste knappene linker til siden du allerede er på, og du må velge operativsystem for å laste ned. Slike spørsmål kan være en av grunnene til at de som har IE6 ikke allerede har oppdatert, og det hjelper ikke at de får enda flere av dem via vårt nettsted.

Omtrent 16 % av de som besøker nettstedet vårt har fortsatt IE6. Er det så viktig å få dem til å oppgradere at vi vil risikere å gi disse en dårligere brukeropplevelse?

Hvordan drepe monsteret?

Det er nok i hovedsak to grunner til at mange fortsatt har IE6:
•    De mangler kompetanse til å oppgradere
•    De har ikke rettigheter til å oppgradere

Noen av de som mangler kompetanse kan nok bli hjulpet av en slik kampanje, fordi de får et dytt til å finne ut av det, men jeg tror de fleste vil overse også denne oppfordringen. Den eneste løsningen for mange vil være at Windows oppgraderer nettleseren automatisk for dem, men det er et lite sannsynlig alternativ i denne omgang. For denne gruppen må vi nok bare vente på at de kjøper ny PC med nyere nettlesere ferdig installert.

De som mangler rettigheter er gjerne ansatte i bedrifter der IT-avdelingen holder et stramt grep om PCene og ikke lar den enkelte oppdatere selv. Her kan en slik kampanje gjøre at flere krever å få oppdaterte nettlesere, men ville det ikke da vært bedre å rette kampanjen direkte mot IT-sjefer enn å rette seg mot brukere som kanskje bare blir forvirret av dette?

Ikke skyv ansvaret over på brukerne

Det blir altså ikke noen slik melding på nettstedet vårt nå.

Selv om IE6 er en pest og en plage, er det fortsatt mulig å bite tennene sammen, tenke og kode litt ekstra, og tilby gode brukeropplevelser også i denne nettleseren – uten at brukerne må ta stilling til tekniske spørsmål. Dette er vårt ansvar som designere og utviklere, og det må veldig gode grunner til for at vi skal gi noe av dette ansvaret til brukerne.

Mens eye-tracking vanligvis foregår ved at vi gjør opptak av hvor personer fokuserer blikket på skjermen, for så å illustrere dette grafisk, genererer tjenesten Feng-GUI  automatisk heatmaps fra regler basert på studier av menneskers persepsjon og erfaringer fra tradisjonell eye-tracking. Dersom tjenesten leverer det den lover, vil det være unødvendig å bruke levende personer i slike studier.

Her er en heatmap av forsiden vår fra Feng-GUI:

Nylig lot vi testpersonene starte fra forsiden vår i en eye-trackertest, og fikk følgende heatmap:

Blant annet ser vi at de blå linkene får mye mer oppmerksomhet enn de “burde” ut ifra reglene for hva som skal trekke øyets oppmerksomhet (i hvertfall de reglene Feng-GUI bruker). Dette kan ha med å gjøre at personene i dette tilfellet skulle komme seg videre fra forsiden, og derfor naturlig lette etter lenker.

Enkelte ord kan fange mye oppmerksomhet, avhengig av den situasjonen brukeren befinner seg i, selv om det visuelt sett ikke er framtredende. I heatmapen med testpersoner har “Kurs og foredrag” fått spesielt mye oppmerksomhet, mens disse ordene i følge Feng-GUI knapt vil bli sett.

Vi er svært skeptiske til en slik automatisert tjeneste, fordi den ikke tar høyde for innholdet i skjermbildet – kun det visuelle. Hjernen vår avgjør hele tiden hva vi skal fokusere på, mye utifra hva som er relevant for situasjonen vi er i, og en slik prioritering er ikke mulig å gjenskape med faste regler.

Bruk gjerne Feng-GUI for å få et raskt inntrykk av hva som vil stå fram visuelt på siden, men ikke utover det kan ingenting erstatte tradisjonell eye-tracking – med brukere…

Konferansens tema er Usability og design, og mange av foredragsholderne er opptatt av at de som jobber med brukeropplevelse må få et bredere perspektiv på brukersentrert design.

Lag produkter folk vil ha

Chanil Kim fra Institute of Design, IIT, er opptatt av at produkter ikke bare skal være nyttige og brukervennlige, men at det skal være noe med dem som gjør at man har lyst på dem. Han trekker fram LG’s Chocolate–mobil, som han ikke vil anbefale fra et Usability-ståsted, men som selger som bare det. Det er rett og slett noe med den som gjør at folk vil ha den.

Dette handler om “desirability”. Her er opplevelsen viktigere enn det endelig målet for å bruke produktet, det hander om hva man har lyst på mer enn det man trenger, og om kultur og selvbilde mer enn oppgaver som skal fullføres.

Begrepet kan være vanskelig å få tak på. Vi har metoder for å undersøke om et produkt er brukervennlig og nyttig, men hvordan finner man ut hva som er “desirable”?

For å finne ut hva folk har lyst på, sier Chanil Kim at man må se på den sammenhengen de skal bruke produktet i. Når man gjør en brukertest av et produkt tar man altfor ofte brukeren ut av den situasjonen de vanligvis ville brukt produktet i, og man får da bare svar på problemer ved selve produktet. Ved å gå bredere ut og observere brukerne i den naturlige sammenhengen kan man derimot oppdage nye behov og ønsker, som ikke vil komme fram om man bare søker svar på konkrete spørsmål og uten å se på hele situasjonen.

Finn produktideer med brukerorienterte metoder

Sascha Mahlke fra Useeds snakker om hvordan Usability og brukerforskning har gått fra å handle først og fremst om å sørge for kvalitet, til å inspirere design. Man har gått fra å komme inn i siste ledd for å sjekke om det er brukervennlig, til å være med fra starten og gi idéer til hvordan produktet bør være.

Han mener neste steg er å ta vår rolle som brukerens advokat inn i den innovative prosessen. Spesielt kan vi bidra med våre metoder for å undersøke brukerens situasjon, og metoder for å evaluere et konsept fra brukernes perspektiv. Her trekker han fram hurtig etnografi, dagbokstudier og workshop med brukere, som mulige metoder.

Slike undersøkelser krever deltakere med motivisjon til å delta i utviklingen av nye løsninger og de må være åpne for ny teknologi. I tillegg er det nyttig med “ekstreme” brukere, ettersom de kan gi nye perspektiver på hvordan noe kan brukes.

Tradisjonelt er en brukersentrert utviklingsprosess iterativ, dvs. at man jobber fram en tidlig versjon av produktet, som gjøres gradvis bedre. Mahlke ønsker at også produktideen skal inn i denne prosessen, der man ikke bare starter med en definisjon av hva man skal lage, men at definisjonen også utvikler seg gjennom en brukersentrert og iterativ prosess.

Mahlke er, som Kim, inne på at man må se på sammenhengen produktet brukes i, men han er opptatt av å ikke begrense seg til eksisterende eller sannsynlige sammenhenger. Ved å se på hvordan produktet vil bli brukt i framtiden eller hvordan f.eks. et dyr ville brukt produktet, kan man få nye ideer og unngå å låse seg til den bruken av produktet man i utgangspunktet ser for seg.

Tving deg selv til å være kreativ

Mike Glaser fra SpankDesign er også opptatt av å ikke låse seg i designprosessen. Han tvinger designteam til å jobbe kreativt ved å gå metodisk til verks for å få fram nye ideer. Dette kaller han “indusert kreativitet”.

I en av metodene han bruker, starter de med det de skal designe – for eksempel en sykkellås. De lister i fellesskap opp en del ord som kan beskrive dette produktet, og velger deretter ett av dem – f.eks. “sikkerhet”. Neste steg er å liste opp en del ord man forbinder med dette ordet, og velge ett av dem, f.eks. kan man ha kommet på ordet “teppe” som noe man forbinder med sikkerhet.

Til slutt lister man opp en del ord som beskriver “teppe”, og tar utgangspunkt i noen av disse og prøver å se for seg hvordan en sykkellås ville vært om den var mer likt et teppe. Kanskje sykkellåsen skal være noe man legger rundt hele sykkelen for å beskytte setet og begge hjulene?

Glaser er også opptatt av at man må gi folk tillattelse til å være kreative. Ikke fokuser på detaljer for tidlig. Man må starte en kreativ seanse med å åpne for mange forskjellige løsninger, og heller bli mer konkret etterhvert. Dette minner på mange måter om det man gjør i vanlige brainstorming-sesjoner, men Glaser gjør det ofte ved å la de involverte jobbe med leire og andre formelige materier, og lage modeller av tenkelige og utenkelige løsninger av produktet der og da.

Gjermund og Kjell-Mortens kommentarer

Det er forsåvidt lite av dette som er nytt, men det er godt å se at Usability-miljøet i Europa går mer og mer i retning av å skape gode brukeropplevelser heller enn å bare evaluere – og kritisere – det andre designer. Det er også noe vi i NetLife Research kjenner oss igjen i. Vi startet med å gjøre mye brukertester, gjerne sent i utviklingsprosessen, men er nå ofte med i forkant og leder an eller bidrar i prosessen rundt hva man egentlig skal lage og hvordan det skal designes.

Vi er også positive til tanken om å bruke mer tid på å studere de sammenhengene det vi designer brukes i. Ofte forenkler man prosjektene for mye og tar utgangspunkt i den forståelsen av brukeren man allerede har, men ved å reise ut og studere den situasjonen nettsteder og produkter brukes i, kan man få helt andre innspill og ideer enn man kan ved å teste i en testlab.

Det er viktig å vite når man skal gjøre en brukertest og når en brukertest skal gjøres i en labb:

• Tidlig i prosjekter, når man ikke har klart for seg hva man skal lage, vil det være svært nyttig å anvende metoder som undersøker brukerens sammenheng, behov og ønsker
• Når man har et design er det nyttig å teste dette på brukere for å få tilbakemeldig på om det fungerer i praksis
• Testlabben fungerer godt og er effektiv når sammenhengen produktet skal brukes i, ikke skiller seg altfor mye fra situasjonen i en labb
• For nettsteder og produkter som skal brukes i situasjoner som skiller seg vesentlig fra den isolerte situasjonen i en tradisjonell testlabb, er det viktig å teste dette der det faktisk skal brukes eller tilpasse testsituasjonen til dette. Det kan f.eks. være stor forskjell på å bruke en mobil i en testlabb og når man står på bussen og skal gå av om to minutter

Myte 1: Brukervennlighet handler om brukertesting

Fagfeltet som sysler med brukervennlighet har etter hvert fått noen år på baken, og brukertesting har lenge vært en av de mest sentrale metodene. Det er primært gjennom brukertesting at fagfeltet har fått sine erfaringer, og mye av styrken har ligget i at man ikke bare synser og mener, men brukertester med faktiske brukere for å se om ting fungerer.

Fortsatt er brukertesting et av de viktigste verktøyene vi har, fordi det er en unik måte å sjekke om en løsning er forståelig for andre enn de som står bak. Det gir mulighet til å se hva brukere gjør, og ikke bare spørre hva de synes.

Men brukertesting er langt fra det eneste vi gjør når vi skal utvikle brukervennlige nettsteder, av den enkle grunn at brukertesting kan avdekke problemer, men ikke løse dem.

For at sluttresultatet i et prosjekt skal være brukervennlig, må vi som eksperter være med i alle faser. Vi hjelper først kundene å sette opp mål for løsningen. Så avdekker vi hvem som skal bruke løsningen og hvilke mål og behov de har. Deretter er det en kreative fase der vi utarbeider mer eller mindre realistiske konsept på papir eller papp for å utfordre kunden. Så velges et konsept og det hele ender i et interaksjonsdesign med fokus på innhold og funksjon i form av skisser eller en prototype, før grafisk design og teknisk implementering.

Brukertesting kan gjøres underveis på skissene, på en prototype eller på ferdig løsning.

Det vi driver med handler om mer enn å gjennomføre en brukertest for å sjekke at ”Ja, brukeren fant kontaktskjemaet”, det handler om å skape en god opplevelse for brukeren – de skal få til det de kommer for, det skal kunne gjøres effektivt og uten at de må streve, de skal være fornøyd med hele opplevelsen og organisasjonen bak nettstedet skal oppnå sine mål.

Nettopp derfor sier mange i stedet at de jobber med brukeropplevelse, for å fremheve at det innebærer mer enn det man tradisjonelt har forbundet med brukervennlighet.

Myte 2: Grafisk design er en motsetning til brukervennlighet

Så til den andre myten – at grafisk design er noe som kan settes opp mot brukervennlighet.

I diskusjonene sier gjerne den ene parten at det viktigste er at brukeren finner det han er ute etter, så grafisk design er mindre viktig, mens den andre parten mener brukervennlige løsninger er kjedelige og at andre ting er mer viktig.

Men kan man ha et godt og brukervennlig nettsted uten grafisk design? Og kan grafisk design formidle noe som helst hvis ingen klarer å gjøre det de skal gjøre på nettstedet?

Svaret er vel heller at man ofte diskuterer forskjellige designstiler. Det minimalistiske designet har lenge vært sett på som en forutsetning for brukervennlige løsninger, fordi det som designretning nettopp har vært opptatt av å fjerne alt unødvendig og fremheve det funksjonelle. Designere har gjerne andre suksesskriterier, og er opptatt av at designet skal kommunisere verdier og bygge opp under den merkevaren man ønsker å skape. Det vil i mange tilfeller resultere i nettsteder med mer dominerende designelementer.

Husk også at brukervennlighetsmiljøet og designbransjen har kjempet hver sin kamp på Internett – kampen om å sette brukeren i sentrum og kampen om god design på den i utgangspunktet tekstbasert weben. Begge kampene er nok langt på vei gjennom sine tyngste faser, men det gir allikevel de to fagmiljøene ulike utgangspunkt for å vurdere om de har lykkes med et nettsted.

Mens de to miljøene kjemper hver sin kamp og diskuterer hvilken designstil som egner seg best på nett, overser vi at kampene ikke er mot hverandre og at debatten om designstil er underordnet det man egentlig burde diskutere:
Hvordan jobbe sammen for å skape en god brukeropplevelse?

Gjensidig avhengighet

Jeg mener grafisk design og brukervennlighet er avhengige av hverandre – uansett hvilken designstil man velger.

Jesse James Garrett’s ”Elements of User Experience” beskriver utviklingen av et nettsted på flere nivåer, der ”Visual Design” er det øverste laget – det folk ser først når de kommer til et nettsted, eller ”toppen av isfjellet”, som det også har blitt omtalt som.

På mange måter kan man si at det vi brukervennlighetsfolk gjør – på nivåer lenger ned – kommer til uttrykk nesten utelukkende gjennom grafisk design. Det er lite av det vi gjør som ikke er avhengig av å få et riktig grafisk uttrykk for å komme igjennom til brukeren.

Vi kan for eksempel bestemme at forsiden skal ha et prioritert felt som presenterer det viktigste på nettstedet og har en stor og klikkbar bestillingsknapp, men for å få til det må det grafiske designet på siden fremheve dette feltet, og knappen må gis et design som gjør at den skiller seg ut, ser klikkbar ut etc.

Samtidig må det grafiske designet ta utgangspunkt i målet med nettstedet og en forståelse av de man ønsker å kommunisere med, og dette må være gjennomført gjennom alle nivåene i utviklingen for at designet skal komme til sin rett og ikke bare bli en kuriositet for de som er opptatt av design.

Grafisk design og brukervennlighet er ikke så ulikt som man skal ha det til. I begge leire er man opptatt av å oppnå mål og å kommunisere med de som ser eller bruker det man lager, men man fokuserer på litt andre deler av denne kommunikasjonen og har ulike metoder.

Fagfeltene kan ikke reduseres til brukertesting og pynt – de er overlappende og avhengige av hverandre. Utfordringen blir å finne gode måter å samarbeide på og å sørge for at det går en rød tråd gjennom alle fasene i prosjektet.

Hvordan viske ut skillet?

Til tross for at et strengt skille mellom brukervennlighet og grafisk design er kunstig og unødvendig i utviklingen av nettsteder, er det et skille vi absolutt opplever slik situasjonen er nå.

Dette har mye å gjøre med at det er forskjellige fagdisipliner og folk med ulik utdannelse på hver side av skillet, selv om det finnes eksempler på folk som beveger seg på begge sider. I mange prosjekter er det andre mennesker og gjerne også andre firmaer som overtar på dette kritiske punktet i utviklingsprosessen.

Når man er langt inne i prosessen med å lage ”det perfekte interaksjonsdesignet” er det lett å tenke at en grafisk designer bare skal ”pynte” på skissene, og vi kan på den andre siden også oppleve at viktige prinsipper i våre løsninger forsvinner når en designer skal ”gjøre det pent”.

Så det store spørsmålet blir: Hvordan kan vi viske ut skillet og få en mer glidende overgang mellom interaksjonsdesign og grafisk design?

Her er fem forslag:

1. Ha deltakere fra begge leire med i teamet under hele prosjektet
2. Interaksjonsdesigner og grafisk designer setter seg ned og lager konseptskissene sammen
3. Unngå for mye isolasjon i prosessen – man trenger ikke jobbe sammen hele tiden, men ikke sitt i 14 dager og lag det grafiske designet bak lukkede dører før det presenteres
4. Brukervennlighetsfolkene bør ikke forlate prosjektet når interaksjonsdesignet er levert – vær med og spill ball med de som lager det grafiske designet
5. Senk gardene og lær av hverandre i stedet for å forsvare sine tuer

Flere forslag?

Vi bruker ofte eye-tracking i brukertester og kan få ut heatmaps som viser hvor på en nettside testpersonene fokuserte blikket under testen, og hvordan øynene beveget seg. Feng-GUI bruker derimot regler basert på studier av menneskers persepsjon og erfaringer fra tradisjonell eye-tracking, og hevder å kunne gi analyser som kan måle seg med vanlige heatmaps.

Her er et eksempel på hvordan forsiden på netliferesearch.no blir sett av besøkende, i følge Feng-GUI (røde områder får mye fokus, grønne områder middels, og blå områder lite fokus):

Kan vi pakke ned eye-trackeren vår og sende testpersonene hjem igjen? Prøv Feng-GUI og gi din dom som kommentar til denne bloggposten…

Bli telt du også: Delta i undersøkelsen

Mens A List Apart teller resultatene kan du se resultatene fra i fjor. Du kan også lese om Eiriks undersøkelse av hva utviklere kan og hva kundene forventer at de kan.