View source for OLPC Human Interface Guidelines

__NOTOC__

<div style="background-color: #F5F5F5;">

{{OLPC}}
[[Category:Sugar]]



{|border=1 cellpadding=1 cellspacing=0 style="margin: 20px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#D6784C"|Note to Readers
|-
|We are in the process of splitting this document into multiple pages for online viewing.  The internal links within this document will remain inactive until this process has been completed.  Thanks for your patience.
|}



{{:OLPC Human Interface Guidelines/Introduction}}


{{:OLPC Human Interface Guidelines/Core Ideas}}


{{:OLPC Human Interface Guidelines/Design Fundamentals}}

</div>

==The Laptop Experience==

===Introduction===

Most developers are familiar with the [http://en.wikipedia.org/wiki/Desktop_metaphor desktop metaphor] that dominates the modern-day computer experience. This metaphor has evolved over the past 30 years, giving rise to distinct classes of interface elements that we expect to find in every OS: desktop, icons, files, folders, windows, etc. While this metaphor makes sense at the office&mdash;and perhaps even at home&mdash;it does not translate well into a collaborative environment such as the one that the OLPC laptops will embody. Therefore, we have adopted a new set of metaphors that emphasize community. While there are some correlations between the Sugar UI and those of traditional desktops, there are also clear distinctions. It is these distinctions that are the subject of the remainder of this section. We highlight the reasoning behind our shift in perspective and detail functionality with respect to the overall laptop experience.

*Desktop : [[#Zoom_Metaphor|Neighborhood]]
*Menubar : [[#The_Frame|The Frame]]
*Hierarchical Filesystem : [[#The_Journal|Journal]]
*Applications : [[#Activities|Activities]]
*Files : [[#Objects|Objects]]

===Zoom Metaphor===
[[Image:zoom_levels.png|left|thumb|320px|Four distinct zoom levels define the laptop: Neighborhood, Friends, Home, and Activity]]

The mesh network is a permanent fixture of the laptop environment  and is represented explicitly in the interface. A zoom is used to relate four discrete views, each of which caters to a particular set of goals: Home, Friends, Neighborhood, and Activity. Using keyboard shortcuts or controls in the [[#The_Frame|Frame]], children may zoom in and out on the mesh community.  

<br clear="all"/>

====Home====
[[Image:home.jpg|right|thumb|240px|The Home view: Each child chooses a dual-tone color scheme for her XO character that is used throughout the interface. Activity icons are color-coded by the child who launched the activity.]]

Of all the zoom levels, the Home view relates most closely to the traditional desktop. As the first screen presented to the child at startup, it serves as a starting point for the exploration of both the mesh network and also of her personal activities and objects. From this view, she may either back up first to a circle of [[#Friends|Friends]], and beyond that to a view of the entire mesh [[#Neighborhood|Neighborhood]], or, instead, zoom in to focus on a particular [[#Activity|Activity]].

The Home view interface is minimalistic. In the center of the screen, the [[#Icons|XO icon]]&mdash;rendered in her user-specified colors&mdash;represents the child to whom the laptop belongs. The [[#The_Activity_Ring|activity ring]] surrounds the character, indicating all of her currently open activities. Furthermore, the section of the ring that a given activity occupies directly represents the amount of memory that the particular activity requires to run, providing immediate visual feedback about memory constraints and exposing a means for resource management that doesn't require knowledge of the underlying architecture. Most activity management happens here: starting new [[#Privacy_Levels|private activities]], ending current activities, and switching between activities.

When used in conjunction with the [[#Bulletin-Boards|Bulletin Board]], the Home view becomes the most direct correlate to a typical PC desktop as a place for keeping things handy: tomorrow's homework, a drawing one is working on, a favorite song, a reminder to oneself to do one's chores.

<br clear="all"/>

====Friends====
[[Image:friends.jpg|right|thumb|240px|The Friends view: Friends and their current activities are visible from this view. Hovering over a “missing” friend reveals an "away message."]]

The Friends view takes a small step back from the child's Home space, opening up to include her circle of friends.  Essentially, this view represents a spatially viewable and editable buddy list. From here she can add or remove friends and move individuals around, perhaps forming them into logical groups&mdash;the four friends on the right half of the screen, for instance, might be her "drawing group." All of her friends receive [[#Invitations|invitations]] whenever she starts an activity from the Friends view, making collaboration implicit. Moreover, this view allows her to see what activities her friends are presently engaged in, providing the opportunity to [[#Joining Activities|join]] any non-private activities. Already, you can see how this view changes the usual method of application launch, allowing one to start new networked activities or join existing ones directly.

<br clear="all"/> <!--prevents image pushing title out-->

====Neighborhood====
[[Image:neighborhood.jpg|right|thumb|240px|The Neighborhood view (or Mesh view): All children visible on the mesh network can be seen clustered around shared activities; Away messages are also accessible from this view.]]

Zooming out one more step we reach the Neighborhood view. Here children can see everyone on their local mesh. At this level we intend to support a variety of views, each with a different focus: the individuals; the activities in which they are presently engaged; etc. In the figure, individuals are shown clustered around their currently active activities, providing a direct visual representation of the popularity of an activity, since group size is immediately perceptible.

While the Neighborhood view doesn't currently provide any true spatial or geographical data, it does provide an at-a-glance social geography of the mesh and its participants. Similar to the Friends view, launching an activity here implicitly opens that activity up for anyone in the Neighborhood to join. While no one receives an [[#Explicit_Invitations|explicit invitation]] in this case, the newly started activity will appear in the view, with its participants clustered about it, so that anyone who wishes to may join. Of course, this also means that the Neighborhood provides an excellent space for exploration. Here, one can both search for, locate and [[#Joining_Activities|join activities]] of interest using a powerful and adaptable [[#Searching|search]] technology, and also interact with and [[#Making_Friends|make friends]] with other children in their neighborhood they haven't yet met.

<br clear="all"/> <!--prevents image pushing title out-->

====Activity====
Zooming in from the Home view, a child finds the Activity view. This view contains the activities where all of the actual creation, exploration, and collaboration takes place.  This is where you, the developer, come into play, providing new and engaging tools, extending the functionality and encouraging new types of creative exploration.

Though multitasking has become somewhat of a standard in today's desktop computing world, we've chosen to break away from this model, instead adopting a fullscreen activity view that focuses the children's energies on one specific task at a time. Although one may have several activities open in the activity ring at any given moment, only one can be denoted as the active activity (similar to focus in a window system). Several factors contributed to this decision: first, although the laptops have an extremely high-resolution display&mdash;200dpi&mdash;the actual viewing area remains quite small&mdash;a modest 7.5-inch diagonal&mdash;leaving little room for multiple activities on the screen; and, as noted, it naturally focuses efforts on a specific task. The [[#The_Frame|Frame]] detailed below serves as the interstitial tissue between activities. As a visual extention of the [[#The_Journal|Journal]], it enables objects to move between activities.

For extensive detail on the various aspects of the activity interface and their design guidelines, see the [[#Activities|Activities]] section.

===The Frame===
[[Image:frame.jpg|right|thumb|240px|The Frame: The left, top, and right sides of the frame represents nouns: persons, places, and things. The bottom of the frame represents those elements that require action: activities, invitations, and notifications.]]

====Always Available on the Periphery====
Glancing at the previous screen shots, you might have noted the absence of a menu bar or other form of persistent interface element. Such a persistent element reduces the screen space available for activities; since screen is at a premium, we have opted to use a frame&mdash;always on the periphery and just out of sight&mdash;to contain all of the peripheral information that a child might need, across all views. Since the Frame persists at all zoom levels, it provides a consistent place for those interface elements which apply to all views, including search, incoming invitations and notifications, a clipboard, and buddies you are currently interacting with.

When [[#Activation_Methods|activated]], the Frame slides in atop the currently visible view, providing access to needed functionality, yet quickly retracting from view once the task for which the child invoked it ends. Although these transitions happen quickly, a forgiveness parameter prevents unintentional Frame retraction in hopes of making interaction with this interface element completely natural.

====Frame Components & Organization====

[[Image:Frame components.png|320px|left|thumb|The Frame is organized into distinct logical groups.]]

At a high level, one can consider the frame in two parts:  The left, top, and right sides of the frame represent nouns: things, places, and persons. The bottom of the frame represents those elements that require action: activities, invitations, and notifications.  More specifically, each edge of the frame is dedicated to one of people, places, objects, or actions.

=====People=====
As previously mentioned, the presence of others on the mesh defines much of the laptop experience.  In order to surface this at all times in the interface, the right-hand edge of the Frame provides an easily accessible list of all the individuals a child is collaborating with in her currently active activity, represented by their colored [[#The_XO|XOs]].  This has a number of benefits.  First, it provides a quick reference of the people she's working with, which updates as new people join and others leave.  As new people arrive, they appear in the upper right corner, and as they leave they simply vacate their current location.  Additionally, the secondary rollovers for these XO objects reveal biographical information about them: name, age, class, interests, and even a small photo.  This makes the frame a great resource for [[#Making_Friends|meeting new friends]], for what better place to meet them than in the activity she shares with them?

=====Places=====
Of the various frame components, the Places category is the most abstract. However it also emphasizes the metaphors that the zoom levels build upon.  In the upper left-hand corner reside the zoom buttons, which can instantly transition the user among the Activity, Home, Friend, and Neighborhood views.  For clarity, the upper left-hand function buttons on the keyboard have identical icons and functionality.

On the other side of the Places edge resides the Bulletin-Board button.  Again, this button has an analogous key on right-hand side of the keyboard's function keys.  Discussed later, this button acts as a toggle for an auxiliary layer which can provide contextual chat and a place to share objects.  This button functions within the Places bar because it acts as a modifier to any view.  In a sense, it adds an additional layer of context to any other "place" on the laptop.

Finally, though not less importantly, this section of the Frame contains the [[#Global_Search_Integration|global search field]].

=====Objects=====
The clipboard has become a staple in any modern operating system.  Nonetheless, its implementations have changed little, if at all, in decades. The clipboard has one "page", to which you can copy  to, cut  to, and paste from, and in most cases this hypothetical page remains invisible: to see what's on it, you've got to paste its contents.  While this isn't strictly true (On Mac OSX, for instance, an item at the bottom of the 'Edit' menu allows you to 'View Clipboard Contents'), most users are oblivious about viewing its contents, as one must explicitly seek it out.  This basic model, while simple, often falls short of many use cases.  Thus, OLPC has extended the traditional clipboard, empowering the user with added functionality without increasing complexity.

On the laptops, the clipboard takes the form of the left-hand edge of the frame.  This region serves as temporary storage for objects - a paper, an image, a sentence, a URL - facilitating their transfer among activities and, perhaps more importantly, among the various zoom levels.  Any type of object that can be stored in the Journal can likewise be transported via the clipboard.  A child may place an object on the clipboard in a couple of convenient ways.  First, keyboard shortcuts will provide an interface for simple cut, copy, and paste functions in the way already familiar to us.  Additionally, since objects support direct manipulation, she may simply drag a photo, file, or selection onto the frame in order to copy it, and may then drag it out to paste it in another location, such as within another activity, on a friend, or to a [[#Bulletin-Boards|Bulletin Board]].  As items are placed on the clipboard, they are arranged temporally in a push-down stack, the most recent clipping appearing in the upper-lefthand corner of the frame.

With the presence of a clipboard which contains multiple items, it becomes necessary to add a means for selecting an active clipping as the source for any paste command.  Since the usual copy/paste keystrokes will quickly become familiar to all, any invocation of the cut or copy shortcuts will automatically place the resulting clipping at the top of the stack, selecting it as the source, so that a subsequent paste command behaves as expected.  When not using these traditional shortcuts, however, a single click on any object in the clipboard will select it, visibly indicating it as the new source.  Of course, keyboard shortcuts will also provide a method for cycling through the currently selected clipboard item.

=====Actions=====
The bottom edge of the frame functions primarily as an [[#Starting_Activities|activity launcher]], but it also accumulates both incoming [[#Invitations|invitations]] and [[#Notifications|notifications]].  As a starting point for instantiating activities, this part of the frame is fairly straightforward.  Whenever an activity receives a click, a colored instance of that activity appears within the activity ring in the child's own colors, and invitations are automatically sent as appropriate.  On the other hand, anytime she receives an invitation it appears as a colored activity icon (in the color of the inviting XO, of course), clearly distinct from the uncolored outlines of the activities which reside on her own machine.  Since an invitation to join an activity has no functional differences from starting one of her own, the invitations appropriately indicate this by their similar form.  The rollover state for these invitations allows her to accept or decline the invitation, optionally providing a reason for declining.

Notifications, the third aspect of the Actions edge of the frame, function slightly differently.  While they don't represent an activity that she can join, they do come as messages from activities or from the system, conveying important information about the state of the activity or system status such as battery strength or wireless signal.  Though slightly different from activities and invitations, these notifications still require some action on her part, and are an appropriate addition to the frame which provides a convenient way to access them from within any view. Just as in the other edges of the frame, invitations and notifications organize by time, the most recent always in the lower left-hand corner, so that she may handle them in a timely manner.

====Activation Methods====

The Frame has multiple activation methods.

=====Hot Corners=====
Hot corners serve as the Frame's primary invocation method.  As [http://en.wikipedia.org/wiki/Fitt%27s_law Fitts' Law] implies, the corners are the easiest part of the screen to hit with a cursor. Moving the cursor to any corner of the screen will instantly invoke the frame. From a corner, one can readily scroll along an edge in search of a desired element. Since newly added people, objects, and invitations insert from the corners, the latest invitation, clipping, or participant is always close at hand.

=====Warm edges=====
"Warm edges" work identically to hot corners albeit on a short delay. For the laptop interface, this means that a half-second pause precedes the activation of the frame from an edge of the screen. Additional parameters, such as a minimum cursor velocity, virtually eliminate accidental invocation; this is importance since, again by Fitts' Law, the edges of the screen provide the optimal placement for toolbar buttons and scrollbars&mdash; these elements should extend to the very edge of the screen themselves.  The ability to access the frame directly from the edges allows one to jump directly to the spot where a particular element, such as the search field, resides.

=====Function Key=====
In addition to trackpad-based activation, the information within the Frame lies just one keystroke away. A dedicated key has two modes of functionality: (1) momentary presses act as a toggle, turning the Frame on and off with each press; and (2) holding the key down, the Frame will appear on screen until release of the key. This latter method provides a quick way to glance at incoming invitations or other system status elements for a brief moment and then return full focus to the activity view itself.

=====Notification Overrides=====
Though rare, some urgent [[#Notifications|notifications]] such as low battery levels may override the Frame, automatically bringing it into view without user interaction.  These overrides come from the system only; applications do not have privileges for override, although they may alert the user via standard notifications.

===Bulletin Boards===

[[Image:bulletin-board.jpg|left|thumb|240px|Bulletin boards provide a layer for contextual chat and sharing around any view.]]

Since the laptops have implicit connectivity via the mesh network, an additional layer of the UI has been designed to take advantage of it: Bulletin Boards. Taken literally, the Bulletin Boards provide a space for ''posting things.''

Context is key to the usefulness of Bulletin Boards on the laptops. A button in the Places edge of the Frame toggles the Bulletin-Board layer on and off, and although only one button exists for this purpose, each view among the various zoom levels has its own Bulletin Board. The scope of individuals who have access to a given Bulletin Board matches the scope of individuals that the view represents. For example, any items posted to the Home view Bulletin Board may only be seen by the child that posted them, effectively providing a traditional desktop environment. Likewise, anyone within her list of Friends may view things she's posted to her Friends view Bulletin Board; the Mesh view Bulletin Board provides an environment for sharing with the entire laptop community. Furthermore, each activity has its own Bulletin Board, providing a space for sharing files and ideas surrounding the activity itself that don't have a place within it.

<br clear="all"/> <!--prevents image pushing title out-->

====Spatially Contextual Chatting Interface====

As a transparent layer above any view, the Bulletin Board provides a spatially contextual chatting interface. This means that, unlike traditional forum-style threads that organize temporally, chat bubbles may be freely positioned on screen. Discussions formulate around specific areas of the activity beneath. Annotation-style comments open the door to a wide variety of conversational interactions. In a drawing of the ocean, for instance, one conversation could be happening below the water's surface, while another group of children discuss what kind of birds fly through the sky. In another situation, one child could remotely assist another in learning how to use a new activity, pointing out specific interface elements with detailed descriptions of their functionality. In a literary application, child or teacher could proofread another child's story, correcting spelling mistakes, pointing out grammatical errors, and sharing thoughts about specific sections of the story without directly editing his work on the activity layer beneath.

====An Environment for Sharing====

In addition to contextual chats, Bulletin Boards provide a space for sharing. Any object may be posted to a Bulletin Board for others to look at and enjoy and to pass on to others, promoting viral sharing. The sharing environment is an integral element of all views.

In the Home view, for instance, only the child to whom the laptop belongs has access to the contents of the Bulletin Board.  Here, the Bulletin Board provides a convenient area for the temporary storage of objects and activities, as well as those things kept around for quick access  tomorrow's homework assignment, the pictures taken last week, the book she's reading, a favorite game. In this way, the traditional desktop that the zoom levels replaced finds its way back through the Home view Bulletin Board. The functionality described here mimics the traditional desktop to some extent. Note that the contextual chat bubbles are available in the Home view, providing a mechanism to write "notes-to-self". The Bulletin Board metaphor emphasizes a temporary and everchanging space for placing objects, distinctly separate from the space in which they are stored. This may prevent the common overuse of the desktop as the primary place to store ''everything'', which limits its usefulness as a quick way to find the files that matter most at any given point in time.

From the Friends and Mesh view, the Bulletin Board serves as a place to share interesting things a child has found or created with her friends, and the entire mesh respectively.  The important thing to remember with regard to sharing, of course, is that "transfer this .jpg file to Bob and Sue" translates to "Share this photo I took with my friends."  The sharing metaphor functions much more naturally than the file transfer systems we're used to, since file transfer really just represents a technical implementation of the more abstract idea of sharing in the first place.  Of course, children can also view the things that others have posted as well.  Moreover, as a community space, group sharing occurs naturally.

Finally, the shared space the Bulletin Boards provide take on a slightly different, yet quite powerful meaning at the Activity level.  Again, contextual to the current view, each activity has its own shared Bulletin-board.  Posts to this layer provide supporting materials for the underlying activity that other participants in the activity may view (Or, if they'd like, keep for themselves).  This actually means a great deal, since any object at all can be shared this way, including many objects that the activity itself may not provide support for.  For instance, though one couldn't paste a song inside a drawing, a song posted to the Bulletin Board layer could provide inspiration for it.  Similarly, it provides a means of collecting materials relevant to the task at hand within the activity.  Rather than having 5 individuals each pasting images of a shark directly into the drawing, they could instead post them to the Bulletin Board for others to see and discuss before deciding which to use as a basis for the drawing. Thus, Bulletin Boards provides a space for gathering research and supporting materials, and holding discussions around both them and the activity.

===View Source===

While Bulletin-boards provide a layer of abstraction on top of any given activity, the View Source button allows one to look behind the activity, peeling away layers of abstraction in order to reveal the underlying codebase which makes it tick.

===The Journal===

====Temporal Organization====
Timeline...

Level of detail...

Granularity...

Falloff...

====A Typical Journal Entry====
Implicit...

Explicit...

====The Power of Metadata====
Implicit...

Ratings...

Use frequency...

====Powerful Filtered Searching & Sorting====
Filtering...

Sorting...

Special filters: about to be removed, lazy deleted (trash can), in progress...

====Implicit Versioning System====
Automatic, incremental saves...

Viewing revision history...

====Automatic Backup and Restore====
Automatic backups to server...

Full restore (temporal)...

Partial restore(by object)...

Temporary restore...

====The Journal as a Progress Indicator====
Two stages for entries...

==Activities==

===A New Model===
We make a distinction between the typical single-application, multi-document model of computing and the OLPC full-screen activity interface, where each object (document) runs within its own instance&mdash;multiple instances of a given activity may run in parallel. Activity instances within Sugar provide a way to handle files as objects; each instance may represent a different group of collaborating individuals. "Open" and "Save" actions are relegated to a journal interaction; creating a new instance of the Draw activity implicitly creates a new drawing. To "open" an older drawing, you simply [[#Resuming_Activities|resume]] it.

===Starting Activities===
Activities appear in the Actions section of the frame; starting an activity amounts to creating an active instance of it, represented in the activity ring. They can be started with a single click. An activity may also be directly manipulated; dragging an activity into the ring will also start it. 

Visual cues differentiate between instances of an activity and the [[#Activity_Icons|activity icon]] in the frame. Specifically, any activity installed on the system and appearing in the Actions edge is drawn as a white outline stroke, with no fill. Upon instantiation the icon receives a fill; both stroke and fill colors  match the XO colors of the child who created it.

====Private Activities====
Newly created activity instances inherit the scope of the view in which they are created. This means that any activity started from the Home view begins as a private one by default. Children may later [[#Sharing_Activities|share]] private activities, opening them up to friends, classmates, or anyone on the mesh through an [[#Invitations|explicit invitation]].

====Shared Activities====
Since newly created activities inherit the scope of the view, any activity started directly from the Friends view will be open for friends to participate. [[#Implicit_Invitations|Implicit invitations]] are sent to all of the friends in the view, alerting them of the activity. Likewise, any activity started from the (unfiltered) Mesh view will be open to everyone on the mesh, although invitations are not sent.

The views provide scope for instantiating activities. For finer granularity, the search (located in the Frame) provides an incremental filtering system that enables arbitrary selection of scope. As a query is entered into the search field, the view&mdash;Friends or Mesh&mdash;dynamically updates to reveal the matching selection. Matches remain in color, while those filtered out appear with a white outline. The filter terms apply parameters such as the names of activities, the types of activities, the names of individuals, and the interests of individuals.  For instance, a child could search for anyone who likes games before starting a new game of Memory, or everyone in her grade in a classroom setting, or a specific group of individuals by name. The results of the query become the scope for any new activity instance, and all XOs within that scope receive implicit invitations when an activity begins. These groupings may be saved as groups for future use.

Once a shared activity begins, the child who initiated the activity is taken into Activity view. Others who received invitations won't join the activity until they accept the invitation; white outline placeholders for their XO icons appear in the People section of the frame to indicate their potential arrival. If they accept an invitation, their XO fills with their colors; if they decline the outline disappears.

===Joining Activities===
Children will often find themselves joining activities already started by others. Activities can be discovered through search; searches may specify an activity name, an activity type, interests of individuals, and names of individuals. For instance, one could search for all activities that relate to music, or all activities that have participants who like camping, or all the active chat activities, or a few specific people by name. Once an appropriate activity is found, a single click on the activity icon will engage it.

===Sharing Activities===

Activities may begin as private, or private to a small group of individuals. There may be occasion to open up activities to a broader scope. For instance, a class may break into groups to work on a project within private group activities. At the end of the session, all groups may wish to open up their activities to the rest of the class for discussion and critique. Through selection in the activities contextual rollover, one may set the scope of people who may join an activity to one of Private, Friends, and Mesh, or a saved group.

A child may lock activities in a similar manner, tightening an activity's scope. Participants must leave on their own volition or at the request of others within the activity before locking it.

===Switching Activities===
The activity ring indicates the activities currently running on the laptop. From the Home view, a single click on any activity in the ring will select it as the active activity, automatically transitioning back to its Activity view. Keyboard shortcuts enable quick transitions among open activities.

===Ending Activities===

Ending an activity happens as easily as starting one. To complete the metaphor, dragging an activity out of the ring will end it.  Selecting the End action in the activities contextual rollover will do likewise. Note that ending a shared activity&mdash;even one ''you'' started&mdash;does not necessarily "close" it. An activity instance remains active on the mesh as long as one or more individuals remain as participants.

===Resuming Activities===

In lieu of an "Open" command, one may simply resume an activity.  If a drawing resides in the Journal, then resuming it will automatically restart the Draw activity, allowing modifications to that drawing.  Due to the emphasis on collaborative activities, special consideration has to be given when resuming them;  An activity fingerprint identifies a particular instance on the mesh.  Resuming an activity implicitly invites all others who at one point participated in its creation that also remain within its currently specified scope.  Additionally, cases may arise when an activity being resumed is already active on the mesh.  In such cases, the child will automatically join the already active instance.

===Activity Robustness===

  All activities designed for the laptop should place a strong emphasis on robustness.  Two essential robustness
  considerations are input and network.

===Invitations===

Invitations perform an essential functionality in a computing environment that so strongly emphasizes collaborative learning and creation.  For this reason, two forms of invitations are present in the OS: explicit and implicit.

====Explicit Invitations====
Explicit invitations are used to invite specific individuals into already active activities.  The ability to send explicit invitations to others serves particular use when in a private activity, be it a private group or a solitary one.  In these cases, an explicit invitation can extend the group by including one or more specific individuals, without opening up the activity to a broader scope.

A child may initiate an explicit invitation either from within the activity itself or by identifying an individual or group in either the Friends or Neighborhood views.

====Implicit Invitations====
Implicit invitations do not require specific action on the part of the child. These invitations to the appropriate individuals whenever actions suggest it, such as when starting an activity from the Friends or Neighborhood views. All individuals within the activity's scope receive implicit invitations to join. When an activity is resumed, those who participated previously receive an invitation.

====Receiving Invitations====
Incoming invitations appear within the [[#Actions|Actions]] section of the Frame, adjacent to the installed activities; they are rendered in the color of the inviter. Rollover reveals both the name of the inviter as well as the name and type of the activity.  On extended rollover, the options to accept and decline appear. There is an optional message back to the inviter upon declining and invitation.

===Notifications===

Notifications behave similarly to Invitations; they also appear in the [[#Actions|Actions]] edge of the frame.  However, unlike invitations, which are sent from people on the mesh, Notifications come from activities or directly from the system. As new notifications come in, they form a queue, with the most recent in the lower left-hand corner for quick access.

====Sticky Notifications====
By default, notifications will remain in the frame until the child acknowledges them.

====Transient Notifications====
Transient notifications alert a child when they arrive, but as they contain information that has a limited lifetime, they expire.  Thus Activities may specify timeouts on notifications, after which they will automatically disappear.

===Global Search Integration===






===The Activity Bundle===

Activities will exist in the form of bundles.  These bundles will manifest as groups of related files&mdash;source code, images, documentation, etc&mdash;that compose a given activity.  As self-contained modules, the distribution and installation of an activity distills to a simple transfer of the activity bundle to a laptop. Properties stored within a bundle provide information about its version and its creator(s). (The technical specifications for Activity Bundles can be found [[Activity Bundles|here]].)

====Bundle Types====
OLPC will support a signed "official" bundle type.  Signed bundles have been tested and verified by an authority such as laptop.org or any other organization through which children obtain bundles in some official capacity, such as a country's official repository. This system may support a trickle-up metaphor through which locally signed bundles propagate upward to higher authorities, allowing wider distribution of newly created activities and content to other regions and countries.

Personal bundles, on the other hand, have been created or modified by an individual among the laptop community. A personal bundle isn't signed or verified by an official source; instead, it is signed or watermarked with the identity of the individual who modified it. This watermark remains attached to the bundle throughout its lifetime. As others modify or change it, their own watermark should be appended to the bundle. This gives a personal bundle some sense of origin and a means through which it is possible to give credit or responsibility.

====Bundle Versions====
Bundles always automatically update to the latest officially signed version present within the laptops network. If a child's friend has a more recent version of a singed bundle, Sugar will download that newer version and update her laptop automatically.  This requires bundles to communicate a unique bundle identifier and version, as well as their signature if they have one.

====Obtaining Activity Bundles====

Officially signed bundles should spread freely across the mesh Neighborhood; their information and the bundles themselves should be readily available to anyone within communication range. Installation and updates should occur implicitly.

While personal bundles are slightly more restricted, current thinking would limit distribution of personal bundles amongst a child's friends only. This should help limit the destructive power of a malicious bundle from spreading across the Neighborhood, yet still allow people to open up their bundle source code, improve it and share it explicitly.

=====Implicit Bundle Sharing=====
Implicit bundle sharing will automatically update signed bundles on a child's machine when the network allows. If a child finds an interesting activity running on the mesh Neighborhood, she will implicitly download and install the activity on her own machine when she joins that activity. Additionally, this provides a means of obtaining completely new bundles, since she doesn't necessarily need to have an older version of the bundle installed prior to joining. Of course, since there will likely be some download time before the activity can begin, a visual indication of the progress will appear during launch.

In cases where a child joins a group running an older version of an activity she has a newer version of, the same will happen. Her laptop will silently download the older version of the activity so that when she joins, her active instance is service and communication level compatible. However, in such instances the old version will not overwrite the newer version, and will instead remain a transparent detail for compatibility reasons. The newer will remain present on her machine, so that future activities which she initiates begin with the new version, ultimately encouraging the spread of newer bundles.


 We might need some kind of warning when joining an activity on the mesh whose bundle is not signed...


=====Explicit Bundle Sharing=====
In the case of personal bundles, explicit sharing will be required. This results from the fact that many children may ultimately edit and redistribute new and altered bundle versions of a variety of software; automatic distribution of such modifications is neither secure nor efficient.

In these cases, activities may be posted to private Bulletin Boards, or distributed directly to a child's friends through the drag and drop metaphors used elsewhere in the interface.

====Where Are Bundles Stored?====
The Journal keeps a record of all bundles on the laptop. Installing a bundle creates an entry that indicates who the child downloaded the bundle from and its version. If she installed the bundle through the joining of an activity, the activity entry in the journal will reference the newly updated bundle.  Of course, once stored within the journal, the Bundle will be available for activation within the Actions section of the Frame.

====Removing Bundles====
The journal entry for an activity bundle also allows for its removal; it is deleted in a the same way one would remove any other item from the Journal.

==Security==



==The Sugar Interface==

===Input Systems===
====Keyboard====

[[Image: keyboard_layout.jpg|thumb|600px|center|The basic laptop keyboard layout.]]

=====Localized Keyboard Layouts=====

* [[:Image:Keyboard_arabic.jpg|Arabic]]
* [[:Image:Keyboard_argentina.jpg|Spanish (Argentinian)]]
* [[:Image:Keyboard_brazil.jpg|Portuguese (Brazilian)]]
* [[:Image:Keyboard_nigeria.jpg|Nigerian]]
* [[:Image:Keyboard_thai.jpg|Thai]]
* [[:Image:Keyboard_layout.jpg|US International]]

=====Description of Keys=====

{|border=1 cellpadding=3 cellspacing=3 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Key!!style="background:#cccccc;"|Function
|-style="background: #e9e9e9;"
|colspan="2"|'''View Keys'''
|-
|[[Image:Key_zoom.jpg|right]]
|Transitions among [[#Neighborhood|Neighborhood]], [[#Friends|Friends]], [[#Home|Home]], and [[#Activities|Activity]] views.
|-
|[[Image:Key_bboard.jpg|right]]
|Toggles visibility of the [[#Bulletin_Boards|Bulletin Board]] for the current view
|-
|[[Image:Key_frame.jpg|right]]
|Toggles visibility of the [[#The_Frame|Frame]]
|-style="background: #e9e9e9;"
|colspan="2"|'''Hardware Controls'''
|-
|[[Image:Key_camera_mic.jpg|right]]
|Toggles the built-in [[#Camera|camera]] and [[#Microphone_and_Speakers|microphone]] (with Fn key) on and off
|-
|[[Image:Key_volume.jpg|right]]
|This slider key functions as an analog volume control.
|-
|-style="background: #e9e9e9;"
|colspan="2"|'''Special Functions'''
|-
|[[Image:Key_viewsource.jpg|right]]
|The [[#View_Source|View Source]] key (gear) peels away the activity layer, allowing children to view the underlying source code. It is accessed in combination with the Fn key.
|-
|[[Image:Key_grab.jpg|right]]
|Grab key for panning/scrolling...
|-
|[[Image:Key_slider.jpg|right]]
|The middle of the three large [[#Softkey_Sliders|"slider"]] keys at the top center of the keyboard is available for use by activities.  The slider can be mapped directly to a control in software.
|-style="background: #e9e9e9;"
|colspan="2"|'''Editing Keys'''
|-
|[[Image:Key_enter.jpg|right]]
|We've enlarged the enter key, and given it a visual indicator that maps directly to the graphics used in the UI.  All instances of the confirm and cancel icons within the interface will be selectable directly via the enter and escape keys - a relationship strengthened by this visual mapping.
|-
|[[Image:Key_esc.jpg|right]]
|The escape key has a visual indicator that maps directly to the screen graphics, complementing the enter key.
|-
|[[Image:Key_erase.jpg|right]]
|We've replaced the backspace and delete keys with an erase key.  This new term more accurately describes its functionality both for erasing a few characters of text, but also for erasing drawings, sounds, and other objects. (Fn-Erase deletes beneath the cursor.)
|-
|[[Image:Key_tab.jpg|right]]
|The Tab key differs little from those on modern keyboards.  Shift-Tab functions as a reverse tab, as visually indicated on the key.
|-style="background: #e9e9e9;"
|colspan="2"|'''Modifier Keys'''
|-
|[[Image:Key_ctrl.jpg|right]]
|The control key is the primary modifier for keyboard shortcuts on the laptops.  Note that the control key takes the place of the nominally useful caps lock key on the OLPC keyboards. The removal of caps lock was a design decision on the part of the OLPC team, however placement of the control key in its location followed naturally, since this was its original placement prior to the advent of modern PCs, and is still widely accepted among many communities.
|-
|[[Image:Key_shift.jpg|right]]
|The shift key is used as a modifier for typing capital letters and other "upper" characters.
|-
|[[Image:Key_alt.jpg|right]]
|The alt key is a multipurpose modifier.
|-
|[[Image:Altgr.jpg|right]]
|The alternate graphics key is used to select the alternate characters printed on the right half of the key caps. The language key (found on the Thai and Arabic keyboards) acts as an Alt Gr Lock, switching the entire keyboard to the alternate characters. In this "locked" state, the Alt Gr key is used to select the Latin characters on the left half of the key caps.
|-
|[[Image:Key_arabic.jpg|right]][[Image:Key_thai.jpg|right]]
|The Arabic and Thai language keys act as an Alt Gr Locks, switching the entire keyboard to the alternate characters. In this "locked" state, the Alt Gr key is used to select the Latin characters on the left half of the key caps.
|-
|[[Image:Key_fn.jpg|right]]
|Fn is the function key. It is used to further modify keys; e.g., it is used to access the microphone; it modifys the arrow keys to home, end, page up, and page down; it is used to enable the analog slider controls; and it is used to convert the number key row from 1&ndash;dash to F1&ndash;F11.
|-style="background: #e9e9e9;"
|colspan="2"|'''Navigation Keys'''
|-
|[[Image:Key_arrows.jpg|right]]
|The standard arrow keys up, down, left, and right also operate as page up, page down, home and end respectively when used in conjunction with the Fn key.
|}

=====Softkey Sliders=====

The slider keys have two modes: "digital" and "analog." In digital mode, the discrete functions printed on the key caps are accessed, four per key. In analog mode, accessed with the Fn key, intermediate key codes are enabled&mdash;there are seven positions along the slider; intermediary postions are interpolated in software, turning each of the keys into a 13-position slider.

=====Keyboard Shortcuts=====

For the purposes of development, you may want to review the detailed specifications for keys and their codes on the [[OLPC_Keyboard_layouts|Keyboard Layout]] page.

This section should also go into more detail on the global keyboard shortcut tool which allows children to adjust their preferred key bindings, both at the OS level and for individual activities.  Again, this is an interface that activities should implement, so there should be an API link.

====Trackpad====
[[Image: Trackpad.png|thumb|320px|left|The dual purpose trackpad supports finger and stylus stimuli.]]
The laptops employ a new development in trackpad technology; it is dual mode: capacitive (finger controlled); and resistive (used with a stylus as in a graphics tablet).  With the addition of the stylus mode, children may write and draw directly within an activity, adding a personal touch to chat conversations or a signed email to a friend. 

Only the center region of the trackpad has capacitance, responding to a finger.  The entire trackpad responds to a stylus.



=====Trackpad as Mouse=====
The use of the finger on the central trackpad area serves as the primary input device for pointing.  Though external USB mice will work seamlessly with the laptops, their availability will be limited, and activity designers should not expect that children will have access to them.  This means that a certain lack of precision can be expected when moving the cursor about the screen, and activities should not require extremely precise motion.  Excessively small controls should also be avoided for similar reasons; details on how to design interface elements reside in the [[#Controls|Controls]] section.

Mouse motion...

In addition, the laptops have two buttons positioned beneath the trackpad for input. The left button is the primary button with which elements of the interface are selected, pressed, or activated. The right button has secondary functionality.  Typically, the right mouse button invokes contextual menus, the content of which pertains directly to the interface element the mouse is positioned over.

=====Trackpad as Graphics Tablet=====
When used with a stylus (none are included with the laptop; any small blunt utensil&mdash;such as a stick&mdash;will work), the entire sensing area accepts stimuli. The graphics tablet, which matches the width of the screen, uses absolute positioning.

Details...

====Microphone and Speakers====

The laptop has a built-in microphone and stereo speakers to allow for voice communication and recording. You may integrate audio functionality directly into your activities by requesting access to this hardware in the Functional Manifest. There are also an external microphone and speaker jacks.

  Need a section on using sounds in activities; particularly in the background...

====Camera====

The laptops have built-in cameras to allow for still photography and video recording.  You may integrate camera functionality directly into your activities by requesting access to this hardware in the Functional Manifest.

==="Hand-held" Mode===

The laptops feature a hand-held mode of operation in which the screen swivels around 180 degrees and folds flat, similar to a tablet PC. In this mode, the screen covers the keyboard and trackpad; however, the microphone and camera, mounted within the display bezel, remain available for use. Additionally, bezel-mounted controls provide auxiliary input suitable for the activities that Hand-held mode is designed to support: reading an eBook, playing games, etc.

====Energy Saving Benefits====

The laptop is engineered for extreme operating efficiency&mdash;a goal furthered by Hand-held mode. The CPU can be suspended while still displaying on-screen graphics. While reading an eBbook, since the screen need only be updated when a page is changed, the time spent reading any given page requires no use of the CPU. The screen can run in reflective (daylight) mode&mdash;with the backlight off&mdash;for additional energy savings. These factors combine to create an extremely low-power, energy-efficient machine; Hand-held mode provides a usage scenario where maximal energy savings can be attained.

====Implementing Hand-held Controls====

Unlike a typical tablet PC, the OLPC laptop does not have a touch-sensitive screen. Primary user input comes from two bevel-mounted button sets: the D-pad (directional pad), which has 8 directions of articulation; and the button controller, which houses 4 discrete buttons (labeled  &#x25EF;, &#x2573;, &#x25B3;, &#x25A2;,  on the B1 machine).

=====The Directional Buttons=====

The D-pad should ''not'' be, in general, used to move a cursor around the screen&mdash; in fact, the cursor will hide by default in Hand-held mode.  Instead, it should be used for more discrete operations, such as flipping through pages, scrolling a view, or jumping to focusable elements on screen.  When an interface necessitates focusable elements, these should be visually apparent and arranged in a natural order. In most cases, "natural order" will mean scan-line order, or the way in which one reads a page of text, but this may adapt to suit the needs of the activity. For instance, some activities may opt to scan first by column, then by row; some may use a clockwise ordering some may even zig-zag across the screen. All of these arrangements are acceptable as long as their orderings logically follow from one to the next according to the visuals provided on screen.

Specific activities may in fact benefit from a more traditional cursor. Some games, for instance, may require one. To support these cases, the cursor may be explicitly shown. However, these instances should be carefully considered, since in many cases a cursor will provide a simple yet inefficient solution to a problem for which a better one exists.

=====The Controller Buttons=====

Generally speaking, the controller buttons can act either as standard event triggers, or as modifier buttons to the target of the D-pad controls. A common use for standard buttons is as select and cancel buttons. In such instances, the &#x25EF; button should always represent confirmation, selection, or forward progress, while the &#x2573; button represents cancel, escape, or backward progress. Adhering to these guidelines will make navigation of Hand-held interfaces consistent.

When used as a modifier, the visuals on screen should clearly indicate which of the directions&mdash;up, down, left, right&mdash;perform actions, and those actions likewise should be clearly indicated.  For instance, in the eBook, holding down ∆ displays an overlay listing the book's chapters, and the up/down arrows will have focus within this list while the modifier key remains pressed. The currently selected chapter appears in the center of the screen, and up and down arrows above and below the selected chapter clearly indicate how to scroll through the list.  When activities implement a combination of both standard and modifier buttons, we encourage &#x2573; and &#x25EF; for standard, and &#x25B3; and &#x25A2; for modifiers, since the former two are easier to hit with natural finger placement.

====Built-in Hardware in Hand-held Mode====

Both the camera and microphone reside within the display bezel, and as such remain available for activities to use within Hand-held mode.  The important trade off to consider before using the camera or microphone is that of energy efficiency: while the laptop conserves energy in Hand-held mode, continued use of either of these two devices requires constant CPU usage, virtually eliminating the benefits. Therefore, do not simply integrate these hardware components unless they provide a fundamental service to your activity&mdash;but don't let this deter you from doing so where appropriate.

===Layout Guidelines===
[[Image:Grid_cell.png]]

[[Image:Grid.png]]

===Icons===
====Categories of Icons====
=====The XO=====

[[Image:xo_s.png|left]]

The icons which represent People have special status on the laptops.  Referred to generally as the XOs, they represent the children and their laptops on the mesh Neighborhood, and furthermore represent the OLPC project and its goals to place a laptop in the hands of every child.

=====Activity Icons=====
=====Object Icons=====

[[Image: clipping.png|left]]

=====Action Icons=====

====Active vs. Inactive Icons====
=====Active=====
=====Inactive=====

====Icon Design Guidelines====

=====Icon Format=====
All icons designed for use in Sugar must be provided in [http://en.wikipedia.org/wiki/Svg .SVG format].  Since all icons exist as vectors, dynamic scaling and coloring of the icons occurs without any degradation.  This allows variably sized representations of particular icons to exist depending on context in the interface.  Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors.

=====Icon Sizes=====

[[Image: standard_icon_size.png|thumb|105px|left]]
Icons should be developed and saved at Standard (S) size, though their actual size and appearance in the interface may change dynamically.  When developed at standard size, icons should fit loosely within the 3 x 3 icon-safe subcell of a standard 75px grid cell, as specified in the [[#Layout|layout section]].

Notice that when the interface scales your icons, strokes do not necessarily scale proportionally to the overall icon size.  This ensures that the stroke weight remains visible enough at all sizes to convey its weight and color, but it may also limit the granularity with which you use strokes, which could begin to blend together at smaller sizes.  The following chart relates the various icon sizes to their corresponding scale factors and stroke weights.  We strongly suggest that you try rendering your icons at XS, S, and M sizes in order to tweak their appearance for optimal legibility.

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Icon Size Comparison Chart
!style="background:#cccccc;"|Icon Size!!style="background:#cccccc;"|Scaling Factor!!style="background:#cccccc;"|Stroke Weight
|-
|XS
|0.5
|2.25pt
|-style="background: #e9e9e9;"
|S
|1.0
|3.5pt
|-
|M
|1.5
|4.0pt
|-
|L
|2.0
|4.5pt
|-
|XL
|3.0
|6.0pt
|}

=====Strokes & Fills=====
All icons render in two colors: stroke and fill.  The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs.  As such, the colors in which you choose to save your icon are arbitrary.  However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.

All strokes within an "S" activity icon must have a line weight of 3.5pt. All icons should have a primary fill which represents its overall shape.  In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.

=== Colors ===

====Imbuing Color with Meaning====

Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors&mdash;even when they appear on the laptops of other children on the mesh&mdash;forming a visual identity that supplements her name and attributes.

This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link.  Similarly, chat bubbles on the Bulletin Board take on the children's colors.  Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. 

To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. 

When the display runs in grayscale mode, this colored visual identity is less apparent.  However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.

====Contrast in the Munsell Colorspace====

The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.

The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either &le;N3 or &ge;N7.

<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td>

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Munsell Value Steps
!style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''delta 5 value steps'''
|}

</td><td>

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Text Against Default Laptop Colors
!style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps'''
|-
|N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps'''
|-
|N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps'''
|-
|N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps'''
|-
|N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps'''
|-
|N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps'''
|}

</td></tr></table>

===Fonts===

[[Image:Sugar-font.png|thumb|218px|right|The font used in Sugar menus]]

The OLPC display is 200DPI; therefore one point&mdash;1/72 inch&mdash;is just less than 3 pixels (2.78 pixels). Hence a 12pt font would be roughly 33 pixels. We are settling on a default size for Sugar menus (using [http://en.wikipedia.org/wiki/Bitstream_Vera Bitstream Vera Sans]) of an 11 pixel x height; 13 pixel ascender height; and 5 pixel descender height. In terms of that that is in point size on the actual display, about a 9 point font (it was a 19 point font in Illustrator on the Mac). It is quite legible. We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children.

<br clear="all"/> <!--prevents image pushing title out-->

===Rollovers===

{|border=1 cellpadding=3 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Rollover Animation Phases By Time
!style="background:#cccccc;"|Animation Phase!!style="background:#cccccc;"|Time Offset<br>(seconds)!!style="background:#cccccc;"|Duration <br>(seconds)
|-
|Immediate Background Change
|0.0
|0.1
|-
|Primary Rollover Begins Expanding
|0.1
|0.2
|-
|Primary Rollover Displayed
|0.3
|0.4
|-
|Secondary Rollover Begins Expanding
|0.7
|0.3
|-
|Secondary Rollover Displayed
|1.0
|style="background: #e9e9e9;"| ----
|}

====Primary Rollover====
====Secondary Rollover====
====Rollovers as Contextual Menus====
====Rollovers as Popups====
====Rollovers as Pallettes====
====Rollovers as Contextual Controls====

===Cursor===

===Controls===

====Buttons====

====Selection controls====
=====Checkboxes=====
=====Segmented Controls=====
=====Lists=====
=====Combination Lists=====
=====Color Swatches=====
=====Drop Targets=====

====Adjustment Controls====
=====Steppers=====
=====Sliders=====

====Indicator Controls====
=====Determinate Progress Indicator=====
=====Indeterminate Progress Indicator=====
=====Level Indicators=====

====Text Controls====
=====Static Text Fields=====
=====Input Field=====
=====Search Fields=====

====Separator Controls====
=====Horizontal Rule=====
=====Vertical Rule=====
=====Logical Grouping=====

====Custom Controls====
=====When to Use Custom Controls=====
=====Custom Control Guidelines=====