Data inn, data ut og kontekst

Framsida skal visa data som kjem inn og som andre produserer. Framsida på Twitter viser straumen av tweets frå dei du følgjer og Facebook viser oppdateringane til alle vennene dine.

Profilsida skal visa data som går ut,- data som andre får tilgang til om og frå deg. Profilsida har to sider. Den sida der du legg inn data (ofte ei mengde skjemafelt) og den sida der du kan sjå korleis profilen din vert vist for andre brukarar.

Konteksten brukaren er i avgjer kva og kor mykje data du skal visa til ei kvar tid. Om ein ser på ein enkeltprofil eller på ein profil som del av eit nettverk eller ei gruppe kan spela inn på kor mykje detaljar ein skal visa om brukaren.

Desse ulike tilstandane må du designa for

I workshopen skisserte Hannah Donovan opp 6 ulike tilstandar som dekkar dei ulike kombinasjonane av innlogga/utlogga, kven som ser på data og kor mykje data som er tilstades:

Tilstandar du må designa for

A. Ukjent brukar, ikkje logga inn, du har ikkje noko data enno

Dette er slik heilt nye løysningar ser ut for dei første brukarane. Som her i eit tidleg skjermbilete frå Pinterest.com (ei digital oppslagstavle). På denne sida kan du forklara kort kva det er og oppfordra brukaren til enten å logga inn om dei har ein profil – eller be dei om å oppretta brukar (eller setja seg på venteliste, slik det ofte er i startfasen på nye sosiale tenester).

Skjermbilete av inngangssida til Pinterest (frå august 2010)

B. Ukjent brukar, ikkje logga inn, ser på data

Etter ei stund vil dei eksisterande brukarane ha generert nok data til at du kan bruka dette for å betre fortelja kva løysningen din dreiar seg om for nye brukarar. På Pinterest si framside i dag viser ein døme på oppslagstavler som andre brukarar har laga.

Framsida på Pinterest.com i dag

C. Ein annan brukar, logga inn, ser på kvar andre sin data skal vera

Når ein er innlogga kan ein fritt surfa rundt og sjå på andre sine bidrag og profilar og interagera med det dei har lagt ut. Det ein gjer med denne informasjonen vil då bli lagra på eigen profil. Til dømes om ein vel eit bilete som favoritt kan ein seinare finna dette att blant eigne favorittar.

Profilside på Pinterest. Viser alle data som brukaren har lagt inn i løysningen.

D. Ein annan brukar, logga inn, ser på data som er lagt inn

Framsida i løysningen; ein ser alle data som kjem inn. Her vil ein sjå oppdateringar frå dei ein følgjer/abonnerer på informasjon frå.

Alle data som andre har lagt inn i løysningen

E. Eg er logga inn, og ser på kvar eg skal legga inn data

Eiga profilside – det eg kan legga inn som seinare vil vera tilgjengeleg for andre.

Profilsida mi på Pinterest. Viser kva informasjon eg kan legga inn.

F. Eg er logga inn, og ser på det eg har lagt inn

Dette er min profil slik andre vil sjå den når dei surfar rundt i løysningen. Einaste forskjellen frå ein annan sin profil og min profil er at eg her vil ha mogleik for å gå inn og endra på det som visest.

Slik ser min profil ut for andre og eg ser kva eg kan oppdatera/endra på.

Har du konseptet for dei seks ulike tilstandane klart kan du gå laus på sjølve designet av sida, og då kan du finna nyttige tips i bloggposten Design av brukargenererte data.

