87
edits
Changes
Jump to navigation
Jump to search
Human Interface Guidelines/The Sugar Interface (view source)
Revision as of 13:09, 28 November 2006
, 13:09, 28 November 2006no edit summary
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; border-left:1px solid #888; border-right:1px solid #888; width: 95%;">
{{hig-nav|prev=Security|next=The Sugar Interface}}
<div style="margin: 8px;">
==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–dash to F1–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—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—such as a stick—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—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—with the backlight off—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 ◯, ╳, △, ▢, on the B1 machine).
=====The Directional Buttons=====
The D-pad should ''not'' be, in general, used to move a cursor around the screen— 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 ◯ button should always represent confirmation, selection, or forward progress, while the ╳ 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—up, down, left, right—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 ╳ and ◯ for standard, and △ and ▢ 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—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—even when they appear on the laptops of other children on the mesh—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 ≤N3 or ≥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—1/72 inch—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=====
</div>
{{hig-nav|prev=Security|next=The Sugar Interface}}
</div>
{{hig-nav|prev=Security|next=The Sugar Interface}}
<div style="margin: 8px;">
==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–dash to F1–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—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—such as a stick—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—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—with the backlight off—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 ◯, ╳, △, ▢, on the B1 machine).
=====The Directional Buttons=====
The D-pad should ''not'' be, in general, used to move a cursor around the screen— 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 ◯ button should always represent confirmation, selection, or forward progress, while the ╳ 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—up, down, left, right—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 ╳ and ◯ for standard, and △ and ▢ 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—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—even when they appear on the laptops of other children on the mesh—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 ≤N3 or ≥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—1/72 inch—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=====
</div>
{{hig-nav|prev=Security|next=The Sugar Interface}}
</div>