###### tags: `Master`

# Interfaces utilisateurs pour applications mobiles

## :warning: Examen
- Donnez une définition d'expérience utilisateur
- Y'a-t-il une relation entre UX et UI

## Introduction

WIMP:
- Windows
- Icons
- Menus
- Pointeur

### Context

- Interruption
- Changement d'envirnnement
- Contration possible
- Présence d'autres personnes

### utilisateur
- Intégrer l'utilisateur et ses caracteristiques (Age, Handicap).
- Connaisances professionels/compétences
- Caracteristiques psychologiques
- Caractéristiques socio-culturelles

L'interface utilisateur: ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur de commander, controler, superviser un système interactif

### la tâche
- Caractéristiques de la tâche
- Contraintes techniques

### théorie de l'action
- Perception (visuel, audio, haptic)
- 100 ms
- Action
- Mémoire

### User experience
Réfléchir en terme d'interation plutôt que en terme d'interface. Quels action l'utilisateur doit faire pour atteindre son but ? Si l'expérience utilisateur n'est pas bonne alors personnes n'utilise l'application.

- **Utilité** : Est-ce que l'application permet de réaliser la tâche voulue.
- **Utilisabilité** : La facilité d'atteindre le but. Plutot le role du designer.
- Norme ISO : Efficace, efficient et satisfaisant
- Critères d'évaluation : Apprenabilité (utiliser les fonctionnement connu), flexibilité(s'adapte au capacité des utilisateurs) et robustesse
- **Expérience utilisateur** : Si l'utilisabilité n'est pas bonne l'expérience utilisateur n'est pas bonne. Plutot le rôle du développeur.

#### Apprenabilité
* Montrer lorsque une action se passe (ex. quand on presse un bouton).
* Strucuture cohérentes pour toute l'application
* Utiliser les familiarité

#### Robustesse
* Faire en sorte que l'utilisateur fasse pas d'erreur (contrôle des entrées)

#### Règles de Ben Shneiderman (liste non complète)
1. Etre consitent
2. Permettre aux utilisateur d'utiliser des raccourcis
3. Retour d'information (action atomique)
4. Permettre d'annuler une action
5. Les utilisateur doivent avoir le contrôle
6. Limiter les informations (valoriser la mémoire courte)

### Exercice site he-arc
schneidermann:
i.

| | **Correction** |
| -------------- | -------------- |
| 1. Visibility | Trop d'information |
| 2. Feedback | Pas partout |
| 3. Affordance | Menu principal ? Page d'acceuil ?|
| 4. Mapping | Ok |
| 5. Constraints | Action pas possible mais signalé donc ok |
| 6. Consistency | Dans le menu les différentes ligne ont pas forcéement les mêmes fonction mais le même visuel |

### Reflexon interface banque
i. Tout devrait suivre une marge. Meme police, même casse.
ii. Raccourci > Empreinte digitale ou reconnaissance faciale
iii. Mock up, on peut rien dire
iv. Mock up, on peut rien dire
v. Il prend en compte l'oublie du mot de passe, bloquer btn login si champs vide
vi. -
vii. -
viii. pas d'info inutile

#### Problèmes
**Perspective UX** :
- Beaucoup d'informations a entrer pour assurer la sécurité.
- La connection ne doit pas être automatique.

