Arkiv for ‘Mobil’ Kategori

Deleger kortene til mobilen

Hvorfor drar vi fortsatt rundt på 4-7 kort i lommen? Visakort, kaffekort, busskort og nøkkelkort. Hvorfor har vi ikke delegert visakort og busskort til mobilen? Ruter har allerede begynt å lage en billett-app på mobilen. Vi har allerede bank på mobilen.

Den beste måten du kan unngå å glemme ting på, er å ikke ha noe å huske

Jeg glemmer stadig ett eller flere av kortene mine, enten glemmer jeg nøkkelkortet, eller så glemmer jeg visakortet, eller kaffekortet. Men mobilen, den glemmer jeg (nesten) aldri. Og hver gang jeg går på bussen så står jeg og blar igjennom et arsenal av kort for å finne det riktige kortet. Gjerne mens jeg står i kø ute i regnet med paraply, sekk og veske som et annet pakk-esel og febrilsk forsøker å fiske opp riktig kort før det er min tur å gå på bussen.

Nokia gjorde 5 års research verden rundt der de spurte ‘what do you carry’?  Jan Chipchase jobber med å studere menneskelig adferd. Han fulgte folk rundt med videokamera og studerte hva de bærer på.

Hva tenker du på å ta med deg, hva tar du med deg, og hva ender du opp med å bruke og hvilken verdi har det for deg? Det de fant ut var at folk bærer nøkler, penger og mobiltelefon. Det høres kjent ut. Grunnen til at vi bærer disse tingene koker ned til overlevelse. For oss selv og de vi bryr oss om. Sikkerhet og fysiske behov, de to nederste trinnene på Maslows pyramide. Overlevelsen er avhengig av at vi bærer på disse objektene – MEN – vi er menneskelige, vi glemmer. Nokia fant på en garantert måte å aldri glemme noe på – å aldri ha noe å huske! Hva kan vi delegere til teknologien?

Å huske kontaktinformasjon har vi allerede delegert til teknologien. Hvem husker bestevennens telefonnummer i disse dager? Jeg husker den gangen da vi måtte pugge mobilnummer og huske de utenat. Klokker måtte vi også huske før i tiden. Klokken bærte vi først som lomme-ur og så ble det armbånds-ur. Dette ble så til lomme-ur igjen i form av mobilen, som ligger i lomma. (Når kommer armbånds-mobilen?)

Jeg tror ikke vi trenger to dingser for å betale med mobilen i fremtiden. Folk liker å bruke mobilen når de likevel er på mobilen, det er enkelt, og de slipper å dra seg opp av sofan for å hente visakortet som ligger på kjøkkenet (pes!).

Infografikken viser at mobil betaling blir mer og mer populært:

Mobile Payment 2015 [infographic]
Mobile Payment 2015 [infographic]
Infografikken er hentet fra Mobile Payments Today

Vi må være klare for at mye vil forandre seg raskt og lage fremtids-vennlige produkter og tjenester. Ved å se hva som kommer, og lage produkter og tjenester som er bygget for fremtiden, kan vi skape langsiktig verdi for folk og kunder.

Touch vennlige aviser

I går lanserte vi nytt touchvennlig rammeverk for lokalavisene. Android og iphone sendes nå til touch.xx.no. Vi venter med windows telefoner siden disse ikke er veldig utbredt enda. Se eksempelvis touch.dittoslo.no, touch.f-b.no og touch.lierposten.no.

Leserne har touch telefoner 

Vi ser en eksplosiv vekst på bruken av mobil og forventer at denne trenden fortsetter.

  • Den gamle mobilversjonen (m.dt.no, m.tb.no osv) var optimalisert for Symbian telefoner, ikke touch. I dag har majoriteten av leserne touch telefoner.
  • Den gamle var ikke designet for touch. Eksempelvis var det svært vanskelig å treffe en lenke i en liste med fingeren.
  • Den gamle var i overkant strippet for innhold. Veldig mange velger å gå til desktop versjonen for å se mer innhold. Den nye er riktignok også ganske strippet ved første lansering, men har et bedre utgangspunkt for videreutvikling.
  • Den gamle hadde veldig få nyheter på forsiden for å spare lastetid. I dag tåler mobilleserne mer datatyngde.
  • Den var dårlig skalerbar til dagens skiftende mobiltrender.

Den nye mobilversjonen er designet for touch

