Hot answers tagged

182

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 ...


125

You're not supposed to leave radio buttons blank. They're allowed to be blank so you can avoid setting defaults as mentioned in the question about setting a default gender. You can't not pick a gender, it's a required field, though you can leave a "prefer not to say" etc. option; this is different than the user never touching the radio button, however. If ...


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.


79

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 ...


77

I believe it should as the entire region in the eyes of the user is the "selection". Now, I think you can look at this issue from another angle which is...how do we remove the perception of a space? One solution is to include a background surrounding the checkbox and label region. On hover over, the background could change color as well to further ...


74

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 ...


46

1. What if the user doesn't have a keyboard? It's a perfectly valid case. Not only some forms doesn't require interaction with a keyboard (for example a form with a couple of combo boxes, radio buttons and checkboxes), but even if the form has textboxes and textareas, it doesn't mean that at the exact moment of form submission, the user is ready to use her ...


46

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) ...


44

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 ...


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.


42

I cannot understand why you'd want a reduced click area for your form field. Including the "for" attribute on the label tag allows you to increase the clickable area. It has been a web standard for quite a while and I would think most users are used to the behavior at this point, making it a convention. While it may not be a convention in software, I would ...


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.


34

You want to look to sites such as W3.org for advice on this. Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one. The W3C accessibility guidelines 1.4.8 state (emphasis mine)...


30

The difference you're talking about is often referred to as "fixed width" versus "liquid" or "fluid" layout. Fixed width layouts are MUCH easier to design than liquid ones. When you design a liquid layout, you need to control many more aspects of the display. What happens when windows shrink beyond a minimum width? What parts of the window can stretch, ...


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 ...


27

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 ...


26

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


26

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 ...


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 ...


25

I agree with the user Jared Farrish: it's to make the content more readable. If a paragraph spans the entire width of the browser window, it can be taxing on the eye to move from the end of one line to the start of the next line if the paragraph takes up many pixels in width. Many websites tend to limit the width of the page for this reason. In addition, ...


25

I would answer no, the terminal punctuation should not be included in the hyperlink. It is the text that is being hyperlinked rather than the construct that the text is a part of. Consider other such constructs: in an unordered list you wouldn't include the bullet point in a hyperlink, in an ordered list you wouldn't include the number, and in a comma-...


22

Answer to your main question: This is legacy behavior left over from the desktop. This is how desktop applications did it for decades before the web came along. When form elements appeared in HTML, they just copied the behavior from the desktop. The original designers of the radio button probably couldn't have imagined how this control would be used over ...


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 isn't the best way to do it, ...


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 ...


18

Those 'others' are incorrect. This is the intention of the HTML label tag and the proper implementation. Aside from the accessibility necessity, it's also a huge UX benefit especially with things such as checkboxes, where it's usually easier to hit the label than the tiny checkbox. If these 'others' hate it, tell them to stop clicking on the labels. ;)


17

A dropdown with 450+ values is extremely unusable on any device, including desktop. But you say that you're only looking for a solution for the basic mobile version, so let's stick to that. Probably the best way to simplify this for the mobile is to have a first screen/popup display the alphabet, then as you tap a letter you drill down to the list of ...


16

People can reach non-front-pages of your website by many means, so you should have some indication on every page that it is possible to switch languages. If the clean design is that important that you don't want the complete language switching widget on every page you should at least provide an obvious link to the page (or pop up) that enables language ...


16

An article Optimal Line Height says: Typog­ra­phy ref­er­ences con­sis­tently put ideal line height at 1.2 ems (a mea­sure of type equiv­a­lent to the the let­ter height or point size of a typeface). The main idea of defining a proper line height is to let text paragraph look solid and be pleasant to read (if you will choose a bigger line height the ...


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