Monthly Archives: May 2015

Design for mobil (del 2)

Tekst: Darija S. Hauge, Illustrasjoner: freepik.com

John Eivind Hallén
John Eivind Hallén

Shortcut var tidlig ute med design for mobil. De lagde den første virkelig nyttige appen for meg på den tiden – Ruters reise-app. John Eivind, tidligere designer, nå daglig leder i Shortcut forteller hva det er viktig å huske på når man designer apper. 

– Når velger kundene å lage en app framfor en mobil-vennlig webside? 
– Det handler om innholdet og hva du kan gjøre med det. For eksempel har ingen lyst å ha informasjon om Shortcut som app på sin telefon. Da er det mest naturlig at det er en webside. Men det å kunne sjekke rutetider på buss og trikk på telefonen sin,  det er noe man ønsker. Forskjellen er at det ene er statisk kataloginformasjon, men den andre er et verktøy du kan gjøre noe med. Og verktøy ønsker man ha på telefonen sin. 
 

– Det koster mye å lage en app, så det er en vurdering vi tar sammen med våre kunder – hvor de ønsker å være. Ruter Reise finnes på Windows, Android og iOS. Mens vi har laget andre apper som ikke finnes på Windows, og til og med noen som finnes bare på iOS.

– Går mesteparten av tiden på utviklingen?
– Ja, men det er ganske stor designforskjell også. Vi designer unike apper for hver platform. Man har forskjellige vaner når man bruker forskjellige telefoner. På Android er det vanlig å ha hamburger-meny oppe til venstre. Mens på iOS skal man skal helst ikke ha en hamburger-meny, men man skal ha et sort felt nederst med ikoner. Det er en del små forskjeller i hvordan man søker, henter opp kart, sender mail, osv.  På iOS ligger søk-ikonet ofte i menyen eller du drar ned en søkemeny, mens på Android har den alltid vært plasser i hovedmenyen. Hvis du gjør det på Android-måten på iOS, vil iOS eiere synes at det ser dumt ut, og hvis du gjør det på iOS-måten på Android, så vil alle Android-brukere være sinte og si «æsj, dette er bare en iPhone-app». Og på Windows er det helt annerledes. Der har man ikke menyer på den måten i det hele tatt, der har man forside med panoramabilde hvor du kan bla mellom forskjellige hovedsiter og fordype deg i hver av dem. Så det er veldig viktig, at vi designer dette forskjellig.
 
– Hva bruker man tid på ved design av en app?
– Det tar minimum tre månder å designe en app. 3-6 mnd er ganske vanlig, og også opp til et år. Veldig mye av jobben man gjør som designer, er å finne ut hvilket innhold som skal være med i appen, og like viktig, hvilket innhold som ikke skal være med i appen. En tommelfingerregel at jo mindre en app gjør, jo bedre gjør den det. Det er derfor veldig mange firmaer har flere apper – Facebook, Google, osv. Det fungerer ikke så godt å plassere alt i én app. Så målet vårt er at en app skal gjøre få ting så vi spør kunden hva som er det aller viktigste. Også spør vi brukerne – målgruppen for appen: Hvis du kunne velge en av de to funksjonene, hva hadde du valgt? Så jobber vi ganske mye for å finne ut hvilket innhold kan vi ta vekk.
 
– Hvor finner dere testbrukere? 
– Det varierer. Vi bruker et selskap for testing. Vi har også vår egen vennekrets som vi har kontakt med gjennom sosiale medier. Det finnes veldig få eiere av Windows-telefon, så der har vi egen gruppe på Facebook som vi bruker. Med iPhone-eiere, kan vi bare gå ut på gata og spørre folk. Eller kunden spør sine kontakter. Så vi tester både for å finne innholdet og designet. Vi tester skisser, men det mest spennende testene er når vi har ting i produksjon. 
– La oss si vi bruker en måned på å få den første skissen ferdig og få kartlagt hva den skal inneholde og hvordan den skal se ut. Og så bruker et par månder til på noe som kan testes live. da er det ennå ikke godt nok integrert med de andre systemene og bugs er ennå ikke fikset og det gjenstår mye arbeid før appen er lanserbar. 
 
