Hot answers tagged

150

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


63

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.


31

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


24

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.


16

"show more" link (near the bottom) The easiest and clearest way to do this is with a clearly labeled link... show more 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 ...


16

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


14

Good designs ! I would recommend going for Option B. The reason being : Option A: Even though your users might know that your email has been truncated,the lack of a visual affordance such as ellipsis might confuse them and someone might accidently take it as the full email. Also they might not know that they have to hover over the email to see it ...


10

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


10

1. There are 6 main types to create contrast among objects: Color Size Position Texture Shape Orientation 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?


10

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


7

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


7

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


6

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


6

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


5

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


5

Let's scroll through your first design and stop somewhere in the middle: Now, quick: Which button applies to the card? The one above or the one below? This is the advantage of having a clear division between each section. A space is merely one way to handle that division. In terms of graphic design, we're talking about creating a relationship between ...


5

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


5

When we humans look at something somewhat structured, like a UI, we tend to build a mental model. In order to achieve that goal, we scan the UI in an instant, unconsciously, and take note of each and every item in said UI. In this process we consume "mental power", an amount depending on the number of elements in the UI. This is related to cognitive load. ...


4

You have good intuition to consider other options. Fading all of the content out-and-in will visually conflict with the expanding animation; it will feel awkward. Instead, I would design both the compact and expanded versions of the card in such a way that some of the content is always visible. A photo, a name or title, perhaps a section header, stays ...


4

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


4

What's best for your app depends on it's content, without knowing any of this here are a few things to look into about both design patterns: Tiles are more like gallery's, flat, small margins. Here is the wikipedia page explaining the Metro UI pattern which is reliant on tiles. Cards are pieces of bite sized information displayed; spaced out from each ...


4

Yes, qualitative data from card sorts can be valuable as a knowledge elicitation technique, especially when you're working in domains outside your expertise. The main benefit is that in addition to the categories, you get to know a bit more about the criteria that your participants are using and their thinking process. (Although if you've never done a card ...


4

Ideas: Create Game Maybe the first card could be your big create-game button! I'd really like it to have those type of inputs where you can just click on the text you want to edit and fill it in right there. I'd think about making it responsive too, so maybe when you see it, it's very simple, just has a "+" and "Create Game" and then on click it smoothly ...


3

The below would work (plus sign could be moved to right or left to the content). Moreover, you mentioned the list as "cards" so if you want to trigger the expand/collapse on the touch of the entire card, this will be prominent enough. Code pen below http://codepen.io/pdjarratt/full/miswr/


3

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


3

I cannot supply you with the reasons why or usability studies that point to which is better, but by the Google Material Design standards you are supposed to leave a space in between cards. Card margins on mobile Padding from edge of screen to card: 8dp Space between cards: 8dp Material Design - Content Blocks Example of cards with margin


3

Add more contrast to make the important content stand out more (the card games), by adding a darker background color for example. Make the yellow stroke more meaningful by increasing the size by the percentage of players that are currently in the room. A full room would get a red stroke for example. The font of the blue "L" seems like it's another font, ...


3

Dont! Swipeable things are in design meant to shorten quick interactions which are listed in a table view All the things you have displayed here can be easily put on the card itself Besides the point: facebook and twitter make sense, hand doesnt. I have no idea what it does This is how it should look, and be used. Its like using a slidebar to enter ...



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