Bouvet - Design för mobilt mångfald

Anna Dahlströmco-founder byflock

www.annadahlstrom.com annadahlstrom

Design för mobil mångfaldBouvet Syd, Malmö 30:e augusti 2012

http://www.annadahlstrom.co

http://www.annadahlstrom.co

Hej!IA & UX DESIGNER | BOR I LONDON | FÖRKÄRLEK FÖR CITAT & UTMANINGAR | FRILANSAR & JOBBAR PÅ EN STARTUPDet här är jag på mitt favoritställe, Knäbäckshusen

Photo curtesy of my sister

http://desktopwallpaper-s.com/19-Computers/-/Future/



MOBIL ENHET: ett föremål gjort för ett specifikt ändamål eller syfte & som kan kopplas upp på nätet




FOKUS FÖR IDAGSMARTPHONES | DESKTOP ( SURFPLATTOR) - iOS & ANDROID

www.flickr.com/photos/marfis75/2939337382

AGENDA1. FÖRSTÅELSE FÖR ANVÄNDNINGS- & BETEENDEMÖNSTER AV MOBILA ENHETER2. RIKTLINJER FÖR VAL AV MOBIL SITE vs. RESPONSIVE SITE vs. EN APP3. TITTA NÄRMARE PÅ RESPONSIVE DESIGN4.UX PRINCIPER FÖR APPAR & OLIKA PLATFORMAR



www.flickr.com/photos/publicenergy/1846375599

FÖRST UT...ANVÄNDNINGS & BETEENDE-MÖNSTER



www.flickr.com/photos/lori_greig/2202727502

29 JUNI 2007DEN FÖRSTA iPHONEN



www.flickr.com/photos/scobleizer/4317207778

03 APRIL 2010DEN FÖRSTA iPADEN



www.flickr.com/photos/jamescridland/613445810

År 2011 använde mer än en tredjedel av jordens 7 miljarder invånare internet. En ökning med 17% sedan 2010.** Source: www.itu.int/ITU-D/ict/facts/2011/index.htmll





www.flickr.com/photos/nasamarshall/6289116940

Vid slutet av 2012 kommer antalet internet-uppkopplade mobila enheter att överträffa antalet personer på jorden & år 2016 kommer det finnas 1.4 enheter per invånare.** Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html





www.flickr.com/photos/jsolomon/612237912

Den genomsnittlige svensken använder internet 2 timmar & 13 minuter om dagen & 2 av 3 använder internet på mobiltelefonen.** Source; www.internetstatistik.se/artiklar/2-timmar-och-13-minuter-om-dagenl





www.flickr.com/photos/tocaboca/5523596357

Hälften av alla treåringar i Sverige använder internet.** Source; www.iis.se/docs/SOI2011-en.pdf





www.flickr.com/photos/jorgeq82/4732700819

I genomsnitt tittar vi på vår telefon 150 gånger om dagen.** Source: www.textually.org/textually/archives/2012/02/030229.htm





www.flickr.com/photos/exlibris/2552107635

40% erkänner att de använder sin telefon på toaletten* Source: http://www.lukew.com/ff/entry.asp?1500





www.flickr.com/photos/yahnyahn/2996454839

” The best computer is the one you have with you when you want something done. “- JACOB NIELSEN

MOBILA ENHETER ANVÄNDS ÖVERALLT & NÄRSOMHELST



www.flickr.com/photos/25228175@N08/5127055942

20% av alla emails öppnas på mobila enheter.** Source: www.campaignmonitor.com/guides/mobile





ANVÄNDAR-MÖNSTER FÖR

MOBILA ENHETER

www.flickr.com/photos/brandoncwarren/4236278556

“...as devices become more mobile, it’s not only changing where we read, but when. ”- POCKET (formerly Read it Later)




POCKETS STATISTIK FÖR DESKTOP

Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read






POCKETS STATISTIK FÖR iPHONE







POCKETS STATISTIK FÖR iPAD






