I have 5 radio buttons among which the user can choose: DTP, MMR, POL, HIB or HEP B and a small space in which to show these buttons.
The problem is that the labels are not very explanatory. If the user is not an expert in the field and doesn't know what the abbreviations mean, the interface becomes unclear. So I would like to stretch the labels.
For now I have added a tootltip when the user hovers over the code.
But I don't think this is the best solution.
I can replace the radio buttons with a drop-down list: in this way I could replace the abbreviation with its description. But I've never loved drop-down lists, I find them uncomfortable and not aesthetically beautiful.
I would prefer that the form was not bigger than
300 x 80px and the desktop version has priority over mobile (so no mobile first!).
Are there any better solutions I could take?
(sorry for my bad english)