virtual keyboard – Glacier UI

Posted in Core User Interface by

Hello together,

this is Morpog again :) This time with some real work for Glacier UI.

I specced the virtual keyboard from Glacier UI mockup from hurrian and key sizes and spacing from old nemomobile vkb and some own thoughts. All needed files are already created by me in SVG (and PNG of course). Actual files for maliit on github are in a subfolder called maliit.

(click image for larger size)
vkb-1

(click image for larger size)
vkb-2

(click image for larger size)
vkb-3

Also available as PDF files:
vkb-1
vkb-2
vkb-3

The road to Glacier UI

Posted in Thoughts by

Hello together!

The coding guys did an amazing job and almost all core apps are ported right now. Thus the coders are waiting now for us graphics guys to define, create or describe informations for component creation/styling. Knowing that Qwazix and Hurrian are busy at the moment, I had some thoughts about the way how we should start defining component styles. Take this with a grain of salt, as I don’t have any knowledge about UI work in QML. This is just a draft and I’ve chosen colors and sizes based on Hurrian’s Glacier UI mockup and Icefox browser concept and discussions on #nemomobile. So let’s start with the 3 main points we should adjust in my opinion.

  1. Default font
  2. Standards for colors and states (active, pressed, inactive)
  3. Standard sizes for elements

1. Default font will be Open Sans, as it was discussed in IRC, because of better support for cyrillic and greek characters and lots of weights. Qwazix already wrote about it a while ago: http://play.qwazix.com/grog/?p=318

Font sizes and weights will be described in each component.

2. I will give colors names here, so everyone knows in future what each color is refered to.

