wiki:UIGuidelinesForShift/DansWorkingPage
Last modified 16 years ago Last modified on 05/28/09 02:54:43

Table of Contents

    1. 1.5. UI Structure
      1. Layout tree
      2. Book Elements
      3. Halos
      4. HUDs

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

  • Description
  • Graphic Design
  • Interaction Design

1.5. UI Structure

Layout tree

  • VlEngine
    • AppMainWindow
      • Description This is the main window of the application.
      • Graphic Design Make it look good.
      • Interaction Design One issue with Sophie 1 was that Mac Sophie used Mac menu bars and not the application menu bars; the Linux & Windows versions used the application menu bars. Sophie 1 was also limited to just the application window, which is not a limitation in Sophie 2.
    • LeftFlap
      • ConfigTab
        • 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?
      • PluginsPalette
        • Description This palette shows a list of all the plugins in the working copy of Sophie 2.
        • Graphic Design This is a list palette.
        • Interaction Design Selecting a plugin shows metadata about the plugin in the PluginAboutPalette.
      • PluginAboutPalette
        • Description This palette shows information about the plugin selected in the PluginsPalette .
        • 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?
        • Interaction Design Each plugin should have an "enable" and "disable" button. Not all plugins can be enabled or disabled; some are necessary.
    • BooksTab
      • 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.
      • OpenBooksPalette
        • 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.
        • 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.
        • Interaction Design Clicking on one of the books should open the book for editing.
      • EmbeddedBooksPalette
        • Description The embedded books palette in Sophie 1 listed all the embedded books in the currently selected book. Books were listed by name and with a preview icon.
        • Graphic Design This is a list palette: essentially a list of books. Metadata would be useful: in Sophie 1, books in this palette could be either linked (where the book exists somewhere else) or fully embedded (where the book is part of the parent book's file system). This wasn't made clear, although it has ramifications for the user.
        • Interaction Design In Sophie 1, the icons of embedded books could be dragged from this palette to the page of an open book to make the embedded book appear on a page; the icon of the embedded book could also be dragged from the palette to the third field of a link HUD if the action was to open an embedded book in a new window. Neither of these interactions was particularly good. We need a clear way for users to link to embedded books; we also need a good for one book to be embedded in another book. If books could be dragged from the books palette to the embedded books palette, this might solve that problem. It might make sense to treat embedded books as resources and move them into the resources palette, rather than keeping them over here.
    • PagesTab
      • PagePreviewPalette
        • Description The page preview palette shows thumbnails of all the pages in the book.
        • Graphic Design 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.
        • [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.
      • PageStructurePalette
        • 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.
        • 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.
        • 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.
    • ToolsTab
      • Description This tab contained palettes in Sophie 1 that didn't fit anywhere else. There are probably better ways that things could be organized.
    • SearchPalette
      • Description This palette is used for searching a Sophie book. Text to be searched for is entered in the field at the top; if there are results, they are listed below, and clicking on them will go to the page in the book where the text appears.
      • Graphic Design This is a modified list palette.
      • Interaction Design Clicking on the text results will go to the text results. This palette would work as a floating window called from the menu bars.
    • SpellcheckPalette
      • Description This palette is used for spellchecking; buttons allow you to find the next misspelled word & select replacement spellings, if they exist.
      • Graphic Design This palette contains several buttons and a list of spelling suggestions.
      • Interaction Design Clicking the Next button moves the book to the next page with a misspelled word. This palette could be a floating window called from the menu bars.
  • TimelinesTab
    • Description The timelines tab/palette in Sophie 1 listed all the timelines in the book and had two buttons allowing the creation of single-page or multi-page timelines.
    • Graphic Design This is a list palette. This probably doesn't need to be a whole tab of its own; it could go in the styles tab where the page templates are, for example.
    • Interaction Design Clicking on a timeline will open it in the timeline flap. Timeline creation can probably be done from a halo.
  • AnnotationsTab
    • Description The annotations tab mostly is used in the Reader application, but it also appears in the Author app.
  • HighlightsPalette
    • Description Highlights are a list of places that have been highlighted in the book. Clicking on one of them will go to it.
    • Graphic Design This is a list palette; it's a list of the first five words in each highlight.
    • Interaction Design Clicking on a highlight takes you to that page. Sophie 1 never had a good way of highlighting; text was selected, then Edit > Highlight was selected in the menu. A better way to do this (a highlighter tool) would be helpful.
  • StickiesPalette
    • Description This palette lists all stickies in the current book; the new sticky button makes a new sticky.
    • Graphic Design This is a list palette; it's a list of the first five words in each sticky.
    • Interaction Design Clicking on a sticky goes to that page. Clicking on the new sticky button makes a new sticky.
  • AudioAnnotationsPalette
    • Description This palette lists all audio annotations in the current book; the new audio annotation button makes a new sticky.
    • Graphic Design This is a list palette; it should show each annotation by time and page number.
    • Interaction Design Clicking on an entry should go to that page. Clicking on the new audio annotation button should allow the reader to record a new audio annotation.
  • AppDocumentsDesktop
    • BookDocumentWindow
      • AuthorPageWorkArea
        • SimpleSceneVisual
        • FrameMoveHaloMenu
        • FrameMoveButton
      • ReaderPageWorkArea
        • SimpleSceneVisual
        • FrameMoveHaloMenu
        • FrameMoveButton
      • BookBottomPanel
        • ZoomPercentagePanel
        • NavigationPanel
        • QuickSearchPanel
        • ReaderModeCheckBox
        • ShowFramesCheckBoxPanel
  • AppMenuBar
    • FileMenu
      • NewBookItem
      • OpenBookItem
      • SaveBookItem
      • SaveBookAsItem
      • SaveBookAsTemplateItem
      • ImportItem
      • ExportItem
      • BookPropertiesItem
      • CloseBookItem
      • ExitItem
    • EditMenu
      • UndoItem
      • RedoItem
      • CutItem
      • CopyItem
      • PasteItem
      • DeleteItem
      • SpellCheckItem
      • CopyLocationOfSelectionItem
      • ToggleRulers
      • SetBookTitleItem
      • SetPageSizeItem
      • ShowConnectionsItem
    • InsertMenu
      • InsertImageItem
      • InsertTextItem
      • InsertMediaItem
    • WindowMenu
      • CascadeItem
      • TileItem
      • DocumentItem
    • HelpMenu
      • HelpContentsItem
      • AboutItem
      • BugReportItem
  • RightFlap
    • LibraryTab
      • Description The library tab contains Sophie "primitives": different types of frames and book templates. "Library" is not a great name for this (also too similar to "resources"); something better should be imagined.
    • BookTemplatesPalette
      • Description This contains a list of all the book templates that Sophie can find. Dragging one out to the workspace creates a new book using that template.
      • Graphic Design List palette with preview of each book template.
      • Interaction Design Dragging book template to workspace creates new book.
  • StylesTab
    • Description This tab contains page templates and paragraph styles.
    • Graphic Design This tab contains list palettes.
    • Interaction Design The page template palette was the only one of these palettes that was used much in Sophie 1 - templates were dragged from this palette to the page to apply page templates or to add new pages. This was opaque to the user; a better way to apply page templates should be implemented.
  • ResourcesTab
    • AllResourcesPalette
      • Description This palette shows all of the resources in the current Sophie book, divided by type.
      • Graphic Design This palette is a modified list palette: the list is separated by tabs of media type. We need to find a way to get a large amount of information into a very small space, as users will have a lot of resources in some books.
      • Interaction Design The user should be able to drag resources from this palette onto the page of the current book. Ways for the user to organize resources will be needed.
    • ResourcesMetaPalette
      • Description This palette shows metadata about the selected resource in the AllResourcesPalette.
      • Graphic Design This palette should should a preview of the resource as well as the filename, size, and possibly other details.
      • Interaction Design This palette only displays information.
  • BottomFlap
    • Description In Sophie 1, timelines were edited in the bottom flap, which only appeared when a timeline was open. This is maybe not the best way to do this; a timeline-editing mode might be better, or a free-floating timeline window. The timeline editing area needs to be as wide as possible; it might make sense to have it as a separate window.
    • Interaction Design In Sophie 1, the timeline window could only open one timeline at a time. This might be reconsidered?
  • TimelineTab
    • TimelinePalette
      • Description The timeline palette is where timelines are edited; it contains channels and controls. More detailed discussion of timelines can be found here.
      • Graphic Design The timeline interface is different from any other part of the Sophie interface; timelines are a complicated concept to explain in the context of electronic book making. The timeline interface, then, should look as much like the rest of Sophie as possible. Most of the people using the timeline interface in Sophie will not be sophisticated users of a/v editing programs; it should look simple and unimposing.
      • Interaction Design The main area of concern in the timeline in Sophie 1 was the timeline slider, which proved difficult to use because it functioned both as a zoom and as a scroll bar. These two functionalities should be separated. Another problem is that of indicating when an event on the timeline is playing and when it is visible.

Book Elements

Page

  • Frame
    • TextContent
      • ChainedTextContent
      • StaticTextContent
  • Frame
    • ImageContent
  • Frame
    • VideoContent
  • Frame
    • AudioContent
  • FrameGroup
  • PageTemplate
  • BookTemplate
  • TextResource
  • ImageResource
  • VideoResource
  • MediaResource

Halos

  • PageHalo
    • Description The page halo appears when the user selects the page itself. It opens the page HUD, which allows the user to set the border and fill of the page.
    • Graphic Design The icon should make clear that the user is changing the border and fill of the page. This can probably be the same as the frame appearance halo.
    • Interaction Design Standard halo. This halo should also appear in the top left corner of the page when a page is selected in the page preview palette; getting to this functionality can be tricky when the page is covered with frames.
  • FramePropertiesHalo
    • Description The frame properties halo appears when the user has selected a frame. Clicking it opens the frame properties HUD which allows the user to modify the frame's location and size and other properties.
    • Graphic Design Th
    • Interaction Design
  • FrameAppearanceHalo
    • Description The frame appearance halo appears when the user has selected a frame. Clicking it opens the frame appearance HUD which allows the user to modify the frame's border and fill settings.
    • Graphic Design This can probably be the same as the page halo. The icon should make it clear that this affects that frame's margin and fill.
    • Interaction Design This is a standard halo; click on it and the HUD opens.
  • LinkHalo
    • Description The link halo appears when the user selects the page (allowing links that happen when the page is opened) when the user selects a frame (allowing links triggered by a frame) or when the user selects text (allowing links triggered by a frame). In all cases, the link HUD is opened, which allows the author to create and modify links.
    • Graphic Design Sophie 1 used a chainlink for this; something better might be nice. Possible conflict with the chaining halo.
    • Interaction Design This is a standard halo; click on it and the HUD opens.
  • AnchorHalo
    • Description The anchor halo appears when the user has selected a frame. Clicking it opens the anchoring HUD, which allows anchoring the selected frame in another flow on the current page.
    • Graphic Design It seems possible that this halo could both be both dragged and clicked, which needs to be comprehensible to the author.
    • Interaction Design In Sophie 1, the anchor halo was dragged to a text insertion point in another frame to anchor the frame in that flow; this was fairly opaque to most users, and it seems like it might be better to open a HUD that gives the user instructions for how to drag something that will anchor the frame.
  • CharacterHalo
    • Description The character halo appears when the user has inserted the cursor in text or has selected text. Clicking on it opens the character HUD, which will change text settings for the selected text or from the insertion point if the user starts typing.
    • Graphic Design
    • Interaction Design This is a standard halo; click on it and the HUD opens.
  • ParagraphHalo
    • Description The paragraph halo appears when the user's cursor is in a paragraph (in which case the changes made in the paragraph HUD will affect the paragraph of the insertion point) or when the user has selected across paragraphs (in which case the changes made in the paragraph HUD will affect all paragraphs partially or completely selected.) It brings up the paragraph HUD, which allows paragraph-level changes to text.
    • Graphic Design
    • Interaction Design This is a standard halo; click on it and the HUD opens.
  • ChainingHalo
    • Description The chaining halo appears when the user selects a frame. It is used to chain frames together and to set autoflow to the next page if the frame is full.
    • Graphic Design Maybe the chaining halo should be at the bottom right corner of the frame? As currently envisioned, this halo can both be dragged and clicked, which needs to be comprehensible to the author. Also the icon needs to be distinct from the link halo, which does something different.
    • Interaction Design The chain halo could be dragged and dropped on another frame to chain a frame to another frame; clicking the halo could set it into autoflow mode, so the frame would automatically flow onto the next page. These interactions probably need to be worked out. Probably a table of interactions should be worked out here?
  • AlignHalo
    • Description The align halo appears only when the user has selected more than one frame. The align halo opens the align HUD which allows the user to align frames relative to each other.
    • Graphic Design
    • Interaction Design This is a standard halo; click on it and the HUD opens.

HUDs

  • PageHud
    • Description The page HUD is used to set the margin & fill for the page; it is just like the frame properties HUD, but acts on the page rather than a frame.
    • Graphic Design
    • Interaction Design
  • FramePropertiesHud
    • Description
    • Graphic Design
    • Interaction Design
  • AlignHud
    • Description The align HUD shows options for aligning selected frames relative to each other: there are buttons for aligning all selected frames horizontally (left, center, right) or vertically (top, center, bottom). This could also include controls allowing grouping and ungrouping the selected frames.
    • Graphic Design
    • Interaction Design
  • AnchorHud
    • Description
    • Graphic Design
    • Interaction Design
  • CharacterHud
    • Description
    • Graphic Design
    • Interaction Design
  • ParagraphHud
    • Description
    • Graphic Design
    • Interaction Design
  • LinkHud
    • Description
    • Graphic Design
    • Interaction Design