Talare: Johnny Lee (Google)
http://www.web2expo.com/webexny2011/public/schedule/detail/21299

Time…
Johnny inleder med att tala om tiden. Tiden det tar från research fram till kommersiell produkt. Koncepten är ofta gamla men urvalet och utförandet är baserat på dagens teknologierna för gränssnitt och interaktionsdesing. Vi har idag större möjligheter att utnyttja tekniker ex. ansiktsigenkänning, patterns och sensorer.

Commercial success
Varför ser vi då inte fler produkter som bygger på den senaste tekniken? Väldigt få produkter blir lönsamma och kommer från en ursprungligt bra idè.

Det finns många anledningar till att ”Great Interface technology ideas” kanske inte lyckas
1 Fungerar den så bra som du drömde om?
2 Fungerar den robust nog for tillräckligt många naive användare?
3. Går den att tillverka till en lag kostnad?
4. Tyvärr, de flesta människor nöjer sig med att surra på ebben.
5. Ingen tredjepartsutvecklare kommer att utveckla för din plattform.
6. Ser styrelsen nya intäktsmöjligheter?
7. Är den före sin tid?

Efter den här inledningen övergår Johnny till en mycket underhållande och visuell presentation om hur vetenskapen drivit tekniken framåt sedan tidigt 80-tal fram till idag.
Vi får se inspelningar från olika labs och reflektioner av hur teknologin har skapats ur innovation med en vision om att knäcka koden om hur man skapar ”Human as a sensor”.
Vetenskapen och research inom senorteknologin gör att vi kan utnyttja allt från tankemönster(elektroniska signaler) och rörelser tillsammans med senaste tekniken för att skapa nya upplevelser. Ex. Elektroniska kontaktlinser, igenkänning via patterns.

Tekniken finns där men vi behöver bli bättre på att skapa behovet.

Talare: Louis Rosenfeld (Rosenfeld Media, LLC)
http://www.web2expo.com/webexny2011/public/schedule/detail/21140

Site search analytics (SSA) – Förvandla dina sökord till guld!
En fartfylld session där Louis förtydligade vikten av att analysera vad användaren gör på din sajt och hur vi kan använda sökorden och datainsamling till att ta fram underlag för att underlätta och skapa värde för affärsbeslut.

1. Make it harder to get lost
   Användare tappar bort sig på sajten. Man kommer direkt in på undersidor, djuplänkar via ex. Goole och sällan direkt på startsidan. Användaren förstår inte strukturen och därför behöver huvudnavigationen vara tydlig.
2. Reduce jargong
   Ta fram statistik på vanliiga sökord och frekvesen på sökta ord på din sajt som underlag för att skapa en bra struktur på sajten. Filtrera ut de mest förekommande innehållstyper som efterfrågas.
3. Priority by value
   Vad ska vi ha för typ av beslutunderlag? Relevansen på navigationen och sajtens struktur ska vara datadrivet utifrån prioritet av avändaren.
   Content types: Ex. inför en migrering av innehåll i CMS, vad ska vi flytta först?
   #1 application
   #2 reference
   #3 Instructions

   Underlaget för analysen gör att du kan skapa en kontextuell. navigering – en karta över dina building blocks.

4. Tune and adapt for presentation
   Fånga upp olika tecken som besökaren använder ex. # & ID, vad vill vi att besökaren ska få för typ av resultat? Bygg ditt varumärke genom att skapa riktade kampanjer baserat på SSA.

   ask.com förfinar informationen med olika presentationslager för besökaren.
   – Förfinat sök
   – Utöka söket
   – Bildsök
   – Wiki – extra information
   – Nyheter

5. Learn how your audiences differ
   Personas – Vem bryr sig om vilket innehåll? Försök att analysera vilken persontyp som söker på olika typer av information. Ex. studenter, Anställda etc. Hitta mönster för vad alla personas som har gemensamma intressen.
6. Know when to publish what
   Analysera sökorden utifrån tider och datum. ”skolor”, ”fotboll”, ”julmat” är säsongbaserat och återkommande och där med förutsägbart för att kunna presentera rätt information i rätt tid till användaren.
7. Own and enjoy your failures
   Problem med navigationen? Analysera oväntade sökningar och se till att besökaren hittar informationen genom att tagga upp eller skapa länkar av vanligt förekommande ord. Jämför vad användaren hittar i jämförelse med vad de vill ha. Ur affärssynpunkt så går det att öka ren konvertering på ex. betaltjänster där vanliga sökord ger ”0” resultat eller klicktrough rate idag.
