This is where UX gets hard
There's nothing inherently wrong with your interface. It appears to be handling a large amount of information in a reasonably clear and standardized way.
But there is something wrong with your interface: The users don't feel comfortable in it.
That's a complicated problem to solve, but it is the heart of every UX design project. ...
Repeating those table row labels for every game box is contributing a lot to the perceived clutter IMO. Also is all that information necessary? You could perhaps try simplifying, but add the ability to expand if necessary.
The container zoo
The terms card, panel, tile, and others are often used interchangeably, so their definitions not precise and can change from company to company or ecosystem to ecosystem. But, there is a loose vernacular definition for the different containers.
Why does it matter?
Because in practice, naming things is important. Here is an example of ...
You have a good UI but a few things strike me that perhaps can be improved:
Too many lines (you can remove most of them I believe)
Too little contrast between the different parts of your design (try bluring your eyes and see if you can still discern the different parts of your design). The cards are especially problematic. Make them pop.
I removed some ...
According to me, the best option would be to use 59m 59s.
This will surely help a user to understand the time available without any confusion. Here the labels are clearly visible at the first glance along with the second's portion ticking provide the information more precisely to the users.
Moreover, users will be familiar with this format from other ...
I've seen chevrons become popular for things like this. Big fat areas that are easy to press, along side footers with an ellipse. Pretty familiar symbols that imply expandable content without having to read.
The data being displayed by the cards would make a lot more sense in a list or a table. Each card has the same exact fields with different values, and you're displaying the labels for the fields each time. A table with headers would only display the "Time", "Language", etc. labels once.
As a note on cards, they seem more suited for mixed or free-form ...
"show more" link (near the bottom)
The easiest and clearest way to do this is with a clearly labeled link...
If the link is there then I know there is stuff not showing.
"expand card / collapse card" link (in the upper right corner)
If you think your users will want to both show and hide the additional content then make sure the link to do ...
You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest.
The nice thing about card layouts (compared to tables) is that you can use the space to lead your users through the expected flow. Your whitespace is a blessing!
I might even add ...
I recently did some testing with a similar design where the cards were not tappable, only the button like your "Start". The participants mostly expect cards and tiles to be tappable IF there is only one action. They also tended to click on the headers. In your design, I would think that tapping the card would start the workout, so if you want to have two ...
personally, I don't think it's cluttered, but yes, it's a bit overwhelming.
Basically, I see your screen and have no idea where to look and what to do. The most important aspects seems to be an L in a corner and the fact that someone is online (this is because of your use of colors), then you mix information giving everything the same level of hierarchy. ...
Kishan I would step back and approach it from a deeper UX perspective; who are your users, what are they doing, what information is pertinent to them?
When you delve a little deeper, the answers might begin to come to the surface.
Thinking through it very quickly and without knowing your users or the context of this expiring card, I'd hazard a guess that ...
I don't see an issue with the white space. Card-type interfaces are prone to having white space.
Maybe you can condense the details into the global components, like the header, and dedicate the body area for the notes only.
1. There are 6 main types to create contrast among objects:
2. Material design has one specific feature – the depth.
More about principles of material design in the guideline: https://www.google.com/design/spec/material-design/introduction.html
3. How about icons? Can you use them?
Why don't you just give the actual time until expiry? At the moment, you're proposing to tell me that the offer expires "in one day". But what does that mean?
Let's say it's 3pm on Thursday. It would be really annoying if you'd rounded up 12hr 1m to "one day", because then I could come back tomorrow morning and find the deal already expired. By the ...
You also have an option to display it as 59m 59s, if you're worrying about ambiguity.
If you have to stick with the options you provided I would go for 59:59 mins, since 59:59 may be interpreted as 59 hours 59 minutes and 59:59 secs seem weird and I would interpret it as 59 seconds 59 milliseconds. But after one or two seconds when I would see how the ...
When sorting anything either a Vertical or Horizontal list of items is preferred. (but not both)
A vertical list is my personal preference as many devices are built to easily scroll up and down (i.e. mouse wheel, smartphones, etc.) among other reasons.
Sorting Cards in a Grid
First of all, this is a great question so go ahead and vote it up now.
The difference is semantic but from industry standard usage whenever I heard the word tile, the implication is that there is another screen associated with the tile. For example in Microsoft's "Modern UI" a tile is much more than just an Icon, it can provide rapid information and the tiles on the Windows Phone or Windows 8 start screen act as both "at a ...
There probably isn't objective answer to this question. As you said, if Microsoft, Google or Oracle doesn't seem to agree, how could we?
My view is mostly based on Google Material design on cards and Microsoft Metro tiles. To me a card is close to what Google calls cards. Metro tiles and tiles in general are more homogenous items that may have some actions ...
The answers provided here are great, but a few observations:
Put the avatar of user in a grey circle (multiple grey circles looks cluttered), same way put meaningful information in all game cards.
Keep only the green circle as a notion for online users, remove text i.e. 'Online' from the list of friends, but keep the text in the logged in users statuses as ...
There's nothing wrong with having clickable cards. An example of that is YouTube: when you're browsing a list of videos, each video is represented with a card.
Notice that the card also has a "show more" button, which brings up a dropdown menu with additional actions. Most of the time, however, the user will just want to watch the video, and so that's what ...
Don't leave fields blank
When a field is blank, the user has no indication that the blank space is intentional (and not a page/widget error). It's for the same reason that publishers print intentionally blank notices in books to avoid user confusion:
The presentation in your screenshot (using the - indicator) works fine from a usability perspective.
I have some fundamental guides to offer, which should apply to all UX, and is especially important here:
Convenience doesn't have to compete with clarity.
A designer is supposed to take maximum advantage of screen space while presenting information which doesn't confuse or overwhelm the user. But this doesn't mean that we designers need to trade the amount ...
I think when a big chunky object represents an action by interacting with it directly (clicking, tapping, hovering, etc) there should be an explicit visual hint (especially given "Cards" in Material Design are not usually directly interactive).
Forgive the crude mock-up, but I added chevrons to the cards and I think that makes it obvious they're clickable ...
From my perspective, there is not much difference between flipping card or pop-over window showing more details. So, yes it is a good idea as long as it's just transition effect and does not negatively affect usability.
Pros you get:
You can pack more cards in one view (of course: avoid excess), and funnel user actions from selecting artist to going to the ...
Well, good answers but not helping you with the cause other than "Monotony" - which is not a great term, but close.
Great design in Magazines, Posters, and User Interfaces is the product of font, font size and whitespace, further improved with color, and not harmed with line.
These properties: Font, Font Size, Whitespace and Color train the user to ...
Cards with margin and shadow look like real cards.
That's the motto of material design. To make things appear as real objects.
Objects are presented to the user without breaking the continuity of experience.
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and
a system of motion. The material is grounded ...
This article should give you a better perspective on the use of Carousels on mobiles -
Carousels on Mobile Devices
Dots are generally weak signifiers which basically means that they could be overlooked or missed if the size/color/contrast is not appropriate.
Half images are strong signifiers as they create an illusion of continuity.
I personally prefer ...
1. Cards - 2. Tiles - 3. Panels
The short answer is there really is no difference between these terms. Any of these can be any size and I've used the terms interchangeably on various projects.
We should adapt to use whatever terminology the rest of the team is comfortable with because very little can be gained from spending cycles trying to make a ...