Human Interface Guidelines/The Sugar Interface
| ← Security | [[Human Interface Guidelines/{{{curr}}}|{{{curr}}}]] | The Sugar Interface → |
The Sugar Interface
OLPC Human Interface Guidelines/The Sugar Interface/Input Systems
OLPC Human Interface Guidelines/The Sugar Interface/Layout Guidelines
OLPC Human Interface Guidelines/The Sugar Interface/Icons
OLPC Human Interface Guidelines/The Sugar Interface/Colors
OLPC Human Interface Guidelines/The Sugar Interface/Fonts
OLPC Human Interface Guidelines/The Sugar Interface/Rollovers
OLPC Human Interface Guidelines/The Sugar Interface/Controls
Fonts
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 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.
Rollovers
| Animation Phase | Time Offset (seconds) |
Duration (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 | ---- |
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
| ← Security | [[Human Interface Guidelines/{{{curr}}}|{{{curr}}}]] | The Sugar Interface → |