Tag Info

Hot answers tagged

114

The illusion is caused by bright areas exciting retinal neurons while surrounding dark areas simultaneously inhibit them, causing bleed (lateral inhibition). Thus, the idea is to reduce the bright areas at the corners so that those neurons aren't excited as much. By putting the images closer together, you can lessen the illusion and use screen real estate ...


62

You could try to use a short description of the actual cause, e.g. no budget


54

Ideal line length is reasonably short or reasonably long; what's generally esthetically pleasing to read is generally a good indication. Columns in a web context make sense only if you were focusing on very compact content; which defeats the purpose of using columns beyond beautification. The reason they don't make sense otherwise is not because they are ...


27

A common solution for table cells that are not available or applicable in certain situations (such as your %Δ for a budget of 0) is to use the placeholder text n/a (or N/A).


21

Consistency is key here I think. So, for currency, always use two decimals and align every number to the right. It took me some time to make sense of the table you displayed in your post. I would go for something like this: tender qty amt 5.00 1 5.00 10.00 1 10.00 100.00 1 100.00 0.05 1 0.05 0.10 1 ...


18

As Franchesca explains the problem seems to arise when there are strong contrasting colors in the grid. In your case: Dark images and white background. This page describes how the problem can be dealt with when styling tables: "Avoid using dark and heavy grids". Another post I found discussing this (and other) optical illusion(s) states the same ...


12

You could use an exclamation mark icon that shows a tooltip on hover to explain exactly, what it means and what is missing / what value is bad: download bmml source – Wireframes created with Balsamiq Mockups


11

I'm not sure what's "nested" about it, but that's beside the point :). Trend considerations aside, the good thing about it is that it lets you display items of different aspect ratios without cropping the images, or with minimal cropping. It's good when you expect your users to consume the content by quickly scanning the page visually, and to rely on the ...


11

I think the following micro-changes could improve your current design. Remove gray frame around the icon. Vertical lines of the frame "activate" the Gestalt principle of continuity and limit the space for text inderneath the icon, see red lines on the picture. Use the whole word to describe an icon when possible. I'm not native English speaker, and Con is ...


11

The contrast between the white background and the dark edges is a significant factor. If you can't change the colours themselves, try setting a radial transparency gradient on each thumbnail which fades towards complete transparancy at the edge instead of having a hard edge. See this page on gradients in css for ideas on how to achieve this effect.


11

You might consider having a word with the users and ask what they think they should see, though be careful, their initial reaction might be 'zero', which is DEFINITELY not right in any mathematical sense. I personally would leave the output blank, or perhaps use the term 'undefined'. If they really want to see a symbol, then I think you could safely put the ...


10

I guess if you put the rows a bit further away, and perhaps give a visual clue on baseline it should work. See: http://jsfiddle.net/s35bh/2/ A bit subtle perhaps, therefore not necessarily the best solution, and you should be able to do this through alignment and proximity rules, but it does the job. My rule of thumb is: if you're out of options grid ...


9

I agree with WebDevelopteer, having different categories of things in the same column is not very intuitive. But you can go a different way. This is a (very) quick idea. How about having the verification icon first, and only once it's been clicked and verified it shows you the Primary selection as a different button? The verification button would have two ...


8

The convention is to have an upward arrow for ascending lists and a downward arrow for descending lists. It doesn’t work. In usability testing I’ve done, users are evenly split on whether my name ends up at the top or bottom of the list no matter which arrow you show. Part of the problem is there is just something cognitively weird about an upward arrow ...


8

1. List: + Easier to eye scan title texts as the texts of all items are aligned, + Allows longer title texts, +/- Implies an order, - Slimmer click/tap area risking selection of an adjacent row. 2. Grid: + Easier to remember where an item resides, spaciously, + Easer to click/tap without mistakes, + Allows higher detail of icons, - Implies row or ...


8

Your second mockup is spot-on. This system consists of 3 elements: record name (email), status switch/indicator, and an action (remove/edit). In addition the possible statuses (unverifified/verified/default) can be changed only progressively upward (i.e. no skipping or downgrading). Thus, there's absolutely no need to have a separate column for validation ...


8

I think indeed it may be the Approve button that throws off your users. The push-button style suggests an action already taken once you click the button. What is the problem of just using a normal checkbox instead? A check box does not carry the idea that an action will immediately happen if you check it. If you want to prevent users from unchecking them, ...


8

I would use multiple visual cues to make it very clear what the current state of the data is. Giving meaningful and immediate feedback is key to creating a positive user experience where there is no ambiguity about what has or has not been saved. I would use a combination of an enabled/disabled save button, styled check boxes, icons, and color to represent ...


7

Option 3 (of the options shown) - it immediately gives the user the next piece of information that the user needs after reading the field label. Immediately after reading the label, even before looking at the entry field itself the user will be thinking about the value to enter and wondering what units or how to work it out. I know all three options show ...


7

There's an opportunity here for a little bit of fun, learning, and dare I say it, gamification. The problem with showing distances is - it's just a number. It needs a relationship to make it real. And if you use a relative percentage compared to the person who has ridden the longest distance for example, then you run the risk of tying the data too strongly ...


6

The most widely used approach that I've seen is to use an ellipsis to indicate that there is more text, like this: You can then provide a tooltip on hover to show the user the complete name. On Mac OS, Apple tries to condense the text as a first step. They do it by reducing the space between letters and words. The idea is to show you as many characters ...


6

Netflix combines three methods in their queue. You can drag-and-drop, but also specify a particular row number, or click to move it to the very top: What I find interesting about their approach is that they have put the "Top" icon (circled in green) right there on each row, as opposed to requiring the user to make a selection and then click somewhere at ...


6

Also check out this link: http://www.informationarchitects.jp/en/100e2r/. They propose to have 100% font size (the browser’s default), 10–15 words per line (usually 50% of a browser window with default font), 140% line height — which sounds pretty reasonable for me.


6

I had to do something similar for mapping virtual channels in an ATM switch. Adapting this to your situation: Check-as-you-go: Remove the restriction of all rows changing together by working on a shadow table. This is the only sane way to make your warnings and error messages be timely and make sense. When everything is OK, then the user can commit ...


6

What you are describing is standard wildcard functionality, so you could append a * to the end of the start string (which is nice and standard); or perhaps + which could be fairly intuitive; or even % which is used by various flavours of SQL. As well as the Regular Expression ^ as described by Ben Brocka (which would go at the start of the string). I don't ...


6

A few thoughts. To tell the user that each cell is expandable you could use the standardised triangle that turns downwards after click. Further, you can enhance the feeling of "clickability" by changing cursor and add a hover effect (change the appearance of the hovered cell). Your idea to only use colors to indicate states (like green for OK) might be a ...


6

Gmail does something that works pretty well, and has been around for a while. Firstly, when you search for a particular string (in this case 'ebay' which gave me loads of results to work with) and then choose to select everything on the page (from the checkbox in the top-left) then it produces a message saying: All 20 conversations on this page are ...


6

Try putting the number over the icon and the text below the icon:


6

If the user is very likely to want see the more-info details you could find it worthwhile to go to a fixed master-child UI layout, similar to illustrated. This provides affordance and fixed positioning for data. download bmml source – Wireframes created with Balsamiq Mockups Note details area could be positioned at right hand side of ...


6

The first thing that comes to mind for me is the little inline arrows you see in stock tickers. The arrow indicates whether the actual value is above or below the forecast, and you can still use a gradient from yellow to red to indicate how far away the actual value is from the forecast.



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