Tag Info

Hot answers tagged

22

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.


15

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


13

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


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


4

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


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

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

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


3

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


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


2

See this question on Quora: What are some interesting playdecks to get creative/design inspiration? Stephen Anderson posted a long list there of various card decks, grouped by type (creative thinking, psychology/design, design methods, etc) that should be of some use. You may not find what you're looking for. The reason is that I think your approach may ...


2

You might want to consider implementing a flip icon (that looks like a corner folded) in the lower right corner of the cards which causes the cards to flip on each click and during hover flip temporarily for the duration of the hover. Usage: If you hover over the card, you can see the other side, then see the previous side when you move the mouse off it. ...


2

I think of tiles as more plain than cards, and as the name implies they are fixed in size (or limited to a small subset of geometrically related sizes) and spaced out regularly along a grid. Tiles are almost always incomplete providers of information: if you want to know anything about them, you have to interact with them. Their displays are less static than ...


2

There are many similar interfaces for selecting and adding items in a card interfaces with the most common being the selecting of addresses or credit cards in an e-commerce checkout process. It is important to distinguish the cards from the 'add new' option however, since they're two different type of actions. A good way to do this would be by using ...


2

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/


2

I've voted up DaveAlger's post because I think it's the most straightforward and it's clear. I thought I'd mention an idea I had whilst considering this. It appears from the proportions of your mock up that it's a phone/touch application. I had an imagine of a zip horizontally on each card that allowed dragging the fastener across to open the zip and reveal ...


1

Do they need to be so wide or just one row? Would it help if it were more like this: download bmml source – Wireframes created with Balsamiq Mockups Alternatively you could have all the items in a drop down?


1

I'm quite sure that there is no "optimal" card size, because as you say, it depends on the content and a lot of factors. For example, cards containing newspaper headlines will obtain better results with different aspect ratios than cards containing photographic thumbanails (e.g. pinterest). And for sites where user attention is directed towards a focused ...


1

It makes sense to have multiple columns if: Your interface is wide and you need to make better use of space. This will be a tradeoff with scan-ability / readability, so you shouldn't do it simply because you have the space. The logical columns have (or can have) different semantic meanings. In your first example, having two columns makes a lot of sense ...


1

Sorting left to right, then down to the next row, is typically the convention. I see two main reasons for this: Content is usually restricted by width, but it may expand down, requiring scrolling. A vertical-first sort would require repeated scrolling down and up to see the content in order. Left-to-right and then down is the way text is presented. This ...


1

This might help http://blog.intercom.io/why-cards-are-the-future-of-the-web/ Its from a year or so ago, but it does touch on a few key points regarding organization of cards. In a card organization pattern, the information is typically sorted based on the user, where they are coming from, and any other information the user has provided ahead of time to ...


1

Tiles, cards, widgets, gizmos, grids - the name does not matter. What matters is the functionality and principle. Be very careful of creating a interface method that forces all content and functionality into an overly consistent way of working. Consistency can make things look pretty and is vital, up to a point. The trick is to learn when what you are ...


1

Sorry to answer my own question but I came up with this solution that solves the problem of the user being prevented from directly clicking the link: front and back: now only the top flips, leaving the artist/venue name constant and always available for clicking, and I can also avoid placing a >more button at the end of the list. I will consider ...


1

You should ask youself the big why... We have dosins of dosins of methods you can use in your usability engineering, but everything you do must have a purpose. You don't just spend a few hours (and worse, a few users) if you don't need that information. Obiously you can learn a lot when you work with users, and that is the main reason for gathering ...


1

In my opinion, especially performing an open card sort where participants can define their own categories can yield very helpful qualitative results. The reason: often we have a lot of items that have to be displayed on our website/in our application and we may have a mental model already which suggests a sensible categorization scheme, but the categories ...


1

I'm curious, does this program tell you how long a person took to sort a particular card? or if they placed it in one group first and then the other? Does it let them keep any cards unsorted? I'm also a novice to card sorting so I would like to add a sub question: Do people physically arrange cards or card groups in particular ways while or after sorting ...


1

For me the problem with dynamics is how the user is notified, an accessibility/experience issue. If you're building a form on the fly, is it asynchronous, and if so how do you announce to a screen reader that there is now more available on the page. If you do the determination by the credit card number pattern, you still need to show the user what type ...



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