How to make the best buttons in flat UI

Discussion in 'iOS Programming' started by dominsbeard, Oct 10, 2013.

  1. dominsbeard macrumors newbie

    Oct 8, 2013
    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?
  2. xStep macrumors 68000

    Jan 28, 2003
    Less lost in L.A.
    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.
  3. PhoneyDeveloper macrumors 68040


    Sep 2, 2008
    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.
  4. ArtOfWarfare macrumors G3


    Nov 26, 2007
    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.
  5. firewood macrumors 604

    Jul 29, 2003
    Silicon Valley
    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.

Share This Page