The difference between iphone and Android from the design of the warning frame

One time I stumbled upon this warning pop-up style (the iphone client on the left and the Android client on the right), and I was really caught in the flash.

I told visual designers, "Cancel" and "OK" should be different in style (I am a bit helpless, because I think it is common sense), and let him take a serious look at the iphone's native style (pictured below).

After that, it was changed to look like this (the iphone client on the left and the Android client on the right).

I'm still not happy with it, but what I didn't expect was that Android developers weren't happy with it, and they said to me, "It's so ugly now, we agreed that it was very good, and we're asking for it back." I was struck by lightning again ...

After thinking, I just cleared up the reason for this phenomenon:

This is about the difference between the iphone and Android platforms. For the iphone, red generally represents vigilance and deletion. So if you want to customize the action button style, remember to use red carefully. Even without considering this feature of the iphone, try not to have two prominent colors in the warning frame, which can be unsettling and confusing.

So the original warning box style is definitely not for the iphone, so why is Android development acceptable?

As with Windows, Android's windows are fixed to put "OK" (or positive) on the left, and "Cancel" (or negative action) to the right. As we can see from the diagram, all two buttons are gray and there is no distinction in style. But the user does not feel the operational confusion, because we have long been accustomed to this style. I think that's why Android developers don't feel strange when they see the right and left buttons in the same style. As for the fact that they think the red is good-looking, I guess it's because Android's original style is too light, and adding some color makes people feel bright (though I don't think so).

Of course, it would be better if we could improve it. But even if not, the user will not be confused because of the fixed order of the operation.

But the iphone is different. Let's look at some of the words in the IPhone Human Interface guidelines:

When you have two buttons on the alert box, the buttons on the left usually use a dark color, and the buttons on the right never use a dark color. If the operation is potentially dangerous, the Cancel button should be on the right side and use a light color; if the operation is not dangerous, the Cancel button should be on the left and use a dark color.

In other words, "Cancel" on the left or right, to see if the operation is dangerous. When in danger, the "cancellation" on the right, because the right position more convenient finger operation (when the phone is in hand), so as to avoid the user due to the serious consequences of misoperation.

This would have been a very humanized design, but it also added to the risk of confusion (the user may subconsciously assume that the left side is a "cancel" operation). But it's good to have a distinction between the right and left button styles to help users identify the priority of the button. So if the designer wants to design the style of the warning box, it must distinguish the style of the left and right buttons, and make the button on the right-hand side more eye-catching.

In addition to mention the topic of digression, but also I have made a small error: the text as far as possible not to "cancel" the words, otherwise there will be a little bit of ambiguity. For example, Sina's meager cancellation attention function, click "Cancel" is to cancel this operation, or to cancel attention?

Summarize:

1.iPhone Normal operation button and hint text carefully with red

2. In the warning box, do not highlight two buttons at once

3.Android warning box, keep "OK" on the left, "Cancel" on the right; but the iphone doesn't necessarily

In the 4.iPhone warning box, the left and right buttons have to be different in style (more visible on the right-hand side).

5. Warning box Copy as far as possible do not appear "cancellation" words

Author: legene

Article source: Legene's interactive design blog