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

Comment dépasser l’écran tactilepour une meilleure accessibilité des applications smartphones et tablettes

Fabien Marry@AlphabUX

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

Introduction


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.


Introduction

Noëlle

Mais je continue a lui écrire, j'écris juste plus gros !


Introduction

Etre inclusif est facile, il suffit de le vouloir

Besoins légèrement différents + juste un petit effort

=> inclusion


Introduction

Il n’y a pas que Noëlle...

Mean

Upper limit

Lower limit

Age (Years)

Ocu

lar A

ccom

mod

atio

n (D

iopt

res)

0 10 20 30 40 50 60 70 0

2

4

6

8

10

12

14 Haute

Base

Moy.

Age (années)

Ac

com

mod

atio

n oc

ulai

re (a

nnée

s)

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...


Introduction

La population française en chiffres

http://www.webaccessibilite.fr/les-chiffres-du-handicap-en-France-2009-08-17.php

12 millionsont un handicap

5.18 millions

déficient auditifs

2,3 millionsdéficient moteurs

700 000handicap

intellectuel8% des hommes0.45% des femmes

souffrent de daltonisme

1,7 millionsdéficient visuels

Source: INSEE, Handicap, incapacités, dépendance (HID), 1998-2001

700 000handicap

intellectuel

http://www.hims-inc.com/products/deaf-blind-communicators/



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


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

%

de

la tr

anch

e d’

âge la moitié de la

population adulte

Reason to care 2


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é !


Introduction

Une population vieillisante

Japon

Vu que dans la plupart de pays développes la population vieillit, ces besoins ne vont que grandir.


Introduction

Un superbe opportunité de promotion pour vos clients

“ Votre produit désormais accessible aux personnes avec déficiences

visuelle”

Reason to care 3


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/expert/51648/internet-et-handicap---les-regles-applicables-face-a-la-realite-du-net.shtml

http://www.seton.fr/etiquette-vehicules-ceinture-securite-obligatoire.html

Les appareils mobiles : un don du ciel pour l’accessibilité



Appareil d’accessibilité typique

Seulement5800 €

Méthode de communication alternativeMono fonctionUn design tres grossier, qui entraine uen stigmatisationDifficile a trovuerCher!https://store.prentrom.com/product_info.php/cPath/11/products_id/207



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.



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.



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



Inclus dans iOS : mode couleurs inversées (contraste élevé)

Peut aider des personnes avec certains problèmes de vue.



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.



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



Inclus dans iOS : mode grande police

Cela ne marche que pour certaines applications Apple, ce réglage n’est pas accessible aux applications tierces.



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.




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.




Qui lui a un bouton pour agrandir la police.




Qui lui a un bouton pour agrandir la police.






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é.



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.




...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, et plus du tout d’intimité.




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.



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).





D’autres exemples un clavier Braille pour entrer ou lire du texte.




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.




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..



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.

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.


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.

AjouterAjoute$un$0tre

La plupart de celles-ci sont sont déjà renseignées si vous utiliser des éléments UI standardsTout 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 future d’iOS qui utiliserait ces labels comme commandes vocales.

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Making_Application_Accessible/Making_Application_Accessible.html#//apple_ref/doc/uid/TP40008785-CH102-SW5

© 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 [email protected] l www.tigerspike.com

iPad 14:04 PM

Velum - iPad publication iPad Wireframes & Functional Overview1.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 slideback 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 PANELSee "1.1 Issue Library - Issue Info Panel" page.

*chronologically

1 2

3 4

6

5


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 faire partie de la documentation.


Tigerspike London


iPad 14:04 PM


⚙ "LOGO⚙ "

Issue Info Panel












*chronologically

1 2

3 4

6

5


Par où commencer ?

Documenter les métadonnées d'accessibilité


Tigerspike London


iPad 14:04 PM


⚙ "LOGO⚙ "

Issue Info Panel












*chronologically

1 2

3 4

6

5

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 faire partie de la documentation.


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.


Par où commencer ?


Un geste en forme de Z à deux doigts est le standard pour fermer les dialogues modaux ou remonter d’un niveau dans une navigations.


Par où commencer ?

= haut/retour, fermer, annuler

“Escape”


(déjà inclus si vous utilisez un controlleur de navigation du framework standard.)


Par où commencer ?

S’appuyer sur les gestes standards : Magic Tap


Par où commencer ?



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”



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 !


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.


Par où commencer ?

Même UI sur un iPad mini, mais... 20% plus petit et moins net!


Par où commencer ?

Eviter d’utiliser la couleur pour transmettre l’information

Vision normale Daltonisme simulé

http://wearecolorblind.com/example/ichat/


Par où commencer ?

Eviter d’utiliser la couleur pour transmettre l’information

Vision normale Daltonisme simulé

http://wearecolorblind.com/example/ichat/


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).


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é.


��

��



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.



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.



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...



Instapaper: une police spéciale pour les dyslexiques


Merci !

Suivez moi sur twitter @AlphabUX !

Documents

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