Helheten og detaljene

Helheten og detaljene

Inge FosslandMaking Web, 24. oktober 2013

Design = funksjon

Er det lett å brukedet vi lager?

Design = innhold

Hvordan snakker vitil brukerne? Hvilken stemmehar nettstedet?

Design = merkevare

Passer designet til merkevaren vi prøver å formidle?

Design = flyt

Hvordan føles det å brukedet vi har laget?

Netlife Research2010

• Nett- og innholdsstrategi• Brukersentrert design• Test, evaluering og måling

• Spesialisert• Uavhengig• Høyt faglig fokus

22 eksperter på brukeropplevelse

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Etableresi Vest-Agder

Eksternstyre

Første testlab(med Telenor)

Første ansatte

Ny daglig leder

Gazellebedrift

Satser påinnhold

Satser pådesign

Ansetterkokk

Ny profil

Ansetterbarista

Netlife

Første kontori Oslo

Flytter til Stenersgata

ÅpnerBergenskontor

52ansatte

Mål:

1. Posisjonere selskapet som en designbedrift og leverandør av helhet.

2. Jobbe med større, strategiske prosjekter.

3. Øke kvaliteten på leveransene våre. Lage produkter som setter spor.

Strategi:

1. Redesigne nettstedene våre.2. Utvikle en ny grafisk profil.3. Utvikle en bedre designprosess og

implementere den hos de ansatte.

Prosessen

Analyse Konsept Design

Prosessen

Prosessen

... bare hjerne.

... bare hjerte.

Hjerne og hjerte!

Tverrfaglige team

InnholdDesign UX PL

InnholdDesign UX

Roller

ID CS UAGDAD

PL

InnholdDesign UX PL

Konsept-ansvar

Prosjekt-ledelse

Ansvar

ID CS UAGDAD

Analyse

Analyse Konsept Design Leveranse

Forretnings-mål

Brukernes behov

Analyse

Forretnings-mål

Brukernes behov

Analyse

Analyse

Forretnings-mål

Brukernes behov

Insikter

Innsikter fra analysen:

1. Sterk nisjeposisjon (UX og IXD), men ingen posisjon som designbyrå.

2. Sterkt fagmiljø med kompetente, engasjerte konsulenter.

3. Profilen er vennlig, men for nøytral og viser ikke selskapets egenart.

Konsept

Analyse Konsept Design Leveranse

Konsept

Problemet er at insiktene fra analysefasen bare baseres på det kundenog brukerne kjenner tilfra før.

Konsept

Nå må vi se på hvilke innsikter vi kan bidra med.

Konsept

Det denne fasen handler om er å skape retning og gjøre produktet unikt.

UniktUnikt

Funksjonelt

Brukervennlig

Pålitelig

UniktKonsept

Mål og brukerbehov

UtforskeUtforske ulike ideer og virkemidler.

Tips:

• Lag en idebrief og bruk den som et utgangspunkt.• Samle teamet og jobb med ideer sammen. • Kom deg ut! Se på verden, ikke bare på Internett.

Idebrief1-3 setninger som oppsummerer målet eller målene med prosjektet. En god idebrief er et problem som søker en løsning.

Idebrief:

Hvordan kan vi fremstå som en seriøs designleverandør og bygge en sterk merkevare av 20 forskjellige konsulenter med mange ulike meninger?

Bedre typografi

Færre farger

Et poengom gangen

Kutte ut tåkeprat

Byggeprofiler

Illustrere personer?

Vise effekt

Bruke humor

Avatarer!

Velge retningPrioritere ideer og velge retning for konseptet.

Tips:

• Svarer ideen på analysen (idebriefen)?• Hvilke ideer har størst potensiale?• Hvilke konsekvenser har valget av retning? • Velg én retning som dere tror på.

Idebrief:

Hvordan kan vi fremstå som en seriøs designleverandør og bygge en sterk merkevare av 20 forskjellige konsulenter med mange ulike meninger?

Bedre typografi

Færre farger

Et poengom gangen

Kutte ut tåkeprat

Byggeprofiler

Illustrere personer?

Vise effekt

Bruke humor

Avatarer!

Enklere, tydeligere

Bruke illustrasjoner

Vise mer personlighet

Grønt, svartog hvitt

Konsekvenser:

1. Vi må investere i illustrasjoner.2. Vil fargebruken gå på bekostning av

tilgjengelighet?3. Vil vi fortsatt bli oppfattet som enkle,

vennlige og tilnærmelige?

Spisse konseptetFinne kjernen i konseptet, bygge ut og tydeliggjøre konseptet.

Tips:

• Hva må bygges ut for å formidle konseptet?• Bygg opp konseptet gjennom få, men tydelige prinsipper.• Bruk tid til å presentere hvert enkelt prinsipp.• Forankre prinsippene i målene med prosjektet.

