ALTER

FACE Uma Heurística de

Testes para Aplicações
Web Modernas

by Júlio de Lima
iam@juliodelima.com.br
Heurísticas são processos que ocorrem naturalmente na
mente do ser humano. Elas ajudam a solucionar
problemas e tomar decisões em condições de incerteza,
substituindo a forma complexa de fazer algo, por outra
mais simples e ainda assim trazendo resultados
satisfatórios.

Gabriel Santos
Heurísticas de teste de software: o que são e seus benefícios

by Júlio de Lima
iam@juliodelima.com.br
 As aplicações Web modernas são
Introdução construídos com uso de
componentes artesanais e isso
causa o surgimento de uma série de
falhas que não eram comuns ao usar
componentes nativos.

Pensando nisso, apresento a heurística

ALTER FACE, que propõe testes que
revelam falhas relacionadas à forma como
as aplicações Web modernas são
construídas a partir de seus
by Júlio de Lima componentes.
iam@juliodelima.com.br
by Júlio de Lima
iam@juliodelima.com.br
by Júlio de Lima
iam@juliodelima.com.br
 Estão prontas?

Partiu!

by Júlio de Lima
iam@juliodelima.com.br
 ALTER FACE

Activation
Objetos ativados por evento devem ter seu
estado alterado quando o evento é disparado.

Examplos:

Elements that must become

1 interactive when an option is selected

Elements that should become

2 visible after click Options Options
Elements that should disappear after a
3 click

Button Without Hover Button With Hover

by Júlio de Lima
iam@juliodelima.com.br (No tolltip showed)
 ALTER FACE

Layers
O objeto deve ocupar apenas a camada a que
foi destinado. Option 1 Option 1
Exemplos: I don't have options!
Elements that should be behind
Option 2 Option 2
1 elements in focus

Elements that should be ahead

2 of blurred elements Option 3 Options
Elements that, when triggered,
3 should be ahead and all elements

Button Without Hover Button With Hover

by Júlio de Lima
iam@juliodelima.com.br
(The Toast should be in front
of everything)
 ALTER FACE

Timing
O objeto deve estar visível no momento exato I am a toast! I will disappear
em que foi planejado. in 5 seconds :,(
Examplos:

Elements that should disappear

1 after 10 seconds
6 seconds later...
Elements that should appear 3
2 seconds after the click

Elements that should gain focus 10

I am a toast! I will disappear
3 seconds after the form is saved
in 5 seconds :,(

by Júlio de Lima The Toast should disappear after 5

iam@juliodelima.com.br seconds
 ALTER FACE

Exclusion Principle
Dois objetos não podem ocupar o mesmo
espaço ao mesmo tempo.

Examples:

Two elements must not be on the same Are you sure?

1 layer and space at the same time

An element that overwrite

2 another element
No Yes
No Yes

by Júlio de Lima
iam@juliodelima.com.br Two popups in the same space at the
same time is not useful!
 ALTER FACE

Removable
Os objetos removíveis devem permitir sua
remoção ou ocultação.

Examplos: I don't have anyone! I don't have anyone!

Elements that should be removed from the
1 UI with a click on the X button

Elements that should be hidden after

2 executing a keyboard command Options Options
Elements that should disappear
3 after lost the focus

Button With Hover Button Without Hover

by Júlio de Lima
iam@juliodelima.com.br
(The Toast should disappear)
 Menu Before Scrolling
ALTER FACE

Float
My Brand Menu 1 Menu 2 Menu 3

Objetos flutuantes devem flutuar durante a

rolagem.

Examplos:

Elements that should be positioned elsewhere

1 while floating when scrolling

Elements that should float during

2 scrolling

by Júlio de Lima Menu After Scrolling

iam@juliodelima.com.br
(The menu should still visible)
 ALTER FACE

Achievable
Os objetos que não são visíveis na área de List of Items
rolagem devem ser alcançáveis.
-----------------------------------------
Item 1
Examplos:
Item 2
A small box that houses a larger number of items should
1 Item 3
have a scroll bar that allows you to see all the elements

An element carous that shows only 3 of 5 Item 4

2 elements should have controls to view all
Item 5
3
A menu that has more elements than your viewing area
Item 6 These three items are
and that provides control for viewing additional items
Item 7
behind the visible area and
by Júlio de Lima there is no Scrollbar :,(
iam@juliodelima.com.br
 ALTER FACE

Collision
Option 1

Option 2
O objeto não deve colidir com outros durante
o movimento. Option 1
Examplos: I don't have options!
A toast that pushes other elements while Option 2 Option 2
1 moving to their target position

A top menu that pushes the

2 page down while moving Option 3 Options

Button With Hover Button Without Hover

by Júlio de Lima
iam@juliodelima.com.br
(Buttons should not move)
 ALTER FACE

Expansion
My Brand Menu 1 Menu 2 Menu 3

Menu Without Hover

Objetos internos não devem se sobrepor ou
expandir o tamanho normal dos contêineres.

Examplos:

A menu item should not change the size

1 of the menu when it receives focus

A maximized element should not

2 push elements around it
My Brand Menu 1 Menu 2 Men

Menu With Hover

by Júlio de Lima (Button should not change the container size)
iam@juliodelima.com.br
 bit.ly/ALTERFACE

Você tem usado a Heurística

de Teste ALTER FACE? Me
conte como foi!

by Júlio de Lima
iam@juliodelima.com.br
 Contate-me para
perguntas ou feedbacks

Bons testes!

by Júlio de Lima
iam@juliodelima.com.br