Tweet
Tweet

Slide 1

Slide 1 text

APPLIS MOBILES Processus de Création & Développement MDSI - 23 février 2015

Slide 2

Slide 2 text

PRÉSENTATION Dimitri Dupuis-Latour
 Ingénieur iOS @dupuislatour
 [email protected] 2007  2015 2013 2003

Slide 3

Slide 3 text

PROJETS Xcode iPhone SDK GDF DolceVita CFM Kiosk MyPMU MyLittleParis Equidia …

Slide 4

Slide 4 text

Equidia

Slide 5

Slide 5 text

Thermostat Dolce Vita

Slide 6

Slide 6 text

ET VOUS ?

Slide 7

Slide 7 text

SOMMAIRE 1. User Interface (UI)
 — Charte Graphique — Génération Images — Multi-Résolutions — 2. User Experience (UX)
 — UI ≠ UX — Notions d'ergonomie — Mockups & Wireframes — 3. Développement
 — iOS, Android, Web et Back — Webservices — 4. Chef de Projet (CDP)
 — Méthodologie Agile — Présentation d'outils (JIRA, Trac, BuildBots) — 5. Communication & Marketing
 — Processus Soumission — SEO & Optimisation Mots clés — 6. Coding Time
 — Xcode — Interface Builder — Instruments — 7. Questionnaire

Slide 8

Slide 8 text

UI User Interface

Slide 9

Slide 9 text

CHARTE GRAPHIQUE

Slide 10

Slide 10 text

CHARTE GRAPHIQUE blog.capitainetrain.com

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

CHARTE GRAPHIQUE

Slide 13

Slide 13 text

CHARTE GRAPHIQUE • Spécifications Design
 Logo, Polices, Couleurs, icônes, sons, tonalité… • Traduction de la personnalité de la marque • Homogénéisation
 Retrouver le même univers sur le web, l'iPhone, Android

Slide 14

Slide 14 text

MULTI RÉSOLUTIONS

Slide 15

Slide 15 text

http://www.paintcodeapp.com/news

Slide 16

Slide 16 text

Pour chaque icône, fournir 3 images Retina Retina HD Normal 

Slide 17

Slide 17 text

Pour Android: 5 images ! iOS ✅ n/a ✅ ✅ n/a Android ✅ ✅ ✅ ✅ ✅ New ! New !

Slide 18

Slide 18 text

Record Recording… recorded: Today, 7:00pm Enregistrement #1 recorded: Today, 7:00pm Enregistrement #1 2x 3x 1x 1x 2x 3x Explosion des images à générer… 1x 2x 3x

Slide 19

Slide 19 text

Poids de l'app à télécharger • Temps de téléchargement • ‘Limite’ de 100 Mo si on est pas en Wi-Fi

Slide 20

Slide 20 text

Approche traditionelle : Downscaling 3x [email protected] 2x [email protected] 1x [email protected]

Slide 21

Slide 21 text

Problème de l'alignement des pixels sur la grille (antialiasing) @3x @1x flou @1x net @1x custom

Slide 22

Slide 22 text

Vectoriel Solution

Slide 23

Slide 23 text

FontAwesome : Set of 479 Icons

Slide 24

Slide 24 text

Utilisable partout • App iOS (framework FontAwesomeKit/Core) • App Android (framework Iconify) • Site Web (@font-face / WebFonts) • Dans une présentation keynote/PPT (comme celle-ci)
 => Pour vos mockups ! • 479 icônes / 86 Ko !!

Slide 25

Slide 25 text

Exemples d'utilisation Nom Prénom Lyon 5ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5

Slide 26

Slide 26 text

Google Material Design Font http://google.github.io/material-design-icons/

Slide 27

Slide 27 text

thenounproject.com Google image, pour les icônes

Slide 28

Slide 28 text

Créer une police d'icônes: icomoon.io Uploader icônes perso Ajouter icônes standard Générer

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

UX User Experience

Slide 31

Slide 31 text

? UI vs. UX Recherche d'un Meilleur Design @PimVerlaan

Slide 32

Slide 32 text

UI vs. UX Recherche d'un Meilleur Design @PimVerlaan

Slide 33

Slide 33 text

UI vs. UX Recherche d'un Meilleur Design

Slide 34

Slide 34 text

UX IS NOT UI UX IS NOT UI What does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers; others are tactical roles we all move in and out of. What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.” uxisnotui.com

Slide 35

Slide 35 text

• Qui est la cible visée ? • Public technophile (derniers iPhones et derniers iOS ?) • Public moins technophile, (iOS6, iPhone 3G…) • Retour d'expérience Equidia, MyLittleParis • Mode Offline: utilisation en offline (M°, avion) ou connexion wifi/3G requise ? • Retour d'expérience RATP • Contexte d'utilisation de l'app ? • Dans la rue, recherche rapide d'information, à une main ? • Chez soi, consultation de contenu, à 2 mains ? Avant de concevoir un écran Posez-vous les bonnes questions