mobile apps– Hvilke programmer bruker dere for design?
– Sketch er det vi bruker. Litt Illustrator innimellom fordi vi bearbeider logoer og sånt. Vi er early adapters, og vi gikk 100 prosent over til Sketch for halvannet år siden. Vi ønsket et designprogram som gjorde det enklere å eksportere grafikk i flere formater. Spesielt Android krever ganske mange størrelser på grafikken. Og da er det smart å bruke vektorgrafikk og ikke pikselgrafikk. Photoshop er bare piksler. 
Sketch er det første profesionelle designverktøyet som er laget for å jobbe digitalt så, det er laget for at man skal kunne eksportere til alle Android- og iOS- formater også videre. Du kan bare dra inn en pdf eller jpg i Sketch og så lager den vektorgrafikk ut av det. Det koster penger, men i forhold til Photoshop, er det nesten gratis. 
I Shortcut har både utviklere og designere Sketch. Vi elsker det. Vi har ikke sett oss tilbake. Vi er ferdig med Photoshop. Det går ikke an å designe noe i Sketch som man ikke kan gjøre til css og html-kode, så alt du designer kan du bare markere, høyreklikke og eksportere til css – du får fargekoder, boarders, radius, typografi.
 
– Hva bruker dere for å vise flyten?
– Det er en webtjeneste vi bruker som er fantastisk bra og gratis med fem prototyper – invisioapp. Vi bruker det til å presentere både for kunder og våre utviklere. 
 
– Nå har du vært noen år i app-businessen. Du ser sikkert forskjell på hva man forventet fra en app før og hva man forventer nå?
– Da vi begynte, var vi de første som lagde en app. Det var Ruter-appen. Det var kult med apper, men ikke nødvendig. Vi har alltid jobbet med ganske store kunder, men det var aldri markedsavdelingen eller produktavdelingen som var interessert, det var gjerne en person som var ildsjel og så klarte den personen å mase til seg budsjett. Men i dag er apper en viktig del av strategien til alle selskap vi jobber med. Mange av appene vi har lager brukes mye oftere enn web. For eksempel bruker man Ruter Reise oftere enn ruter.no. Vi har også laget mobilbanker, og de forteller oss at 70 prosent av alle banktransaksjoner og banktjenester gjøres gjennom appen og ikke gjennom weben. Så i dag er jo appene blitt en veldig viktig del av det kundene jobber med. I mange tilfeller ble appen hele kunden: Matprat for eksempel, som var en webside, er nesten en app nå. Før snakket vi med 2-3 personer i et selskap, i dag snakker vi med 10-15 personer, og det er mye større og mer omfattende prossesser. Det er ikke like  smidig som det var før, men fortsatt er det ikke i nærheten av de svære enterprise-løsningene, så det er kult for oss. 
 
– Er det mye vedlikehold for en app?
– Ja det er det. Vi har vedlikeholdsavtaler som vi krever at kunden skal gå med på, slik at vi får ivaretatt hardware-oppdateringer, nye konvensjoner, nye ønsker man har. Det er kjempeviktig for oss å ha dette avtalefestet. At vi forbedrer appen hele tiden. I det det ser dårlig ut, er alle pengene tapt. 
 
– Har du noen råd til et lite team med hobby-app-skapere? 
– Det viktigste er å skope ned, fordi det er veldig tidskrevende å lage en app. Det er svært sjelden at det er god økonomi i den andre enden. Hvis du som privatperson lager en app som gjør noe kult, for eksempel blander værmelding med saldoen fra banken din, så er sjansen liten for mange nok mennesker vil kjøpe den appen til at du tjener penger på det. De aller fleste som lager egne apper tjener ikke penger på det. Vi hører bare gullhistoriene hvor folk ble rike og berømte, som Wordfeude og Candycrush. Jo mindre du investerer av tid, jo tryggere er det. Jo mindre en app er, jo bedre er appen også, så dette er win-win. – Det er det ene. Og det andre er at du må tenke på hvilken kommersiell aktør som har interesse av appen du lage, og snakke med dem. Kanskje de har lyst å betale for utviklingen? Det tar så lang tid å lage kvalitet.  
 
