Univention Bugzilla – Bug 32218
Usability: button look
Last modified: 2013-11-19 06:41:27 CET
Please convert "buttons" to real "buttons" to give the user a hint, that the "link" is in fact an action. For example if a disk is removed from a VM in UVMM, a dialog pops up to ask the user, if the image should be "deleted", "detached" or if the user wants to abort the dialog. Only the default action has a green border, the other two actions just look like normal links with a white background. It would help the usability to render those buttons as real buttons: A good read: <http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/>
Our "buttons" differ from "links" as they are black and links are green. However, I agree that this may not be very obvious.
*** Bug 32748 has been marked as a duplicate of this bug. ***
From Bug 32318: > The default (=green) button is in FF "much" larger than in Chromium.
From Bug 26418, comment 14: > Disabled actions have a greyed out icon. But as some actions do not have any > icon and the text is not greyed out in any case, it is hard (read: > impossible) to say whether an action is clickable or not. > > Example: "Execute" in join module
A first version with adapted buttons has been committed: univention-management-console-frontend (3.0.94-1) unstable; urgency=low . * Bug #32218: adjusted button look
Fixed. With some adjustments in UDM. univention-management-console-frontend (3.0.96-1) unstable; urgency=low . * Bug #32218: CSS fine adjustments for button styling univention-management-console-module-udm (4.0.40-1) unstable; urgency=low . * Bug #32218: adjust translation to avoid breaking the search form layout
The border within the button icons has been removed as it is futile now. univention-management-console-frontend (3.0.101-1) unstable; urgency=low . * Bug #32218: adjust button icons to new style, CSS/HTML cleanup
Created attachment 5514 [details] Screenshot of Updater module. The button in the updater is broken (see screenshot).
please have a look at system setup → network → add (InterfaceWizard IP page)
Maybe Bug #31411 can also be resolved while re-working the icons. Some part is already done by r44966, but the icon for "pull-the-UVMM-plug" still needs to be fixed and a button for "ACPI-shutdown" is still missing.
The disabled green button needs to be adapted.
(In reply to Alexander Kläser from comment #8) > Created attachment 5514 [details] > Screenshot of Updater module. > > The button in the updater is broken (see screenshot). Fixed. univention-updater (9.0.21-1) unstable; urgency=low . * Bug #32218: fixed styling of back button on progress page (In reply to Florian Best from comment #9) > please have a look at system setup → network → add (InterfaceWizard IP page) The +/- buttons in the MultiInput widget have already been fixed. (In reply to Philipp Hahn from comment #10) > Maybe Bug #31411 can also be resolved while re-working the icons. Some part > is already done by r44966, but the icon for "pull-the-UVMM-plug" still needs > to be fixed and a button for "ACPI-shutdown" is still missing. Revising the icons is out of scope w.r.t. this bug. I simply removed the border around the icons and adjusted +/- slightly in their size to look ok. (In reply to Alexander Kläser from comment #11) > The disabled green button needs to be adapted. Fixed. univention-management-console-frontend (3.0.102-1) unstable; urgency=low . * Bug #32218: adjusted styling of disabled submit button
Added a little shadow effect to hovered buttons to make them appear more like buttons. univention-management-console-frontend (3.0.104-1) unstable; urgency=low . * Bug #32218: added shadow effect to hovered buttons
In FF, the category buttons in the live search for the overview page are rendered with a shadow. On Android + iPad the buttons need to be adjusted slightly.
The shadow effect is apparently applied to a button and its text. I find the text-shadow that is visible while hovering a button irritating, as the text is looking blurred. Maybe the shadow effect should be changed so that it is only visible around the button border.
The text on some buttons can be improved: To show extended search options there is a button that has the text "(Advanced options)" on it, and its counterpart has "(Simplified options)". The parenthesis can be removed.
(In reply to Erik Damrose from comment #16) > The text on some buttons can be improved: To show extended search options > there is a button that has the text "(Advanced options)" on it, and its > counterpart has "(Simplified options)". The parenthesis can be removed. Good hint. Fixed. univention-management-console-module-udm (4.0.46-1) unstable; urgency=low . * Bug #32877: re-enable module options * Bug #32218: adjusted label of toggle button for search options
(In reply to Erik Damrose from comment #15) > The shadow effect is apparently applied to a button and its text. I find the > text-shadow that is visible while hovering a button irritating, as the text > is looking blurred. Maybe the shadow effect should be changed so that it is > only visible around the button border. As discussed, there was another similar feedback regarding the text shadow. At the moment I would opt for leaving it like that, because (a) it was like that before and (b) I am not aware of a different and better solution.
Can you add a fallback brackground color for a submit button. If the bg-image is not yet loaded the font-color and background color is white.
(In reply to Florian Best from comment #19) > Can you add a fallback brackground color for a submit button. If the > bg-image is not yet loaded the font-color and background color is white. Good point. I also adjusted the buttons for Safari on iOS slightly, for Android they looked fine. univention-management-console-frontend (3.0.126-1) unstable; urgency=low . * Bug #32218: background color to default button univention-management-console-frontend (3.0.127-1) unstable; urgency=low . * Bug #32218: adjusted buttons for Safari on iOS
(In reply to Alexander Kläser from comment #20) > (In reply to Florian Best from comment #19) > > Can you add a fallback brackground color for a submit button. If the > > bg-image is not yet loaded the font-color and background color is white. > > Good point. I also adjusted the buttons for Safari on iOS slightly, for > Android they looked fine. On hover of SubmitButton the background image is not displayed instead the background color is displayed.
(In reply to Alexander Kläser from comment #12) > (In reply to Florian Best from comment #9) > > please have a look at system setup → network → add (InterfaceWizard IP page) > > The +/- buttons in the MultiInput widget have already been fixed. They are again unfixed.
Points have been addressed. univention-management-console-frontend (3.0.130-1) unstable; urgency=low . * Bug #30004: fixed scoping problem with addNotification in umc/widgets/Page * Bug #30004: make sure that "your session has expired" is not shown when initially loading UMC * Bug #32218: changed order of buttons in logout dialogue * Bug #32218: remove margin-rigth from "add" button in MultiInput
No Changelog entry exists.
(In reply to Florian Best from comment #24) > No Changelog entry exists. Everything else is fine.
(In reply to Florian Best from comment #24) > No Changelog entry exists. Done.
Changelog OK
UCS 3.2 has been released: http://docs.univention.de/release-notes-3.2-en.html http://docs.univention.de/release-notes-3.2-de.html If this error occurs again, please use "Clone This Bug".