SlideShare une entreprise Scribd logo
1  sur  71
Télécharger pour lire hors ligne
Usable Software
Design
Johan Martinsson, developer and mentor
@JOHAN_ALPS
@JOHAN_ALPS		
Design	…		
...	It’s	not	just	what	it	looks	like	and	feels	like.		
Design	is	how	it	works.	
hAps://www.flickr.com/photos/8010717@N02/6216457030		CC	BY	2.0
We’re all designers
@JOHAN_ALPS		3	
The user of software design is
the developer!
Alexandru Bolboaca
Alexandru Bolboaca
@JOHAN_ALPS		
leanpub.com/usablesoRwaredesign
@JOHAN_ALPS
It’s not the users fault, it’s the designs fault
@JOHAN_ALPS		Source	:	h*p://www.lsd-mag.com/blog/design-inconfortable/
A definition
@JOHAN_ALPS		
Nielson	(1994)	
Nielsen,	J.	(1994).	Usability	Engineering.	Morgan	Kaufmann	Publishers.		
Bas]en	C.	&	Scapin	D.	(1993).	Critères	Ergonomiques	pour	l’Évalua]on	d’Interfaces	U]lisateurs	(version	2.1),	INRIA,	Technical	report	N°	156
Team	Agreement	
1.  Code	wriAen	to	be	read	
2.  Easy	to	find	where	to	modify	
3.  Minimal	ripple	effect	
4.  Simple	AND	easy	to	validate	
5.  Limited	duplica]on	
A	federa]ng	concept
Code review
@JOHAN_ALPS		
I	don’t	like	the	code!	
Is	there	a	usability	problem?
Interviews
	 What	was	difficult	to	do	in	the	past	weeks?	
	 What	areas	of	the	code	were	most	difficult	to	understand	
	 When	were	you	afraid	that	your	changes	might	be	wrong?	
	 Alexandru	Bolboaca	
@JOHAN_ALPS
Inadvertently introducing usability problems
@JOHAN_ALPS
Usability tests
	 Needs	to	be	cheap	enought	that	you’ll	do	it!	
-	Steeve	Krug	
	 Watch	someone	start	a	story	using	your	code	
@JOHAN_ALPS
Parallels with code
@JOHAN_ALPS
Incitation
@JOHAN_ALPS		
à Autonomy
Push	or	pull?	 Which	way?	Push!
Incitation
@JOHAN_ALPS		
à Autonomy
Consistency
@JOHAN_ALPS		Source	:	h*p://lesmoyensgrands.over-blog.com	
à Autonomy
Consistency
@JOHAN_ALPS		
à Autonomy
-	Alexandru	Bolboaca
Compatibility
@JOHAN_ALPS		
msPaint	 Adobe	Photoshop	
à Autonomy
Compatibility
@JOHAN_ALPS		
à Autonomy
TDD and usability
	 TDD	
◦  Given,	When,	Then	
◦  Statement	
@JOHAN_ALPS	
	 Trial	&	error	
◦  Edit,	Reload,	click-click-click,	Observe	
◦  Explora]on
TDD and usability
@JOHAN_ALPS		
Resources.delete()	
Broadcast()	
	
resetCurrent()	
toggleSelec]onMode()	
Delete()	
Manager.fire()	
Navigator.delete()
TDD and usability
@JOHAN_ALPS		
Resources.delete()	
Broadcast()	
	
resetCurrent()	
toggleSelec]onMode()	
Delete()	
Manager.fire()	
Navigator.delete()	
Shot	gun	surgery	
Learn/memorability	problem
TDD and usability
TDD	requires	cogni]ve	mastery.		
If	we	don’t	have	that,	then	we	have	a	usability	problem.	
TDD	is	an	alert	mechanism.	
@JOHAN_ALPS
Readability
@JOHAN_ALPS	
Wikipédia	 Wikiwand	
à Competence
Readability
@JOHAN_ALPS		
à Compétence
Information density
@JOHAN_ALPS		
Cdiscount	 Google	
à Competence
Information density
@JOHAN_ALPS		
à Competence
Information density
@JOHAN_ALPS		
à Competence
One	level	of	abstrac]on	
Reveal	intent
Documentation
@JOHAN_ALPS		
/**	
	*	Creates	a	new	Menu	with	parameters	
	*	
	*	@param	mainCourse	the	main	meal	
	*	@param	starter	the	starter	
	*	@param	dessert	the	dessert	
	*/	
Menu(MainCourse	mainCourse,	Starter	starter,	Dessert	dessert)	{	
	
				this.mainCourse	=	mainCourse;	
				this.starter	=	starter;	
				this.dessert	=	dessert;	
}	
/**	
	*	Serves	alcohol	if	the	customer	is	old	enough	
	*	for	drinking	alcohol.	Else	Lemonade	
	*	@param	customer	the	customer	to	serve	the	drink	to	
	*/	
