How to make the best buttons in flat UI

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

  1. dominsbeard macrumors newbie

    Joined:
    Oct 8, 2013
    #1
    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

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #2
    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 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #3
    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 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #4
    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

    Joined:
    Jul 29, 2003
    Location:
    Silicon Valley
    #5
    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