Future Insights Live 2013 dag 2

A.k.a. What Happens in Vegas ends up at the Vertica blog part 2

Dag 2 af konferencen (som så egentlig er dag 1 da workshops ikke tæller med) er i gang og en del flere deltagere er mødt op. Formatet er nu flere små sessions (modsat gårdsdagens workshops), og hvor man som deltager kan vælge mellem de forskellige “spor” af sessions; Front End, Back End, Pure Design, Mobile, Biz og Hands On Labs. Det er til tider lidt svært at vælge når man nu gerne vil lidt af det meste, så det kan risikere at blive lidt “hit and miss” med enkelte sessions.

Det store konferencelokale - klar til keynoten

Det store konferencelokale – klar til keynoten

DeLorean tidsmaskine

DeLorean tidsmaskine

Dagen startede ud med morgenmad i det store konferencelokale, hvor en af de sponsorerende virksomheder til lejligheden havde rullet en DeLorean “tidsmaskine” ind i lokalet (filmnørder vil bemærke at det er udgaven fra 2‘eren – komplet med hover boardet og en “Save the clock tower” flyer). Rygterne vil vide at det endda er én af de rigtige DeLoreans fra filmene.

Efter en kort velkomst var det tid til den første keynote:

“Visual Semantics: Color and Shape in Universal Design” af Molly Holzschlag

Farver

Molly Holzschlag

Molly Holzschlag

Sessionen bød først på en gennemgang af farveteori og farveopfattelse. Opfattelsen af en farve er betinget af biologi, neurokemi, kulturel inflydelse (arv, religion, kultur, geografi og køn). Derfor er farvevalg ikke kun et spørgsmål om personlig preference, men også en overvejelse af signalværdi samt markeder sitet skal ramme. Eksemplerne var mange, men rød er fx ensbetydende med lykke (fortune) i Kina, hvor det andre steder symboliserer fx power, ild eller advarsel. Hvid er ofte renhed og liv, mens andre kulturer kæder det sammen med død. Blå er en af de eneste “sikre” primærfarver, som ofte ses brugt i corporate sammenhæng.

Former
Her blev betydningen af former gennemgået: Rektangler som maskulint, stabilt, konstant –  cirkel som feminint, helhed, familie, liv og trekanten som opadvent symboliserer bevægelse, dynamic og nedad fx svaghed.

Slutteligt blev betydningen af sprog og lokalisering af websites gemmengået; et tema vi nok er lidt mere vante med i Danmark end i USA.

“Beyond Media Queries: Anatomy of an Adaptive Web Design” af Brad Frost

Brad Frost

Brad Frost

Dagens første session jeg valgte var ovenstående session med frontenderen Brad Frost. Efter en kort introduktion omkring varemærker og hvordan disse bliver til hverdagsord med tiden, kædet over til fx HTML5/Ajax som nu også er mainstream, blev fænomenet Responsive Web Design taget op. RWD er blevet noget som man bare skal have, en “one size fits all” løsning på alle problemerne med de utallige klienter og noget som betrages som blot er at lave sit layout flydende tilsat lidt media queries. Som på workshoppen i går blev det konstateret at RWD kun er toppen af isbjerget; der skal en række andre ting til før et responsivt website fungerer, ikke kun CSS. Vi har alle prøvet at definere præcist hvad RWD dækker over, men Brads holdning er at RWD blot er en fælles betegnelse for godt web design. Enig.

Hans koncepter til “godt webdesign” blev gennemgået:

Ubiquity:
Vi skal allerede designe og udvikle til en lang række klienter, men hovedpointen er at vi jo ikke kender de nye klienter der kommer til.

Flexibility:
Mobilt web anses for ofte stadig som “web light”. Der blev vist en lang række sites der slet ikke virker på mobile enheder (tænk 10 år tilbage og websites med meddelelsen: “Siden virker kun med Internet Explorer”). Mobilbrugere vil benytte websitet på lige fod med andre – så længe det er brugbart i mobil kontekst. “On the go” er stadig et tema, men mobilen som primær enhed skal vi også omfavne. Lad være med at betragte mobilen som andet end regulært web design.

Performance:
Performance diskuteres iflg. Brad for sjældent efterhånden. Performance forstået som tiden det tager at få vist indholdet på det mobile medie og primært i form af requests og data overført. Mobile brugere forventer hurtige sites, hvor man i traditionelt RWD ofte sender data fra hele desktop-sitet videre til mobilen. “Performance as design”.

