Comment dépasser l’écran tactile
pour une meilleure accessibilité des applications
smartphones et tablettes
Fabien Marry
@...
Sommaire
Introduction: Noëlle... et tous les autres
Les appareils mobiles : un don du ciel pour l'accessibilité
Par où com...
Introduction
@AlphabUX #FlupaUxDay
Introduction
Noëlle
Je vous présente Noëlle, ma grand-mère.
Elle a 95 ans et est en grande forme...
...
@AlphabUX #FlupaUxDay
Introduction
Noëlle
Mais je continue a lui écrire, j'écris juste
plus gros !
@AlphabUX #FlupaUxDay
Introduction
Etre inclusif est facile, il suffit de le vouloir
Besoins légèrement différents
+ juste ...
@AlphabUX #FlupaUxDay
Introduction
Il n’y a pas que Noëlle...
Mean
Upper limit
Lower limit
Age (Years)
OcularAccommodation...
@AlphabUX #FlupaUxDay
Introduction
La population française en chiffres
http://www.webaccessibilite.fr/les-chiffres-du-hand...
@AlphabUX #FlupaUxDay
Introduction
Population du Royaume Uni n’ayant jamais utilisé internet
53%
47%
ont$un$handicap
Premi...
@AlphabUX #FlupaUxDay
Introduction
Etendre votre marché potentiel
How many people have less than Full ability ?
Source: 19...
@AlphabUX #FlupaUxDay
Introduction
Etendre votre marché potentiel
Money to spend and time to spend it
Source: The Henley C...
@AlphabUX #FlupaUxDay
Introduction
Une population vieillisante
Japon
Vu que dans la plupart de pays développes
la populati...
@AlphabUX #FlupaUxDay
Introduction
Un superbe opportunité de promotion pour vos clients
“ Votre produit désormais accessib...
@AlphabUX #FlupaUxDay
Introduction
En France, une obligation légale... limitée
Article 47 de la loi du 11 février 2005 "po...
Les appareils mobiles : un don du ciel
pour l’accessibilité
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Appareil d’accessibilité typique
Seuleme...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Les fonctions d’accessibilité sont désor...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Les fonctions d’accessibilité sont désor...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Zoom
Un simple zoom, q...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : mode couleurs inversée...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Assistive Touch
Fourni...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : motifs de vibration pe...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : mode grande police
Cel...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Le...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Le...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Le...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Le...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Le...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : VoiceOver
Démo: Commen...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
Je vous présente Andy....
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
...et il est depuis pa...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
Heureusement est arriv...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://www...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://www...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://sto...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
Et enfin n’...
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Changer des vies... mais seulement si vo...
Par où commencer ?
Ventes Scoping
UX
UI
Développement
Assurance
Qualité
Pour une entreprise, vendre des produit
avec une b...
@AlphabUX #FlupaUxDay
Par où commencer ?
Au minimum: ajouter des metadonnées d'accessibilité
à votre interface
• Accessibi...
© 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5
Tigerspike London
Level G, 1 & 3, 18 Buckingham Gate, ...
© 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5
Tigerspike London
Level G, 1 & 3, 18 Buckingham Gate, ...
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Escape
Un geste en forme de Z à deux doigts ...
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Escape
Un geste en forme de Z à deux doigts ...
@AlphabUX #FlupaUxDay
Par où commencer ?
= haut/retour, fermer,
annuler
“Escape”
S’appuyer sur les gestes standards : Esca...
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Magic Tap
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Magic Tap
@AlphabUX #FlupaUxDay
Par où commencer ?
= action la plus probable
lecture/pause pour un media,
commencer/finir un appel,
p...
@AlphabUX #FlupaUxDay
Par où commencer ?
!"!accessibilityPerformEscape!{
//!appeler!votre!code!pour!
sortir!du!mode
}
S’ap...
@AlphabUX #FlupaUxDay
Par où commencer ?
Lisibilité: rendre la taille de caractère ajustable
+A#A
Simple mais beaucoup d’e...
@AlphabUX #FlupaUxDay
Par où commencer ?
Même UI sur un iPad mini, mais... 20% plus petit et
moins net!
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter d’utiliser la couleur pour transmettre l’information
Vision normale Dalton...
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter d’utiliser la couleur pour transmettre l’information
Vision normale Dalton...
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter les interactions uniquement gestuelles
Clear
Tout le monde ne peux pas eff...
@AlphabUX #FlupaUxDay
Par où commencer ?
Comment vérifier ?
• 50 nuances de quelque chose: Testez vos visuels avec des simu...
Pour aller plus loin
@AlphabUX #FlupaUxDay
Pour aller plus loin
Appareil Photo: détection faciale
“Un visage. Petit visage. Visage près du bord...
@AlphabUX #FlupaUxDay
Pour aller plus loin
Ariadne GPS: GPS
Utilise le GPS pour aider les aveugles à se déplacer
GPS + Voi...
@AlphabUX #FlupaUxDay
Pour aller plus loin
TapTapSee: reconnaissance d’image
Vous prenez une photo, l’appli vous dis ce qu...
@AlphabUX #FlupaUxDay
Pour aller plus loin
Instapaper: une police spéciale pour les dyslexiques
@AlphabUX #FlupaUxDay
Merci !
Suivez moi sur twitter @AlphabUX !
Prochain SlideShare
Chargement dans…5
×

FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"

613 vues

Publié le

Bien que les smartphones et les tablettes soient en voie de devenir le principal type d’ordinateur pour de plus en plus de gens, leurs interactions via des écrans tactiles les rendent difficiles voir impossible à utiliser pour de nombreuses personnes ayant des handicaps visuel ou moteurs, ou tout simplement âgées. iOS, Android et les autres plateformes offrent de plus en plus de solutions pour rendre leurs applications natives accessibles à une plus grande partie de la population : synthèse et commande vocales, gestes multi-touch dédiés, et même une gestion de contrôleurs spécialisés pour les mouvements de menton, de tête ou de langue. Malheureusement, la plupart des concepteurs et développeurs d’applications ne sont pas conscients de ces possibilités et ne font pas le léger supplément de travail nécessaire pour en profiter. J’exposerai en quoi une telle approche inclusive est bénéficiaire pour les utilisateurs, les développeurs et leurs clients et même toute la société. Puis je démontrerai comment ces appareils peuvent aller bien plus loin que le web et l’ordinateur traditionnel pour être un véritable don du ciel pour l’accessibilité. Je présenterai ensuite les nombreuses fonctions dédiées et les différent périphériques d’entrée/sortie dont les designers doivent être conscients lorsqu’ils développent des applications natives. J’introduirai ensuite une liste de recommandations à suivre pour une meilleure accessibilité, des chose simples mais efficaces aux manières plus complexes telles que concevoir une interface audio pour ceux qui ne voient pas l’écran du tout. La révolution des smartphones et tablettes change profondément notre manière de communiquer, et cette présentation souhaite contribuer à faire en sorte que nos nouvelles expérience numériques ne laissent plus tant de gens de coté.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
613
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"

  1. 1. Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes Fabien Marry @AlphabUX
  2. 2. Sommaire Introduction: Noëlle... et tous les autres Les appareils mobiles : un don du ciel pour l'accessibilité Par où commencer ? Un message personnel du Professeur Hawking Pour aller plus loin @AlphabUX #FlupaUxDay
  3. 3. Introduction
  4. 4. @AlphabUX #FlupaUxDay Introduction Noëlle Je vous présente Noëlle, ma grand-mère. Elle a 95 ans et est en grande forme... Elle adore recevoir des cartes postales lorsque nous partons en vacances, alors je lui en ai écrit une à chaque voyage. Mais maintenant, sa vue est trop faible, et elle ne peux plus lire la plupart des choses.
  5. 5. @AlphabUX #FlupaUxDay Introduction Noëlle Mais je continue a lui écrire, j'écris juste plus gros !
  6. 6. @AlphabUX #FlupaUxDay Introduction Etre inclusif est facile, il suffit de le vouloir Besoins légèrement différents + juste un petit effort => inclusion
  7. 7. @AlphabUX #FlupaUxDay Introduction Il n’y a pas que Noëlle... Mean Upper limit Lower limit Age (Years) OcularAccommodation(Dioptres) 0 10 20 30 40 50 60 70 0 2 4 6 8 10 12 14 Haute Base Moy. Age (années) Accommodationoculaire(années) C’est pour tout le monde pareil : notre vue va empirer avec l'âge, peut être beaucoup plus tôt que ce que vous pensez... C’est quelque chose dont on doit tenir compte, particulièrement quand les designers sont souvent plutôt jeunes...
  8. 8. @AlphabUX #FlupaUxDay Introduction La population française en chiffres http://www.webaccessibilite.fr/les-chiffres-du-handicap-en-France-2009-08-17.php 12 millions ont un handicap 5.18 millions déficient auditifs 2,3 millions déficient moteurs 700 000 handicap intellectuel 8% des hommes 0.45% des femmes souffrent de daltonisme 1,7 millions déficient visuels Source: INSEE, Handicap, incapacités, dépendance (HID), 1998-2001 700 000 handicap intellectuel
  9. 9. @AlphabUX #FlupaUxDay Introduction Population du Royaume Uni n’ayant jamais utilisé internet 53% 47% ont$un$handicap Première raison de s’y intéresser: le handicap est un facteur majeur d’exclusion numérique
  10. 10. @AlphabUX #FlupaUxDay Introduction Etendre votre marché potentiel How many people have less than Full ability ? Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999) http://www.inclusivedesigntoolkit.com/ Combien de gens ont une “capabilite reduite”? Tranche d’age %delatranched’âge la moitié de la population adulte Reason to care 2
  11. 11. @AlphabUX #FlupaUxDay Introduction Etendre votre marché potentiel Money to spend and time to spend it Source: The Henley Centre, Family Expenditure Survey (1996) http://www.inclusivedesigntoolkit.com/ Revenu disponible Temps libre moyen par jour Opportunité !
  12. 12. @AlphabUX #FlupaUxDay Introduction Une population vieillisante Japon Vu que dans la plupart de pays développes la population vieillit, ces besoins ne vont que grandir.
  13. 13. @AlphabUX #FlupaUxDay Introduction Un superbe opportunité de promotion pour vos clients “ Votre produit désormais accessible aux personnes avec déficiences visuelle” Reason to care 3
  14. 14. @AlphabUX #FlupaUxDay Introduction En France, une obligation légale... limitée Article 47 de la loi du 11 février 2005 "pour l'égalité des droits et des chances, la  participation et la citoyenneté des personnes handicapées". The Disability Discrimination Act 1995 (DDA) Article 9 de la convention relative aux droits des personnes handicapées adoptée par l’ONU en 2006 http://www.journaldunet.com/ebusiness/
  15. 15. Les appareils mobiles : un don du ciel pour l’accessibilité
  16. 16. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Appareil d’accessibilité typique Seulement 5800 € Méthode de communication alternative Mono fonction Un design tres grossier, qui entraine uen stigmatisation Difficile a trovuer Cher! https://store.prentrom.com/ product_info.php/cPath/11/products_id/207
  17. 17. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Les fonctions d’accessibilité sont désormais inclues dans les appareils grand public • Moins cher • Meilleur design • Meilleures finitions • Plus de fonctionnalités • Pas de stigmatisation je vais essentiellement parler d’ iOS parce que c’est la plate-forme la plus avancée pour l'accessibilité, mais Android rattrape son retard, et les recommandations sont essentiellement les mêmes.
  18. 18. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Les fonctions d’accessibilité sont désormais inclues dans les appareils grand public “ Il n’y a rien de ce que vous pouvez faire sur l’iPhone ou l’iPad que je ne peux pas faire! ” Stevie Wonder le fait que ces fonctionnalités soit incorporées par défaut joue un grand rôle pour combler cette fracture numérique.
  19. 19. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Zoom Un simple zoom, qui marche partout, mais n’est pas très pratique vu qu’il faut faire défiler le contenu pour le voir
  20. 20. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : mode couleurs inversées (contraste élevé) Peut aider des personnes avec certains problèmes de vue.
  21. 21. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Assistive Touch Fourni un moyen logiciel de faire ce qui habituellement nécessite des mouvements manuels très précis : gestes a plusieurs doigts, secouer, et même des gestes personnalisés que d’autres peuvent pré- programmer pour vous.
  22. 22. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : motifs de vibration personnalisés Mais il n’y a pas que la vue ou l’audition: le toucher peut aussi être utilise pour communiquer des informations, avec diffèrents motifs de vibrations
  23. 23. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : mode grande police Cela ne marche que pour certaines applications Apple, ce réglage n’est pas accessible aux applications tierces.
  24. 24. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Safari ne suit pas ce réglage de grande police, et contrairement à la version Mac, ne fournit pas de bouton pour agrandir le texte.
  25. 25. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur On peux habituellement zoomer grâce au geste pincer / écarter, même si parfois un site web responsif peut bloquer ça. Mais surtout Safari a son mode lecteur.
  26. 26. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Qui lui a un bouton pour agrandir la police.
  27. 27. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Qui lui a un bouton pour agrandir la police.
  28. 28. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur
  29. 29. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : VoiceOver Démo: Comment une personne aveugle utilise un iPad Voice over c’est la passerelle pour beaucoup de fonctions d’accessibilité.
  30. 30. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy Je vous présente Andy. Un gars moyen d’une vingtaine d'années. Pendant ses vacances, il à plongé dans un petit lac... Et il a heurté un rocher. Il s’est blessé gravement.
  31. 31. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy ...et il est depuis paralysé des pieds au cou. Ce qui veut dire qu’il ne pouvait plus faire grand chose sans l’aide de quelqu'un d’autre. *slow*Essayez d’imaginer cela ne serait-ce qu’un instant... D’un jour a l’autre, il ne pouvait plus passer un coup de fil tout seul, ne pouvait plus envoyer un email ou texto tout seul, et il avait besoin que quelqu’un lui lise les messages qu’il recevait. Brutalement, il n’avait plus d'indépendance,
  32. 32. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy Heureusement est arrivé iPortal, un produit qui s'intègre a son fauteuil roulant, et qui utilise le joystick de menton pour contrôler le curseur VoiceOver de son iPhone.
  33. 33. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://www.gatech.edu/newsroom/release.html?nid=110351 Grâce à ce curseur de VoiceOver, beaucoup d’accessoires divers et variés sont supportés. (Egalement un fauteuil avec des appuis têtes qui servent de contrôles).
  34. 34. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://www.hims-inc.com/products/deaf-blind-communicators/ D’autres exemples un clavier Braille pour entrer ou lire du texte.
  35. 35. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://store.griffintechnology.com/mouthstick-stylus Dans un style plus simple et bien moins cher: un stylet de bouche, mais qui peut déjà aider beaucoup.
  36. 36. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile Et enfin n’oublions pas la commande vocale qui commence enfin a marcher correctement, et les assistant numérique tel Siri ou Google now sont désormais capables de depasser la compréhension de simple commandes pour gérer des requêtes complexes en langage naturel tel que “rappelle moi d’acheter du lait quand je qui le boulot”. Mais pour le moment, ce n’est pas encore ouvert au développer tiers..
  37. 37. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Changer des vies... mais seulement si vous rendez vos applis accessibles ! Toutes ces capacités sont incluses mais vous devez faire votre part du boulot pour en tirer pleinement partie.
  38. 38. Par où commencer ? Ventes Scoping UX UI Développement Assurance Qualité Pour une entreprise, vendre des produit avec une bonne accessibilité nécessite un effort collectif: les ventes doivent le présenter aux clients comme un avantage compétitif, le scoping doit en tenir compte dans leur devis, l’UX doit concevoir une appli qui ne dépende pas des visuels, et les graphistes doivent penser particulièrement à la lisibilité, au contraste et au daltonisme.
  39. 39. @AlphabUX #FlupaUxDay Par où commencer ? Au minimum: ajouter des metadonnées d'accessibilité à votre interface • Accessibility : Si décoché, cet élément sera ignoré par le curseur VoiceOver. • Label : Un court texte prononcé après le focus. • Hint : un message plus long lu après le label et une pause (an explication, pas un ordre). • Trait : Défini le type d’interaction. Ajouter Ajoute$un$0tre La plupart de celles-ci sont sont déjà renseignées si vous utiliser des éléments UI standards Tout particulièrement les boutons en image sans texte ont besoin d’un label. Ces meta-donnes sont la clé pour tout ce que VoiceOver permet: l’interface parlée bien sur, mais aussi les appareil braille et autres. Et on peut très bien imaginer une version
  40. 40. © 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5 Tigerspike London Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com iPad 14:04 PM Velum - iPad publication iPad Wireframes & Functional Overview 1.0 Issue Library LS ⚙ "LOGO⚙ " Issue Info Panel 1.0 Issue Library LS Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings. 1. SETTINGS BUTTON [Gesture: Tap] Goes to "Settings". [Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the Archive below. [A11y: enabled; Label: "Settings"] 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically 1 2 3 4 6 5 @AlphabUX #FlupaUxDay Par où commencer ? Documenter les métadonnées d'accessibilité Ces méta-données ne doivent pas être abandonnés au développers pour qu’ils les inclus vite fait presque en douce à la dernière minute. Elle constituent une part entière et cruciale de votre application, tout comme le texte qui est affiché. Et elle doivent recevoir la même attention, y compris réfléchir quel ton et maniere de parler sont les plus appropriés pour cette marque. Cela doit donc être fait a l'étape UX, et
  41. 41. © 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5 Tigerspike London Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com iPad 14:04 PM Velum - iPad publication iPad Wireframes & Functional Overview 1.0 Issue Library LS ⚙ "LOGO⚙ " Issue Info Panel 1.0 Issue Library LS Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings. 1. SETTINGS BUTTON [Gesture: Tap] Goes to "Settings". [Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the Archive below. [A11y: enabled; Label: "Settings"] 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically 1 2 3 4 6 5 @AlphabUX #FlupaUxDay Par où commencer ? Documenter les métadonnées d'accessibilité Last Update: 11 / 02 / 2013 Page: 5 [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically Ces méta-données ne doivent pas être abandonnés au développers pour qu’ils les inclus vite fait presque en douce à la dernière minute. Elle constituent une part entière et cruciale de votre application, tout comme le texte qui est affiché. Et elle doivent recevoir la même attention, y compris réfléchir quel ton et maniere de parler sont les plus appropriés pour cette marque. Cela doit donc être fait a l'étape UX, et
  42. 42. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Escape Un geste en forme de Z à deux doigts est le standard pour fermer les dialogues modaux ou remonter d’un niveau dans une navigations.
  43. 43. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Escape Un geste en forme de Z à deux doigts est le standard pour fermer les dialogues modaux ou remonter d’un niveau dans une navigations.
  44. 44. @AlphabUX #FlupaUxDay Par où commencer ? = haut/retour, fermer, annuler “Escape” S’appuyer sur les gestes standards : Escape (déjà inclus si vous utilisez un controlleur de navigation du framework standard.)
  45. 45. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  46. 46. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  47. 47. @AlphabUX #FlupaUxDay Par où commencer ? = action la plus probable lecture/pause pour un media, commencer/finir un appel, prendre une photo... Double tap à deux doigts “Magic tap” S’appuyer sur les gestes standards : Magic Tap
  48. 48. @AlphabUX #FlupaUxDay Par où commencer ? !"!accessibilityPerformEscape!{ //!appeler!votre!code!pour! sortir!du!mode } S’appuyer sur les gestes standards : coté code !"!accessibilityPerformMagicTap{ //!appeler!votre!code!pour!faire! l’action!la!plus!probable } Super simple: une ligne de code !
  49. 49. @AlphabUX #FlupaUxDay Par où commencer ? Lisibilité: rendre la taille de caractère ajustable +A#A Simple mais beaucoup d’effet : permettre a vos utilisateur d’agrandir la police du texte.
  50. 50. @AlphabUX #FlupaUxDay Par où commencer ? Même UI sur un iPad mini, mais... 20% plus petit et moins net!
  51. 51. @AlphabUX #FlupaUxDay Par où commencer ? Eviter d’utiliser la couleur pour transmettre l’information Vision normale Daltonisme simulé http://wearecolorblind.com/example/ichat/
  52. 52. @AlphabUX #FlupaUxDay Par où commencer ? Eviter d’utiliser la couleur pour transmettre l’information Vision normale Daltonisme simulé http://wearecolorblind.com/example/ichat/
  53. 53. @AlphabUX #FlupaUxDay Par où commencer ? Eviter les interactions uniquement gestuelles Clear Tout le monde ne peux pas effectuer ces gets, et si il n’y a pas d'élément de contrôle a l'écran, rien n’est accessible via VoiceOver et les périphériques externes. Cette application est inutilisable si vous avez besoin de VoiceOver et très difficile a utiliser si vous avez des problèmes de mouvements des mains (même si Adaptive touch peux aider).
  54. 54. @AlphabUX #FlupaUxDay Par où commencer ? Comment vérifier ? • 50 nuances de quelque chose: Testez vos visuels avec des simulateurs de daltonisme. • Sans tricher : Effectuez votre assurance qualité en utilisant VoiceOver, l'écran éteint. • Rien ne remplace l’humain : Incluez des utilisateurs avec des handicaps dans vos sessions de tests d’utilisabilité.
  55. 55. Pour aller plus loin
  56. 56. @AlphabUX #FlupaUxDay Pour aller plus loin Appareil Photo: détection faciale “Un visage. Petit visage. Visage près du bords droit. Mis au point.” http://svan.ca/blog/2012/blind/ Pour aller plus loin, utilisez les capacités matérielles et logicielle pleinement (ici la détection de visage) Ici cela permet à des utilisateurs aveugles de prendre et de partager des photos.
  57. 57. @AlphabUX #FlupaUxDay Pour aller plus loin Ariadne GPS: GPS Utilise le GPS pour aider les aveugles à se déplacer GPS + Voiceover = une super appli qui permet aux aveugles d’explorer leur villes et leur campagne , permet également de définir des endroits clés, et prévient lorsque votre bus arrive au bon arrêt.
  58. 58. @AlphabUX #FlupaUxDay Pour aller plus loin TapTapSee: reconnaissance d’image Vous prenez une photo, l’appli vous dis ce qu’elle y voit. Appareil photo + reconnaissance d’image = Très pratique si vous êtes aveugle et que vous voulez savoir si ce que vous vous apprêter dans vos céréales et du lait ou du jus d’orange. Egalement utile pour distinguer les médicaments, les billets, les habits...
  59. 59. @AlphabUX #FlupaUxDay Pour aller plus loin Instapaper: une police spéciale pour les dyslexiques
  60. 60. @AlphabUX #FlupaUxDay Merci ! Suivez moi sur twitter @AlphabUX !

×