Future Insights Live 2013 dag 3

Welcome to Las Vegas skilt

A.k.a. What Happens in Vegas end up at the Vertica Blog part 3
(at dømme efter længden af disse blogindlæg, sker der en del i Vegas)

Keynote: “Crafting Virtuoso UX Teams” af Cameron Moll

Dag 3 (konferencedag 2) startede vanen tro med en opening keynote, denne gang af Cameron Moll, som er founder af Authentic Jobs, men som også er typografi-kunstner, velgørenhedsdrivkraft og design/frontend-mand og iøvrigt en ganske karismatisk type

Jeg synes at kunne genkende et mønster i at det kan det være lidt svært at gengive keynotes’ene, nok grundet deres karakter som noget mere overordnet eller som værende lidt mere værdiladede end decideret hands-on praktiske. Men stadig spændende, lærende og perspektiverende.

Cameron Moll: Crafting Virtuoso UX Teams

Cameron Moll: Crafting Virtuoso UX Teams

Essensen af denne keynote var omkring at lave bedre teams og højne produktiviten, men vi kom vidt omkring – en del af det relateret til arbejdskultur. En hovedpointe var at se på det endelige resultat – “The Net Effect”. “The Net Effect Matters Most”. Hans velgørenhedsarbejde i Afrika blev her trukket frem: Her resulterer hans (og Will Smiths) velgørenhedsarbejde i rent vand til de lokale. Men Net Effecten er ikke det rene drikkevand, det er at folk lever længere og får et bedre liv. Således også den større mening med at lave gode teams og arbejdspladser. Mange af pointerne er ikke så fremmede for os i Europa, men de kan være værd at huske på (her et par af emnerne listet lidt råt op):

  • Hire smart or manage tough
  • Culture: It’s what brings you back to work each day
  • Great teams do what’s best for them
  • Prototype early, frequently and habitually. Element collages
  • Pausing from work improves the work
  • Collaboration and isolation must be valued equally
  • Great (work)flow feels almost superheroic (yeah)
  • Spend two hours every six weeks watching users interact with the product

“Typography is the new Black” af Jim Kidwell

Denne spændende session handlede om typografi – krydret med rigtig mange gode eksempler. Sessionen startede med en gennemgang af (primært amerikanske) reklamers typografiske udvikling gennem tiden og hvordan typografien kan definere “looket” for hele årtiers reklamer og visuelle udtryk og kan indeholde både følelser, definition af tid og sted. Typografien er kritisk for en virksomheds branding, skal være konsistent og tjene brandingen. Jim anser typografien for værende brandets maling. McDonald’s blev gennemgået som case study og hvordan typografien har udviklet sig gennem årene. En overgang havde alle de store burgerkæder i USA (McDonald’s, Burger King og Wendy’s) rent faktisk samme typografi. Nu er trenden mere at de benytter forskellige skrifttyper til at brande forskellige produkter/universer.

Jim Kidwell - Typography is the new Black

Jim Kidwell – Typography is the new Black

