11

I am redesigning a website from the early 90's and trying to make it more "responsive". An issue came up that involves two images on the homepage when viewed on mobile devices. These images are linked to corresponding webpages that can be found within the website. When the images are viewed on mobile devices they are very small and difficult to see.

I thought that these clickable images could be turned into buttons at the mobile level, which would provide a better user experience for users however, the thought came to mind that this may confuse users. I have searched for patterns approaching this dilemma and have come up empty handed.

What is the best approach for clickable images from desktop to mobile?

Would a desktop image that turns into a button on mobile devices confuse users?

Example of Images on Desktop turning to buttons on mobile

enter image description here

Improve this question

4 Answers 4

Reset to default
7

Why don't you try the usual responsive solution? When displaying the images on mobile, switch from a side-by-side to a stacked view. The same images which the web users see are there and they can click whichever one they want.

Regarding the issue of clicking image to visit page: The visual cue problem is similar on both platforms. You can add a hyperlink or a button beneath the image as a repeated functionality with better cue.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • Thank you RK for your help. I looked at many responsive websites over the weekend and I noticed your example matched with other websites. I definitely want to avoid images siting side by side as they could be chopped on on various screens. Stacking images is the best approach.
    – Courtney Jordan
    May 16, 2013 at 11:38
  • @CourtneyJordan you're welcome :)
    – rk.
    May 16, 2013 at 11:40
1

In a paper titled "Mobile Web Browsing: Usability Study," Sujan Shrestha found that if users are familiar with the desktop site, changing the navigation on mobile can confuse them and slow them down.

That said, if your entire display is essentially just those two buttons, I doubt anyone's likely to be confused about which one they need to click as long as you mantain consistency in positioning and labeling between desktop and mobile.

Improve this answer
0

I am assuming the "content" in your illustration is text, and that will go some ways to make the association between the mobile buttons and their desktop counterpart. Also, using the same font, color, etc. will reinforce that association. If the images on the desktop version could be abstracted into icons, even better.

Improve this answer
1
  • The customer had requested the use of images rather than icons. Icons would of been a nice solution and easier to translate from desktop to mobile.
    – Courtney Jordan
    May 10, 2013 at 17:45
0

I would recommend against it since old users would associate the website links with those images and changing them into buttons might potentially confuse them. An approach you can go for is to use responsive images which will scale in size and hence allow the user to view them on a mobile device.

I also dont know the use those images serve but if they are significant visual affordance about the website (e.g. one website could be an ecommerce site and other could be an internal portal), then just providing two buttons could confuse users unless they know what to expect. Also the similar shape and size of the buttons could cause accidental clicks leading the user to the wrong website

Improve this answer
3
  • The images are on a safety website and one image is for adult safety while the other image is for child safety. Within the images I tried scaling down the images on mobile and they are difficult to see. I thought about stacking the images vertically but a common complaint is users hate to scroll.
    – Courtney Jordan
    May 10, 2013 at 17:41
  • @CourtneyJordan - Where are you hearing this complaint? Most mobile users are used to scrolling to some extent, due to the nature of mobile interfaces (larger text sizes, smaller screens, etc). If you're not getting this complaint from the people actually using your sites, I'd take it with a grain of salt.
    – Shauna
    May 10, 2013 at 18:09
  • @Shauna: I forgot to mention this is in regards to a homepage look/feel only. Co-workers have been in debate in if the homepage should be scroll-able or not. That's why I posted my question on stack exchange because I am not sure what the current convention is.
    – Courtney Jordan
    May 13, 2013 at 11:42

Your Answer

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

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