Hannah Donovan, interaksjonsdesignar (tidlegare designansvarleg hos LastFM hadde workshop om “Information design for an instrumented world” på Web 2.0 Expo i New York og delte sine tips og erfaringar med oss.

Tre ting du må få oversikt over før du set i gang med designjobben

1. Få oversikt over og forstå dei data du har tilgjengeleg i løysningen

Sannsynlegvis vil ikkje alle data vera interessante å visa fram, så det du må finna ut av er kva du vil oppnå og kvifor du vil oppnå det. Når du har dette klart kan du gå vidare til korleis du skal gjera det.

2. Få tak i reelle data

Det kan enten vera ein dump med data (ei fil, ein database o.l) eller levande data som du får tilgang til gjennom eit API. Finn ut korleis webgrensesnittet (API’et) virkar, kva variablar du kan få ut og i kva format du kan få dei ut.

3. Design med reelle data

Start med å skissa konseptet ut på papir. Deretter må du få inn reelle data (enten direkte i html, eller i minste fall – hent ut reelle data), så designar du grensesnittet med dei data som skal vera der.

Har du desse tre tinga for deg finst det ein verktøykasse med element som kan vera til inspirasjon i designjobben.

Verktøykasse med designelement for å visa fram data

Feed/Straum

Straumen av oppdateringar er alltid levande. Ofte er den animert for å visa at det er sanntidsoppdateringar. Flyten er i eit format der det nyaste alltid kjem øverst. Tenk på kor mykje du kan visa samstundes før det vert overveldande (signal vs. støy).

Straumen av oppdateringar på Twitter

Rangerte lister og topplister

Fungerar bra dersom det er eit konkurranseaspekt i dei data du visar fram. Ha med element som nummer, namn og verdi/talet på poeng.

Mest spelte artistar på LastFM

Status for brukaren

Viser korleis andre brukar det ein legg ut/deler. Til dømes kor mange har sett på profilen din eller kor mange av dine bilete har andre sett på.

Talet på gongar eit bilete har blitt vist på Flickr

Tellarar

Augneblikksbilete av brukarstatistikk. Til dømes talet på følgjarar og personar ein følgjer på Twitter. Omlag tre variablar er passe for at ein skal kunna oppfatta dei ved eit blikk.

Talet på gongar ein har tvitra, kor mange ein følgjer og kor mange som følgjer brukaren på Twitter

Sparklines/minigrafar

Desse minigrafane som Edvard Tufte har laga gir eit raskt overblikk og viser trender i store mengder data på liten plass.

Minigraf i WordPress over visningar av blogginnlegget

Linjediagram

Best på å visa samanhengdande data og trender i datamengden. Sidan data er samanhengande, må du tenkja på at brukaren skal kunna henta ut data frå kvart punkt på grafen. Som å henta ut farten for kvart punkt på løpeturen i grafen frå Runkeeper under.

Graf over løpetur på Runkeeper

Søylediagram

Søylediagrammet blir brukt til å visuelt samanlikna separate data. Til dømes å raskt sjå kva for ein joggetur er lengst.

Søylediagram over løpeturar på NikePlus

Setning

Du får kontekstualisert data i ein samtaleaktig form. Pluss at du kan gjera det meir personleg.

Tala fortel kor mange gongar ein har spelt sangen (LastFM)

Søk i data i sanntid

Søket oppdaterar seg etterkvart som du puttar inn søkeordet, som i søk i Twitter eller Google.

Søket i Twitter oppdaterar seg etterkvart som ein skriv inn søkefrasen

Favoritt/Likar/Elskar/Stjerne/+1

Dette kan du bruka der det er sanntidsstraumar med data som folk kan tenkjast å lika og som dei vil ta vare på. Då må du òg laga ein stad der data som ein merker kan hamna og der ein kan finna det att.

Favorittlåtar i Spotify kan stjernemerkast og finnast att under Favorittar

Resirkulering av data

Med resirkulering av innhald legg du til rette for late brukarar,- dei som ikkje er blant dei 1% som bidrar mest. Til dømes reblogging på Tumblr eller retvitring.

Funksjon for å retvitra ei melding som andre har laga i Twitter

Tommel opp/ned og rangering med stjerner

Dersom det er viktig for deg å få bra innhald på toppen av straumen/feeden din, er det lurt å la brukarane avgjera kva som er bra innhald og leggja dette øverst. Dersom du brukar stjerner må du sørga for at du får fram kva skalaen er; går den frå misfornøgd til fornøgd eller er ei stjerne litt fornøgd og fem superfornøgd. Tommel opp og tommel ned er lettare å forstå intuitivt for brukaren.

Stjernerangering av hotell på TripAdvisor

Varslingar

Varslingar skal visa oppdateringar brukarane ikkje vil gå glipp av. Varsla skal seia i frå om at det er noko nytt som har hendt utan å vera for påtrengande. Vurder støy vs. signal ratioen; kor mykje har du trong for å oppdatera brukaren på.

Varsel om nye oppdateringar på Facebook

“Old school” er kult

Godt handtverk går aldri av moten. Vis at du kan det du drive med og ver stolt av det du gjer. Ikkje kast deg på trendar innan webdesign, men tenk på kva design som passar for kunden din i kvart tilfelle. Ribbons er trendy, men det tar cirka 10 sekund å laga i Photoshop. Kva slags verdi gir det eigentleg til innhaldet ditt?

Bruk det du kan på nye områder – ikkje ver redd!

Kan du handtverket kan du bruka det på mange forskjellige områder – òg på områder du ikkje har jobba med før. For å lykkast er retningslinja hans “bruk verktøy/teknikkar som du kjenner for å laga ting for områder du ikkje kjenner”. Det kjem stadig nye digitale grensesnitt ein må designa for,- iPhone, Android, iPad osv. Ved å bruka retningslinjer, prinsipp og det du kan frå før av på nye områder kan du lykkast der òg.

Samarbeid på tvers av fag

I staden for at det finst ein superdesigner som er ekspert på alt kan tverrfaglege team vera løysninga. I Big Spaceship har dei ikkje avdelingar med fagområder, men faste team som er samansett av alle kompetansane ein treng for å gjennomføra eit prosjekt. Team-strukturen til firmaet har òg vore studert i ein artikkel publisert i Harvard Business Review: Big Spaceship: Ready to go big? Sjekk òg ut den kreative “Staff vizualizer”-videoen dei har laga:)

Det er viktig å få til samarbeid med andre for å laga noko du ikkje kunne ha laga på eiga hand. Som eksempel drar han fram nettsida www.design-swap.com,- der han og ein fagkollega basert på input om den andre sin dag skulle laga heimesida “a day in the life” for personen.

Er det andre utfordringar me møter for å fylla rolla som moderne digital designer?