HÖGSTA TOPPARNA


•När vi går upp

•På väg eller just kommit till jobbet

•På väg hem

•Efter kvällsmaten



www.flickr.com/photos/yahnyahn/2996453841/in/photostream

“ MOBILA ANVÄNDARE HAR BRÅTTOM & ÄR ALLTID PÅ VÄG

INTE SANT. DETTA ÄR EN MYT

”



www.flickr.com/photos/s8an/7303973840

EN STOR DEL AV ANVÄNDANDET SKER NÄR VI HAR TID ATT DÖDAVÄNTAR, RESER, SOFTAR



www.flickr.com/photos/edduddiee/4307943164

SAMMA UPPGIFTER UTFÖRS ALLTMER PÅ SMARTPHONES SOM PÅ DATORNJU MER OPTIMERADE MOBILA ENHETER SAMT LÖSNINGAR BLIR DESTO MER KOMMER DETTA BETEENDE ÖKA



www.flickr.com/photos/stuckincustoms/440157748

3 köp görs varje sekund genom eBays mobila lösningarSource: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods



http://www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods


2. DETTA HAR...BETYDELSE FÖR UX & DESIGN

http://www.flickr.com/photos/eyesore9/3206408088/



www.flickr.com/photos/possan/5401428913

BEGRÄNSNINGAR MED MOBILA ENHETER BRUKADE MEDFÖRA

BEGRÄNSAT ANVÄNDANDET.E.X FOKUS VAR PÅ SÖKNINGAR, ÖPPETTIDER, MENYER,

RECENSIONER




VILKET I SIG RESULTERADE I BEGRÄNSADE MOBILA SITERMINDRE INNEHÅLL & LÄNKAR TILLBAKA TILL WEBBVERSIONEN

HELA HÄRLIGHETEN

EN LITEN DEL

EN LITEN DEL



www.flickr.com/photos/demandaj/7287174776

MEN... FOLK KLICKAR ‘WEBBVERSION’ LÄNKAR& DET FINNS DET EN ANLEDNING TILL

http://www.flickr.com/photos/demandaj/7287174776

http://www.flickr.com/photos/demandaj/7287174776

www.flickr.com/photos/joachim_s_mueller/7110473339

EN ENHETLIG & KONTINUERLIG

UPPLEVELSE OAVSETT ENHETDENNA FÖRVÄNTNING & ÖNSKAN

KOMMER ENDAST BLI STARKARE



http://www.flickr.com/photos/young_einstein/74097753/

3. EN NÄRMARE TITT PÅ... SPECIFIKA MOBILA SITER vs. RESPONSIVE DESIGN vs. APPAR



www.flickr.com/photos/st3f4n/3476036180

PRIMÄRA GRUNDER FÖR EN SPECIFIK MOBIL SITE• BEHÖVS FÖR MÅLGRUPPEN

• TEKNISKA BEGRÄNSNINGAR MED CMS



http://www.flickr.com/photos/edenandjosh/2892956576/

BÄST ATT UNDVIKA

OM DET GÅRLÄTT ATT BRÄNNA

FINGRARNA



www.flickr.com/photos/lastquest/1472794031

VAFFÖDÅDÅ?” Today's popular devices are

not tomorrow's so building something which works on any

device is better than building something which works on

today's devices “- KOMBINERAD VISDOM FRÅN @ONEXTRAPIXEL &

@TRENTWALTON



www.flickr.com/photos/ericconstantineau/5618576278

ALTERNATIVET ÄR RÖRIGT & KOSTSAMT

UNDERHÅLLNING AV OLIKA VERSIONER

SVÅRT FÖR ANVÄNDARE ATT HITTA DET DE SÖKER



www.flickr.com/photos/jmtimages/2883279193

BIBEHÅLL HUVUD-INNEHÅLLET MEN OPTIMERA FÖR MOBILA ENHETER & TOUCHGÄLLER PRESENTATION & ANVÄNDNING AV ENHETENS INBYGGDA FUNKTIONALITET



