Design you product based on your believe and point of view

 This January, Ubuntu had just released their new OS, to everyone surprise, its not the new desktop operating system (that they usually released in April), but this time a smartphone OS. It is still based on Ubuntu core technology and design philosophy, but tweaked and redesign to fit smartphone screen and usage pattern.

And I like to mention again about the core technology. It is important for us to select (the right) and develop our core technology (especially if you are work or own a technology company). If you doing it right, you can expand your product portfolio easily, well at least, you already has all the need to create a new product based on it. This Ubuntu case is another perfect example of having the right core technology that can be adapted and expanded into another product/form.

Anyway, I would like to talk about another thing in this share.

As you all know, today, there are so many smartphone on the market. In term of platform, today we have 3 major smartphone platform.

They are Apple iOS, Google Android and RIM Blackberry OS. But, there are other less popular platform. They are Microsoft Windows Mobile 8, Jolla Sailfish OS and of course Ubuntu.

Before moving on, lets see the home screen of these Smartphone OS/platform.

 

Jolla Sailfish OS

 

Ubuntu for smartphone

 

Windows Phone 8

 

While, we might can't get the real feel how each of the work just by seeing at the home screen, at least we can see that each of the are quite different (okay, some of them also have similar UI with the other, but we will let the lawyer deal with that).

The question is, how they could come with so many different user interface for the same product called smartphone OS/platform. And..if you want to create another one smartphone OS, how can we design another one that would compete, robust, easy to use but quite different?

Different is something that marketing guru always said all the time. But, how can we make differentiation? Just make it different from the rest?

Ok, lets find out more about our case this time.

Back to the smartphone OS/platform.I think you must already know that each of these smartphone OS/platform is come from different kind of company, with their own history, focus, core (again), previous product (some of them is not event a cellphone company) and services.

This background makes them have different point of view when considering a perfect smartphone OS. In my humble opinion, their different point of view is the main basic enabler to make different product and services for them. Their point of view is one of the main key for delivering unique product.

Lets talk about them one by one. We look again who they are, their history, main product (past or present) and their character.

Apple

Apple started as a computer/PC manufacturer. They are famous with their good quality and ease of use. Apple also known as one of a view PC manufacturer that also develop their own OS, the MacOS.

In the early 2000's, they develop a portable music player that will change the world, the iPod. But, if you closely, its not the iPod that ill change everything, for me its actually the iTunes. iTunes marks the beginning of a new era, where a hardware is closely match and tight with a special locked services system. This combination later on, will be known as an ecosystem.

In Apple case, this ecosystem (for them) is an extension of what they believe, to deliver best possible user experience and ease of use. No wonder, today we see that the iPod-iTunes ecosystem model is used in all their product, ie iPhone, iPad and even Mac PC.

Google

Google is an advertising agency that looks like a search engine company :) well, at least that is what we know right now.

I think their goals is to provide search (or we might says, information that matters, related and needed by its user) that as easy as possible, as quick as possible and as accurate as possible. And in the dawn of PC era, they try to bring "the search" to all modern computing platform.

This is why, some says, is real the reason they develop Android in the first place. To deliver search to the most personal computing platform, your smartphone or tablet, first hand without other party as a conductor (Apple launch Siri in 2011, eliminate the need for iOS devices to go to Google for any information you needed).

 

If you follow Google movement, they recently release Google Now and Google Glass. This two product will mark another step to bring related information (tailored just for you) first hand, up and center that almost automatically and feels like magic.

 

This is Google. From helping you when you want to know something, to have bring something you want to know or needed before you know it.

Blackberry (previously known as RIM)

Yes, these is the one that actually a smartphone company. And they are quite unique actually. They are among the first to offer you both the hardware (the actual cellphone) and the services (email and BBM). It something now we know in fancy world as “ecosystem”.

Blackberry core is text communication – email and bbm. Today when text based communication is available in various new medium (twitter, facebook, path, whatsapp, line etc) they embrace them. If you happen to try or have their new Z10 with Blackberry OS 10, you cloud see all the text massage is placed into one accessible interface.

 

 

In Blackberry OS 10, there is a Blackberry hub that contain all your text based communication

They also known for very good quality (physical) keyboard, something that very logical for a text based communication devices. But, in todays screen only smartphone, the need a better than the rest on screen keyboard.

 

This is what Blackberry is. this is why their product looks and behaves that way.

Microsoft

They once ruled the world with their Microsoft Windows OS and Microsoft Office while back in the PC era. Today, the world have shifted, people tend to spend more time and to do more on mobile devices such as smartphone and tablet.

