Do UI workflows be defined as a part of acceptance criteria?

The other day my development and testing team were in disagreement regarding the expected behavior of one user workflow. In this case, the UI team had requested a specific pop up to be displayed every time the mouse hovers near a particular icon. When the testing team found the user workflow to be broken, the development team felt it was not a valid bug since it was not captured in the acceptance criteria for the UI user stories. This prompted me to pen my thoughts about why i feel UI workflows should not be defined as a part of acceptance criteria.

What is acceptance criteria?

Acceptance criteria help the team uncover the value behind a story. They help slice the user story into breakable component, and explain how these components are meant to interact independently and in conjunction with each other. Moreover, acceptance criteria are outcomes and and not click steps. They can also be used as a checklist to determine if all the parameters, such as functional and performance, of a user story have been met.

Should user acceptance criteria be used to describe the elements of UI?

In short, the answer is no. UI elements are vast and require extensive documentation. On the other hand acceptance criteria need to be unambiguous and crisp at the same time. Let's look at this with the help of an example.

Let's consider a user story in which a user can enter personal data on a form to submit a request. We can consider three different scenarios that could occur during this workflow.

Scenario 1: User workflow is completed and the request is sent successfully

Use case - User data is input correctly

Result - The user can click the submit button, which was greyed out earlier

Scenario 2: User workflow is not completed since the user has left fields incomplete

Use case - User data is incomplete

Result - The user can not click the submit button. Additionally, user is displayed an error message with the incomplete fields highlighted

Scenario 3: User workflow is not completed since the user has entered incorrect data

Use case - User data is incorrect

Result - The user can not click the submit button. Additionally, user is displayed an error message with the incomplete fields highlighted

Assuming we conclude the above user workflows will be addressed, there are still a bunch of additional questions that need to be answered. Factors like, where on the screen should the submit button be placed. What color is the button? Do we need for it to be greyed out? What kind of a button is it? What are the color schemes that would be used to highlight the incorrect/correct data fields? It would be a futile task to capture all these details in words and adding UI specification would make the specifications confusing. It would make more sense to add actual pictures will do a much better job.

Moreover, how would adding elements such as the color and style would help understand the intent of the feature? As mentioned earlier, acceptance criteria are meant to describe the business value of the story. They help cross functional teams understand the “real life” use cases that are expected to be followed by the customers.