www.flickr.com/photos/andwhynot/2946734025

•MEST DIREKT TRAFIK POTENTIELLT ARUGUMENT FÖR EN APP

•MEST VIA DELADE LÄNKAR EN APP RÄCKER INTE. MOBILOPTIMERAD SITE BEHÖVS.

•EN BIT AV BÅDATÄNK DÅ PÅ ATT....

OPTIMERAD SITE vs. EN APP?ANVÄND WEBBANALYTICS SOM EN FÖRSTA GUIDE



www.flickr.com/photos/aidanmorgan/2327622517

• SYFTET & VISION (ANVÄNDAR & FÖRETAGETS)

• OM TILLGÅNG TILL SPECIFIK ENHETSFUNKTIONALITET KRÄVS

• OM OFFLINE ANVÄNDNING ÄR ETT KRAV

• & SJÄLVKLART VILKEN BUDGET SOM FINNS

GÖRA EN APP ELLER INTE BEROR PÅ...



OLIKA TYPER AV APPARDE TVÅ STÖRSTA ÄRNATIVE (t ex. Instagram)

• DEN MEST OPTIMERADE ANVÄNDARUPPLEVELSEN• TILLGÅNG TILL ENHETSFUNKTIONALITET & APIs• MEN KRÄVER PLATFORMSSPECIFIK KODBAS

HYBRID (t ex Facebook)

• ANVÄNDER HTML5 & JAVASRIPT• EN “WRAPPER” SOM GER TILLGÅNG TILL NATIVE FUNKTIONALITET• FÄRRE VERSIONER ATT HÅLLA UPPDATERADE• KAN VARA TIDSKRÄVANDE ATT SKAPA APPLIKNANDE FUNKTIONALITET• MÅSTE HA APPLIKNANDE FUNKTIONALITET

www.flickr.com/photos/cristiano_betta/2909483129

” Money spent developing a pretty but limited iPhone app only benefits...the few, but money spent on the website UI would have benefitted everyone “- Gary Marshall on ‘The app trap’ in .net Magaizine



http://www.flickr.com/photos/paperpariah/4301471586/

4. DET FINNS NÅGOT SOM HETER... RESPONSIVE DESIGN



www.flickr.com/photos/adactio/5818096043

“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ”- SMASHING MAGAZINE





http://foundation.zurb.com/docs/layout.php

GRID & BREAK POINTS• ANVÄND SOM BAS

FÖR SIDLAYOUTS

• GUIDE FÖR MODULSTORLEKAR & VARIATIONER

• FIXED ELLER FLUID

• DEFINERAR HUR INNEHÅLLET KOMMER BETE SIG PÅ OLIKA ENHETER



DEFINERA DIN CONTENT STACKING STRATEGIFÖR OLIKA ENHETER SAMT ORIENTERING

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & surfplattor

Smartphone

“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON

www.flickr.com/photos/cedrouille/3312593086

MOBILE FIRST VS. DESKTOP FIRST•BÖRJA SMÅTT ELLER STORT

DET SOM FUNGERAR BÄST FÖR DIG

•FOKUS ÄR PÅ INNEHÅLLET, HUR DETTA PRIORITERAS SAMT VISAS PÅ OLIKA ENHETER



WEBBEN ÄR FYLLD MED EXEMPELMEN VAR INTE RÄDD FÖR ATT UTMANA ELLER KOMMA UPP MED NÅGOT... BÄTTRE

http://mediaqueri.es/popular/



www.flickr.com/photos/tim_norris/2789759648

TÄNK PÅ NAVIGERINGOLIKA SÄTT ATT OPTIMERA SAMT FÖR- & NACKDELAR



LÄSTIPS

‘RESPONSIVE NAVIGATION PATTERNS’av Brad Frost.Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns



GLÖM INTE BORT EMAIL20% ÖPPNAS PÅ MOBILTELEFONER

www.flickr.com/photos/awiederhoeft/3348255014



