Unveiling Glacier

Glacier

[Version 1.0 uploaded! I'd call it "Stable", with most, if not all interactions and elements defined.]

Hello world! Hurrian here.

Following news of the Nemo UI rewrite, I decided to chime in with my thoughts of how a mobile UI should be like.

And following the naming scheme on here, I’m calling it Glacier – a smooth, liquid UI, on ice.

It’s a primarily high-contrast UI with light, airy text on dark backgrounds, borrowing heavily from contemporary design paradigms – Android 4.x, Firefox OS, iOS 7, OS X, Windows 8, Sailfish, and MeeGo-Harmattan.

Lockscreen:

  • A simple, large clock, with the date underneath is shown. The background under the text is always darkened and blurred to enhance the readability of the text.
  • Notifications are lined up under the clock – tapping on these will unlock/prompt for the unlock code (if any), and open the app.
  • Swiping the lockscreen away from the top edge lands you on the Search page
  • Swiping the lockscreen away from the bottom edge lands you on the app launcher.
  • Swiping the lockscreen away from the left edge lands you on the Event View
  • Swiping the lockscreen away from the right edge lands you on the Multitasking view

The rationale behind different targets for different swipe zones reinforces the user’s spatial awareness – a main point of the UI is the use of layers to imply navigation information. (Refer to the use of layers in Maemo 5.0/Fremantle and MeeGo-Harmattan)

Search:

  • Search uses Tracker’s indexed database, making searches fast
  • Search can prioritize results by user choice
  • A short description of the action an app will perform must be under the app’s search result
  • The Search page can be reached by swiping from the top edge in the app launcher or lockscreen.

Settings:

  • As a list-based application, the list is arranged as the first, and foremost object on-screen.
  • Large text marks list items, with a small subtitle when necessary to explain its function
  • The use of titles and subtitles in conjunction with icons reinforces the mental correlation between these two

Event View:

  • Items on the Event View are populated by widgets
  • The user can rearrange the widgets in any way s/he so wishes
  • Similar to the lock screen, tapping on the widget redirects the user to the app.

Launcher:

  • All icons will have a circular background to enforce consistency, however, app developers may choose to create their own custom icons with a not-perfectly-round profile.
  • The use of color and not-perfectly-round icons makes apps easily recognizable
  • Apps are not hidden into folders, rather, they’re grouped into categories, which may be labeled by the user
  • Gaps in the app grid are permitted, for those users who insist on certain layouts ;)

Multitasking:

  • Borrowing from Sailfish, a minimized app view is available.
  • Notifications can be put on the minimized app view, allowing quick access to them (and replacing the traditional notifications menu)
  • Borrowing from OS X’s Mission Control, the app icon and name are displayed on the bottom of the minimized app to let users quickly recognize the app

Sample apps – Camera:

  • The app’s focus is put front-and-center
  • UI chrome is left as minimal as possible
  • Controls are not hidden in gesture menus (more like Harmattan, and unlike Sailish’s pulley menus, which in certain contexts could be confusing, the removal of which causes a consistency issue)

Sample apps – Browser (and notifications!)

  • The notification pushes the active app up (and floats?) for a few seconds (see Harmattan in the lockscreen when someone calls/alarm fires)
  • The active app partically covers the notification, further indicating to the user that a swipe action can be performed
  • After a few seconds, the app comes back down, and an edge glow and app icon are shown to indicate an unread notification.

Sample apps – Messaging

  • Contact name is on top, with a small contact icon and availability (if services are connected) indicated by a green glow.
  • Ordinary chat bubbles. Move along…
  • Message type (SMS/IM/etc.) indicator – allows for unified messaging with a contact (Fremantle!)
  • Spacious virtual keyboard

Sample apps – Music Player

  • Just like in Harmattan, the album cover is put front-and-center
  • To save screen space, the app header and back button are overlaid on the album
  • The music progress is overlaid on the bottom third of the album cover. Drag it to quickly skip around the song.
  • Album/playlist song list is below the song/album/artist title, instead of hiding it behind the album cover, like Harmattan
  • Pause/previous/next buttons are at the bottom

Feel free to leave a comment or shoot me a mail (kenneth <{[gnat]}> meta <{[dot]}> mm <{[dot]}> am).

I’ll be continuously updating this post as I get comments and remarks.

