Changes between Version 70 and Version 71 of InteractionAndGraphicsDesign
- Timestamp:
- 06/02/09 14:36:08 (16 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
InteractionAndGraphicsDesign
v70 v71 18 18 Basic questions that need to be worked out: 19 19 20 * [dev]Drag and drop interaction can be found here [wiki:GlobalSpecification/DragNDrop]. Currently it is being refactored. Groups with elements (objects) that behave the same will be introduced in order to be able to describe each element behaviour and to have consistancy.21 * [shift][dev]Number of halos on frames: ideally, there would be a balance between easily accessible functionality & less potential for confusion.20 * Drag and drop interaction can be found here [wiki:GlobalSpecification/DragNDrop]. Currently it is being refactored. Groups with elements (objects) that behave the same will be introduced in order to be able to describe each element behaviour and to have consistancy. 21 * Number of halos on frames: ideally, there would be a balance between easily accessible functionality & less potential for confusion. 22 22 === 1.3. Common elements === 23 23 * Flaps 24 24 * For organizing the functionalities, we will use flaps. Flaps are parts of the layout. 25 * Currently considered are the left and the right flap. ''Bottom flap is proposed for timeline editing.''25 * Currently considered are the left and the right flap. [dev]''Bottom flap is proposed for timeline editing.'' 26 26 * I think we're in basic agreement that things used to create books (resources, frames, etc) appear in the right flap, while things related to the structure of the book (page thumbnails, list of books) appear on the left side. 27 * We should hammer down exactly what the tabs are and what they are for - Sophie 1 had tabs with the vague names "tools", "library", "resources" which proved to be confusing.27 * [dev]We should hammer down exactly what the tabs are and what they are for - Sophie 1 had tabs with the vague names "tools", "library", "resources" which proved to be confusing. 28 28 * Flaps contain palettes. 29 * [shift]''Graphics Design''29 * ''Graphics Design'' 30 30 * Palettes 31 31 * Palettes look like windows and are attached to tabs. … … 33 33 * Controls 34 34 * List - a lot of palettes in Sophie contain list control. List contains list items. List items are selectable and draggable. 35 * [shift]''Grapics Design''35 * ''Grapics Design'' 36 36 * ''List items - we should have several types of them - Text, text with icon, thumbnail with text'' 37 * [shift]''Interaction Design''38 * ''List items - will all of them be draggable? For example, the plugin configuration palette, list items should not be dragged to the page work area. How should we show this to the user?''39 * Examples of list palettes 37 * ''Interaction Design'' 38 * [dev]List items - will all of them be draggable? For example, the plugin configuration palette, list items should not be dragged to the page work area. How should we show this to the user? 39 * Examples of list palettes [an][dev] ''Obsolete?'' 40 40 * Page Preview palette - Shows thumbnails of the pages. List items are draggable. Do we need text (page number) in the list? The idea about showing that the page has flow frames is great, but does not cover all the cases (the frame can be chained with another frame on previous page for example). There should be one row for each page thumbnail. 41 41 * Configuration palette - Presents plugins as a list with buttons for configuration and about box. ''Can be with icons for each plugin. What size?'' 42 42 * Embedded Books Palette - shows books, that are embedded in this book. 43 43 * Opened Books Palette - shows currently opened books. 44 * [ shift]''Buttons - How will we approach buttons? We can do them inside the list (for list palettes), but it won't allow multiple selection manipulation, or we should think of good way to do it. See attached images attachment:ListPalette.png attachment:ListPalette2.png''44 * [dev]''Buttons - How will we approach buttons? We can do them inside the list (for list palettes), but it won't allow multiple selection manipulation, or we should think of good way to do it. See attached images attachment:ListPalette.png attachment:ListPalette2.png'' 45 45 * Meta - meta palettes will be used for displaying text and other information. Meta palettes should contain editable and non-editable fields. 46 46 * ''Graphics Design - we currently have a realization of the palettes, see attached image'' … … 48 48 * Menus hold functionalities that cannot be triggered elsewhere, functionalities that can be accessed only by mouse (drag and drop) or keyboard shortcuts. 49 49 * Menu items can only be clicked. 50 * [shift]''Graphics Design - we can use the operating system menu styles, but it may be inconsistant with the look and feel of the application. Windows users may feel more comfortable (not sure about Mac users). We can also use icons and text for the menu items. Currently existing menu items are listed [wiki:SandBox/deyan/InteractionGraphicsDesign/Menus here]''50 * [shift]''Graphics Design - we can use the operating system menu styles, but it may be inconsistant with the look and feel of the application. Windows users may feel more comfortable (not sure about Mac users). We can also use icons and text for the menu items. Currently existing menu items are listed below'' 51 51 * Halos and HUDs - Halos are little icons that trigger different functionality. Currently considered are two types of halos 52 52 * [dev]Clickable halos - most of the halos are clickable. The behavior that is currently accepted is that clickable halos invoke HUDs. What about delete frame halo? 53 * [dev]Draggable halos - halos that should be clicked on and dragged to trigger their functionality. Currently considered are Move , Resize and Rotate halos. Their functionality is overlapped with the position halo and HUD. Is the idea of having 8 points for resize of frames good? What about the move halo?Can we say that draggable halos will be one color, green for example?53 * [dev]Draggable halos - halos that should be clicked on and dragged to trigger their functionality. Currently considered are Move and Rotate halos. Their functionality is overlapped with the position halo and HUD. Size is changed via dragging the frame's border. Can we say that draggable halos will be one color, green for example? 54 54 [[Image(imageframe.jpg)]] 55 * [shift]''Graphics Design''55 * ''Graphics Design'' 56 56 * We need to show somehow hint the user which halos are draggable and which are clickable. 57 57 * One thing that would be extremely useful would be easily understood icons for the halos. These were vague at best in Sophie 1; this could be improved tremendously. This is connected to the arrangement of what's in each HUD; we can't have clear icons for halos if the HUDs contain a large variety of functionality. 58 58 * Floating dialogues 59 * Some functionality in Sophie 2 is going to be in floating dialogue boxes - when the user presses control/command-F, for example, a window will pop up asking what you want to search for, like in other applications. This isn't how this was done in Sophie 1 (that was in the palettes); it would be useful to see how this could look.59 * [milo]Some functionality in Sophie 2 is going to be in floating dialogue boxes - when the user presses control/command-F, for example, a window will pop up asking what you want to search for, like in other applications. This isn't how this was done in Sophie 1 (that was in the palettes); it would be useful to see how this could look. 60 60 * Tooltips 61 61 * Graphics and Interaction design - tooltips appear when mouse is over an element for fixed amount of time and disappear on mouse leave. … … 86 86 * '''Interactions Design''' 87 87 * ConfigTab [[BR]] 88 * '''Description''' This tab contains the palettes showing what plugins Sophie is using. It's worth noting that these palettes are not going to be important to most users when making books; maybe this functionality could be hidden in a floating window called from the menu bars rather than appearing in a palette?[[BR]] 89 * '''Description''' 88 * '''Description''' [dev]This tab contains the palettes showing what plugins Sophie is using. It's worth noting that these palettes are not going to be important to most users when making books; maybe this functionality could be hidden in a floating window called from the menu bars rather than appearing in a palette?[[BR]] 90 89 * '''Graphics Design''' 91 90 * PluginsPalette [[BR]] … … 95 94 * PluginAboutPalette [[BR]] 96 95 * '''Description''' This palette shows information about the plugin selected in the PluginsPalette .[[BR]] 97 * '''Graphic Design''' This palette displays metadata; for now, it's a paragraph of text. This plugin needs to be near the PluginsPalette to be comprehensible; these two palettes could possibly be combined?[[BR]]96 * '''Graphic Design''' [dev] This palette displays metadata; for now, it's a paragraph of text. This plugin needs to be near the PluginsPalette to be comprehensible; these two palettes could possibly be combined?[[BR]] 98 97 * '''Interaction Design''' Each plugin should have an "enable" and "disable" button. Not all plugins can be enabled or disabled; some are necessary.[[BR]] 99 98 * BooksTab 100 99 * '''Description''' This tab contains palettes having to do with book management. Much of this functionality is duplicated by the book tab bar at the top of the application window.[[BR]] 101 100 * '''Graphics Design''' [[Image(source:trunk/sophie2-platform/doc/spec-diagrams/BooksTab.png, 50%)]] [[BR]] 102 * OpenBooksPalette - Shows currently opened books. The active book should be marked somehow[[BR]]101 * [dev]OpenBooksPalette - Shows currently opened books. The active book should be marked somehow. Do we need this? [[BR]] 103 102 * '''Description''' This palette lists all currently open books in Sophie. This palette does duplicate the functionality of book the Windows menu (which lists all books) and the book tab bar, which shows all open books. [[BR]] 104 103 * '''Graphic Design''' This is a simple list palette; it would be useful if it showed metadata for open books (preview, number of pages, size). If this were changed from a list palette to a tree palette, it could show embedded books as well & integrate the functionality of the embedded books palette.[[BR]] … … 113 112 * '''Description''' The page preview palette shows thumbnails of all the pages in the book.[[BR]] 114 113 * '''Graphic Design''' [[Image(source:trunk/sophie2-platform/doc/spec-diagrams/PagePalette.png, 50%)]] The page preview palette should show the page in thumbnail; the thumbnail should be resizable. Each page should also have a page number next to it.[[BR]] 115 * ![5][shift]'''Interaction Design''' Clicking on a page selects that page and goes to that page in the book. In Sophie 1, page templates were dragged from the page template palette to the pages to apply page templates; if pages were multiply selected, dragging a page template to one of the selected pages will apply the page template to all selected pages. Pages could be inclusively selected by shift-clicking, or multiply selected by control-clicking. In Sophie 1, new pages were added to the book by dragging a page template between existing pages or before the first page or after the last page. This could be done in a different way.[[BR]]114 * '''Interaction Design''' Clicking on a page selects that page and goes to that page in the book. In Sophie 1, page templates were dragged from the page template palette to the pages to apply page templates; if pages were multiply selected, dragging a page template to one of the selected pages will apply the page template to all selected pages. Pages could be inclusively selected by shift-clicking, or multiply selected by control-clicking. In Sophie 1, new pages were added to the book by dragging a page template between existing pages or before the first page or after the last page. This could be done in a different way.[[BR]] 116 115 * ''PageStructurePalette'' [[BR]] 117 * '''Description''' The page structure palette displays a tree of every object on the page as well as the page template being used. Controls allow moving objects from the page to the page template and vice versa, as well as saving the current page as a page template. Checkboxes allow controlling the visibility of objects on the page. Selecting an object in the page structure palette's tree selects the object on the page and vice versa.[[BR]]116 * '''Description''' [dev]The page structure palette displays a tree of every object on the page as well as the page template being used. Controls allow moving objects from the page to the page template and vice versa, as well as saving the current page as a page template. Checkboxes allow controlling the visibility of objects on the page. Selecting an object in the page structure palette's tree selects the object on the page and vice versa.[[BR]] 118 117 * '''Graphic Design''' This is a variation of the list palette, the tree palette. This palette makes the hierarchy of objects comprehensible to the user; it displays the z-order of the objects and which are on the page template and which are not. There is a lot of information crammed into a small space here; this needs to elegantly represent what's on the page.[[BR]] 119 118 * '''Interaction Design''' Selecting an object brings up options: whether to move it to the page template or not, whether to make it invisible. This needs to be done better than it was in Sophie 1. It would be nice if objects could be dragged in the tree to change z-order; representing grouping here would also be nice.[[BR]] … … 458 457 459 458 == 3. Comments == 460 Media controls are not included in the layout tree.
