ALTER FACE Test Heuristic
10 likes5,692 views
The document introduces the 'Alter Face' heuristic, designed to identify flaws in the construction of web applications by focusing on user interface components. It outlines several principles for interactive elements, including visibility, timing, and positioning to ensure a smooth user experience. The heuristic aims to enhance usability by addressing common issues such as element collision, expansion, and removal during user interactions.
ALTER FACE Test Heuristic
- 1. ALTER FACE A Test Heuristic for UI Web Applications by Júlio de Lima [email protected]
- 2. Heuristics are processes that occur naturally in the human mind. They help to solve problems and make decisions in conditions of uncertainty, replacing the complex way of doing something, with a simpler one and still bringing satisfactory results. Gabriel Santos Heurísticas de teste de software: o que são e seus benefícios by Júlio de Lima [email protected]
- 3. Introduction Modern web applications are built using components made by hand and this causes a series of failures to arise. With this in mind, Júlio de Lima introduces the ALTER FACE heuristic proposes tests that reveal flaws related to the way in which Web applications are built based on their components. In the next slides, we will see in detail what constitutes this brand new heuristic. by Júlio de Lima [email protected]
- 4. Let's Start! Are you ready? by Júlio de Lima [email protected]
- 5. 1 2 3 Elements that must become interactive when an option is selected Elements that should become visible after click Elements that should disappear after a click by Júlio de Lima [email protected] Examples: OptionsOptions I don't have options! Button Without Hover Button With Hover Event-activated objects must have their state changed when the event is triggered. Activation ALTER FACE
- 6. The object must occupy only the layer to which it was destined. Layers ALTER FACE by Júlio de Lima [email protected] 1 2 3 Elements that should be behind elements in focus Elements that should be ahead of blurred elements Elements that, when triggered, should be ahead and all elements Examples: Option 3 Option 2 Option 2 Option 1Option 1 Options I don't have options! Button Without Hover Button With Hover (The Toast should be in front of everything)
- 7. The object must be visible for the exact time it was intended. Timing ALTER FACE by Júlio de Lima [email protected] 1 2 3 Elements that should disappear after 10 seconds Elements that should appear 3 seconds after the click Elements that should gain focus 10 seconds after the form is saved Examples: I am a toast! I will disappear in 5 seconds :,( 6 seconds later... I am a toast! I will disappear in 5 seconds :,( The Toast should disappear after 5 seconds
- 8. No Yes Exclusion Principle ALTER FACE 1 2 Two objects cannot occupy the same space at the same time. by Júlio de Lima [email protected] Two elements must not be on the same layer and space at the same time An element that overwrite another element Examples: Are you sure? No Yes Two popups in the same space at the same time is not useful!
- 9. Removable objects must allow to be removed or hiden. Removable ALTER FACE by Júlio de Lima [email protected] 1 2 Elements that should be removed from the UI with a click on the X button Elements that should be hidden after executing a keyboard command Examples: 3 Elements that should disappear after lost the focus Options I don't have anyone! Button With Hover Options I don't have anyone! Button Without Hover (The Toast should disappear)
- 10. Float ALTER FACE 1 2 Floating objects must float while scrolling. by Júlio de Lima [email protected] Elements that should be positioned elsewhere while floating when scrolling Elements that should float during scrolling My Brand Menu 1 Menu 2 Menu 3 Menu After Scrolling (The menu should still visible) Menu Before Scrolling Examples:
- 11. Achievable ALTER FACE 1 2 3 List of Items ----------------------------------------- Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Objects that are not visible in the scroll area must be achievable. by Júlio de Lima [email protected] A small box that houses a larger number of items should have a scroll bar that allows you to see all the elements An element carous that shows only 3 of 5 elements should have controls to view all A menu that has more elements than your viewing area and that provides control for viewing additional items Examples: These three items are behind the visible area and there is no Scrollbar :,(
- 12. Collision ALTER FACE 1 2 Option 2 The object must not collide with others while moving. by Júlio de Lima [email protected] A toast that pushes other elements while moving to their target position A top menu that pushes the page down while moving Examples: Option 3 Option 2 Option 2 Option 1 Option 1 Options I don't have options! Button With Hover Button Without Hover (Buttons should not move)
- 13. Expansion ALTER FACE 1 2 My Brand Menu 1 Menu 2 Menu 3 Internal objects must not overlay or expand the normal size of containers. by Júlio de Lima [email protected] A menu item should not change the size of the menu when it receives focus A maximized element should not push elements around it Examples: Menu Without Hover Menu With Hover (Button should not change the container size) My Brand Menu 1 Menu 2 Men
- 14. Have you been using the ALTER FACE Test Heuristic? Tell us how it was! by Júlio de Lima [email protected] bit.ly/ALTERFACE
- 15. Happy testing! Contact me for questions or feedbacks by Júlio de Lima [email protected]