Fokuset i første runde har vert å tilpasse til smartphones fremfor å utvikle ny funksjonalitet. Vi gjorde en Kano undersøkelse som viste at nyheter helt klart er det leserne våre bryr seg om, naturlig nok.

  • Den nye mobilversjonen er tilpasset til touch skjermer. Knapper med store gode trykkflater som gjør det lett å treffe riktig.
  • Nytt menykonsept med en kollapset meny som er samlet under en enkelt meny knapp.
  • Rikere meny
  • Forbedret brukeropplevelse i bildegallerier med visning i fullskjerm og bedre posisjonerte bla-knapper.
  • Flere nyheter på forsiden og et mer representativt nyhetsbilde
  • Topplister med mest lest og siste nytt
  • Video-oversikt
  • Mulighet for å justere tekststørrelsen på artikler for mer behagelig lesing.
  • Svg logoer og ikoner som skalerer veldig fint for høyoppløselige skjermer.
  • Veier videre fra artikkel. Eksempelvis mest kommentert og siste nytt fra forsiden.

Hybridløsning 

Der er både fordeler og ulemper med responsive design. Denne gangen veide ulempene mer enn fordelene. Man valgte å gå for en hybridløsning, som kan videreutvikles kontinuerlig.

  • Mobilversjon.
  • Hybridløsning som er responsive i den forstand at den tilpasser seg ulike touch telefoners bredde, horisontal og vertikal.
  • Bare iphone og android sendes til touch
  • Mobilversjonen skal kunne videreutvikles til å skalere opp til brett med responsive design og media queries.

Bærekraftig design

Nettavisene må evne å hele tiden tilpasse seg til det utstyret som leserne sitter på. Den nye versjonen er laget etter prinsipper for bærekraftig design, noe som betyr at den lett skal kunne justeres ettersom markedet snur seg. Hastigheten på utskiftning av mobiltelefoner er mye raskere enn på desktop. Dette fordrer at en henger med i svingene og utvikler mobil kontinuerlig.

Nyheter om nylanseringen:

http://tb.no/nyheter/sjekk-avisen-pa-mobilen-na-1.7160263
http://www.moss-avis.no/nyheter/ny-mobilutgave-av-moss-avis-no-1.7160377
http://www.f-b.no/nyheter/f-b-no-pa-mobil-enklere-og-bedre-1.7158758
http://www.varden.no/nyheter/varden-med-enklere-og-bedre-mobilutgave-1.7159519
http://kv.no/nyheter/kvs-mobilversjon-med-nytt-utseende-1.7160349

 

 

 

Responsive design – begreper

Skal du gå fra å designe desktop til å designe for mobil web med responsive design, så er det noen nye begreper som du trenger å bli kjent med. Å respondere til ulike enheter kan bety mangt. Eksempelvis:

  • Tilpasse layout til ulike skjermstørrelser
  • Nedskalere bilder
  • Hente mindre bilder for mindre skjermer (laste ned mindre filer)
  • Forenkle elementer for mobil
  • Gjemme elementer som ikke er blant de viktigste c2a
  • Større, touch-vennlige linker og knapper for mobilbrukere
  • Detektere og respondere til mobile funksjoner som gps og enhetens liggende eller stående format

Hvordan vet vi hvilke egenskaper enheten som besøker siden vår har? Jo, med:

Media queries

Dette bør ikke være helt ukjent for deg, du har sikkert designet utskriftsvennligevennlige sider før?

Med media queries kan vi levere ulik layout, ulike bildestørrelser, vise/skjule innhold ol. Vi kan tilpasse designet til ulike enheter, orienteringer, skjermstørrelser osv.

Dagens desktop enheter har ulik skjermstørrelse og omtrentlig samme dpi verdier, derfor designes desktop versjoner typisk i pixel størrelser. Dagens mobile enheter derimot kommer i mange ulike dpi verdier.

Density

En pixel er ikke en pixel. Når vi designer for mobil kan vi ikke bare forholde oss til hver enhets skjermoppløsning. Vi må også se på pixeltettheten, hva enheten rapporterer og hva dette betyr i praksis.

Dette betyr i praksis at et bilde med samme pixelstørrelse kan se veldig liten ut på en 326 dpi skjerm, og veldig stor ut på en 170 dpi skjerm med lavere pixeltetthet dersom en ikke tar hensyn til dpi. Du kan også risikere at fonter blir for små, eller trykkflater for små og vanskelige å treffe med fingeren.
Safari på IOS lyger!
En pixel er IKKE en pixel

