[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.