www.flickr.com/photos/dopey/123646856



http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/

5. MEN VAD GÄLLER NÄR MAN SKA GÖRA... EN APP?



www.flickr.com/photos/elwillo/5247084642

” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “- Apps on tap, The Economist Oct 8th 2011

APPAR ÄR FOKUSERADE & PERSONLIGA



www.flickr.com/photos/gadl/3570118243

VARJE PLATTFORM

ÄR ETT EGET LITET

SAMHÄLLESPECIFIKA UI

GUIDELINES SOM ANVÄNDARNA

ÄR VANA VID



www.flickr.com/photos/nrkbeta/3906687294/in/photostream

INTE SÅ ENKELT SOM BARA ANDROID ELLER iOSFRAGMENTERING MELLAN VERSIONER & BAKÅT-KOMPABILITET SKA HÅLLAS I ÅTANKE



FÖRDELNING AV AKTIVA ANDROID ENHETER

Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1

www.flickr.com/photos/blakespot/4773693893

http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1




EXEMPEL PÅ ADOPTION AV iOS 5.1

Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1

www.flickr.com/photos/blakespot/4773693893





HUVUDSKILLNADERNA MELLAN ATT DESIGNA FÖR ANDROID & iOS

iOSENHETLIG

ENHETLIGHET MELLAN VERSIONER & ENHETER

SNABB ADOPTION AV NYA VERSIONER

BACK KNAPP

INSTÄLLNINGSMENY ELLER 'MORE' FÖR ATT FÅ TILLGÅNG TILL APP INSTÄLLNINGAR & INFORMATION

ANDROIDFRAGMENTERAD

OLIKA MELLAN OLIKA VERSIONER & ENHETER

LÅNGSAMMARE IMPLEMENTERING & ADOPTION AV NYA VERSIONER

HANTERAS ANTINGEN MED SYSTEM BACK (TIDIGARE VERSIONER) ELLER BACK & UP KNAPPEN (SENASTE)

APP INSTÄLLNINGAR & INFORMATION FINNS I OPTIONS MENYN

Design

UI element & riktlinjer

Version adoption

Bakåt navigering

Inställningar etc.

www.flickr.com/photos/nrkbeta/3906687294/in/photostream



iPHONE RESURSERVÄLDOKUMENTERADE RIKTLINJER & INSPIRATION

http://www.androidpatterns.com/


ANDROID RESURSERMINDRE VÄLDOKUMENTERADE RIKTLINJER & INSPIRATION FÖR TIDIGARE VERSIONER

Source: http://developer.android.com/design/patterns/new-4-0.html

iOS NAVIGERINGKONSEKVENT MELLAN OLIKA VERSIONER

NAVIGATION BARMöjliggör navigering genom app hierarkin. Håller back knappen, titlelnsamt funktioner för att manipulera innehållet

BACKBör alltid ta användaren ett steg bakåt baserat på var de kom from samt vara deskriptiv.

TAB BARKan oftas anpassas. Håller huvudsektionerna av appen

‘MORE’Används till att ge tillgång till alla andra delar av appen samt de sektioner som inte fick plats i tab baren

Content area

MoreItemItemHome Item

iPhone 12:15 PM

APP NAMEMore Customise

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

Item

Item

Item

Item

Item

Item

Item

Item

MoreItemItemHome Item







Source: http://developer.android.com/design/patterns/new-4-0.html

ANDROID NAVIGERINGOLIKA MELLAN OLIKA VERSIONER. MED ICE CREAM SANDWICH:

NAVIGATION BARFör enheter som inte har hårdvara-knappear Håller 'Back', 'Home' och 'Recents'

ACTION BARHåller de viktigaste ‘action buttons’ för din app (3 + overflow menu)

UP VS. BACK‘Up’ tar användaren ett nivå upp i app strukturhierarkin.

‘Back’ används för att gå ett steg bakåt till var användaren kom ifrån




www.flickr.com/photos/jojoneil/6359536591