Text font color should be plain white (#ffffff) as long it’s antialiased
Background color should be plain black (#000000)
Sub Background should be dark grey (#171717) for tabs, etc.
Active blue state should be light blue (#0091e5) for accept dialogs
Default blue state should be medium blue (#005f96)
Active grey state should be light grey (#474747) for decline dialogs
Default grey state should be medium grey (#313131)
Highlights should be frost (#dcdcdc) like on tab or speechbubble highlights
Lines, arrows, etc. should be frost (#dcdcdc)

3. I think we should use most of the times percental based sizes to minimize effort for different theme resolutions. Also pixel graphics should be used as less as possible. When graphics are used, borderimage should be used to implement them if possible. Speaking of different resolutions, we should support for the moment 3 different sizes:

  • 854×480 (should scale not that bad to 840×480 and 960 × 640)
  • 720p
  • 1080p

We should set a minimal size for pressable elements like a button or an arrow. Also minimal spacing should be defined. On my work on Icefox browser concept I failed at this, as I noticed after it was published and I tried it first time on my N9. Those items there were too small and had too less spacing. I inspected Harmattan’s buttons to get an idea what they did there and I quite liked it. Smalles buttons are 50×50 there (although not always visible) with a spacing of 3 pixels in each direction. So two buttons have a distance of 6 pixels between them. I have redone the URL bar of Icefox with those measures in mind and this is how it turned out:

(without boundaries shown)browser-main-ui-reworked-urlbar


(with boundaries shown)
browser-main-ui-reworked-urlbar-boundaries
Those buttons may look big on the screenshots, but they are in fact almost exactly same size as harmattan’s browser (grob) buttons.

(example on grob with changed colors to match harmattan’s UI)
grob-example

Have you anything to add, comment or critic? Did I forget some fundamentory stuff? Please feel free to add your opinion.

Greets
Morpog

 

Icefox browser concept – explained

Posted in Thoughts by

Introduction

Hello together, this is Morpog known from TMO or several IRC channels on freenode such as #nemomobile. Qwazix kindly offered me to introduce my Icefox browser concept here, which is based on the great work done by Hurrian (Glacier UI) and Qwazix (Breeze browser icon).

First I have to thank all of you for the helpful critics/discussions on #nemomobile while doing drafts of this concept and comments after unveiling on twitter, it really improved it alot.

This concept is heavily influenced by the latest browser versions on Android OS such as Firefox, Opera and Chrome. As Icefox browser will be based on embedlite branch (IPCLiteAPI) of Mozilla code, it naturally shares alot of features with Firefox browser. Most of underlying work was/is done by Jolla and friends and it’s already ported to Qt5 and runs fine on Nemo wayland VM, however with a very basic UI (only URL bar). It’s Qt4 reference UI which was created by coderus (QmlMozbrowser) wasn’t ported to Qt5, as Jolla is doing it’s own Sailfish UI for it. Thats where this concept kicks in.

At the moment Glacier UI isn’t finished and technically not even started to being implemented. So it’s unsure if components I used or invented (like tabbed navigation) will work the way I describe it here, or even exist at all. The concept itself isn’t completed, as it lacks alot of pages like all settings, bookmarks, etc. But it outlines the main views and mechanics.

The concept

(click image for larger size)
preview

General button behavior:
Inactive buttons are dimmed. Pressable buttons are white and Active buttons are blue styled.

General tab behavior:
Active navigation tabs have a blue line on top.
Inactive navigation tabs have a grey line at bottom
Active website tabs are blue outlined
Inactive website tabs are grey outlined

The startup experience

(click image for larger size)
explain-1

URL bar to enter web adresses and show the startup experience. At first startup the Home tab will be active. On all later touches of URL bar, the last active navigation tab will be showed. Aslong the startup experience is shown, or while the URL bar is active, no page navigation buttons (back/forward and stop/reload) will be shown to maximize URL showing space.

Extend URL bar is a multi purpose button. It shows the number of opened local tabs and extends URL bar. See Extended URL bar description for more info.

Tabbed navigation to change between pages, either by pressing a tab or by swiping the whole area under the tabbed navigation to left or right.

Favorite pages are by default the 6 most viewed webpages. They can be configured and moved by touching them long. They can be deleted by pressing the close button in the bottom right corner.

Active URL bar

(click image for larger size)
explain-2

Active URL bar shows the full URL including protocoll.

Multi purpose favicons have three different behaviors.

  1. If an high-res favicon ( >= 40×40) is available, it will use this, but masked with a breeze browser icon shape.
  2. If there is no favicon at all, it will use a grey version of the breeze browser icon.
  3. Last but not least if a normal favicon (usually 16×16) is available, it will be centered on top of a grey dimmed breeze browser icon.

Webpage view

(click image for larger size)
explain-3

Back and forward button for webpage navigation.

Progress bar is only shown while loading a webpage and gets hidden again when thats done.

URL bar with website shown truncates the protocoll to show more of the URL. There are more possibilities like to truncate the middle of the URL and just show then end of it again. This could look like that for example (http://talk.maemo.org/subdir/archive/november/page.html) could be (talk.maemo.org – page.html). Also on secured or unsecured connections the domain name could be colored green or red.

Combined stop/reload button shows stop button while loading a webpage and reload button after it was loaded.

Scrollable area is the area used for the website. As you scroll down the URL bar moves with the webpage out of the screen. When scrolling to the top it will be shown again. To avoid scrolling pain on very long pages the URL bar should be pushed in again with a small but fast flick down (scroll up). This behavior is used on several browsers on Android and maximizes screen real estate while browsing. I have recorded a short Youtube clip to demsonstrate this on my Nexus 7 tablet with Firefox browser.

Firefox Android scrolling behavior

Extended URL bar

(click image for larger size)
explain-4

Tab navigation tabs selects between 3 different types of tabs. Normal local tabs, Private local tabs and Synced remote tabs (if Firefox Sync gets implemented). No swipe changing available here.

Add new tab button adds a tab in the active Tab navigation tab

Active tab is shown by a blue outline. As soon as another tab gets selected, the extended URL bar gets decreased to normal size. Same happens for any touch outside the extended area.

Settings button will show in app setting or shortcuts to system settings. The final settings behavior for apps with Glacier UI is not decided yet.

Scrollable tab area is swipeable as soon as there are more than 3 tabs open in the active tab navigation tab.

Inactive tabs are grey outlined.

Tab description shows either page title or domain name of it’s tab.

Tab close button closes a tab. Tab closing could also be realized by swiping them up or down. Closing last tab from any tab navigation tab jumps to startup experience.