–Hvilke trender kommer i mobil-verdenen?
– Jeg ser at i framtiden blir app helt selfølgelig, nesten uansett hva du gjør. Du får internett på kjøleskapet, I oppvaskmaskinen, på tv, døra, i bilen. Internett over alt. Alle ting kommer til å ha internett i fremtiden. Og det som er helt sikkert er at når alle ting skal være på internett, ønsker vi ikke å ha en fargerik lysende LCD-skjerm på alt vi kjøper. På lamper, sofa, bilder, kjøleskap og verandadør. Derfor kommer displayet til å være en app som snakker trådløst. Når du skal  endre innstillinger på kjøleskapet ditt eller skifte ut det rullerende bildet du har på veggen, så kommer det til å være  en app som gjør det. Sett med våre øyne: Uansett hva du gjør digital, vil en app være verktøyet du bruker for å administrere det.

Design for mobil (del 1)

Tekst: Darija S. Hauge, Illustrasjoner: freepik.com

responsive design

Artikkelen handler om design med tanke på mobilbrukere. Jeg snakker med to spesialister i bransjen og finner ut blant annet at: 

  • Det som bare apper kunne gjøre før – kan websider gjøre nå:
    Push-varsler, vibrasjon, bevegelsesdetektor.
  • Det er umulig å lage en kvalitetsapp bare på entuasiasme og tjene penger på den.
  • Det er trend med spesialiserte apper som gjør én oppgave
  • Er du teknisk og vil du forbedre en eksisterende webside – sjekk Viewport, Mobile Emulator og Apache Cordova.
  • Designer du for web? Glem dyr Photoshop! Prøv Sketch! (kun for Mac brukere)

Dette er del 1 av 2.

Johannes Brodwall
Johannes Brodwall

Johannes er Principal Engineer i Sopra Steria og ble nylig nominert som Nordic Startup Award Development Hero. Han snakker fra teknisk og forretningsmessig side.

– Design av apper eller av mobilvennlige nettsider?
– Det viktige er å ha løsninger som fungerer bra på mobil. Og forskjellige virksomheter vil velge forskjellige innfallsvinkler. For et par år siden var nesten alt som fungerte godt apper. Ulempen med det er at du må designe én app for Android og en for iOS – og hvis man ønsker det – en Windows-app også. Man starter praktisk talt på nytt med appen for hver plattform.

– Hvis du skal nå alle brukere, må du lage web-side for pc, en mobil web-side, Windows -app, Android-app og iOS-app.
– Alternativet til å lage en app til hver platform, er å lage en web side som pakkes inn i en applikasjon. Det finnes et open-source rammeverk som heter Apache Cordova, som begynner å bli veldig bra. Da får du det best fra to verdener. Ulempen er at en slik såkalt «hybrid» applikasjon ikke vil føles like naturlig som en skreddersydd app for iPhone eller Android.

– Hva er grunnen til å velge separate tilpassede apper for hver platform kontra å lage en webside som fungerer for alle?
– For et år siden fikk du ikke tilgang til kamera, lokasjon eller akserellometer (at mobiltelefonen oppdager hvordan du holder den), vibrasjonsfunksjon, å sende varsler eller å kunne installere om ikon på  skjermen hvis du jobba lager mobil webside . Det var for ett år siden, altså, men nå er det mulig å gjøre alt dette med mobile websider.

Du kan ha en mobilside i dag som ber brukeren om tilgang til kameraet på mobiltelefonen. Og det siste som kom i Chrome var web-push-varsler. Hvis du f. eks. har installert Facebook på mobiltelefonen din, og det er noen som sender deg melding, så sier mobiltelefonen pling og du får et varsel.