HUR GRIPER MAN NU AN

DET HÄR?JO, SOM ALLTID...



http://www.flickr.com/photos/kalexanderson/6302660289/

6.ÖVNING GER FÄRDIGHET

NÅGOT ATT SÄTTA TÄNDERNA I




SPECIFIK MOBIL SITE vs RESPONSIVE vs EN APPBEGRUNDA FÖLJANDE FIKTIVA SITUATION ELLER ANVÄND ETT EGET PROJECT:

Som en del av förberedelserna inför Eurovision Song Contest i Malmö 2013 i överväger fiktiva Malmö Stad att skapa en specifik sektion av sin site fokuserad på Eurovision Song Contest samt Öresundsregionen.

Vad rekommenderar du i förhållande till vad de borde satsa på, framför allt med tanke på mobila enheter, samt varför?

10 MINUTER

ÖVNING ETT




DESIGNA EN RESPONSIVE SITEFIKTIVA MALMÖ STAD VILL INKLUDERA FÖLJANDE:

• Fakta om länderna• Anknytning till regionen • Reseplanerare• Tips om vad som händer i regionen

DEL 1

Välj antingen smartphone eller desktop & gör en skiss på hur hemsidan ska se ut & vad den ska innehålla, samt hur innehållet ska prioriteras. Där du anser det relevant inkludera referenser till där bilder ska finnas.

DEL 2

Med hjälp av content stacking methodologin definera hur innehållet ska prioritieras & anpassas för desktop samt olika mobila enheter.

15 MINUTER

ÖVNING TVÅ

• Kalender • Social media feeds• Restaurang guide• Länkar till partner siter (SVT, Eurovision Song Contest)




DESIGNA EN APPFIKTIVA MALMÖ STAD VILL DESSUTOM GÖRA EN APP. BASERAT PÅ INNEHÅLLET AV SITEN & VAD DU KÄNNER TILL OM ÖRESUNDSREGIONEN, VAD TYCKER DU ATT MALMÖ STAD SKA INKLUDERA?

• Fakta om länderna• Anknytning till regionen • Reseplanerare• Tips om vad som händer i regionen

DEL 1

Definera huvudsektionerna av appen

DEL 2

Hur skulle du strukturera dessa sektioner i din app, både vad gäller iOS & Android. Fokusera på Tab bar elementen respektive Action bar elementen på Android & vad du skulle placera i ‘More’ respektive ‘Overflow’ menyn.

15 MINUTER

ÖVNING TRE

• Kalender • Social media feeds• Restaurang guide• Länkar till partner siter (SVT, Eurovision Song Contest)



http://www.flickr.com/photos/martinteschner/4569495912/

7. FÖR ATT... SUMMERA



www.flickr.com/photos/thecaucas/2597813380

ANVÄNDNINGS- & BETEENDE MÖNSTERFRAMTIDA ENHETERAntalet olika enheter kommer endast öka & vi vet inte vad som kommerANVÄNDS VARSOMHELST & NÄRSOMHELSTOch inte endast när vi är ute men alltmer när vi har dötid eller sitter i soffan. HUR VI ANVÄNDER DEMVad vi använder mobila enheter till blir mer & mer detsamma som på desktops




INVERKAN PÅ UX & DESIGN TÄNKANDEEN ENHETLIG & KONTINUERLIG UPPLEVELSEJu mer sofistikerade dessa enheter & det vi desingar blir desto mer kommer vi förvänta av de enheter vi använder.BIBEHÅLL HUVUDINNEHÅLLET MEN OPTIMERATänk på begränsningarna med mobilt men också på möjligheterna.




NÄR MAN SKA GÖRA VADSPECIFIK MOBIL SITEFörsök att undvika det om det gårRESPONSIVE DESIGNDen mest adaptiva & “framtidsäkra” lösningen just nu. Använd om det går men utmana hur innehållet presenteras.APPAnvänd om offline eller enhetsspecifik funktionalitet krävs. Basera besluten på syfte, mål och statistik




