Tag Info

Hot answers tagged

98

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


45

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


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


15

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


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


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


9

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

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.


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

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


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

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


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


7

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


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

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

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

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


5

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


5

The obvious answer is to scale the value by the user who has ridden the most in a year, ever. If your maximum is '500 miles', and someone has ridden 50 miles, their bar would be about 10% full. If this statistic is very important, one interesting way to display it would be to have a background bar-graph, like so: download bmml source – ...


5

I am not a big fan of greying out content since it gives the impression to users that a content cannot be edited or changed. I would recommend going with an approach where you allow users the flexiblity to select any email they want provided its already verified (refer to the mockup below). The last radio in this example is greyed out because the email is ...


5

Perhaps you could consider a design where you have a bar-chart of prices over your period. I have seen a design like that on airline sites, and I liked it a lot. Horizontally, you'd set your arrival dates, and vertically the price. You'd start with a standard-length stay, that the user might customize. I am not sure if showing a single night would make most ...


5

I have yet to see a situation where having to select twice again to resort is an issue, but if it showed itself to be, I would: Mark the new row that is no longer in order by changing the background colour. Change the sort icon colour to to show that the current sort doesn't hold. Change the to reflect that it will reapply the sort. Colour the colour of ...


5

Sorry, first it looks too complex. Still, calendar view provides much better user experience in date-related matters. This is an Excel quick sketch. The root of the promlems with you current design is in time perception by human and bad human abilities of mental manipulation with data. Some possible issues are: weak relation to current date requires ...


4

It's totally okay to leave sidebar empty, white space will give clean and professional look to a website. Take a look at some good examples of websites with single column: Trent Walton Sofa iA


4

Considering the answer to Why might right-aligned field labels be better?, first of all I would right-align the labels. That removes option one. The second option makes the fields harder to scan, and as should be clear by now (or by reading Luke Wroblewski's book about web form design), scannability in forms is extremely important. That leaves the third ...



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