iOS How to make the best buttons in flat UI

[dominsbeard]

I've found that with the introduction of a flat UI and boarder-less buttons people aren't always sure what is a button. They might not tap on something because they just can't tell its a button. What kinds of things can you use to make sure people will see it's a button?

I'm thinking things like:

• Actionable text. use "Go To Settings" instead of just "Settings"
• Underlines. (people know hyperlinks)
• Different but consistent font for all buttons in the app. Make them all bold for example.

This isn't something I normally think about because as a programmer / tech savvy individual I don't have a problem with buttons looking they way they do in a flat UI, but some people do and I don't want to make my apps difficult for them.

What do you guys think?

 

[xStep]

So far my thinking for my app is to place thin borders around the buttons. Apple even does that in some cases in their own apps. I'll have to pick a color scheme too.

At work we have a nav bar with buttons that are close together. It looks terrible when compiled for iOS 7 because the words look a bit like a mangled sentence. When the time comes, I can foresee using thin borders there too.

 

[PhoneyDeveloper]

I had been thinking about a background color but haven't tried it yet. My old rounded rect buttons seem to use Bold font now, which looks out of place.

 

[ArtOfWarfare]

1 - Pad the text. Give it a lot more padding than the rest of the non-button text in your app.
2 - Change the color of the text.

I think it's pretty easy - people have been making clickable text since the dawn of the internet and few users have found it difficult to tell links from ordinary text.

Look in my signature - what text is clickable, what text isn't?

Look at the text in the header and footer of MR - what's clickable, what's just text?

I guess, thinking about it, one major difference is mouse overs... I feel like making links change color on mouse over is important for conveying the fact that they do something.

 

[firewood]

Look in my signature - what text is clickable, what text isn't?

In Chrome, the clickable portion of your sig is in a larger font, a different color, underlined, lights up on mouse-over, and is architected to be clicked with a high-resolution mouse pointer.

My assumption about some of Apple's iOS 7 UI suggestions is that they are designed for people with good eyesight, good color vision, and good eye-hand coordination and dexterity (perhaps characteristics of everybody on Ive's design team?), a description that doesn't fit a good-sized portion of the user population.

So I'm experimenting with underlines, but think a very light hint of a finger-sized round-rect outline is a better way to go for more obvious touch target buttons. Trivial to do with a simple UIButton subclass with a couple CALayer customizations.