Tag Info

Hot answers tagged

96

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


86

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


61

If the columns are out-growing the rows, you can try to put the rows as columns


46

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


45

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


41

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


25

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


23

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


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

Do not insert hyphens, not even soft hyphens &shy; (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 ...


16

I know you've selected an answer, but I wanted to bring up something that I think is pretty important: data vs. information. I've been thinking a lot about this recently, so it's at the front of my headmeats. What you're doing is showing data. It's raw, it all seems really important, but in reality most people don't need to see the data. What they really ...


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


14

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


13

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


13

Good question! As always when it comes to small screen experiences you will have to focus on the core functionality. Ask yourself which columns could be removed and still present a meningful table and let the user select the additional columns that he is interested in. This solution might help you: A Responsive Design Approach for Complex, Multicolumn ...


12

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.


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


11

You could have a '...' tab and use some JavaScript (yay jQuery) to "scroll" to the right when you click it and reveal the other tabs. Then you could have an arrow on the left so you can go back to the newer tabs. (TY @ChrisF for the inspiration)


10

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


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

Semantically equivalent control would be a drop down list.


9

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


9

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


9

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


8

For the record, I like @ChrisF's answer, but just for kicks here's how Google Spreadsheets handles it.


8

Show only the current level of the hierarchy, and breadcrumbs


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

Without knowing the full details I would think of a common pagination like < 5 / 23 > The previous/next arrows should be bigger than the text - and touchable. Although the swipe still should be the main interaction to go from one page to the other. I guess this would make things perfectly clear. Although you'll loose the option to directly jump to a ...



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