47

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


40

Yes. Just yes. Though I do UX work, I am speaking as a user on this one. As a user, I very much want you to help me easily follow a row of data from end to end. I want to easily be able to see what lines up and what goes with what. It is too easy for me to look at a column on one side of a row, then to look at what I think is the opposite side of the same ...


36

By using text + image. You can use something like this: Bonus points for adding a subtle animation that catches even more attention.


27

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


21

In many sports apps when you check the standings table you only get limited data (such as no. of games, points) and when you want to see all columns (no. of goals, wins, etc.) you need to rotate the screen to landscape mode. Multiple times I've seen a solution like in the UEFA European qualifiers app - a logo with an explanatory text above or below the table....


20

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


17

If you want to avoid the simple and obvious solutions: place signs above the cubicles reminding people to be quiet encourage cubicle dwellers to discourage loud behavior through constant reminders ("Shh!" or "Please keep it down") I suspect the only cultural design cues you could rely on are reverence (church, monastery) or respect (library, courtroom, ...


14

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


14

Print full-size images of people at work similar to what sometimes happens with empty shop hoardings. This would be effective because it's a visual reminder that people are behind the blank cubicle walls whilst preserving the privacy of those working and preventing them from being further distracted (if you had see-through cubicle walls). Some alterations ...


13

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


11

Another "Macbook no scroll" UX problem... See, Apple's UX is arguably the best of the best. They set the rules for other people to follow and everything they do is copied, for a good reason. You could say they don't do many things wrong. Well, this approach is one of those few things that you can debate 'til the cows come home, but in the end empirical ...


11

It think it's just an additional feature that may not be used by majority of users, because as you start reading the content; your focus remains on the content, when you scroll slowly (as anyone would do while reading content) the indicator fails to drag attention. It only becomes noticeable when you scroll up/down at considerable speed. Its helpfulness to ...


10

Came across this post today and wanted to provide a response based on some developments in the past couple of years (since 2012). Google offers a good solution signaling its Gmail users of sortable elements by using two rows of stacked dots on hover (desktop)


10

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


8

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.


8

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


8

TL;DR No, alternate row colors instead. Long answer: Alternating row colors (usually white and light green) to make it easier to read lines in wide reports have been used way before computer displays. If that table had alternating colors to beging with, there would be no need for highliting the row when hovering over it. Above: Green bar continuous ...


7

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


7

Material Design is a framework with guidelines (it's comprehensive but a starting point): Test with users to determine what's best for them. Have you also considered striped rows (zebra stripes) if you think users need to read carefully? It sounds like they won't perform any selection or operations. One aspect of zebra stripes is that they clearly show ...


7

Keep it simple. You could redesign your UI to present icons with checkboxes -- New (Not Started), Started (In Progress), Completed Tasks -- and the user could tick all or none or any combination, and you could display results accordingly. This will work in a way that the user is already used to on most other UIs and there's no learning or confusion. ...


6

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


6

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


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

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?


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


5

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: https://ux.stackexchange.com/a/25032/16685


5

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


5

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


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