iOS 7 before and after screenshots(tapfame.com)
tapfame.com
iOS 7 before and after screenshots
https://tapfame.com/ios7/
66 comments
Most of these look MUCH better after the redesign. And, surprisingly, they look a lot like Android apps. For years and years Apple was way ahead of Android on app design, but now I think an app that follows the iOS 7 design guidelines and the Android design guidelines will look about the same.
I had the opposite reaction. In the large majority of these I think the original looks better, sometimes significantly so. But I'd be curious to see a poll of HN opinions.
I found a weird trend: If I looked at the before first, and then scanned back and forth, I preferred before.
If I looked at the after first, before scanning back and forth, I preferred the after.
Not sure if this is a known cognitive quirk, or even if others would have the same impression.
If I looked at the after first, before scanning back and forth, I preferred the after.
Not sure if this is a known cognitive quirk, or even if others would have the same impression.
Apple used to set the standard. It is sad to see them falling into derivative design, yet I do love the 1950's cosmonaut spaceship concept behind it.
It's sad? Really?
Yes. Apple designs should be inspired from other fields (Russian cosmonaut style, 1950s minimalism, etc.) rather than being derivative of another phone's style.
If iOS 7 is not so derivative, they should speak to that so every article doesn't pin it as "Much [of] iOS 7 design inspiration came from others"
If iOS 7 is not so derivative, they should speak to that so every article doesn't pin it as "Much [of] iOS 7 design inspiration came from others"
While I think individual several of the apps look better after the redesign I liked the consistency of UI between apps that the before shots gave. The after shots kind of remind me of running KDE apps in a Gnome desktop environment or something. They seem too radically unique to provide a good user experience to the system as a whole.
I agree but for a platform where all apps Run as full screen you can get away with less consistent design as long as the ux is good. The apps will never be run side by side.
I personally like the new flat designs a lot better.
The "after" screenshots don't seem to have anything in common anymore. Some of the apps look like Android, some look like Windows Phone, some look like Palm webOS.
The previous iterations at least shared a few button styles and navigation bar styles, but now it seems like everyone has taken the opportunity to reinvent those too.
It's certainly ok by me that app developers are taking more liberties in making their apps look unique. But if I were running the iOS show at Apple, I'd probably be worried about this development: if the visual presence of the OS disappears entirely from apps, it becomes that much less scary to pick up an Android phone because the apps won't look any different there.
The previous iterations at least shared a few button styles and navigation bar styles, but now it seems like everyone has taken the opportunity to reinvent those too.
It's certainly ok by me that app developers are taking more liberties in making their apps look unique. But if I were running the iOS show at Apple, I'd probably be worried about this development: if the visual presence of the OS disappears entirely from apps, it becomes that much less scary to pick up an Android phone because the apps won't look any different there.
I noticed that too. Lots of the new apps have a distinctly "Android" feel to them, even to the point of Fancy having what looks clearly like an Android menu button (though not in the standard Android location).
A fun flame war to start (i.e. let's please not) would be to argue whether this is due to app designers feeling an increasing need to target Android or whether it's because the truth is that iOS's "new look" seems distinctly Jellybean-like to an app designer.
A fun flame war to start (i.e. let's please not) would be to argue whether this is due to app designers feeling an increasing need to target Android or whether it's because the truth is that iOS's "new look" seems distinctly Jellybean-like to an app designer.
The simple truth probably is the company that made the app designed their Android version first and didn't bother to come up with a complete new app design for iOS, so they just kinda ported it. You can also find a lot of Android apps that seem to be directly ported from its iOS incarnations, instead of using native UI conventions.
That's probably true in some cases.
I think another thing that is true is that mobile visual vocabulary is stabilizing, much as the desktop visual vocobulary of menu bars, window title bars, etc. did. That makes for a more boring app world, perhaps, but one users can potentially find more predictable and useful.
I think another thing that is true is that mobile visual vocabulary is stabilizing, much as the desktop visual vocobulary of menu bars, window title bars, etc. did. That makes for a more boring app world, perhaps, but one users can potentially find more predictable and useful.
I find this deliciously delightful after suffering the wrath of these stupid app developers historically on Android. I don't agree with it, certainly, but I feel some warped sense of justice.
That's always been a pet peeve of mine on Android, though now it seems both ecosystems will have a slightly more consistent user experience if one uses devices on both OSs a lot.
which is idiotic.
had everyone put effort in browser integration like webos was doing, the end user would be much better served.
but lack of lock-in doesnt sell in the corporate world...
had everyone put effort in browser integration like webos was doing, the end user would be much better served.
but lack of lock-in doesnt sell in the corporate world...
Amusingly, I've talked to many companies that are making more money on iPhone, started on iPhone, but they do all their prototyping and new development on Android simply because you can release or back out a release immediately there. Heck, it even has staged roll outs now. So there may be some design priority for Android as well if that is a common decision, since it is the better place to implement new functionality. The iPhone functionality is then often just a port.
The "three lines to represent a menu" metaphor has existed for years now. It just hasn't been as widely used until probably in the last year or so. I wouldn't use it to assume that iOS apps are being designed from Android apps or vice versa. You're just making baseless extrapolations.
I can't say it is baseless extrapolations. If you are hesitant to associate hamburger menu's to Android, the whole idea of iPhone revolutionizing mobile industry would be baseless extrapolations. Everything is built up on shoulders of its predecessors. Hamburger menu and side drawer have become an Android design standard at this point of time and there is no harm in saying that most iPhone apps will look like redesign of Android apps.
I think it's simply a case of a lot of the current flat design examples out there being targeted at Android. Prior to iOS 7 most iOS apps went for the heavily bevelled and textured look. As a result most of the good examples of flat design were on Android and it's likely these designs served as primary inspiration for a lot of iOS designers.
Actually, Fancy's design is basically the same as before. They just have a slightly translucent header and the system icons have a dark grey background instead of the standard flat black.
Apple realized it is better to copy Android in each and every respect. Apps, NFC.. Even copying colourful phones of Nokia doesn't hurt. Congrats Apple!
Except there isn't NFC.
And Nokia's coloured phones run Windows.
5 points, must troll harder.
5 points, must troll harder.
To be fair it's a new style language. It's going to take time for people to normalize on designs. Eventually I think that there will be a more homogeneous experience, but right now everyone is trying to feel it out and explore. Design follows trends, but right now there aren't any trends to follow in ios7.
Previously, wasn't it just follow Apple's style guide or go home? If so, what's happened in iOS 7? Are Apple just being far more lax in enforcing a style guide or is the style guide out of the window now?
Nope, that wasn't really the case before. There were plenty of apps that deviated from Apple's styles, it's just that their UI tools made it easy to design your own app with your own interface. I think we'll see a lot of apps that look like stock iOS apps once the app makers that have been holding off/don't have a UI Team realize they need to update their apps to match the modern visual style.
>Previously, wasn't it just follow Apple's style guide or go home?
No, it never was that way. In fact, Apple has even given Awards to third party apps with totally unique UIs.
No, it never was that way. In fact, Apple has even given Awards to third party apps with totally unique UIs.
what about designers to "normalize" on people and make their app usable instead of surfing on the flat fad? most of these after design are plain ugly.
I noticed this too, although to be fair I did think most of the "after" screenshots looked better than their "before" counterparts. It does seem that there's no real iOS 'presence' any more, but then I always thought the old iOS 'presence' looked hideous anyway so it doesn't look like a loss to me.
Not a lot (any?) of "top 50" most commonly used apps in this comparison yet. Plenty of examples of bad, non-standard design in the depths of the App Store.
Just as with iOSes before it, there will be skilled and unskilled interpretations of the design language.
Just as with iOSes before it, there will be skilled and unskilled interpretations of the design language.
Perhaps, but overall it seems like bad strategy to avoid doing something because you're afraid it might help competitors. You do whatever you think is the best thing.
Plus, Apple has been doomed for a long time now. Ditto the iPhone and iOS. And yet...
Plus, Apple has been doomed for a long time now. Ditto the iPhone and iOS. And yet...
I guess the biggest take away is that industrial design is not same as GUI design. I hope Johnny Ive will be strong enough to hire those Microsoft UX designers (Zune, XBOX etc) for iOS 8.
On the contrary I think we're entering a temporary period of apps looking closer to each other than they did pre-iOS 7. Hardly any apps used the stock controls anymore as they looked so stale, whereas many of the new designs are taking Apple's lead, at least for now.
I can imagine that the same process will begin to repeat itself as we get used to this new style.
I can imagine that the same process will begin to repeat itself as we get used to this new style.
How do you get to that? The UI is basically the same, but flatter. In addition, iOS 7 is not about aesthetics, it's about depth and movement...
What do you mean? I am FLAT. What don't you people understand about that? I AM FLAT WITH IMAGES!!
-- iOfficeSpace
-- iOfficeSpace
> if the visual presence of the OS disappears entirely from
> apps,
But look at, for example, "Days To Go". I think it's a very typical iOS 7 design, and it meddles the content with the UI: the caption looks exactly the same as the actual content.
On iOS 6, you knew what was the "window frame" (UI) and what was the "window" (content), and you could look through the frame without any cognitive effort. Now both parts look the same.
On iOS 6, you knew what was the "window frame" (UI) and what was the "window" (content), and you could look through the frame without any cognitive effort. Now both parts look the same.
I don't believe any of the default iOS 7 apps use gradients like that.
http://farm6.staticflickr.com/5330/9023342228_8341c60043_b.j...
http://farm6.staticflickr.com/5330/9023342228_8341c60043_b.j...
What I meant is this: On iOS 1-6, the UI is very clearly UI. The rectangle between navigation bars, tab bars and status bars is the content. It's like looking at a snowy landscape through a heavy, wooden frame.
On iOS 7, everything blends together and I don't see how this puts the focus on the content. E.g. in mail, the scrollable content has almost the same colour as the bars above and below it. How is it more prominent now?
On iOS 7, everything blends together and I don't see how this puts the focus on the content. E.g. in mail, the scrollable content has almost the same colour as the bars above and below it. How is it more prominent now?
We shouldn't forget that these are all iterations on existing designs, and that at least partially the improved readability/understandability(there's a better word that is escaping me here) is in part due to this in addition to the flatness. It isn't just "flat" that's doing it here, a lot of these examples are also making better choices with whitespace and data presentation in addition to downplaying gradients (chatter moving to cards and ditching the tabbar for example).
Few of these look better, IMO. And I'm definitely not seeing a lot of consistency in design. That said, many of them weren't great in the first place anyway.
One clear trend: getting rid of the bottom tab bar. I will mourn that loss - the top left corner is the least accessible place on the screen, and Apple saw fit to put the most important button (Back) there. The bottom bar was a very accessible shortcut in many apps. Although many faulted Android for having a back button, it's actually incredibly convenient to have it accessible in all apps.
One clear trend: getting rid of the bottom tab bar. I will mourn that loss - the top left corner is the least accessible place on the screen, and Apple saw fit to put the most important button (Back) there. The bottom bar was a very accessible shortcut in many apps. Although many faulted Android for having a back button, it's actually incredibly convenient to have it accessible in all apps.
iOS7 has a swipe from the left gesture that will trigger the back event, for apps that support it. Long overdue imo and it helps some with what you're describing.
Back events as a whole are problematic. Android's OS back button behavior is application defined up until you're at the base "level" of the app, at which point the behavior is OS defined and it takes you to the home screen. That kind of state management isn't intuitive, and even though you should be able to just hit the app icon to go back(assuming a properly coded app), it's still an inconvenience if you fat finger the button one too many times. Discovery of what the button does for each app is also an annoying process as well.
The change to a swipe might reduce the accidental fat finger, but discovery is a nightmare for both the gesture itself and application specific behaviors for the back event.
I prefer an application button in both cases, especially because it makes it clear that this is something that will only effect the app, and will not have a weird OS interaction, taking me out of the app.
The change to a swipe might reduce the accidental fat finger, but discovery is a nightmare for both the gesture itself and application specific behaviors for the back event.
I prefer an application button in both cases, especially because it makes it clear that this is something that will only effect the app, and will not have a weird OS interaction, taking me out of the app.
The issue with "swiping" gestures in general is that most users will never learn about them. Even if you introduce them visually in some kind of intro walkthough, they're too easy to forget.
The underlying problem that makes them a bad interaction paradigm, in my opinion, is that they have no affordances whatsoever. You just can't tell by looking at the UI that swiping left/right/up/down is going to have an effect.
The underlying problem that makes them a bad interaction paradigm, in my opinion, is that they have no affordances whatsoever. You just can't tell by looking at the UI that swiping left/right/up/down is going to have an effect.
For one thing, they're shown in Apple's promotional videos. How are users supposed to learn about any feature not represented by a button on screen? I'm thinking of the notification tray, control center, double-tap home button for multitasking, press home+power for screenshot, hold home button for Siri, and even older features like pinch to zoom and rotate.
Anecdotal evidence, but I know a lot of people that have zero idea about the double-tap home feature.
Apple has included arrow that point up to indicate the control panel.
Homebrewed swipe gestures, sure, but I don't think it's that big of a problem to introduce an app-wide swipe gesture. The problem with discoverability only shows up when it's in your own homebrewed component.
The affordances for swiping through Springboard seem to work pretty well. More important than the dots is the physicality of the animation. You can wiggle the current screen back and forth with a small motion and transition with a more dramatic one, but either way there's a clear directness to the interaction.
All swiping should work that way, and Apple is emphasizing the importance of "physical" dynamics in iOS 7.
All swiping should work that way, and Apple is emphasizing the importance of "physical" dynamics in iOS 7.
That's a great point - I think it does make it a lot better when there's some kind of connection between a physical movement and the response from the app. The worst kind of swiping gestures are the ones where you have to get it just right, and then a menu "magically" appears out of nowhere.
I think another possible way of indicating the presence of a gesture might be through clever use of shading - for example, a subtle gradient on the edge of the screen where you can swipe, giving you the impression that there's something "just off the screen". I haven't actually seen this in an app yet - not sure why this isn't done more, especially for the Pull To Refresh trick.
I think another possible way of indicating the presence of a gesture might be through clever use of shading - for example, a subtle gradient on the edge of the screen where you can swipe, giving you the impression that there's something "just off the screen". I haven't actually seen this in an app yet - not sure why this isn't done more, especially for the Pull To Refresh trick.
Ever since I switched to operating my phone using my left hand, it makes the left corner really easy to navigate. I made the switch because my right wrist has some residual injuries on it from high school.
Personally, I like the redesigned "flat" app design. However, in the case of Photo Investigator, it seems that the "flat" design is worse off. The buttons are no longer visible due to the cluttered background.
I realize this means nothing, but I love coming to the comments here, and the top 3 comments are effectively:
1. Hate it. 2. Meh. 3. Love it.
Yes, I'm summarizing, but I just found it highly amusing.
1. Hate it. 2. Meh. 3. Love it.
Yes, I'm summarizing, but I just found it highly amusing.
Different people have different tastes. I don't think anyone who hates it is wrong, but I'm glad I'm not in that set! Super-excited for tomorrow.
Oh, of course, and I didn't mean to imply anything about those people either. I was liberal with their interpretations. I just found it amusing and got a good chuckle out of it. =)
I don't like most of the "after" shots. It's now a lot harder to see what is a button/control and what is just decoration.
Why did they have to remove "good" skeuomorphism when going flat? :(
Because very fiewof these developers have actually read the guileless or followed by example. They've all given a very 'unique' interpretation of the style and screwed it up royally.
I like them. The information is much more clear.
Really? Tell me how this is more clear: http://grab.by/qmAu
I don't know which button state is worse, selected or unselected. I can't read either of them in the iOS7 version.
I don't know which button state is worse, selected or unselected. I can't read either of them in the iOS7 version.
That's definitely not clearer, but that's because it's a poor design decision by the developer.
Here's a screenshot of Apple's (just-out-of-Beta) Find My iPhone on iCloud.com showing exactly the same scenario but designed properly: https://dl.dropboxusercontent.com/u/709013/Screenshots/fmi-i...
It's much clearer, and in my opinion looks much better than the original toggle shown in the "before" screenshot there.
Here's a screenshot of Apple's (just-out-of-Beta) Find My iPhone on iCloud.com showing exactly the same scenario but designed properly: https://dl.dropboxusercontent.com/u/709013/Screenshots/fmi-i...
It's much clearer, and in my opinion looks much better than the original toggle shown in the "before" screenshot there.
I think the new (iOS7) design is better simply because the transparent box on the non-selected buttons allow me to see more map.
no it's not , especially when you cant tell the difference between what is a button and what is not a button.
Some of these don't seem "iOS 7ish" at all. Content in shaded boxes (within yet more shaded boxes!) is very much not the iOS 7 way. And strong lines separating content are rarely a good fit with the new look.
The ones that seem like they "get" it look much better to my eye. Lighter, cleaner, simpler, more open.
The ones that seem like they "get" it look much better to my eye. Lighter, cleaner, simpler, more open.
Maybe it's just me but a lot of these apps look really shoddy and half assed. I can't believe these are real apps that people expect customers to pay for.
Well, it's flat design. While with the pre-7 design you could have substance - really polished apps that shine by using textures, lighting, shadows, etc. with flat you only really have colored rectangles to show.
And as you can't make more appealing colored rectangles than your competition everything starts to look the same.
And as you can't make more appealing colored rectangles than your competition everything starts to look the same.
that's one of the problems of flat design ,it's so flat and dull it's hard to remember anything about it. Which app shown here feels like it has an identity? none.
The segmented control in "Photo Investigator" is completely illegible post-update.
Are people really redesigning their whole apps just to fit iOS 7 better or what's going on?
There are some who believe that iOS 7 represents a grand
reset of the app market, and a new land grab is afoot.
Personally I question that: Most users have no clue about iOS 7, and quite simply don't care. One day they'll get a system update notice, and from then forth every now and then apps will change incrementally. I don't see users changing apps just to get a new general style.
Personally I question that: Most users have no clue about iOS 7, and quite simply don't care. One day they'll get a system update notice, and from then forth every now and then apps will change incrementally. I don't see users changing apps just to get a new general style.
Everything is so flat.
But I like it tho. :) Simple and cool.
My first reaction was that there was no curation, no filter here, given the broad range of UI quality (both before and after), but then I realized this collection was even more interesting because of it.
While Hipmunk, for example, clearly has a team of UX and UI designers, and RecordOrders is almost certainly the design work of a single Cocoa programmer, I'd say the latter actually improved by a greater margin. Hipmunk already had a very nice pre-7 approach which they translated expertly to the new design language, but RecordOrders' awkward color fields and cramped buttons benefit greatly from the enforced minimalism.
While Hipmunk, for example, clearly has a team of UX and UI designers, and RecordOrders is almost certainly the design work of a single Cocoa programmer, I'd say the latter actually improved by a greater margin. Hipmunk already had a very nice pre-7 approach which they translated expertly to the new design language, but RecordOrders' awkward color fields and cramped buttons benefit greatly from the enforced minimalism.
These mostly look average at best, downright bad at worst. Before and after.
And, kids: "Making something look like iOS 7" does not absolve you from your duty to use good UX and to think about the "why" behind your visual design. Shitty design skinned to look like iOS 7 remains shitty design.
And, kids: "Making something look like iOS 7" does not absolve you from your duty to use good UX and to think about the "why" behind your visual design. Shitty design skinned to look like iOS 7 remains shitty design.
My thoughts exactly. A lot of these designs came down to putting lipstick on a pig. Yep, it's still a pig.
[deleted]
One thing I'm seeing on Hipmunk specifically is lower contrast and lack of shading has to be made up for by white space - the after seems to have a lot less information on screen, while still being (at least in my perspective) harder to read at a glance.
Almost universally, the trend in mobile (and, if Microsoft gets its way, desktop) is toward using more pixels to display less information.
It sucks. I wish the kids would get off that particular lawn.
It sucks. I wish the kids would get off that particular lawn.
I consider myself rather forward-facing developer when it comes to design, and have, as a general rule, enjoyed the new interface design choices in iOS7. However, I'm worried that this Oddysean journey into "flat design" is counter-intuitive to some basic UI principles.
I find that the bottom toolbar is harder to read now, and requires more eye-scanning to figure out what the different icons do. It's not as pronounced and grounded anymore. Also, the top navigation is less intuitive, and more subtle. I'm also finding information and text presentation to suffer as well. As much as I hated the beveled edges and skeumorphic design of the previous iOS, it was much easier to navigate. I'm sure companies and designers will work some of these early-stage kinks out of the interfaces, but I can definitely see a drop UI flow quality and information presentation with the move to this new interface design.
I find that the bottom toolbar is harder to read now, and requires more eye-scanning to figure out what the different icons do. It's not as pronounced and grounded anymore. Also, the top navigation is less intuitive, and more subtle. I'm also finding information and text presentation to suffer as well. As much as I hated the beveled edges and skeumorphic design of the previous iOS, it was much easier to navigate. I'm sure companies and designers will work some of these early-stage kinks out of the interfaces, but I can definitely see a drop UI flow quality and information presentation with the move to this new interface design.
the shadows and gradients were very good and directing your eyes on what is import and what is not important.
the flat design gives more elements equal footing. instead of the interfacing being able to accentuate the important areas to look at, you now have to know the app (or screen) and know where to look.
the flat design gives more elements equal footing. instead of the interfacing being able to accentuate the important areas to look at, you now have to know the app (or screen) and know where to look.
Don't care for the white backgrounds everywhere. Going to be even more difficult to use at night. Wish there was a way to choose a theme, like we had in the 90's.
Use the home button triple-click trick for night reading.
http://lifehacker.com/5957534/invert-your-phones-colors-for-...
Another thing that really helps is f.lux for iphone:
http://justgetflux.com/ios.html
But this sadly requires jailbreaking.
http://lifehacker.com/5957534/invert-your-phones-colors-for-...
Another thing that really helps is f.lux for iphone:
http://justgetflux.com/ios.html
But this sadly requires jailbreaking.
Thanks, I do remember that. There is the problem though of those apps which use a dark theme, that therefore become light upon negative view. Hence, why I'd prefer a single theme enforced.
Themes don't work; Windows Phone has two choices and a lot of developers simply support only of them.
Yes and No :-)
Most utility apps that aren't supporting an existing brand will often support both themes. However I've noticed that apps that are already branded will go along with only the theme that works best with their brand.
Most utility apps that aren't supporting an existing brand will often support both themes. However I've noticed that apps that are already branded will go along with only the theme that works best with their brand.
The way themes have worked historically is that the application isn't consulted.
Fascinating. The new designs seem to look very W8 Metro.
I confess an idle curiosity as to why the art style shift and if there's a genuine change in design philosophy (e.g., Modern vs. Romantic type watershed moments) or if it's just a flavor of the day shift (I can often date websites and books by their visual design elements, but it doesn't mean that there was a fundamental philosophy shift).
I confess an idle curiosity as to why the art style shift and if there's a genuine change in design philosophy (e.g., Modern vs. Romantic type watershed moments) or if it's just a flavor of the day shift (I can often date websites and books by their visual design elements, but it doesn't mean that there was a fundamental philosophy shift).
With Metro I think that Microsoft did something really unique, it had a digital design language that spoke to a lot of UI designers. Thats not to say they executed it particularly well, because even if it looks good that doesn't mean it is particularly easy to navigate.
It didn't look like any UI that had come before it mostly because it striped everything out of the design, and it that way it was really interesting. Designers had still be struggling with the move from page design to digital design and flat seemed like a good answer.
Side note: Its interesting that everybody is shouting about it looking like Android when they should really be saying that everything looks like Metro
It didn't look like any UI that had come before it mostly because it striped everything out of the design, and it that way it was really interesting. Designers had still be struggling with the move from page design to digital design and flat seemed like a good answer.
Side note: Its interesting that everybody is shouting about it looking like Android when they should really be saying that everything looks like Metro
I can't be the only person to think that iOS 7 does not look good. Right? A lot of the "after" screenshots do not look any better. I'd say some of the after screenshots look worse!
For me, this is good. Generally speaking, I like the right side more, although there were one or two (notably Salesforce and Hipmunk) which I thought regressed a little. In both cases, the lower information density on the right hand side is the problem.
Some of them look like they're from my e-ink Nook.
Wow, who ported all those Metro-style apps from WP?
Everything looks a lot more like Android now. I am interested to see if Kit-Kat makes any significant stylistic changes.
I doubt Android will be making any more large style changes - Google has finally found an identity for Android, and 4.0 made large changes that the majority of the Android user base seem to be happy with ( I know I am ).
Regardless, I think both iOS7 and Android both look very pleasant now.
Regardless, I think both iOS7 and Android both look very pleasant now.
I think they will follow the updated card style Google designs we've seen in Google Now, Google Keep, etc.
Wow. Hipmunk is a great example, in my opinion, of how flat can be bad by removing so many visual cues.
The old one is easy to see, understand, and instantaneously "grok", because of the depth cues and shading. The new one is a mess of plain colored boxes, where you have to spend time figuring out what is a header, what is a row, etc. -- it's not instantly obvious. The prices are clearly clickable on the left, on the right I'd never guess they were (if they are). So much flatness just makes the screen to hard to figure out.
The old one is easy to see, understand, and instantaneously "grok", because of the depth cues and shading. The new one is a mess of plain colored boxes, where you have to spend time figuring out what is a header, what is a row, etc. -- it's not instantly obvious. The prices are clearly clickable on the left, on the right I'd never guess they were (if they are). So much flatness just makes the screen to hard to figure out.
Hipmunk really makes the problems of flat design stand out. There is a common belief that simpler design means better UE. The things that are being tossed out in flat design are the things that often made good designs intuitive in the first place though. Many designers are reaching incorrect conclusions about simplicity and the whole KISS principle. The whole KISS principle doesn't require throwing out pixels and properties in the name of "a trend".
Good UE is memorable and intuitive - and is often lacking in the many flat designs I've been seeing lately.
I really fear that flat design trend is making products less emotional, memorable and usable.
Good UE is memorable and intuitive - and is often lacking in the many flat designs I've been seeing lately.
I really fear that flat design trend is making products less emotional, memorable and usable.
The problem seems to be some people tend to do more than flatten their designs dimensionally (as in gradients, bevels, specular highlights etc).
They also 'flatten' the design as in reducing contrast, reducing lines/borders and other ways of separating and organizing information/data.
That's the problematic part to me. Hipmunk did that here.
SeatGeek is an example of almost pure dimensional flattening. It's pretty much the same. Just feels a bit cleaner and more elegant. Especially notice how they replaced the shadow with a grey border. The shadow played the role of a separator. Thus they replaced it with a flat separator. What the other kind of a 'flattener' might do is just throw away the separator completely. And that is where you can screw up.
SeatGeek is an example of almost pure dimensional flattening. It's pretty much the same. Just feels a bit cleaner and more elegant. Especially notice how they replaced the shadow with a grey border. The shadow played the role of a separator. Thus they replaced it with a flat separator. What the other kind of a 'flattener' might do is just throw away the separator completely. And that is where you can screw up.
Reducing contrast is really a problem in my opinion for users. I totally agree with you.
SeatGeek is elegant (I like the visual), but as with most flat designs, affordance is a problem. I believe that the word Filter on the right side of Great Deals might be clickable/tappable text (based on my previous flat design button hunts and the previous iOS7 image with a gear). The problem is, I don't know for sure without actually trying it.
When I have to go beyond skimming to discover basic functionality, the user experience is broken in my opinion and cognitive load increases.
SeatGeek is elegant (I like the visual), but as with most flat designs, affordance is a problem. I believe that the word Filter on the right side of Great Deals might be clickable/tappable text (based on my previous flat design button hunts and the previous iOS7 image with a gear). The problem is, I don't know for sure without actually trying it.
When I have to go beyond skimming to discover basic functionality, the user experience is broken in my opinion and cognitive load increases.
> Reducing contrast is really a problem in my opinion for users.
The most terrifying example, in my opinion, is the team selector on the InfiniteHoops app. It keeps the skeumorphic 3-dimensionality of the old selector, but strips out all of the color and context and makes the text hard to read, turning the whole thing into a real mess.
The most terrifying example, in my opinion, is the team selector on the InfiniteHoops app. It keeps the skeumorphic 3-dimensionality of the old selector, but strips out all of the color and context and makes the text hard to read, turning the whole thing into a real mess.
It'll be interesting to hear the views from Hipmunk designers or engineers, if any, lurking on HN.
If I saw the "after" UI of Hipmunk without having seen the "before" UI, I would have been totally lost. Where are the buttons? What is a label and what is tappable!? It is even worse with touch, there is no hovering cursor that changes appearance. I honestly think "flat" is going to take a long time to work out the kinks. I think it is here to stay a while, for better or worse.
> What is a label and what is tappable!?
If only there were an easy way to find out.
I honestly think people are making too big a deal about this. The kind of people who download apps are not going to have an issue exploring the UI of new apps to figure out how they work. And it's not that hard to figure out just by looking either. Verbs, arrows, and nouns that don't label something adjacent to them should all be clickable. And if they ain't, oh man, you just wasted two seconds finding that out. Not the end of the world.
If only there were an easy way to find out.
I honestly think people are making too big a deal about this. The kind of people who download apps are not going to have an issue exploring the UI of new apps to figure out how they work. And it's not that hard to figure out just by looking either. Verbs, arrows, and nouns that don't label something adjacent to them should all be clickable. And if they ain't, oh man, you just wasted two seconds finding that out. Not the end of the world.
Speaking as a 39 year old developer curmudgeon who routinely downloads new apps: I am not going to click around and discover your interface if it isn't obvious in the first few minutes.
As an example, the new flat google maps app is a disaster. It took me weeks to figure out how to do fairly simple things, like how to cancel turn by turn directions. My wife is totally lost, as a long time iphone 4 user trying to use the flat iphone 5 version. When she tries to navigate while I am driving, she is constantly confused while I say, "no! just swipe down hard enough that the app thinks you are going back, then click on the box, then click the x, then swipe up, and stand on your left foot!"
But we have to have a map, so we use it.
As a startup, this is what you should think about: Is your app as useful as google maps? If not, then you can't afford to make it unusable with a trendy flat interface.
As an example, the new flat google maps app is a disaster. It took me weeks to figure out how to do fairly simple things, like how to cancel turn by turn directions. My wife is totally lost, as a long time iphone 4 user trying to use the flat iphone 5 version. When she tries to navigate while I am driving, she is constantly confused while I say, "no! just swipe down hard enough that the app thinks you are going back, then click on the box, then click the x, then swipe up, and stand on your left foot!"
But we have to have a map, so we use it.
As a startup, this is what you should think about: Is your app as useful as google maps? If not, then you can't afford to make it unusable with a trendy flat interface.
Honestly, not a huge fan of newmaps, and I'm a googler. But most people I know have figured out how to use it. I did too after playing with it for a bit. People will figure things out, especially if there are no non-flat alternatives.
I'd say most of these are arguable which is better.
Except for Photo Investigator. The before picture has readable buttons on the bottom. The after picture is pretty much completely unreadable.
Except for Photo Investigator. The before picture has readable buttons on the bottom. The after picture is pretty much completely unreadable.
Wow, that Photo Investigator after shot is terrible: http://a2.mzstatic.com/us/r30/Purple6/v4/cc/ad/2c/ccad2c57-d... Are we supposed to read that glaring hot red on a cluttered map background?
iOS 7, now with less design.
So how hard was it for the developers to support iOS 7? If they used the correct core UI elements, the transition was seamless[~], right? Because with Android (until recent versions) such a major update in UI would have been a disaster (not that develoeprs care much, there aren't even strict UI guidelines).
[~] edit: -smoothless | +seamless
[~] edit: -smoothless | +seamless
I feel like Apple learned the wrong lesson from the huge flap last year that suddenly jammed "skeuomorphism" into all our vocabularies. There's nothing wrong, IMHO, with UI that looks like a polished, compact control panel. The problem was UI that looked like a rodeo in an office-supply warehouse.
I do like Android's "floating cyberspace icons" approach, but I liked Apple's "UFO hi-fi panel" look too, and it's a shame to see a former design leader becoming such a follower. On the other hand, it's delicious irony to see an enthusiastic tosser of look-and-feel lawsuits reduced to stealing from the same people they've been suing, so it balances out.
I do like Android's "floating cyberspace icons" approach, but I liked Apple's "UFO hi-fi panel" look too, and it's a shame to see a former design leader becoming such a follower. On the other hand, it's delicious irony to see an enthusiastic tosser of look-and-feel lawsuits reduced to stealing from the same people they've been suing, so it balances out.
Basically, my same thoughts too. Everything's is being beaten with the flat design stick these days.
This nails it.
> There's nothing wrong, IMHO, with UI that looks like a polished, compact control panel. The problem was UI that looked like a rodeo in an office-supply warehouse.
This nails it.
> There's nothing wrong, IMHO, with UI that looks like a polished, compact control panel. The problem was UI that looked like a rodeo in an office-supply warehouse.
Yeah, it's pretty terrible! Whoever derided "skeumorphism" didn't appreciate the Steve Jobs-led Apple approach to make computers feel familiar and provide cues for ease of use. This is just ... terrible for the ecosystem!
I doubt they learned their lesson yet.
One thing I noticed a lot of these updates are forgetting to include are changes to use the stock keyboard available in iOS7. It pains me to see the default iOS6 keyboard still used in iOS7 in focus in inputs.
Devs, please remember to make the changes necessary so that the new keyboard is used in your application.
Devs, please remember to make the changes necessary so that the new keyboard is used in your application.
I am not sure it has improved for the better. And the "after" screenshots seem to have less familiar UI elements in common.
The comparisons are pretty striking. Apple really set the standard for smartphone design and it took competitors quite a while to catch up. I have an Android phone and iPad and I think both design approaches have their benefits and drawbacks.
It was probably easier to design an app using the iOS 6 and lower defaults and have it look nice, while the completely flat design requires careful use of whitespace and color and differentiate the various UI sections and elements. In the long-term, best practices will be better documented and flat designs won't be a problem.
It was probably easier to design an app using the iOS 6 and lower defaults and have it look nice, while the completely flat design requires careful use of whitespace and color and differentiate the various UI sections and elements. In the long-term, best practices will be better documented and flat designs won't be a problem.
I finished updating my app to iOS7 and I think it looks way better than most items in that page: http://pic.twitter.com/QSruUkzMzr
could you send us before and afters - we'll include them
apps that mostly use standard controls look much better to me (instapaper, quip, punjabi dictionary, stamps for direct mail) but anything with significant custom controls looks terrible. a bunch of them look like they belong on android. i guess that's cause for optimism as it means apps can look great and designers should eventually manage to get a feel for the platform
Most look like Android apps to me, whats not showing here is that most of these have shifted to using left side pull out menus, just like Android.
More cross platform design consistency is a good thing in my opinion.
More cross platform design consistency is a good thing in my opinion.
The Hipmunk app got really confusing. 4square also looks not as good as the pre-7 version IMHO.
I feel like the befores are significantly better. The gradients and heavier weights divide up the space better, and let you easily find the natural boundaries. In the afters almost everything blends together.
I updated to the GM last week. I like it. I think it is a great first step.
That Yahoo Weather app looks like that on my iOS 4? 5? (ancient, whatever it is).
I have to say the game has just started. Just like my previous comment on another thread (https://news.ycombinator.com/item?id=6387986):
As I wrote in my past blog(http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinki...): "Making users think which part of the iOS application I am in less, instead, a more strong feeling in one single place Apple provides." Apple made their move. Whether the rebalance can be reasonably achieved or not, how and when remain uncertain. I do think, in terms of graphic design choices, it seems to have fewer variables. But, perhaps this is where a more dynamic 2D physics UI engine comes to help.
I also would like to add:
A playful, responsive, hence visually less heavy UI system may wait ahead. But I don't think it could be the same scale of positive feeling like the original iOS UI brought to us years ago. That was like achieving from 0% to 65%. This time, 75% to 85% maybe? Both are not easy jobs to do though. And Apple's continuous effort on this at a systematic level is a good thing for users.
As I wrote in my past blog(http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinki...): "Making users think which part of the iOS application I am in less, instead, a more strong feeling in one single place Apple provides." Apple made their move. Whether the rebalance can be reasonably achieved or not, how and when remain uncertain. I do think, in terms of graphic design choices, it seems to have fewer variables. But, perhaps this is where a more dynamic 2D physics UI engine comes to help.
I also would like to add:
A playful, responsive, hence visually less heavy UI system may wait ahead. But I don't think it could be the same scale of positive feeling like the original iOS UI brought to us years ago. That was like achieving from 0% to 65%. This time, 75% to 85% maybe? Both are not easy jobs to do though. And Apple's continuous effort on this at a systematic level is a good thing for users.
here's what the updated Zillow app that Tim Cook featured looks like http://www.zillowblog.com/2013-09-10/coming-soon-zillow-apps...
disclosure: Z employee
disclosure: Z employee
I think that the inconsistency of these designs is important. It reminds me of when the App Store was first opened for the public and the v1.0 of the apps we use today were launching. Apple has, effectively redone their entire ecosystem, design-wise, with iOS7. It'll be interesting to see how this plays out, especially once the designs start to become a bit more consistent.
iOS 7 is less about how it looks and more about how it feels. Hence screenshots are a poor medium for criticism compared to iOS 6.
Yes, agreed, having used it for 3 months on now, it replaces the visual affordances of shadows, shading, and textures with physics and animation. My key learning so far from building something iOS7-native is that the closer you can make it to feeling like a real object, the better.
Sadly, I find myself preferring the iOS 6 look
All I saw was a lot of bright white, something I try to avoid because it makes my eyes hurt. I kinda annoyed at apple for messing up an interface I really liked, I'm gonna have a hard time recommending it to un-tech savvy friends and family because (in my opinion) all this flatness makes it harder to use...
Up until this point I always recommended the iphone to anyone who just wanted a phone that worked, and didn't want to have to worry about bugs, or confusing UI (even though personally I'm a windows phone guy, I can't recommend the OS because it doesn't yet match the full feature set of iOS or Android).
Up until this point I always recommended the iphone to anyone who just wanted a phone that worked, and didn't want to have to worry about bugs, or confusing UI (even though personally I'm a windows phone guy, I can't recommend the OS because it doesn't yet match the full feature set of iOS or Android).
One thing to keep in mind is that things 'feel' different on the phone than they do in screen shots. I was pretty 'meh' about iOS7 until I installed the GM on my phone. It still has some weird spots, but over all it looks a hell of a lot better 'live' than it does in pictures. The transitions effects are nice, the removal of skeuomorphism is awesome and the operation is nice. It is not 'revolutionary' but it is a nice evolution from iOS6
Steve Jobs is turning in his grave. All of these look so random and interchangeable to me that it could probably even have effects on the common 'iOS first' mentality. What was so special about the iPhone again?
Looks much better. iOS used to look like Mac OS from the mid 90's, now it looks like it belongs in this decade. It does look more Android and WP8 ish, but I consider that a good thing.
I'm pretty sure you must mean "OS X from the mid-2000s" — look at screenshots of System 7 for comparison…
Semi-unrelated: To me, this page of screenshots did a better job of helping me discover new iPhone apps -- than any other attempt I've seen. And it's unintentional.
Not totally unintentional, since it was created by a website dedicated to app discovery... But yeah, I discovered some new interesting apps myself :)
The message I'm getting from these examples is that designers will need to invest a lot more effort into UX under iOS 7 compared to 6.
To me it seems obvious which teams have spent a lot of time reworking their app to fit the language and who have just slapped on a new coat of paint and hoped for the best. I think approaching my apps from the ground up rather than 'reskinning' the current designs will work best for me.
Unfortunately it seems finding ways to take elements away from the UI has stumped a few of these teams for the time being.
I'm predicting fairly large teething problems while we all adjust based on this group. There's definitely potential for growth for the guys that can nail it from day one though!
To me it seems obvious which teams have spent a lot of time reworking their app to fit the language and who have just slapped on a new coat of paint and hoped for the best. I think approaching my apps from the ground up rather than 'reskinning' the current designs will work best for me.
Unfortunately it seems finding ways to take elements away from the UI has stumped a few of these teams for the time being.
I'm predicting fairly large teething problems while we all adjust based on this group. There's definitely potential for growth for the guys that can nail it from day one though!
We've continued to add more and more screenshots as they are coming in. Some of the highlights: Venmo, Ted, Foursquare, Seatgeek...
The number take-away from this for me is wow, Apple wields an awesome power. They move to change design conventions, and boom! - a worldwide ecosystem of designers and developers scramble to retrofit every aspect of their complex applications to match the changes. Microsoft could only dream of having that power. I've been on Windows Phone for over a year now and at this point in time they seem years away from even having anything resembling this sort of following. The difference of course is that one phone feels exciting and dynamic to own, and the other feels completely and utterly barren.
EVERYTHING beautiful is skeuomorphic. The page turn in iBooks, page curl in maps, cover flow, the shred animation in passbook, the date picker in iOS, rotating settings gear (when updating iOS), the Time Machine interface in OS X, photo borders and shadows in iWorks documents, etc.
This is not surprising, because our sense of beauty comes from the physical world.
So what is the problem with skeuomorphism?
Tech enthusiasts would like their phones to look like something from the future, not something from the past. But ordinary everyday people prefer for it to look like things they are already familiar with.
Tech enthusiasts worry that the skeuomorphism was getting totally out of hand, particularly where the UI metaphor started limiting functionality (e.g. an address database that's limited to what a Rolodex can do, rather than exploiting what is possible with a computer). But this is not really true. For example, iBooks has instant search, something only possible with a computer.
Some people say skeuomorphism looks tacky. This is partly true. Skeuomorphism is hard to do. When done poorly it does look tacky. But when done well it looks very beautiful.
By removing all skeuomorphism Apple is throwing the baby out with the bathwater.
This is not surprising, because our sense of beauty comes from the physical world.
So what is the problem with skeuomorphism?
Tech enthusiasts would like their phones to look like something from the future, not something from the past. But ordinary everyday people prefer for it to look like things they are already familiar with.
Tech enthusiasts worry that the skeuomorphism was getting totally out of hand, particularly where the UI metaphor started limiting functionality (e.g. an address database that's limited to what a Rolodex can do, rather than exploiting what is possible with a computer). But this is not really true. For example, iBooks has instant search, something only possible with a computer.
Some people say skeuomorphism looks tacky. This is partly true. Skeuomorphism is hard to do. When done poorly it does look tacky. But when done well it looks very beautiful.
By removing all skeuomorphism Apple is throwing the baby out with the bathwater.
If you were to show both screens to a person who hasn't seen any of them, I wonder if she would be able to tell which was the improved UI.
the hipmunk downhill in design show even on the app.
3 times more pixels, 1/3 of the information.
3 times more pixels, 1/3 of the information.
In some ways iOS7 looks cleaner and more subtle but to me it is generally MUCH worse for understanding what to do (like when MS Office went away from menus and to the tool strip junk). The old version used blank space better, it was clear what elements could be clicked as buttons were clearly buttons, content was more separated from control, etc.
Some of the icons/fonts/colors are clearly improved but in general I think it’s a fail. And, to me, flat looks cheap.
Some of the icons/fonts/colors are clearly improved but in general I think it’s a fail. And, to me, flat looks cheap.
It looks VERY similar to the Windows Phone OS now.
(Please don't vote me down - really, this is just my honest opinion. I actually think the Windows Phone OS looks very nice although it is not very usable in practice. Personally I have an android phone)
(Please don't vote me down - really, this is just my honest opinion. I actually think the Windows Phone OS looks very nice although it is not very usable in practice. Personally I have an android phone)
So many of these apps look terrible
Awful, just awful. Very surprised to see a company that has design as such a focus blow it like this. The flat design doesn't help the user (imho) and actually hurts him/her. It takes longer to understand and discern between different elements in apps. Can't wait for iOS 8.
Can I just say that I hate icons lacking text. I hate trying to decide what the designer meant by an arrow going up vs down. What exactly do "3 lines" mean?