void	serveAperi]f(Customer	customer)	{	
				if	(customer.oldEnoughForAlcohol())	{	
								serve(new	RoyalKir());	
				}	else	{	
								serve(new	Lemonade());	
				}	
}	
Don’t	document	intui]ve	things	
For	the	rest,	documenta]on	improves	usability.	
At	the	€€€	of	maintenance.
Errors
@JOHAN_ALPS		
à Control
Make errors impossible
@JOHAN_ALPS		
Google	
Agenda	
à Contrôle
Make errors impossible
@JOHAN_ALPS		
à Contrôle
//	Mandatory	parameters	in	constructor	
//	Type	parameters
It’s not the users fault, it’s the designs fault
@JOHAN_ALPS		Source	:	h*p://www.lsd-mag.com/blog/design-inconfortable/
Possible errors to make impossible
@JOHAN_ALPS		
Two	stage	instan]a]on	
Temporal	coupling	
Coupling	without	cohesion
Fix errors
@JOHAN_ALPS		
à Contrôle
Fix errors
@JOHAN_ALPS		
à Control
Fix errors
@JOHAN_ALPS		
à Control
Encapsulate	primi]ves
@JOHAN_ALPS		
github.com/mar]nsson/BugsZero-Kata
Rapid feedback
@JOHAN_ALPS		
Amazon	
Cdiscount	
à Control
Rapid feedback
@JOHAN_ALPS		
$	npm	test	
Executed	364	of	364	SUCCESS	(2.663	secs)	
TOTAL:	364	SUCCESS	
	
à Control
Funnel of feedback
@JOHAN_ALPS		
IDE	
Unit	tests	
CI	-	tests		
Code	review	
Dev	
..etc
Error message quality
@JOHAN_ALPS		
à Control
When there’s a bug
Debug	through		
• 	logging	
• 	test	error	messages	
@JOHAN_ALPS
Managers point of view
@JOHAN_ALPS		
Rapid	rampup	of	new	people	
Sustainable	efficiency	
No	quirks	to	remember	
Very	liAle	bugs	
Happy	developers
First Law of Programming
	 Lowering	quality	lengthens	development	]me.	
	 Lowering	usability	slows	down	development.
Thanks
	 -	Alexandru	bolboaca		@alexboly	
	 -	Margaux	Perrin	@margauxlergo	
@JOHAN_ALPS
Constraints
	 Physical	
◦  Constructors,	objects,	…	
	 Cultural	
◦  Team	agreement:	never	return	null,	..	
	 Seman]c	
◦  Business	knowledge:	DDD	-	business	in	
the	code	
	 Logic	
◦  ???	
@JOHAN_ALPS		
@MARGAUXLERGO	48	
Physical	
Cultural	 Seman]c	
Logic
Conclusion
	 It’s	not	the	users	fault	à	design		
	 You’re	not	your	user	à	test	
	 Starts	from	the	problem	à	Federa]ng	concept	
	
	
@JOHAN_ALPS		
BUSINESS	NEEDS	USABLE	CODE
Qualité des messages d’erreur
@JOHAN_ALPS		
@MARGAUXLERGO	50	
Informa]ons	per]nentes	et	compréhensibles	sur	la	nature	de	l’erreur	et	les	ac]ons	à	entreprendre		
Vie		
courante	
	
Source	:	h*p://www.forum-auto.com	
Astra061	:	Bonjour,	
En	ce	moment,	ma	voiture	a	un	voyant	qui	s'allume	et	qui	ne	disparaît	jamais.	Il	
s'agit	du	voyant	d'une	voiture	avec	une	clé.	Savez	vous	où	est	ce	que	ça	cloche	?	
Merci	d'avance	
	
JPR49	:	bonjour,	
Défaut	moteur.	il	y	a	un	code	à	relever,	Ce	forum	regorge	de	sujets	concernant	
la	lecture	des	codes.	
	
valenAn59430	:	Salut	,	voyant	avec	un	clé	et	une	voiture	c'est	pas	l'alarme	?	
	
td	100	:	Surement	une	bougie	de	préchauffage	HS	si	tu	n'a	rien	remarqué	
comme	symptômes.	Néanmoins	il	devrait	s'éteindre	arrivé	à	90°	
à Contrôle
Error message quality
@JOHAN_ALPS		
Google	 AirFrance	
à Control
Résumé
	 ApprenAssage	et	mémorabilité	:	
	 -	Inciter	en	proposant	les	alterna]ves	
	 -	Homogénéité	et	cohérence	dans	l’écriture		
	 -	Rendre	le	code	compa]ble	avec	les	développeurs·ses,	ou	l’inverse	!	
	 Efficience	:		
	 -	Lisibilité	des	nommages	
	 -	Brièveté	&	densité	informa]onnelle	:	
	 	factoriser	le	code	
