Yo, I’ve been working on a site for a client, this sucker, and am happy where it’s at but I’ve got a little problem I’ve been trying to think through.
There’s a load of copy and links strewn throughout with image hovers that illustrate the message and provide links to view content. There’s a few types of links, external, internal and just an image, which I’ve illustrated via the cursor change.
Bear in mind that this is a creative site which will mostly be viewed by employers, recruiters and head hunters so the typical ‘perfectly easy’ and ‘accessible’ rules are lax. This is more about telling a story and showing content in an interesting way.
The site is responsive however the experience on mobile is a little problematic as you might’ve already worked out, the popups work (for the most part) but aren’t ideal as there are two things missing:
- The subtle pre-indicator of what type of link is active
- The image hover teaser prior to clicking the link (as it’s now a tedious click to reveal image, click again to follow the link)
I’m at the place where I’m deciding what to do. The image hovers are a lovely way to reveal more about the subtext of the copy and also act as a teaser to explore further by clicking the link so I’m reluctant to disable it for mobile. Another option would be to have the link pop the image up and it centres on screen but this poses a few issues: First, the user may assume that it is simply an image popup and may click to view other images in the lightbox or click to close, instead they will be taken to the link. And second, it poses the same UX issue with not being able to identify what type of link it is and still having to click twice to view the image then go to the link. It adds more confusion.
So I’m here to pitch the problem and see if there’s a glaringly obvious solution that I’ve overlooked. Suggestions/opinions very welcome.
P.S. Please no comments on loading times, it’s a heavy one but, again, it’s for a select audience who will be viewing with purpose.