8

I'm currently putting together a page that consists of a grid of offers (say 24).

The data I want to display along with a pic means that each offer will take up approx 200-300px square - not dissimilar to the way Fiverr displays gigs. I'll display them 3 abreast on larger screens down to 1 abreast on mobile.

Each grid-item has 2 link destinations, one going to the offer detail page and the other directly out to a third party website where the offer resides.

Ideally the customer needs to be told what they need to do before reaching the site - Facebook, Twitter, App download, Sign up etc. I've looked at similar sites and they tend to deal with this badly - ranging from trying to cram some information into the original grid item to just linking out with no info.

I have the instructions available - but I don't want to take either of the above routes, so I've been looking at other options:

  • Responsive modal.
  • Extend the grid cell downwards.
  • Slide an overlay in from left/right.
  • Don't allow the user to link out from the grid.

I'm really unsure at to which approach to take if any - I'm no UX expert, so any advice or alternative solutions appreciated.

Improve this question

5 Answers 5

Reset to default
2

First of all there's no need to put that information (i.e., what needs to be done on the target page) in the grid cards. It seems too granular. Make that grid about discovering new offers and not how they work exactly. Once the user selects one of the offers it means he/she has some interest in it so it's safe to show extra details.

"Slide in" doesn't sound appropriate in this case. I'd recommend a separate page or modal. Explain there what the user is expected to do on the target page and place Call to Action at the bottom. But also make it easy to go back to the grid (e.g., back button or X in the top right corner) and continue where the user left previously.

Improve this answer
1
  • Thanks for your answer - on reflection I agree about the slide in. The only reason I was contemplating a modal was to keep the user from going to and fro between the details pages and the grid. However, even Google goes to a new page on its Play website. The easiest option by far is a new page, but the easiest option isn't always the right option.
    – John O
    Commented May 6, 2016 at 14:52
1

Solving complex problems is often about what you can lose instead of how to add something new. What is the use case for displaying those needed steps? Are they critical to the users' decission making while on the overview? If they are, can you drop any other information? It's hard to give precice tipps if we don't know who your users are and what their goals are.

To make the card more simple one route I might try is limiting the actions per card to one. Giving them both options upfront seems overly complicated. By moving the order button to the top of your details page the journey gets more linear and the user has only one decission to make at a time. discovering the offers -> choosing one to get more details on it -> ordering it.

It can make sense though in a high frequency scenario where your users know how your app works (eg can tell the difference between the two buttons) and rarely need the details page. If you're able to get statistics compare the two buttons and see how the usage is distrbuted between them.

Improve this answer
0

You could do some guerilla usability testing on some or all of the design options you are considering. http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/

This type testing is very low tech, quick and cheap.

Simply create some simple mock-ups. You don't need to create pixel perfect full colour images, or html prototypes - you could just create simple paper prototypes or draw on a white board.

You can now test them with real users (or co workers not related with the solution, i.e. receptionist) and the feedback you will receive will be invaluable, because you will quickly see which ideas resonate with people.

Improve this answer
2
  • Thanks for the reply - lol, don't think I'm allowed to pounce on the receptionist.
    – John O
    Commented May 6, 2016 at 11:33
  • I'm not sure why you got downvoted! If you are struggling with a decision like this, testing is a great idea. Also, can confirm guerilla testing can be very fast and cheap. If you can't use your coworkers, approach strangers in a coffee shop, ask if they'd like to help test a website.
    – nachoproblem
    Commented Apr 5, 2017 at 23:15
0

Small responsive fun designed models will work the best. For a period of time Modals were not in style, but now they're back in all over the web.

Improve this answer
0

The application I work with has a very similar elements. The way I approached the problem was to add a dropdown menu (added the icon on the bottom right corner)** to show details of the offer and make sure I keep the user in context. Depending on the amount of content you are displaying arrange the link to third parties accordingly.

Note: arrangement of content would vary based on your priorities or the information you want to highlight .

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.