Designing Moblin For Netbooks (with notes)

Designing Moblin for Netbooks
© Copyright 2009 Intel.
Nick Richards - 8th July 2009

The story so far


Here’s a quick bit about
me.

O HAI
i’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

Design is nothing without
goals.

Make something better than these

© Copyright 2009 Intel. Moblin
The 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

Good 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
5 © Copyright 2009 Intel.

Small (but big) screens

Any 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 ﬁnal review isn’t a score out of 10, it’s whether the device can ﬁt 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

We 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, ﬂashy 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 speciﬁcally 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?

This is not our target audience
Thus

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

This is our target audience
Thus

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

Expected context of use
Thus

http://flickr.com/photos/silversprite/2890954724/
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

Drawing it all together

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

So, 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 ﬁrst 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.

Well, a couple of sketches
Thus


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.

Or two
Thus


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

Add some snazzy visual design
Thus


[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

The toolbar

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

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

kthanxbai
i’ve been nick@linux.intel.com
you’ve been a wonderful audience


Designing Moblin For Netbooks (with notes)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie Designing Moblin For Netbooks (with notes)

Ähnlich wie Designing Moblin For Netbooks (with notes) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing Moblin For Netbooks (with notes)