1

I create a report generator app that the user may design and export a report from her data.

The main action is to export the data and sometimes the user may need to change the report design.

I have created a two action button that the main action is Export Report and the secondary is Design Report. When the user hover the configuration part of the button then the text swift to the left and 'Design Report' label appears.

Even without the hover effect I think the specific icon can indicate that it is for designing reports.

Do you think that this design is intuitive or do I have to create a helping video for the user to understand the usage of this button? enter image description here

Do you think that these colors are right for the job or should I change the color scheme?

Improve this question
1
  • If the hover effect over the icon triggers the display of the button feature, is there also a different effect for the on-click? And what about when the user hovers over the text label?
    – Michael Lai ♦
    Mar 11, 2017 at 23:42

3 Answers 3

Reset to default
1

That "cool button" is cool, but not intuitive. Intuitive means familiar for users. Have you really seen that kind of button is used widely?

I think you can have cleaner UI and simpler interaction, like pictured:
enter image description here

Pro:

  • Export button has no any icons (clean UI)
  • Secondary action is close to the target object (Gestalt's proximity principle ) and less prominent (clean UI). The Edit icon is quite familiar to users, still, there is a tooltip
  • No video needed
Improve this answer
2

I decided to create the two action button because I want cleaner interface and because the two button interface seemed cluttered.

In that case you can try simple button drop down style which is less cluttered and user friendly also. as Anthony Hobday said it is also not mobile friendly.

You can give a try with below design (Ignore the icons, yours are good actually) :

enter image description here

Improve this answer
1

I do not think it is intuitive.

I study software for a living, and I've never seen a pattern like this, that I can think of. Before I read your post fully, I wouldn't have thought I could change what the button did.

Also, I like to avoid hover as an interaction because it's not mobile-friendly. You can't hover with a touch screen. Even if you're only planning to release this for desktop PCs, can you guarantee that the people using it won't have a touch-screen hybrid laptop or desktop?

I think the basic approach to what you have designed would be to include two buttons, rather than one. One button is for "Design Report", and one is for "Export Report".

Is there a reason you have decided not to use two buttons? If the answer is, "One button seems cooler", then there should be a better reason.

To answer your final question, if you need to create a video to teach people how to use a button, I think that's enough evidence that the button is too complicated.

Improve this answer
2
  • Well it's cooler, that for sure! I decided to create the two action button because I want cleaner interface and because the two button interface seemed cluttered. The users are desktop only and my thought was that even without the hover effect the icon by itself is self explanatory. Thank you for your answer, I will have this in mind when I take the final decision.
    – Menelaos Vergis
    Mar 10, 2017 at 18:38
  • If it's space/area clutter, call the buttons 'design' and 'export' instead of 'design report' and 'export report'. This way it'll fit in the same space you currenty use.
    – PixelSnader
    Mar 11, 2017 at 14:13

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.