Som i eksemplet han viste oss frå oppretting av ny Google konto på iPhone:

- og det same skjer på ein Android-telefon:

På både iPhone og Android vert autozoom aktivert når ein set musepeikaren i feltet. Noko som er ein smart funksjon. Den gjer det mykje lettare å sjå at det ein skriv inn vert rett. Er ein inne på ei vanleg nettside og skal fylla ut eit tilsynelatande oversiktleg skjema med venstrejusterte ledetekstar vil det fort bli meir komplisert når biletet zoomar inn og all teksten som fortel kva som skal inn forsvinn.

Sidan Luke W sine retningslinjer óg er forsterka med eyetrackingstudier av Matteo Penzo som viser at det går raskast å fylla ut eit skjema med ledetekstane plassert over feltet, er det lurt å gjera dette. Lurt både for dei som kjem inn på nettsida di med  datamaskinen, og for dei som som surfar på sida di med mobiltelefonen. Sånn som i eksemplet frå Brightkite – det fungerar like bra på dataskjermen som på mobil – ledeteksten er synleg sjølv om telefonen zoomar inn: 

Dette var eit lurt tips frå Luke W. Har du andre lure tips for mobilt skjemadesign?

Du er bare ny brukar ein gong

I foredraget snakka dei om kor viktig det er å forstå korleis brukaropplevinga på nettstaden din er for ein heilt ny brukar. Då funkar det ikkje å følgja designsfilosofien til Jason Fried i 37signals: “We design for ourselves first”.�
Skal du få til å designa for førstegangsbrukarar må du bruka dine empatiske evner til å setja deg inn i den nye brukaren sin situasjon.

1. La brukaren koma i gang før du krev noko av dei

Registreringssida til Geni.com

For å motivera brukarane bør du få fram kva som er det unike med løysningen din. Du må vidare sørgja for at dei skjønar at det som skjular seg bak innlogginga er verdt å få med seg. På nettstaden Geni (digitalt familietre) får du ei forklaring på kva som skjuler seg av funksjonar lenger inn i løysninga med ein kort filmsnutt. Og sjølv om ein ikkje startar filmen gir startbiletet eit godt inntrykk av kva det dreier seg om.

Det er ikkje fokus på registrering på førstesida, men fokus på å koma i gang. Det står ikkje “logg inn” eller “opprett brukar” på knappen, men “Start my family tree!”. For å ikkje mista det ein har begynt på kan ein leggja til eit passord i etterkant.

2. Design for “A-ha”-augneblinken -  augneblinken der brukarane dine forstår kva som gjer løysninga di unik.

Registreringsprosessen til FaceBook vart brukartesta. Ein brukar hadde masse trøbbel med å registrera seg og skjønte ikkje heilt vitsen. Først då ho kom til steget “Finn folk du kjenner” og fekk opp bilete og namn på folk ho hadde gått på barneskule med – då gjekk lyset opp for ho. Dess tidlegare du klarar å gi folk denne opplevinga dess større sjanse er det for at dei vil fortsetja. Etter brukartesting flytta FaceBook dette steget lenger fram i prosessen.

Mint

3. Motiver brukaren din undervegs – når dei gir deg informasjon, gi dei noko tilbake.

Her kan du henta inspirasjon frå speldesign: når brukarane prøver litt, gi dei meir informasjon/funksjonalitet. I registreringsprosessen hos Mint (budsjettside) får du betryggande tilbakemeldingar steg for steg. Dersom du skal leggja inn all informasjon om kontoane dine etterpå så kan det vera greit at dei framstår som om dei er til å stola på.

4. Gjer opplæringa til ein del av opplevinga.

Google gjer dette i for eksempel Google Calendar. I staden for å laga manualar eller ta deg til ei eiga side som forklarar nye ting, så legg dei informasjon og tips om nye funksjonar rett inn i skjermbileta.

Google Calendar

Bloggverktøyet Tumblr(

Eit anna eksempel kjem frå bloggverktøyet Tumblr. Der kjem du i gang ved kun å oppgi epost, passord og ønska url. Straks du er inne kjem du i gang med å laga bloggen din. Det er ingen vegvisar, men opplæringa skjer gjennom at du tar i bruk bloggen og lagar den slik du vil ha den.

Forøvrig var konferansen Frontend2010 òg ei første brukaroppleving. I regi av våre venner i iXD, vart konferansen for første gang arrangert i Oslo denne veka. Det var eit godt stykke arrangement, så eg lurar på om dei hadde sniklytta på foredraget først:-)

Korleis møter du dine brukarar for første gong?

Her er nokre av dei sidene og designarane eg synst har fått det til:

Mike Kus frå Carsonified / Carsonified si nettside

Klar og reindyrka fargebruk der kvart menyområde er i kun to fargar; ein lys og ein sterk farge. Eg tilrår å gå inn og klikka på dei ulike toppmenyvala; det er veldig stilig. Den enkle fargebruken gjer at det ser ryddig og oversiktleg ut og tillet at det er ein relativt kompleks illustrasjon midt på.

Mike Kus frå Carsonified / The Mattinator

