Tag Info

Hot answers tagged

13

You don't need the arrow, you can just play with colors, like follows (this is just a proof of concept, you can change the gray colors with whatever colors you like that matches your theme): Another simpler way:


10

When in doubt, put the user in control. You can start off by scrolling through. As soon as they click on one of the thumbnails, STOP. Show that image. That's the one they are interested in! If you have a hunch that after 10s you should start scrolling again, resist the urge. Instead fade in something over the image that enables the user to start the ...


8

I've looked at all three options and am confused by all three. As a user I want to know what I can do with my access rights. Here's my suggestion. I am using Bugzilla's role's as the role descriptions to be more concrete, and in the mock-up calling them 'Special Powers'. It's a way to summarise, rather than showing zillions of checkboxes. This ...


8

Let's break down your options: Always show the 'child' items. Visual nesting will be important here, using contrast to visually separate the items from the parent and alignment and proximity to visually group them. For example, see, this screenshot from Rally software, and notice how the tasks (TA*) are visually distinct from the stories: Note that you ...


7

If you only have two levels, you could use an ordinary master detail approach. See #1 here: http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns If more levels are needed, you could go for the drill down design pattern. Eg: http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx If you want to keep every thing in the same ...


5

According to Quince's pattern library it's called local zooming and is related to the pattern of showing data tips. From a user perspective it's not very different from a normal accordion, where the table rows are used for navigation. In your example, the relationship between the expanded section and the row it belongs to could be shown a bit clearer. The ...


5

As you mention something around 1-5 policies with 10-50 items each, what about using some sort of accordion for your policies that you can use to show/hide the details in a sub-table for each policy? Something like this: download bmml source – Wireframes created with Balsamiq Mockups Edit: removed the scroll bars following Charles' advice


4

Windows Explorer and Macintosh Finder use this sort of pattern since years and its well established. So it might be a good way to use this as well. A small arrow indicates further content at OSX. Last row on right is a detail view of properties of last marked item or if its a folder, you see content of this folder. At Windows 7 detail view is at bottom and ...


4

It goes likes this. First, distinguish between the data and its view. In the case of the task list, you have one set of data, and two views to display it - if the data changes, both views need updating. Then, consider these three popular IA concepts (I'm using my favourite terms, but mention other terms as well): Unique component - a component (typically ...


3

From what I can see, assuming those columns have fixed meanings, it looks like a good solution. I've worked on something similar, a procedure specified in a table, and although it required some training (it was a complicated, domain heavy application) it was successful from a usability point of view. (Hitting the "Enter" key causes a new step to be added, ...


3

Highlight the row and the right side table in the same color. The arrow that stays right next to the row that is selected, that you describe, would also work, although it is a little less obvious than these graphical examples you get in several answers here. For the dragable divider: I would use the area in between the tables here for changing the cursor ...


3

Have a look at this tag wiki article and questions in tag master-details for related patterns. Varying the Area Allocation The key problem you have here is that questions and answers are competing for space. It's a trade off, and it's not a fixed trade off. Sometimes answers will be more important, sometimes questions. To solve that I'd make the ...


3

I would look at following some of the patterns that you would see in iOS or Android applications for this. It wouldn't be very different from what you have now, but it would be both easy to use and easy to implement. Make it clear visually that the first view is a list of selectable items. Then when you select an item in the list view, you could show the ...


3

Two patterns come to mind: Pop-up modal form when clicking edit in row: or Place the Edit form below when they click on the row. I would suggest that the pop-up modal form is a bit better, as 'more info' that loads below the data grid might not be visible to the user.


2

Whatever you do, you need to show the specific entity so users know what they performing the action on. That’s important enough to be worth whatever bloat it creates, especially if the effects of the action are shown on the entity in the same page. Here’re some options: Support the action on any drill-down pages. If the user wants to perform the action on ...


2

Tree view / thread view seem the most used and appropriate for relationships that are not going too deep (three or four levels) and are a strict hierarchy (no circular or cross references, every child has exactly one parent.) The upper levels should have more visual importance (placed more to the left, using a larger / heavier font, having more space ...


2

Whether an arrow or not, I think you're going to have to bite the bullet and use some sort of visual indicator of the linkage. This is easier if the tables can scroll independently of one another, so you can always keep the "parent" item on the screen. download bmml source – Wireframes created with Balsamiq Mockups Can you give us more details ...


2

You have the second grid appears as a pop-up with a nice animation inside the same form while bluring the first one on the background.


2

LittleBigDetails is the only site of it's type that I'm aware of (which is why I really like it)... but you can also find good "real world" micro feature examples in some of the UX Pattern Libraries. Some of my favorites are: Quince UI-Patterns Pattern Tap A complete list can be found in the Yahoo! Design Pattern Library.


2

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough: Get rid of clutter first. Especially in a "data intensive" environment. The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with ...


2

As you've done in the annotations on your mockup, it is important to make clear how the pieces of information relate to each other. That is to say, "Company Details" are contained within one entry on the "Companies" list. The "Employees" list is a subset of "Company Details". I would do the following: Label the list of companies as "Companies". Label the ...


1

Oh no, don't do this. You don't have enough screen real estate in portraitmode. If you have more room it might be okay, but it depends on the pixel density and the viewport of the device. For small smartphones it's just simply too narrow. You'll have a huge chance of unintentional scrolling which is really a bad experience. Besides, how long are the labels ...


1

You are combining two operations: "view cashed in installments" and "cash in installments." Separate these two functions into separate pages. Replace the top "cashed in installments" box text with "pending cashed in installments" and move it to the bottom. Empty it after the user clicks apply (it will be empty when the user first starts cashing in ...


1

I think I understand your question but please clarify me if I am wrong. I believe this has to do with what to do with the blank slate without leaving it boring or un-motivating to the user? I believe this comes down to your goal / objective over the fear. I am going to go with solution 1. Leading the user visually rather than with direct instructives, in my ...


1

As a general approach to the design process, start with the simplest and add complexity only if indicated by user research. If you have nothing, show nothing A large blank space is usually a pretty good clue that you’ve nothing to show and input is needed, like a form with an empty text box. As long as the blank space is visually associated with the ...


1

download bmml source – Wireframes created with Balsamiq Mockups Could you do it kind of like an email client (eg Apple Mail, Outlook) where you've got a list of things on the left, and you click on it to get the details on the right? Also, if you have all of the job locations shown on a map, do you HAVE to have a separate list?


1

Here is an approach that I used for showing a preview of search results. The advantage of this method is that this scales well with which ever result value is selected and is clean as well


1

Tree traversal and node selection (at least in the "classic" implementation) is a tedious and fiddly task from an interaction design perspective. Just a quick thought: How about flattening the hierarchy smartphone style combined with something along a Listbuilder pattern (in an updated version, the one shown in the picture is rather archaic). The latter ...


1

You should just go with a checkbox tree, but find a fast one. Unfortunately I can't point you to a fast one - but I'd hope someone else can. I've in the past solved a similar speed problem with IE. The underlying problem is the cost of displaying a widget that a large proportion of is actually clipped/hidden or off screen. It can be solved by javascript ...


1

Check out Deisgn Shack's UI Gallery. It has a nice collection of micro interfaces.



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