1. Bygge personligheter

Bygge profilen rundt de ansatte. Vise personlighet og egenskaper. Illustrere alle de ansatte.

2. Spisse budskapet

Spissformulere, provosere. Rett på sak. Ett budskap om gangen.

3. Enklere, tydeligere

Forenkle og tydeliggjøre formspråket.Ta eierskap til grønt.

Retning 1. Kundens brief2. Analyse3. Innsikter4. Vår kunnskap5. Konsept6. Tydelig retning

Analyse Konsept Design Leveranse

Design

Analyse Konsept Design Leveranse

Design

På samme måte som at konseptet er basert på innsikter fra analysen, legger konseptet

grunnlaget for designet.

Viktig! Design er ikke bare hvordan det ser ut.

Bra design har 3 ingredienser,alle er like viktige for kvaliteten

på sluttresultatet.

InnholdForm Funksjon

Konsept

Overordnet design

Innholdsdrevet design av kjernesider. Sette en retning for designet.

Kjerne

Kjernesider

3-4 av de viktigste sidene eller funksjonene på nettstedet.

Forside

Tjenester Prosjekter Kurs Om oss Kontakt

Kurs PersonTjeneste Prosjekt Person

Forside

Innholdsstrategi

Tekst- og bildestrategi. Utvikle stil og tone. Design uten innhold er bare dekor.

Eirik: Vi kutter innhold!

90% av innholdet ditt er søppel.Kontakt oss i dag!

Eidar: Hverdagsstrategi

Når så du sist strategidokumentet ditt? Her er vår tilnærming.

Jostein: Elefanten må ut!

Vi hjelper deg med å ta de vanskelige avgjørelsene. Kontakt oss i dag.

Jostein: pointing out the elephant in the room.

Elephant in the room" is an English metaphorical idiom for an obvious truth that is either being ignored or going unaddressed. The idiomatic expression also applies to an obvious problem or risk no one wants to discuss.

Jostein: Elefanten må ut!

Vi hjelper deg med å ta de vanskelige avgjørelsene. Kontakt oss i dag.

Detaljert design

Videreutvikle og detaljere løsningen i iterasjoner. Dokumenere designsystem. Produsere innhold.

Papirskisse Papirprototype

Wireframes

Designskisser

Klikkbarewireframes

Rik, interaktivwireframe

Klikkbaredesignskisser

Rik, interaktivprototype

Proof of concept

Produksjonsklarprototype

Avansert

Det

alje

rt

Enkel

Sim

pel

Papirskisse Papirprototype

Wireframes

Designskisser

Klikkbarewireframes

Rik, interaktivwireframe

Klikkbaredesignskisser

Rik, interaktivprototype

Proof of concept

Produksjonsklarprototype

Avansert

Det

alje

rt

Enkel

Sim

pel

Rik, interaktivprototype

Avansert

Det

alje

rt

Enkel

Sim

pel

1. Etablere prototype

Modularisere kjernesider og innhold. Sette opp innholdsstruktur, layout, typografi.

Introduksjon

#feature

Tjenester

#servicesKurs

#eventsBlogg

#blog

Logo og meny

#header

Logo og meny

#header

Sidespalte

asideHovedspalte

#content

Sitat

.quote

Stilling og kontaktinfo

.metadata

Prosjekter og erfaring

.experience

#content

#header

#footer

aside.small

#content

#header

#footer

aside.large

Realistiske design

• Mer konkret og presist. Færre oversettelser.Bedre kommunikasjon

• Teamet forstår hverandre, kunden forstår hva de får.Bedre leveranser

• Prototyper er enkle å teste og justere underveis.

Hvorfor prototypei HTML?

Design kan deles opp

For å jobbe effektivt må vi dele opp designet i mindre, håndterbare enheter og moduler.

Modulær HTMLmed PHP

http://php.net/

person.php

<div id="grid"> <?php include("inc/header.php"); ?> <section id="content"> <h1>Jostein Magnussen</h1> <?php include("person-metadata.php"); ?> <p>(...)</p> <?php include("person-experience.php"); ?> </section> <?php include("inc/footer.php"); ?></div>

person-metadata.php

<section class="metadata"> <ul> <li><strong>Telefon:</strong>+47 402 26 409</li> <li><strong>E-post:</strong> <a href="mailto:jostein@netliferesearch.com">jostein@netliferesearch.com</a></li> <li><strong>Twitter:</strong> <a href="http://twitter.com/josmag">@josmag</a></li> </ul></section>

Dokumentstruktur

index.phpindex-blog.phpindex-events.phpindex-feature.phpindex-services.php

person.phpperson-experience.phpperson-metadata.php

project.phpproject-metadata.php

inc/footer.phpheader.php

Modulær CSSmed SASS+Compass

http://sass-lang.com/http://compass-style.org/