The Mattinator er ei teneste frå Carsonified og som gir deg mogleiken til å twitra på fleire kontoar samtidig. Friske fargar, handteikna element, litt humor og likevel oversiktleg og enkelt.

Vitor Lourenço, produktdesignaren til Twitter / Twitter

Vitor Lourenço har jobba som produktdesignar for Globo, Yahoo og no for Twitter (han kjem òg på Webdagene 2010 og fortel meir om godt design av innhald). Designet til Twitter er reint og enkelt samtidig som det ser koseleg ut. Det er ikkje så mange ekstra element og det er i hovudsak innhaldet som er designa.

Jason Santa-Maria frå Happy Cog / Happy Cog si nettside

Sida er godt organisert og framhevar innhaldet. Dei gjer det ved først og fremst designa teksten og la det vera det viktigaste.

Jason Santa-Maria frå Happy Cog /

Typekit

Typekit er ei abonnementsbasert teneste som gir deg mogleiken til å lenkja til fontar (på den måten kan ein bruka andre fontar enn dei som finst som standardfontar på datamaskinen i webdesignet). Sjølve websida brukar i hovudsak teksten som design og det passar jo veldig godt når det er det det dreiar seg om.

Jason Santa-Maria frå Happy

Cog /

A list apart

Godt typografisk handtverk gjer at det ser oversiktleg ut sjølv om det er store mengder tekst. Den duse fargeprofilen forsterkar det lette uttrykket.

iA / informationarchitects.jp si nettside

Mange av oppdraga til iA er på design av nettaviser. Og det skin kanskje gjennom i designet av deira eiga nettside? Designet er i hovudsak basert på tekst, og eit stramt og gjennomtenkt oppsett gjer at det ser ryddig og elegant ut.

iA / Zeit Online

Ei av dei mange nettavisene som iA har designa. Eg synst dei er veldig flinke til å få store mengder tekst til å sjå ryddig og strukturert ut. Godt bruk av grid og justering av linjer på tvers av spalter forsterkar det ryddige inntrykket.

Eg har sikkert ikkje fått med meg alle kule og brukarvenlege design der ute, så om du har tips eller innspel blir eg glad for det!

Elmer står for enklare og meir effektiv rapportering og er eit sett med skjemaretningslinjer for det offentlege. Elmer inneheld både layoutkrav og pedagogiske krav (krav til språk, formuleringar o.l) og er grunnen til at skjema frå det offentlege ser ganske like ut. I mange tilfeller trur eg at Elmer-retningslinjene verken gjer det enklare eller meir effektivt å fylla ut offentleg skjema. Det er på høg tid at Elmer møter Web 2.0 og lar seg inspirera. Så, først nokre tips og triks frå Web 2.0-skjema og så er det Elmer-skjemaet sin tur til å få gjennomgå.

Ledetekstar

Toppjusterte ledetekstar er det som er mest effektivt. Bruk det om du ikkje har nokon særskilte grunnar til å la vera. Det gjer det enklare å skriva lengre og meir forklarande ledetekstar. Under er skjema henta frå Origo.no

Registreringsskjema på origo.no

Høgrejusterte ledetekstar (høgrejustert inntil feltet) kan funka. Det krev mindre vertikal plass, men gjer det vanskelegare å skanna raskt gjennom skjemaet på grunn av ujamn venstrekant. Yahoo har gjort dette betre med å gruppera felta med skannbare overskrifter.

Registreringsskjema på Yahoo

Venstrejusterte ledetekstar bør i hovudsak ikkje brukast. Dersom det er uvanlege/ukjente opplysningar som skal inn kan det vera ei løysning sidan det gjer det lettare å skanna gjennom alle ledetekstane for å få oversikt over kva det vert spurt etter.

Skjema frå Hotels.com - ikkje eit eksempel til etterfølgjing

Nødvendige felt

Tenk over kva opplysningar du må ha og kva du bare synst er kjekt å ha. Dess færre felt du har, dess mindre brukar du av tålmodet til brukaren din. Der brukaren må logga seg inn eller registrera seg er det viktig at dette ikkje kjem i vegen for at brukaren får gjort det han skal. Amazon har løyst dette fint ved å la brukaren få fortsetja med handlinga si og så la han oppretta passord seinare.

Innlogging på Amazon

Dersom det er fleire opplysningar du ønskjer, bør du la brukaren registrera seg raskt i første omgang og heller la dei leggja inn fleire opplysningar i etterkant. Slideshare lar deg opprett ein brukar med brukarnamn, epostadresse og passord. Går du inn og ser på profilen din seinare så får du mogleik til å leggja inn fleire opplysningar med ein indikator på kor komplett profilen din er.

Profilside på SlideShare

Valfrie/obligatoriske felt

Regelen her er enkel og grei; marker dei felta det er færrast av – enten med “Valfritt” eller “Obligatorisk”. Eksemplet under er frå eit påmeldingsskjema frå våre eigne nettsider der dei to felta som er valfrie å fylla inn er markert.

Hjelpetekstar

Når hjelpeteksten nærmast er nødvendig for å fylla ut skjemaet bør den alltid vera tilgjengeleg og stå i tilknytning til feltet. Storebrand brukar slike hjelpetekstar i forsikringsløysninga si.

