Wednesday, November 9, 2011

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.. 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
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 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 :)

Tuesday, October 18, 2011 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 "" 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 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


Monday, October 17, 2011

Collective Innovation

About a week ago, when i watch TVOne, a local news channel, i see something unsual that day. That time, they had a interview with some college student who build a small car (about 1:5 of normal car). And there is something special about this car, it use..i dont know it in English..bleach? that solvent that we use to whitening our clothes..? ya, that one.. They use it as a fuell of the car.

image courtesy of

I personally salute them for what they've achieve..then, it makes me thinking..

Maybe i don't understand completely the concept behind the car..but, i can't imagine the practical use or even the future direction behind this innovation.
Why would we use bleach as a fuel?..well, i sure they know why..

Then again, this makes me think again..this time about innovation and our understanding about the future direction.

Today, one of the fastest innovation happens in mobile devices industry. I like to take some example, Android. Android innovation goes so fast, very fast..this year alone we've seen 2 major release, the honeycomb and tomorrow Ice Cream Sandwich.

But, if we look deeper, Android is actually made from other separate innovation. There are parts that (maybe) in the beginning develop separately. Android is build on top of other innovation like Linux kernel, Dalvik virtual machine, some Java and many other.

So, what is this Android has to do with the car a tell you before?

Maybe "Smaller" innovation, if we, as a society can figure it out whats next, can be use to build a "bigger" one in term of complexity and impact.

In case of cars..or maybe we can say automotive. "Smaller" innovation can be better hydrogen container, social traffic system, foam from natural fiber and so on. This can help us achieve whats next in automotive industry - in this case cheaper, smarter and more green personal transportation.

Thursday, October 6, 2011

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

Sunday, October 2, 2011

FXm smartphone concept v0.2 for Mozilla B2G

Following my post about Mozilla hardware, last week i post some sketch and intial 3D model of the smartphone designed (in my imagination) for Mozilla Boot to Gecko (Mozilla B2G) project.

The concept is following the business model for Mozilla hardware..modularity. Today, i post the revision of the concept contruction.

The styling
Its still the same basic styling concept. Simple, rectangular design. It is designed to match the overall UI theme which is using a lot of rectangular shape.

While match with the overall UI theme, the shape also designed with manufacturing method in mind. Again, i imagine that this Mozilla smartphone (also the tablet and ultrabook, later) will be assembled locally, parts from Mozilla, but monoblock body can be made locally using various material.

I hope that the monoblock design can be made with various material unique to local area. And it can be shaped easily with those various material with CNC machine (it can be made from molded plastic too if the local Mozilla store wants to). But you got the idea.

The smartphone will have only one physical button, the power button. No volume, camera, home, back button whatsever. It also only have 2 slots, one for micro SIM and one for micro SD. So no 3,5mm audio jack. Audio and video will be transmitted via bluetooth, NFC or wireless HDMI.

The contruction
All parts is stacked together. There will be no visible screw or anything. It should look solid on block bar. The screw will be hidden under cover plate (look at the sketch) and SIM/SD slot cover.

I will update the 3D model later..get back to work now :)

Tuesday, September 27, 2011

Mozilla should make their own hardware lineup

Anyone remember Crunchpad? If you forgot about it, its a project initiate by  Michael Arrington of techcrunch to build a tablet like device to surft the internet back in 2008. Yes, it was started before the iPad. Hmmm, he should sue Apple for that :)

What's unique about this project is, for me, this is one of the first hardware project (not software development project like many startups try to build) initiate not by a hardware manufacturer or a company. We even can says that it was initiate by a personal idea, backup by the community. They develop the design concept, hardware, mockup, even a prototype by themself. No high profile super high budget reseach and development center included.

Sadly, the project didn't end up very well. But, this wasn't because of the hardware, or the manufacturing problem. It's a legal battle that killed the project. shows us that this kind a approach to develop and marketed a product is doable in 2008. even become more feasible now in 2011. Today, we have more resource to make it happen. We have, more accessible hardware source and sure, manufacturing technology is progressing.
So, this leads me a question..why nobody try to do this again?

Personally, i think someone should and can do this, again. Its soo important for them to take this approach. To make sure their idea of perfect open standart internet can be realize..