Autonomie	
Compétence	
@JOHAN_ALPS		
	 Erreurs	:		
	 -	Rendre	les	erreurs	
impossibles	
	 -	Feedback	immédiat		
	 -	Qualité	des	messages	d’erreur	
	Contrôle
Satisfaction des besoins à Réussite business
@JOHAN_ALPS		
@MARGAUXLERGO	53	
BE-
goals :
ü Autonom
ie
ü Compéte
nce
ü Contrôle
Rende
ment
Lassitud
e
Frustrati
on
Conflits
Ressources
Références	scien]fiques	
•  Bolboaca	A.	(2016).	Usable	soRware	design	leanpub.com/usablesoRwaredesign	
•  Norman	D.	(1988).	The	Design	of	Everyday	Things	
•  Van	Boven,	L.,	&	Gilovich,	T.	(2003).	To	do	or	to	have?	That	is	the	ques]on.	Journal	of	Personality	and	Social	Psychology,	85,	1193–1202.	
•  Hassenzahl,	M.	(2003).	The	thing	and	I:	understanding	the	rela]onship	between	user	and	product.	In	M.Blythe,	C.	Overbeeke,	A.	F.	Monk,	&	
P.	C.	Wright	(Eds.),	Funology:	From	Usability	to	Enjoyment	(pp.	31-42).	Dordrecht:	Kluwer	Academic	Publishers.	
•  Lallemand,	C.	(2015).	Towards	Consolidated	Methods	for	the	Design	and	Evalua]on	of	User	Experience.	(Doctoral	disserta]on).	University	of	
Luxembourg.	hAps://publicaAons.uni.lu/handle/10993/21463	
•  Nielsen,	J.	(1994).	Usability	Engineering.	Morgan	Kaufmann	Publishers.		
•  Bas]en	C.	&	Scapin	D.	(1993).	Critères	Ergonomiques	pour	l’Évalua]on	d’Interfaces	U]lisateurs	(version	2.1),	INRIA,	Technical	report	N°	156	
	
Exemples	vie	courante		
•  hAp://lesmoyensgrands.over-blog.com	
•  hAp://www.lsd-mag.com/blog/design-inconfortable/	
•  hAp://www.forum-auto.com	
	
	
mar]nsson.johan@gmail.com	
mar]nsson-johan.blogspot.fr	
@johan_alps		
ergo@margaux-perrin.com	
													margaux-perrin.com	
@margauxlergo
TDD et utilisabilité?
@JOHAN_ALPS		
@MARGAUXLERGO	55
Feedback immédiat
@JOHAN_ALPS		
Réponse	immédiate	renseignant	sur	l’ac]on	accomplie	et	son	résultat	
Vie		
courante	
	
à Contrôle
Qualité des messages d’erreur
@JOHAN_ALPS		
@MARGAUXLERGO	57	
Informa]ons	per]nentes	et	compréhensibles	sur	la	nature	de	l’erreur	et	les	ac]ons	à	entreprendre		
Code	
à Contrôle
Protection contre les erreurs
@JOHAN_ALPS		
@MARGAUXLERGO	58	
Moyens	pour	corriger	les	erreurs	
Code	
à Contrôle
Encapsuler	primi]ves
Brièveté
@JOHAN_ALPS		
@MARGAUXLERGO	59	
Limiter	le	travail	de	lecture,	la	saisie	et	les	étapes	
Vie		
courante	
	
Rechercher	chaque	fois	la	même	receAe	 La	noter	une	fois	pour	toute	
à Compétence
Brièveté
@JOHAN_ALPS		
@MARGAUXLERGO	60	
Limiter	le	travail	de	lecture,	la	saisie	et	les	étapes	
Écrans	
Tunnel	d’achat	
dans	Amazon	
à Compétence
Brièveté
@JOHAN_ALPS		
@MARGAUXLERGO	61	
Limiter	le	travail	de	lecture,	la	saisie	et	les	étapes	
Code	
à Compétence
Comment créer les meilleures réussites business ?
@JOHAN_ALPS		
@MARGAUXLERGO	62	
A	l’aide	de	code	
bien	fait	
A	l’aide	
d’expériences	
u]lisateurs	bien	
pensées
Identifier les besoins : do-goals vs be-goals
@JOHAN_ALPS		
@MARGAUXLERGO	63	
Hassenzahl,	2003	:	les	gens	perçoivent	les	produits	interac]fs	selon	deux	dimensions	:		
Qualités	pragma]ques	
Qualités	hédoniques	
Capacité	à	soutenir	l’accomplissement	de	«	do-goals	»	
Exemples	de	do-goals	:	passer	un	appel,	acheter	un	livre…	
Capacité	à	soutenir	l’accomplissement	de	«	be-goals	»	
Exemples	de	be-goals	:	être	compétent,	être	en	rela]on	avec	
les	autres,	être	autonome…	
	