For Microsoft, they think that your smartphone and tablet is a PC too, but, generally, we think a PC is that old big beige box or your heavyweight laptop. And they losing the market mindshare.

Today they try to repositioning their Windows OS to make it relevant with todays mobile devices with touchscreen trend. All that devices is a PC, but with a new kind of interaction and form factor, so they should run on top of Windows OS. They result, you can look and feel it on new Windows 8.

Jolla

Im sure almost no one know about this company. This is a new smartphone OS/platform company, build by ex Nokia engineer (that once work for Nokia killed Maemo/Meego Linux based smartphone OS) that got fired by Mr Elop (Nokia current CEO).

Guys and girls at Jolla believe in Maemo/Meego mobile Linux platform, and the Qt based core technology. So, they continues the development of the platform, and build the company for it.

 

Ubuntu

Ubuntu is a company build by Mark Shuttleworth, he is a self made millionaire and private astronaut from South Africa. He found Ubuntu base on believe that Linux (or opensource software ) should be part of everyday lives. We also heard they said that Ubuntu is a Linux for human being.

It started as a Linux distribution company for server use (much more like Redhat or Suse), but along the way has transform beyond that with their own unique technology and approaches. Now they produces Linux based desktop operating system for your PC or laptop (that you can download and install for free) and offer various cloud based services.

Part of their believe that Linux is for human being and be part of our everyday lives, as of last year (if im not mistaken) Mark Shuttleworth proposed that Ubuntu will expand their presence in todays computing devices or smart devices. The first product that shows up is the Ubuntu for smart TV, then for smartphone and the last one Ubuntu for tablet.

Ubuntu will soon have OS for every new generation of computing devices, and so does Microsoft (and Blackberry too says some rumours)

Now, can we see it?

Their different point of view and believe makes them have different product for the same product.

Is this the same as differentiation?

Not quite. I think there are some similarity with the concept of “product differentiation”, only that product differentiation usually came from marketing team. They tend to look at the market, measuring, mapping,talked with people of some product good, bad and preferences. After that, they try to find a “hole” in the market, and filled it with a new product.

I don't says that this approach is bad or not working. This approach actually works for many company. But, from my limited exploration, I see that this approach usually came up with product variant (style, material or sets of feature) or try to enter a new segment (price point) for the same product.

On the other hand, the company with strong believe and have unique point of view for something, usually can came up with more original product. They can even bring a totally new kind of product that never exist before.

But of course, like all product and invention, for one to success, there are more variable that the two approach i write about. The history is full of a product that came up from the founder believe and point of view, and some of them fail, just like any other business.

So, do you have your own believe and unique point of view?

Windows 9 UI concept

Another UI concept....:)

Windows 8 is about 4 months old right now. Many people said bad thing about it and the PC that came along with it. They say its a compromise product, bad UI among many other things.

Personally, Im living with Windows 8 since the preview release last year, and for me its a great OS. Maybe its not perfect, but i believ its a new way and concept that will complete over time.

Do people even remember, iOS was not complete in the beginning. It can't load 3rd party app and missing multitasking capability. But, many people defense Apple, said it is what mobile OS should be. But, in reality iOS change time over time and become complete and more capable system. I believe Windows 8 will also change over time, patching the hole it has now.

OK. In this concept, i try to address two said problem found (and many people said) about Windows 8. One, about UI consistencies between desktop and modern UI. And two, about the notification system (again, do you remember that iOS also have a problem about this also? the one that finally fix with that pull down status bar..ehemm...just like Android).

Lets start it

First about the desktop UI.
In my concept, i try to redesign the taskbar, flatten it (its the trend now), and make it more consistence with the whole modern UI. The icon style also replaced with modern UI one. But, unlike todays Windows 8 taskbar that only display running desktop app, this taskbar - which i rename to "taskbox" will contain both running desktop , modern UI app, .
I also implemented notification box in here, the one that will also appear in the Start screen (and later in the Windows Phone 9 Start screen) so the whole thing would be consistences.
I imagine, the notification box can be expanded, so the user can response to what they see quickly. I guess, i will make the mockup UI for that later.

Second..The start screen.

I bring the "Taskbox" into the Start screen UI, change the shape of it to match the Start screen grouping icon.  The function is the same. It will contain the notification box, pinned app and running app (both desktop and modern UI app). The "Taskbox" will always be placed in the left side, so it will always visible when user go back to Start screen.

As you can see, the notification box is also present. It gives user quick access and fixed place for the user. They can response to it without have to go deeper into the apps.

Yes, with this solution, there are two method for the user to deal with push data, via the live tile and the notofication box. But, i think that shouldn't be a problem.