Enhancement:

En af de mange skøre personer langs The Strip

En af de mange skøre personer langs The Strip – har du set The Hangover?

Det gælder ikke om at designe til den dårligste enhed, men at bruge den som udgangspunkt. Selvom vi tager det for givet at Javascript er aktiveret alle steder efterhånden, skal vi ikke binde hele websitet op på det. Påstanden er at det ikke er et spørgsmål om Javascript fejler, men hvornår. Én fejl fra eksterne plugins mm kan resultere i en tom side, hvis hele sitet er afhængigt af JS. Brad mener at alt for mange sites bliver “overengineered” med spinnere, ajaxload og web apps, hvilket risikerer at give brugeren en dårlig og langsom oplevelse. Jeg er enig i at vi skal være varsomme med dette. Vi skal give brugeren den oplevelse han/hun forventer i sin kontekst. Sidder man med en ny iPhone, kan der godt gives lidt ekstra gas på transitioner og “app-feel”, mens ældre enheder er vant til en anden oplevelse, og blot ville få en dårligere oplevelse ved at forsøge at få leveret en fuld app-oplevelse.

Future Friendly:
Vi kan ikke fremtidssikre, men vi kan forberede os. Investér i indholdet. “Make APIs not war”. En lidt cheesy sammenligning med content som vand, der er flydende og løber alle steder hen.

Eksempler og best practices omkring RWD
Billeder og optimering til Retina/Hi-Res displays blev vendt. Der kan sagtens optimeres til Retina-opløsning uden at gå på kompromis med data der skal overføres. Teknikken er at komprimere billeder hårdt og gemme dem i dobbelt opløsning. Den hårdere komprimering ses dermed ikke når det skaleres ned, men brugeren får oplevelsen af det knivskarpe billede på sin højtopløste enhed. Denne teknik benytter vi iøvrigt selv i flere projekter. Skjul menuer på mobil enheder, genovervej brugen af karuseller (er det i virkeligheden bare fordi man ikke kan blive enige om at prioritere indholdet?). Husk HTML5 input typer og patterns. Pas på de tunge sociale plugins og overvej at bruge fx Socialcount. Fokusér på det centrale indhold og hent øvrigt indhold (kommentarer, relaterede produkter mm) on demand. Scroll er ikke et problem, men overvej hvornår det hyppigst benyttes på mobil: Tidslinjer, lister, artikler mm. Brug “Back to top” links

“Who is you? The Role of Identity in Commerce” af John Lunn

Dagens anden keynote var med John Lunn – Global Director of Paypal’s Developer Network og omhandlede håndtering af identiteter og fordelen ved at brugerens identitet er kendt i købsøjeblikket – både for at give brugeren den bedste købsoplevelse, men også for at sælger er bedre sikret mod snyd og falske brugere. Definitionen på identitet her er altså den bekræftede identitet. Snyd koster sælgere alt for mange penge i dag. “Convenience vs anonymitet”: Vil du have en god købsoplevelse fordi sælger ved hvem du er, kan målrette din oplevelse og stoler på dig eller vil du give afkald på dette for at være anonym og dermed sikre den samme (dårlige) oplevelse som vi er vant til i dag?

John Lunn

John Lunn

Alt dette ledte naturligvis over til lanceringen af det nye PayPal-produkt “Login with PayPal” som er udviklet efter mobile first tankegangen. Her kan man logge ind med PayPal og tillade at din information/identitet deles med sælger. Hvorfor skulle indtaste dine personlige data, når du alligevel skal logge ind med PayPal som kender dig? Visionen med “Login with PayPal” er at give brugeren en bedre og mere personlig købsoplevelse.

Login with PayPal lyder spændende, men keynoten bar i mine øjne lidt for meget præg af at være en PayPal-salgstale.

“The Pitfalls of Process: Break the Rules to Start Innovating” af Patricia Korth-McDonnell

Patricia Korth-McDonnell

Patricia Korth-McDonnell

