Hot answers tagged

183

As soon as the user hovers over the image add an overlay which enables him to hit the download button. This is just an example, you can make this more subtle but I think it will work good with your users current behavior. Since they will hover over the image to start their "right-click-workaround" and will see the download option. You should still have a ...


122

In a scenario like this I would make the UI reflect the possible states of the application. You can only have one manager so there should only be one place to select a manager, everyone else can either be a cook or a server, so provide mutually exclusive UI widgets for those states. Here's an example: In practice you might want to make it a little more ...


106

Since the change of current Manager is an action invalidating the other options - I would present it in a manner which communicates clear what is about to happen. Waiter/Chef are Radio-Buttons, so only one of them can be active at a time - and only one person can be manager and nothing else.


86

Here's why: Microsoft’s design guides talk about weak affordance: Text and graphics links use a hand […] pointer […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a ...


73

Do not do anything to the right-click. It's an expected behavior on the browser level. You know you shouldn't "hijack" the right-click or you wouldn't call it hijacking. Provide users with a better tool. If your users are essentially saving images themselves outside your app, your app must not be helping them save those images. Nobody wants to save ...


50

If the data is tabular, then I see no reason why one shouldn't go with tables? After all, the whole purpose of table element is for showing such type of data. But if your query is how to make the tabular data look more beautiful, then read this article - http://darkhorseanalytics.com/blog/clear-off-the-table/ In nutshell, it follows the principle of 'Less ...


49

I do work on a professional webapp for visually impaired, screen reader users. We do user testing regularly, and this has been raised many times during user test sessions that disabled elements that are required for completing a step/ flow (or are just generally too important to be missed) should be focusable with TAB key. If disabled buttons are not ...


46

There is a reason why your user is not selecting download button and usability testing is the best way to determine why. However in case it's a matter of positioning the download button in a place a user might look vs hidden some where in the UI, the following options/examples may help: You could add a download button overlay image (in bottom right corner) ...


43

Don't do that, there are different approaches to filling out values, and for some it would be disruptive. For example if the user just wants to change the last digit... A good, non-disruptive alternative would be a small "clear input" button.


39

It's worth considering the historical order in which these things came into being. Buttons existed from very early in the days of GUI computing. They had a shadowing effect to give a skeuomorphic impression of their being akin to physical buttons, which served to indicate they could be clicked much as one would push such a physical button. Indeed since you ...


35

You could have the input value selected when the user clicks on the input. This way the user can just press backspace or start typing to change the value or copy the value instantly.


30

To select one option of a limited number of choices, Radio Button Inputs would be the way to go.


29

According to W3C cursor: pointer The cursor is a pointer that indicates a link. The specification only indicates that links are meant to have the pointer cursor. Buttons are not meant to have the pointer cursor in the specification and probably that is the reason why Browsers don't assign it by default and we have to do it manually. As to why would ...


27

It's not the end of the world if you skip headings in this manner because users will most likely still find the content, but it does go against the general structure of the content and adds a bit of a barrier to users accessing using assistive technologies. One way to look at it is to think of a trio of military chaps in a room; a General, a Sargent, and a ...


26

As a dedicated right-click-save user, I can say that I wouldn't bother with a download button normally, and I'd assume I saved the full version (and be mildly annoyed at the website if I found I hadn't). There are two issues here. The first is, your image isn't labelled (or doesn't identify itself) as a thumbnail. If it isn't, then I'm going to expect it is ...


22

I'd like to point out how Wikipedia does it. When you enlarge a photo by clicking on it on Wikipedia, you're presented with the photo, some details on it, and an unobtrusive "download" button. When you right click on the displayed photo, the "download" button is pressed for you, showing "Download original file". Though this ...


21

This seems like a user grouping task. Both of these examples have the nice property that you can print out a similar view to display in the kitchen. You also don't have any duplicated / redundant text of Cook / Waiter over the whole UI, so I think it's easier to read and understand who is working with who. Tag style Similar to how you add tags to a Stack ...


17

Monospaced fonts can provide what you're looking for, a good example of which is Consolas. Consolas is the standard font on Visual Studio 2010 and 2012, and Eclipse Indigo (the standard font on previous versions of both these tools being Courier New 10). Consolas has been described (here) as "...a sans-serif font with the same rounded appeal [as Lucida ...


15

Without a delay just moving your mouse around would accidentally make popups appear and flicker across your screen. That'd draw users' attention away from what they're doing if they didn't expect it, and probably annoy them because flickering stuff provides no value to them: it's unlikely they wanted to read the title and unlikely they even have the time to ...


15

This is a bit of a tricky one. Normally, with regular form elements, it would be best to fully remove anything you can't interact with or serves no purpose. However, that particular button you're talking about (the "next step" button) can also act as a guide to the level of completion - i.e. you are not able to proceed to the next step until the form ...


14

According to the W3C, the default behavior of radio elements with no default control set to checked is undefined. http://www.w3.org/TR/html401/interact/forms.html#radio Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are ...


14

In a scenario where the user has to select simple true/false or active/inactive states then I would really suggest that you use a checkbox control rather than a control which would feature redundant input, eg: In a case such as this there is no reason to add additional input controls which provides the same result as a more simple checkbox control. Either ...


13

Use this - This is a higher role view. In manager's view, the manager won't have a combo-box for his/her role. The view of other two will be plain text - no combo-boxes. download bmml source – Wireframes created with Balsamiq Mockups


11

The modifiers for the tab key are already taken for important window management tasks: Ctrl+Tab cycles through tabs in the browser as it is the common shortcut for cycling through open documents in the same application. Shift+Ctrl+Tab goes backwards. Alt+Tab switches between running applications. It would be unexpected, and highly annoying, for a single ...


11

As a marginal counterpoint to @Leths, a screenreader lets you get to every object on the page, whether disabled or not, unless they're specifically hidden from the screen reader using aria-hidden=true. I didn't want to add this as a comment to @Leths' posting because this is an important point related to the main question. That is, even if you decide not ...


10

If you include the correct ID (unique name, used only on 1 set of input/label) for both elements, the order of elements doesn matter. Alternatively you can use aria to describe the input like this: <input aria-labelledby='id-of-my-label-located-elsewhere'>


10

I don't believe it's an issue, however, if you're worried about it, you could rephrase each statement to have the assertions ("The above is correct and yada yada...") followed by the checkbox with "I agree" as the label. I'd watch how people use your page and see if any of them have this problem before trying to fix a problem that may or may not exist "in ...


10

First of all, you should not end a page at blank spaces. You should end them at the top portion of the next page's first section. Use scroll icons such as this: to inform the user about the available action.


9

Have you considered using cards to display your data? They're becoming very common with Google's Material Design and can be quite appealing to the eye if styled correctly. Ofcourse placing too much detail in a Card is "against the rules" but it is a viable alternative. For convenience, you can always provide a button which changes the view to display the ...


9

Short answer: do not select any radio button. Leave them all unselected. However: This is a misuse of radio button control where (by convention) there always should be one (and only one) selected item. Unselecting all items is not noisy (IMO) and recall same pattern used in other controls (for example combo boxes) where no selection means multiple ...


Only top voted, non community-wiki answers of a minimum length are eligible