Viewport

Refererer til størrelsen på browservinduet minus rammer. På mobil kan denne være større enn mobilskjermen. Default bredde på ios er 980 pixler.
Dersom du designer for bare iphone, sett viewport til skjermstørrelsen.
Dersom siden du designer er mindre enn 980 pixler, sett viewport til bredden på designet ditt.
Eller du kan bestemme at viewport skal være det samme som den fysiske størrelsen:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Virtual viewport

Vi var inne på at viewport på en nettleser på mobil kan være større enn den fysiske skjermen. Dette er det som kalles for “virtual viewport”.

Orientation

På mobil kan man se websiden både i stående og i liggende format. Der er ulike skjermbredder på samme enhet. Dersom vi ikke gjør noe med dette, kan brukeren få to ulike layouts og to ulike bannerpakker på samme side samtidig bare ved å tilte på enheten.

  1. media all and (orientation: portrait) {  
  2.  body div { width: 10%; }  
  3. }  
  4. @media all and (orientation: landscape) {  
  5.  body div { width: 15%; }  
  6. }

Resolution

Levetiden til mobile enheter er typisk mye kortere enn desktop. Kortere levetid og stadige nylaseringer gjør at bildet på populære oppløsninger er i stadig endring. En pixel er ikke en pixel. Selv om en nyere iphone med retina skjerm har en pixeloppløsning på 640 bredde så vil denne bruke samme layout som en 320 pixel skjerm.

@media only screen and (min-width: 321px) and (max-width: 479px) {}

Pølsefinger

For all del, glem ikke touch! Design for tjukk og feit pølsefinger, her er ingen mus med presis navigering.

Design for touch. Det vil si at ingen linker eller knapper eller andre interaktive elementer skal ha mindre enn minimum 44 px trykkflate. Noe mindre blir veldig vanskelig å treffe med fingeren. Det betyr at linklister eller linker som ligger ved siden av hverandre må være store nok, ha stor nok trykkflate og ha tilstrekkelig luft rundt seg til at det ikke blir lett å bomme.  Og nå: les avsnittet om dencity en gang til.

Du kan også legge på skjulte touch interface elementer, eksempelvis To-finger tap.

Fordeler og ulemper med responsiv design

Publisert: 1 Comment

Fordeler og ulemper med å designe etter responsive design prinsippet.

Responsive design er ikke det samme som en «mobil-versjon» av nettsiden din. Responsive design er en fullverdig visning av nettsiden som er tilpasset det miljøet du ser den i.

Istedenfor å lage en layout som skal passe for alle skjermer, lages layouter som tilpasser seg det utstyret hver enkelt bruker sitter med.

Mobildesign handler ikke nødvendigvis om å lage en helt ny brukeropplevelse, men om å levere den samme opplevelsen fintunet for håndholdte enheter. Spørreundersøkelser viser at brukerne slett ikke alltid er på farten når de surfer med håndholdte enheter, majoriteten sitter faktisk mest hjemme og surfer med brett eller mobil, i sofa, på senga, på do.. kjenner du deg igjen? Du begynner kanskje å lese en fagartikkel på desktop, fortsetter å lese neste artikkel på mobilen på toget, og leser ferdig på brettet hjemme i sofan?

Fordeler med responsive design

  • inkluderende
  • en versjon for alle enheter – lettere å vedlikeholde en versjon enn mange versjoner
  • samme brukeropplevelse uanhengig av device
  • selv om browservinduet er nedskalert vil designet fungere
  • mobil først – når en designer for mobil først blir en mer bevist på å fjerne innhold som virkelig ikke trenger å være der. Da blir heller ikke desktop versjonen overfyllt med unødvendig innhold
  • brukerne blir ikke utestengt fra fullversjonens innhold. Mobilversjonen er typisk veldig strippet for innhold.
  • vi velger ikke bort innhold for leseren
  • deling av linker: url er det samme uansett. Du vet ikke hvilken device den du deler linken med er på, deler du m.dt/artikkel med en venn som er på en desktop utgave, vil det se ganske merkelig ut.
  • samme innhold tilpasset devicen. Det lar brukeren fullføre oppgaven. Vi velger ikke bort 90% av brukeroppgavene. Kommer du til dt.no for å gjøre en spesiell oppgave kan det være veldig irriterende om akkurat den oppgaven er valgt bort for deg på mobil.
  • fungerer spesielt bra i nyere browsere
  • samme opplevelsen på tvers av devicer. Mer gjennomgående brukeropplevelse.
  • bærekraftig design – imøtekommer dagens brukerbehov uten å redusere mulighetene for å dekke fremtidens brukerbehov.

