Unity Phone Mockups

I’ve been expanding on my earlier Unity TV mockups lately, which I will post more about later, but I’ve also been working on some Unity Phone mockups, and I wanted to put a couple of ideas out for wider discussion and feedback.

Launcher Position

OMG!Ubuntu! highlighted some other mockups for Unity on a Phone where the designer kept the launcher on the left hand side, as it is on the desktop.  While this is keeping with the look of desktop Unity, I didn’t think it was in line with the reasons for it.  The primary reason for the launcher’s position is to use up screen width (which is abundant on desktops) and free up screen height (which is scarce on desktops).

Keeping that in mind, I came up with a design that keeps the launcher on the narrowest screen edge, regardless of orientation.  When holding the phone in portrait mode, the launcher sits along the bottom, the way is traditionally does on Android interfaces.  When rotated to landscape, the launcher sits along the left edge, the way it does in Unity on the desktop.  This was the launcher is only ever taking up space in the dimension you have the most to spare, while providing a familiar interface in both modes.

The top panel, however, always stays up along the top edge of the screen.  This matches Android in portrait mode, and desktop Unity on landscape.  This is because it contains the time, which would either have to be rotated or left at 90 degrees in landscape, but also because having the panel at the top gives consistency in the next feature I looked at.

Accessing Indicators

There is a video on YouTube showing a new Acer Iconia W500 running Ubuntu 11.10, and watching the user try and land a touch event on an indicator icon was particularly painful, even on a tablet the indicator icons are far to small to be easy touch targets.  How much worse would it be when they’re on a screen a quarter of the size?

Instead I thought about the way Android lets you drag-down the top bar to access your list of notifications, and how easy of a gesture that is.  Applying that to Unity, I came up with the idea of a drag-down gesture activating the indicator menus, much like you can by pressing F10 on desktop unity.  Only instead of popup menus, these would use a full-screen overlay, again like Android does for notifications.

Unlike Android, however, you would be able to access all of your indicators from here, not just notifications.  Swiping left or right will move you to adjacent indicators (just like left and right keyboard buttons do on desktop Unity).  So you would have quick, easy, always available access to your networking, sound (including playback controls) and calendar.


Like my earlier TV mockups, these are all done using the Pencil mockup tool.  You can see the full exported version here, and download the source files here.  If you are interested in the discussions going on, join the #ubuntu-phone channel on Freenode.  Please let me know what you think of these mockups, and what other areas of Unity on a phone you would like to see designs for.  And remember, none of these are official designs, they’re just what I’ve been doing for fun in the evenings.

This entry was posted in OpenSource, Work and tagged , , , , . Bookmark the permalink.