screen.scss

// compass framework@import "compass/reset";@import "compass/css3";

// global structure@import "grid";@import "colors";@import "typography";

// templates@import "template-frontpage";@import "template-person";@import "template-project";

// modules

SASS: variables

// colors$netlife_green: #95cd28;$netlife_green_medium: #619210;$netlife_green_light: #496e1b;$netlife_grey_light: #e6e8e0;$netlife_grey_dark: #353535;

body { background: $netlife_green;}

SASS: nesting

#content { float: right; width: 640px; padding: 0 10px;

aside { float: left; margin-left: -320px; &.small { width: 280px; } }}

SASS: mixins

@mixin scopedmediaquery($queries...) { $length: length($queries); @for $i from 1 through $length{ @if $i % 2 == 1 { @media #{nth($queries, $i)} { #{nth($queries, $i+1)} { @content; } } } }}

2. Innhold og design

Jobbe iterativt med innhold, design og funksjonalitet. Utvikle designprinsipper.

Innholdsstruktur

Før vi kan jobbe videre bør vi få oversikt over omfanget på designjobben.

Tjenester Prosjekter Kurs Om oss Kontakt

Tjeneste Prosjekt Kurs Person

Tjenester Prosjekter Kurs Om oss Kontakt

Tjeneste Prosjekt Kurs Person

Tjenester Prosjekter Kurs Om oss Kontakt

Tjeneste Prosjekt Kurs Person

Skisse, prototype, skisse

Når basisstrukturen er på plass kan vi jobbe videre med designet.

CSS

.contact img { float: left; width: 90px;}

.contact h2 { font-size: 20px; line-height: 24px;}

.contact p { font-size: 14px; line-height: 20px; margin: 0;}

HTML

Designprinsipper

Design handler om å etablere regler for forholdet mellom ulike elementer. Ved å jobbe med prinsipper og moduler gjør vi det mulig for andre å utvide designet uten at det går på bekostning av konseptet.

Spisse budskapet

Tøffere, mer tabloid språk. Snakke tydelig, vise resultater.

Skru opp volumet

Ta eierskap til grønt. Velge bort alt annet. Komplettere med svart/hvitt og grått. Enkle, geometriske former

Enkle, geometriske former er basis for grafiske elementer.

Designprinsipper

• Stil og tone.• Layout, typografi, farger.• Bilder, ikoner og

illustrasjoner.Innhold og moduler

• Hva er innholdet?• Hva skal forsterkes, hva

skal tones ned?• Hva er forholdet mellom

ulike moduler?

Prinsipper og moduler

Utstyr og verktøy

Felles prototype. Forskjellige verktøy.

Standardutstyr:

• Webserver: MAMP/Apache+PHP• Versjonshåndtering: Git (Tower)• HTML+CSS.• Valgfritt designverktøy.• Valgfritt kodeverktøy.

Forskjellige rammeverk:

• HTML+CSS – små, enkle design• PHP+SASS – modularisere• XML – komplekse data• Statamic – enkelt, filbasert CMS• WordPress – selvstendig nettsted

3. Evaluere og justere

Evaluere designsystemet. Justere enkeltmoduler og designprinsipper. Teste og måle.

Design endrer seg

Vi klarer ikke å planlegge alt før vi starter. Derfor må vi justere helheten underveis.

Designprinsipper

• Er design og innhold konsistent?

• Må vi justere typografi, layout, fargebruk?

• Hvordan fungerer språket vi bruker i grensesnittet?Innhold og moduler

• Hvilke moduler er like?• Hvilke er unike?• Er det noe vi bør slå

sammen eller dele opp?

Evaluereog justere

Test alt. Alltid.

Brukertesting behøver ikke å være komplisert. Det er bedre å teste enkelt, enn å ikke teste i det hele tatt.

Design

Skisser Leveranse

Designretning Designprinsipper Designsystem

Form

Innhold

Funksjon

Prototype

Teste ogevaluere

Prototypen = systemet

Designsystemet er summen av alle prinsipper og moduler. Prototypen viser hvordan ting skal se ut, hva innholdet er og hvordan ulike sider og elementer forholder seg til hverandre.

Netlife Research2013

Grafiskprofil

Men, virker det?

2010

20132012

2011

Utfordringer

Hva skjer når man ansetter 15 designere og prøver å jobbe på en helt ny måte?

Verktøy og metode

Må alle kode HTML og CSS? Må vi standardisere verktøyene vi bruker og hvordan vi koder?

Samarbeid

Hvordan sikrer vi at alle tar eierskap?Må alle være med på alt? Hvem skal gjøre hva?

Hvor langt skal vi gå?

Hvor detaljerte prototyper skal vi lage? Hvor går skillet mellom design og teknologi?

Spørsmål?

Inge Fosslandnetliferesearch.com/inge/

@ingefossland