FÖR RESPONSIVEDEFINERA DIN GRID & BREAKPOINTSDetta är ryggraden för responsive design & hur innehållet kommer visas på olika enheter.GLÖM INTE BORT NAVIGERINGTänk på för & nackdelar samt olika metoderTESTA & SAMARBETADetta är ny mark & vi lär allihop hur bäst man löser de utmaningarna det medför. Jobba tvärs över discipliner




FÖR APPARTA HÄNSYN TILL PLATFORMS-SPECIFIKA RIKTLINJERHåller du dig till dem blir din app lättare att använda för din målgruppTÄNK PÅ BAKÅTKOMPABILITETBara för att en ny version är ute innebär inte att alla har den. Se till att du tar han om majoriteten av din målgruppTA HJÄLP AV INTERNETTill inspiration & lärdom men också för vad som kan göras ännu bättre.



OCH KOM IHÅG ATT DESIGNA FÖR MÅNGFALD...

www.flickr.com/photos/iscene/6713283751



www.flickr.com/photos/jolives/2889944573/

...INTE ENBART HANDLAR OM DE SMÅ SKÄRMARNA

UTAN OCKSÅ DE STORA

http://www.flickr.com/photos/jolives/2889944573/


www.flickr.com/photos/jolives/2889944573/

DET HANDLAR OM ATT TÄNKA FRAMÅT

PLANERA 5 ÅR FRAMÅT I TIDEN & MED “FUTURE PROOFING” I ÅTANKE



www.flickr.com/photos/oter/5090592214

UTMANA DET SOM FINNS IDAG & VAR KREATIVDET BEHÖVER INTE VARA DYRT & KOMPLICERAT



www.flickr.com/photos/stevendepolo/3378152784

TÄTARE & MER GIVANDE SAMARBETEMELLAN DISCIPLINER SAMT KUNDER



- Wilson Minor

“ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers. We’re the builders. What do we want that environment to feel like? What do we want to feel like.

http://www.flickr.com/photos/funch/4679422945/

”

HÅLL I ÅTANKE




PLATFORM RIKTLINJERhttp://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.htmlhttp://mrgan.tumblr.com/post/10492926111/labeling-the-back-buttonhttp://developer.android.com/design/index.html



http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html










http://developer.android.com/design/index.html





PATTERN LIBRARIEShttp://pttrns.com/http://mobile-patterns.com/http://www.patternsofdesign.co.uk/http://www.mobiledesignpatterngallery.com/mobile-patterns.phphttp://www.androidpatterns.com/http://androidpttrns.com/



http://pttrns.com/

http://pttrns.com/

http://mobile-patterns.com/

http://mobile-patterns.com/

http://www.patternsofdesign.co.uk/

http://www.patternsofdesign.co.uk/

http://www.mobiledesignpatterngallery.com/mobile-patterns.php








http://androidpttrns.com/

http://androidpttrns.com/


RESPONSIVE DESIGNhttp://mediaqueri.es/popular/http://www.alistapart.com/articles/responsive-web-design/http://designmodo.com/responsive-design-examples/http://jamus.co.uk/demos/rwd-demonstrations/http://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.gridsetapp.com/http://grid.mindplay.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php





http://www.alistapart.com/articles/responsive-web-design/




http://designmodo.com/responsive-design-examples/




http://jamus.co.uk/demos/rwd-demonstrations/




http://bradfrostweb.com/blog/web/responsive-nav-patterns/




http://www.gridsetapp.com

http://www.gridsetapp.com

http://grid.mindplay.dk

http://grid.mindplay.dk

http://goldengridsystem.com

http://goldengridsystem.com



TACK!FRÅGOR?

annadahlstromannadahlstrom

www.annadahlstrom.com

http://www.annadahlstrom.com

http://www.annadahlstrom.com

Bouvet - Design för mobilt mångfald

Design

Transcript of Bouvet - Design för mobilt mångfald