32 Responses to Unity Phone Mockups

  1. lwj says:

    it’s looks so nice. but i think you can change the dock in the 2nd prototype in X axis, so that the UE will be better.

    • Michael Hall says:

      What do you mean? Put the dock on the long-side? That was specifically what I was trying to avoid with these mockups.

      • Marco Ceppi says:

        I agree, keeping it within a THUMBS reach is perfect. Stellar mock up Michael

      • Matt Swoon says:

        It would be smoother to keep the dock along the same side of the phone at all times – with the handset’s buttons, so that when you rotate that phone 90 degrees counter-clockwise the dock ends up on the right. It would be simpler to animate this transition (if you plan on animations) by just rotating the icons.

        Alternatively if you rotate the phone 90 degrees clockwise, the dock should still follow the handset’s buttons, so depending on which way you rotate you end up with the dock on one side or the other.

  2. pinky says:

    I’m still no fan of Unity on the desktop but I really like the Mockups for the mobile platform. I would definitely buy such a mobile phone. It looks really nice!

  3. Sven says:


    in my opinion you really did a great job. It´s good that it´s not looking like the UIs of other systems like Android or IOS and I´d like to download the source but the server says “file not found”.

    Is it possible to place icons of programs on the “desktop” or just in the bottom toolbar?

    I saw the scrollbar on the right side of the phone, but I think it would be better if scrolling would work like other smartphones deal with that.

    I´m waiting for the release of the Ubuntu phone and won´t buy another mobile till it comes out around 2014.

    • Michael Hall says:

      Sorry about the broken link, had a typo in the file name. It’s fixed now.

      I don’t think there’s any reason why the desktop wouldn’t work the same as on a PC, letting you put application launchers and files there.

      I’m not sure what you mean by the way other smartphones deal with scrollbars. Do you mean hiding them when the user isn’t actively scrolling? I personally like having them always visible.

      There isn’t any time frame for the release of Ubuntu phone software, let alone a handset shipping with it, so you may be waiting a while.

  4. joboe says:


    great idea, it really looks nice! Are there any plans to release a Ubuntu phone in the future?

    – joboe

    • Michael Hall says:

      There is a desire to make Ubuntu a platform for mobile phones (as well as tablets, televisions and in-car systems), but not timeline yet for when that might happen.

  5. Ian Hex says:

    I’ve seen pretty awful Unity phone “UI” mockups in recent times.

    These, however, are the most well-thought ones I’ve seen so far. It’s good to see someone’s been actually thinking about the UI, rather than going for bling.

  6. Anonymus says:

    How much would be one?

    • Michael Hall says:

      There’s no way of telling, but I would imagine it would have to be priced similarly to current Android phones in order to be competitive.

  7. Pingback: Rosha's Experiences » آرشیو » اوبونتو بر روی اسمارت فون ها

  8. Pingback: اوبونتو بر روی اسمارت فون‌ها, تلویزیون‌های هوشمند و تبلت‌ها | رایان پي سي

  9. Pingback: اوبونتو بر روی اسمارت فون‌ها, تلویزیون‌های هوشمند و تبلت‌ها | اخبار فناوری اطلاعات

  10. Pingback: S04E21 – Dance of Death | Ubuntu Podcast

  11. Pingback: S04E21 – Dance of Death – OGG HIGH | Ubuntu Podcast

  12. Pingback: S04E21 – Dance of Death – OGG LOW | Ubuntu Podcast

  13. Pingback: S04E21 – Dance of Death – MP3 HIGH | Ubuntu Podcast

  14. Pingback: S04E21 – Dance of Death – MP3 LOW | Ubuntu Podcast

  15. Jon says:

    Definitely the most convincing Unity phone mockup I’ve seen – actually using the existing Unity elements for starters! Your idea for the indicators also sounds very workable. I could see Unity2d running with a few tweaks on current hardware relatively swiftly (thinking the Nokia n9).

    The BIG question in the end is not Unity (although there are issues there, when you consider how long it took Nokia to get the N9 working), but whether people will write the kind of triple-A apps that made the iPhone such a hit. I suppose the most likely scenario is that manufacturers pick ubuntu for their “android backup strategy”, analogously to how Samsung is developing Bada.

  16. cm-t says:

    If i understant, when you click the bleu icon, it open this view with the good collapse where there is messages ?

    I like the close to current unity design that is missing in some mockup of other contributor. Will your work on a view of lens/scope ?
    Good job :)


    • Michael Hall says:

      You wouldn’t click the icon itself, it would be far too small to be easy to do. Instead you would pull down the entire top panel, which would activate one of the indicator menus. Then you can switch between the indicator menus by swiping side to side.

      Yes, I’ll work on a lens mockup next.

      • cm-t says:

        oh, I see. I understand why this square on the icon, not easy to get from a picture, but in the use, the selector squarre will move to the selection as a tab – as the current indicator hover :)

        hope to see your lens mockup, and maybe in a next post, your work on tablet ( i can add work for you on each reply :P )


        • Michael Hall says:

          Tablet mockups are definitely something I’m thinking of. Probably a lot of the functionality will be similar to the phone mockups, like the pull-down indicator access.

  17. Pingback: CNXSoft – Embedded Software Development » Ubuntu Smartphone and Television UI Mockup

  18. manny says:

    Michael, can you create a full concept based on the motorola Atrix (or a similar future phone)?

    I think this is where all the power of ubuntu will shine.

    Apple is also looking into including full osx in their ipods/iphones to compete, creating a sort of ipod that when docked turns into a mac mini.

  19. Pingback: The more people use “Unity” the less they like it | cartesian product

  20. Pingback: Links 13/12/2011: Ubuntu at HMV Stores, Ultimate Edition 3.0 Swaps Ubuntu | Techrights

  21. Pingback: اوبونتو بر روی اسمارت فون‌ها, تلویزیون‌های هوشمند و تبلت‌ها | مجتمع فرهنگي ديجيتال 29 بهمن تبريز

  22. Nick Rutledge says:

    Pretty sweet man! Much better than mine for sure :) You should look into flash catalyst. Its a lot of fun and easy to learn. If I had an Ubuntu phone, this is what it would be.

  23. Pingback: Ubuntu Phone Mock-ups « Mehr als Linux

Comments are closed.