Your SlideShare is downloading. ×
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

305

Published on

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 …

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 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
305
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes Fabien Marry @AlphabUX
  • 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. Introduction
  • 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. @AlphabUX #FlupaUxDay Introduction Noëlle Mais je continue a lui écrire, j'écris juste plus gros !
  • 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. @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. @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. @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. @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. @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. @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. @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. @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. Les appareils mobiles : un don du ciel pour l’accessibilité
  • 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. @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. @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. @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. @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. @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. @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. @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. @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. @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. @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. @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. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur
  • 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. @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. @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. @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. @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. @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. @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. @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. @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. 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. @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. © 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. © 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. @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. @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. @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. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  • 46. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  • 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. @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. @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. @AlphabUX #FlupaUxDay Par où commencer ? Même UI sur un iPad mini, mais... 20% plus petit et moins net!
  • 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. @AlphabUX #FlupaUxDay Par où commencer ? Eviter d’utiliser la couleur pour transmettre l’information Vision normale Daltonisme simulé http://wearecolorblind.com/example/ichat/
  • 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. @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. Pour aller plus loin
  • 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. @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. @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. @AlphabUX #FlupaUxDay Pour aller plus loin Instapaper: une police spéciale pour les dyslexiques
  • 60. @AlphabUX #FlupaUxDay Merci ! Suivez moi sur twitter @AlphabUX !

×