Denne hurtigtalende og meget bandende dame fra Huge var så vidt jeg kunne forstå trådt til i stedet for en anden oplægsholder der havde meldt afbud. Efter en introduktion til hvordan hun (iflg hende selv) havde bullshittet sig til sit job hos Huge, blev processer vendt – hvor hovedpointen var at alle de møjsommeligt udarbejdede arbejdsgange alligevel skulle omgåes ved samtlige projekter. Efter dette, gennemgik Patricia sin 10-punkts liste (eller er der 11?) med tips til at fremme kreativiteten (hos designere)

  • Flad organisation. Alle har gode ideer. Flade strukturer kan være hårde fordi alle skal høres, men det er det værd. (Nok lidt mere nytænkende viden i USA end det er i Danmark)
  • (Intern) Konkurrence er godt. Lad den bedste idé vinde, og sørg for at råbe op hvis en idé er dårlig.
  • Vær venner med dine kolleger. Folk vil støtte og hjælpe hinanden.
  • Iterér. Altid kom frem med ideen og præsentér flere versioner. (“Designs are like a whore, there’s always another one ‘round the corner”).
  • Brug tiden og spørg ind
  • Test og lær af det.
  • “Embrace the pain”. Samarbejde er hårdt, kritik er hårdt, refaktorering er hårdt. Design er hårdere end kunst; det er aldrig færdigt, aldrig klart.
  • Vær frygtløs og løb risici. Lav noget der ikke giver mening
  • Pas på “the democray trap” hvor alle altid skal høres. Det skal de, men der er én der skal kunne træffe en beslutning
  • Forstå din betydning i verden. Anerkend at du betyder noget. Bed om hvad der skal til for at du gør dit job.
  • Lav noget du elsker

En del af det er meget amerikansk, og mange af emnerne blev vendt lidt for overfladisk – sessionen var da også færdig en del før tid.

“The Future of UX: Killing the Wireframe Machine” af Lis Hubert

Lis Hubert

Lis Hubert

Efter en – for mig – uinteressant paneldiskussion omkring online learning (ikke at emnet ikke er spændende, formatet fangede mig bare ikke rigtigt), valgte jeg denne session en smule på grund af den lidt provokerende titel. Lis startede med at fortælle meget specifikt om hvordan hun oplever UX-faget og wireframing. På det ledende spørgsmål om UX kan give mere værdi end nu var der en del hænder oppe i salen. Skal UX så overhovedet have en fremtid? Ja, helt klart var konklusionen. Men på en anden måde end nu. Lis mener at UX skal være et uformelt bindeled der er tæt på både projektet og udviklerne og ikke kun wireframing som hun mener informationsarkitekterne ofte kun sidder og laver. UX som fag og traditionel tankegang blev gennemgået. For at gøre en lang historie kort, blev begrebet “The Wireframe Machine” defineret med en masse metaforer, men i praksis synes hun at UX efterhånden blot er reduceret til wireframing, og at en lukket wireframe-proces ikke giver noget godt og er for langt fra brugeren. UX skal være en del af projektet også efterfølgende. Pas på med at den agile tankegang og workflow ikke gør at der arbejdes for isoleret med små klumper, men husk helheden for at sikre den gode oplevelse (enig).

Slutteligt blev der diskuteret hvordan “The Wireframe Machine” så skal dræbes. Lis mener vi skal ændre måden vi snakker om UX på. Brug den rigtige terminologi og vend tilbage til den originale tankegang og tilbage til at designe noget brugeren virkelig ønsker. Drop processerne, spørg brugerne undervejs og vis dine tegninger i kaffebaren. Wireframen skal ikke afskaffes som sådan, kun den isolerede maskine. Det hele endte meget højtravende med “the future is a philosophy, welcome to the Age of Experience” samt “you’re the future”-agtige floskler.

“Responsive Web Design: What’s next?” af Bruce Lawson

Bruce Lawson

Bruce Lawson

Bruce Lawson fra Opera (og open standards evangelist med rød hanekam) holdt et spændende indlæg omkring de kommende ting og specs der bliver at finde i CSS og media queries. Stilen var gak og underholdende, og vi kom hurtigt igennem en lang række ting. Bruce startede med at vise verdens første HTML-side – som var responsive 🙂 Bruces holdning er at RWD skal være en del af processen, og ikke noget der kan tilføjes retrospekt. Hvis man endelig har lavet et fixed-size layout, skal man huske viewport-metataggen. Viewporten er på vej ind i CSS, hvor den hører til (og styrer layout), og der bliver lidt flere muligheder med den, hvor man næsten kan lave konditionelle forespørgseler.

