New answers tagged

0

It's cool to care about colorblind people. I suggest to think a bit outside the box and to put a colorblind option in the app settings. This way you can switch to more adapted colors


0

How about simply a green circle for good, and a red circle for bad? I don't see how this portrays less information than your arrows - assuming that they universally agree with your assessment's that down in one category is bad, and up in another category is bad.


4

Perhaps instead of unprofessional emoticons, you can use a simpler symbol to indicate a good or bad result. In this case, I used a tick and a cross: But since the indication is probably more important than the direction, we can place greater emphasis on the ticks and crosses: Note how the arrows are now smaller and faded towards the background colour, ...


1

One thing to note in general, without considering implications of arrow cardinality or color: arrows that point straight up or down are confusing in general, since they can have multiple meanings: This row can be collapsed or expanded by clicking the arrow; This row can be moved up or down by clicking the arrow; This row has changed in value compared to ...


0

One option you may try is the following : Use selected disabled checkboxes for the mandatory items For each group of items, that at least one of them must be selected, use a hallow geometrical shape (circle, triangle, square etc). Use different colors for each shape. Place the shape next to each item accordingly Initially all items are unselected (except ...


0

Therr are 2 questions you're asking here. Is just a plus symbol enough? This depends on the situation, but often it is. If you have a list of items and underneath you place a plus, people will be familiar enough with the concept of extending this list. If you put it in a menubar it might be confusing; are you adding a button to the menu, or is it a butto ...


0

Step wise wizard with clear segregated choices. When user moves to next step, load related choices then.


0

Don't show the groups, show the steps. Step 1(or 2) fill in the required things. Step 2(or 1) pick between the OR selections. Step 3, select optional items.


4

Yes more is better, but more brings clutter Obviously the best option would be icon and label together. You are probably asking this question as you want to keep the UI clean, but there are too many features. You could try what is known as progressive reduction ...


0

Icons with text typically perform better in usability testing over just icons alone. Google's Material Design (similar to Bootstrap) has been using the plus sign as a fly-out menu button, which has never made sense to me. If you can test it, that'll give you the better approach. If you use it alone, the plus sign is fairly universally-understood as "add" ...


7

Put the good at the top and bad at the bottom (or maybe reverse this if you want to attract more attention to the bad). This way, you will have two sections divided by a clear conceptual mapping. I would imagine that the main question is more along the lines of "In what areas are we struggling?" rather than "Did this section increase or decrease?" This ...


24

I'll make this an answer so I can expand on my comment. Your main problem is not an arrow, icon, color or emoji thing. Your main problem is a conceptual one: you're mixing taxonomies with gradations that might be (they actually are!) absolutely opposed. Thus, you're adding a load where user has to make an interpretation of whether your taxonomy and your ...


2

Consider separating the list into two sublists, one of "things which are good when they increase" and one of "things which are bad when they increase". I'm not sure what your exact business domain is here, but it sounds like you have income generating items and liability generating items, so why not just make two lists? This could be done "in-line", i.e. ...


0

Why not show a numeric % change? You can color the text green/red to help non-color blind people know if the number is good or bad (in the case of a negative percentage for one category being a good thing); color blind people would still have access to the same information at a glance without the courtesy of a text color hint.


4

To build on @Adriano Repetti's answer, and again borrowing from Information Dashboard Design by Stephen Few, I would like to highlight some assumptions about your view and make a suggestion. As someone who is not colour blind, it still took me a while to figure out what all the arrows mean! Your interface confused me, so I tried to think about what you are ...


2

I'd avoid to convey information only with colors. Green for "up" and red for "down" is not an universally worldwide accepted pattern (and color blind people may not see them). Given the fact that you don not need color then I'd simply drop it. Use a gray symbol, color is not needed. To better give sense of trend (and to clarify symbol meaning to don't ...


8

I have always liked these icons, which indicate a trend on a graph. The combined shape and direction of the arrow indicate how the trend is progressing. I got these from Ionicons: http://ionicons.com/


19

Perhaps you could use only black for the arrows so that the user knows of the increase or decrease, place them on the left, and then on the right use a "health-bar" style status report which would look professional and could indicate the positive/negative aspect and even severity. (Use colors other than Red/Green if you are worried about color blind issues) ...


4

You are right to avoid the use of colour alone - especially when considering red/green states of the same shape. The way to approach this is by changing the shape of the arrow and there are a number of ways you could do that. As a few of suggestions: 1) You could bring left and right into play, where right is progressive and left is retrograde - an arrow ...


12

According to this article, a standard well accepted share icon does not exist : It is unlikely that we will see a convergence to a single share symbol. Apple will not start using Android's design language, Google is not going to implement Microsoft's design, nor is Microsoft going to use another platform's share icons. Since each of the big three ...


44

Other than just being design choices made by different companies (and the trademarks/copyrights that come with them) you must take into account what the icons are intended to represent. A good icon should denote its meaning without any supplemental text (although you should still have it). An icon that denotes an action such as "share" should represent that ...


29

Branding. Nothing else. We could go on and on for hours throwing conjectures and theories, but in the end, it's only a branding thing. Your icons , from left to right are from Apple, Apple, ShareThis, Android, Windows, Windows and the Open Share Project. Exception made of the last one, they all belong to companies that won't give up on their efforts to ...


0

Don't know about "ignore" icons, but "dismiss" and "mark as read" icons are used a lot elsewhere. Facebook uses an icon for "Mark as read" notification actions and text to "Mark all as read", while Google uses icon for both actions. Doesn't seem to be a best practice scenario, you can get the idea from those examples.


1

In think the first option of the two is the best. The pencil is a logical symbol for editing. And it would only be a waste of space if you would put the cross for deleting there, if it is not used often. However, I would prefer to not have the radio buttons there on your popup window. Instead, I would have a smaller [x] or trashcan button on the left of ...


1

I think you could solve the problem by not displaying any of those buttons, but instead: Facilitating the editing of an item by clicking on the relevant row, and Hiding the lesser-used action of deleting within an action menu. As in my mockup below: download bmml source – Wireframes created with Balsamiq Mockups


1

I don't think it is fair to call this tab system Material Design, this is just an example of flat design. You can see in this style guide that Material Design tab systems are set up a bit differently: Material Design Tabs In fact if you use the tab system showed in the Material Design docs it would probably give you that visual distinction you're seeking. ...


0

Your title is 'how to fix material design?' and in the text your question is 'how to make it obvious what is clickable?'. To make it obvious what is clickable, use well known UX patterns, and your user will know what to do with them. You answered this question yourself when you said that rounded cornered tabs would be instantly clear. As for 'how to fix ...


0

Using the icon of actual currency (such as dollars) might be confusing. The fact is, it's just virtual currency you're handing out, so you should relate the currency to what the website is related to. Making it personal and related to the brand or website will make it easier for the users to understand and even give them a sense of wanting to earn more, as ...


1

I think using money is too literal and specific and because of this the suggestions so far do not shout out "REWARD" when first viewed but rather savings or something to do with a bank. I live in the UK and there are many generic reward schemes but one of the most prevalent is Nectar (Nectar is a sweet reward for bees). 30 years ago people in the UK when ...


1

Reward points are very similar to Cents and Dollars which are accumulated over time to Redeem for a gift or to make a new purchase. So, using an icon like these would make more sense:


1

I will choose either stack of coins, or better a coin with digits indicating how much points the user earned . I think medallions and ribbons are not suitable for the purpose you described , but if you have stages in the rewarding system, like "after x points the becomes/deserves y" then you can use them to flag the transition to the new state. Best


2

This pattern is definitely not good. It increases user's cognitive load which might end up users saying: 'I don't know how to select multiple messages', and leaving your website; assuming you don't have that feature at all. Because the number of curious/tech savvy users on web is a lot less compared to the ones who just visit web to complete their tasks and ...


0

In order to replace the save icon with something else we need to think about what it does. Evernote has replaced the save command with Synchronise. Even though it will automatically synchronise, the common shortcut for save, "Ctrl + S" / "Command + S" triggers the synchronisation for ease of mind that it has actually been saved.


0

I think it is actually best to have the icon and the text label if possible, but as suggested change one of the icons to something that can be distinguished easily so that the user will learn the subtle difference over time. If you can't provide a text label then a hover over behaviour or a legend can be used instead.


1

I'm with Davin in that you need a clear message and not an icon. But if the report does not allow for text you could look into using an exclamation mark next to the plus.


4

Just don't use icons and be as specific as you can. If an item is optional, simply add a message like "Add Record (optional)". Likewise, if it is mandatory, something like "Add record (mandatory)". This is really as simple as it can be. After that, you can reinforce with validation, iconography, natural language wording and so on, but the barebones ...


1

Icons are meant to be readily recognizable visual metaphors for actions or features. Once the user becomes familiar with the meaning, it's faster to decode (a good) symbol than to read text. Other advantages include conservation of space. Some functions can be quite verbose when written out - especially in certain languages. (On that note, if I was ...


0

In their book Designing Web interfaces, Bill Scott and Theresa Neil devote a whole chapter (2) to drag and drop. They talk about interesting moments, where there are at least 15 events and 6 actors, which they plot onto an Interesting Moments grid template. They provide a lot of material on drag and drop, including here, including the interesting moments ...


0

In general, when something is draggable and droppable it's easy to understand it. Per example when a new user user came on your website or app... you can show a small box to show to users that your canvas are draggable, just to be sure that if people want to use Drag & Drop they don't have to look if they can or not. Custom pointer seems to me a good ...


0

There are multiple ways you can show draggable feature. The hand cursor - This one you are already using. The move cursor - This is helpful when you are indicating that a title bar is movable. This should be used when the primary action on an object is that of movement. Otherwise, it can create confusion. There is a grid of dots which visually ...


0

I think there's no right or wrong answer here. The Google Material guidelines are great and in-depth, but it's very much 'Google's' design principles and mightn't necessarily translate. For example, if you're using an icon as the primary way of distinguishing between options, you'd want them to be relatively big, perhaps bigger than the text. Here the ...


1

Ok, though it depends on the details of application and the purchase process, but I believe that those are too much status. "open order" is the default status of any order, because there is no "closed order" before purchase. default status does not need an extra indicator. For "acknowledged" , it will make sense only if the order is from a third party ...


5

As a user, I would have no idea what the different colors would mean. I think you should write the title of each status underneath in small caps. If you do that, here are my color suggestions: OPEN - Blue, by default color. ACKNOWLEDGED - Orange, you need to notify the user. You could have the button fade rapidly from grey to white and back to show that ...


3

Apparently they first appeared on reel to reel tape machines in the 1960s. The Play Arrow would indicate the direction of travel of the tape. Fast-forward and backward would be indicated by doubled arrows. See this post on imgur.



Top 50 recent answers are included