Upload
anna-dahlstroem
View
115
Download
1
Embed Size (px)
DESCRIPTION
Slides från morgonseminarie hos Bouvet i Malmö, 29 augusti 2012
Citation preview
Anna Dahlströmco-founder byflock
www.annadahlstrom.com annadahlstrom
Design för mobil mångfaldBouvet Syd, Malmö 30:e augusti 2012
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
http://desktopwallpaper-s.com/19-Computers/-/Future/
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)
www.flickr.com/photos/brandoncwarren/4236278556
POCKETS STATISTIK FÖR DESKTOP
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
www.flickr.com/photos/brandoncwarren/4236278556
POCKETS STATISTIK FÖR iPHONE
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
www.flickr.com/photos/brandoncwarren/4236278556
POCKETS STATISTIK FÖR iPAD
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
HÖGSTA TOPPARNA
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
•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
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
http://desktopwallpaper-s.com/19-Computers/-/Future/
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
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
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
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
www.flickr.com/photos/jojoneil/6359536591
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
www.flickr.com/photos/jojoneil/6359536591
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)
www.flickr.com/photos/jojoneil/6359536591
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
www.flickr.com/photos/thecaucas/2597813380
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.
www.flickr.com/photos/thecaucas/2597813380
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
www.flickr.com/photos/thecaucas/2597813380
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
www.flickr.com/photos/thecaucas/2597813380
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
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
www.flickr.com/photos/st3f4n/4387291247
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
www.flickr.com/photos/st3f4n/4387291247
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/
www.flickr.com/photos/st3f4n/4387291247
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
TACK!FRÅGOR?
annadahlstromannadahlstrom
www.annadahlstrom.com