Hot answers tagged overflow
59
You can try displaying multiple lines per record, e.g.:
You can also go a step further by making each row a summary view that can be expanded so that the user can see the complete record, e.g.:
In the pic above, the user is interested in Mary Jane's complete info, so she clicks on the triangle next to her name to see the complete record.
Also, I ...
52
Since all of the data after the first three columns is numeric, you can round off so that the width of each column is as little as four characters.
Full Length Shorter Tiny
------------ ------- ----
$143,573.39 $143.6k 144k
112.54% 112.5% 113
198,220,329 198.2m 198m
You might decide which version to display based on the ...
40
How about just showing the last 10 years of awards with the 11th tab to take you to the previous 10 years?
2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older
Most people are only going to be interested in the most recent awards, so having the older awards a second click away shouldn't be a big problem.
Clicking on "Older" would show a page with the ...
36
This sounds a lot like the case where the customer/product manager wants everything on the main screen vs. everything you need on the main screen.
IMHO, a dashboard screen should give the user an overview of everything... but to get details on a portion of that (e.g. the 275% increase in sales this week) the user should "drill-down" into the data to see the ...
25
It really depends on a lot of factors such as what is the frequency of certain characters that you expect and what fonts are available to you.
I did a rudimentary by creating a program that iterated through all of the available fonts I had installed on my Windows box at the time and printed a line containing each printable ascii character on to the screen ...
23
What kind of “hundreds of options” is it?
If the field is something like “Country”, where the user will know what their answer should be without needing to read all the options, then a drop-down list is ideal: it’s simple to use, it takes little page-space, and is easy to display and to select from on most devices.
If the field is something like “Airport”, ...
22
If I understand your question right, this is a very common problem since iOS and Android (and now OSX) never show any scrollbars. A good way to go are visual clues: If the canvas is full the last item shouldn't be completely visible. Here's an example from one of our apps:
Additional thought: Windows 8 Metro (and WP7) heavily rely on visual clues for ...
18
Your design Kristof is pretty good already. You've nailed very important things like stopping this mouse and keyboard back-and-fourth action - that's gonna ruin the experience. And I'm with you on the drag-and-drop - yuk!
I've just refined your idea a little:
Obviously mouse clicks on the left items will add them to the right.
You would want the text ...
17
Do not insert hyphens, not even soft hyphens ­ (which only appear if the browser forces a line break). This is because the user might hand-write it or read-dictate it to someone else with the hyphen. Which would be inaccurate and bad.
You could however use the <wbr> element to indicate an optional word break opportunity. This will tell the ...
15
Being a large animated element usually placed in a prominent location on the website, marquees are extremely distracting for the users, until they become used to them and ignore them as they would a banner - at which point the marquee ceases to be harmful and becomes merely useless.
On the occasions when they are noticed, it's usually because some specific ...
14
When I was involved with tax software (not in the US by the way) we also had a huge variety in the length of the labels. We dealt with it by adopting a two-column approach. One column for the labels and one for the answers. So the answers would always be at the same distance from the left edge and long labels would word wrap and simply take up more vertical ...
13
This is something we've had issues with as well - perhaps this solution may help you.
The general idea is that you have a group of elements with arrows at the top and bottom (these can be clicked to scroll). The user can also use a scroll wheel inside the area to scroll. There's no real affordance of scrolling here, but it provides an alternative method for ...
12
Option 4: Customize the display of long headings
You might not be able to rename the product(s) with long names - but you can change the way that long names display.
Possible approaches include:
Truncate long product names at 60 characters, adding an elipsis (...)
Variations: After how many characters should you truncate? do you look for a word break? Do ...
10
The highest voted answer in the question linked to by the other answer suggests collapsing all the page links into an input field. I've seen this, but scrolling a list and clicking a page number is a mouse-oriented activity, so I've never been inclined to switch to the keyboard to enter a page number. Perhaps the input could be a super-input that takes text ...
10
The psychology of a dashboard is to create an immediate feeling of being in control. As you say, it is a launching point. You need less tabular information on your dashboard, more graphs.
Put each of your important tables on a page of its own. Give each the space it needs. Make the dashboard a central control point with summary information. Use ...
8
Split buttons are great when there is one command that users use most of the time and then several others they use some of the time. Users have fast single-click access to what they need most of the time, while less commonly needed commands are still available but out of the way. This is how it contributes to a “fluid” (fast and mindless) UI: by promoting ...
8
Coda
Sometimes a smaller font is a good way out of a tight spot. In this particular case, at least for the part of the problem shown, there is a better solution which is both clearer, and takes half the space, like so:
I'm using a large enough font, 18pt Tahoma (open image in new tab to view full size), that the negative letter-space is OK.
8
You can try breaking the title in two by moving part of it into the answer options. It would also make the answers clearer, like this:
Post-Tax Deduction Codes for Domestic Partners: () Needed
() Not needed
This may cost you some height, because you'll probably need to stack the answer options on top of ...
8
I agree with Erics, do not add a hyphen.
Another option might be to add a css text-overflow attribute of ellipsis, which will "crop" the link:
a {
max-width:50px;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
Unfortunately, this prevents the entire text of the link from being visible. It does allow users to copy the ...
7
Table is a good way to present large amount of data. However, with more than 5 columns, tables quickly become unreadable. If your data is changing in real time as you say it, the user most likely won't be able to make his decision in time if he had to look at 15 different columns at the same time.
Google knows best that the most important consideration when ...
7
What we do is devide the screen basically in two parts. The upper half shows details about the currently selected item, the lower half shows the grid with paged list of items available.
The tabcontrols are used to display detail / collection views of what we call nested details/collections. These are formed by foreign key relationships.
Hope this helps ...
7
One example I can think of that might inspire something is MLB.com's standings page, which is a table with way too many columns, but the customization interface is instantly intuitive (to me - and it's not aimed at a techie audience). You probably don't want MLBAM's arbitrary limit on the maximum number of columns you can have, of course.
The biggest UI ...
7
(Since I'm kind of lazy, I'll start off by reprinting my answer from a thread on SO)
Recent scientific research has found that:
[A] target size of 9.2 mm for discrete
tasks [i.e., single-target pointing tasks] and targets of 9.6 mm for serial
tasks should be sufficiently large for
one-handed thumb use on
touchscreen-based handhelds without
...
7
Refer to the iPhone Human Interface Guidelines (that link goes to the guidelines for web apps) for recommendations by Apple. There's a chapter called "Provide Fingertip-Sized Targets" you can probably use to base your decisions on.
Also, don't guess, test. Get some people with differently sized fingers (within your target audience) and have them try to ...
7
A few considerations:
What OS is this for (or is it for multiple)?
Are there any constraints or known limits on your hierarchy?
Is there a search option provided?
No. 1 is important as you noted... because the Mac Finder would be foreign to most Windows users.
No. 2 may provide assistance also. E.g. finder works good if you have a shallow tree, but if ...
7
I think your solution:
is the better one in this case. The other two are incredibly confusing to read and figure out.
In the top one its hard to tell what the result anser to the question is when click yes or no. It takes an extra moment to go back and look for the word "required"
In the last one it is confusing if the check mark is a yes or uncheck is ...
6
Any actionable icon without descriptive text is probably a bad idea, just because it leads to confusion like this. Though, the most common icon I've seen for "cancel", besides the red X, is the "No" symbol:
(Source: http://iconfinder.net/data/icons/c9d/cancel.png)
6
I work for a company that publishes magazines, so I'm a little bit familiar with your domain.
I imagine the list of advertisers doesn't change much from issue to issue, so I would have the advertisers from the previous issue selected by default.
Since you only have 150 advertisers, and about half of them will be selected, I wouldn't bother with a search. I ...
6
My last real job involved a lot of this kind of work. There was never an easy answer. It's just a matter of carefully looking at everything and trying to consolidate and represent every option in the most concise manner. You can then supplement the areas that need further explanation with help text.
As for the Import / Export preferences, there are a ...
6
How about this?
and this
Also, I think that if you break down the list on the left to a few labeled logical groups, it will be a great improvement.
Only top voted, non community-wiki answers of a minimum length are eligible
