Tag Info

Hot answers tagged

47

There is at least a single benefit for those not using a mouse - Normally you are able to tab between input elements using the keyboard, this is an indicator as to which element currently has your focus.


46

As you correctly point out, this is a typical problem you encounter when you have a set of only two elements: it's never quite clear which element is selected. It seems to be difficult to highlight or otherwise emphasize the currently selected element. In my experience, stemming mostly from user research we did, what works for one user, doesn't work for ...


27

If there are two options, you could consider using a switch/toggle instead of an arrow as well. Took this from Dribbble:


19

Here's the thing about downvotes; almost no one downvotes. And another thing: some people downvote anything. Don't believe me? Check out this chart from when Youtube stopped using 5 star ratings: For the most part people are much, much more willing to note what they like, not what they dislike, at least in simple rating systems (fully written reviews tend ...


12

Try to use the Yellow Fade Technique (YFT), nifty way to make a spotlight on recently changed area. But the YFT can be indicated also for a case where the items are recently edited or updated. Its also used here in stackexchange. Next moving into another solution, where you may highlight the items with different color BG making the items prominent that ...


9

You want to indicate that a button a pressed, a setting is active. What do you have to work with? Colour, placement, additional visual elements. And size. I personally think that Andreas Weder suggests a good solution. But if you feel that a tab-like pattern wouldn't fit in your design I have another suggestion. In addition of indicating with colour you ...


9

After doing some reading it seems that the highlighting in fact does help the user as people have come to be reliant on the UX/UI guiding them through the page and showing where they are focusing as well. For example if a user is filling out a form and using the "tab" key to jump from area to area they want to see the focus highlight change from what they ...


7

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


6

Make a mark outside the boundaries of the buttons. This way it's clear the highlighting is not part of the button itself, but a state of the interface. This example lacks affordability, but I think it shows very clearly which one is selected.


5

You are absolutely correct. LukeW discusses this in one of his writings: "Clearly communicate when an error is blocking someone from completing a form. Error messages are arguably the most important element on a form when present. Make sure they appear that way! Display error messages in context so they can be resolved quickly. Provide actionable remedies ...


4

Another take on things: MOST (in my experience) downvotes have nothing to do with the actual validity of the content, but are related to personal bias of the voter towards the content creator or publisher (or in cases religious of other strongly held personal beliefs towards the content). First case would also include people downvoting everything not ...


4

One issue that comes to mind is accessibility - with a non-negligible percent of color blind people, you have to add another distinction (the strike through and underline). While one color might differentiate from the standard based simply on hue, differentiation more that that will be a challenge. Don't forget that a lot of documents get printed in ...


3

Since you're using (what looks to me) a standard component I assume that customization is limited. Therefore I would suggest that you use something that is easily accomplished, noticeable and recognizable. The Unicode for the paperclip would probably work great. That cues that there's something attached to the item (an image), it's clearly visible ...


3

The YFT Yellow Fade Technique is a nice way to highlight a single updated item, however it sounds like you could have multiple posts updated, and once the yellow has faded you will need another UI signal to show which posts are new. Other ideas to highlight updated posts in the grid: You could use a thin orange border (1-2px) on the left of the post. ...


3

Most email shows unread email by using bold titles, and read email with normal titles. This might work in your case, too. Depending on the size of the grid, you may want some other way to announce that there are issues (with changes) that need attention, such as putting the orange ball (like the badge used in some applications) in a fixed location on the ...


3

You could use the same idea that Facebook does with notifications. Show a message indicator as a dropdown menu which is great if you want to to track multiple to-do lists. Or show a list of recent changes since last visit on the home page. If the changes occur in real time also take advantage of the title tag so that people could see if something happens ...


2

I would use an [Edit] button which would be visible inside the cell. A click on the edit button would display the content in plain text format (assuming that the entire cell is a link) in a Text area or a TextBox. This would enable the user to mark content, copy and paste without having to worry about the link. When being in edit mode, I would provide three ...


1

As avi said, it shows that you're pointing to it. This is obviously useful if you're not using the mouse, as others mentioned. But it's useful even when you are using the mouse, even though there's a cursor that ideally also shows what you're pointing at. For example, if your cursor is on the edge of an element, it may not be obvious what's going to happen ...


1

What is missing is the visual separation of the UI elements. You need to separate them, and for that, changing opacity does not help much in this case. I would try t add wider borders between main image and thumbs - to indicate that separation, and another, even wider border around the current thumbnail, indicating that it is currently "separated out" in ...


1

I think a combination of the two would work. We do this a lot inhouse where we have to highlight a selection for the user so that when they are scanning the dropdown, they can easily see their current selection. BUT, because you are also indicating an image is attached, I do like the suggestion of adding some visual treatment near the control showing that ...


1

Browsers, by default, highlight active form elements. So I'd suggest that highlighting it certainly a common and, as such, expected UI interaction. As to whether or not you need to create your own active style, that likely depends on all sorts of factors regarding your specific project.


1

Do you need to show the selected one? A solution could be to not show the icon for the current layout and just show the alternative layout icon. The page layout itself tells the user which layout they have selected and you would have fewer artifacts (clutter) on the page.


1

You mean something like what Firebug does when inspecting elements? A simple css hover tag should take care of it. See the example here Or did you have something else in mind? Are you talking about keeping a list of highlighted items and then decreasing the intensity of the highlight as they get lower in the list? or as time progresses? The question is not ...


1

When the user click on the dropdown, the 5 inside will be marked read, then there should be a button inside the dropdown box to refresh to see the next 5 if there's more. The general idea is - when a notification is exposed, it's marked read.


1

Simple: you just provide a "copy" button next to the item. The way URL shortening services do:


1

At the very least you should be switching to the tab with the error on it, and highlighting the field with the error on it, yes. I'd also recommend: Highlighting the tab with the invalid entry via an "error" icon as soon as the error is present (making it not ugly is outside the scope ;-)). This would indicate that something is wrong on the tab well ...


1

Accessibility, as Dan Barak said, not just for color-blindness (red/green is a big problem there) but also for reverse-video. Make sure that whatever colors you choose do not assume the default environment; for example, Word's yellow highlighter totally breaks in a reverse environment. If you're going to use color-coded text you're pretty much limited to ...



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