Member Avatar for Pavel Burminsky

Hi, guys!
I've just finished my work on our corporate website (pdgroup.co) redesign and now it is very important for me to receive your feedback. I have some doubts about the picture of our office on the front page - there is a button and its pushing adds some new elements there. But I'm afraid that it will be difficult for new visitor to unerstand that that red button in the center is working. Maybe you have some advice on how to make a hint for them.
Thanks in advance for your help.

  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Pavel Burminsky

Dani AI

Generated

A short usability brief for , building on 's hover idea.

The core problem is discoverability: the red element blends into the photo and looks decorative. Hover effects help desktop users, but they do not reach keyboard-only or touch users. Make the control look and behave like a real control (semantic markup, visible label/icon, clear focus state) and add a touch-friendly hint for mobile visitors.

A simple, accessible pattern to follow:

<button class="office-toggle" aria-expanded="false" aria-controls="office-extra">
  <span class="visually-hidden">Open office details</span>
  <span aria-hidden="true">+</span>
</button>

Use an actual button (not a plain image), toggle aria-expanded, and keep a visually-hidden label for screen readers. Add visible hover, focus and active styles, and provide a persistent small label or first-visit tooltip for touch users.

Practical tips: show a clear focus ring for keyboard users; use a subtle pulse or tooltip once only for first-time visitors; for mobile add a semi-transparent caption like "Tap to explore"; respect prefers-reduced-motion for users who opt out of animation (see the MDN note on reduced motion). Optimize by lazy-loading the revealed content and compressing office photos. Finally, validate discoverability with quick tests: keyboard-only navigation, a short 5-person hallway test, and simple analytics to confirm the click/tap rate. For ARIA guidance see the MDN resources on button roles and reduced-motion.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

Add a hover image, so when someone moves over it, it moves.

Member Avatar for Pavel Burminsky

Add a hover image, so when someone moves over it, it moves.

Thanks, that's a great idea

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.