Kundlunch mobila-losningar

1,203 views
1,067 views

Published on

En presentation från vårat seminarie om Mobilitet.

Mobilen är det nya fönstret till internet. För varje dag som går ökar antalet surfande via mobilen, vilket innebär att kommunikation med dina besökare kommer hamna i en ny kontext som du måste ha kontroll över.

Att utveckla en strategi för mobilen handlar i första hand om att förstå kontexten, användarbeteendet, användarbehoven och kopplingen till era affärsmål.

Det handlar också om att ta till vara på de nya tekniker och möjligheter som är specifika för mobilen för att kunna anpassa presentationen och erbjuda nya tjänster.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,203
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kundlunch mobila-losningar

  1. 1. MOBILEN Det nya fönstret till Internet
  2. 2. Daniela  Baccarini   Utvecklingsansvarig     Vårdguiden.se   Vårdguiden.se   mobil  webb  
  3. 3. En  bakåtblick   Första  Vårdguiden.se  invigdes  i  februari  2002.  
  4. 4. TIDNING   ?   MOBIL  INGÅNG!   TELEFON   55%  läser   INTERNET   130  000  samtal   KAMPANJ   1,2  milj  besök   SOCIAL  MEDIA   E-­‐TJÄNST   3700  fans   160  000  konton  
  5. 5. Ökat  med  600%  på  e?  år   ca  1200  besök  per  dag   eller  3%  av  all  trafik     och  det  fortsä?er  öka…   Källa:  Google  Analy.cs  trafik  mot  Vårdguiden.se  
  6. 6. Övergripande  målsäningar   •  Ökad  Dllgänglighet   •  Stärka  varumärket   •  Ökad  användarny?a   •  Samarbete  mellan  kanalerna   •  Hi?a  nya  målgrupper  
  7. 7. En  sajt  behöver  anpassas  för  a  funka  bra  i  mobilen  
  8. 8. Strategier   •  Terminaloberoende   •  Samma  innehåll  mobil     som  webb   •  Stegvis  utveckling   •  Målgruppsanpassad  
  9. 9. Fortsa  utveckling   •  SMS-­‐tjänst   •  Tillgängliga  göra  fler  arDklar   •  Dela  med  sig-­‐funkDon   •  Lämna  omdöme  på  arDklar   •  Hälsotester   •  Logga  in  på  Mina  Vårdkontakter  
  10. 10. #0 MOBIL -EN LIVSSTIL
  11. 11. #1 FÖRSTÅ KONTEXTEN!
  12. 12. #2 VÄLJ RÄTT PLATFORM
  13. 13. #3 DESIGNA UPPLEVELSE FÖR MOBILEN!
  14. 14. #4 UTVECKLA EFTER STANDARDER
  15. 15. ARFÖ R V W EBB? M OBIL
  16. 16. TÅ RS TEN FÖ EX KONT
  17. 17. MILJÖN • Dynamiska miljöer • Miljö med brus och skiftande ljusförhållanden
  18. 18. ANVÄNDARBEHOVET • Lite information i taget • Målinriktad användning • Kortare användning och fler avbrott • Förenkla inmatning av text
  19. 19. BEGRÄNSNINGAR • Mindre skärm • Svårare att mata in information • Långsammare och dyrare uppkoppling till Internet • Mindre minne och lagrinsutrymme • Äldre modeller saknar stöd för JavaScript
  20. 20. AR vs A PP E BB O BI LW M
  21. 21. FÖRDELAR MED APPAR! • Fungerar offline • Affärsmöjligheter • Personliga inställningar • Bättre upplevelse • Tillgång till telefonens alla funktioner
  22. 22. NACKDELAR MED APPAR • Ny app för varje operativsystem • Kostar mer • Kräver installation
  23. 23. FÖRDELAR MED WEBBAPPAR! • Följer webbstandarder • Inget speciellt språk • Utvecklas en gång för alla enheter
  24. 24. NACKDELAR MED WEBBAPPAR! • Sämre upplevelse (än så länge) • Liten/Ingen tillgång till telefonens funktioner
  25. 25. E S IG N D
  26. 26. DESIGNA FÖR MOBILEN
  27. 27. TÄNK DESIGNTEAM!
  28. 28. DESIGNPROCESSEN vi har lärt oss att… • Vattenfall… bad! • Designa inte allt i början! • Våga göra fel! • Våga ta initiativ • Tänk designteam
  29. 29. DESIGNPROCESSEN tillsammans…
  30. 30. VÅGA TÄNKA OM! Idé Innovation
  31. 31. nter ing orie ovs ring Beh nere ége ckling och Id déu tve I urval
  32. 32. visualiseravisualiseravisualiseravisualise
  33. 33. visualiseravisualiseravisualiseravisualise
  34. 34. änk3Ddesigntänk3Ddesigntänk3Ddesign
  35. 35. Sök artikel (fritext)
  36. 36. VE CKLA UT E ER DER FT AR S TAND
  37. 37. Browser  sniffing   •  Ti?a  på  webbläsarens  User  Agent   •  Leverera  sidan  eller  e?  felmeddelande   •  Browser  sniffing  =  dåligt!   •  Browser  sniffing  för  a?  förbä?ra  upplevelsen   =  OK!  
  38. 38. Webbstandarder   •  Separera  innehåll  från  presentaDon  och   beteende   •  Validerande  (X)HTML   •  SemanDskt  uppmärkt  innehåll   •  CSS  (inte  tabeller)  för  layout   •  Unobtrusive  JavaScript  för  beteende  
  39. 39. BakåtkompaDbel   = stödja alla våra användare
  40. 40. Är  det  värt  det?  
  41. 41. Acceptera  a?  äldre  browsers  inte   klarar  ny  teknik  och  a?  sidan  ser   annorlunda  ut   (men  informaDonen  är  åtkomlig)    
  42. 42. Ta  kortaste  möjliga  genväg  för  a?   innehållet  skall  vara  åtkomligt  i   omoderna  webbläsare  
  43. 43. FramåtkompaDbel   • Webbstandarder • Progressive enhancement
  44. 44. Webbläsare   •  Internet  Explorer  8   •  Internet  Explorer  7   •  Mozilla  Firefox   •  Google  Chrome   •  Safari   •  Opera   •  Internet  Explorer  6  (om  vi  har  otur)  
  45. 45. Webbläsare  för  mobilen   •  Android  WebKit   •  Palm WebOS Browser •  BlackBerry  Browser   •  Pixo by Sun Microsystems •  Blazer   •  PlayStation Portable web browser •  BOLT  browser   •  Polaris Browser •  Fennec  (Firefox  for  mobile)   •  Safari •  IbisBrowser   •  Samsung WebKit •  Internet  Explorer  Mobile   •  Skweezer •  Iris  Browser   •  Skyfire Mobile Browser •  jB5  Browser   •  Steel •  JOCA  by  InteracT!V   •  Teashark •  Kindle  Basic  Web   •  ThunderHawk •  Myriad  Browser  (Ddigare  Openwave  Mobile  Browser)   •  Tristit •  NetFront   •  UCWEB •  NetSailor  Browser   •  uZard Web •  Nokia  S60  WebKit   •  Vision Mobile Browser •  Nokia  Series  40  Browser   •  WinWAP •  Obigo  Browser   •  xScope •  Opera  Mini   •  Opera  Mobile   •  Ozone  
  46. 46. Opera  (Presto)   •  Android  WebKit   •  Palm WebOS Browser •  BlackBerry  Browser   •  Pixo by Sun Microsystems •  Blazer   •  PlayStation Portable web browser •  BOLT  browser   •  Polaris Browser •  Fennec  (Firefox  for  mobile)   •  Safari •  IbisBrowser   •  Samsung WebKit •  Internet  Explorer  Mobile   •  Skweezer •  Iris  Browser   •  Skyfire Mobile Browser •  jB5  Browser   •  Steel •  JOCA  by  InteracT!V   •  Teashark •  Kindle  Basic  Web   •  ThunderHawk •  Myriad  Browser  (Ddigare  Openwave  Mobile  Browser)   •  Tristit •  NetFront   •  UCWEB •  NetSailor  Browser   •  uZard Web •  Nokia  S60  WebKit   •  Vision Mobile Browser •  Nokia  Series  40  Browser   •  WinWAP •  Obigo  Browser   •  xScope •  Opera  Mini   •  Opera  Mobile   •  Ozone  
  47. 47. WebKit   •  Android  WebKit   •  Palm WebOS Browser •  BlackBerry  Browser   •  Pixo by Sun Microsystems •  Blazer   •  PlayStation Portable web browser •  BOLT  browser   •  Polaris Browser •  Fennec  (Firefox  for  mobile)   •  Safari •  IbisBrowser   •  Samsung WebKit •  Internet  Explorer  Mobile   •  Skweezer •  Iris  Browser   •  Skyfire Mobile Browser •  jB5  Browser   •  Steel •  JOCA  by  InteracT!V   •  Teashark •  Kindle  Basic  Web   •  ThunderHawk •  Myriad  Browser  (bdigare  Openwave  Mobile  Browser)   •  Tristit •  NetFront   •  UCWEB •  NetSailor  Browser   •  uZard Web •  Nokia  S60  WebKit   •  Vision Mobile Browser •  Nokia  Series  40  Browser   •  WinWAP •  Obigo  Browser   •  xScope •  Opera  Mini   •  Opera  Mobile   •  Ozone  
  48. 48. Hur  länge  har  du  haj  din   mobiltelefon?  
  49. 49. När  tänker  du  byta?  
  50. 50. Hur  gamla  telefoner  och  hur  många   konsDga  (gamla)  webbläsare  är  det   värt  a?  bygga  specialanpassningar   för?  
  51. 51. Bygg  för  mobiler  som  följer   standarder  
  52. 52. Ge  gamla  telefoner  väldigt  enkel   design  utan  krusiduller.  
  53. 53. •  Förenklad  HTML  (?)   •  SemanDsk  markup   •  Separera  innehåll,   presentaDon  &   beteende   •  Färre  requests   •  Undvik  posiDonering   och  floats   •  Undvik  fasta  bredder   •  Alt-­‐taggar  på  bilder   ?  
  54. 54. Media  Types   •  all   •  braille   •  embossed  (braille  printers)   •  handheld   •  print   •  projecDon   •  screen   •  speech   •  ?y  (terminaler  med  fix  teckenstorlek)   •  tv  
  55. 55. Media  Queries   @media screen and (max-device-width: 320px) { ... Alternativ CSS för små skärmar ... }
  56. 56. RÄTT VÄ LJ NI VÅ
  57. 57. Fristående MOBIL WEBB webbplats NIVÅER Funktions- anpassad Presentations- anpassad Grundläggande
  58. 58. KOM IHÅG… • Tänk mobilkontext • Välj rätt plattform för din målgrupp • Designa upplevelse för mobilen • Utveckla efter standarder
  59. 59. TACK!

×