iPhone 8 home button UI implementation

Discussion in 'iPhone' started by deuxani, Feb 13, 2017.

  1. deuxani, Feb 13, 2017
    Last edited: Feb 13, 2017

    deuxani macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #1
    At this moment there are a lot of rumours about the iPhone 8 being bezel-less and the home button and finger print scanner being on/in the screen. So I was thinking how this could be implemented UI wise in combination with a large screen in a small body. I've made a design based on the following principles:

    • There must be room for the camera and speaker on top
    • The phone must be symmetrical (same size top and bottom bezel)
    • Apps must be able to work in the same 16:9 aspect ratio of the iPhone 5/5S/6/6S/7
    • The bezels can be reduced to a minimum
    • The home button must function the same way as current iPhones
    • The home button space can be dynamic

    I came up with this for the home screen:
    [​IMG]

    The bezels are reduced to a minimum but they do exist as I don't think the tech is ready to have a camera behind the screen. The screen is very large, the aspect ratio has changed (the screen is longer), but the body is not much bigger than a regular iPhone 7. The part with the home button is about the same size as the space on all current iPhones. I don't think Apple is going to make the spacing smaller as that would cause for more accidental presses in the docked apps.
    On the home screen I think only a home button would be present so the usage of the button would stay the same between all iPhones. However, it would also be possible to have for instance a button for recent apps and control center or Siri on the left and right of the home button. Or maybe a handoff icons.

    When going into an app like Instagram you could see how this implementation with the extra screen real estate on the bottom would gain some benefit:

    [​IMG]

    In the regular app on current gen iPhones the camera and messages buttons are on top of the screen and hard to reach. With this new long screen it's possible to move these buttons down to the left and right of the home button. The home button area is dynamic now instead of a static bar of unused space.

    This same implementation can be seen in the Twitter app:

    [​IMG]

    Because the screen is rumoured to be OLED, the home button and the place where the TouchID sensor is could always be shown on-screen even when the rest of the screen is turned off:

    [​IMG]

    I think this way Apple is able to create an iPhone that is almost entirely a screen from the front, let apps be usable from day one without the need for developers to change their apps (if they don't change their apps, the buttons next to the home button would just show on the top like on current gen iPhones) and the iconic design of the iPhone would remain the same.

    What do you guys think?
     
  2. sarahgad macrumors member

    sarahgad

    Joined:
    Jan 20, 2017
    #2
    Good job i must say amazing design. Let's see what apple has in store for their valued customers. Expecting the unexpected.
     
  3. deuxani thread starter macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #3
    Thanks :) I really really hope they will present something like this, because just a 7S would be so disappointing for everyone (especially after all the rumours).

    By the way, I've added a picture of what it looks like with the screen off:

    [​IMG]

    Being OLED the home button with touch ID could always show on screen.
     
  4. MacFinnley macrumors 6502

    MacFinnley

    Joined:
    Aug 30, 2014
    Location:
    Munich, Germany
  5. idmean macrumors newbie

    Joined:
    Feb 27, 2015
    #5
    While I like your mockup a lot better than many others I have seen so far, I hardly doubt that Apple would 1) change the color of the home button 2) place buttons like that around the home button, they are far too small for like that and make little sense there as that space would seem to belong to the OS at first glance.
     
  6. deuxani thread starter macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #6
    The coloring might indeed not happen. Realistically there might just be a dark and light home button bar, just like with the keyboard. One can hope :)

    However, I do think there will be developer specific sections that can be utilised. If that wouldn't happen, then in basically every app that entire bottom bar would be mostly unused. I can't think of an OS specific functionality next to the home button that could be shown there in 3rd party apps. So it would be a shame to not use that space so close to your thumb for something dynamic and app specific. Just look at the Touch Bar on the new MacBook Pro's. The icons in the mockup are the same size and same position as they were in the top bar. So perfectly usable but not too present that it takes the attention away from the important home button.
     
  7. deuxani, Feb 16, 2017
    Last edited: Feb 16, 2017
  8. DanielDD macrumors 6502

    Joined:
    Apr 5, 2013
    Location:
    Portugal
    #8
    I like the concept but I don't think it looks symmetric, specially on the home screen. Everything seems crammed on top and very spaced out at the bottom
     
  9. MRU macrumors demi-god

    MRU

    Joined:
    Aug 23, 2005
    Location:
    Other
    #9
    Nice work, but the implementation you envision would seemingly make extra screen estate granted by the full screen glass device somewhat then redundant in practice..
     
  10. deuxani thread starter macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #10
    I basically made a screenshot of my iPhone 6S and added the home button area on the bottom. All iPhones look that crammed on the top actually and all have a very spaced out bottom part where the home button is (only now it isn't part of the screen). If you have a Jet Black iPhone 7 with a black wallpaper it will almost look the same spacing wise (only you would have a large unused top part where the camera and speaker is).

    The usable screen part is wider and taller than the iPhone 7, but smaller than the 7 Plus. Adding this extra part of the screen would open up added functionality to the OS and apps, but I don't think the area will be used as pure extra screen real-estate. This post my Ming-Chi Kuo shows it well too:

    [​IMG]
     
  11. ovo6 macrumors 6502a

    Joined:
    Sep 10, 2015
  12. cableguy84 macrumors 6502a

    cableguy84

    Joined:
    Sep 7, 2015
    Location:
    Essex
    #12
    We might finally get led notification's with the new screen's. Doubt it though
     
  13. T'hain Esh Kelch macrumors 601

    T'hain Esh Kelch

    Joined:
    Aug 5, 2001
    Location:
    Denmark
    #13
    Best mockup so far! But can they create screens with rounded corners? A square one doesn't appear to fit.
     
  14. deuxani thread starter macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #14
    They finally can :) This is what the LG G6 will look like:

    [​IMG]

    And this is the Xiaomi Mi Mix:

    [​IMG]
     
  15. T'hain Esh Kelch macrumors 601

    T'hain Esh Kelch

    Joined:
    Aug 5, 2001
    Location:
    Denmark
    #15
    But those two phones have space for the corner of the screen to be hidden beneath the black stuff. The mock up in the OP does not?
     
  16. Sunny1990, Feb 16, 2017
    Last edited: Feb 16, 2017

    Sunny1990 Suspended

    Sunny1990

    Joined:
    Feb 13, 2015
    #16
    WOW!!! The concept looks amazing, btw can you please share this wallpaper
     
  17. deuxani thread starter macrumors 6502

    deuxani

    Joined:
    Sep 2, 2010
    #17
    Here you go :)

    [​IMG]
     
  18. andyw715 macrumors 6502a

    Joined:
    Oct 25, 2013
    #18
    I read a rumor (seemed pretty out there) that Touch ID would be gone and replaced by a facial rec/laser scanning system.
     
  19. joesixgig, Feb 17, 2017
    Last edited: Feb 17, 2017

    joesixgig macrumors regular

    joesixgig

    Joined:
    Sep 6, 2009
    #19
    Random thought: how about reserving force touch near the short edges as the home button? That way they can keep the entire screen for apps.

    Edit: to clarify, on the home screen it could show as a rendered button as in the OP, but inside apps the menu bar is never used with force touch, so there force touch could take the role of "home". Probably only as an option, because I could see users press too hard and go back to the home screen accidentally.
     
  20. KieranDotW macrumors 6502a

    Joined:
    Apr 12, 2012
    Location:
    Canada
    #20
    Damn, that's nice. I can only hope the 8 looks anything like that
     
  21. Newtons Apple Suspended

    Newtons Apple

    Joined:
    Mar 12, 2014
    Location:
    Jacksonville, Florida
    #21
    I have read the same rumors.

    Maybe there will be no home button, period. You pick up your device and it scans your face and the home screen pops up.
     
  22. The Game 161 macrumors G5

    The Game 161

    Joined:
    Dec 15, 2010
    Location:
    UK
  23. Defender2010 macrumors 68030

    Defender2010

    Joined:
    Jun 6, 2010
    Location:
    England
    #23
    Great concept! Love this wallpaper, any chance you know where to get full sized versions? (Or at least a 12.9 inch iPad size?) thanks
     
  24. Applejuiced macrumors Westmere

    Applejuiced

    Joined:
    Apr 16, 2008
    Location:
    At the iPhone hacks section.
    #24
    I'm really interested to see how it plays.
    Great job on the mock up designs op.
     
  25. Relentless Power macrumors G5

    Relentless Power

    Joined:
    Jul 12, 2016
    #25
    If OLED is concurrent with the rumors fir a 5.8, then all likeliness this could very well happen.
     

Share This Page