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 think it is a great idea to use right click to context menu. It is a norm in desktop application and I see no reason for it not to be the case in web interfaces. And many if not all tools from Google and Microsoft now use right click actions to offer content related actions. And right click can be nicely replaced with long tap on touch-enabled devices, ...
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 ...
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 ...
It would be good UX for a general UI, but it is bad UX on the web.
Your custom right click menu will block the regular one, what is against the principle of least surprise and possibly against what the user wants to do. Maybe he likes to use the browser's context menu, e.g. for copy, select all or even some more advanced options of current browsers, like ...
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 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 ...
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 ...
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 ...
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 ...
The boys in the back garden
Here's a story to illustrates the problem with tables and pagination:
"Good morning Mr. Smith! Here, per your request, 20 of the town's finest - 10 young men and 10 young women".
"It is ever so kind of you Gordon. Now I'd like to start by having a look at the girls, please send the boys somewhere".
"Very well Sir. BOYS! chop, ...
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 ...
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 ...
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.
The arrow idea is quite nice, but it gives a direction, which isn't really relevant to your use case. Since you only care about where the value is, not the direction it has moved.
What about a simple icon with a midpoint and a dot? You can colour them or leave them black.
Historically there was some research that indicated content that was too wide became hard to read and thus a standard of 960px was adopted.
However there's a strong emphasis on "reading" width there... for a web application I hate it when I'm artificially constrained to a small width like 960 when I'm on a nice wide 24"+ screen and I want to see more ...
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 problems 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
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
details area could be positioned at right hand side of screen, ...
Most spreadsheets (OpenOffice Calc, Microsoft Office Excel, and Google Spreadsheet) will handle these cases displaying a non-blocking error akin to "division by zero":
I think this is the best behaviour, because it does fill the field with something meaningful to the user, but at the same time it doesn't "stand out" too much and compromise the overall ...
You really just need to create contrast between the sorted column and the non-sorted columns. I would keep the carrot, as it is a symbol many people are used to seeing. You may consider adding a light background color or updating the text in the header to bold. I'd only use one of these tools though, you don't typically need to put a disproportionate ...
In general: NO
This is really bad UX: creating actions that affect other pages the user can't see and maybe don't remember is the definition of an anti-pattern. You'll always need to make sure that users are aware of the consequences of their actions, otherwise they'll need to re-do everything again, even if they didn't even try to do what they were forced ...
Depending on the kind of content and the way you present it you can show a certain amount of information.
For text there is a certain limit in the width of the container depending on the font size. So there you have a first constraint. However you could still fill up the screen with more blocks of information. There are certain breakpoints, we should adapt ...