8. Avoid disasters
   Vid byte av sökmotor, jämför resultatet utifrån relevans och precision för att se om förändringen bibehåller och ökar affärsvärdet. Håll koll på lanseringen av en ny sökmotor med hjälp av tuning och analys (SSA)
9. Predict the future
   Håll koll på dina peakar! Financial Times skapar sin ”editorial agenda” utifrån trendiga och högt rankadesökord som toppar

   Jag tänker på redesignprojektet där vi skulle kunna ta fram bättre beslutsunderlag på vad användarna söker på och efterfrågar för typ av information.

Dag 2 börjar med en presentation från Yahoo om hur annonser påverkar laddningstid och upplevelse. Aftonbladets lead developer Tobias Järlund har hållit flera uppskattade presentationer och skrivit blogginlägg kring ämnet.

Att annonser påverkar prestanda är negativt både för sajtägare och annonsörer. Det är ett gemensamt problem. Ett grundläggande problem är annonsnätverken och att dessa ligger utanför sajternas kontroll.

Det gamla sättet: ladda innehåll och annonser samtidigt (annonser har åtkomst till DOM och kakor, ingen skillnad på innehåll och annonser, synkron blockerande laddning).

Nytt sätt: ladda sidan först, fyll sedan på med annonser (prioriterar användarens upplevelse).

Yahoos strategi är att precis som Aftonbladet ladda annonser i iFrame och att först läsa in själva sidan och sedan fylla på med annonser.

Några tips
– Sandboxa annonser i en iFrame (Aftonbladet använder Friendly IFrames, se Tobias presentation)
– Leverera iFrame från en annan domän (säkrare, stabilare, bättre prestanda)
– Implementera ett API för richer functionality (rollovers, expanding)
– Använd ajax för att ladda annonsinnehållet

Yahoo använder också Double Buffering för att byta annons i en annonsposition utan att ladda om sidan:
– ladda första annonsen i iframe
– ladda andra annonsen i en iframe under den första iframe
– när den andra annonsen laddas ta bort den första iFramen

TO DO: Ta reda på vad som är segt (decisioning, serving, network).
Hur? Hitta sätt att mäta varje annons och varje position. Sätt thresholds och larm. Följ upp.

Talare: Chad Dickerson

”A strong culture can overcome almost any bad decision in technology”
http://www.web2expo.com/webexny2011/public/schedule/detail/21279

En inspirerande session där Chad Dickerson berättar om hur de arbetar på Etsy med att odla en stark kultur bland utvecklarna och att man behöver en tydlig vision om vilken kultur man vill ha.  Definiera visionen och gör den till en synlig prioritet. Se det som en pågående organisk aktivitet.

Etsy’s kultur
– Be Nice or leave (visa respekt mot varandra)
– Få saker gjorda – principer för progress, skapa en bra miljö   (vad motiverar våra medarbetare) Verktyget ”Deployinate” – Deploy to QA en plats för att bidra till förslag för progress arbete.
– Skylta med ditt budskap – ”Just ship” trycktes upp på T-shirts
– Make a statement – engineers are creative people – Vi skapar konst ”We think of our code as craft” skapade en utvecklarblog codeascraft.etsy.com där skriver vi om saker som gör oss obekväma och tycker är jobbiga.
– Skapa en miniconference och prata om kulturen för andra och hur man vill jobba.
– Visa upp företaget och kulturen vid rekrytering på events
– Viktigt med beröm, vi är generösa och uppmärksammar vårt arbete på avdelningen
– Var lite tokig, vi har roligt!
– ”A strong culture is  a fun culture”

Blir nyfiken på hur vår vision kan definieras på Aftonbladet IT. Hur ser vi på vår kultur och hur vill vi att den ska vara när den är som bäst?

En väldigt välbesökt session där det inte fanns sittplatser åt alla. Det känns i rummet att HTML5 är hett.

Det har hänt mycket senaste året och nu är stödet för html5 utbrett. IE9 och Firefox 4 med bättre stöd har lanserats. Ett stort steg är IE10 preview 3 som fortfarande ligger efter övriga men den versionen lovar gott.

Vad i HTML5 kan användas idag?
– se presentation för vilka taggar som är lämpliga (kommer snart)
– Geolocation API (fungerar på alla browsers och från IE9). Använd för Mobila webbapp:ar.

