A small change to fix one of the biggest complaints about iOS 7

[MacDevil7334]

After the terrible icon designs, I think the most commonly voiced complaint about iOS 7 is Apple's decision to replace navigation buttons with colored text. This ostensibly makes the interface "cleaner" (a term that seems to be used to justify any change made in iOS 7, no matter how questionable). But, it also makes it way more difficult to navigate the UI at a glance. Since the navigation bars are now white (the same color as most content backgrounds) and the navigation text "buttons" are the exact same size and font as the page title, it is rather difficult to tell the difference between actionable UI elements and the content. This is ironic since Apple made a huge deal about how iOS 7 is supposed to defer to your content.

What's even more bizarre is that buttons haven't been completely eliminated from the UI. There are a few instances (like in the AppStore screenshot below) where actionable text has a blue outline. This makes a sort of "virtual button" that is instantly recognizable as something that can be pressed.

My proposal would be for Apple to redo all action buttons in this style. It doesn't fundamentally alter the iOS 7 style. But, it makes nav bars much more user-friendly.

Before

After

Also, notice how the existing outlined buttons in iOS 7 use a smaller text size. This would reduce instances in the UI of action text being shortened (see the Messages app) to the point of being unreadable. I have no idea if Apple will ever do this. But, I live in hope!

What do you all think? Is this an improvement over the current iOS 7 UI?

 

[ChadMobley]

I'd have to agree, I am interested in seeing what the next beta build brings us especially since they've had more time. There are still a lot of design changes I would like to see adjusted. Otherwise, I love the new version of iOS so far!

 

[Gogurt48]

This is exactly what Apple should do. I really hope they do it.

 

[Doc69]

But, it also makes it way more difficult to navigate the UI at a glance.

This is the main problem with iOS 7. The thin font, together with the use of low contrast greys and pastel colors for text, buttons and navigation buttons, makes it very difficult to navigate the OS at a glance. I find that I now have to read every part of the page instead of just finding what I want with a quick glance at the whole page. This take much longer and is actually quite straining on the eyes.

In my book, this is an incredible mistake Apple is making. It is a classic example of form over function.

 

[ominx]

EDIT: Giving this another minute of thought, my original mockup was a bad idea and it will never happen... and "buttons" won't happen either. They made a pretty big deal about how the UI navigation shifted when swiping back... the text displayed after the arrow shifts and fades into view becoming the main heading. Using buttons won't allow for that.

 

[Harrycooke]

It hadn't bothered me, but now I've seen it, its really going to bug me. Looks so much cleaner too!

 

[AngerDanger]

What do you all think? Is this an improvement over the current iOS 7 UI?

Without a doubt.

 

[heyyoudvd]

Nice job on the mockup. That image is exactly what I've been visualizing in my mind's eye for a while now, but unlike you, I didn't have the skills to translate those thoughts into an actual image.

Well done. I hope Apple implements that.

 

[Casiotone]

Once you figure out that colored text is clickable it becomes easy and intuitive. I got startled when I started using iOS 7 and felt lost, but it quickly became obvious and a second nature.

Actually, I think it's easier to spot colored clickable targets on a clean background without those distracting lines and bevels that are attributed to buttons.

There's borderless clickable text everywhere on the Web (sometimes without even a distinctive colour) and people in general don't seem to have a problem with it.

Just look at the top of this page, sure the first row looks like tabs, but the User CP, FAQ / Rules etc. buttons have no borders. Never seen anyone complain about that.

 

[rshroff2]

I don't understand what the problem is with clicking on words without a border around it. Why put a border around it if you can achieve the same thing without the border?

 

[AngerDanger]

Just look at the top of this page, sure the first row looks like tabs, but the User CP, FAQ / Rules etc. buttons have no borders. Never seen anyone complain about that.