30 thoughts on “Unveiling Glacier

  1. A couple of comments
    I am not sure if the minimized apps are supposed to show the app thumbnail or a kind of cover, but if it is the latter, there needs to be a visual cue to the thing the user was just looking at before minimizing the app. The way BlackBerry does it, disconnects the user from the app.

    Notifications on covers are fine if all the minimized apps are always shown in one screen (like fremantle) but in a scrollable screen like this, we might need to reconsider.

    I like active blurring very much but even being a designer, I am not sure I can justify it’s use on a mobile device. It’s cpu intensive, and it’s needed actually at the time the cpu is already under load. The extra battery life drain and delay it induces can be avoided by just darkening+desaturating. Pre-rendered blurring of the wallpaper and fading it into view is however a nice way to fake active blurring without the cost.

  2. Thanks, qwazix.

    For the minimized app view, I guess that a simplified overview of the current context of the app could be shown (e.g. on the Messaging app, while you’re viewing the list of threads, the threads are shown when minimized, but when reading a conversation, the last message is shown when minimized)

    I also plan to demo a non-intrusive notification system – based on the idea that the OS is made of different “layers”

    Notifications shine through the bottom portion of the screen (to be demoed), and you can pull up and hold whatever’s on (a la Harmattan’s shortcuts) to access them. Quick toggles would probably be there, too.

  3. Hi Hurrian,

    I really like what you’ve done with the UI, except for the messaging chat bubbles. Unlike the Harmattan messaging application where the chat bubble point either up or down, the chat bubbles here don’t indicate the source of the message (whether it is from the user or from the contact).

    I’m sure the user can get used to this, but if you are showing someone else messages on your phone, it is a little disorienting. I experience this effect whenever my wife shows me messages someone has sent her on her iPhone.

    Thanks,
    Bfd

  4. Why not keep Nemo quite tightly similar to Sailfish?
    After all, it is meant to be the base/feeder project for Sailfish.
    That’ll become pretty important when Sailfish is opened up (cept for Jolla’s flavour of Sailfish).

    • If apps want to use Silica components over Glacier Alpha/Beta/etc components, fine. Being based on Mer at least gives apps the chance to be binary-compatible.

      But assuming that Jolla’s Sailfish UI isn’t opened/core parts are closed/we have a repeat of Maemo, it’d be nice to have an in-house UI free from restrictions.

      • I wish they’d start to be FAR MORE open about that, they made it sound wonderful 9mth+ ago, but as the clock ticks down it’s sounding less & less grand from an openness perspective (Tizen has them well & truly beat there, except from a admin/governance perspective).

        I understand the problems they’re trying to surmount, but at the same time there’s different ways they can go about that. Don’t be afraid to be open Sailfish(Jolla)! Keep some core components/apps closed so that you can license “your” flavour of Sailfish, but leave the rest totally open/free!

        • No further thoughts on this?
          I won’t know if you respond anyway, as I’m no longer book-marking this article, & this blog doesn’t seem to email about new posts :-/ Oh well, nice efforts anyway.

          Just concerned it may become a unnecessary duplication of already limited community resources/man-power, a common bane for FOSS projects. But then again if it turns out to be as open as they originally implied, I guess much of the work done here could be rolled into what’s being done for Sailfish/Silica etc.

          All the best.

          • The truth is, we’re developing Nemo, not a Sailfish hardware adaptation.

            And mum’s the word on whether or not porting Sailfish is as easy as ‘zypper install sailfish-desktop’.

            At the very least, we know that Sailfish’s Silica components can be used on Nemo. But we’re not looking to build a UI on Silica.

          • And that’s what I don’t get, we’re making completely separate components (YET AGAIN), when we could have the same components shared between sailfish/nemo by building on silica.

            Why not do that, silica is completely open is it not, why “yet more” UI/UX components & :. needlessly complicated/duplicated/split community efforts/resources?

            Not to pooh-poh the current approach, it looks great, but it seems like a unnecessary divided/NIH approach, which so infects FOSS projects. This community can’t afford that, it doesn’t have the man-power or the financial resources that some of it’s competitors do.

          • I look forward to a new grouping picking-up Silica & running with it for Nemo instead of this duplicated madness.
            I might start looking into it myself soon, time permitting…

  5. In Harmattan’s music player, there were buttons to turn shuffle mode on/off and a favourite (star) button. Where you can do stuff like that in this design?

    • Whoops. Regression.

      I didn’t use shuffle and favourite on Harmattan, so I didn’t notice ;)
      Thanks for the heads-up!

      I’ll be putting those to the left and right, respectively, of the prev/pause/next controls.

  6. This is really amazing I love it. New design is completely fresh new and easy to understand. Can’t wait to use it on my Nokia n9.
    How can someone with no programming skills can help you with this project ?
    Please keep this amazing job developers hope to hear an update soon !!!

  7. This looks great. Awesome idea.it looks very fresh. Is it the back Icon that is place at the top (looking like an inverted play sign). I think it will be better at the bottom where it use to be. It is more convenient for the one hand usage.

  8. Hey Guys,
    I think the glacier UI looks exquisite. If we pull this off, I’d also be willing to switch from harmattan to the new NemoMobile as we’ll know it. Gotta love the work done for the glass UI or Ice UI if you wish. watermark effect always goes a long way in enhancing the UX. Great work done :)

    I have a few points of my own about the UI.
    1) The battery, network & connection(2G/3G/WiFi) indicator is nowhere to be seen. How do you plan on keeping that on an ‘on-demand’ basis? (something like WP I presume.)
    2) The keyboard : judging by the layout, I fail to see where the spelling suggestions would appear. Pop ups like the ones in harmattan? I suggest the keyboard me taken from harmattan as it was and still is one of the best keyboards any of us has every typed on.

  9. I’m impressed, this looks really, REALLY good. Are you guys in need of translators right now? I looked up “nemo” on Transifex but didn’t find anything. I’d like to help on that!

    • We haven’t given much thought to translations yet but any help is certainly welcome. Join us at #nemomobile on irc.freenode.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>