Tag Info

Hot answers tagged

16

It might be a good idea to provide the percentage as additional information if applicable, and display the absolute changes instead, e.g. +9 (900%) but then leave it out if not applicable +10 This way a user recognises that there was a change and also gets an impression on how much has changed relative to the previous number.


13

Following the great work of Anders Taxboe who has categorized different types of UI elements in a classification which is easy to understand and easy to follow. At the very highest level he uses the following labels. It may look odd in the beginning, but going through each category, it makes the UI Design World quite understandable: Reference: UI ...


13

Why don't you try something like this. Once the user clicks on the item to drag just highlight the valid and invalid sections like above. I would suggest you do it as soon as user clicks (before starting to drag), this will actually a pre cursor for the user, where to drop the item. In the approach mentioned by you, the user will actually drop the item ...


12

One idea: when the dragging starts, gray out the box and then if the user does drag over that region, make sure the mouse cursor indicates (red circle with a cross?) that region can't be dropped on. And extending that idea further: when the dragging starts use a red or gray to indicate it can't be dropped on, but also maybe use a green or some other ...


11

If you don't want to leave off the percentage, then what you show depends on your data. If your data constantly fluctuates between 0 and 1 or similar small numbers, showing the increase as 1,000% is misleading. In the same way, values that are often in the millions with a sudden 0 value only showing a 100% decrease may not be helpful. Mathematically, no ...


9

The "OS X Human Interface Guidelines" on drag-and-drop can be found here: https://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/TechnologyGuidelines/TechnologyGuidelines.html#//apple_ref/doc/uid/TP30000355-SW9 The guidelines go into quite a lot of details, but you will want to highlight areas that the file can be ...


6

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 Note details area could be positioned at right hand side of ...


6

A reasonable rule of thumb "remove everything you don't need" could be extracted from Nielsen's heuristic Aesthetic and minimalist design So flip the question around and ask why you would need to display cents if the data is a round dollar value? Two reasons I have to hand Decimal alignment Maintain the consistency usability heuristic download ...


6

When you can, be redundant in your feedback. In this case you have 2 significant elements, the dropped item and the drop receiver, and both of those can provide feedback, get lighted up or tuned down. If drop isn't available make both the cursor indicate that and the (would be) drop receiver indicate that. The cursor can indicate that by become a circle ...


5

There are very few advantages to using all caps, and that is why we usually don't. When we read text, largely what our brains are doing is recognizing the overall shape of words, rather than the individual letters. Lowercase letters have different sizes and visual densities; some have ascenders sticking up, or descenders sticking down. This means that ...


3

Don't move my cheese I think this is a classic problem where the developers who've created these tools haven't been able to anticipate how their applications are going to be used. When you can anticipate everything, you're able to design a great UX on the first try. But that just isn't happening here. And then as features are added, they don't bother ...


2

There are no hard and fast rules for this. It entirely depends on how "disabled" the control looks to the user. In the link you provided to the bootstrap forms, it doesn't strike me as very obvious that some types of controls are disabled. The text entry and select menus are fine, but for the radio buttons and check boxes I can only be sure they are ...


2

A common practice it's to disable only the field and not the label. Even if a field is disabled the user must be able to read its label. This is an example of Bootstrap UI Bootstrap Forms In this example, there is also a mouse indicator, when the user hovers a disabled field


2

I find this to be more a philosophical question. To classify each type of interface is more likely a combination of terms. We would first have to think of all the different classifications that can be applied. There are some great examples listed above and choosing one would the first step. For instance, is it a website or a web application. What are the ...


2

I could not resist. Here is my try to separate UIs into separate dimensions. There is a Good/Bad axis on every bullet. - Content Quality | Sources | Refinement - UI Components Adequation with need | Interaction quality | Follows conventions - Visual Style Trend | Visual appealance | Colors | Shape - Navigation Style Workflow | mechanics type ...


2

To add my 2 cents At the higher level, interface types seem more difficult to efficiently name. Three examples, taken out from a thousand possible others, illustrate an almost infinite variety : I use just this two at highest level: Marketing / information page Workflow / application page Skype for iOS (recent release) and its elastic and ...


2

Rather than using a popup, which can get problematic on small devices, I'd suggest to display the additional information below and inside the affected row. The example in the image shows what I'm trying to describe. It usually a grid with various album names. The song names of the album appear when you click the link (in the example it's clicking on Sleep Is ...


2

My suggestion would be to use a tool-tip If the description or additional details are of a smaller size, you can use the title attribute to display the information when the user hovers over the column header If you require a consistent experience, you can implement a custom tool-tip


2

Percent difference, in many scientific fields, is computed based on the following formula: (Amount final) - (Amount initial) %diff = ------------------------------------------- x 100% AverageOf(Amount final, Amount initial) (If Amount final is equal to Amount initial, then the percent difference should be given as 0. This needs ...


2

It depends if the navigation is critical to task completion. Will the navigation always reside beneath featured content or only on this page? It isn't unheard of to put the navigation below featured content (example: www.taylorguitars.com) with the navigation "sticking" as the user scrolls. I've observed negative reactions to this approach on a client ...


2

I would refer to this article on CSS Tricks. It list both good and bad instances to open links in a new window (i.e. use target="_blank") Bad reasons Because you like it that way Because you don't want users to ever leave your page To differentiate between "internal" and "external" links Because it links to a PDF Because a client wants it that way Because ...


2

For me it depends on the needs. There are generally two scenarios.. I want user to continue on another article. I want user to take reference from another article. If its 1st then he is done with current page and so the link should be opening in same tab. If its 2nd then he should be coming back to the current article after taking reference so, the link ...


2

how about a border around the box with diagonal stripes. diagonal stripes, similar to construction tape will suggest to the user that this area is not usable at the moment.


2

I would recommend using positive UI feedback to tell the user where dropping is allowed. For any specific selection, there are usually one or two regions which are valid drop targets. Highlight those and allow other areas to fade into the background. Here's an example from Atlassian Jira: Transitioning an Issue As soon as the user begins dragging the ...


2

Being a developer in PHP, Android, C# and working professionally with SharePoint I can only applaud this question. In many developing languages and IDEs it sometimes looks like someone came up with an idea and it was implemented as a button, a menu item or a keyboard shortcut. Without thinking of that this feature will actually be used by someone. Sometimes ...


1

Here's another approach: I work in e-commerce and one possible solution to your additional info in a grid problem could be solved with how we display more info about our product on the product listing page. If you think of a product grid as a cell in your spreadsheet. In order to see more info about a product (in this case your cell), a pane could slide ...


1

This complex interface has two layers, both of which are complex in themselves. A primary and secondary layer if you like. Using a popup is a good start but there are several ways you can make this easier to use: Highlight the cell that they are operating on and consider using that as the trigger to open the popup, or highlight and the enter key, meaning ...


1

This question is similar to something I recently implemented which has had success. Because I am unaware of the time required to process the request your users are clicking - I will try to give a few broad options. I will try to give answers that do not require building a dashboard or a completely new UI. Cost can drive up quickly doing so. The link ...


1

Some ideas: After clicking the link, disable it so it can't be clicked again. Enable it again when it makes sense for it to be clicked again (if the process completes or fails). Display an indicator near the link to show that the process is in progress. This could be a simple spinner or throbber, a loading bar, a "please wait" message, etc. When the ...


1

Ideas for you: User clicks on a link and a mini "request sent" status gets displayed next to the link If user stays on the page/page gets refreshed, the status next to the link updates to show the current status If user performs a lot of these long process time actions, consider putting together a dashboard where they can review status of all processes in ...



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