They also have about 1.5cm of space between them (depending on your screen's pixel density), and the "buttons" and title in the OP's screenshot have less than 0.2cm separating them, which makes visually harder to discern the buttons from the titles in iOS 7 than it is on MacRumors.

I don't understand what the problem is with clicking on words without a border around it. Why put a border around it if you can achieve the same thing without the border?

I feel the same way about icons in general; why have them if we can accomplish the same thing with text-based systems. Every menu on iOS 7 should just be a long list of unformatted words as long as the user can accomplish the same thing.

 

[C DM]

I don't understand what the problem is with clicking on words without a border around it. Why put a border around it if you can achieve the same thing without the border?

Visually it makes your brain recognize actionable things that much quicker when just quickly glancing at something. Sure your brain will recognize colored text too, but it's not as instant as something even slightly more identifiable as that text with a border resembling a button. Our brains are trained for years to differentiate between text and buttons and many other things. We can certainly adapt to changes but is there really a strong reason for them? Not really.

 

[heyyoudvd]

I don't understand what the problem is with clicking on words without a border around it. Why put a border around it if you can achieve the same thing without the border?

The border serves 3 purposes:

1. It creates a separation between the button and the title of the current screen.

2. It makes it more obvious where to tap for the layman who knows very little about technology.

3. It has a built-in back arrow. Without this border, an extra chevron had to be placed on the top left to indicate that it takes you back. The goal in removing the border was to make things cleaner, but it's actually having the opposite effect because by including that chevron, things start to look more cluttered and claustrophobic. It's just nicer with the border.

 

[betabeta]

This is so much better! talk about being clean, borders can be very clean looking, looks more organized as well.

I don't get the whole we don't need buttons anymore, I would even like the color inside the border have a subtle change in color when pressed.

Also wish they would move more fuctions to the bottom toolbar for better one handed use.

You should make a poll, borders vs no borders, I'm thinking what you designed would be preferred by most.

 

[cobbyco]

Excellent job. I agree on how inconsistent the buttons are throughout the OS, so adding borders to all buttons will definitely fix this. Send everything off to Apple (apple.com/feedback unless you're a dev) and hopefully we'll see these changes in beta 5. Constructive critisism like this is really what Apple needs, not just a load of kids whining about the OS being soulless or broken.

Also, Fresh Pie and I have been fixing up the iOS 7 icons, so it would be great if you could check it out. Thanks!
https://forums.macrumors.com/threads/1611322/

 

[Bobby Corwen]

thats exactly it. youre hired on Apple!

 

[jarnold]

I want to bump this because I think this is an outstanding idea. A very small change to the OS but it would help so much. Especially for someone who is picking up an iOS device for the first time.

 

[ominx]

I want to bump this because I think this is an outstanding idea. A very small change to the OS but it would help so much. Especially for someone who is picking up an iOS device for the first time.

Thought so too until I realized top nav buttons will not fit in with swipe actions that transform the top heading with iOS 7's slide and fade in effects.

 

[MacDevil7334]

Thought so too until I realized top nav buttons will not fit in with swipe actions that transform the top heading with iOS 7's slide and fade in effects.

I don't necessarily agree with this. Why couldn't the border fade out during the slide animation and then reappear? Apple is a master of animations. I am sure they could fit the border into this sliding motif they have created if they wanted to.

If it came down to it though, I would take clean, easily identifiable buttons over the fade in effect for the page tittle any day of the week. Just my personal opinion though. I didn't even notice that animation existed in iOS 7 until you pointed it out in this thread so I don't think it would be a huge loss if Apple removed it to facilitate buttons.

 

[ominx]

I don't necessarily agree with this. Why couldn't the border fade out during the slide animation and then reappear? Apple is a master of animations. I am sure they could fit the border into this sliding motif they have created if they wanted to.

If it came down to it though, I would take clean, easily identifiable buttons over the fade in effect for the page tittle any day of the week. Just my personal opinion though. I didn't even notice that animation existed in iOS 7 until you pointed it out in this thread so I don't think it would be a huge loss if Apple removed it to facilitate buttons.

In one of the dev videos on iOS 7's UI they made a pretty big deal pointing it out so it's unlikely they will remove it. There probably is a way to animate the removal of button borders but being I'm not a UI designer I'm guessing it would break some rule.

 

[Gogurt48]

I didn't even notice that animation existed in iOS 7 until you pointed it out in this thread so I don't think it would be a huge loss if Apple removed it to facilitate buttons.

I still don't know what animation you're talking about. Could you point me to it?

 

[uhaas]

After the terrible icon designs, I think the most commonly voiced complaint about iOS 7 is Apple's decision to replace navigation buttons with colored text. This ostensibly makes the interface "cleaner" (a term that seems to be used to justify any change made in iOS 7, no matter how questionable). But, it also makes it way more difficult to navigate the UI at a glance. Since the navigation bars are now white (the same color as most content backgrounds) and the navigation text "buttons" are the exact same size and font as the page title, it is rather difficult to tell the difference between actionable UI elements and the content. This is ironic since Apple made a huge deal about how iOS 7 is supposed to defer to your content.

What's even more bizarre is that buttons haven't been completely eliminated from the UI. There are a few instances (like in the AppStore screenshot below) where actionable text has a blue outline. This makes a sort of "virtual button" that is instantly recognizable as something that can be pressed.

My proposal would be for Apple to redo all action buttons in this style. It doesn't fundamentally alter the iOS 7 style. But, it makes nav bars much more user-friendly.

Before

After

Also, notice how the existing outlined buttons in iOS 7 use a smaller text size. This would reduce instances in the UI of action text being shortened (see the Messages app) to the point of being unreadable. I have no idea if Apple will ever do this. But, I live in hope!

What do you all think? Is this an improvement over the current iOS 7 UI?

How about submitting feedback or a bug report?

 

[Steven627]

you should report to apple if see any bugs/ problems, apple might be fix it

 

[Night Spring]

Just look at the top of this page, sure the first row looks like tabs, but the User CP, FAQ / Rules etc. buttons have no borders. Never seen anyone complain about that.

At least the background color of that row is different from the rest of the page. And as the previous poster pointed out, they are spaced apart. And everything in that row is clickable, whereas in the top row of iOS 7 apps, you have a clickable element, non-clickable title, then a clickable element. All on a same color background. Different colored text isn't sufficient visible clue to allow the brain to easily pick out clickable elements from non-clickable ones. I think borders in the same color as non-clickable text would also be confusing. Borders + different colors is what raises the distinguishablity to an easy-to-use level.

 

[zemaker]

As mentioned above, in one of the developer videos Apple specifically talks about this change and the removal of "buttons" so I highly doubt that they will go back to the buttons. Now as someone who does a lot of UI usability testing I can tell you that the new approach is far from optimal, but hey Apple thinks otherwise.