Skjema frå Storebrand skadeforsikring

Der det er mykje hjelpetekst kan ein la det aller viktigaste vera synleg og lenka inn til ein light box for å få opp meir informasjon, som i eksemplet nedanfor frå Ebay.

Skjema frå Ebay

Særs viktig for hjelpetekstar er å fjerna dei som er unødvendige. Med eit kritisk blikk på eit Elmer-skjema hos ein kommune, så er noko av problemet at mogleiken for å gi hjelpetekstar vert brukt der det ikkje trengst og skjult bak eit i-ikon. Dette førar til ekstra klikking for ingen hjelpande informasjon, som i skjemaet nedanfor der hjelpeteksten til “Telefon dagtid” ikkje gir meir meining.

Utdrag frå Elmer skjema

Innskrivingsfelt

Lengda på feltet skal kommunisera kva opplysningar som skal inn, t.d at eit postnummerfelt ikkje treng å ha plass til fleire enn 4 siffer. Har du mogleik bør du òg validera opplysningane som vert skrivne inn etterkvart, så unngår du at brukarane skriv inn feil og må gå tilbake i skjemaet i etterkant. I eksemplet under frå Newsvine.com sjekkar dei umiddelbart om brukarnamnet eg ønskjer er tilgjengeleg.

Registrering av brukar på Newsvine.com

Navigering i skjema

Uansett om skjemaet er over fleire sider eller ei så må det vera tydeleg kva som er primæraksjon og kva som er sekundæraksjon. Aksjonar som Lagre, Send inn eller Gå vidare bør vera store knappar. Avbryt, Gå tilbake og Tøm skjema bør vera små lenkjer. Godt eksempel frå BaseCamp i skjermbiletet for å oppretta ein ny milepæl; stor knapp for å laga milepælen og lita lenkje ved sida av for å avbryta.

Oppretting av milepæl i BaseCamp

Eit eksempel på korleis ein ikkje bør gjera det finn ein hos NAV der ein skal bestilla Europeisk helsetrygdekort. I tillegg til at knappane ser heilt like ut er Nullstill-knappen plassert der ein vanlegvis blar seg vidare til neste side. Eg måtte prøva eit par gangar før eg fekk det til.

Bestillingsskjema for helsetrygdekort

Gjer det meir moro

Det er vel dei færraste som fyller ut skjema fordi dei synst det er moro i seg sjølv. I dei aller fleste tilfella er skjemaet noko ein må gjennom for å få gjort det ein skal. Då kan det vera fint å gjera opplevinga bare litt betre med humor. Som å skulda advokatane for at ein må akseptera avtalevilkåra hos TurboTax i eksemplet nedanfor.

Akseptering av avtale på TurboTax

Registreringsskjemaet hos Ethnio gjer at humrar medan ein fyller det ut. Mange fine kommentarar/hjelpetekstar nedover – utan å forkludrar enkelheiten i skjemaet. Kommentaren på val av tidssone er min personelege favoritt.

Registreringsskjema hos Ethnio

Redesign av Elmer-skjema

Skjemaet under er eit typisk Elmer-skjema frå ein norsk kommune (skjemaet er ekte og vart funne på nettet.) Poenget er ikkje å henga ut nokon, så for høvet er det anonymisert.

Skjema for å søkja på stilling

Skjemaet ser tungt og byråkratisk ut, så eg har gjort ein redesign av det basert på triks og tips frå Web 2.0 verda.

1. Kva felt treng ein?

2. Ledetekstane bør vera toppjusterte over innskrivingsfelta.

Det går raskast å fylla ut og gir eit meir ryddig uttrykk.

3. Unngå krøkkete formuleringar – bruk vanleg språk

. I staden for å ha eit spørsmål som “Skal søknaden haldast attende frå offentlegheit” med kun ein sjekkboks med “Ja”, bør ein formulera dette meir aktivt og heller la felt for grunngjeving koma opp dersom ein hukar av.

4. Navigasjonen i skjemaet bør prioriterast.

Knapp for å gå til neste side bør vera stor, og avbryt bør vera ei lita lenkje.

5. Hjelpeteksten bør inkluderast der den trengs

(og fjernast der den ikkje trengs!).

• Forklaring av kva “Telefon dagtid” er er unødvendig.
• Hjelpeteksten for fødselsnummer bør inkluderast i ledeteksten: Fødselsnummer (11 siffer). Erfaringsmessig kan folk ofte blanda om det er fødselsdato, personnummer eller heile fødselsnummeret og talet på siffer kan derfor vera til hjelp.
• For hjelpetekst til kor vidt søknaden skal haldast attende frå offentlegheita, så bør denne vera synleg. Eg tippar det er fleire enn meg som ikkje forstår dette heilt. Dersom ein av ulike årsaker ønskjer at søknaden skal atterhaldast offentlegheita så er det ok å få veta at det finst unntak. Sidan teksten i dette tilfellet er ganske lang kan ein lenkja inn til ein lightboks med meir informasjon.

6. Ta vekk unødvendige og forstyrrande element