Ulemper med å bruke responsive design

  • krever at utviklerne har kunnskap og erfaring med responsive design
  • det er ikke lett! Er teamene klare? Hvor lenge er det til de er klare? Hvor mye prøving og feiling må til.
  • vedlikehold mer komplisert
  • utviklingstid og ressurser – har vi tid til å gjøre det grundig? Responsivt design er komplisert å utvikle.
  • browser kompabilitet – html5 og css3 er gode verktøy for å bygge responsive nettsteder, men det er fortsatt mange issues med disse.
  • vi må ha annonser som kan skalere
  • ytelse/lastetid – Flere kall på grunn av kross browser og kross plattform kompabilitet issues. (IE..) Mer css å laste ol.
  • ulike devicer kan ha behov for å støtte noe ulike brukeroppgaver. Innhold/touch grensesnitt/ mobil har ulike muligheter som gps/ringe/mobilverifisering mobil/desktop ol. Behov for nedkortet innhold på mobil, ikke vise like mye på en gang.
  • må laste ned like mye på mobil som på pc. Kan være en utfordring på avisenes meget innholdstunge forsider. (Kan være ulike tekniske løsninger på dette)

iPhone app knappe konvensjoner

Ingen av barene er påkrevet i alle applikasjoner. Men hvis de brukes, bør konvensjonene følges da de har noen forventninger til innholdstype og funksjonstype knyttet til seg.

Statusbar

  • Viser informasjon om iphonen selv, som signalstyrke, nettverksforbindelse og batteri
  • Ligger øvert på skjermen
  • Tenk over om brukeren kan komme til å forlate aplikasjonen for å sjekke batteri for eksempel dersom du ikke viser statusbaren i din applikasjon
  • Statusbar og Toolbar og navigasjonsbar kan fades ut etter noen få sekunder, og bringes tilbake med et enkelt tap på skjermen
  • Du kan velge å ta bort nettverksforbindelse, men det er ikke lurt hvis din app bruker nettverk
  • Du kan velge farge, grå (default) eller sort. Velg en farge og gjennomsiktighet som står i stil med resten av navbarene.

Navigasjons bar

  • Ligger øverst på skjermen, under Statusbaren
  • Viser vanligvis tittel på gjeldende visning, midtstilt i midten
  • Kan inneholde knapper som er relatert til eksisterende innhold
  • Navigerer mellom ulike visninger i applikasjonen (Tilbake knapp merket tittel på den forrige visningen)
  • Styre elementer i en visning (Eksempel: Lagre eller Avbryt)
  • Kan ha en knapp til høyre og en til venstre
  • Hvis du ikke trenger tilbake knapp, kan det legges en annen knapp til venstre
  • velg farge blå (default) eller svart og gjennomsiktighet i samsvar med de andre barene

Tabs vs. Toolbar

  • Treff område bør være minst 44×44 pixler
  • Fem eller færre knapper i bredden
  • Ikke bland mellom ikoner med og uten rammer
  • Velg farge og gjennomsiktighet, eller velg mellom to standarder, blå (default) eller sort. Gjennomsiktighet gir inntrykk av et større synlig område, spesielt i landskaps modus
  • Vær konsekvent i stilbruken, ikke bland mellom ulike bakgrunner på ulike navigasjonsbarer
  • En tab bar skal aldri brukes som en toolbar og en toolbar skal aldri brukes som en tab bar

TABS

  • Bytte mellom ulike operasjoner
  • Ulike perspektiver av samme datautvalg, eller ulike oppgaver relatert til den generelle applikasjonen
  • Bør være mulig å få tilgang til fra alle steder i applikasjonen
  • Ligger i bunn av skjermen
  • Eksempel: klokke applikasjon; Tab bar med verdens klokke, alarm, stoppeklokke og timeglass
  • Viser hvilken av tabene en er på ved å utheve den
  • Har du flere enn fem, blir det en mer knapp som viser en liste over de resterende knappene. her kan det legges en edit knapp hvor brukeren kan velge selv hvilke tabs som skal være synlige i tab baren
  • Det kan legges et merke på en tab for eksempel for å vise antall nye meldinger med en rød sirkel med et tall inni

