Tag Info

Hot answers tagged

57

This is perhaps perilously close to an off-topic icon discussion, but I think you could modify the arrow icons to make the outgoing versus incoming direction clearer. Essentially, you need to give context to the arrow: I would continue to use colour as an additional clue.


19

I've found that arrows without words tend to cause confusion amongst users, especially those that have a color blindness. If you use multiple indicators such as the arrow, color, words, and/or +/- you are meeting user accessibility the best you can. You can do something like this: download bmml source – Wireframes created with Balsamiq Mockups ...


19

could arrow icons still be used as a quick visual reference to indicate movement of funds without actually misguiding users? I think the way you've presented them might be confusing but using them in a different way could be more familiar to what people is used to. Example: Additionally, for money related movements the two pair of most familiar ...


6

You can use the + and the - icons if arrows aren't required. I would probably use ↑ and ↓ if : I had to use arrows I can't write other account movement information. If you really want to use → and ←, you should display the other account from where/ to where the money goes.


3

Design challenges here: Designing for abstract concepts like accounts and flow is hard. Typically it's best to use words rather than graphics. But sometimes you have to (or are told to :-) use graphics. Financial quantities can be difficult to represent graphically because different currencies have different symbols. Arrows are very commonly used and ...


2

It helps that you stated your design intent clearly: it's about communicating volume/diversity of the changelog rather than the details. Some modern approaches to spicing up long, sectionalized content (use desktop browser to view the examples): Sticky section headers Parallax and scroll-updating navbars (scroll down to see effect) Timeline layout ...


2

Place the error next to the field Tables often have many elements, so the easiest way to communicate an error in the table is to place the error message right next to the offending element, so that it's very clear to the user where in the table she should focus. For example:


2

The only advantage of a slider over next/previous navigation is the possibility to jump (seemingly) freely to any index. In reality this would hardly work, as the user cannot distinguish the individual index locations and needs to hunt for the right position, even if they remember the general direction. Thus, I'd classify the slider the same as indexable ...


2

"Just because you can, doesn't mean you should......" When I'm reviewing substantial amounts of data for criminal analysis purposes, single column data is a significant cause of confusion and delay and ultimately errors. It doesn't matter what iconongraphy is used or what colours are applied. The most accurate method of avoiding confusion remains a two ...


2

Why grids Tabular data arrangement is a raw dump that expects the viewer to carry the full burden of analysis and interpretation. This makes sense when the software can’t be expected to anticipate how the user may choose to evaluate the information. Tables are good when: All data columns are of equal or unknown importance. Horizontal space is not ...


1

"The app is to display large numbers of defects a site contractor might log while working on a building project." Given this information, think about the workflow of who is using it. What are his/hers immediate goals? I am going to make an assumption that the person using this primarily wants to see a list of issues associated with each project. So give ...


1

I think you are already on the right track with your design. A tip I would add is to have the left pane shelve out when needed, but hide it when a user is scrolling the table. To answer your question: I would go with the table over the list. Lists have always seemed horrible for tabular data to me. Sorting them on the different data dimensions almost ...


1

I've been employed as a UI designer for various financial used for 10 years. I've (also) settled on use of + and - (green and red respectively). Where space allows, separate into 2 columns. Agree with points made above that direction of arrows can be misinterpreted e.g. Left and right: left=back=out? or left=home=in? e.g. Up and down: contradictory ...


1

My bank does not use icons of any kind, actually. It simply prepends a + or a - and colors the number green or red respectively. They are all in one column, which is (by default) sorted by date (newest first). As others have suggested, I would not use just an arrow, for its origin is not clear.


1

I agree with the idea of '+' and '-' icons going before the numbers as something to consider. With example 2 you're kind of on the right track. The common method in accountancy is to have incoming and outgoing funds in separate columns. However, you don't need an arrow to indicate things and unless you have quite an extravagant one like Matt Obee's (which ...


1

Go with a list. This is a job listing page and the slider will infuriate people as they'll want to scan information quickly to pick out the job titles that suit them. A compromise might be to have a featured jobs slider with 3 or so featured jobs at the top of the page? That might satisfy your colleague but mean that the bulk of the information is easily ...


1

Actually, there's two questions in here, one regarding the master-detail navigation, the other regarding accordion vs. tabs. Master-detail can be realized on one screen, like here, or with a two-step navigation from the list to a complete screen of details. For me, the decision between these two relies on the following: How many detail is needed to ...


1

With error messages it's all about association. I don't have the experience with implementing it with tables, but I don't see why you can't apply the rules for forms to tables. For forms, it's best practice to show the error message directly below, above or next to the input field that contains the error. Assisting the error message with a red color (or ...


1

Check box lists would be the answer; based on Microsoft guideline for desktop app which you could use it for web app somehow: Standard multiple-selection lists have exactly the same appearance as single-selection lists, so there is no visual clue that a list box supports multiple selection. Because users have to discover this ability, this list pattern is ...



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