Tag Info

Hot answers tagged

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:


13

Your idea could work, but you will need to take care when designing it. Variable sizes can appear confusing. Breaking the balance and symmetry that often marks pleasing design. However, it's not impossible. This experiment, called elastic lists provides an excellent example with several ideas. Get the code: Github link for elastic lists This is a bells ...


12

Something I have seen code syntax highlighters do is to indicate long lines of code by changing the color of text that exceeds the limit, something like the below: download bmml source – Wireframes created with Balsamiq Mockups The advantage of this method is that it takes up no additional space. However, it doesn't give any indication of how ...


12

You are asking the wrong question. The point of showing the number of items in the cart is to show the 'Status' of the cart. It works as a really good signifier to the user that he has added X number of items in the cart. Scenarios to think when you do not show number of items: You add an item to the cart, but, actually the click didn't register and you ...


9

Best strategy is to place the cursor in the first expected input field as soon as the page loads. Remove the need for selecting the field completely. However, if the user can have more than one alternatives, you should avoid auto selecting since it can lead to confusion. As for the next fields, use a proper tab-navigation to allow a mouse free typing ...


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


7

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


6

Highlighting the entire row should be a good indicator. download bmml source – Wireframes created with Balsamiq Mockups Changing the background color (of the row) also helps. download bmml source


6

I would take a proactive approach that does not annoy the user through beeping or auto-focusing. If users are clicking just outside of the field, it is possible to provide some progressive enhancement to the input fields via JavaScript that might help with this issue. The input field could be surrounded by a < div >, or other element, that provides some ...


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

I don't see any disconnect at all between the two. Most people will have a faster response to objects on the right side of their visual field. So that applies to moving balls; tigers that want to eat you; etc. It is about a tiny increase in visual perception. This has nothing to do with learned importance. Reading from left to right has taught us that ...


5

The main challenge with inline editing are: Discoverability Clarity of state/When does system save For discoverability, you want to bring up the field outlines when the user moves around naturally. In your example, I would suggest do it on mouse over of the specific bar in the graph and not just the text label. Then on click it should become edit field. ...


4

let me start with saying that the count down is wrong from my point of view. The problem I see here is that you count down to 0. This would suggerate the user that he reached the absolute limit. As you just want to indicate a proposed max. that's not what you want. I like the other two ideas - and find the progress bar interesting, though it might e quite ...


4

Just building on MFrank2012's answer here, but I'd be tempted to cut down on the number of characters and use the short word 'guest' (if it makes sense to do so) and would also make it more obvious that the other names are links with a (blue) color, or underline


4

Since the soft limit seems to be based on available space and not an actual character count, why don't you just display that visually? Give them a full text box to work with and an overlay that displays the limited space.


4

There are two main eye patterns for web design. The first: F-Shaped Reading Pattern The second: ZigZag/Triangle Reading Pattern Deisngs that fit into one of these two will work well with user. However if you are looking to get even more creative you can try out using the Golden Ratio to design a webpage, specifically placing content in the golden spiral ...


4

Case 1: You do not have a timer and the notification stays till it is manually dismissed. There is nothing wrong what-so-ever with this approach. You display a message for undoing and it stays till the user has read and consciously dismissed it. Great persistent feedback and lesser chance of missing it even if you are distracted somewhere for a while. The ...


4

I would recommend going with the cancel option since most users might not be used to the concept of using the close icon (the X) to close a dialog in a mobile app (you have them in websites) but then with a mobile app the common affordance to what I have found is to to have a distinct cancel option as shown below:


4

Am using different messages in different examples, pick whichever one sounds better in your use case. On the page where the user is redirected, display a message 'Your file is being downloaded. Check your download folder when the download is completed.' Be explicit to avoid confusions. You can have a splash/overlay message saying 'Your file download has ...


4

Since there are different type of roles it is probably a good idea to separate their management. You could use something like that for roles that are unique : I'm of the assumption that the administrator knows the users she want to be Finance and Legal. download bmml source – Wireframes created with Balsamiq Mockups If it is relevant you can ...


4

If you want to sort of the selection, then you should go ahead and add a label to the field. Else, you will be breaking your system's consistency. download bmml source – Wireframes created with Balsamiq Mockups


4

As I rule, I try to avoid using hover for any actions that the user might want to perform. Hover is great for giving out extra information, but an action (or access to an action should be available on click. What will happen if the user is on a touchscreen without hover capabilities? Will that option not be available for him/her?


4

I ran your image through this color blind checker Coblis — Color Blindness Simulator and this is what is your site or app is going to look like to a person who suffers from monochromacy Now taking this as an example,you have a number of problems here Your links have no visual affordance that they are links and they just seem like text without color. ...


3

Default signs in most finance systems are arrow indicators: red down arrow for spent and green up arrow for received money. So it is the clearest way to represent balances using such signs, for instance in such compact way: download bmml source – Wireframes created with Balsamiq Mockups


3

I would go with option E - most people read from left to right. They examine things from the left and then slowly move to the right, if you have played games in the heydays of 8-bit you would see that most games have you start on the left and moving towards the right. So it is easier to notice you could drag the items if the icon is on the left. However, I ...


3

Personally I'd go with option B on iOS, and would look what do Androids show. On desktop, I'd use some kind of "bumping", it's important, you can see why here in this answer: http://ux.stackexchange.com/a/25032/16685


3

One visual cue to convey that there is more to be seen outside the viewport is to let the bottom region fade into dark gradually. Consider this depicted example. Without visual cue: With visual cue: The pattern uses the same visual cue as the rotating date pickers. The solution somewhat sacrifices the last row of the viewport since the fade makes ...


3

It's hard to answer that without knowing what the general styling of your page / the context looks like. However, I have a Simple Suggestion I would suggest a combination of horizontal padding and opacity, like this one (rough sketch): I left the numbers in just for explanation. This will work without them. You could add a mouseover effect to the ...


3

the text field should be wide enough to accomodate the recommended amount of text, and no wider. i'm assuming that the limit is meant to be about equal to the width of the video player, so style the input field so it matches the font size and typeface of the displayed text, and make it the width of the video player. when the text starts overflowing the ...



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