TOOLBAR

  • Flere handlinger i samme kontekst
  • Knapper som gjør handlinger relatert til objekter i gjeldende visning
  • Ligger også i bunn av skjermen
  • Eksempel: ser på en epost melding; Toolbar med slette, svare, flytte melding, sjekke mail, skrive ny mail

Referanse; Apples iphone Human interface Guidelines

Mobilversjon og applikasjoner

I går var jeg på frokostseminar i regi av Making waves hvor tema var mobil. Nedenfor presenterer jeg noe av det som kom frem kombinert med egne høyst subjektive teorier rundt temaet.

Mobil, ipad, pc, papir…

Iphone, facebook, twitter, mobil, lesebrett og iphone er vår nye medie-hverdag. Utviklingen skjer raskt:

  • Rask teknologisk utvikling (ipad, lesebrett, iphone…)
  • Nye konkurranseområder
  • nye brukervaner (mobil) og
  • kanalflytt (facebook, twitter, google)

Hvordan møte brukerne på mobil? Utfordringen er å være tilstede på de plattformene de er på.

Trodde du de som bruker de teknologiske nyvinningene er stort sett unge og raske brukere? Da tar du feil. Making waves gjorde en undersøkelse hvor de fant at de fleste som har fancy nok mobiler til å bruke masse internett, applikasjoner osv på mobilen er eldre med høy inntekt som gjerne får dekket både utstyr og mobilregningen via jobben. Men de unge understreker at dersom de hadde hatt råd til iphone, hadde de helt sikkert brukt det mer!


Mobil web

Innledende når mobil ble et tema var løsningen å strippe nettavisen ned til en mye slankere versjon med bare nyheter og tilpasse bredden til en mobil skjerm, bruke minimalt med bilder og presentere en noe kjedelig nettside med nyhetskategorier og de siste nyhetene.

Men nettaviser som vi kjenner de i dag er så mye mer enn bare en liste med siste nytt. Nettsider blir mer og mer applikasjoner. På lokalavisene i edda har vi artikkelkommentarer, markedsplass, lokalguide, prisguide, bildegallerier, video, værmelding, spillerbørs, facebook linker, spørreundersøkelser, buskerudbenken, blogger, brukergenerert innhold og skattesøk for å nevne noe.

En mantra når en snakker om mobil har vert kontekst, kontekst, kontekst. Opera har gjort noen undersøkelser hvor de kategoriserte mobilbruken etter type bruk og sammenlignet dette med type bruk på pc. De fant at folk gjør de samme tingene på den mobile online varianten som de gjorde på pc. Er en mye på facebook på pc, ja da er en mye på facebook på mobilen også.

Grunnen til at mange mobilversjoner ikke er mye brukt tror jeg er fordi sitene blir strippet for mye, det vil si at en fjerner det innholdet som brukerne er ute etter.

At man gjør andre ting på den mobile weben enn på pc er en myte.

  • Bruk samme brand
  • Krysspubliser og optimaliser, ikke lag ulike varianter
  • Følg standarder
  • En mobil web holder til på bedriftens mobile url
  • ikke stripp bort innholdet fra mobilversjonen
  • Den primære kommunikasjonskanalen på mobil er på den mobile urlen, ikke på applikasjonen

Mobile applikasjoner

Den mobile applikasjonen - den som kan lastes ned via android market eller iphone er derimot mer kontekst og person sensitiv. Den kan fungere uten nett og løser en spesifikk oppgave. Der den mobile weben er en forlengelse av produktet, brukes applikasjonen til å forsterke kjerneproduktet.

  • En applikasjon skal løse en spesifikk oppgave og ikke være en portal
  • Tips: bruk web apps til å lage mock-ups til mobil applikasjoner
  • Følg design guidelines
  • Lag applikasjoner som forsterker kjerneproduktet. For eksempel kan en applikasjon til prisguide brukes til å scanne QR kode eller strekkode på et produkt i en fysisk butikk og få opp priser, omtaler og kart til nærmeste butikk med lavere pris på samme produkt, mens den mobile web-versjonen presenterer den vanlige websiden tilpasset mobilformatet og med samme brand
  • Brukere går igjennom faser når de laster ned applikasjoner som kan minne om fasene en har på en nettbutikk: kjennskap-vurdering-valg-bekreftelse-bruk-revurdering

Android market

Anbefalte Android apps på amobils diskusjonsforum