Last, Windows Phone implementation

I try to implement the concept on the Windows phone. The taskbox will always stays at the top of the screen for quick access. It can contain frequent used app, favorite live tile, notification box and display running app.

Thats it...

Physical puzzle versus digital puzzle app

Yesterday, my lovely wife talk to me. She wants to buy a little puzzle for our 2,5 years son. Spontaneously, i asked her to check some on Android market.
And her response surprise me. She said she won't do that.
She wants physical little puzzle, not some digital one on flat touch screen.

Then it makes me think..
Maybe shes right..maybe too much interaction with touchscreen is bad for our son. He needs to feel and learn more about physical object. To play with, to explore with.

And, right now, i just read a great article by  tittle A Brief Rant On The Future Of Interaction Design.

He talk that touch screen interface he called "picture under glass" should not be our future because it isn't our natural way to interact with our world.

I think in some point he is right.

But i still can't imagine the better way of acquiring information, contacting our friends and packing so much data into a small form factor other than our current smartphone or tablet design and UI.

And its quite bother me.. 

Connect.me a people based communication app for smartphone

Todays many of us are using various online services to connect, interact, communicate and play with our family, friends and colleague.

We have Twitter, Facebook, Google+, Yahoo messenger, Google talk/hangout, BBM, Skype and so on..
And in today's world filled with always connected smartphone, we always sign in or connect with that services.

In some ways, the services makes us easy to reach someone. Not so long ago, we called them or send them a SMS. Now, you can reach them if one of that online services.

The problem is, in most todays smartphone, all that services are not integrate inside our smartphone OS, they lived in separated application. You want to tweet someone, you go to Twitter app, want to chat, you go to Whatsapp..
This approach isn't the most practical ways of communication. These online services should make our live easier, easier to reach our contact, not spread them into separated application.

Thats the problem

This is the basic concept of Connect.me.
This app will integrate all that online services into an address book replacement. And when you want to reach Adicahya for example, you can go to the Connect.me address book. And then from his page, you can see in which online services she online.

You just pick one, and a new conversation windows pop up.

This windows will contain all your conversation with Adicahya whether the online services you use to reach him. If you sms him first and that continue the conversation via facebook chat, all that is displayed and stored in this app.

And the windows is dedicated for that particular person, and act like a single separated app.

This is why i called it people based communication app. Its a different concept with what we used to have. Previously we have services based communication app.

Another this, since this is based on people. You can always make a shortcut for conversation with that people. But this is not traditional contact shortcut in your desktop. Its a dedicated conversation app for that particular person you care about.

As you can see, i imagine this app for Nokia Meego based N9, but i think its possible to make deploy it on Android too.

So, in the near future, you don't have to worry in which online services your friend can be reach. You just have to select on of them, and have a conversation immediately. And maybe, this can make BBM obsolete :)

Fream.in context aware layer for Android

Last summer (like there is a summer in Indonesia :) i join the first startup weekend in Jakarta. This is the first time i attend an event like this. This is also the first time i had my elevator pitch, my first public presentation.
Quite fun isn't it.

Again, it was the first time i release my idea to general public (now, you can see more of my idea here). And, at that event, i present the "fream.in"

Fream.in is my concept of context aware mobile device.
What it is? Ok, here is the example..

So, todays, everyone has a smartphone right. Some of you have Blackberry, other has iPhone and me, for some reason choose Dell Streak, an Android supersmartphone.
But, have you think..is you smartphone really smart or just standby for your command. Can it tell you important information related to your time, place/location and personal preferences (food, clothes, shops, friend etc) ?
I bet it can't..Our smartphone is just a dumb slaves.

The idea is to build a layer on top of Android. This layer will have the ability to tell you important information related to your time, place/location and personal preferences (food, clothes, shops, friend etc). Automatically..
And everything will be pushed into your home screen.

In the 90-2000's we have push email. In the near future, we will have pushed information..real time.

The practical use of this technology is enormous. Imagine this, we can have Android based automotive computer that can tell you if there is a traffic jam, local shop you like or event remind you. We can have smart TV that can recognize who's setting in front of it and stream related info for that person in particular time..and so on

I think you get my point..

Anyway, here is the presentation i made for the startup weekend
enjoy

Fream.in on Prezi

Adicahya

FXos tablet and desktop user interface preview

Here are two early concept of the UI design for FXos tablet/dektop version.

It has been designed from the same concept as the mobile version. All the user interface element, icon, place and workflow are the same.
For the gesture navigation, it'll use the same gesture as the mobile UI version. In the desktop version, the gesture can be perform with the touchpad or the touch mouse..so yes, FXos will need a touchmouse (like Apple magic mouse or that new Microsoft touch mouse).

