the homescreen

Posted in Core User Interface by

This is the first draft of the homescreen. Next up is a visual guide of how everything stacks up.

We are keeping the basic layout of Harmattan with three homescreens. The events screen stays almost the same with the difference that the user can act upon the entries there (reply to a tweet etc). The app grid has the added functionality of widgets. Widgets can be tied to a specific app, or be an app by itself (i.e. an app that doesn’t have a full screen UI at all). Widgets are configurable, and can be configured by pressing the pencil button in edit mode. Pulling down beyond the first row should reveal a search box, just like on Harmattan mail application.

The multitasking view gains the possibility to pin applications to specific positions, just like the new tab page of firefox. Pinned apps should autostart at boot.

The notifications section is grouped by person instead of by app. I think this is a more natural approach, but I’d like your feedback on that.

homescreen

Edit mode can be activated by long tapping on any icon. There you can change positions of apps and widgets, or throw them away by dropping them over the top area of the screen. Flicking them to that direction should also work (see android desktop for that effect).

homescreen-editmode

selectRoller

Posted in Core User Interface by

This is the first of a series of controls which will use the Roller interface. More about the roller and how it works here http://play.qwazix.com/grog/?p=385

selectRoller

There are certainly more details missing, so please give it some thought and ask, as I can’t right now figure out what is really needed for a complete spec.

Unveiling Glacier

Posted in Core User Interface, Thoughts by

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.

Proposed iconset for breeze

Posted in Core User Interface, User Interface Guidelines by

This is my proposed iconset for breeze.

breeze iconset

The icons are all based on a circle for reasons outlined in the previous post. The circle has a very low contrast radial gradient with the center of the circle being slightly lighter than the rim.

Colors are still pale and playful and should match the tint colors of the apps (I know this isn’t the case yet with the mockup I did a few posts back, but this is going to be fixed)

Let’s talk type

Posted in Core User Interface, User Interface Guidelines by

One of the basic things we’ve got to choose is the font we’ll be using. We need a sans serif font, with many weights and good quality. I personally like the new humanist sans fonts that have appeared (and almost dominated) the digital type in the last few years. Very nice examples are the Nokia Pure font, the Segoe UI font and Ubuntu.

For a free project we obviously need a free font. There is a very nice free/open source font recently developed by adobe, Source Sans.
Adobe_Source-Sans
That would be my choice for the nemo main font but, it doesn’t yet speak Greek, and you know, I would be filing bugs about my own choice :)

I’d like to note here that Greek and Cyrillic are a bit different than all the other scripts out there that can easily use their own font. Because Greek and Cyrillic have common glyphs with Latin, it’s important that they look the same. Especially for Greek as the GSM alphabet is mixed Greek/Latin (there is no true Greek support but only the capital Greek letters that do not have counterparts in the latin alphabet exist). Thus, if we had to fall back to another font, different fonts would be used only for the missing glyphs and Greek SMS message would look like this:

ΣΑΣ ΛΕΩ KAΛΗΣΠΕΡΑ

unacceptable and unprofessional

So the choice, at least for the time being, is Steve Matteson’s open sans.
open sans

It’s a font that looks modern, it’s easy to read, has many weights and isn’t extreme in any way. The only thing I have against it, is that it’s being used too much.

Happy reading!