Difference between revisions of "Design Team/Designs/Frame"

From Sugar Labs
Jump to navigation Jump to search
(reference HIG Frame page)
 
(21 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 +
 +
This page adds design updates to the Sugar Frame.
 +
 +
See this Human Interface Guidelines page for [[Human_Interface_Guidelines/The_Laptop_Experience/The_Frame|the Frame]] for more background.
  
 
====01====
 
====01====
Line 83: Line 87:
 
[[Image:Frame-12.jpeg | thumb | center | 640px |  
 
[[Image:Frame-12.jpeg | thumb | center | 640px |  
  
−
The new arrangement of icons within the Frame associate each edge with a particular corner.  This goes hand in hand with the notification system, which takes advantage of the corners of the screen to provide meaningful yet unobtrusive alerts.  These may occur, for instance, when a new invitation arrives, when people join or leave the current activity, when the battery is low, or when clippings are created.
+
The new arrangement of icons within the Frame associates each edge with a particular corner of the screen.  This goes hand in hand with the notification system, which takes advantage of the corners of the screen to provide meaningful yet unobtrusive alerts.  These may occur, for instance, when a new invitation arrives, when people join or leave the current activity, when the battery is low, or when clippings are created.
 
]]
 
]]
  
Line 97: Line 101:
 
[[Image:Frame-14.jpeg | thumb | center | 640px |  
 
[[Image:Frame-14.jpeg | thumb | center | 640px |  
  
−
Should a child miss or ignore a notification when it arrives, they can later find it within the Frame itself.  Notifications disappear by sliding off screen and implicitly into the frame to reinforce this concept.
+
Should a child miss or ignore a notification when it arrives, she may later find it within the Frame itself.  Notifications "disappear" after a few seconds by sliding off screen and implicitly into the frame to reinforce this concept.
 
]]
 
]]
  
Line 111: Line 115:
 
[[Image:Frame-16.jpeg | thumb | center | 640px |  
 
[[Image:Frame-16.jpeg | thumb | center | 640px |  
  
−
Instead of copying an image to the clipboard, on the other hand, the child may drag it directly onto their Journal to keep it permanently. They might likewise drag an image onto a Write document to embed it.
+
Instead of copying an image to the clipboard, on the other hand, a child may drag it directly onto her Journal to keep it permanently. She might likewise drag an image onto a Write document to embed it.
 
]]
 
]]
  
Line 118: Line 122:
 
[[Image:Frame-17.jpeg | thumb | center | 640px |  
 
[[Image:Frame-17.jpeg | thumb | center | 640px |  
  
−
As external storage devices also reside in the Frame, it's possible to copy files from the Journal or an activity directly onto them.
+
As external storage devices also reside in the Frame, it's possible to copy files from the Journal or an activity directly to them.
 
]]
 
]]
  
Line 125: Line 129:
 
[[Image:Frame-18.jpeg | thumb | center | 640px |  
 
[[Image:Frame-18.jpeg | thumb | center | 640px |  
  
−
From the Groups and Neighborhood views a child can invite another to their current activity by dropping them onto the "people edge" of the Frame.  Alternatively, they could drag an XO from the edge into their friends group to make a friend.
+
From the Groups and Neighborhood views a child can invite another to her current activity by dropping them onto the "people edge" of the Frame.  Alternatively, she could drag an XO from the edge into her Friends group to make a friend.
 
]]
 
]]
  
Line 132: Line 136:
 
[[Image:Frame-19.jpeg | thumb | center | 640px |  
 
[[Image:Frame-19.jpeg | thumb | center | 640px |  
  
−
A child could also drag an XO directly onto a running activity to invite them to participate in it.  Alternatively, dragging an activity icon into the Groups or Neighborhood views will share the activity with the appropriate scope.
+
A child could also drag an XO directly onto a running activity to invite them to participate in it.  Additionally, dragging activities between the Frame and a given view will join or share them with the appropriate scope when dragging to and from the Frame, respectively.
 
]]
 
]]
  
  
 +
==Proposals==
  
 +
[[Design Team/Proposals/Frame]]
  
  
  
−
 
+
[[Category:Design]]
  
  

Latest revision as of 11:54, 3 May 2012


This page adds design updates to the Sugar Frame.

See this Human Interface Guidelines page for the Frame for more background.

01

back | next

The Frame surrounds the viewable screen area, remaining just out of sight until activated. This persistent UI element provides useful functionality and information across activities and zoom levels, including info about people in a collaboration, places and activities, objects on the clipboard, and both internal and external devices.

02

back | next

The top edge of the Frame represents the list of "places" available in the UI. These include the four zoom levels as well as all of the currently running activities. This makes the Frame a visual activity switcher, and a nice complement to the standard ALT-TAB behavior.


03

back | next

The Journal, too, finds its home amidst the rest of the activities, providing a quick way for a child to delve into the history of objects they have created to resume work on one, or to copy one into another, etc.

04

back | next

The right edge of the Frame reveals all of the people, represented by their XOs, who share in the collaboration for the child's current activity. Those represented as outlines have been invited, but have yet to accept or decline the invitation. Their palettes offer biographical info about the children, as well as a number of ways to interact with them, making it simple to find out more about new people and make new friends for future collaborations.

05

back | next

The left edge of the Frame serves as a visual clipboard. As a child copies objects, they land on top of the clipboard "stack", with a number of recent clippings remaining available for use. Their palettes reveal a preview of the image, text, or object when available, providing more feedback and encouraging kids to cut, copy, paste, and otherwise manipulate data across activities.

06

back | next

The bottom edge of the frame holds all of the built-in and attached devices, which offer status information as well as a means for the child to interact with them from anywhere. One of the most important, perhaps, is the battery, which clearly indicates its level of charge and whether or not it is presently draining or charging.

07

back | next

Children can adjust their global volume settings directly from the speaker icon.

08

back | next

The camera and microphone icons appear in the Frame anytime an activity (or the OS itself) wishes to make use of them. Their presence here provides a global switch for each, allowing the child to mute a conversation or hide her video stream as necessary, for privacy.

09

back | next

The mesh, treated as a device capability, may be turned on and off at any time. The palette also provides a simple interface for changing the current channel, when necessary.

10

back | next

A child's current wireless connection — to a school server or other access point — also appears in the device tray when the child is connected. It represents current signal strength and provides a quick way for the child to disconnect.

11

back | next

External devices, such as those for storage, also appear here. When appropriate, a visual representation of the available space on a device is clearly shown, next to several actions for interacting with it.

12

back | next

The new arrangement of icons within the Frame associates each edge with a particular corner of the screen. This goes hand in hand with the notification system, which takes advantage of the corners of the screen to provide meaningful yet unobtrusive alerts. These may occur, for instance, when a new invitation arrives, when people join or leave the current activity, when the battery is low, or when clippings are created.

13

back | next

When a notification appears it will pulse briefly to catch the attention of the child, and will remain in the corner for several seconds thereafter. If the child wishes, they may reveal the notification by moving to the appropriate corner and clicking on its icon. The palette revealed will contain any necessary alert information and the actions, if any exist, to take. An invitation, shown as a "card" bearing the icon of the activity and the colors of the inviter, may be joined, declined, or shown within the mesh view for further information.

14

back | next

Should a child miss or ignore a notification when it arrives, she may later find it within the Frame itself. Notifications "disappear" after a few seconds by sliding off screen and implicitly into the frame to reinforce this concept.

15

back | next

Always available, the Frame provides a host of useful drag'n'drop operations for accomplishing a variety of tasks. For instance, a child may copy an image from the browser by dragging it directly onto the clipboard area.

16

back | next

Instead of copying an image to the clipboard, on the other hand, a child may drag it directly onto her Journal to keep it permanently. She might likewise drag an image onto a Write document to embed it.

17

back | next

As external storage devices also reside in the Frame, it's possible to copy files from the Journal or an activity directly to them.

18

back | next

From the Groups and Neighborhood views a child can invite another to her current activity by dropping them onto the "people edge" of the Frame. Alternatively, she could drag an XO from the edge into her Friends group to make a friend.

19

back | next

A child could also drag an XO directly onto a running activity to invite them to participate in it. Additionally, dragging activities between the Frame and a given view will join or share them with the appropriate scope when dragging to and from the Frame, respectively.


Proposals

Design Team/Proposals/Frame







 

Retrieved from "https://wiki.sugarlabs.org/index.php?title=Design_Team/Designs/Frame&oldid=78073"