Designing Interfaces for Education Systems with Sugar Labs — Rethinking Icons on Sugar

First Impression

Introduction

I recently started to work with Sugar Labs(SL), a open source organisation with its renaissance in the One Laptop Per Child Project(OLPC). It has various projects under it but with a focus on its Operating System(OS), Sugar. They are also developing a web version of the OS called Sugarizer.

Sugar Home UI

Sugar Home

The Design Identity of SL is completely different from what I’m used to. Sugar’s design contains many rounded edges with mainly sans-serif typography.

The first thing that stuck me while using Sugar was a constant use of the user selected primary colour, the challenge of designing activities that are colour neutral this just presented itself to me.

The UI itself doesn’t have a lot of fluff or flair. It retains a minimal nature but doesn’t go down to a level where the usability is hindered. Elements like a circular/spiral display of icons for activities and the user settings and journal being right at the centre emphasises the importance of each element.

The main focus is on the Function as compared to Form.

Icons

The Activity Icons and other elements(like the logo) have a thick border, it’s comfortable on the eyes and helps makes a clear distinction between an image and a icon.

The greyed version of the Activity icon when its inactive and the coloured when its active again emphasises on the minimal and function centred design. Getting into the bare-bones of icon, it is a SVG image which makes the icons scalable to various sizes without loss of quality.


Rethinking Sugar Icons

Introduction

When work was started on Sugar, the OS was still under the OLPC project and it was designed alongside its hardware counterpart at time the XO laptop. The limitations of the XO laptop at the time shaped the UI decisions of Sugar and even after 12 years of the project launch there hasn’t been a lot of change in the UI decisions especially in the Icons of SugarOS. Now that the it is running on a large variety of systems like web browsers and even tablets with Sugarizer. I personally feel taking a fresh approach on the Icons is now more important than ever.

Current Icon Design Decisions

The Human Interface Guidelines state that:

The icons which represent People have special status on the laptops. […] they represent the children and their laptops on the mesh Neighborhood […] Each child will select a stroke and fill color for their XO[user icon], and their chosen colours will then apply to the icons of any Activities or Objects they create.

SugarOS has two different types of Icons, namely Activity Icons which are the various applications that one could run on Sugar and Object Icons which represent the function icons like ‘save’ or ‘neighbourhood’.

The two states(with and without colour) of the icons work well on the grey scale which when paired with the black and white mode on the XO laptop.

The Limitations of the Current Icons

The Icons currently exist in very Boolean variations; with and without colour. While this serves the function of

  1. visibility on the XO laptops
  2. Factor of personalisation and adds to the identity of the user

we must revisit this idea regarding Sugarizer and the newer systems using Sugar and at the same time question if this colour scheme is viable for Activity icons as having coloured Activity icons will give developers on this platform more liberty over their design preferences.

Redesigning Icons

First we start by greying out all icons and only keeping the Active icons in colour. This way we don’t sacrifice the greyscale screen on the XO laptops while still adding colour to the homescreen.

Sugar Home Screen with Calculator and Chat Active
All Activities Inactive on Sugar Home
All Activities Active on Sugar Home

All Icons used are sourced under creative commons from pixabay.com