This post was imported from my old blog at http://dylanmccall.blogspot.com/2010/03/new-stuff-for-ubiquity-slideshow.html

Remember that slideshow when you did a fresh install of Ubuntu Karmic?

For Lucid, ubiquity-slideshow is rocking, if I may say so myself :)

First of all, a quick refresher: this is a really simple project with the goal of providing an introductory slideshow that runs when people install Ubuntu. The ubiquity-slideshow packages are all content packages, then Ubiquity displays that content at the right time.

The slideshow is implemented with Webkit, since all the cool people use Webkit. (It also renders things nicely, it’s flexible, quick, we can quickly throw it on the web, people can make content really easily, and Javascript allows us a good split between interactive goodies and actual functionality like installing the operating system).

As far as content is concerned, I try to keep this different from other introductory slideshows in the content that I maintain. It doesn’t try to sell the product as people install it, instead providing some exciting points of action for getting started. Not as vague as you get in Windows’ slideshows, but not an in-depth how-to either.
The idea is really summed up in the first slide: Through this I want to encourage new users to explore Ubuntu and really discover how awesome it is (instead of what buttons to press).

(I admit it: I am obsessed with whitespace)

So: Lucid… Lots of new stuff here.

First of all, the project is now providing separate slideshows for Xubuntu, Kubuntu and Ubuntu installations. It’s also really easy to add more, so anyone who wants in on neat slideshowy action can!
I’m hoping to get an Ubuntu Netbook Edition slideshow in there, too. It isn’t perfect at the moment, so if you have any suggestions for what needs to be done or said, please let me know or write to the ubiquity-slideshow mailing list on Launchpad!

Translations aren’t horrific to work with any more. It’s still possible that strings may change before documentation freeze, but the gist of it is we just have one translation template that has all the text for each slideshow. You can go through the list on a rainy afternoon and have your favourite distro’s installer slideshow completely translated for your locale.

Speaking of strings being changeable, if you see any errors, things that sound strange, things that are useless, things we need or things that you could say better, please file a bug or let me know. I keep a recent copy of things at http://people.ubuntu.com/~dylanmccall/ubiquity-slideshow-ubuntu

Michael Forrest and Otto Greenslade, from the design team, sent me a mockup and some graphics to fit with the exciting new Ubuntu branding. I worked them into the CSS and played with the text a little. Thus, behold, the proposed new look for the Ubuntu slideshow!

The whole thing can be seen on the web. It is a little bit larger than the one in Karmic.
Imagine it in Ubiquity, without a border, inside the awesome new Ambience theme, gracefully connecting to the title bar. Mmm…

Keep in mind this is still a proposal, just fully implemented (granted a few clunky bits).
Any constructive feedbacks or cries of “stop, you maniac!” are certainly not in vain :)

Thanks for listening!

14 Responses

  1. Much more professional looking than Karmic.
    And no, there is nothing wrong with whitespace obsession.
    Great work!

  2. Ricky Laishram

    Nice!! Looks very good :)
    Btw, I noticed that Kubuntu and Xubunu are mixed up in http://people.ubuntu.com/~dylanmccall/ubiquity-slideshow-ubuntu/

  3. It looks amazing!

  4. I can imagine people who are new to Ubuntu and are afraid of missing important information, scrambling to write down these tips on paper as they zip by during installation.

    How about a link to these same slides get added to the "About Ubuntu" page, and some text at the bottom during installation like "To find these slides later, click System -> About Ubuntu"

  5. Great work – that'll save me a few explanations, I'm sure! So in return I offer these simple possible improvements:

    On the Store/sync/share page, shouldn't "Tomboy" and "Evolution" be italicized like all the other application names?

    On the accessibility page, "System Menu" should probably be "System menu" to match the other references.

    All the images are off-centre relative to the surrounding arc by differing amounts (and even directions). I assume this is just the result of rapid prototyping though, and it'll be sorted by the time the mockup becomes the finished introduction for new users.

    I look forward to seeing it in action next month.

  6. Mathijs Groothuis

    Very nice, but I hope the random alignment in the circle will be gone in the final? Just center it in the circle.

  7. I'd like to post some criticism:

    There seems to be no consistent standard for the kind of language used. Sometimes it's "we at Ubuntu", sometimes it's "you can do this", sometimes it's just affirmative commands "do this".

    It would also help if you used a more direct reference when telling people about menu options. Saying "You can get at these tools in one place: the Assistive Technologies Preferences, inside the System Menu." is not nearly as helpful as saying "System->Preferences->Assistive Technologies" — it's also much wordier too.

  8. Troy James Sobotka

    * Plus one on scottritchie's language comment. Who is the audience and what is the tone you would like to set? Once you formulate those answers clearly, lay down a set of guidelines and stick to them? Is there a way to use images to describe actions and dynamically change them for i18n via SVG rendering?

    * You might be able to get elevated results by incorporating a publishing grid into the design. Divide it into columns and have all elements align to it. You can also achieve variation by alternating text / images etc. http://en.wikipedia.org/wiki/Grid_(page_layout)

    * Pay attention to those centres of gravity in those images! The mathematical centre is not the visual centre, and as such, relying on math to give you a result will deliver squonked output. Is there a way to specify the CoG for an image and have it harnessed by the app? Worst case, pad the image previously so that the mathematical centre is the visual centre of gravity.

    * Visual hierarchy. Use the visual hierarchy to steer the visual flow. Can pressuring type sizes further aid this? Can we uniformly adjust the images such that their gravity doesn't vary tremendously from image to image and ensure the visual hierarchy remains consistent?

    Terrific work Dylan.

  9. A few brief points (BTW, whitespace is fantastic!):

    1. Spacing has been mentioned; I'd like to suggest that the text should spaced from the left side of the screen as far as the circle is spaced from the right side of the screen.

    2. How does the gray fit in with the orange = community and aubergine = commercial cues that the new branding establishes?

    3. The icons used differ considerably in their vividness (the Evolution envelope icon is simple and desaturated, while the Ubuntu Software Center oozes with saturation and detail).

    4. It might make an interesting motif to enclose the circle with the Ubuntu circle of friends logo… just a thought.

  10. 1. "Add your own personal note with add-ons."

    Personal note? As an English speaker all my life that sentence makes no sense. Are you trying to say 'personal touch'?

    2. Why mention Google Chat and Jabber on the Empathy page when frankly these have tiny market share. What an average user wants to see is Windows Live, AIM, Facebook, maybe Yahoo too. This slideshow is surely aimed at noobs and switchers, neither of which have heard of Jabber and probably not Google Chat either.

    Otherwise it reads well and seems a big improvement on last cycles.

  11. Great slides, but there's one small visual bug:
    Everything is well fitted inside the semi-circle except the Ubuntu logo, it's bigger!

  12. Wow, all this feedback is wonderful! Thanks, everyone.

    Hoping to get in most of those string changes being suggested. The content hasn't really had a comb-over (or any meaningful content update) for Lucid, but I think the various bits of feedback covered it perfectly.

    Unfortunately, string freeze kind of crept up on me. I hope the translators don't mind :o

  13. Hi Dylan, that looks awesome.

    One small thing: the link to translations should be:

    https://translations.launchpad.net/ubuntu/lucid/+source/ubiquity-slideshow-ubuntu

  14. slashdotaccount

    When will you contribute this back to Debian?