The first image will show you how the stream layer would look like on the desktop version. Please note that it also bring the same UI element as the mobile version. It just spread the information into 3 column. I think is one way to have the same base code for mobile and dektop/tablet app.

And here is the mobile version..

The second image is showing the add new tab interface. Also, using the same UI as the mobile version, but have more column. Hmm..i forgot to state this, the icon design is not mine. i get it from deviantart, but didn't remember the designer. Please email me, if this is yours or you know who desined it.

And, yeah..kinda lazy here..i use the same icon sets in 3 column. Yes, the tablet/desktop version will have 3 column..just like the stream layer.

The mobile version

In the mean time, i start designing the another way to have the same app design for both deaktop/tablet and mobile version. will show it soon.

User Interface concept for Mozilla Boot To Gecko

I repost this article, because the last time i post, the comment link can't load properly

This concept is my imagination of Mozilla Boot To Gecko web based OS user interface. Since its not officially use by them, i use the imaginary FXos as the name of the OS.

The name "FX" is derived from FirefoX. It will be use across the product lineup in my concept. Imagine FXu, FXt, FXm and so on. I will released them as soon as possible, so stay tune.

The concept is based on my previous UI concept posted on webian.org community. The original concept can be seen at

mobile UI concept
http://getsatisfaction.com/webian/topics/webian_mobile_ui
and for desktop/tablet UI concept
http://getsatisfaction.com/webian/topics/webian_activity_cluster_concept_ui

Previous UI concept for Webian Mobile

Please note that, this concept is far from finish, i still tweak it alot, and the ui mockup is still missing. I will complete it one by one.

FXos UI Concept - A Guideline 
last rev 26-09-11


Hardware


When designing this concept, i also thinking about the hardware to make sure user will have the best user experience possible.

The hardware for this concept is monoblock bar shaped phone, without any physical button except the power button (and maybe camera button). So, no home key, back key whatever. The phone styling should be clean and honest.

An early sketches of the hardware concept can be seen in my next article. I will further explore the hardware design along the UI concept.



Basic concept


FXos use different UI concept than traditional desktop OS. In traditional desktop OS, which is based on old desktop methaphore, we usually found ui elements like desktop, application windows, taskbar, cabinet like file manager etc.

Instead, FXos develop its UI concept based  from a modern internet browser UI. In this UI, we found different common UI element than on desktop methaphore based OS. Here we have element like tittle bar that also function like a tab, address bar, status bar etc. And in browser UI, all content will be presented in full screen. So no windowed content.

In FXos, the browser UI is developed further to make it suitable as an stand alone OS for devices for desktop/laptop, tablet and smartphone.

There are 3 main container that represent 3 most importand element of the OS. These container is called layer. Beside as the representation 3 main element, the layer  also build related on how we can navigate the OS as natural as possible. The three layers are, the base layer, the presentation layer and expose layer.

Layer on FXOS

Base Layer
Is the lowest layer of all. It will always sit on the bottom of the others. The Base Layer will be the container for all setting of the device, from control panel, quick switch (something like power switcher in Android), the Tab Dock, Tray Botton and so on.

Presentation Layer
The second on is Presentation layer. This is the container of the content. All webpage and webapp and application launcher are places here. This is the main space for user interaction.

Presentation layer showing website in active tab. There is a small tip poin at the lower of the web indicating in which tab the website belong to.

Website shows in full screen. Note that, in full screen view, there is a small semi transparent icon in the lower left of the screen. I plan to use this as an alternative shortcut to the "Tab Dock" or may something else.

Expose Layer
And the last one is the expose layer. This layer is use to switch opened content either it is a website or a webapp. How the tab can be displayed can be costumized. It can be cover flow like, tile with preview or whatever.

Website/webApp can be pinned at expose layer. in this example, "the stream" is pinned at the top left of the screen for easy to remember location.

So, 3 layer. And each can be accessed with special different gesture. No button are required.

Key UI element


Tab Dock
The Tab Dock is a mash up between browser tab and an application dock (think MacOSX dock, or windows 7 new taskbar). The reason behind this, is that, "dock" size is usually bigger than traditional tab that browser has, so its more finger friendly (important for touch based UI). The dock also placed at the bottom of the screen, so it follow the concept of clustering main activity at the bottom of the screen.
The dock can also contain pinned webapp or UI element. In this case, the "Stream" screen can be access thru the pinned button placed at the Tab Dock.
Other important element that place at the Tab Dock is the "Tray Button".

