Designing Moblin For Netbooks (with notes)

© Copyright 2009 Intel.

Designing Moblin for Netbooks Nick Richards - 8th July 2009



The story so far

Here’s a quick bit about me.


O HAIi’m nick richards

Hi, I’m Nick Richards. I’m an Interaction Designer working for Intel in the Opensource Technology Centre. Prior to that I’ve worked for a number of companies designing all sorts of things on Mobile, Desktop and Web. But last year I was given a really good opportunity that was also a massive challenge.


The mission

OpenedHand (here symbolised by the awesome Ross Burton) were bought by Intel and I was told that they wanted designers to make Awesome New Experiences that Change The World. Designing a new OS is not an opportunity you get to have very often, most of the time as a designer you have to make do with cursing the designers who came before you for being so shortsighted. I am looking forward to people cursing me for not seeing the future.


This is my cat

Moblin is all about sharing, sociability and friendliness so I thought I’d tell you a little bit about me so you can see a little bit more about the context I’m coming from. This is my cat Linus. Yes, this does mean that I’m a huge geek.


Are you a designer?

How many people here would describe themselves as a designer? Put your hands up and keep them there? Who does a bit of design as part of the other things they do? Awesome. You can put your hands down now.


Do you know what Moblin is?

This is Moblin


video available at http://www.youtube.com/watch?v=vsCpIeLLoT8


Now, how did we get there?

Since this is mostly a talk about design I’m going to try and tell you a bit about how we got there and some things that are important for you to think about when it comes to netbooks.

Goals© Copyright 2009 Intel.

Design is nothing without goals.

Make something better than these

© Copyright 2009 Intel. MoblinThe core user experience that we use of the desktop was largely locked down in the 90s or early 2000’s. We reckon that the world has learnt something about how to design software in the interim and even more about this thing called the internet. You may have heard of it.

Everybody deserves good design

© Copyright 2009 Intel. MoblinGood design shouldn’t be the sort of thing you see in magazines. Or watch James Bond enjoying. We think you should democratise good thing by making them affordable. Of course it helps that we’re making open source where things aren’t just cheap, they’re free!

Constraints© Copyright 2009 Intel. 5

Small (but big) screens

© Copyright 2009 Intel. MoblinAny bigger and it’s not a netbook. Any smaller and it’s tough to use the same WIMP paradigm. This is the sweetspot for a small, cheap computer. (this means that we’re sort of rejecting these new 12” computers that are popping up with atom chips, i think they’re too big)

My friend robert has this idea for a tech review show where you invite a celebrity/person on every week and they talk about using a new piece of tech in their life but the final review isn’t a score out of 10, it’s whether the device can fit in their favourite bag. Of course since everyone’s different so’s their bags but we reckon that you’ve got more chance at winning the bag test with a 10” screen than a 12” one.

Keyboard and bad trackpad

© Copyright 2009 Intel. MoblinWe know that touch is coming to netbooks. Our interface will be touch capable, but not touch optimised. We’re optimising for keyboard and bad trackpad. This is actually a bit of a virtuous circle as the same pointing imprecision that the bad touchpad brings is what you get with touch devices.

Must work in a shop

has to be attractive immediately, flashy elements etc. people have to “get it” straight away. if we’re trying to sell something new then people will need to try before they buy. it’s an unknown quantity. so there are some features that are specifically designed to work impressively in a retail environment. we may not get them all in, but they have been designed.

This is an important part of building stuff that we want to be useful. It has to be productisable.

Who are we doing it for?© Copyright 2009 Intel. 3

Thus


This is not our target audience

MoblinHackers at London GNOME Beer. I am slightly to the left (just out of shot).

Thus


This is our target audience

MoblinThe Royle Family. One of the best and funniest TV shows of all time.


It’s not for you

But, if we do our job right - you’ll still love using it.

Thus


Expected context of use

http://flickr.com/photos/silversprite/2890954724/Moblin

Seriously, think about this. If you’re lying on a sofa, you can’t see the keys to type at all. Now, we like keyboard shortcuts a lot, and we’ll have loads of them in there. But we can’t rely on them because of the logical unwinding of our design goals

http://flickr.com/photos/silversprite/2890954724/