**Perspective Métier** :
- Sécurité (Connexion, échange d'information, réseau utilisé).
- Mettre en place des systèmes de connexion avec reconnaissance biométrique
- Pas de sauvegarde du nom d'utilisateur sans sécurité préalable. :warning: ne pas devoir sauver des info c'est pas un pb métier ?

## Problem of small touch screen

### Technologie resistive
- pas résisant
- vieux
- on peut utiliser avec des gens et n'importe quel styler
- deux plaques on crée un contacte en appuyant

### Technologie capacitive
* Defficit d'électron, les électrons vont dans le doigt
* sensible
* mulit touch
* cher
* fonctionne meme si endommagé
* meilleurs couleurs

Geste : mouvement du corp qui contient de l'information

### Pointage et défis

- Occlusion/Occultation
- La main couvre l'écran
- Précision
- le doigt c'est gros comme une baleine
- Midas Touch
- Le doigt ne peut que toucher ou libérer
- La souris peut survoler

Travail sur le tracking: Mettre le doigt ca track et un tilt ca presse

### Chaine cinématique

- Chaine de moteurs abstraits
- épaule -> coude -> poignet -> doigt
- Pour chaque liaison le deuxième gère le mouvement l'autre suit
- Le mouvement bi-manuel fonctionne comme un chaine cinématique

Résulats: La main non dominante précède l'intervention de la main dominante. La main domainante offre des mouvements plus fin et la main non -dominante des action macro. La main non dominante prépare le contexte général.

## Loi de Fitts
- Pour diminuer le temps de pointage, il faut réduire la distance entre la cible et le curseur ou augmenter la taille de la cible
- Loi empirique utiliser dans l'IHM

Offre des recommandations pour l'IHM
- Les boutons ou autre controle actif doit etre d'un taille suffisante
- la taille du doigt peur rendre l'acqusition de cible dans un angle ou trop pres du bors pénible
MT=temps nécessaire pour désigner une cible de largeur W situé à une distance D

$MT=a+b*log_2(\frac {2D}{w})$
- a et b des constantes empirique variant selon le dispositif utlisé
- w la largeur de la cible
- la distance
- $log_2(\frac {2D}{w})$ est appelé indice de difficulté (exprimé en bits) ou ID

indice difficulté effectif :
$ID_e = log_2(\frac {2D_e}{W_e})$

### Exercice slide 34
#### Stéphane
a = 0ms
b = 100ms
D = 13.5mm
w = 9mm

$res =0 + 100 * log_2(\frac {27}{3})=158.5ms$

#### Sarah
a = 0ms
b = 100ms
D = 1000mm
w = 100mm

#### b
en changeant de moyen d'interaction on modifie a et b
si on met en mode styler:
- le w va être plus petit
- le a et b vont changer

#### c
La loi de fitt marche sur un surface. donc ça va. OK. Si on met de la 3D la loi de fitt n'a jamais été prouvé.

### fitt et techno

Cette loi est applicable sur des objets plus petits

### Capteurs

1. Motion Sensors
- Gyroscope, Accelerometre, Gravity sensor,
2. Environmental sensors
- Light sensor
- caméra
4. Position sensors
- GPS
5. Biometric
- Fingerprint
- rythme cardique

### Type d'interaction
- Mouvement du dispositif
- Mouvement sur le dispositif

Les deux types sont indépendant mais peuvent être complémentaires.

### Exercice slide 43
1.
- Acceleromètre
- Gyroscope
- Gps
- Caméra
2.
-

## Progressive Web Apps & Android Instant Apps

### PWA

Une application qui utilise des techno mobile. L'app et pensé pour les smartphones

- utilisable partout
- utilise toutes les capacité d'un smartphone
- doit fonctionner comme un application smartphone

utilisation de capacité offline

- Emploie des services worker pour garder en cache les informations. Si telephone deconnecté on peut employer le cache.

Certain capteur ne sont pas intégrés. Mais on peut en employer une bonne partie.

### Android Play Instant

Pouvoir exectuer une application android sans l'installer. Employe plein de petits modules

- Pas de place en mémoire
- Lancer avec un URL pas besoin d'installer
- Compatible api 21

## Quick prototyping

Plusieurs benefices:
- partager un concept
- Pas de dépense dans le design
- clarification

- Prototype en papier
- Avec un software

- Low Fidelity Portotyping
- High fidelity prototyping

## Wearables
* Ne pas trop distraire l'utilisateur
* Très utilisé dans les domaines du fitness et de la santé
* Devices
* SmartWatch
* smart bracelet
* Fitness tracker
* Hmd
* smart clothing
* Implamtable

### Interaction avec les wearables
* connaitre le context
* C'est nous le context
* Multi-modal interaction
* Device are attached to us -> we are part of the context
* Il faut minimiser les interruptions
* L'utilisateur peut désactiver ou activer les notifications simplement et rapidement

### Options et limites
- extreme interaction
- cpu power
- Battery
- sensors
- commnuication
- interactive surface
- Change avec le device
- Connaitre le device avant de programmer
- Option always on, il faut sauver de l'énergie apres si on active le device, on peut afficher plus d'options

### Screen or not
- Small screen
- Il faut pas juste scale l'ui mais créer un nouvel UI
- interface minimum
- No screen
- quelques les leds clignotantes ou rien

### Affordance
* D. Norman
* User doit savoir comment interagir avec l'ui seulement en la voyant

Humman body affordance
* Les parties du cors on des sensibillité différentes il faut donc adapté (vibration)

* Si on veut savoir si un utilisateur bouge on peut utiliser la pointrine plutôt qu'un bras

### Major issues
- Wireless
- Connexion pas parfaite
- doit gérer ca
- La batterie
- Petit écran
- On doit laver les vetements
- Doit etre styler

### Service-based approach
* le wearable passe par le téléphone pour communiquer avec internet

### Design
* Tous les pixels comptent.
* Doit être esthetique
* Utile n'est pas suffisant
* Tout ce qui est sur le écran doit être utile
* Les utilisateurs peuvent refuser notre solution visuel
* Un Design minialiste est soucant ideal

### Smartwatch
- max 20 caractères par ligne avec pas plus de 6 ou 7 ligne par écran

- Glanceable
- Comprehensible avec un seul coup d'oeil
- Il faut utiliser des layout verticaux ou on peut scrol dans une seule directions

### Context

- :a: Tres important
- Il faut présenter à l'utilisateur ce qu'il a besoin au moment ou il en a besoin

### Standalone
App sans mobile sur un watch

### Complication
Truc en plus que l'heure
- Date
- cicle lunaire
- ...

### Interactions watch
- notifications
- faces
- natives app
- voice commands
- Les gestes
- Rotation poignets
- Shake

### Fitness & Health

....

### Conclusion

* :a: Tester en condition réel
* Chaque wereable a ses propres caractéristiques
*

### Android Wear
* mtn les wearable ne sont plus obligé de passer par les smarthpone
* Google sépare en deux
* Suggest
* Il propose quelque chose
* Demand

* cue Card
* appel vocal
* intent sur les commandes vocales

### Principe
* Pas charger plus de 5 sec
* Pas trop de données sur l'écran
* On résume le context et on affiche l'essentiel
* Tenir compte de la taille de l'écran
* Ne pas exagerer avec les notifications (minimiser)
* Eviter les textes et mettre le necessaire.
* Confirmation après une action

Interactive et Ambient mode

## Evaluation

- Design
- Implémentation
- Analyse

### Defining Usability

ISO 9241
- Effectiveness
- Quality
- accuracy
- completness with users echieve goals
- Efficiency
- Mesurer les ressources necessaires pour realiser une tache
- effort to reach level of quality
- Satisfaction
- Comfort et acceptability du système
- regarder le nombre de remarque negative lors d'un teste
- Context of use
- Regarder le nombre d'erreur lors d'un test
- Users, tasks, equipment, physical and social, environnement, organizatioal requirtments

### Usability (Nielsen :A: VI)
* Learnability
* Efficiency
* Memorability (facile à se souvenir)
* Errors (peu/pas d'erreur)
* Satifaction (subjectif)

### Usability and system acceptability

### Typical measure Effectiveness
* Task completion
* Accuray
* Recall
* Completeness
* Quality of outcome

### Typical measure Efficiency
* Time
* Met beaucoup de temps à accomplir une tache
* Input rate (mots par minute)
* Mental effort
* Va consulter la doc souvent
* Usage patterns(nb click, nb page visitée)
* Learning

Nombre de fois ou il passe sur une page

### Typical measure of Satisfaction
C'est très subjectif la statisfaction
- Standard questionnaires
- Entretients
- ets...
- Preference
- Satisfaction de l'interface
- Attitude et perceptions

### Typical measure of Specific Attitudes

slide 12

### Subjective vs Objective Measure

C'est pas facile de faire la différence. On doit mesurer les dux et faire des correlations.

- Objectif
- Independent de l'user
- Heatmap
- nombre de click
- On peut mettre des logs
- Deterministe
- Subjective
- Methode participative

### Usability Inspection
- System Usability Scale
- Cognitive Walkthrough
- Heurisitc Evaluation
- De Nielsen

### System Usablitiy Scal: SUS

slide 15

Dans une ligne impaire : score = pos-1
Dans une ligne paire : score 5-pos


On peut faire plusieurs UI et prendre la meilleure.

On doit faire evaluer son projet.

### La balade cognitive

- Necessite la séquence d'une action
- Verifie l'utilisabilité d'une séquence d'action

- Comment je peux permettre à l'utilisateur d'effectuer une bonne action sur notre système.
- On peut tester des petite parties de l'application
- On doit choisir des taches
- des taches ou beaucoup de users vont faire.

4 Questions répondre par OUI ou NON:

1. L'action match t'elle le goal du user
2. L'utilisateur voit que l'action est disponible
3. L'utilisateur voit que l'action est celle dont il a besoin
4. L'utlisateur comprend le feedback qu'il recoit.

Ces informations ne donnent pas d'informations sur la gravité du problème ou la fréquence du programme

### Heuristic Evaluation

On doit donner une severite au problème. On ca résoudre les problème qu'on a pas vu avant

slide 34

Entre 3 et 5 evaluateurs pour obtenir de bon resultats

## Ethics

Donnée sensible : comme l'identitié d'une personne. On peut maintenant avoir des informations tres personelles comme des informations sur la santé.

L'identité d'une personne est une information tres sensible. On doit eviter qu elles soient eviter de matière detourné.

On doit souvent accepter des charts que personne ne lit car trop volumineuse. Il est tres dommage que on ne puisse pas utiliser un app si on accepte pas la chart.

### Privacy keys
- Active consent
- ne doit pas etre par defaut, il faut que le user y consente
- Application
-
- location data
- dire ou sont stocker les données
- personal information

### Privacy and law

Les données sont soumises a des lois internationales et nationales.

- Privacy
- Quelle inforation va ou
- Security
- protection des données
- Il n'y a pas de privacy sans security

### Privacy
- identity
- location
- Activity
- web history, contact history, online purchases
- health records
- ...

#### Sanitization
Cacher des infomations aux gens qui emploient des documents.

1. Document proteger
2. Il faut trouver des limites de la protections.
3. Quelles données peuvent etre publier en respectant la vie priver
4. Comment mesurer l'utiliter des données

#### Type de protection
- Pseudonyme : on cache le nom
- Anonyme : on ne donne meme pas de nom
- non-linkability : On ne peut pas etablir de lien
- non-observability : on ne voit pas si qqun fait qqch

### fondamentaux
- Data minimization
- on ne collecte pas plus de données que ce que l'on a besoin
- Data sovereignty
- On reste maitre de ses données, comment elles sont traitées. Ou elles sont stockées
- Explicit consent
- Avant de collecter des données il faut expliquer de a à z ce que l'on recolte et comment on les utiliser et avoir un consentement qui peut être revoqué a tout moment.
- Transparency
- On doit tout savoir

### Alternative
- Anonymization
- Couper le lien entre la personne et les données
- Encryption
-
- Decentralization

### methode d'anonymization
- Pseudonymisation
- On donne un numéro d'id au lieu du nom (numéro avs), mais ce n'est pas suffisant car on peut detecter des donner senseible si on croise avec d'autre données
- k-anonymization
- k personne ne peuvent pas etre distinguer de sk-1 personne dans un version de la table (par exemple des tranche d'age), c'est pas suffisant car si un information est la meme on peut savoir par deduction.
- I-Diversity
- On ne doit pas avoir la meme valeur comme dans k-an. On prend des tranche d'age plus grande. Ca n'empeche pas les inférences par probabilité.
- t-Closesness
- On regroupe en class d'équivalence.
- On generalise sur l'age
- Regroupement
- Dirrérential Privacy
- On ajoute sur des données vraies des données fictives qui doivent ressembler à la réalité. Il faut respecter des probabilités

### Conclusion
- LEs données sensbiles doivent etre securisé et traitées de manière transparentes
- Il y a différents types d'anonymization
- Il y a des guidelines et des lois à suivre ou respecter
- L'anonymization peut impliquer des pertes d'informations il faut donc trouver un compromis