New tab screen 
When user click a add new tab button on the Tab Dock, this screen is shows up. Its a combination of app launcher and traditional address bar set (address back, back, forward and search).

If you've seen my previous concept for Webian, i have move the url/search box on the top of the screen. This way, the box will not be covered by virtual keyboard. Or have to slide up when the virtual keyboard is shown. It can sit there peacefully and always accessible. This design will also be use across FXos app (see "the stream" bellow)

Stream
Stream is a replacement of traditional home screen. Like its name, it shows information stream related to user preference. Here user can have social network update, location where he/she is, related surrounding place,new sms messange, calendar alarm and to do list etc.

At the top of the stream, there is a text box. It can used to tweet, send sms, email, update your social network status etc. User can select what services they preffered.

I imagine that, with stream, we can reduce the time user need to access dedicated messaging app. They can send and response to message right here without having to open sms app, or twitter app for example.

The stream also represent how app will looks like in FXos.

Tray Button 
It is the replacement of current traditional system tray. It is a live button, means that, it will dynamically change the information displayed on it related to system condition. User can also click it to reveal more system notification and response to it.

Base screen 
This is the base layer. It contain device setting, quick activation bar, volume etc

System navigation


In designing a system navigation for the FXOS, we have to considered what is the main input device of the next personal computing. And from my perspective they are :
1. Touch screen - for tablet and smartphone
2. Touch pad - for laptop and desktop
3. Touch mouse - for laptop and destop.

From the three of them, the newest one is the touch mouse. I think it will be the next evolution of the mouse (begin with Apple Magic Mouse) and soon will be used by most of the pople.
I note the touch mouse because, the availability of it enable us to bring the same consistent way to interact with our OS. Some basic key element can now be done via simple gesture.

But, it will have a consequences. Since the touch mouse is buttonless, for the sake for consistencies, other devices will also have no physiscal button for navigating the UI. The tablet and smartphone loaded with FXOS will not need any physiscal button.

Again, make it simple, natural and consistence.

Gesture


Here are standar gesture use to navigate FXOS

Double tap
Shows the expose layer.

Tap and hold
Reveal tab dock and reveal a simple popup option. Swipe left to open new tab, swipe right to close current tab.

Swipe from the bottom of the screen
Shows the base layer where device setting and control panel placed.

Swipe from the left edge of the screen
Back to previous screen, similar function to Android back button. Or can be used like browser back button.


Swipe from the right edge of the screen
Forward to previous screen. Or can be used like browser forward button.


Pinch zooming
Just like on the other platform, this for zoom in or zoom out the webpage/photo etc

Draw left pointed arrow with finger
Back to previous page for a website viewing.

Draw right pointed arrow with finger
Forward to previous for webiste viewing.

Application design


Basic design guideline for application UI.

Webapp function button
Like my previous concept ( getsatisfaction.com/webian) all the basic function of the devices is located near the bottom of the screen.
The webapp, in the other hand put all the function near the top of the screen. This will make it clear for the user, which one belong to the app, which one belong to the underliying OS.

Webapp presentation
All webapp (so does website) will presented in full screen.

App navigation
Content of the FXOS webapp will be presented horizontally (think Microsoft Metro UI without that overlapping content). The screen animation will give a clue to the user about this. This approach will also drop the need of dedicated physical back button. User can swipe back and forth with easy and natural way.

User Interface concept for Mozilla Boot To Gecko

im sorry, because some error, i cannot load the comment system properly for this post. I repost the article here

user interface design, a new frontier

Haven't write anything for a very long time :)

So, i have a new toy for exploration. After playing with motorcycle design ( and still do), trying to design a special bag for netbook (since the first eee pc came out in 2007) which is quite success (hey, designboom let me present it at Sydney Design Week 2008) in 2011 i have a new adventure.

Its user interface design..

This field is actually one of my passion since i have my first pc (my family had our first PC when i was 19 years old) . Back then, i try to imagine alternative MS Windows 95 windows botton :)

I event tried so many alternative operating system (OS/2 Warp 4, QNX, Redhat 5.0, Mandrake etc) and installed so many Linux Windows manager (Blackbox, Afterstep, Enlightenment and so on)...why, just to have an experience and get the logic behind the UI.

When mobile phone become mainstream, i switch to mobile devices. I also try many OSes just to get the feel and logic of the UI. Backthen i had try all Symbian based UI (S60, S90 and UIQ), PalmOS, Windows Pocket PC and this year..Android.

But i just started to explore the design recently, by sketching some android app.
So, with it, i 'll begin to write this blog again as i design more ui concept.
Stay tune...

Published with Blogger-droid v1.7.1