Acceptance Criteria for user story on interface adapting for devices with different resolutions

Question

I'm working on acceptance criteria for user story on interface adapting for multi-device Web based application

So far I have initial user story: As a User I want to use the application on different devices of the most commonly used resolutions so that I can view all information

with following preconditions: User uses a mobile (360×640) User uses a tablet (768x1024) User uses a desktop (1920x1080)

As for acceptance criteria I have come up with following:

1. *mobile

All information should be displayed correctly If the content does not fit the window size then a scroll bar on the right side should appear Informations has to fit the window in any layout (landscape/portrait)*

2. *tablet

All information should be displayed correctly “Log in page” has to fit the window in any layout All other pages should have scroll bar on the right side All other pages should have scroll-to-top button Informations has to fit the window in any layout (landscape/portrait) When window is resized (any page displayed), scroll bar should appear on the right side*

3. *desktop

All information should be displayed correctly “Main page” and “Log in page” has to fit the window in full screen mode All other pages should have scroll bar on the right side All other pages should have scroll-to-top button When window is resized (any page displayed), scroll bar should appear on the right side The elements of the page should be decreased proportionally (when the window is resized.*

I assumed that interface adapting should be very common issue for most of products, I have tried to google possible acceptance criteria, but had no much success.

Would you say that the above user story and the acceptance criteria are adequate?

Perhaps, someone can share their experience on acceptance criteria with similar user-stories or provide some guidance on requirements for interface adapting for devices with different resolutions

Thank you in advance

Answer 1

I think that your acceptance criteria are a bit to specific on the implementation details. For example, “Main page” has to fit, then “Log in page” must fit, etc.

You are fixing some details within your acceptance criteria and that does not give you the flexibility needed when building a responsive application.

Your acceptance criteria should probably capture general rules that apply no matter the device then introduce some "breakpoints" for how many designs you want to build (basically the view port sizes where your @media queries start to dictate how elements appear on the screen).

So I would personally start with a few rules like:

• application needs to be responsive;
• horizontal scroll should not show up, content gets expanded vertically when not enough available space
• min/max widths for media queries are 360×640 for mobile, 768x1024 for tablet, 1920x1080 for desktop (or some commonly accepted dimensions);

These should be enough for designers to accommodate the UI/UX for the three use cases (mobile, tablet, desktop) and for front-end developers to add the media queries to handle the elements in the page.

Start simple and expand.