MOBILE VIEW: additional info in horizontal scroll vs. modal vs. accordion

Question

I am working on the mobile view of a website with profiles on it. On those profiles there are a lot of categories/groups filled with tags and other information. In order to keep the page clean and the visitor focussed, the details of these categories are not all initially visible.

During my research I found three possibilities to display detailed information:

What are the pros and cons?

Initially I would like to use the first example for displaying graphical content (images, icons) but I am wondering if I am missing some major UX or technical issues? Is there a problem with horizontal scroll on mobile websites? And why is it that AirBnB for example uses the 2nd option in their app but the 3rd option on their mobile website (amenities section)?

Answer 1

Few questions to ask yourself about the users:

1. Are there any benefits from seeing more images side by side in a grid?

2. For example, do the content in the thumbnails express an extra layer of information when listed in a grid?

3. Ask yourself the same question when the grid is expanded within option 3.

Some more considerations:

1. How many images will a profile have? If unlimited, a grid layout in a separate screen will be easier to browse vs confining them into a row.

2. The same issue prevails in option 3, the user might want to see all images while referencing other content in the profile. However, it will be hard to browse if the thumbnails push the extra content all the way down.

In summary, Option 1 for few images, Option 2 for many images, Option 3 for few images but the benefit of seeing a grid.

There are probably many other use cases for your particular website. Run some user testing if possible, if not, populate the wireframe with actual content and consider the pros and cons for each layout considering the needs of your user in this particular page.

For example, for Airbnb, maybe the user has to constantly check the images to visually confirm the apartment amenities and layout when reading the description. It might be easier for them to simple scroll and open the image, rather than having to open the grid in a separate screen and choosing the right image.