• Navigeringsmenyen til venstre er ikkje det viktigaste på sida og bør tonast ned.
• Innlogging til Min ID ser ikkje ut til å vera nødvendig i søknadsprosessen, så inntil motsette er bevist så forsvinne denne òg
• Fargevalet kan med fordel gjerast litt lettare

7. Gjer det bittelitt meir moro

Det er ikkje så mykje som skal til. Sleng til dømes på ein kommentar bak feltet “Telefon dagtid” for å forklara kvifor det trengs. Det er sjølvsagt fordi kommunalt tilsette ikkje jobbar etter klokka 16.



Skjema for å søkja på stilling, redesigna

Kva syns du om redesignet? Blogginnlegget er basert på eit kveldsforedrag eg har holdt her i NetLife Research, så for dei som var tilstades her vart dette ein liten repetisjon.

]]> http://iallenkelhet.no/2009/09/22/elmer-2-0-m%c3%b8ter-web-2-0/feed/ 18 http://iallenkelhet.no/2009/05/14/11-tips-for-a-gjera-overgangen-fra-design-til-utvikling-sa-smertefri-som-mogleg/ http://iallenkelhet.no/2009/05/14/11-tips-for-a-gjera-overgangen-fra-design-til-utvikling-sa-smertefri-som-mogleg/#comments Thu, 14 May 2009 15:14:10 +0000 Martha Lyngnes http://www.iallenkelhet.no/?p=2139

Du er designar og har laga eit flott design, men etter to månader med teknisk utvikling er det fullstending ødelagt! Eller, du er utviklar og mottek ei Photoshop fil der designaren har tenkt gjennom omtrent 10% av det han burde ha tenkt gjennom. På Future of Web Design i London ga Drew McLellan oss nokre tips på korleis me kan gjera overgangen frå design til utvikling smertefri. McLellan er sjølv utviklar og råda hans er derfor fokusert på korleis ein designar kan gjera det enklast mogleg for utviklaren:-)

Som designar er det desse 11 tinga du bør hugsa på å kommunisera til utviklaren:

1. Er layouten din fast eller flytande?

Fast layout er når designet er laga for å passa med ei bestemt skjermoppløysning. Fast layout gjer at ein har meir kontroll på korleis designet ser ut i og med at det ikkje strekk seg med nettlesarvindauget. Ofte er det òg enklare å koda.
Flytande layout fyller nettlesarvindauget og gjer at dei som har store skjermar/høg oppløysning får sjå sida di i stort format. Tekstlinjer kan bli veldig lange og vanskelege å lesa. Som Wikipedia eller Jakob Nielsen sin nettstad på ein brei skjerm.

2. Har du teke høgde for ekspandering av alle felt?

Det kan koma meir tekst og meir innhald enn det som er brukt som eksempeltekst i designet. Kva skjer med dei andre elementa om noko plutseleg vert større? Dette er særleg eit problem for alle dei som framleis brukar Lorem Ipsum tekst og ikkje reelt innhald i designet.

3. Er dei grafiske elementa laga slik at dei kan verta utvida?

Til dømes om overskrifta ligg i ein boks – kva skjer med boksen når teksten bryt over to linjer? Eksemplet er henta frå Gilde si framside – her vert boksen bak litt knapp når den nederste lenkja strekk seg over to linjer (i alle fall i FireFox på min Mac).

4. Har alle interaktive element ein status både med og utan JavaScript?

For dei brukarane som har JavaScript deaktivert bør det vera ei alternativ løysing. Til dømes om ei lenkje opnar ein lightbox må det kanskje òg finnast ei separat side som viser denne informasjonen.

5. Har kvart element ein status for både innlogga og ikkje-innlogga brukarar?

Dersom ein brukar loggar inn på nettstaden, får det konsekvensar for kva som vert vist på sida? Er det nokre element som kun skal visast for innlogga brukarar?

Eksempel frå Twitter som har denne toppmenyen når ein ikkje er innlogga:



og endrar til denne for dei som er innlogga:



6. Har du brukt nokon fancy skrifttypar som truleg treng ein eller annan teknikk for å bli vist rett i nettlesaren?

Dersom du har brukt ein av dei skrifttypane som ikkje finst på dei fleste maskinar må utviklaren nytta t.d sIFR for å visa dei. Har du vurdert konsekvensane av dette? Det er ingen garanti for at det vil fungera ut i frå tilgjengelegheitsomsyn, sjølv om det ser bra ut.

7. Har du laga feilmeldingar/ bekreftingar der dette er aktuelt?

Korleis skal desse sjå ut og kvar skal dei plasserast? Dersom du ikkje lagar noko kjem utviklaren til å gjera dette sjølv, og det er det ikkje sikkert du vert fornøgd med :-)

8. Alle skjemafelt skal ha ein ledetekst og kvart skjema skal ha ein eigen “Send inn”-knapp

I mi verd så vil sjølvsagt dette vera på plass allereie når den grafiske designeren mottek wireframen frå interaksjonsdesignaren. Men om det mot formodning ikkje skulle skje så bør den grafiske designaren ta ansvar og få det på plass.

9. Er PhotoShop-fila di godt dokumentert?

Har du rydda opp og laga gode og forståelege namn på laga dine, slik at det er mogleg for utviklaren å skjøna kva lag som skal av og på for å visa ulike tilstandar?