La	sa]sfac]on	des	besoins	psychologiques	est	au	cœur	de	l’UX	
Hassenzahl,	M.	(2003).	The	thing	and	I:	understanding	the	relaSonship	between	user	and	product.	In	M.Blythe,	C.	Overbeeke,	
A.	F.	Monk,	&	P.	C.	Wright	(Eds.),	Funology:	From	Usability	to	Enjoyment	(pp.	31-42).	Dordrecht:	Kluwer	Academic	Publishers.
Do-goals vs Be-goals
@JOHAN_ALPS		
@MARGAUXLERGO	64	
Besoin	de…	
Communiquer	?	 S’éclairer	?	 Se	déplacer	?	
Ou	plutôt…	 Rela]onnel	?	 Autonomie,	sécurité	?	 S]mula]on,	
réalisa]on	de	soi	?
Dans le cadre du développement
@JOHAN_ALPS		
@MARGAUXLERGO	65	
Ø  Do-goals	:	développer	sur	du	code	existant	(enrichir,	débugger…)		
Ø  Be-goals	:	?	
	
Lallemand,	C.	(2015).	Towards	Consolidated	Methods	for	the	Design	and	EvaluaSon	of	User	Experience.		
(Doctoral	dissertaSon).	University	of	Luxembourg.	h*ps://publicaAons.uni.lu/handle/10993/21463	
Sa]sfac]on	de	ces	BE-goals	:	salarié·e·s	et	patron·ne·s	content·e·s
Incitation
@JOHAN_ALPS		
@MARGAUXLERGO	66	
Écrans	
Voyage	SNCF	
Moyens	mis	en	œuvre	pour	amener	les	u]lisateurs·trices	à	effectuer	des	ac]ons	spécifiques,	mécanismes	
faisant	connaître	aux	u]lisateurs·trices	les	alterna]ves	
à Autonomie
Homogénéité et cohérence
@JOHAN_ALPS		
@MARGAUXLERGO	
Facebook	
Choix	de	concep]on	conservés	pour	des	contextes	iden]ques,	et	différents	pour	des	contextes	différents	
à Autonomie
Compatibilité
@JOHAN_ALPS		
@MARGAUXLERGO	68	
Interface	adaptée	aux	caractéris]ques	des	u]lisateurs·trices,	au	contexte,	aux	tâches	
Source : http://www.designferia.com/meubles-design-chambre-enfant-lola
Vie		
courante	
	
à Autonomie
Readability
@JOHAN_ALPS		
Vie		
courante	
	
à Competence
Lisibilité
@JOHAN_ALPS		
@MARGAUXLERGO	70	
Caractéris]ques	lexicales	de	présenta]on	des	informa]ons	
Code	
à Compétence
Densité informationnelle
@JOHAN_ALPS		
Limiter	le	nombre	d’informa]ons	présentées	en	même	temps	
Vie		
courante	
	
à Compétence
Tiens	toi	
droite	
Souris	
Dis	bonjour	
Dis	merci	
Dis	s’il	te	
plait	
Ne	mets	pas	
les	coudes	sur	
la	table	
Propose	
ton	aide	Ne	mets	pas	
tes	doigts	
dans	ton	nez

Contenu connexe

Plus de martinsson

De legacy au tdd - Agile pays basque
De legacy au tdd  - Agile pays basqueDe legacy au tdd  - Agile pays basque
De legacy au tdd - Agile pays basquemartinsson
 
Usable software design - code utilisable
Usable software design - code utilisableUsable software design - code utilisable
Usable software design - code utilisablemartinsson
 
Une architecture agile et testable
Une architecture agile et testableUne architecture agile et testable
Une architecture agile et testablemartinsson
 
Pyramide des tests
Pyramide des testsPyramide des tests
Pyramide des testsmartinsson
 
Changer Pour Mieux Coder
Changer Pour Mieux CoderChanger Pour Mieux Coder
Changer Pour Mieux Codermartinsson
 

Plus de martinsson (7)

De legacy au tdd - Agile pays basque
De legacy au tdd  - Agile pays basqueDe legacy au tdd  - Agile pays basque
De legacy au tdd - Agile pays basque
 
Usable software design - code utilisable
Usable software design - code utilisableUsable software design - code utilisable
Usable software design - code utilisable
 
Une architecture agile et testable
Une architecture agile et testableUne architecture agile et testable
Une architecture agile et testable
 
Pyramide des tests
Pyramide des testsPyramide des tests
Pyramide des tests
 
Changer Pour Mieux Coder
Changer Pour Mieux CoderChanger Pour Mieux Coder
Changer Pour Mieux Coder
 
Mikado
MikadoMikado
Mikado
 
Mikado
MikadoMikado
Mikado
 

Usable software design ncraft