Université de Sfax N° C.I.N :……………………………………………….

*** NOM ET PRENOM :……………………….…………..

…………………………………………………………..
INSTITUT SUPERIEUR
SECTION :………………….GROUPE :……………..
D’INFORMATIQUE
EPREUVE DE :………………………………………..
ET DE MULTIMEDIA
SALLE :……………………N° PLACE :……………..
DE SFAX
***

SIGNATURES
DES SURVEILLANTS

Examen Session Principale Mai 2022

Module : User Interface and User eXperience Durée : 1h30
Responsable : Najiba Tagougui Filière : P-IITMW

Exercice 1 ((4 points)

1. Les différents emplacements sur l’écran d’un PC ne sont pas équivalents. Argumentez l’accessibilité des
éléments de l'interface.

-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------

1
 NE RIEN ECRIRE ICI

2. Quelle est la différence entre le F-Pattern et le Z-Pattern ? Ont-ils un lien avec l’accessibilité ?
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------

3. Pour les interfaces mobiles, la répartition des interfaces mobiles selon l’accessibilité n’est pas la
même. Pourquoi ?
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------

Exercice 2 (4points)
Soient les interfaces suivantes conçues graphiquement selon deux designers différents laquelle des
deux respectent plus les lois de perception humaine ? Justifiez votre réponse à chaque fois.
NB. Toute réponse sans justification sera considérée fausse.

2
 Interfaces selon Designer 1 Interfaces selon Designer 2

Justification……………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
Interface selon Designer 1 Interface selon Designer 2

Justification……………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………

3
 Justification……………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………

Justification……………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………

Exercice 3 (5 points)
Lors de l’élaboration de son projet pour le module UX/UI, un de vos collègues a préparé le User Journey
MAP (ou cartographie d’expérience) suivant :

4
1. Qu’est une cartographie d’Expérience ? Est-ce que c’est un livrable UX indispensable ?
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2. La cartographie faite par votre collègue correspond à quel type d’application ?
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
3. Qu’est ce qu’il manque à la cartographie faite par votre collègue ?
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------

5
Votre collègue a préparé aussi pour le même projet le document suivant.

4. De quoi il s’agit ?
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------
5. Quel est le but de son utilisation ?
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------

Exercice 4 : (4 points)
1. Adobe XD est un logiciel de prototypage utilisé en masse. Comment vous le décrivez selon les 4
caractéristiques de prototypage ?
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------

6
 ------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------

2. Voici une interface mobile de l’application mobile « Home Deco » conçue avec le logiciel Adobe
XD. Nous allons s’intéresser au développement en Flutter de cette interface. Proposez une
arborescence de Widgets Flutter qui seront utilisés pour concevoir cette interface.

7
Exercice 5 : (3 points)
Complétez le code Flutter suivant pour avoir l’interface suivante

import 'package:flutter/material.dart';

void main() => runApp(…………………..);

class MyApp extends StatelessWidget {

…………………..
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ……………….,
);
}
}

class Home extends StatefulWidget {

@override
_HomeState …………………….. => _HomeState();
}

class _HomeState extends ………………….{

String name = " ";
@override
Widget build(……………………….) {
return …………………….(
child: Scaffold(
appBar: AppBar(
title: Text(………………………………………….),
centerTitle: true,
),
body: ………………..(
child: Container(
width: 300,
child: …………………(
children: <Widget>[
TextField(
Decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter your name',
),
onSubmitted: (String str) {
setState(() {
name = TextFiled.text;
});
},
),
8
 Text("Hello $name!"),
Greet(),
],
),
),
),
),
);
}
}

class Greet extends ……………………………. {

@override
Widget build(BuildContext context) {
return ElevatedButton(
child: …………………………………………..,
);
}
}