 |
| Ubuntu Touch OTA-7 Main Screen UI with Apps |
Yesterday, I began the initial dive into the Ubuntu Touch mobile OS user interface and user experience, using version OTA-7 as my reference point. In this post, I intend to look at the UI design and UX of selections from the core application bundle itself, and how they work with the rest of the system.
PHONE:
 |
| Ubuntu OTA-7 Phone app UI |
The phone app is the first seen on the main Apps UI. It has a nicely shaded icon with the stenciled outline of a handset against a background of green. From the perspective of a user, my mind would intuitively interpret the little squares emanating from the handset to be incoming and outgoing signals of a conversation.
I really like the shade of green chosen for the background - a soothing gradient of "leaf-green" that invites communication. Notice that the gradient occurs horizontally rather than at an angle, set as a backdrop against the 45 degree angle of the handset icon. That's quite nice and effective.
Upon opening the Phone app, the main interface is designed as a standard dial pad and a rectangular button at the bottom to depress for call placement. It's a nice clean sheet, with the pleasant font and rounded Arabic numerals. Swiping up from the bottom presents the call history with tabs for all and missed calls respectively. The little gear icon at the top right intuitively denotes settings, which brings up another screen to configure call waiting, call forwarding, SIM services, dialpad tones and the option to add online accounts. Since I do not have an active phone SIM in the testbed at the moment, I am unable to test this functionality. This will happen later.
MESSAGING:
 |
| UT OTA-7 Messaging app UI |
The Messaging app is denoted by the second icon on the App screen, denoted by a rectangular speech bubble with lines denoting conversation set against a pleasant "tangerine orange" background with an angular gradient. Set next to the "'leaf-green" icon of the Phone app, I found the design aesthetic and combination pleasant to look at.
Opening up the Messaging app, I found a clean screen that invited the composition of a message with the words "Compose a new message by swiping up from the bottom of the screen" set below the icon of the Messaging app. A gentle swipe upwards brings up the interface shown on the right. The on-screen keyboard uses the familiar layout and design seen in other OS-es, which is good. A region of stability and familiarity needs to exist for users transitioning from another OS, without having to rewire the mind for a different design paradigm.
The font and letters are again rounded and pleasant, well rendered on my Nexus 5 screen. Under default setting, although the letters are rendered and placed on individual "tiles", the demarcation is not evident unless closely examined. This can be changed. The standard switches/keys for shifting between capital and small letters, symbols, backspaces, the spacebar and carriage return/enter are in expected places.
 |
| UT OTA-7Messaging settings UI |
One interesting feature is the little "globe" icon, which when pressed and held allows the user to bring up a dialog box to change the keyboard language, move to Emoji and configure keyboard settings under System Settings UI. Numerous settings are presented for configuration using sliders and other methods of configuration.
One interesting setting at the very bottom of this UI is the ability via a slider to change the opacity of the on-screen keyboard from minimally visible to very opaque, where the tiles for the various characters and keys are clearly demarcated, the character letters are rendered in dark font, as well as all the special operation keys.
No the whole, this is a very well designed and intuitively laid out app, with an emphasis on simplicity and minimalism. Although highly configurable in terms of options, I like that the UI design is done in a way that reduces the amount of thinking/workload required by a user in order to make use of it. One idea for improvement might be that "globe" icon on the keyboard to configure settings. A new/unfamiliar user might not easily guess what that represents - I initially thought it was a link to the Morph Browser app or perhaps a search engine. There may be a more intuitive way to indicate this. Perhaps it has been addressed in the newly released OTA-9. I'll have to investigate after I upgrade.
CONTACTS:
 |
| UT OTA-7 Contacts app UI |
The Contacts app is denoted by a nice icon on the main Apps UI. The app icon is an intuitive and instantly recognizable design, depicting a pictorial representation of an ID, badge with the outline of a photo placed next to lines of text and an overhanging clip or ribbon.
Opening up the app brings up the UI to the right. Below the app title bar are two options as shortcuts for creating contacts for new users:
- Import the user's contacts from Google, next to a recognizable Google icon
- Import the user's contacts from the SIM card, with a downward facing arrow into a representation of a SIM card. From a user's perspective, although I understand what the icon is trying to depict, I don't find it as intuitively or immediately clear as the one above it. Let's see if it's been updated in OTA-9
CLOCK:
 |