– Nå har du muligheten for å gå til en webside som ber om tillatelse til å gjøre dette slik at websiden sender deg meldinger. Også dersom nettleseren ikke er åpen og du ikke har installert noe spesielt.
– Du kan  for eksempel abonnere på et tema i en avis og så får du varsler på mobilen din om at det har kommer en ny artikkel. Før måtte du å ha en app, nå trenger du ikke det lenger. Det som er kult med dende typen teknologi er at den samme websiden sender deg varsel både på mobile og på pc-en din. Kamera og lokasjon er eksempler på ting som har vært tilgjengelig lenge. Noen av de mer overraskende tingene som går an på mobile websider er vibrasjon og bevegelsesdeteksjon. Alt dette er tilgjengelig via JavaScript.

– Hvordan skal man designe websider som er tilpasset mobil?
– Det er to spennende scenarier. Det ene er hvis du har en eksisterende web-side som skal fungere på mobil, og det andre er hvis du skal lage en ny.

Det er noen enkle ting du kan gjøre for å forbedre websiden uten at du må gjøre ting helt på nytt. For det første, fontstørrelsen på mobile websider blir ofte feil fordi du ikke har sagt at du skal støtte mobile sider. Det er en html-metatag som heter Viewport, som du legger til på siden din.

For det andre må du teste på mange forskjellige mobiltelefoner og se hvordan det ser ut. Det høres ganske klønete ut, men i Google Chrome og i mange andre nettlesere finnes det noe som heter mobile web emulator. Klikker du på et lite ikon av mobiltelefon i Developer Console i Chrome, så ser du websiden slik den vil se ut i en mobiltelefon, og du kan velge hvilken model du skal se. Det vises  ikke perfekt men det er veldig mye bedre enn å gå i blinde. Og så må du naturligvis se på websiden din hvordan den ville se ut hvis den har cirka 300 pixler i bredden,  for det er den typiske størrelsen på en mobiltelefon.

– Hva er de vanligste problemene som bør fikses?
– Det vanligste problemet er menyer, spesielt menyer på høyre eller venstre side. Du bør skjule dynamiske menyer når skjermbredden er liten.

Det finnes gode oppskrifter på nettet for hvordan du gjør det og det er noe du må gjøre bare én gang. En annen ting som er veldig viktig er å ikke bruke effekter som skjer når du holder musen over et element, såkalt hover effekter. For eksempel en popup-meny. Du har ikke det samme begrepet på en touch-skjerm. Du må finne en annen løsning.

– Hvordan lager man gode websider for mobil fra bunnen?
– FINN.no er et godt eksempel på en spennende strategi rundt mobile applikasjoner. Hvis du går til www.finn.no på mobilen din så blir du omdirigert til m.finn.no. Det er en separat webside som er laget med et tanke på mobiltelefon. Den websiden kan du også se på desktopen din, men mobilsiden er enklere strukturert enn desktopsiden. Så de har valgt å ha separate websider for mobil og desktop. Hvis du har kapasitet til det, så kan det gi en veldig god mobilopplevelse.

– Hva er trendene på app-fronten?
– FINN.no har flere apper: Selve finn.no-appen og FINN-torget-appen – en spesialisert app for ett formål. Ruter gjør det samme med Ruter bilett og Ruter reise. Det å ha flere små apper er en trend vi ser mer av. Det gjør at hver av appene kan bli enklere og du trenger ikke å ha et komplisert navigeringssystem i en stor app. Et annen eksempel på dette er Audi. Når jeg søker etter Audi på Google Play finner jeg 9 offisielle apper. Så biler har kommet langt på det området. Selv en økonomimodell som Skoda er har en serie apper.

– Hva skjer om fem år?
– Det er såpass store endringer at det er vanskelig å spå. Men du kan si at om fem år vil de fleste systemene man i dag går inn i via web på desktop bli aksessert i minst like stor grad fra mobiltelefon. I hvertfall de som er rettet mot forbrukere. Hvis du har en forbrukerwebside, så må du bli klar for at det blir mobile brukere i økende grad som vil være der. Det betyr ikke at du skal ignorere de brukere som benytter pc, men det er de mobile brukerne som kommer til å gi volumet. Antageligvis kommer vi også til å se at applikasjoner blir mindre og mer spesialiserte på den måten vi så med FINN.no torget og FINN.no, og Ruter bilett og Ruter reise.

Les mer i del 2.