Vad är ’roughly usable’ (alla browsers förutom IE..)?
– history.pushState – update durrent URL (används av Facebook och Flickr). Stöds av alla utom IE – kommer i IE10 nästa år. Fallback: om det inte finns stöd ladda om hela sidan.

Vad går att experimentera med? (Minimal eller experimentell support)
– File API
– Web Sockets API
– Indexed Database
– Web Storage (typ stora kakor)
– Web Workers
– Web Messaging

Tips:
– Använd Progressive Enhancement istället för Graceful  Degradation
– Unobtrusive Javascript/AJAX
– Offline Web Applications (hur? Spara innehållet lokalt: Web Storage, Indexed Database, används t ex av Gmail)
– Använd Modernizr to detect and use offline/APIs

Största skillnaden mellan native och webapp:ar är att webbapp:ar når fler typer av enheter och är mer framtidssäkrat. Därför är det bättre än native apps i de flesta fall.

Tips på hur du håller dig uppdaterad om HTML5:
– Läs ’Latest Editors Drafts’ på W3C.
– Läs (bidra) WHATWG wiki
– Join #html5 IRC

Slutsats: HTML5. Nu är det dags. Men vi måste ha koll på vad som fungerar och vad som inte gör det.

Ett genomgående tema på konferensen är mobilen och hur viktigt det är att förstå och följa utvecklingen. Det här var den hittills bästa sessionen.

Den här sessionens tes är: Web products should be designed for mobile first.

1. Growth = Opportunity
Alla har mobiler och försäljningen ökar enormt. 40% av alla tweets är via mobil. 16% av nya användare på Twitter börjar nu i mobilen. Om drygt 2 år passerar antalet Smartphones antalet PC:s. Hemmaanvändandet av PC har minskat med 20% i USA sedan 2008. Varför? Smartphone och Tablets ersätter. Mobila FB-användare använder FB dubbelt så mycket som datoranvändare. 33% av inläggen sker via mobilen.

Analys: Mobila enheter blir vanligare än datorer för att nå webben under 2013.

2. Constraints = Focus
Skärmstorlek: 1024×768 blir 320×480. 80% måste bort. Begränsningarna tvingar fram prioritering av vad som är viktigt. Hur? Ta reda på vad användarna verkligen vill ha.

Nätverkshastighet: uppkopplingen går upp och ner. Lösning: skicka mindre data, komprimera och optimera för mobila enheter så blir webben automatiskt bättre

Omgivningen – mode of use: Mobilen används ofta i en rörig miljö i farten. Designa för ett öga och en tumme. Bra och enkel design i mobilen blir bra och enkel design på webben. Gör det som är viktigt för användarna.

3. Capabilities = Innovation
Tilt-scrollning. Tilta framåt och bakåt för automatisk scrollning. Går att göra för våra artiklar.

Touch-baserade skärmar. Hur använder användarna touch? Innehållet är interfacet. Jfr med hur barn interagerar med en iPad. Naturligt och enkelt. Vilka olika typer finns: tap, double tap, shake, rotate, drag etc. Läs mer här lukew.com/touch

Geolocation: var befinner sig användaren?

…och mer: NFC, två kameror, scanning, gyroscope, audio input, augmented reality…mm (se presentationen).

Slutsats #1: hur kan vi förbättra våra befintliga tjänster och utveckla nya med tanke på ovanstående punkter?

Slutsats #2: Utveckla för Mobilen först så blir även webben bättre. Enkelt att säga svårt att utföra. Webben sitter i väggarna. Vi har lite att göra när vi kommer hem.

Talare: Luke Wroblewski

”Luke is currently Chief Product Officer and co-founder of Bagcheck Inc. Prior to this, he was an Entrepreneur in Residence (EIR) at Benchmark Capital and the Chief Design Architect (VP) at Yahoo! ”
http://www.web2expo.com/webexny2011/public/schedule/detail/21259

Tänk på upplevelsen utifrån mobilen först, inte webben
”Mobile first and desktop second”
”Mobile applications first because there are better apps”

Trender 

1. Bättre prestanda
2. Bättre nät/uppkopplingar/anslutningar
3. Molntjänster

Vad innebär det då rent praktiskt?

Talare: Nick Disabato – Interaktionsdesigner från Chicago.

Nick berättar om ”Poor expectation management ” och olika negativa mönster som visar tydliga briser i design av webbapplikationer. Dessa mönster återfinns i allt från betaltjänster och annonser där tjänsten förmedlar fel information till besökaren.
Som användare är det ofta otydligt vad som händer med ex. min information i sociala medier och e-handelstjänster vid registrering och annonser som man klickar på.