Slide 36

Slide 36 text

Prise en main d'un smartphone 49% 36% 15% One Handed Cradled Two handed 40% Interaction avec le téléphone sans même utiliser le clavier ni l'écran Etude de Steven Hoober, Février 2013, www.uxmatters.com

Slide 37

Slide 37 text

Prise en main d'un smartphone Réalisation d'une Heat Map Etude de Steven Hoober, Février 2013, www.uxmatters.com

Slide 38

Slide 38 text

NON AUX HAMBURGERS MENUS

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

HAMBURGER MENUS • Dur à atteindre • Nombres de clics doublés • Navigation Fail: Ne permet pas de savoir où on est • Tendance à devenir un Fourre-tout (Prefs, CGU…) • Facebook, Twitter, AirBnB: Ils l'avaient, ils l'ont abandonné. Apple ne l'a jamais eu • N'est pas un composant natif du SDK

Slide 41

Slide 41 text

HAMBURGER MENUS • L'avis d'Apple lors de la dernière WWDC
 http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus • Retour d'expérience: l'app RedBooth
 https://redbooth.com/blog/hamburger-menu-iphone-app TABS … …

Slide 42

Slide 42 text

AUTRE GRAND PRINCIPE DE L'ERGONOMIE…

Slide 43

Slide 43 text

UNE PIÈCE, UNE FONCTION

Slide 44

Slide 44 text

UN ÉCRAN, UNE FONCTION

Slide 45

Slide 45 text

"A SCREENFUL OF CONTENT" • Un écran reste petit • Ne pas se laisser piéger lors de la conception des écrans iPhone sur un écran d'ordinateur, toujours tester le rendu sur device • Charge cognitive

Slide 46

Slide 46 text

Dev Android, iOS, Web,Back,

Slide 47

Slide 47 text

Android, iOS, Web, Back,   WebService

Slide 48

Slide 48 text

Exemple de WebService JSON/REST Equidia - Liste des émissions disponibles en replay

Slide 49

Slide 49 text

Exemple de WebService XML/SOAP GDF - Etat du thermostat

Slide 50

Slide 50 text

CARACTÉRISTIQUES D'UN BON WEBSERVICE • JSON vs. XML • REST vs. SOAP • URLs versionnées (http://api.myapp.com/v1/users) • Utilisation verbes HTTP: GET, POST, PUT, DELETE • Utilisation erreurs HTTP

Slide 51

Slide 51 text

ERREURS HTTP * `2xx` en cas de succès: * `200` - OK * `201` - Created * `204` - No Content * `4xx` en cas d'erreur du client (paramètre manquant ou invalide): * `400` - Bad Request * `401` - Unauthorized * `403` - Forbidden * `404` – Not Found * `5xx` en cas d'erreur du serveur: * `500` - Internal Server Error * `503` - Service Unavailable

Slide 52

Slide 52 text

HTTP STATUS CATS

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

SWIFT

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

CDP Chef de Projet

Slide 64

Slide 64 text

MÉTHODES AGILES • SCRUM • KANBAN • XP: Extreme Programming

Slide 65

Slide 65 text

Outil: JIRA www.iossupportmatrix.com

Slide 66

Slide 66 text

Outil: TRAC www.iossupportmatrix.com http://trac.webkit.org

Slide 67

Slide 67 text

AUTRES OUTILS • iTunes Connect • Google Developer console • Google Analytics

Slide 68

Slide 68 text

Version Cible Pour quelles versions d'OS et d'appareil développer ?

Slide 69

Slide 69 text

