iOS 5 Revamped UI Mockup

Discussion in 'iPhone' started by Eso, Jun 7, 2011.

  1. Eso, Jun 7, 2011
    Last edited: Jun 8, 2011

    Eso macrumors 68000

    Eso

    Joined:
    Aug 14, 2008
    #1
    When the iPhone originally launched, the UI was nothing more than 15 apps on a black backdrop. All you could do was literally launch and close apps. Although simple, it was actually a fantastic UI for doing just what it was designed to do. Of course, I'm just referring to all the ways in which you interact with the OS outside of apps (the springboard).

    Since then, Apple has added a number of features that have expanded how we interact with iOS - multitasking, notifications, spotlight, folders, and iPod controls. All these features call for UI elements that the iPhone OS was never designed for. Instead of designing a new UI to incorporate new functionality, however, Apple has continued to patch features in to the original design. Each time they have done just enough to get it working. Consequently, we have ended up with a nonsensical control scheme that feels like it has no continuity:

    Diarama.jpg

    Spotlight is a homescreen - except with an out-of-place text field at the top, no icons, and the virtual keyboard. They didn't have a place for multitasking so they decided to just push up the entire UI off-screen a little bit and put the recently used apps in a tray. The iPod controls are in the multitasking tray if you go to the left, otherwise you get apps that have been used less recently. Notifications are now collected and pulled down from the top, but there's no feature in the UI that reflects that which also means that there is no indication that there are even new notifications in there!

    Frankly, it's pretty damn stupid; the iOS UI is well overdue for some fresh design (and not because a grid of app icons is "stale"). Unfortunately we'll probably have to wait until next year. I'm tired of waiting, however, so I stitched together some mockups of what things might have been. The goal here was to unify the major features of iOS in a more cohesive design while maintaining the current UI scheme as much as possible. All major UI dimensions are to scale. Let me know what you think (click to enlarge):

    Mockup1.PNG

    1.) Status bar remains unchanged.

    2.) Notifications and search bar. The most recent 4 notifications are shown as the small app icons to which they belong. These icons are to scale - the same size seen in spotlight search results. In the middle is the notification center "grip" which can be dragged down or tapped to open notifications.

    3.) The Spotlight search field will fill the length of the device (covering up the notifications) when focused just like Google search in Safari. The home screen will dim and the keyboard will slide up, covering the bottom. Search results are shown over the homescreen just like it is now.

    4.) Typical homescreen with support for folders and widgets. The spotlight screen is obviously removed as well as the dock. Icons can now be snapped to any position on the grid without autmatically filling any empty spaces between icons.

    5.) The homescreen page indicator is now contained within a UI element that seperates the homescreen from the multitasking tray.

    6.) The multitasking tray is always displayed. Although the icons are smaller (space contraints) they are to scale - they are the iPad versions. The multitasking tray still lists the most recent apps although now it only contains the apps whose state is saved (still in RAM). Any app currently processing in the background (through the various APIs) is shown as dimmed with the spinning "working" symbol overlaid.

    Double-clicking the home button is no longer used to switch apps. A single-click brings you back to the main screen which can now be used to switch apps (as well as to access anything else such as widgets or notifications).

    Mockup2.PNG

    1.) Homescreen showing the three of the four standard sizes of widgets. Widgets snap into place much like large app icons. The widget content can potentially be scrolled vertically within the widget and can contain many sorts of controls.

    2.) Much like how a folder opens, an in-line widget can potentially be expanded to show additional lines. For example, a news app that shuffles through one headline at a time may be expanded to quickly browse through several headlines.

    Mockup3.PNG

    Example homescreen with the last standard widget size arranged neatly above app icons.

    Mockup4.PNG

    Example homescreen with various widgets arranged among app icons. Blank spaces demonstrate that apps can be arranged anywhere on the homescreen (snaps to grid). Possible widgets include music controls and quick access to particular settings. The flexibility of this control scheme is that clicking the home button allows one to control the iPod, check a notification, or launch a different app while still being able to return to the app with a single tap.
     
  2. aohus macrumors 68000

    Joined:
    Apr 4, 2010
    Location:
    sky
  3. Eso thread starter macrumors 68000

    Eso

    Joined:
    Aug 14, 2008
    #3
    Yeah, fixed.
     
  4. Brien macrumors 68030

    Brien

    Joined:
    Aug 11, 2008
  5. Small White Car macrumors G4

    Small White Car

    Joined:
    Aug 29, 2006
    Location:
    Washington DC
    #5
    I don't like it.

    The current method scales well for different kinds of users.

    1) The basic user just swipes apps and ignores all that other spotlight/multitasking/folder stuff. They were happy with iPhone 1.0 and they're still happy.

    2) The moderate user does folders and spotlight searches but they just don't care about the multi-tasking switcher and the notification center probably won't get much use from them either.

    3) The uber-user makes threads like this one.

    - - - -

    We're mostly uber-users around here. And maybe your design is good for them. But it also puts EVERYTHING right out in front of those other 2 users who, like #1, may not understand it or, like 2, know what it is but just don't care.

    Both of those (very large) groups would find your design cluttered, confusing, and unnecessary.

    Things like double-clicking, folders, and the spotlight screen are all great because they're invisible features that are there for the people who want them and they're invisible for the people who don't want them. (In fact, the app-store itself is based on this principle! I get Instagram and Twitter and users who don't want them don't get them.)

    That's what makes the iPhone great and your idea attacks that concept with a hammer. I don't think destroying the iPhone's strengths is the way to go.
     
  6. AndrewR23 macrumors 68040

    Joined:
    Jun 24, 2010
    #6
    Great points.

    Thats why Apple should have choices. Choices like the OP made up and the old regular homescreen they have now.

    Apple will be an amazing company if they gave us choices. I have yet seen someone argue me with that.
     
  7. Hobbes. macrumors regular

    Joined:
    Jun 10, 2009
    #7
    Do a proper mock up, high res images including what it would actually look like with apps, in place and all the necessary features in things more then blue squares.

    make this mock up look like image on the apple site, get the JB developers interested, see if you can make this work and get apples attention like the guy who did Mobile Notifier.
     
  8. Small White Car macrumors G4

    Small White Car

    Joined:
    Aug 29, 2006
    Location:
    Washington DC
    #8
    Apple is a great company because it restricts choices.

    Google gives you choices. (Check out the 'labs' section in g-mail if you don't believe me.) Google does pretty well with that plan.

    But Apple is not Google and if Apple tried to be Google well, then we'd suddenly find we have very few choices again, wouldn't we?
     
  9. green94 macrumors regular

    Joined:
    Mar 17, 2009
    #9
    Agreed - i love what you've done here. Listen to Hobbes!
     
  10. JASApplications macrumors 65816

    Joined:
    Nov 24, 2010
    Location:
    Scarborough, United Kingdom
    #10
    Agreed, much prefer the current method.
     
  11. Pink∆Floyd macrumors 68020

    Pink∆Floyd

    Joined:
    Nov 21, 2009
    Location:
    Up There
    #11
    It's a nice mockup indeed, but not nice enough :D
     
  12. Blorzoga macrumors 68030

    Blorzoga

    Joined:
    May 21, 2010
    #12
    I think the spotlight search screen should be eliminated. I've had my phone for years and have never used it.
     
  13. utwarreng macrumors 6502

    utwarreng

    Joined:
    Aug 8, 2009
    #13
    I on the other hand, use Spotlight all of the time, though almost never for anything other than apps.

    I like where the OP is going, and would love to see some more details as well.

    I'm not bored with iOS per se, but would love to see some refreshes.
     
  14. dccorona macrumors 68020

    dccorona

    Joined:
    Jun 12, 2008
    #14
    I would keep multitasking as it is...it works well, is accessible from anywhere, and makes sense. I would however make the changes to the multitask bar that you did, I just wouldnt make it always visible. I like having a dock...I want to be able to access certain apps from anywhere in the phone

    all the other changes you made, I love. Looks great. Awesome concept
     
  15. Eso thread starter macrumors 68000

    Eso

    Joined:
    Aug 14, 2008
    #15
    New images

    I've added some photoshopped mockups according to the conept (as always, click to enlarge). This is a typical main screen with an empty multitasking tray and a few notifications in the notification center:

    MockupA.png

    Another shot after the user has used a couple applications. A few emails have been read which has cleared some of the notifications. The iPod is playing in the background:

    MockupB.png

    Finally, an example of Spotlight. Tapping the search field causes it to stretch to fill the entire notification bar, dims the screen, and brings up a keyboard. The "done" button has the reverse effect:

    MockupC.png

    MockupD.png
     
  16. kppolich macrumors 6502a

    kppolich

    Joined:
    Nov 28, 2010
    Location:
    Milwaukee, WI
    #16
    nice couple of posts. looks like you have put a few hours of effort into this.
     
  17. boshii macrumors 68040

    boshii

    Joined:
    Jul 6, 2008
    Location:
    Atlanta, GA
    #17
    This UI looks useable. The only thing I don't like are the notification icons. I think it would be neater to just have one icon with the number of notifications instead of multiples of the same icon.
     
  18. lulla01 macrumors 68020

    lulla01

    Joined:
    Jul 13, 2007
    Location:
    U.S
  19. Blues003 macrumors 6502

    Joined:
    Apr 18, 2010
    #19
    I like the general but I tend to like the dock. So I'd suggest: keep the dock, but make it slideable to the left. When doing so, the dock you thought of would appear (smaller icons, recent apps).

    Also, instead of 2 messaging + 2 mail icons, what about just one of each and a small number near them?

    And finally, what about makin the search bar smaller? I think a simple magnigying-icon would suffice, actually. I don't enjoy the looks of the extended search bar. Just a suggestion. ;)

    Cheers
     
  20. vultureboy macrumors member

    vultureboy

    Joined:
    Nov 28, 2006
    Location:
    Blackpool, UK
    #20
    Personally I really like the way iOS works currently. I don't think it feels bolted on and actually feels like a very well built system. The home screen you have designed there, in my opinion, feels very very cluttered. I never use spotlight at all so having it on the front screen just adds a mess of features. I also like having a dock since I have my most used apps on there so I can easily access them on other screens.

    The changes to multi tasking I don't think are needed. In fact having to go back to the home screen to change to a new app seems very much like a backward step. I can do this currently and the only difference being I need to choose the app from whatever page / folder it is in.

    Finally, the notification icons again seem rather cluttered way about doing it and I would be more than happy with just a notification icon in the status bar. IP4 users already have notification alerts from the camera flash and I have a feeling this could be enhanced in the IP4S/5. but a simple (3) or similar in the status bar would completely remove any issues I have with the current notification system.

    The only other item I would change about the current iOS UI is to change the multi tasking bar from a double home click to a swipe up from the bottom. Possibly making it a little larger to fit more apps in.

    I'm a big believer in the "If it's not broken, don't fix it" way of life and iOS definitely falls into that category, it just needs some VERY minor tweaks. But that's my opinion, as someone mentioned earlier being able to turn off items like Spotlight or change multi tasking from clicks to swipes would be a very nice addition to keep everyone happy! :)
     
  21. b166er macrumors 68020

    b166er

    Joined:
    Apr 17, 2010
    Location:
    Philly
    #21
    I think something like this would be awesome.

    I agree the old ways need to be preserved for the individual user experience.

    You should be able to go into settings and toggle the "notification bar" on/off, same goes for spotlight, multitasking, widgets, etc. This way you can set it up the way you want it and get the most enjoyable/efficient experience.

    If they tweaked iOS to include a format similar to the OP's mockup I would definitely use it. Add a toggle for wifi and bluetooth and I'd be in heaven.

    Yes I know... jailbreak this, android that, bla bla bla.
     
  22. Blues003, Jun 10, 2011
    Last edited: Jun 10, 2011

    Blues003 macrumors 6502

    Joined:
    Apr 18, 2010
    #22
    For me, iOS didn't have to change that much. In fact, I think I found out what would be a good solution for iOS. It'd keep it simple, and at the same time, it would also solve the Notification-Centre-UI-copied-from-Android issue.

    My concept would go more around this:

    [​IMG]



    While it does seem confusing, it is not. Let me explain this by parts. First, the top part of the concept.

    [​IMG]

    The "top" part of the concept is what the iOS has always been about. Swipe right = Spotlight, Swipe left = more homescreens. No changes.




    In order to go to the bottom part, one would either double-click or long-click on the home button. Here, what we would get would be something like this (pardon my skills, it was made on Paint):

    [​IMG]



    This unifies Notification with the Multitasking Dock, in one command (double click Home or long-click home). You could swipe the dock left and right, as you already do on iOS 4. Notifications would be scrollable (downwards/upwards) and clickable.

    Basically, what I did was put the notification centre on the same screen as the multitasking dock. While seemingly unimportant, I see a number of advantages with this method.

    • Lower number of gestures to learn.
    • The home button is far more accessible than the spot to swipe down.
    • It avoids gesture-conflicts with apps.
    • It has a simpler and more unified OS architecture.
    • It avoids copying Android's Swipe-Down UI.
    • Notifications and Multitasking complement eachother. If you think a notification is not too important you can simply go back to what you were doing.

    You will notice how on my concept I also have "Widgets (?)". That is because the "Notification Centre"-ish part of it could eventually be swipable (just like a homescreen), so as to access widgets. The "dots" I put there could be used to indicate the number of screens available on this unified thingy. It is, however, a minor concern of mine. I want to focus on the rest.

    Notice the highlighted icon? It is the running app, which doesn't appear on the current iOS 5 multitasking dock, and it is highlighted for a purpose: knowing what app is open, and returning to it. Let's suppose you are playing Cut The Rope on iOS 5. A notification appears on the top of the screen, and you decide to ignore it. Now you ended your game, and you want to access this screen. You double click/long press the home button.

    If you wanted to go back to your app, on the original multitasking dock you could press outside it. Because that does not work on this method (the outer space is occuped by the notifications), the app running is conveniently highlighted. This will allow you to:

    - Go straight to the homescreen: by clicking the Home button.
    or
    - Go back to the App running: by pressing the highlighted app.
    or
    - Go to another app: (swipe if needed) and select.


    Tell me your thoughts about this!
     
  23. linkandzelda macrumors regular

    Joined:
    Nov 8, 2010
    #23
    This one is hard to say but I have a few drawbacks to it.

    First I want to state that, making this change to the OS brings about the loss of certain features. I don't believe it to be an addition as such, the joining of the 2 will make certain features vanish, or become obsolete, or become longer than previously before. And to judge the impact of the loss of these features is important to then balance the impacts of the unified design you present. Well then the drawbacks I spotted.

    1. You can't see the current state of the running app.
    When you open the Multification Center (my new name for your design xD) on an iPad, the drop down with all the notifications appears on the centre of the screen with space around the edges to see the state of the frozen app. This is at most -acceptable- because you can see a small area of the app, but not the full thing. I believe being able to see the state of your running app, while trying to chose the next app to switch too is an important aspect of multi-tasking. Now, you partly covered this by highlighting the app, but..

    2. It's not a 'clean' design.
    I think it's fair to say that apple's UI is very polished, has barely/if any holes or anything that looks out of place. Everything fits, everything looks perfect and goes with each element. The multitasking bar is no different as it has also a very clean and symmetrical design. Its simple and anyone who knows what an app icon is knows how to use it. The highlighting of the running app not only breaks the cleanness of the multitasking bar, but it looks out of place. Speaking of the bar, brings me to my next drawback.

    3. Having the running app in the bar at all is an issue.
    There are reasons why the currently running app is not shown in the bar right now, mainly because it would confuse users as to what app is running even if they can see the running state, the consistency of places elsewhere about not showing the running app in the bar (for instance, the homescreen) but also because of the way you close an app. Currently holding down any app in the bar will make them wiggle, and you get the chance to close the apps by tapping the small red cross badge icon. Now then, what happens when you close the running app? For starters theres a lot of drawbacks to this alone. But mainly i will point out 2 of them.

    The first one is, closing the running app from the bar, what happens to the screen? Would the multitasking bar close, the notifications roll up? Would it go to the homescreen? Lots of questions left unanswered and, if you ask me, none of those options are good enough. I believe that being able to close the app from the bar, will change whats going on in the background without the user knowing whats happening. They could of closed their running app, and the bar and notifications are still there. They then close the bar and they notice that their app has gone without them actually wanting to do it. In short, its not straightforward its confusing and not consistent enough with other apps.

    The second is the constancy of how the multitasking bar works throughout the UI. You could get users saying "Oh right, so the currently running app is this one on the left with the highlight. That makes sense. Now then.. What is this app with all the icons on i want to close that and return to the last app" Do you see what i'm getting at? People might mistake the homescreen for having an icon, and if i remember correctly the last opened app is the first in the list on the bar after you close the app and open the multitasking bar. This would result in a user force closing an app they didn't want to close. It might sound like a poor argument, but it's true as thats what iPhone is about its straight forward and simple to use.

    Now you could come back and say "oh, well the red cross wouldn't be displayed on this app so users can't close it." Again this breaks the clean UI and consistency of the bar. Overall it's easier to have the app not shown at all in the bar. But that would leave a large flaw in your design.

    4. Some methods and actions will be lost/unavailable, it would take longer than it does.
    With this I mean how you open the bar, how you return to the app, and versus how it is now. Currently you can double tap to open the multitasking bar. Now from here you can do various things. You can go straight to the home screen with one click of the home button, or you can return to the current app by taping out of the bar, or by double tapping the home button once again. These methods of getting to both places are quick. You suggested a long click of the home button. Well using that method to return to the app is longer than a single quick tap above the bar. You have the highlighted app there for this reason. So that people can click it to quickly return to the app. But as i described above, i didn't think it was as feasible. And what about returning to the home screen. You can easily click the home button once to return. But then again this would cause confusion because you can't see the running app state. A user wouldn't know they just closed the app that lays behind the Multifiation Center.

    You also mentioned about how its quicker to get to the home button that to swipe down on the top. Now, what i'm about to say can be seen as a pathetic argument but I believe it is a very viable statement. It takes more energy to press on the home button a few times than it does to swipe down being natural as gravity pulls your arm down anyway.

    And finally. Will Google sue over the 'swipe down' gesture? Depends if they have a patent for "swiping down to reveal an informative history of users actions" or something along those lines. After all thats what all this boils down too. Anyway, that's all I have to say. I love the picture of the mockup though it looks real. But is all this change and loss of features and confusion worth it, all because of a potential lawsuit because of a swipe down gesture?
     
  24. Blues003, Jun 10, 2011
    Last edited: Jun 10, 2011

    Blues003 macrumors 6502

    Joined:
    Apr 18, 2010
    #24
    On "stock" iOS5, you only see the state of the app while navigating on the fast-switching dock. This has minimal function - if at all - simply because the app is not only paused, but you have just seen it.

    Also, on the iPhone the notification center totally cover up the app. As such, even the current method notification does not satisfy this requirement of yours.


    My mock up was made on MS Paint, because my Photoshop skills are non-existant. The way I could mark the running app was, as such, limited. I believe there is a myriad of visual effects and eye-candy that would allow this design to look as appealing as anything Apple has gotten us used to. And indeed, this is not something Apple hasn't ever done: on Mac OS X, running apps have a small dot and/or a highlight below then, do they not?


    If you closed the running app, obviously the icon and respective the highlight would disappear. I also cannot see how having an icon totally to the left of the bar + highlight could be confusing as to which app is opened at the time. I didn't get your point on the Homescreen.

    If you close the running app from the bar, the app would be closed, and the highlight would go away. That's it. The "multification" (as you call it) screen would be left were it was, just like it should. Also, if a user is closing an app, I expect them to know they are closing an app (and as such, realize that in the background, the app is being closed.)

    Then again, if that is an issue there's always the possibility of not allowing the user to close the app from the multitasking dock. All icons could wiggle and show the "forbidden" sign, except for the running app. One could even have an warning saying "You will close the running ________ App" pop-up." appear. There's a plethora of ways this could be handled, and my mockup serves for any of them.

    If the screen is accessed from the Homescreen, the left app will not have a highlight, because it isn't running. And seriously, thinking that a user would consider the homescreen an app is pretty unnapreciative of others. xD The only reason why Apple didn't put that icon by themselves is because they had another way of returning to that app. This method compromises that way, so it finds another, which I actually find very clear.


    I do not think it leaves the design unclean. I do agree though that taking the app would leave a flaw on the design. Perhaps a "Back" button near the top of the Notification Centre thingy would be another idea for returning to the running app.


    I suggested both double-clicking the home button or long-clicking the home button. Double-clicking is already existing on the current iOS, and does not take that long.

    A user would know they closed the app on my method just as much as a user would know that they closed an app on the current Apple method. Just as you said: "if an user knows an icon represents an app"... all the user has to know is what that red sign means. Don't you think everyone who has an iPhone knows that?

    Same goes for returning to the app. A user knows what app he is running, and by recognizing the icon, it is also logical that clicking it will return to it. Just like clicking an app on the current method returns to it, clicking on the respective icon on this method returns to it. It really isn't that complicated.



    Really? You think extending all your thumb up, trying to hit the spot, and swiping it down is easier than just double/long clicking a button where your finger naturally lays down?

    There is no loss of features, nor confusion.

    It's not about the swipe down gesture. It's about the UI. The way Apple implemented the notifications has been used by Google since 2009. I bet Apple wouldn't mind saving themselves a couple thousand bucks and the public ridicule of copying the "baby OS", at the expense of no feature loss and a simpler OS architecture.
     
  25. xAnthony, Jun 10, 2011
    Last edited: Jun 10, 2011

    xAnthony macrumors 65816

    xAnthony

    Joined:
    Mar 2, 2010
    #25
    Not really a fan of it. You have some nice points, but it looks really sloppy. I much prefer to clean sleek style of iOS.

    All you're doing is taking features from the Android OS and adding it to iOS. Which will never happen. At least not the way presented above.
     

Share This Page