Applikationer inger ofta falska intentioner och man får ofta något annat än vad man tror i ex. en kampanj som kan vara en inbjudningar till pyramidspel eller svårigheter att avregistrera sig från en webbtjänst. Tilliten för varumärket, produkten eller tjänsten påverkas mycket negativt vid dessa tillfällen.

Hur skulle vi då kunna undvika och förbättra för användaren och hur skulle då ett businesscase se ut? Vad kan vi mäta och hur kan vi skapa värde genom att börja använda bra design och UX?

Några användbara nyckeltal

• Besökarfrekvens
• Antal samtal från besökare
• Antal nya registreringar
• Antal problem på sociala medier

Hur kan vi bygga bättre design för att förhindra ”Poor expectation management”

• Hirarki – Vad vill vi att användaren ska göra på sidan ex. logga in, posta information, interagera etc.tydliggör förväntningar och intentionerna för besökaren.
• Timing – Presentera information i rätt sammanhang.
  Ex. i ett köpflöde kan man presentera flera produkter efter färdig betalning.
• Defaults – Var tydlig i vad man kan ändra på som användare
  Ex. i ett formulär eller editering av information.
• Simplicity – vs Complexity
  Ofta vanligt i sociala medier och här kan man jämför rättighetsinställningar för ex. Twitter och Facebook.
• Copy & Tone – Hur kommunicerar vi med våra användare, vilken ton använder vi?

Den andra sessionen hölls av NPR från vilka vi lånat COPE-tänket. En sammanfattning av förra årets NPR-session finns här.

Utmaning: få ut innehåll i olika kanaler.

Principer:
– Bygg inte ett stort system – koppla ihop många mindre komponenter
– COPE (se tidigare inlägg)
– CMS och presentationslagret är olika saker
– ATOM (Storyn är NPR:s atom, Storyn har Assets (text, bild, video etc) och tillhör listor)
– IT is better to be incomplete than inaccurate

Mål för NPR:s API:
1. Öka effektiviteten i utveckling
2. Distribuera till partners
3. Tillåt omvärlden at bygga tjänster
4. Öka flexibilitet i vad som kan göras med innehållet

Det spelar ingen roll vilket CMS som använts bara innehållet sparas på ett bra sätt. Abstrahera innehållet och spara inte som HTML är NPR:s tips. Här har vi en bra bit kvar…

(Infoga bild av NPR Architecture of COPE)

Hur har det gått senaste 3 åren? Resultat och lärdomar:
– Ökad effektivitet -> ja, endast utveckling i presentationslagret krävs i de flesta nya projekt
– När API:et är byggt måste det användas rätt (internt och externt)
– Skalbarhet är viktigt. Cacha, cacha, cacha.
– XML användes till en början hela vägen i API:et men det krävde mycket underhåll. NPR byggde om hela arkitekturen och byggde om till serialiserade PHP objekt. Enklare kod och mer rakt på. Resultat: bättre prestanda, snabbare utveckling, inga enorma DOM-träd.
– Bilder. NPR använder Imagemagic.

Vad händer om hela storyn bygger på Flash eller flera bilder för att fungera? Lösning: tagga upp det som är viktigt i storyn.

Viktigt att trycka ut uppdateringar och om artikeln blivit borttagen.

Har externa utvecklare byggt tjänster på API:et? Ja, t ex iPhone-app. En google-utvecklare byggde också en NPR-Android-app på sin 20% innovationstid.

Hur hantera t ex bokrecensioner i ett Storybaserat API? Det går men kräver mycket logik i presentationslagret. Det finns begränsningar och lösningen är att bygga ett recensions-API.

Tips: bygg inte själva utan använd Mashery eller liknande. Det fanns inte när NPR började bygga sitt API.

Frågor:
– Bygger alla tjänster på API:et? Ja, alla nya. Fortfarande finns legacy som inte gör det.
– Hur hanteras UX? Inom utvecklingsteamet i 2-veckorssprintar.
– Hur hanteras CSS för olika kanaler? Varje kanal hanteras separat. I det bästa av världar kan ett presentations-API fungera.
– Hur tar man sig ur ett CMS-beroende där innehåll och presentation sitter ihop? Lös det inkrementellt. Låt ingen lägga in html direkt. Parsa och städa upp lite i taget.

Mer info: npr.org/blogs/inside