Taux d'adoption iOS Des nouvelles versions rapidement adoptées 150/149 1GB A7 M 4 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 256MB 7 M 4 2 256MB 7 M 4 2 256MB 7 M 4 2 A4 512MB 7 M 4 2 A4 256MB 7 M 4 2 A4 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A5X 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A6 1GB 7 M 4 2 A6X 1GB 7 M 4 2 A6 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 [new] iPad March 2012 iPod touch September 2007 iPhone 3G July 2008 iPod touch (2nd gen) September 2008 iPhone 3GS June 2009 iPod touch (3rd gen) September 2009 iPad April 2010 iPad 2 March 2011 iPhone 4S October 2011 iPhone 5 September 2012 iPhone 5c September 2013 iPhone 5s September 2013 iPad Air October 2013 iPad mini 2 October 2013 iPhone 4 June 2010 iPad October 2012 iPad mini October 2012 iPod touch (5th gen) September 2012 iPod touch (4th gen) September 2010 iPhone June 2007 ARMv6 ARMv7 ARMv7s ARM64 Key Device Compatibility Do not support Full support Earliest release Latest release Chip generation / Device memory Geek Bench rating Single Core/Multi Core * Geekbench v2 scores only Accelerometer Bluetooth LE GPS (Cellular iPad only) Microphone Still Camera Retina Display ARM Version Camera Flash Gyroscope OpenGL ES Version Telephony Lightning Port M7/M8 Coprocessor Front Facing Camera Location Services Peer-to-Peer Video Camera TouchID Auto-Focus Camera Game Kit Magnetometer SMS Wifi Apple Pay  iOS Support Matrix Autumn 2014 Edition - v3.1.2 http://iossupportmatrix.com @isupportmatrix English iPhone OS 1.0 iPhone SDK 2.0 iPhone SDK 3.0 iPhone SDK 4.0 iOS 5 iOS 6 iOS 7 Model ID iOS 8 1GB 8 M 4 2 A8 iPhone 6 September 2014 1GB 8 M 4 2 A8 iPhone 6 Plus September 2014 2GB 8 M 4 2 A8X iPad Air 2 October 2014 1GB 8 M 4 2 A7 iPad mini 3 October 2014 iPhone5,1 iPhone5,2 iPad3,4 iPad2,5 iPad2,6 iPod5,1 iPad3,1 iPad3,2 iPod4,1 iPhone3,1 iPad1,1 iPod3,1 iPhone2,1 iPod2,1 iPhone1,2 iPod1,1 iPhone1,1 iPhone4,1 iPhone5,3 iPhone5,4 iPhone6,1 iPhone6,2 iPad4,1 iPad4,2 iPad4,4 iPad4,5 iPad2,1 iPad2,4 iPhone7,2 iPhone7,1 iPad5,3 iPad5,4 iPad4,7 iPad4,8 iPad4,9 136* 135* 136* 188* 150/149 278* 454* 209/209 7.1.2 206/206 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 262/495 215/406 260/493 215/410 260/491 712/1278 773/1408 698/1249 1363/2456 1304/2528 1418/2568 8.1 1610/2880 8.1 1596/2854 8.1 1794/4441 8.1 1418/2568 7.0 7.0 7.0 7.0 4.2.1 6.1.6 6.1.6 4.2.1 4.2.1 2.1.1 2.0 1.0 1.1 3.1.3 3.1.3 3.0 5.1.1 4.3.5 6.0 4.3.5 5.0 5.1.1 3.1.1 6.0 4.0 4.2.6 4.2.1 6.0 6.0 iPad SDK 3.2 5.1 (GSM) (CDMA)     www.iossupportmatrix.com

Slide 70

Slide 70 text

Taux d'adoption iOS Des nouvelles versions iOS rapidement adoptées 15 Sept 2013 Sortie iOS 7 iOS 7 iOS 8 iOS 6 15 Sept 2014 Sortie iOS 8 source: mixpanel.com/trends

Slide 71

Slide 71 text

Taux d'adoption iOS Des nouvelles versions iOS rapidement adoptées source: @_nb (développeur Capitaine Train)

Slide 72

Slide 72 text

Mise à jour des Apps Des nouvelles versions d'Apps rapidement adoptées source: @_nb (développeur Capitaine Train) Cycle 6 semaines (Méthode Agile: Kanban)

Slide 73

Slide 73 text

Quelle version d'iOS supporter ? sometimes, More is Less • Coordonnez votre sortie et celle d'iOS (Délais AppStore) • Ne développer que pour 1 ou 2 versions de l'OS (N & N-1) • Avantage du premier arrivant (PassBook, Widgets, Apple Watch) • Mise en avant des early adopters par Apple, blogs, presse… • Evitez 'technical debt' • "Le futur est plus grand que le passé"

Slide 74

Slide 74 text

Coding Time Let's Code !

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

DEMO EXEMPLE 1: EQUIDIA EXEMPLE 2: RÉCRÉER UNE APP DE CHAT

Slide 81

Slide 81 text

DÉMO XCODE: RÉCAPITULATIF • Xcode • Interface Builder • Instruments • iOS Simulateurs • Prototypage avec Storyboards • Objective-C / Swift

Slide 82

Slide 82 text

RÉSUMÉ 1. User Interface (UI)
 — Charte Graphique — Génération Images — Multi-Résolutions — 2. User Experience (UX)
 — UI ≠ UX — Notions d'ergonomie — Mockups & Wireframes — 3. Développement
 — iOS — Android — Web — Back — Webservices — 4. Chef de Projet (CDP)
 — Méthodologie Agile — Présentation d'outils (JIRA, Trac, BuildBots) — 5. Communication & Marketing
 — Processus Soumission — SEO & Optimisation Mots clés — 6. Coding Time
 — Xcode — Interface Builder — Instruments — 7. Questionnaire

Slide 83

Slide 83 text

Questionnaire