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 ...
I would use the following layout:
For uneven amount of pictures (5, for example), I would display like this
For situations when only 4 pictures exist, I would display like this
For situations when only 2 pictures exist, I would display like this
The reason to choose this layout is based on the fact that the images are centered in relationship with other ...
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 ...
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 ...
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 ...
For the purpose of reducing visual chaos, I think you need a different kind of grid. I don’t think the issue is dividing the page into the right size of little equally sized rectangles. Rather, it’s the division of the page into a small number of large rectangles neatly laid out for the eye to scan. These rectangles are not necessarily all the same size, nor ...
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
You've understood wrongly
Creating a layout grid means that you have to decide how you will structure your app. Where the navigation would reside, what will be the height of the header, body and footer, how elements inside will be positioned, etc. In other words, y you have to define the skeleton of your app.
This is what your colleague meant when ...
+ 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.
+ Easier to remember where an item resides, spaciously,
+ Easer to click/tap without mistakes,
+ Allows higher detail of icons,
- Implies row or ...
Generally, align the left of the field, not the text content:
There are several reasons for this:
Better alignment. For boxed input elements (i.e. with outlines, borders or shadows), the vertical | edges of the box tend to attract the eye as it scans down the left column so the form will be perceived as more organized if that vertical line is left-aligned....
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 ...
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 ...
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.
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 ...
I guess if you put the rows a bit further away, and perhaps give a visual clue on baseline it should work.
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 ...
Check your assumptions
There are a few assumptions in your question that require validation (and I assure you that the ecomm giants are testing).
Most people have big monitors now: Maybe. But what about their viewport? And who might you leave out when your target is everyone (like Amazon)? Older users often have their browser zoomed and don't even realize ...
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 ...
I think you should also try a card layout. For example:
This layout provides multiple benefits:
Aids quick scanning
Cards are easier to scan compared to tables.
Easily adapt to small screens
Cards will work better on mobile/smaller devices in this case compared to tables, as they can be organized to scroll in a single column.
Edit/delete buttons are ...
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 ...
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, ...
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 ...
Quite straight forward, and not an uncommon solution. There are two possible downsides here however, which I've heard users reaction in training sessions.
Users can't find the control. They see it, but it's not entirely obvious that you should use this one for delete or move to another location.
The drop down menu hides the selected items. When deleting ...
Pagination is flawed when it comes to interaction
Pagination is great in reducing visual load, but involves many functionality issues if records are to be interacted with.
You shouldn't select records that the user doesn't see. Doing so is an open door to malfunction (and sometimes data loss).
Use non ambiguous terms
select all is not ...
According to the article: How the Hermann Grid Illusion Affects What Users See
The hermann grid illusion occurs when a grid of images have equal
margins of more than 2 pixels. Users will see gray ghostlike blobs at
the intersections of the grid. But when they focus on the
intersection, they won’t see anything.
It lists 4 ways to avoid the illusion ...
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 ...
I would stick with how you have it now. You don't want "select all" to allow users to perform an action on items not currently viewable. There are all kinds of unexpected outcomes that can result of that.
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.