Flex Box
Den nye box-model flex box blev også gennemgået, og den kommer sandsynligvis til at løse en masse af vores udfordringer omkring implentering af RWD. Med flex boxen kan vi fx styre rækkefølgen, flowet og prioriteringen af elementer. Vi kan lave autostørrelser, automatiske afstande mm på elementer uden at spekulere på antallet af dem. Man skal som frontender være OBS på hvilken syntaks man benytter til flex box, da de tidligere fra hhv 2009 og 2011 ikke længere er de speccede. En anden rigtig god og længe ventet funktion er noget så simpelt som at kunne vertikalt centrere elementer. Endelig. Problemet er – som altid – at browserunderstøttelsen indtil videre er noget begrænset. Et “dirty hack” til at reorganisere indhold (navigation) på mobile devices som supplement til flex boxen blev gennemgået.

Media Queries level 4
En masse nye tiltag ligger klar her og vil blive udbredt med de nyere browsere. Vi vil i CSS fx kunne checke for Javascript support, hover support, om klienten en finger-styret enhed (så man fx kan lave støre knapper på alle touch-devices). Yderligere muligheder bliver paged, interactive, touch, remote, keyboard mm – så man i CSS vil kunne detecte alt fra iPads til Wiis og TVs. Og som en sidenote til web design til TVs, så husk at betragte TVs designmæssigt som mobile skærme. Den opfattede størrelse af skærmen på et TV der står et stykke fra dig, er jo ofte mindre end den mobil du har lige foran næsen.

Events
Fremfor de nuværende events som fx mousedown, mouseover, ontouchstart ligger der nu hos W3C specs på nye broserevents som fx: Pointerdown, move, up, over, pressure – man skal altså ikke længere bekymre sig om enheden eller om man skal lytte efter klik eller touch.

Billeder
Lidt omkring billeder blev også gennemgået. Der er nu muligheder for at lave media queries i SVG-billeder, så grafikkerne i sig selv kan blive responsive og fx få tilføjet flere detaljer jo større de bliver. Smart. Googles nye billedformat WebP blev også gennemgået. WebP kan komprimere mere effektivt end PNG (26%) og JPG (25-34%) og dermed hjælpe med til at vi i højere grad kan benytte større billeder til hi-res displays. (Jvf komprimeringstricket længere oppe). I CSS’en kan vi lave fallbacks til andre billedformater, da WebP pt kun understøttes af Opera og Chrome. I HTML5-video kan vi for et video tag angive flere kilder, så browseren kan vælge hvad den bedst understøtter. Bruce har sendt et lignende forslag omkring billeder til W3C, så man kan angive billeder med prioriterede lister og media queries.

På en personlig note kan jeg være lidt bekymret for at udvikleren eller designeren træffer beslutninger omkring min kontekst på denne måde – hvorfor skal jeg have en ringere video når jeg browser på min iPad eller mobile enhed? Det kan være min primære browser, eller bedste videoafspiller tilgængeligt. Det samme med billeder. Brugeren ønsker muligvis ikke et dårligere billede (men brug evt beskårede billeder) på sin højtopløste mobiltelefon blot fordi han har en mobil enhed – den har tværtimod potentialet til at vise et flottere billede end computeren. Så media queries ifm videoer og billeder til RWD burde i virkeligheden kunne detecte båndbredde i stedet for pixelbredde for at kunne servere det rigtige indhold.

Keynote: “Your Money & Your Life: Designing af Business that won’t Kill You” af Carl Smith

Carl Smith

Carl Smith

Dagens sidste indlæg var ovenstående keynote. Det kan være lidt svært at gengive learnings her, da indlægget egentlig drejede sig en del om personlig udvikling og livsfilosofier. Hvordan får man work/life til at gå op – betyder penge alt? Carl gennemgik en del omkring opbygningen af sin virksomhed og vigtigheden af at spørge folk hvad de allerhelst ville lave hvis tid og penge var ligegyldigt. Konkrete eksempler på medarbejderes idéer der rent faktisk blev ført ud i livet og gjorde en forskel personligt og virksomhedsmæssigt blev gennemgået. Alt i alt en positiv, eftertænksom og “hyggelig” afslutning på en lang dag.

MGM By Night

MGM By Night

Godnat

Godnat

1 kommentar »

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s