Designing Moblin For Netbooks (with notes)


Published on

Talk given at the Gran Canaria Desktop Summit, July 2009. For a version without notes go here:

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing Moblin For Netbooks (with notes)

  1. 1. © Copyright 2009 Intel.
  2. 2. Designing Moblin for Netbooks © Copyright 2009 Intel. Nick Richards - 8th July 2009
  3. 3. The story so far © Copyright 2009 Intel. Here’s a quick bit about me.
  4. 4. O HAI i’m nick richards © Copyright 2009 Intel. 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.
  5. 5. The mission © Copyright 2009 Intel. 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.
  6. 6. This is my cat © Copyright 2009 Intel. 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.
  7. 7. Are you a designer? © Copyright 2009 Intel. 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.
  8. 8. Do you know what Moblin is? © Copyright 2009 Intel.
  9. 9. This is Moblin © Copyright 2009 Intel. video available at
  10. 10. Now, how did we get there? © Copyright 2009 Intel. 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.
  11. 11. Goals © Copyright 2009 Intel. Design is nothing without goals.
  12. 12. 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.
  13. 13. Everybody deserves good design © Copyright 2009 Intel. Moblin 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!
  14. 14. Constraints 5 © Copyright 2009 Intel.
  15. 15. Small (but big) screens © Copyright 2009 Intel. Moblin 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 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.
  16. 16. Keyboard and bad trackpad © Copyright 2009 Intel. Moblin 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.
  17. 17. 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.
  18. 18. Who are we doing it for? 3 © Copyright 2009 Intel.
  19. 19. This is not our target audience Thus © Copyright 2009 Intel. Moblin Hackers at London GNOME Beer. I am slightly to the left (just out of shot).
  20. 20. This is our target audience Thus © Copyright 2009 Intel. Moblin The Royle Family. One of the best and funniest TV shows of all time.
  21. 21. It’s not for you © Copyright 2009 Intel. But, if we do our job right - you’ll still love using it.
  22. 22. Expected context of use Thus © Copyright 2009 Intel. 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
  23. 23. Drawing it all together © Copyright 2009 Intel. Design principles for you to steal
  24. 24. Simple and easy © Copyright 2009 Intel. We have no concept of help currently. We’re experimenting with some Wiki style tools though.
  25. 25. Suppressed power © Copyright 2009 Intel. Intelligence within the controls (depth unlocked on focus and interaction)
  26. 26. Gets better the more you use it © Copyright 2009 Intel. Automagic bars etc.
  27. 27. Building © Copyright 2009 Intel. Moblin 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.
  28. 28. It starts with a sketch © Copyright 2009 Intel. 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.
  29. 29. Well, a couple of sketches Thus © Copyright 2009 Intel. 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.
  30. 30. Then you go to a wireframe © Copyright 2009 Intel. 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.
  31. 31. Or two Thus © Copyright 2009 Intel. How has this changed? look at the position of the scroll bar. Look for the tabs themselves. Everything is about making stuff simpler.
  32. 32. Add some snazzy visual design Thus © Copyright 2009 Intel. [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.
  33. 33. Then iterate the ‘info-motion’ FOR CORE DEVELOPMENT USE ONLY. DRAFT UI CONCEPTS, THIS IS NOT THE FINAL SOLUTION. © Copyright 2009 Intel. 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.
  34. 34. It works a bit like this © Copyright 2009 Intel. video available at
  35. 35. What makes Moblin different 5 © Copyright 2009 Intel.
  36. 36. The toolbar © Copyright 2009 Intel. The panel, always hidden - but the autohide means that it can be bigger when you show it.
  37. 37. Notification stack 6 © Copyright 2009 Intel. 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.
  38. 38. Zones © Copyright 2009 Intel. Zones are not places.
  39. 39. Apps and panels 6 © Copyright 2009 Intel.
  40. 40. myzone 6 © Copyright 2009 Intel.
  41. 41. Toolbar, sidebar, content pane 6 © Copyright 2009 Intel. 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.
  42. 42. Toolbar 6 © Copyright 2009 Intel. Every app has to have a toolbar. No menus! No window decoration!
  43. 43. Sidebar 6 © Copyright 2009 Intel. Your app may need a sidebar. Hornsey and Anjal do, the web browser, sync and settings don’t.
  44. 44. Content pane 6 © Copyright 2009 Intel. Every app has a content pane. Or if it doesn’t, you should think seriously about what you’re doing.
  45. 45. kthanxbai i’ve been you’ve been a wonderful audience 1 © Copyright 2009 Intel.