Heldigvis blev der også tid til lidt Comic Sans-bashing. Comic Sans er den frygtelige font som alle designere elsker at hade. Her blev den brugt til at illustrere hvordan de forskellige brands/logoer på større virksomheder ville miste deres identitet og fuldstændig ændre budskab hvis alle brugte samme font (http://comicsansproject.tumblr.com). Tilsvarende også eksempler på hvordan store virksomheders logoer ville tage sig ud hvis typografien blev byttet ud med en anden kendt virksomheds typografi. I disse tilfælde var selve navnet på virksomheden næsten sekundær, da typografien er så tæt bundet op på virksomhedens brand.

Herefter gennemgik Jim historikken omkring typografien på nettet, fra de sikre webfonts til @font-face og med eksempler på velanvendte typografier på websites. Browserne bliver efterhånden også bedre til at håndtere avanceret typografi (med Firefox som frontfigur pt.). Understøttelse af kerning og ligaturer er fx på vej i de nye browsere. Jim er stor fortaler for at bruge andre skrifttyper end Helvetica (og dermed Arial) på websites – skrifttypen er ganske enkelt ikke designet til at læse på skærm og er generelt dårligt læsbar ifølge ham. Han gennemgik et par eksempler herpå; i situationer hvor hjernen hurtigt skal kunne afkode tal eller bogstaver der fremstår meget ens. Til fx. lægejournaler eller steder hvor en præcis aflæsning af et tal er vigtig, er der langt bedre muligheder med fonte der har fx. sænkede 9-taller.

På webben er der stadig en del problematikker omkring platforme og forskellige renderinger af specielle typografier – der er stadig stor forskel på hvordan fonte renderes i forskellige browsere, styresystemer mm., så der er stadig noget arbejde i at finde brugbare fonte til webbrug.

Slutteligt blev vist et par gode inspirationsvideoer omkring brandtypografi, lidt anbefalinger af bøger samt lidt “Papyrus-bashing” – Papyrus er tilsyneladende den nye hater-font 🙂

“Rethink Your Digital Design Thinking for a Million-Device World” af Jason Pamental

Denne rigtig spændende og vel præsenterede session handlede om “Designing for Uncertainty” – altså at vi som designere ikke ved hvordan vores design bliver konsumeret. Jason er derfor også stor fortaler for responsivt design – og så kan han desuden ikke lide faste bredder og Arial 🙂

“Det er os der har opfundet begreber som above the fold og pixelperfect – derfor er det også vores job at skrotte det og bygge noget nyt”. Det eneste vi ved med sikkerhed er at vi alle skal dø – efter vi har betalt en masse skat, samt at vi ingen idé har om hvordan brugeren ser vores design. Vi ved endda endnu mindre om brugeren; hvordan konsumeres designet, på hvilken skærm? Med hvilket input? Hvad laver de ellers på det tidspunkt? Og hvilken enhed benytter de?

Men hvad er så sikkert? Én ting er i hvert fald at den første kontakt med brugeren i stigende grad sker via en mobil device. Tilmed eksploderer det når der er tale om krisesituationer – her blev der henvist til Boston Marathon: De fleste nyhedssites og regeringssites crashede. Twitter og Boston Globe forblev online. Hvorfor? Fordi de har responsive sites der ikke smider 5mb ned på hver eneste device der besøger dem. Her er eksemplet på data der bliver serveret passende.

Gentænk vores designtænkning
Vi designer ikke sider. Vi designer systemer, sammenhænge og hieraki. Vi designer mening. Det er afgørende hvordan brugeren forstår og lærer. Som designer er man nødt til at tænke semantik – start med at strukturere relevant markup. Man er som god designer også nødt til at vide hvordan (ind)læring fungerer og forstå psykologien bag. Jason gik videre til et praktisk eksempel med Pandoras musiktjeneste: Her burde designet være optimeret til brugerens kontekst – i bilen er det vigtigt med klare call to actions og hurtig interaktion (da det nuværende design decideret er farligt for trafiksikkerheden). En rigtig god pointe her var: Lad være med at ekskludere mig fra content ved at drage konklusioner om min kontekst, men juster designet følgeligt. Det er noget jeg oplever vi ofte diskuterer når vi laver mobiloptimerede løsninger – og nok et emne der kan være svært entydigt at skulle besvare. Er det måske i højere grad apps der skal være kontekstuelle end de mobile websites?

Jason Pamental – Designing for Uncertainty

Jason Pamental – Designing for Uncertainty

Processen omkring design af RWD begynder – her ser jeg et gennemgående tema – på papir. Tegn elementopbygninger for forskellige størrelser, og husk at RWD ikke kun er små skærme; tænk på brugeren på en 27” iMac. Vi har ofte en tendens til at tænke RWD nedad og mod små klienter. Lær og research hele tiden. UI-patterns modnes men flere kommer til. Fx den efterhånden kendte swipe nedad for at reloade (fx Facebook). Dette designpattern ses i rigtig mange apps efterhånden, men var i virkeligheden til at starte med én mands idé. En pointe her er at native apps virker. Hvorfor? Kig på dit yndlingsapp og reflektér over hvorfor det fungerer: Kan noget af dette også bruges på web? Off canvas navigationen blev her fremhævet igen som et eksempel på et pattern der er “arvet” af det mobile web fra native apps. Der er ingen mobile brugere – kun mobile enheder. Brugerens opgave afhænger af omstændigheder omkring brugen (“the Why”). Hvordan brugeren udfører disse opgaver afhænger af enhedens kapabilitet (hover, touch, swipe). Webbet modnes “stille og hurtigt” og brugeren vil ikke kun tilgå – han vil have en oplevelse.

Photoshop-emperiets fald
“Photoshop Emperiet” er ved at styrte (det er noget som fylder en del rundt omkring i designkredsene). Vi skal i højere grad designe “tiles” i stedet for “comps” – altså i højere grad byggeklodser/interaktioner end færdige og faste sider. Vi skal tænke visuelle systemer og benytte UI-konventioner. “Prototype, not promises”. Prototypen er et eksempel, ikke et løfte. Brug aldrig, aldrig Arial igen mener Jason også. Hvis du bruger samme typeface som 95% andre sites, mister du opmærksomhed og eneståenhed. Men hvis det er alt dette vi skal, hvorfor tænker vi stadig i sider? Og hvis “The Web has Left the Building” (referencer til Elvis og Las Vegas), hvorfor tror vi så stadig at 960 pixels betyder noget, når webben er i vores lomme, sofa, fjernsyn og “in the dash”? “Power to the People – and their Web clients”: Eftersom vi ikke ved hvad en klient er, skal løsningen bo der og ikke på serveren.

Det flydende design bør bruge snap points – altså faste markeringer hvor designet ombrydes/ændres – evt mange snap points. Selv hvis man prototyper direkte i HTML er det kun en lille del af det.

Afrunding
Kend dit content. Du kender dit design og du kender webben og ved hvad der kan gøres ved det. Design mening, ikke sider. Brug CMS’en som hjælper: Jason selv laver prototyperne i Drupal (CMS) – et workflow der fungerer for ham. Så samtidig med der udvikles prototyper i Drupal, kan udviklerne begynde at udvikle under hjelmen mens designerne udvikler deres “tiles”.

Anbefalede online ressourcer:

“Modern.ie: Tools Building Compatible Web Sites” af Jason McConnell

Jason McConnell fra Developer Relations, Internet Explorer holdt et oplæg omkring det at teste på tværs af IE-browserversionerne (et desværre nødvendigt onde som de fleste frontendere hader og som Microsoft også selv er klar over er problematisk idet de gamle IE-versioner ikke kan afskaffes). Så formålet med modern.ie er at lette byrden ved at teste i IE. De er også klar over at selvom ønskescenariet set fra Microsofts side er at frontend-udvikleren sidder på Windows i TFS og Visual Studio, så sidder de i virkeligheden ofte på Mac med Github og Coda (groft forenklet). Så denne del har også været med i deres overvejelser.

Jason McConnell: Modern.ie: Tools Building Compatible Web Sites

Jason McConnell: Modern.ie: Tools Building Compatible Web Sites

Selve præsentationen var noget rodet og uheldig (præget af tekniske hickups og en Flash-installation midt i det hele) og det gjorde at jeg egentlig ikke blev så frygtelig meget klogere. Der blev gennemgået lidt af de ting værktøjet kan; scanning og check af forskellige kendte problemer. Noget med Sauce Labs og Browserstack. Rapporten kommer også med en del tips omkring best practices og forbedringsmuligheder.

“Mobile Web Design Anti-Patterns” af Dave Shea fra Mobify

Anti-patterns
Vi laver ubevidst et nyt problem i forsøget på at løse et andet. Dave Shea gennemgik på dette seminar en række typiske problemer og best practices omkring mobilt design med mange gode pointer, men heldigvis også med en del best practices vi allerede ser som en naturlig del af webdesignet.

Overordnede problematikker
Responsive er ikke “the default yet” – altså ikke noget vi gør som standard endnu. Mobil er ikke “the default” når der designes web. Dave har oplevet at omsætningen i deres kunders løsninger minimum fordobles på mobil ved lancering af mobiloptimerede løsninger.

Dave Shea: Mobile Web Design Anti-Patterns

Dave Shea: Mobile Web Design Anti-Patterns

Door slam
En række helt dårlige eksempler på deciderede afvisninger af brugeren blev gennemgået: Alt fra store “Hent vores app”-bannere til landingpages hvor brugeren skal vælge site/app mm. “STFU And Give Me The Content” – brugeren vil bare have indholdet; ikke en reklame for virksomhedens app. Omkring m.site.com, så brug ikke sekundære URLs til mobile websites (YES!). Det er en dårlig ide da det giver dårlig SEO, redirect-forsinkelser og problemer med deling. En desktopbruger risikerer at lande på et mobiloptimeret site hvis han får tilsendt et link fra mobilen (eller risikere en redirect). “One Web, One URL”. Det er den samme side/samme content pakket lidt forskelligt ind. Ofte opleves det også at brugeren helt udelukkes fra websitet når de tilgår det med en mobil. Hellere giv brugeren en mellemgod oplevelse end slet ingen. Og lad være med at redirecte brugeren tilbage til forsiden når man klikker på et mobillink (noget som jeg til stor irritation og ganske apropos selv havde oplevet samme dag med MGM Grands website efter en googling).

Designprocessen
Test kontinuerligt på mobile devices. Photoshop er et godt værktøj, men det giver problemer når der skal designes interaktionsflows (netop derfor er jeg stor fortaler for at lave kørende og designede Proof-of-Concepts i browseren). Designprocessen skal derfor flyttes ud af Photoshop på et tidligt tidspunkt og “into code”. Men Photoshop er godt til de initielle designtanker. Der bliver jo snakket en del om at designe helt i browseren (som nok mest er frontenderens våde drøm, som designer er det vigtigt at have kortest mulige afstand fra idé til udførelse). Dave kom med en meget god pointe omkring dette: “Don’t design in the browser. Decide in the browser”.

UI-problemer og best practices
At påtvinge størrelser og orientering: Dårlige eksempler med fx mobilsites på tablets, påkrævede rotationer af enheden mm. “Responsive, yo”. De irriterende “Add to home screen” popups med en pil ned til en knap på iPhonens browser. Lad være med det, du ved ikke om brugeren har den knap på sin browser. Du kender heller ikke noget til brugerens miljø og kontekst. Lav linkteksten brugbar og lad være med at bruge “klik her” linktekster men brug enheds-agnostisk tekst. Husk at give god plads til at kunne ramme links og actions. Det generelle forslag er 40px, men da pixeldefinitionen efterhånden er noget udvandet, så sigt mod at lave et tap-område på min. 12mm. En god pointe er også at der afhængigt af (touch-)enheden er forskellige steder at tappe – ganske enkelt fordi størrelsen og dermed brugen af dem er forskellig: På en iPhone bruger man måske typisk højre tommelfinger, på en “Phablet” bruger man måske pegefingeren (eller tommelfingeren i nederste del af skærmen) grundet størrelsen. En tablet holdes igen helt anderledes. Derfor kan man overveje at placere primær navigation i forhold til klientens størrelse.

Højtopløste skærme er efterhånden standard (på mobile enheder indtil videre), så overvej dette uden at lade det gå for hårdt ud over båndbredde. Lad være med at ignorere “folden” helt. Vi bruger en masse tid på at fortælle af folden er død, men sidens primære actions bør stadig være over folden (tænk fx køb-knap). Her har Dave målt en beviselig omsætningsforskel. Men lad samtidig være med at klemme alt ind på ét skærmbillede. Brugeren kan sagtens og vil gerne scrolle, men indholdet skal være interessant.

Ikoner
Der blev brugt lidt tid til at diskutere ikoner og hvorfor fx gem-knapper stadig er en floppy-disk (noget som en del brugere efterhånden ikke engang ved hvad er). Mobile brugere er vant til ikke at tænke i at “gemme” ting på samme måde. Så skal vi overhovedet have en gem-knap her? Flere ikoner med reference til forældet teknologi blev gennemgået. Hvorfor søger man med et forstørrelsesglas eller bruger en båndoptager som voicemail? Men pointen her var vist at at konventionerne alligevel kun skal brydes hvis det er nødvendigt, da der jo er tale om kendte terminologier.

“Mystery Meat”
Der bør generelt være tekster i forbindelse med ikoner. Pas på med de skjulte gestures – bortset fra scroll og pinch-to-zoom er gestures ikke umidelbart logiske (og nok slet ikke i forbindelse med mobile websites). Lav visuelle fingerpeg – fx billeder der går ud over kant, hvis man kan swipe for at se mere indhold.

Museinteraktioner
De klassiske mouseover og højreklik er problematiske ift de nye platforme – og tap and hold er ikke intuitivt. Der blev talt lidt om de nye Media Queries Level 4 (ikke at forveksle med CSS4), som bla. tager hensyn til inputmediet.

Misforståede UI-elementer
Den kendte HTML-selector (drop-downen) er misforstået som navigationselement. Ved lange lister med navigation vil brugeren typisk hurtigt scrolle sig igennem listen for at danne sig et overblik.

Tabeller kan være svære at håndtere i RWD. Hvordan skalerer vi datatabeller til små enheder? Reflow er ikke nødvendigvis den bedste løsning, da man risikerer at miste overskueligheden, men kan bruges i mangel af bedre.

Billeder: Vi oplever som en stigende tendens at der ikke lægges nok arbejde i at optimere billeder længere. Alt for ofte gemmes billeder blot som PNG24 – med unødvendig lange svartider som konsekvens. Optimer altid billeder, selvom det ifølge Dave ikke burde være nødvendigt at nævne. Overvej alternative billeder til forskellige klienter.

“CSS Selectors” af Estelle Weyl

Dette seminar var en frontendteknisk gennemgang af lidt mere avancerede (pseudo)selectorer inden for CSS. Jeg vil ikke gengive de konkrete eksempler her, da de dels var meget praktiske/visuelle af karakter, men da en del af de mere sjældne og specielle selectors ofte kan googles hurtigt når man en sjælden gang har brug for dem.

Estelle Weyl: CSS Selectors

Estelle Weyl: CSS Selectors

Ikke desto mindre en spændende session med ret syrede tilfælde og mere hardcore strukturelle selectorer: Det mundede ud i et eksempel på det amerikanske flag af en tabel kun ved brug af pseudoselectorer a’la nth-*. (“I don’t have a life, so that’s how I spend a friday evening”). Lidt mere praktisk anvendeligt er måske de nye pseudoselektorer baseret på de nye HTML5 input types som fx. “:out-of-range” – på denne måde kan man nemmere lave validering uden brug af Javascript. Ligeledes eksempler på brug af faner/tabs ved hjælp af :target selector. Desuden :root element som grundlag for font-sizing med rem (i stedet for den til tider noget besværlige em, som jeg personligt glæder mig til at slippe af med).

Keynote: “How to Destroy the Web” af Bruce Lawson

Bruce var den skøre gut fra Opera, jeg også oplevede i går. Den mand kan simpelthen formidle et budskab på den skøreste men alligevel eftertænksomme måde, som går rent ind hos undertegnede.

Bruce Lawson: How to destroy the Web

Bruce Lawson: How to destroy the Web

Indlægget (netop også grundet formen) kan være ret svær at gengive her. Overordnet kan det vel siges at omhandle best practices til at ødelægge webbet – noget der flittigt er blevet udøvet gennem årene med proprietære teknologier (Active X, Flash, browsersniffing mm), politik og censur men også gennem mere jordnære ting som antagelse af hover, at droppe semantikken, tabeldesign, lave links ud af spans mm.

Som sagt noget svært at gengive, men en rigtig god og perspektiverende keynote at afslutte dagen på.

The Strip

The Strip: Bellagio, Caesars Palace og lidt af Paris

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