http://flickr.com/photos/silversprite/2890954724/

Drawing it all together© Copyright 2009 Intel.

Design principles for you to steal


Simple and easy

We have no concept of help currently. We’re experimenting with some Wiki style tools though.


Suppressed power

Intelligence within the controls (depth unlocked on focus and interaction)


Gets better the more you use it

Automagic bars etc.


Building

MoblinSo, this is some stuff you should really be thinking about before you write any features. It’s mostly pretty easy stuff that anyone can do, especially the sketching and wireframing.

It starts with a sketch


Here’s the first sketch of how we wanted to make tabs work in Croydon, our web browser. You can see our key concerns addressed here. Hiding information, revealing as popovers. Consideration of vertical pixels.

Note the way the sketch is done, almost like a comic book, trying to show multiple timeframes in one image. This is the key part about *interaction* design as opposed to static design. Most of what you’re trying to convey is reassurance with motion and progress.

ThusWell, a couple of sketches


You need idea generation at this stage. So here’s another sketch. At this point I’d realised that we really need tabs to be visible the whole time. It’s a basic user expectation that they’re on the top. so we’re now looking at problems caused by that. The limited number of tabs you can see on a screen at a time and how you can preview and reorder them. Note how we’re using the tray from the previous example. It was a good idea and that’s all you need to keep and watch for the motion arrow. When you see something like that, it means Darren needs to be involved.

It is much easier to iterate quickly at low resolution. The less time you spend on an idea the less you are attached to it. It’s always hard to kill you babies - yet you must since the set of ideas I have and ideas that I have that are good are not 1:1.

Then you go to a wireframe


This is our super low weight wireframe format. You see how we manage to describe pretty much all the behaviour of tabs, just here? I personally really like the way the add new tab button docks onto the switcher. But note we didn’t see that at all in the previous sketches. It’s OK just to focus on the stuff you’re trying to work on in a sketch. This highlights it.

ThusOr two


How has this changed? look at the position of the scroll bar. Look for the tabs themselves. Everything is about making stuff simpler.

ThusAdd some snazzy visual design


[darren slide] Look at that. Fewer buttons than Chrome, which we’re very proud of.

TODO. different image, need one with an add new tab button and not have all the buttons highlighted.

Then iterate the ‘info-motion’


FOR CORE DEVELOPMENT USE ONLY. DRAFT UI CONCEPTS, THIS IS NOT THE FINAL SOLUTION.

The animations are vitally important. We work really closely with the developer (in this case Chris, hope you saw his animation talk yesterday). Lots of our design time is spent here, iterating little bits and pieces that really tie the whole thing together.

It works a bit like this


video available at http://www.youtube.com/watch?v=QFJaDy6ySbU

What makes Moblin different© Copyright 2009 Intel. 5


The toolbar

The panel, always hidden - but the autohide means that it can be bigger when you show it.

© Copyright 2009 Intel. 6

Notification stack

The notification stack is a key concept. One at a time, notifications, unobtrusively in the bottom right hand corner and only visible for a max of 7 seconds each. The rest of the notifications holding in a stack beneath and going up one at a time. Two possible actions for each notification, dismiss and positive action - which should take you to the appropriate app or panel. You can also dismiss all notifications at a time - as such app developers can’t assume that the user has seen the notification. (We also have critical, interruptive notifications but you’ve got to be quite certain that the user really has to know what you want to tell them.


Zones

Zones are not places.


Apps and panels


myzone


Toolbar, sidebar, content pane

This is Anjal or ‘Email’ as people find it on the device. It’s a new email client we’ve designed and that’s implemented by our partners and friends at Novell with the tried and tested Evolution code. Here you can see how our principles work in the context of a GTK app, although we’ve got some plans to reuse some of our very funky Clutter stuff there to add bling.


Toolbar

Every app has to have a toolbar. No menus! No window decoration!


Sidebar

Your app may need a sidebar. Hornsey and Anjal do, the web browser, sync and settings don’t.


Content pane

Every app has a content pane. Or if it doesn’t, you should think seriously about what you’re doing.


kthanxbaii’ve been [email protected]’ve been a wonderful audience

mailto:[email protected]