10. Har du laga pdf’ar for alle tilstandar?

Det kan vera ei utfordring for utviklaren å skjøna korleis alt skal vera, så det kan vera lurt å ha med eit flatt bilete som visar korleis det skal vera.

11. Har du lagt med ein fargereferanse for alle fargane du har brukt?

Dersom du gir fargepaletten med fargekodar til utviklaren og spesifiserer kvar dei er brukt så vert han/ho glad og det vert enklare å få rett farge på rett stad.

Har du nokre erfaringar eller tips frå overgangen mellom grafisk design og utvikling som du vil dela?

]]> http://iallenkelhet.no/2009/05/14/11-tips-for-a-gjera-overgangen-fra-design-til-utvikling-sa-smertefri-som-mogleg/feed/ 10 http://iallenkelhet.no/2009/05/03/skrifttypar-pa-nett-future-of-web-design/ http://iallenkelhet.no/2009/05/03/skrifttypar-pa-nett-future-of-web-design/#comments Sun, 03 May 2009 21:57:50 +0000 Martha Lyngnes http://www.iallenkelhet.no/?p=2031 På Future of Web Design i London ga Mark Boulton oss innspel om kva skrifttypar ein bør velja på nett. Eit fint tillegg til punktet om “Val av skrifttype” i den tidlegare bloggposten min  7 tips for god typografi på nett.

99% av alle skrifttypar er designa for trykk og ikkje for bruk på nettet. Skrifttypane har som regel blitt utvikla til eit særskilt føremål – meir om historia til mange av dei vanlege fontane. Times New Roman vart i si tid designa for å kunna trykkast fort på dårleg papir og hadde derfor skarpe seriffar som skulle blø ut på papiret. Det er ikkje ein skrifttype for nettet i utgangspunktet sjølv om den ofte vert nemnt som nettsikker fordi den finst på dei aller fleste datamaskinar.

Under ser du eit døme på ein nettstad, www.seedconference.com som utelukkande har brukt Times New Roman og likevel fått eit godt resultat. Dei har ikkje brukt skrifta i så litan storleik så då fungerar den bra likevel – det handlar å ta omsyn til eigenskapane til den skrifttypen ein har valt.



Georgia er ein Microsoft skrifttype designa for bruk på nett (laga av Matthew Carter) og har store seriffar som skal gjera den lettare å lesa på skjerm. Her vart òg nettversjonen av skrifta laga før ein laga trykketypen. Microsoft har òg laga andre skjermskrifttypar som Cambria og Calibri som vart laga for Vista.

Eit nyttig verktøy finn du på 24ways.org (adventskalender for nettnerdar) der det er laga ei skrifttypematrise som viser kva skrifttypar som er tilgjengelege på kva for nokre operativsystem.

Foreløpig er det ikkje så mange skrifttypar å velja mellom som er særskilt tilpassa nett og som finst på dei fleste maskinar, men eg trur heller ikkje det bare er det det står på. Etter at du har valt skrifttype er det alle dei andre justeringane du kan gjera med storleik, mellomrom, linjelengde, linjeavstand og kontrast som avgjer om resultatet ditt vert bra.


]]> http://iallenkelhet.no/2009/05/03/skrifttypar-pa-nett-future-of-web-design/feed/ 0 http://iallenkelhet.no/2009/04/15/7-tips-for-god-typografi-pa-nett/ http://iallenkelhet.no/2009/04/15/7-tips-for-god-typografi-pa-nett/#comments Wed, 15 Apr 2009 08:08:41 +0000 Martha Lyngnes http://www.iallenkelhet.no/?p=1275

Diskusjonar om typografi på nett handlar som regel om seriffar eller ikkje seriffar, minimumsstorleik og kontrast. Men, typografi er så mykje meir. I følgje Wikipedia er typografi: “læra om bokstavar og grafiske element, og bruken av dei.” Så typografi er ikkje bare skrifta sett for seg sjølv, men den må sjåast i samanheng med det som er rundt.

I bloggposten “Web design is 95% typography” seier Oliver Reichenstein “Å optimalisera typografien er å optimalisera lesbarheiten, tilgjengelegheiten, brukarvenlegheiten og overordna visuell balanse. Å organisera tekstblokker og kombinera dei med bilete,- er det ikkje det grafiske designerar, brukarvenlegheitsspesialistar, informasjonsarkitektar gjer?”

Så korleis lagar du god typografi?

1. Skrifttype

Tradisjonelt har det vore mest vanleg med sans serif skrifttypar som t.d Arial på nettet, men med betre skjermoppløysning treng ikkje seriffar å vera eit problem. Skal du ha eit seriøst og klassisk uttrykk kan serif skrifttypar vera med på å understøtta dette.
New York Times brukar seriffar:

Smashing Magazine brukar sans serif:



Skrift i nettlesaren vert rendra på brukaren sin maskin, så for å ha kontroll på utsjånaden kan det lønna seg å velja ein av skrifttypane som finst på dei fleste maskinar; kva for nokre desse er varierar, blant dei som plar nemnast er Arial, Georgia, Tahoma, Times New Roman og Verdana.

