Tag Info

Hot answers tagged

48

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:


23

I suggest you to show the 'added date' as additional attribute (column) to the documents and color the date of the new entries: Alternatively you can set the text of the date bold.


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


10

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


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


8

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


6

As it happens with Gmail interface, the 'newness' of unread emails is differentiated by a momentary 'new' tag that hides itself after a few seconds. That's how gmail tells today's unread emails apart from yesterday's unread emails. However, this doesn't apply to your case. The solution to my mind is a simple timestamp, visible in each row, for example '2 ...


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


3

"If you want sex just say it" Or in other words - convey information in the clearest, and most direct and concise way (rather than using nth degree semantics). Visual features will constitute nth degree semantics. You stated that new documents are always at the top of the list. If new documents are indeed of real interest to users, just give it to them: ...


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


2

You could use a faded background animation (I think Wordpress uses it in the admin panel). It would work as follows: The user lands on the page the page The new items in the the list are highlighted by a background colour (and perhaps even the label new) Over a period of 3 seconds (or less) the highlight and the new label fade to the background colour of ...


2

I'm against of using "new", that does not add enough value to an updated item in a list that frequently has added items. Using timestamps like: "1h", "2d" is going be an standard, so people can recognize it, they have the same experience in their social networks app such as facebook, twitter, and gmail, you can also see this representation form in Android ...


1

This is also just an opinion but it is based on some facts. Just like @DA01 has a hunch on question comments, most probable answer is "because someone on the OS UI team decided to make it that way". But why such a choice was made? The same can be asked about links, why they are blue. I have always explained the reason for these color choises to be the ...


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.



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