https://wiki.sugarlabs.org/api.php?action=feedcontributions&user=24.63.211.133&feedformat=atomSugar Labs - User contributions [en]2024-03-29T09:32:45ZUser contributionsMediaWiki 1.35.2https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Laptop_Experience/Zoom_Metaphor&diff=16204Human Interface Guidelines/The Laptop Experience/Zoom Metaphor2007-10-05T15:19:52Z<p>24.63.211.133: /* Groups */</p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Introduction|c_section=The Laptop Experience|c_page=Zoom Metaphor|n_page=The Frame}}<br />
<br />
<br />
===Zoom Metaphor===<br />
[[Image:zoom_levels.png|left|thumb|320px|Four distinct zoom levels define the laptop: Neighborhood, Groups, Home, and Activity]]<br />
<br />
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, Groups, Neighborhood, and Activity. Using keyboard shortcuts or controls in the [[OLPC Human Interface Guidelines/The Laptop Experience#The_Frame|Frame]], children may zoom in and out on the mesh community. <br />
<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API/sugar.shell.view.home|Package sugar.shell.view.home]]<br />
|}<br />
<br />
<br clear="all"/><br />
<br />
====Home====<br />
[[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.]]<br />
<br />
<br />
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 personal activities and objects. From this view, the child may either back up first to their [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Groups|Groups]] &mdash; such as their Friends or their Class &mdash; and beyond that to a view of the entire mesh [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Neighborhood|Neighborhood]], or, instead, zoom in to focus on a particular [[OLPC Human Interface Guidelines/Activities|Activity]].<br />
<br />
The Home view interface is minimalistic. In the center of the screen, the [[OLPC Human Interface Guidelines/The Sugar Interface/Icons|XO icon]]&mdash;rendered in the child's user-specified colors&mdash;represents the child to whom the laptop belongs. The activity ring surrounds the character, indicating all of the 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 [[OLPC Human Interface Guidelines/Activities/Activity Basics#Private Activities|private activities]], ending current activities, and switching between activities.<br />
<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API/sugar.shell.view.home.activitiesdonut|Package sugar.shell.view.home.activitiesdonut]]<br />
|}<br />
<br />
When used in conjunction with the [[OLPC Human Interface Guidelines/The Laptop Experience/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, etc.<br />
<br />
<br clear="all"/><br />
<br />
====Groups====<br />
[[Image:friends.jpg|right|thumb|240px|The Groups view: Members of the currently selected group and their current activities are visible from this view. Hovering over a “missing” XO reveals an "away message."]]<br />
<br />
The Groups view takes a small step back from the child's Home space, opening up to include their circle of friends, their classmates, and any other groups to which a child belongs. The Friends group essentially represents a spatially viewable and editable buddy list. From here the child can add or remove friends and move individuals around, perhaps arranging them logically. The Class group is defined dynamically, and includes all others in the same class, and their teachers as well. This group provides the perfect space for working and sharing with classmates, posting projects for class critique, or for picking up the homework assignment the teacher posted to the class [[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards|Bulletin Board]].<br />
<br />
In addition to several special classes of groups, children may also generate groups on their own. This might provide a way for a close group of friends to keep up with each other's activities, or for a group of aspiring photographers to share photos. In a classroom setting, this provides a way for the children to create temporary groups for working on classroom exercises, or long term groups for extended projects. To create a group, a child can search for or select any number of individuals on the mesh. Each of these individuals will receive an invitation to join the group, and upon accepting the invitation will have its name added to their list of Groups, where they can see and chat with members, and post to the group Bulletin Board. Although one person initially creates a group, groups are not managed. Instead, people may choose to leave a group on their own, and anyone in the group may invite other members into it. When this happens, all current group members receive introduction [[OLPC Human Interface Guidelines/Activities/Activity Basics#Notifications|notification]], making them aware of the new member. This open model simplifies the interaction and encourages the learning of natural social dynamics instead of attempting to enforce them via rules and restrictions.<br />
<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API/sugar.shell.view.home.FriendsBox|Package sugar.shell.view.home.FriendsBox]]<br />
|}<br />
<br />
Groups have several advantages. First, it allows the children to view their friends, classmates, and other groups, and allows them to freely chat with them as well. Additionally, each group will have its own private Bulletin Board where members can post notes and share Objects. Finally, all of the members of the selected group &mdash; a child's friends, for instance &mdash;receive [[OLPC Human Interface Guidelines/Activities/Activity Basics#Invitations|invitations]] whenever the child starts an activity from the Groups view, making collaboration implicit. Moreover, this view allows the child to see what activities their class, friends, and other groups are presently engaged in, providing the opportunity to [[OLPC Human Interface Guidelines/Activities/Activity Basics#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 />
<br />
<br clear="all"/> <!--prevents image pushing title out--><br />
<br />
====Neighborhood====<br />
[[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.]]<br />
<br />
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.<br />
<br />
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 Groups view, launching an activity here implicitly opens that activity up for anyone in the Neighborhood to join. While no one receives an [[OLPC Human Interface Guidelines/Activities/Activity Basics#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 [[OLPC Human Interface Guidelines/Activities/Activity Basics#Joining Activities|join activities]] of interest using a powerful and adaptable [[OLPC Human Interface Guidelines/The Laptop Experience/Global Search|search]] technology, and also interact with and make friends with other children in their neighborhood they haven't yet met.<br />
<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API/sugar.shell.view.home.MeshBox|Package sugar.shell.view.home.MeshBox]]<br />
|}<br />
<br />
<br clear="all"/> <!--prevents image pushing title out--><br />
<br />
====Activity====<br />
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.<br />
<br />
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; second, as noted, it naturally focuses efforts on a specific task. The [[OLPC Human Interface Guidelines/The Laptop Experience/The Frame|Frame]] detailed below serves as the interstitial tissue between activities. As a visual extention of the [[OLPC Human Interface Guidelines/The Laptop Experience/The Journal|Journal]], it enables objects to move between activities.<br />
<br />
For extensive detail on the various aspects of the activity interface and their design guidelines, see the [[OLPC Human Interface Guidelines/Activities|Activities]] section.<br />
<br />
<br />
{{hig-subnav-intra|p_page=Introduction|c_section=The Laptop Experience|c_page=Zoom Metaphor|n_page=The Frame}}<br />
</div></div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Input_Systems&diff=16861Human Interface Guidelines/The Sugar Interface/Input Systems2007-10-01T20:00:51Z<p>24.63.211.133: /* Keyboard Shortcuts */</p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-inter|p_link=Security|p_label=Security|c_section=The Sugar Interface|c_page=Input Systems|n_link=The Sugar Interface/Layout Guidelines|n_label=Layout Guidelines}}<br />
<br />
===Input Systems===<br />
====Keyboard====<br />
<br />
[[Image: keyboard_layout.jpg|thumb|600px|center|The basic laptop keyboard layout.]]<br />
<br />
=====Localized Keyboard Layouts=====<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API|Module: keymapping TBD]]<br />
|}<br />
<br />
* [[:Image:Keyboard_arabic.jpg|Arabic]]<br />
* [[:Image:Keyboard_argentina.jpg|Spanish (Argentinian)]]<br />
* [[:Image:Keyboard_brazil.jpg|Portuguese (Brazilian)]]<br />
* [[:Image:Keyboard_nigeria.jpg|Nigerian]]<br />
* [[:Image:Keyboard_thai.jpg|Thai]]<br />
* [[:Image:Keyboard_layout.jpg|US International]]<br />
<br />
=====Description of Keys=====<br />
<br />
{|border=1 cellpadding=3 cellspacing=3 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#cccccc;"|Key!!style="background:#cccccc;"|Function<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''View Keys'''<br />
|-<br />
|[[Image:Key_zoom.jpg|right]]<br />
|Transitions among [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Neighborhood|Neighborhood]], [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Groups|Groups]], [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Home|Home]], and [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Activity|Activity]] views.<br />
|-<br />
|[[Image:Key_bboard.jpg|right]]<br />
|Toggles visibility of the [[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards|Bulletin Board]] for the current view<br />
|-<br />
|[[Image:Key_frame.jpg|right]]<br />
|Toggles visibility of the [[OLPC Human Interface Guidelines/The Laptop Experience/The Frame|Frame]]<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Hardware Controls'''<br />
|-<br />
|[[Image:Key_search.jpg|right]]<br />
|This key will invoke a Journal search.<br />
|-<br />
|[[Image:Key_brightness-volume.png|right]]<br />
|This slider key functions as controls for both the display backlight (left two buttons) and the speaker volume (right two buttons).<br />
|-<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Special Functions'''<br />
|-<br />
|[[Image:Key_viewsource.png|100px|right]]<br />
|The [[OLPC Human Interface Guidelines/The Laptop Experience/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 and space keys.<br />
|-<br />
|[[Image:Key_grableft.png|right]][[Image:Key_grabright.png|right]]<br />
|Grab Keys are for panning/scrolling; they are used in conjunction with the touchpad.<br />
|-<br />
|[[Image:Key_slider.png|313px|right]]<br />
|The middle of the three large [[OLPC Human Interface Guidelines/The Sugar Interface/Input Systems#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.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Editing Keys'''<br />
|-<br />
|[[Image:Key_enter.jpg|right]]<br />
|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 &ndash; a relationship strengthened by this visual mapping.<br />
|-<br />
|[[Image:Key_esc.jpg|right]]<br />
|The Escape Key has a visual indicator that maps directly to the screen graphics, complementing the Enter Key.<br />
|-<br />
|[[Image:Key_erase.jpg|right]]<br />
|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.)<br />
|-<br />
|[[Image:Key_tab.jpg|right]]<br />
|The Tab Key differs little from those on modern keyboards. Shift-Tab functions as a reverse tab, as visually indicated on the key.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Modifier Keys'''<br />
|-<br />
|[[Image:Key_ctrl.png|68px|right]]<br />
|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 PS/2, and is still widely accepted among many communities.<br />
|-<br />
|[[Image:Key_shift.jpg|right]]<br />
|The Shift Key is used as a modifier for typing capital letters and other "upper" characters.<br />
|-<br />
|[[Image:Key_alt.png|68px|right]]<br />
|The Alt Key is a multipurpose modifier. The Alt Key is typically used to provide a related but alternative functionality (often increased scope) to a Control Key. For example, Ctrl-C is copy; Alt-C is copy and erase.<br />
|-<br />
|[[Image:Altgr.jpg|right]]<br />
|The Alternate Graphics Key (alt gr) is used to select the alternate (additional) characters printed on the right half of the key caps. A common use is the Unicode combining characters used for inserting accent characters. (On some keyboards, there are two separate sets of symbols printed, e.g., Thai, Arabic, Urdu, Ethiopic, etc. In these cases, the Language Key, described below, switches the entire keyboard between languages.)<br />
|-<br />
|[[Image:Key_arabic.jpg|right]][[Image:Key_thai.jpg|right]]<br />
|The Language Key, found on keyboards that have both full Latin and a second alphabet, e.g., Arabic, Thai, Urdu, Ethiopic, etc., is used to toggle the entire keyboard between alphabets.<br />
|-<br />
|[[Image:Key_fn.jpg|right]]<br />
|Fn is the Function Key. It is used to further modify keys; it is used to access the View Source Key; it modifies the arrow keys to home, end, page up, and page down; and it is used to enable the analog slider controls.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Navigation Keys'''<br />
|-<br />
|[[Image:Key_arrows.jpg|right]]<br />
|The standard Arrow Keys &ndash; up, down, left, and right &ndash; also operate as page up, page down, home, and end respectively when used in conjunction with the Fn Key.<br />
|}<br />
<br />
=====Softkey Sliders=====<br />
<br />
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.<br />
<br />
=====Keyboard Shortcuts=====<br />
<br />
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. For a complete list of agreed upon keyboard shortcuts in the Sugar environment, at both system and activity levels, please refer to the [[Keyboard Shortcuts]] page. Following is a high level description of the types of shortcuts the available keys should pertain to.<br />
<br />
* ◆ '''CTRL''' (U+25C6) will be the main modifier key. It will be used to define "base" shortcuts. For instance, ◆A will "select all" in a text editor.<br />
<br />
* ◇ '''ALT''' (U+25C7) should be used for optional modifications (or ALTernates) to base shortcuts. For instance, ◆S will perform a standard "keep" and ◇S could be "keep as...". ◆V is paste, ◇V is "paste and remove from clipboard."<br />
<br />
* ⇧ '''SHIFT''' (U+21E7) can work in two ways. Its primary use would be as an inversion modifier, such that it inverts the meaning of the base shortcut. For instance, ◆Z is undo and ⇧◆Z is redo. ◆TAB is next activity, ⇧◆TAB is previous activity. SHIFT can also be used to create a second set of "base" shortcuts which are less often used.<br />
<br />
The FN key is reserved solely for system level operations, and generally for those that map to functions which are printed on the keyboard itself.<br />
<br />
====Trackpad====<br />
[[Image: Trackpad.png|thumb|320px|left|The dual purpose trackpad supports finger and stylus stimuli.]]<br />
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. <br />
<br />
Only the center region of the trackpad has capacitance, responding to a finger. The entire trackpad responds to a stylus.<br />
<br />
<br />
<br />
=====Trackpad as Mouse=====<br />
The use of the finger on the central trackpad area serves as the primary input device for pointing. Though external [[USB peripherals|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 [[OLPC Human Interface Guidelines/The Sugar Interface/Controls|Controls]] section.<br />
<br />
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.<br />
<br />
=====Trackpad as Graphics Tablet=====<br />
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.<br />
<br />
Details...<br />
<br />
====Microphone and Speakers====<br />
<br />
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.<br />
<br />
Need a section on using sounds in activities; particularly in the background...<br />
<br />
====Camera====<br />
<br />
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.<br />
<br />
==="Hand-held" Mode===<br />
<br />
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.<br />
<br />
====Energy Saving Benefits====<br />
<br />
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 eBook, 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.<br />
<br />
====Implementing Hand-held Controls====<br />
<br />
Unlike a typical tablet PC, the OLPC laptop does not have a touch-sensitive screen. Primary user input comes from two bezel-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).<br />
<br />
=====The Directional Buttons=====<br />
<br />
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.<br />
<br />
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.<br />
<br />
=====The Controller Buttons=====<br />
<br />
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.<br />
<br />
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.<br />
<br />
====Built-in Hardware in Hand-held Mode====<br />
<br />
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.<br />
<br />
====Screen Rotation====<br />
<br />
While in Hand-held mode, the laptops support screen rotation; by pressing a small button on the bezel of the display, the interface will rotate 90 degrees to provide a portrait layout of the currently active activity. Just as any activity can implement Hand-held mode, those which can benefit from a vertical aspect ratio may also implement this feature, and we encourage developers to take advantage of this functionality. The Read activity serves as a prime example of the usefulness of such a feature, since a vertical layout is well suited to displaying a single page from a book. This is just the type of activity one might want to do in Hand-held mode, and by providing two orientations a greater number of use cases can be covered.<br />
<br />
In the current revisions of the laptops, its important to note that the buttons for interacting with Hand-held mode are slightly less accessible when the laptops are held vertically. For this reason, activities that require heavy or frequent use might not be best suited for this mode. However, OLPC is working hard on introducing touch-screen technology in the near future, which will nearly eliminate the dependency on the physical buttons, expanding the possibilities as every activity can take advantage of screen rotation. Therefore, even if screen rotation doesn't make sense for the first version of your activity, please construct your interface in such a way as to allow future adaptation to this new and potentially useful functionality.<br />
<br />
<br />
<br />
{{hig-subnav-inter|p_link=Security|p_label=Security|c_section=The Sugar Interface|c_page=Input Systems|n_link=The Sugar Interface/Layout Guidelines|n_label=Layout Guidelines}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Input_Systems&diff=16860Human Interface Guidelines/The Sugar Interface/Input Systems2007-10-01T19:16:34Z<p>24.63.211.133: /* Keyboard Shortcuts */</p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-inter|p_link=Security|p_label=Security|c_section=The Sugar Interface|c_page=Input Systems|n_link=The Sugar Interface/Layout Guidelines|n_label=Layout Guidelines}}<br />
<br />
===Input Systems===<br />
====Keyboard====<br />
<br />
[[Image: keyboard_layout.jpg|thumb|600px|center|The basic laptop keyboard layout.]]<br />
<br />
=====Localized Keyboard Layouts=====<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API|Module: keymapping TBD]]<br />
|}<br />
<br />
* [[:Image:Keyboard_arabic.jpg|Arabic]]<br />
* [[:Image:Keyboard_argentina.jpg|Spanish (Argentinian)]]<br />
* [[:Image:Keyboard_brazil.jpg|Portuguese (Brazilian)]]<br />
* [[:Image:Keyboard_nigeria.jpg|Nigerian]]<br />
* [[:Image:Keyboard_thai.jpg|Thai]]<br />
* [[:Image:Keyboard_layout.jpg|US International]]<br />
<br />
=====Description of Keys=====<br />
<br />
{|border=1 cellpadding=3 cellspacing=3 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#cccccc;"|Key!!style="background:#cccccc;"|Function<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''View Keys'''<br />
|-<br />
|[[Image:Key_zoom.jpg|right]]<br />
|Transitions among [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Neighborhood|Neighborhood]], [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Groups|Groups]], [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Home|Home]], and [[OLPC Human Interface Guidelines/The Laptop Experience/Zoom Metaphor#Activity|Activity]] views.<br />
|-<br />
|[[Image:Key_bboard.jpg|right]]<br />
|Toggles visibility of the [[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards|Bulletin Board]] for the current view<br />
|-<br />
|[[Image:Key_frame.jpg|right]]<br />
|Toggles visibility of the [[OLPC Human Interface Guidelines/The Laptop Experience/The Frame|Frame]]<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Hardware Controls'''<br />
|-<br />
|[[Image:Key_search.jpg|right]]<br />
|This key will invoke a Journal search.<br />
|-<br />
|[[Image:Key_brightness-volume.png|right]]<br />
|This slider key functions as controls for both the display backlight (left two buttons) and the speaker volume (right two buttons).<br />
|-<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Special Functions'''<br />
|-<br />
|[[Image:Key_viewsource.png|100px|right]]<br />
|The [[OLPC Human Interface Guidelines/The Laptop Experience/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 and space keys.<br />
|-<br />
|[[Image:Key_grableft.png|right]][[Image:Key_grabright.png|right]]<br />
|Grab Keys are for panning/scrolling; they are used in conjunction with the touchpad.<br />
|-<br />
|[[Image:Key_slider.png|313px|right]]<br />
|The middle of the three large [[OLPC Human Interface Guidelines/The Sugar Interface/Input Systems#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.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Editing Keys'''<br />
|-<br />
|[[Image:Key_enter.jpg|right]]<br />
|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 &ndash; a relationship strengthened by this visual mapping.<br />
|-<br />
|[[Image:Key_esc.jpg|right]]<br />
|The Escape Key has a visual indicator that maps directly to the screen graphics, complementing the Enter Key.<br />
|-<br />
|[[Image:Key_erase.jpg|right]]<br />
|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.)<br />
|-<br />
|[[Image:Key_tab.jpg|right]]<br />
|The Tab Key differs little from those on modern keyboards. Shift-Tab functions as a reverse tab, as visually indicated on the key.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Modifier Keys'''<br />
|-<br />
|[[Image:Key_ctrl.png|68px|right]]<br />
|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 PS/2, and is still widely accepted among many communities.<br />
|-<br />
|[[Image:Key_shift.jpg|right]]<br />
|The Shift Key is used as a modifier for typing capital letters and other "upper" characters.<br />
|-<br />
|[[Image:Key_alt.png|68px|right]]<br />
|The Alt Key is a multipurpose modifier. The Alt Key is typically used to provide a related but alternative functionality (often increased scope) to a Control Key. For example, Ctrl-C is copy; Alt-C is copy and erase.<br />
|-<br />
|[[Image:Altgr.jpg|right]]<br />
|The Alternate Graphics Key (alt gr) is used to select the alternate (additional) characters printed on the right half of the key caps. A common use is the Unicode combining characters used for inserting accent characters. (On some keyboards, there are two separate sets of symbols printed, e.g., Thai, Arabic, Urdu, Ethiopic, etc. In these cases, the Language Key, described below, switches the entire keyboard between languages.)<br />
|-<br />
|[[Image:Key_arabic.jpg|right]][[Image:Key_thai.jpg|right]]<br />
|The Language Key, found on keyboards that have both full Latin and a second alphabet, e.g., Arabic, Thai, Urdu, Ethiopic, etc., is used to toggle the entire keyboard between alphabets.<br />
|-<br />
|[[Image:Key_fn.jpg|right]]<br />
|Fn is the Function Key. It is used to further modify keys; it is used to access the View Source Key; it modifies the arrow keys to home, end, page up, and page down; and it is used to enable the analog slider controls.<br />
|-style="background: #e9e9e9;"<br />
|colspan="2"|'''Navigation Keys'''<br />
|-<br />
|[[Image:Key_arrows.jpg|right]]<br />
|The standard Arrow Keys &ndash; up, down, left, and right &ndash; also operate as page up, page down, home, and end respectively when used in conjunction with the Fn Key.<br />
|}<br />
<br />
=====Softkey Sliders=====<br />
<br />
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.<br />
<br />
=====Keyboard Shortcuts=====<br />
<br />
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.<br />
<br />
* ◆ '''CTRL''' (U+25C6) will be the main modifier key. It will be used to define "base" shortcuts. For instance, ◆A will "select all" in a text editor.<br />
<br />
* ◇ '''ALT''' (U+25C7) should be used for optional modifications (or ALTernates) to base shortcuts. For instance, ◆S will perform a standard "keep" and ◇S could be "keep as...". ◆V is paste, ◇V is "paste and remove from clipboard."<br />
<br />
* ⇧ '''SHIFT''' (U+21E7) can work in two ways. Its primary use would be as an inversion modifier, such that it inverts the meaning of the base shortcut. For instance, ◆Z is undo and ⇧◆Z is redo. ◆TAB is next activity, ⇧◆TAB is previous activity. SHIFT can also be used to create a second set of "base" shortcuts which are less often used.<br />
<br />
The FN key is reserved solely for system level operations, and generally for those that map to functions which are printed on the keyboard itself.<br />
<br />
====Trackpad====<br />
[[Image: Trackpad.png|thumb|320px|left|The dual purpose trackpad supports finger and stylus stimuli.]]<br />
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. <br />
<br />
Only the center region of the trackpad has capacitance, responding to a finger. The entire trackpad responds to a stylus.<br />
<br />
<br />
<br />
=====Trackpad as Mouse=====<br />
The use of the finger on the central trackpad area serves as the primary input device for pointing. Though external [[USB peripherals|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 [[OLPC Human Interface Guidelines/The Sugar Interface/Controls|Controls]] section.<br />
<br />
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.<br />
<br />
=====Trackpad as Graphics Tablet=====<br />
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.<br />
<br />
Details...<br />
<br />
====Microphone and Speakers====<br />
<br />
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.<br />
<br />
Need a section on using sounds in activities; particularly in the background...<br />
<br />
====Camera====<br />
<br />
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.<br />
<br />
==="Hand-held" Mode===<br />
<br />
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.<br />
<br />
====Energy Saving Benefits====<br />
<br />
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 eBook, 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.<br />
<br />
====Implementing Hand-held Controls====<br />
<br />
Unlike a typical tablet PC, the OLPC laptop does not have a touch-sensitive screen. Primary user input comes from two bezel-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).<br />
<br />
=====The Directional Buttons=====<br />
<br />
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.<br />
<br />
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.<br />
<br />
=====The Controller Buttons=====<br />
<br />
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.<br />
<br />
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.<br />
<br />
====Built-in Hardware in Hand-held Mode====<br />
<br />
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.<br />
<br />
====Screen Rotation====<br />
<br />
While in Hand-held mode, the laptops support screen rotation; by pressing a small button on the bezel of the display, the interface will rotate 90 degrees to provide a portrait layout of the currently active activity. Just as any activity can implement Hand-held mode, those which can benefit from a vertical aspect ratio may also implement this feature, and we encourage developers to take advantage of this functionality. The Read activity serves as a prime example of the usefulness of such a feature, since a vertical layout is well suited to displaying a single page from a book. This is just the type of activity one might want to do in Hand-held mode, and by providing two orientations a greater number of use cases can be covered.<br />
<br />
In the current revisions of the laptops, its important to note that the buttons for interacting with Hand-held mode are slightly less accessible when the laptops are held vertically. For this reason, activities that require heavy or frequent use might not be best suited for this mode. However, OLPC is working hard on introducing touch-screen technology in the near future, which will nearly eliminate the dependency on the physical buttons, expanding the possibilities as every activity can take advantage of screen rotation. Therefore, even if screen rotation doesn't make sense for the first version of your activity, please construct your interface in such a way as to allow future adaptation to this new and potentially useful functionality.<br />
<br />
<br />
<br />
{{hig-subnav-inter|p_link=Security|p_label=Security|c_section=The Sugar Interface|c_page=Input Systems|n_link=The Sugar Interface/Layout Guidelines|n_label=Layout Guidelines}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/Core_Ideas&diff=15584Human Interface Guidelines/Core Ideas2007-07-24T13:57:11Z<p>24.63.211.133: </p>
<hr />
<div><noinclude><div style="background-color: #F5F5F5;"><br />
{{OLPC}}<br />
{{Translations}}<br />
<br />
<br />
</noinclude><br />
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; border-left:1px solid #888; border-right:1px solid #888; width: 95%;"><br />
{{hig-nav|prev=Introduction|curr=Core Ideas|next=Design Fundamentals}}<br />
<div style="margin: 8px;"><br />
==Core Ideas==<br />
<br />
===Activities, Not Applications===<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API#Sugar_Activity_APIs|Sugar Activity APIs]]<br />
|}<br />
<br />
There are no [http://en.wikipedia.org/wiki/Software_Application software applications] in the traditional sense on the laptop. The laptop focuses children around "[[OLPC Human Interface Guidelines/Activities|activities]]." This is more than a new naming convention; it represents an intrinsic quality of the learning experience we hope the children will have when using the laptop. Activities are distinct from applications in their foci&mdash;collaboration and expression&mdash;and their implementation&mdash;journaling and iteration.<br />
<br />
===Presence is Always Present===<br />
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"<br />
!style="background:#D6784C"|API Reference<br />
|-<br />
|[[Sugar Architecture/API/sugar.presence|Sugar Library Package: sugar.presence]]<br />
|}<br />
<br />
Everyone has the potential for being both a learner and a teacher. We have chosen to put collaboration at the core of the user experience in order to realize this potential. The presence of other members of the learning community will encourage children to take responsibility for others' learning as well as their own. The exchange of ideas amongst peers can both make the learning process more engaging and stimulate critical thinking skills. We hope to encourage these types of social interaction with the laptops.<br />
<br />
In order to facilitate a collaborative learning environment, the laptops employ a mesh network that interconnects all laptops within range. By exploiting this connectivity, every activity has the potential to be a networked activity. We aspire that all activities take advantage of the mesh; any activity that is not mesh-aware should perhaps be rethought in light of connectivity. As an example, consider the web-browsing activity bundled with the laptop distribution. Normally one browses in isolation, perhaps on occasion sending a friend a favorite link. On the laptop, however, a link-sharing feature integrated into the browser activity transforms the solitary act of web-surfing into a group collaboration. Where possible, all activities should embrace the mesh and place strong focus on facilitating such collaborative processes.<br />
<br />
===Tools of Expression===<br />
<br />
Starting from the premise that we want to make use of what people already know in order to make connections to new knowledge, our approach focuses on thinking, expressing, and communicating with technology. The laptop is a "thing to think with"; we hope to make the primary activity of the children one of creative expression, in whatever form that might take. Thus, most activities will focus on the creation of some type of object, be it a drawing, a song, a story, a game, or a program. In another shift in the language used to describe the user experience, we refer to objects rather than files as the primary stuff of creative expression.<br />
<br />
As most software developers would agree, the best way to learn how to write a program is to write one, or perhaps teach someone else how to do so; studying the syntax of the language might be useful, but it doesn't teach one how to code. We hope to apply this principle of "learn through doing" to all types of creation, e.g., we emphasise composing music over downloading music. We also encourage the children to engage in the process of collaborative critique of their expressions and to iterate upon this expression as well.<br />
<br />
The objectification of the traditional filesystem speaks more directly to real-world metaphors: instead of a sound file, we have an actual sound; instead of a text file, a story. In order to support this concept, activity developers may define object types and associated icons to represent them.<br />
<br />
===Journaling===<br />
<br />
The concept of the [[OLPC Human Interface Guidelines/The Laptop Experience#The Journal|Journal]], a written documentation of everyday events, is generally understood, albeit in various forms across cultures. A journal typically chronicles the activities one has done throughout the day. We have chosen to adopt a journal metaphor for the filesystem as our basic approach to file organization. While the underlying implementation of such a filesystem does not differ significantly from some of those in contemporary operating systems, it also holds less importance than the journal abstraction itself.<br />
<br />
At its core, our journal concept embodies the idea that the filesystem records a history of the things a child has done, or, more specifically, the activities a child has participated in. Its function as the store of the objects created while performing those activities is secondary, although also important. The Journal naturally lends itself to a chronological organization (although it can be tagged, searched, and sorted by a variety of means). As a record of things a child has ''done''&mdash;not just the things a child has ''saved''&mdash;the Journal will read much like a portfolio or scrapbook history of the child's interactions with the machine and also with peers. The Journal combines entries explicitly created by the children with those which are implicitly created through participation in activities; developers must think carefully about how an activity integrates with the Journal more so than with a traditional filesystem that functions independently of an application. The activities, the objects, and the means of recording all tightly integrate to create a different kind of computer experience.<br />
<br />
</div>{{hig-nav|prev=Introduction|curr=Core Ideas|next=Design Fundamentals}}</div><br />
<noinclude><br />
<br />
<br />
</div></noinclude></div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Layout_Guidelines&diff=16882Human Interface Guidelines/The Sugar Interface/Layout Guidelines2007-07-24T13:51:27Z<p>24.63.211.133: /* The Grid System */</p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Input Systems|c_section=The Sugar Interface|c_page=Layout Guidelines|n_page=Icons}}<br />
<br />
===Layout Guidelines===<br />
<br />
====The Grid System====<br />
In keeping with the simple, flat visual style of the Sugar interface, we have designed all of the interface elements on a straightforward grid system. The system functions like a basic floorplan which allows interface elements to tile neatly within its boundaries. The grid consists of a 16x12 array of square tiles.<br />
<br />
The diagram below shows the screen dissected into cells. Furthermore, the cells highlighted in blue indicate the areas suitable for activity toolbars. Note the exclusion of the corners, which are reserved for the hot corners which invoke the frame. In order to prevent accidental invocation, no buttons should be placed in these locations. Though all edges of the screen are suitable for placing toolbars, we recommend that the top and left edges of the screen serve as the primary location for them unless circumstances specifically suggest an alternative. Conforming to these guidelines will both make the variety of activities supported on the laptop feel more consistent, and also reserves the right and bottom edges for scroll bars, making navigation (when required) within the primary pane much simpler. Though the grab key provides the primary means for panning, preserving these edges for scroll bars even as visual indicators will increase usability.<br />
<br />
<br />
[[Image:Grid.png]]<br />
<br />
<br />
Considering the screen at its maximum resolution of 1200x900 pixels in luminance mode, each square tile is 75x75 pixels in size. Each cell is comprised of a 5x5 array of 15 pixel subcells. These subcells provide layout guidelines at a finer level of detail. In general, the 3x3 subcell interior region is icon-safe.<br />
<br />
<br />
[[Image:Grid_cell.png]]<br />
<br />
{{hig-subnav-intra|p_page=Input Systems|c_section=The Sugar Interface|c_page=Layout Guidelines|n_page=Icons}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls/Basic_Selection_Controls&diff=16589Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls2007-04-10T23:17:31Z<p>24.63.211.133: </p>
<hr />
<div><noinclude>{{Translations}}</noinclude><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Buttons|p_label=Buttons|c_link=The Sugar Interface/Controls/Basic Selection Controls|c_label=Basic Selection Controls|n_link=The Sugar Interface/Controls/Advanced Selection Controls|n_label=Advanced Selection Controls}}</noinclude><br />
<div style="position: relative; padding-left: 15px;"><br />
<div style="position: absolute; left: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div><br />
<br />
=====Checkboxes=====<br />
[[Image:example_checkbox.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:checkbox.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Radio Buttons=====<br />
[[Image:example_radio.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all>[[Image:radio.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Popup Menus=====<br />
[[Image:example_popup_text.png|right]]<br />
<br><br><br><br>[[Image:example_popup_menu_text.png|right]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:popup_text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'>[[Image:popup_menu_text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Popup Palettes=====<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:popup_palette_icon.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Combo Boxes=====<br />
[[Image:example_combobox.png|right]]<br />
<br><br><br><br>[[Image:example_combobox_suggestions.png|right]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:combobox.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'>[[Image:combobox_suggestions.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
</div><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Buttons|p_label=Buttons|c_link=The Sugar Interface/Controls/Basic Selection Controls|c_label=Basic Selection Controls|n_link=The Sugar Interface/Controls/Advanced Selection Controls|n_label=Advanced Selection Controls}}</noinclude></div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls/Basic_Selection_Controls&diff=16588Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls2007-04-10T23:17:03Z<p>24.63.211.133: </p>
<hr />
<div><noinclude>{{Translations}}</noinclude><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Buttons|p_label=Buttons|c_link=The Sugar Interface/Controls/Basic Selection Controls|c_label=Basic Selection Controls|n_link=The Sugar Interface/Controls/Advanced Selection Controls|n_label=Advanced Selection Controls}}</noinclude><br />
<div style="position: relative; padding-left: 15px;"><br />
<div style="position: absolute; left: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div><br />
<br />
=====Checkboxes=====<br />
[[Image:example_checkbox.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:checkbox.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Radio Buttons=====<br />
[[Image:example_radio.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all>[[Image:radio.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Popup Menus=====<br />
[[Image:example_popup_text.png|right]]<br />
<br><br><br><br>[[Image:example_popup_menu_text.png|right]]<br />
<div style="margin-left: 310px;"'><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:popup_text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'>[[Image:popup_menu_text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Popup Palettes=====<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:popup_palette_icon.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Combo Boxes=====<br />
[[Image:example_combobox.png|right]]<br />
<br><br><br><br>[[Image:example_combobox_suggestions.png|right]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:combobox.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'>[[Image:combobox_suggestions.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
</div><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Buttons|p_label=Buttons|c_link=The Sugar Interface/Controls/Basic Selection Controls|c_label=Basic Selection Controls|n_link=The Sugar Interface/Controls/Advanced Selection Controls|n_label=Advanced Selection Controls}}</noinclude></div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls/Buttons&diff=16622Human Interface Guidelines/The Sugar Interface/Controls/Buttons2007-04-10T23:13:09Z<p>24.63.211.133: </p>
<hr />
<div><noinclude>{{Translations}}</noinclude><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls|p_label=Controls|c_link=The Sugar Interface/Controls/Buttons|c_label=Buttons|n_link=The Sugar Interface/Controls/Basic Selection Controls|n_label=Basic Selection Controls}}</noinclude><br />
<div style="position: relative; padding-left: 15px;"><br />
<div style="position: absolute; left: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div><br />
<br />
=====Text Buttons=====<br />
[[Image:example_button_text.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:''' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
'''Behavior:''' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
'''Guidelines:''' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
<br clear='all'><br />
<noinclude>'''States:'''<br />
<br clear='all'>[[Image:buttons_text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Text with Icon Buttons=====<br />
[[Image:example_button_icon-text.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
<br clear='all'><br />
<noinclude>'''States'''<br />
<br clear='all'>[[Image:buttons_icon-text.png|thumb|right|400px|Click for detailed control specifications]]<br />
<br clear='all'><br />
</noinclude><br />
</div><br />
<br />
=====Icon Buttons=====<br />
[[Image:example_button_icon.png|left]]<br />
<div style="margin-left: 310px;"><br />
'''Usage:'''<br />
<br />
'''Behavior:'''<br />
<br />
'''Guidelines:'''<br />
<br />
</div><br />
<br />
=====Toggle Buttons=====<br />
<br />
<br />
=====Palette Buttons=====<br />
</div><br />
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls|p_label=Controls|c_link=The Sugar Interface/Controls/Buttons|c_label=Buttons|n_link=The Sugar Interface/Controls/Basic Selection Controls|n_label=Basic Selection Controls}}</noinclude></div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls&diff=16537Human Interface Guidelines/The Sugar Interface/Controls2007-04-10T23:10:06Z<p>24.63.211.133: </p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}<br />
<br />
===Controls===<br />
<br />
Sugar defines its own set of control widgets that will create the user interface on the laptops. Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines. With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.<br />
<br />
As the control widget specification and guidelines compose a substantial portion of this document, internal page by page navigation is available by clicking on the header for any control set. In addition, the individual pages provide detailed specifications for the widgets and their various states. Finally, we're providing developers with an Adobe Illustrator file of the most up to date [[Media:sugar_control_spec.ai.zip|Sugar Control Specification (07.04.05)]] in order streamline early application layout and design mockups. Please understand these specifications and their implementations remain in early development, and their designs may change as the UI progresses. We'll provide links to APIs for the controls as they become available; Thanks for your patience.<br />
<br />
====Control Regions====<br />
<br />
In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed. Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color. Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.<br />
<br />
[[Image:control_regions.jpg|right|500px|Basic control regions]]<br />
<br />
'''Canvas:''' The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.<br />
<br />
'''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified. <br />
<br />
'''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.<br />
<br />
'''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.<br />
<br />
'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.<br />
<br />
<div style="position: relative"><br />
<div style="position: absolute; left: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div><br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Buttons|Buttons]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Buttons}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls|Basic Selection Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Advanced Selection Controls|Advanced Selection Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Advanced Selection Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Adjustment Controls|Adjustment Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Adjustment Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Indicators|Indicators]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Indicators}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Text Controls|Text Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Text Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/View Controls|View Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/View Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Grouping Controls|Grouping Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Grouping Controls}}<br />
<br />
====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls|Custom Controls]]====<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls}}<br />
</div><br />
<br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls&diff=16526Human Interface Guidelines/The Sugar Interface/Controls2007-04-05T23:47:16Z<p>24.63.211.133: </p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}<br />
<br />
===Controls===<br />
<br />
Sugar defines its own set of control widgets that will create the user interface on the laptops. Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines. With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.<br />
<br />
====Control Regions====<br />
<br />
In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed. Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color. Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.<br />
<br />
[[Image:control_regions.jpg|right|500px|Basic control regions]]<br />
<br />
'''Canvas:''' The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.<br />
<br />
'''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified. <br />
<br />
'''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.<br />
<br />
'''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.<br />
<br />
'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.<br />
<br />
{{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Buttons}}<br />
<br />
====Basic Selection controls====<br />
=====Checkboxes=====<br />
[[Image:checkbox.png]]<br />
<br />
<br />
=====Radio Buttons=====<br />
[[Image:radio.png]]<br />
<br />
<br />
=====Popup Lists=====<br />
[[Image:popup_text.png]]<br />
[[Image:popup_menu_text.png]]<br />
<br />
<br />
[[Image:popup_menu_icon-text.png]]<br />
<br />
<br />
[[Image:popup_icon.png]]<br />
[[Image:popup_palette_icon.png]]<br />
<br />
<br />
=====Combination Popup Lists=====<br />
[[Image:combobox.png]]<br />
<br />
<br />
====Advanced Selection Controls====<br />
=====Color Picker=====<br />
<br />
<br />
=====Date Picker=====<br />
<br />
<br />
=====Object Picker=====<br />
<br />
<br />
=====Find Palette=====<br />
<br />
<br />
<br />
====Adjustment Controls====<br />
=====Steppers=====<br />
[[Image:stepper.png]]<br />
<br />
<br />
=====Sliders=====<br />
[[Image:sliders.png]]<br />
<br />
<br />
[[Image:sliders_indication.png]]<br />
<br />
<br />
[[Image:sliders_color.png]]<br />
<br />
====Indicator Controls====<br />
=====Determinate Progress Indicator=====<br />
[[Image:progress_determinate.png]]<br />
<br />
<br />
=====Indeterminate Progress Indicators=====<br />
[[Image:progress_indeterminate.png]]<br />
<br />
<br />
=====Level Indicators=====<br />
[[Image:indicator_level.png]]<br />
<br />
<br />
=====Rating Indicators=====<br />
<br />
<br />
=====Relevance Indicators=====<br />
<br />
====Text Controls====<br />
=====Text Fields=====<br />
[[Image:textfield.png]]<br />
<br />
<br />
=====Tokenized Text Fields=====<br />
[[Image:textfield_suggestions.png]]<br />
[[Image:textfield_tokenized.png]]<br />
<br />
<br />
=====Search Fields=====<br />
[[Image:searchfield.png]]<br />
[[Image:searchfield_suggestions.png]]<br />
<br />
<br />
=====Password Fields=====<br />
[[Image:passwordfield.png]]<br />
<br />
<br />
=====Multiline Text Fields=====<br />
[[Image:textfield_multiline.png]]<br />
[[Image:textfield_multiline_non-edit.png]]<br />
[[Image:textfield_multiline_edit.png]]<br />
[[Image:textfield_multiline_scrollbars.png]]<br />
<br />
====Separator Controls====<br />
=====Horizontal Rule=====<br />
=====Vertical Rule=====<br />
=====Logical Grouping=====<br />
<br />
<br />
<br />
====View Controls====<br />
=====Basic Sort Bar=====<br />
<br />
<br />
=====Advanced Sort Bar=====<br />
<br />
<br />
=====Sort Bar View Toggle=====<br />
<br />
<br />
=====Tab Bar=====<br />
<br />
<br />
=====Tab Sidebar=====<br />
<br />
<br />
=====Disclosure Triangles=====<br />
<br />
<br />
<br />
====Grouping Controls====<br />
=====Separators=====<br />
<br />
<br />
=====Trays=====<br />
<br />
<br />
<br />
====Custom Controls====<br />
=====When to Use Custom Controls=====<br />
<br />
<br />
=====Custom Colors=====<br />
<br />
<br />
=====Control Sizing=====<br />
<br />
<br />
<br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls/Buttons&diff=16595Human Interface Guidelines/The Sugar Interface/Controls/Buttons2007-04-05T23:43:37Z<p>24.63.211.133: </p>
<hr />
<div>===Buttons===<br />
====Text Buttons====<br />
<noinclude>[[Image:buttons_text.png]]</noinclude><br />
<br />
<br />
====Text with Icon Buttons====<br />
<noinclude>[[Image:buttons_icon-text.png]]</noinclude><br />
<br />
<br />
====Icon Buttons====<br />
<br />
<br />
====Toggle Buttons====</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls&diff=16521Human Interface Guidelines/The Sugar Interface/Controls2007-04-05T19:43:38Z<p>24.63.211.133: </p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}<br />
<br />
===Controls===<br />
<br />
Sugar defines its own set of control widgets that will create the user interface on the laptops. Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines. With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.<br />
<br />
====Control Regions====<br />
<br />
In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed. Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color. Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.<br />
<br />
[[Image:control_regions.jpg|right|500px|Basic control regions]]<br />
<br />
'''Canvas:''' The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.<br />
<br />
'''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified. <br />
<br />
'''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.<br />
<br />
'''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.<br />
<br />
'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.<br />
<br />
====Buttons====<br />
=====Text Buttons=====<br />
=====Text with Icon Buttons=====<br />
=====Icon Buttons=====<br />
=====Toggle Buttons=====<br />
<br />
<br />
====Basic Selection controls====<br />
=====Checkboxes=====<br />
=====Radio Buttons=====<br />
=====Popup Lists=====<br />
=====Combination Popup Lists=====<br />
=====Tokenized Combination Popup Lists=====<br />
<br />
====Advanced Selection Controls====<br />
=====Color Picker=====<br />
=====Date Picker=====<br />
=====Object Picker=====<br />
=====Find Palette=====<br />
<br />
====Adjustment Controls====<br />
=====Steppers=====<br />
=====Sliders=====<br />
<br />
====Indicator Controls====<br />
=====Determinate Progress Indicator=====<br />
=====Indeterminate Progress Indicators=====<br />
=====spinners=====<br />
=====Level Indicators=====<br />
=====Rating Indicators=====<br />
=====Relevance Indicators=====<br />
<br />
====Text Controls====<br />
=====Text Fields=====<br />
=====Tokenized Text Fields=====<br />
=====Search Fields=====<br />
=====Password Fields=====<br />
=====Multiline Text Fields=====<br />
<br />
====Separator Controls====<br />
=====Horizontal Rule=====<br />
=====Vertical Rule=====<br />
=====Logical Grouping=====<br />
<br />
====View Controls====<br />
=====Basic Sort Bar=====<br />
=====Advanced Sort Bar=====<br />
=====Sort Bar View Toggle=====<br />
=====Tab Bar=====<br />
=====Tab Sidebar=====<br />
=====Disclosure Triangles=====<br />
<br />
====Grouping Controls====<br />
=====Separators=====<br />
=====Trays=====<br />
<br />
====Custom Controls====<br />
=====When to Use Custom Controls=====<br />
=====Custom Colors=====<br />
=====Control Sizing=====<br />
<br />
====Toolbars====<br />
<br />
====Rollovers and Palettes====<br />
<br />
<br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls&diff=16520Human Interface Guidelines/The Sugar Interface/Controls2007-04-05T19:42:30Z<p>24.63.211.133: /* Controls */</p>
<hr />
<div><div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
<noinclude>{{Translations}}</noinclude><br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}<br />
<br />
===Controls===<br />
<br />
Sugar defines its own set of control widgets that will create the user interface on the laptops. Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines. With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.<br />
<br />
====Control Regions====<br />
<br />
In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed. Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color. Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.<br />
<br />
[[Image:control_regions.jpg|right|500px|Basic control regions]]<br />
<br />
'''Canvas:''' The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.<br />
<br />
'''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified. <br />
<br />
'''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.<br />
<br />
'''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.<br />
<br />
'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.<br />
<br />
====Buttons====<br />
=====Text Buttons=====<br />
=====Text with Icon Buttons=====<br />
=====Icon Buttons=====<br />
=====Toggle Buttons=====<br />
<br />
<br />
====Basic Selection controls====<br />
=====Checkboxes=====<br />
=====Radio Buttons=====<br />
=====Popup Lists=====<br />
=====Combination Popup Lists=====<br />
=====Tokenized Combination Popup Lists=====<br />
<br />
=====Advanced Selection Controls=====<br />
=====Color Picker=====<br />
=====Date Picker=====<br />
=====Object Picker=====<br />
=====Find Palette=====<br />
<br />
====Adjustment Controls====<br />
=====Steppers=====<br />
=====Sliders=====<br />
<br />
====Indicator Controls====<br />
=====Determinate Progress Indicator=====<br />
=====Indeterminate Progress Indicators=====<br />
=====spinners=====<br />
=====Level Indicators=====<br />
=====Rating Indicators=====<br />
=====Relevance Indicators=====<br />
<br />
====Text Controls====<br />
=====Text Fields=====<br />
=====Tokenized Text Fields=====<br />
=====Search Fields=====<br />
=====Password Fields=====<br />
=====Multiline Text Fields=====<br />
<br />
====Separator Controls====<br />
=====Horizontal Rule=====<br />
=====Vertical Rule=====<br />
=====Logical Grouping=====<br />
<br />
====View Controls====<br />
=====Basic Sort Bar=====<br />
=====Advanced Sort Bar=====<br />
=====Sort Bar View Toggle=====<br />
=====Tab Bar=====<br />
=====Tab Sidebar=====<br />
=====Disclosure Triangles=====<br />
<br />
====Grouping Controls====<br />
=====Separators=====<br />
=====Trays=====<br />
<br />
====Custom Controls====<br />
=====When to Use Custom Controls=====<br />
=====Custom Colors=====<br />
=====Control Sizing=====<br />
<br />
====Toolbars====<br />
<br />
====Rollovers and Palettes====<br />
<br />
<br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}</div>24.63.211.133https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface/Controls&diff=16517Human Interface Guidelines/The Sugar Interface/Controls2007-04-05T17:36:59Z<p>24.63.211.133: /* Control Regions */</p>
<hr />
<div><noinclude>{{Translations}}</noinclude><br />
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"><br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}<br />
<br />
===Controls===<br />
<br />
Sugar defines its own set of control widgets that will create the user interface on the laptops. Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines. With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.<br />
<br />
====Control Regions====<br />
<br />
In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed. Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color. Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.<br />
<br />
[[Image:control_regions.jpg|right|250px|Basic control regions]]<br />
<br />
'''Canvas:''' The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.<br />
<br />
'''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified. <br />
<br />
'''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.<br />
<br />
'''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.<br />
<br />
'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.<br />
<br />
====Buttons====<br />
=====Text Buttons=====<br />
=====Text with Icon Buttons=====<br />
=====Icon Buttons=====<br />
<br />
====Selection controls====<br />
=====Checkboxes=====<br />
=====Segmented Controls=====<br />
=====Popup Lists=====<br />
=====Combination Popup Lists=====<br />
=====Tokenized Combination Popup Lists=====<br />
=====Color Picker=====<br />
=====Drop Targets=====<br />
<br />
====Adjustment Controls====<br />
=====Steppers=====<br />
=====Sliders=====<br />
<br />
====Indicator Controls====<br />
=====Determinate Progress Indicator=====<br />
=====Indeterminate Progress Indicators=====<br />
=====Level Indicators=====<br />
=====Rating Indicators=====<br />
<br />
====Text Controls====<br />
=====Static Text Fields=====<br />
=====Input Field=====<br />
=====Tokenized Input Field=====<br />
=====Search Fields=====<br />
<br />
====Separator Controls====<br />
=====Horizontal Rule=====<br />
=====Vertical Rule=====<br />
=====Logical Grouping=====<br />
<br />
====Custom Controls====<br />
=====When to Use Custom Controls=====<br />
=====Custom Colors=====<br />
=====Control Sizing=====<br />
<br />
====Toolbars====<br />
<br />
====Rollovers and Palettes====<br />
<br />
<br />
{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}</div>24.63.211.133