[Introduction to come soon, just trying to get the mockups posted]
...
Icons, Colors, and Spacing
This is just a rough mockup I made quickly to get something out for people to comment on. Colors were picked to get things out the door, not to look good. Agonizing over these things so early on would be a waste of time. These things will definately change in when it comes time to release something.
...
- Liferay
- live.com
- google.com/ig
- my.yahoo.com
I've put questions I need answers to in green.
Normal View
This is the normal view of the portal.
...
- Text Only - (rough idea) Presents the portal in a text-only-optimized mode. The thinking here is that sometimes even a logical reading order in the HTML or on screen is still problematic for some. This link would switch uPortal to a completely different theme that presents different navigation/customization options specifically designed for screen readers. This introduces a long term maintenance problem since there are now two theme transforms to worry about, but hopefully the community will pick this idea up (if it generally considered worthwhile) and someone with a specific need for this will keep it up to date. What do you think of this idea?
- uPortal Settings - Take you to the uPortal Settings view. See the 4/28/2005 designfor an overview of this screen.
- Help - We have help content, right?
- Log Out - ...
- Portal Logo - a graphic
Tabs
- Icons - A per-tab icon. Do we want this?
- Tab Menu - Displays the tab menu. Only works with JavaScript enabled. A purely CSS based approach is not possible with IE6. Is this correct? For the active tab, the menu arrow is always shown. For inactive tabs, the menu arrow is only shown when mousing over the tab.
- Move Left/Right - simple
- Move to <Tab Name> - makes the 'tab' a 'page' of the tab specified (see pages
- Rename - provides a way for the user to change the name of the tab.
- Delete - deletes the tab
- Add Tab - Adds a tab named 'New Tab' to the end of the current list of tabs. If a user cannot add a tab, this doesn't even appear.
- Dragging a Tab - When a tab begins to be dragged, it is removed from the tab list, made semi-transparent, and a dotted outline is shown over valid drop zones.
- If the tab is released over an invalid drop zone, it snaps back to its original location.
- If there are no valid drop zones (all of the other tabs are part of pushed fragments) then none of the tabs will be draggable.
- When dragging a tab, tabs that have had their movement restricted by the layout manager will present some UI to the effect that they cannot be moved. Perhaps a
symbol on the mouse cursor. - What additional feedback is required?
Pages
I'm calling subtabs Pages so I don't have to call them subtabs. Anyone have a better name?
- Icons - They're just like tabs.
- Page Menu - just like the tab menus
- Add Page - just like Add Tab
- First/Default "Page" - The first/default page is simply the parent tab. It cannot be moved/reordered. It is there to allow navigation between pages without having to click the actual tab to return to the default view.
- Dragging a Page - See Dragging a Tab above.
...
- the >> is the collapse/expand button. The button adopts the convention of indicating the current state of the portlet. (see My Yahoo or live.com)
- Up - portlet is collapsed
- Down - portlet is expanded
- Icons - A per-channel icon. Do we want this?
up3-portlet-menu.png* Customization Menu - same as other customization menus
- Portlet Actions - Help, Settings, Detach, Focus/Maximize (which one?), Delete - Am I missing any? Can I remove some?
- Dragging a Portlet - Similar to dragging tabs/pages
...
This is sorta mirrored after flickr, but in our case shows your tab hierarchy. What do you think?
Accessibility Support
Accessibility is a major design goal, since uPortal is focused on university needs. I'm currently working on enabling three rough scenarios:
...