| UT OTA-7 Clock UI - Analog |
The Clock app and functionality, though quite common and taken for granted on almost most OS-es since the advent of the mobile phone (remember Nokia's 3310?) is quite varied in its implementation by different OEMs and products. Ubuntu Touch carries out its own interesting and charming implementation of app design, and Clock is no exception.
Clock uses a nice minimalist icon design on the main Apps UI - a traditional analog face of white hour and minute hands, and a red seconds hand against a shaded black background. Nice choice of angular gradient for the background, with a transition from grey to black against the classic "10-to-2" position of the clock hands and the 30-second mark of the minute hand!
Opening up the app presents the UI on the right, with a circular layout at the top that can switch between analog and digital clock faces by tapping within its area. I like the clear and intuitive rendering of the analog clock face - the hour hand in red, minute hand in black, and instead of showing the entire seconds hand, it's rendered as a little red marker on the edge that tracks around the circumference with change in value. Very nice! The current date is also rendered below the clock in terms of day, month, date and year.
 |
| UT OTA-7 countdown timer UI |
On the whole, the Clock app UI is designed and executed very well and provides great UX. Nice, intuitive UI, with a minimalist, but beautiful intuitive design philosophy, well executed and providing all the functionality desired. It will be interesting to see how this app has changed or been improved upon in the OTA-9 update!
CALCULATOR:
 |
| UT OTA-7 Calculator app UI |
The Calculator app, like Clock, is one of the staples of most OS-es, expected to exist and taken for granted. Like others, the Ubuntu Touch Calculator app provides all the basic and advanced functionality in a basic but well laid out UI.
Like other app icons examined so far, Calculator's app icon has a nice design that fits in well with the others on the main Apps UI without sticking out like a sore thumb. The dark/light grey and teal combination goes well with the other apps that surround it - Morph, Clock, Calendar and Gallery.
Opening up the app shows a basic interface for the most common math functions. Swipe the numerical keypad to the left, and more complex functions appear for exponentiation, logarithms, trigonometry and so on. This also appears by tilting the screen to landscape mode, where the entire keypad appears, with the numbers in red and the operators and advanced functions in black.
 |
| Ubuntu Touch OTA-7 Calculator app UI when device is tilted to landscape mode |
CALENDAR:
 |
| UT OTA-7 Calendar app UIs placed side by side - Year, Week, Month and Day |
When opened, the OTA-7 calendar app presents itself with a design language that is pleasant and interesting in its layout. In comparison to the Calendar app on my Android smarpthone that uses a drop down menu, OTA-7 places the various calendar breakdowns for Year, Month, Week, Day and Agenda as tabs arranged horizontally across the top of the screen. Switching from one to the other produces different layouts of detail for viewing and organizing specifics. The use of white space to keep things clean and clear makes the UI attractive and feel spacious, even on the relatively limited real estate of the Nexus 5 screen.
FILE MANAGER:
 |
| OTA-7 File Manager app UI |
The File Manager app caught my attention from among this bundle, principally because of the direct visual resemblance to the corresponding Nautilus desktop app of the Ubuntu desktop distribution. Anyone who's used a version of Ubuntu will immediately recognize the burnt orange and royal purple colour palette, and icons of the default Ambiance system theme. As a user, it gives an immediate sense of continuity, familiarity and stability to see this. I like this layout, and hope it's kept this way.
The layout and structure is intuitive and easy to navigate, and the directory customization options - seeing hidden files, switching between list and icon view, sorting preferences and light/dark app theme are preserved from the desktop file manager, though I like the way they're placed for easy configuration.
This is a great core app, and one that I'll definitely be looking at after upgrading to OTA-9, to see what changes and/or improvements have been made.
MUSIC:
 |
| UT OTA-7 Music app UI |
Now here's something interesting as I progressed through the app bundle.
The Music app has a nice, visually attractive icon - rounded edges like everything else, with an intuitive musical note icon set against a red background of a graphic equalizer. Very visually appealing, and fits in well with its location on the main Apps UI. It's bright red hue in conjunction with the purple hue of the Music Player app and straw yellow hue of the Notes app helps to offset the predominantly black/grey tones of the apps in the row above and the two in the row below - Calendar, External Drives, File Manager, OpenStore and Terminal.
Music seems to be quite basic in UI functionality - a drop down menu to switch between choice of artist, album, genre, track and playlist organization. Playing a file does present a visually pleasing aesthetic with the album cover, track and artist information rendered in the pleasing system font above a control panel for looping, jumping back and forward and shuffling. However, there doesn't seem to be anything more advanced than that.
However, most of the apps in the OTA-7 bundle have a light/white background when opened (aside from the Media Player and Terminal apps. Music, on the other hand, opens with a visually dark theme and unlike File Manager and Messaging, there doesn't seem to be an option that I can find to switch to a light theme. I'm not quite sure why this is and the visual/aesthetic reason why. It doesn't look bad at all, but given the predominance of a light theme among the bundle, this seems to stick out as inconsistent in terms of design aesthetic and philosophy. It'll be interesting to see if this has changed by OTA-9.
NOTES:
 |
| UT OTA-7 Notes app UI |
The Notes app has a nice straw yellow icon quite resembling a post-it note or a typical sheet of yellow notepad paper with a border at the top, a margin at the left and lines indicating notes taken. The light yellow is a good contrast with the deep red of the Music app, the stark monochrome of File Manager above and the white and burnt orange of the UBports below.
As for the UI of the app itself, it's well laid out. When I first launched it, it gave me the option to connect to an Evernote account. Notes saved and stored appear as a list, which can be sorted according to various preferences. I liked the ability to delete a note by swiping right, bringing up a red trash icon that could be depressed to complete the procedure.
It'll be interesting to test run this app along with others later, add data such as text, hyperlinks and visual images, and see how they get represented visually as the notes increase in number and get complex.
WEATHER:
 |
| UT OTA-7 Weather app UI |
The Weather app posesses perhaps one of the most visually and aesthetically pleasing and interesting UIs of this entire bundle. The app icon itself is intuitively designed with a stylistic representation of a sun behind a cloud against a cartoonish blue background.
The app has a choice of two providers to retrieve its weather data from, but its the way that it visually delivers it that's quite eye catching from a UI/UX perspective.
Seen in the screen capture on the left, the data from a particular location is displayed as a nice embossed/3D icon depending on the type of weather, with a written forecast of conditions rendered in text and numericals, with black for the lows and Ubuntu's burnt orange for the highs.
A list of forecasts for the week ahead are listed by day, with little monochrome icons corresponding to the weather in the center and low/high temperatures on the right. Tapping the 3D weather condition picture at the top of the screen produces an hourly forecast for that day and into the next.
It will be interesting to see how this app UI gets modified or updated in OTA-9!
TERMINAL:
A list of forecasts for the week ahead are listed by day, with little monochrome icons corresponding to the weather in the center and low/high temperatures on the right. Tapping the 3D weather condition picture at the top of the screen produces an hourly forecast for that day and into the next.
It will be interesting to see how this app UI gets modified or updated in OTA-9!
TERMINAL:
 |
| UT OTA-7 Terminal app UI |
Terminal is the app that I've explored the least and the least to actually examine in terms of UI, but perhaps one of the most important of this entire bundle. The Linux terminal/command line is the most powerful capability of the Linux operating system, and Terminal brings that power to the smartphone environment.
The app icon on the main Apps UI is quite simple and straightforward, depicting the ubiquitous Bash terminal prompt against a black background. When opened the app UI presents itself as a standard terminal window, with the familiar prompt and instructions that any Linux user knows.
It's interesting to see how the UI has been organized for common terminal functions and keyboard combinations. the most common are laid out at the bottom of the screen, with the icon for the on-screen keyboard at the lower right. An icon for visual configuration and customization of the terminal window is placed at the top right hand corner, and the most common capability of the terminal in the Linux OS - running multiple terminal windows simultaneously is powered by the icon directly below. A little popup menu at the bottom left allows switching of common terminal key combinations.
Although it looks like the app has been optimised as much as possible for usage with an on-screen keyboard, it looks like maximum functionality will only be extracted with the use of a bluetooth mouse and keyboard. It'll be exciting to test run the app with an external keyboard and see how it works!
UBports:
 |
| UT OTA-7 UBports app UI |
Strictly speaking, the UBports app isn't an app as much as a holder for a landing page that describes the UBports foundation, its ideology and drive, mission, goals and how to join and contribute.
Nonetheless, it's still a visually appealing app with the app icon depicting the UBports mascot in burnt orange against a white background.
When launched, the app itself opens up to the landing page describing the project and invitation to join. Its UI is visually appealing, with pleasant text interspersed with nice circular icons and pictures at the beginning of each section.
Definitely nice to read through the material on the landing page, and understand the philosophy and motivations that makes this project so unique. I totally understand UBports' idea behind bundling it as an app along with the core bundle, especially to convey the vision to for new users that want to understand the uniqueness of the Ubuntu Touch product and project without having to go to the UBports or Ubuntu Touch websites.
When launched, the app itself opens up to the landing page describing the project and invitation to join. Its UI is visually appealing, with pleasant text interspersed with nice circular icons and pictures at the beginning of each section.
Definitely nice to read through the material on the landing page, and understand the philosophy and motivations that makes this project so unique. I totally understand UBports' idea behind bundling it as an app along with the core bundle, especially to convey the vision to for new users that want to understand the uniqueness of the Ubuntu Touch product and project without having to go to the UBports or Ubuntu Touch websites.
CONCLUSION
As a final note, I should point out that there are six important apps in the core bundle that I haven't covered in this post - Camera, Morph Browser, Gallery, Media Player, OpenStore and System Settings. I felt that the coverage of UI/UX of apps in this post were indicative enough to not delve into similar apps such as Gallery, Media Player and System Settings. Camera and Morph Browser are vital and important to look at, but have been updated and improved with bug fixes in OTA-9, so I would like to wait till I've upgraded to look at them. OpenStore is so important by itself that I decided to dedicate a separate post to it.
With this post and the one prior, I hope to have provided a deep dive into the UI/UX of Ubuntu Touch and its core applications, to deliver a sense of the design aesthetic and functionality, which can be used as a reference point for development and project contribution work going forward.
See you in the next post!
REFERENCES:
===========
[1] Product Design Assessment: Ubuntu Touch OTA-7 UI/UX - Part 1
No comments:
Post a Comment