Who are they? Mozilla

Today, Mozilla (with their Firefox flagship) is still hold many human being gateway to the internet (24% last time i checked), especially on the desktop. They just started move to the mobile devices with Firefox for Android and Meego. But is it enough? Its not. Recent survey said that their market share in declined. If Mozilla is lead by Stephen Elop (of Nokia), he must be said it again. Mozilla is sitting in a burning platform..

Lets see. Who is their main competitor right now? Google Chrome? Apple Safari? or even Internet Explorer? For Mozilla, i think is Google Chrome..its Mozilla closest competitor.

So, what is Google Chrome? It is Google attempt to build a gateway to the internet. Back then, Google has the service, but people is using other party browser to access it. Not anymore..

After some 3 years, look what Google Chrome has become along the way. It was a browser only. But not today, in order to achieve what Google think of perfect internet UX, they decided not only to expand the Chrome from browser to become a complete, self sustain OS, it is expanded even further, to become a devices..a complete laptop. Build from the ground up with the concept that integrate the hardware, industrial design to the UI as a perfect gateway to the internet, or the cloud as people say it now.

If Mozilla want to keep up, in the long run, i think Mozilla could take this direction too. Expand their browser engine to become a full self sustain OS. And at the end, provide a complete experience both from software and hardware.

The Mozilla OS is already began. They had "Boot To Gecko" project and other started to came up with similar idea base on Mozilla technology, like Webian for example.

But not the hardware.

Hardware business model
Today, is hard enough for a new brand/manufacturer to reach global market and marked their existance. In an exhibition like CES or IFA, we often saw some new brand with new idea came to the floor. But they won’t get to the international market most of the time and never had their impact.
If its hard for new brand, how about HP with their WebOS devices?

Its even harder for a non profit organization to do so. Just remember the MIT OLPC project. Mr Negoponte has to go around the world, meeting nation leader to distribute their product.
In my previous post, i imagine Mozilla has to build and distribute their own hardware sets (ultra notebook, tablet and smartphone). Design and build a new hardware is relatively doable (OLPC can do that), but to distribute and market it, thats another story.

Mozilla as a company is similar with MIT OLPC (CMIIW). Its a non profit foundation. But unlike OLPC, they don’t aim their product for kids only. So, no door to door goverment sales trip.
For Mozilla to success, there has to be another business model.

What i think is something more or less like the current most successfull open source hardware distribution model. The Arduino model.

Arduino open source hardware platform

If, somehow, Mozilla dediced to go this way and implemet similar model like Arduino, These are 5 things they have to do.

First, design a product with maximum modularity. Use standar modular parts. Make it common so the price can be low. Mozilla will be the one who purchase it from the OEM. The “branch" then buy from Mozilla and assembled the parts.

My modular concept for Mozilla's devices. Smartphone, tablet and laptop that share some of its module based on arm architecture.

Update 27/09/11. I've got a response via email about the The project have some PCMCIA size complete board. This will make the modular concept more visible to design and build. If anyone interested to develop the concept further, feel free to contact me.

Second build a industrial design concept (product-body case, packaging and print material) that can be produce easy around the world using existing facility.

Third. Design a production and quality assurance standar. This is important to gain trust from costumer. And it should be integrated down to the OS itselt to do the QC. Make the OS won’t boot if the hardware spec and quality doesn’t meet the standar requirement.

Forth, build a network of semi independent “branch”. They will be the one that produce and market the hardware locally. With the corrent product concept, the cost of setting up new “branch" can be relatively low. This will encourage local business to take part of this new crowd sourcing business.

Fifth, a global identity and visual communication. From store concept, advertising and so on. Make them unique, clear but can be easily reproduce around the world.

The main advantage of this business model is, Mozilla can keep the cost down, while achieving their goals to bring the perfect internet experience to the world. They also encourage local business, creating more jobs and distribute both wealth and knowledge.