2. Skriftstorleik

Både for lita og for stor skrift kan forverra lesbarheiten. Mellom 13 – 15 pixlar plar gi god lesbarheit for brødtekst. Meir om dette kan du finna i blogginnlegget til Jostein (frå 2004, men framleis aktuelt) “Mysteriet skriftstørrelse“. Test ut skriftstorleiken på den skrifttypen du har valt. Bruk for eksempel www.typetester.org. Dette er eit fint lite verktøy der du kan testa ut ulike skrifttypar, storleikar, avstandar o.l og som lar deg samanlikna tre stilar i slengen (i tillegg kan du henta ut css’en for valt stil).

Eksempel frå Typetester på tekst i 10, 13 og 15 pixlar:



3. Lengda til ei tekstlinje (Engelsk: Measure)

Å finna ei linjelengde som passar er viktig for lesbarheiten. Mark Boulton anbefalar mellom 52 – 78 teikn i lengde (omlag 2 – 3 alfabet i valt skrifttype) for optimal lesbarheit. I eksemplet nedanfor, henta frå Wikipedia er det omlag 77 teikn per linje. Wikipedia køyrer ein flytande layout, noko som gjer at tekstlinjene vert mykje lengre når vindauget fyller heile skjermen og det vert då vanskelegare å følgja linjene med blikket.



4. Mellomrom mellom bokstavar/ord (Norsk: Sperring/kniping, Engelsk: Tracking)

Vanlegvis har den som har utvikla skrifttypen teke seg av denne jobben, og det kan vera eit godt utgangspunkt å bruka den sperringa/knipinga som vert sett automatisk. Ein kan få behov for å justera denne om ein brukar veldig stor eller veldig lita skrift. På Typografi.no vert det påpeikt at stor skrift krev mindre bokstavmellomrom fordi bokstavane i seg sjølv har mykje åpent rom i seg, mindre skrift treng meir. Under ser du eksempel frå Typetester.org der teksten til venstre har mindre skrift og auka mellomrom mellom bokstavane, teksten i midten er normal og teksten til høgre har større skrift og minska avstand mellom bokstavane.



5. Linjeavstand (Norsk: Skytning, Engelsk: Leading)

Linjeavstanden vert definert som avstanden mellom botnlinjene til to tekstlinjer. Skrifttypar har som regel ein standard skytning som gjer at overliggjarar og underliggjarar ikkje rører kvarandre. Tekstblokker krev positiv skytning, medan korte tekstar og overskrifter kan ha negativ skytning.  Mark Boulton brukar som tommelfingerregel at skytninga bør vera større enn mellomrommet mellom orda for at auget naturleg skal følgja linja bortover horisontalt og ikkje nedover linjene. Typografi.no seier om skytning at sans serif fontar vanlegvis krev litt meir avstand enn serif fontar og at lange linjer krev meir avstand enn korte. Vidare meiner dei at omlag 1,3 gangar skriftstorleiken i avstand kan vera eit utgangspunkt, men at ein må prøva seg fram til det som ser bra ut.

Eksemplet under frå Typetester viser til venstre: Georgia 13 pixlar med linjeavstand 13 pixlar, i midten viser Georgia 13 pixlar med 16 pixlar linjeavstand og til høgre Arial 13 pixlar med 17 pixlar linjeavstand.



6. Farge og kontrast mot bakgrunn

Som kjent gir svart skrift på kvit bakgrunn god kontrast. Er du i tvil om du har god nok kontrast kan du testa dette med Colour Contrast Check som lar deg sjekka om tekstfargen og bakgrunnsfargen har god nok kontrast opp mot WCAG 2.0 krava. Jeff Croft frå BlueFlavor gjer i sin SlideShare-presentasjon om elegant web typografi merksam på at kvit/svart kontrasten er større på skjerm enn på papir og at mange derfor føretrekk off-black/koksgrå på kvit bakgrunn og lysegrå skrift på svart bakgrunn, som for eksempel Apple gjer.



7. Hierarki

Det er viktig å tenka på disposisjonen og laga ein skala av fontar som du kan bruka gjennomgåande. Bruk ein stil for overskrifter, ein for underoverskrifter, ein for brødtekst og ein for lenkjer og så vidare.  Dette gjer det lett å få oversikt og skanna gjennom teksten. På informationarchitects.jp er det enkelt å sjå kva som er overskrift, ingress og kva som lenkjer vidare inn til heile teksten.



Syns du dette var interessant og vil veta meir? Smashing Magazine har laga ein oversikt over nyttige verktøy for å laga flott typografi for web’en: 50 Useful Design Tools For Beautiful Web Typography

Etter at me fekk pussa opp bloggen vår har me hatt mange diskusjonar i NetLife Research om korleis den fungerar. Fornøyeleg nok gjekk den største diskusjonen på om me skulle bruka Arial eller Georgia :-) Eg trur me med fordel kan justera typografien på bloggen vår for å gjera den lettare å skanna og lettare å lesa.

Kva synst du, og har du nokre tips?

]]> http://iallenkelhet.no/2009/04/15/7-tips-for-god-typografi-pa-nett/feed/ 25