But, this is not the "white box" business model that PC industries have implement. In this case, the hardware is still in Mozilla control to maximum user experience. Only the assembly system is distributed, but all hardware came from Mozilla itself (except the monoblock case, this can be produced locally.

Thats it.

If you had any comment, feel free to drop me an email. I can't activate the comment for my blog, don't know why

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 community. The original concept can be seen at

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


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


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

Imaginary Mozilla smartphone concept

Following last post, today i manage to draw some simple 3D model of the first lineup, the FXm smartphone.

The styling is simple and honest. But, it could be quite different when shown. The shape itself is designed with ease of manufacture and fits in hand perfectly.

This is merely an exercise of form and possible internal main component. The components included:
1. Main monoblock body
2. Screen (imagine a gorilla glass)
3. OLED display
4. Main board assy
5. Battery

I build the concept using PTC's Creo Elements. This software can be download and use for free, you just have to register at PTC website.

You can get it at

The 3D model can be download at

Friday, September 23, 2011

Mozilla should make their own hardware lineup

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

Thursday, September 22, 2011

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

Thursday, July 21, 2011

Jaring Tani - konsep pemberdayaan petani berbasis jejaring sosial

Minggu ini saya bertemu dengan seorang senior waktu jaman kuliah di Trisakti, Bimo namanya.
Sebenarnya ini pertemuan bisnis biasa, kebetulan kantor saya sedang membutuhkan PC workstation baru yang sebelumnya pernah disuplai oleh perusahaan milik dia.

Tapi seperti biasa, kalau ketemu Bimo, pembicaraan meluas...sangat luas :)

Nah, salah satunya adalah soal petani kita. Mereka yang sebenernya sangat kita butuhkan keberadaannya, tetapi saat ini seolah berada di ujung bawah "food chain", tertekanlah bahasa gampangnya. Ada keprihatinan disini, dan ada niatan untuk melakukan sesuatu buat mereka.

Ada banyak masalah di bidang pertanian kita. Tapi obrolan saya dengan Bimo, sepertinya salah satu cara untuk mengurai masalah ini adalah dengan menyediakan akses informasi kepada petani kita. Tapi kali ini informasinya berbeda, bukan lagi satu arah seperti penyuluhan atau koran masuk desa seperti jaman orba.
Jaman sekarang, informasi bersifat 2 arah, ada interaksi, berbagi dan kolaborasi...ya, inilah pola informasi baru. Pola yang sekarang lebih banyak dinikmati kita homo urbanis lewat internet.

So..kita mau bawa pola informasi ini kepada petani-petani kita. Pertanyaannya adalah bagaimana caranya? Keliatannya akan ada pendekatan yang mirip dengan proyek "one laptop per child" nya Nicholas Negropote. Kita siapkan device dan softwarenya..biarkan tumbuh natural.

Nah, disini baru mulai kepala saya mikir kesana kemari. Berhubung saya sedang senang membuat konsep user interface, saya langsung tergelitik membuat konsep UI aplikasinya.

Bayangkan, membuat mobile app buat orang yang bisa jadi baru pertama kali memakan tablet pc..bagaimana kita akan menampilkan informasinya, navigasinya dll...bagaimana membuat aplikasi ini mudah dimengerti, self explain buat mereka.

wah ini pasti seru banget..
saya share konsep saya di posting berikutnya..

stay tuned

Thursday, June 9, 2011

Webian UI concept alternative 1

Lets start designing an UI.

This time is a design concept for If you haven't heard about Webian, its a shell on top of existing OS (Windows, MacOSX or Linux) where user can consume web content with minimal distraction.

So, in my concept, i try to imagine webian as an web based OS (similar to ChromeOS, Jolicloud or WebOS). Because its an independent OS, it has to provide all traditional OS do like file manager, control panel, app launcher and so on.

But, everything would be web based and behave more or less like a web browser. And, everything must be simple, clean as Ben, the founder of Webian said.

Here is my mockup

The basic concept is, i try to relocated frequent task into on place, and in this case at the bottom of the screen. I called it activity cluster.

It has a start menu, a task bar, a mozilla addon/extension bar and traditional clock.
Whats different is, when user click an add new tab (that button with "+" mark), it open a address bar where user can put web URL or search anything. So, the task bar will contain browser windows instead of app in traditional MS Windows taskbar.

At the top of each browser windows (that displayed in full screen) there is a tabbed browser window name and close button similat with current modern browser UI.

And thats it..i'll post my other UI concept for Webian next time.

Ohh, if you want to join Webian development, please visit their website 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