Discussion of user-centric navigation issues.
Last Meeting: Tuesday, October 16th, 2007 at: 10am PST/ 1pm EST
Navigation Definition
Navigation is the process by which the user traverses the content of the service.
Problem/Pain
The user must have at all times a sense of location and status. These should be manifest, but often they are not.
Questions we need to answer on behalf of the user
- What is the shape of the space in which I'm traveling?
- Where am I now?
- How did I get here?
- Where can I go? Where can I get to from where I am?
- Where should I go, to achieve my current objective (complete my current task)?
- How do I get there most effectively? Most efficiently?
Note: The answer to the last question may vary, depending on the experience of the user. Is the user a newcomer, a novice or occasional user, or an expert?
Note: A special case of navigation is the transition from the unauthenticated to the logged-in state. The landscape may change a great deal, as the user departs the public space, and enters the personalized space.
Discussion
Question 1: The user may be asking: "Is there an overview of the space? Something that indicates its structure, and the features that populate it? I'd like to understand both the contours of the landscape, and its content. A map might help, or some sort of high-level depiction."
Question 2: The user may want to know where she is initially, when she enters the space (at the root of a tree perhaps?). As she moves through the space, she will want to know her location relative to her starting point and other reference locations.
Once logged in to a portal, the user perceives two portlet-inhabited spaces:
- The space of all the portlets to which she is subscribed, represented by portlet windows arranged in columns under tabs, in a folder hierarchy, or some other arrangement.
- The space of all portlets to which she has not subscribed, most like likely presented as a list or indexed catalog.
These two spaces are presented rather differently, but the user must navigate through both of them, identify positions in both, and have a mechanism for moving portlets from one to the other.
Summit Component Ideas
- Primary navigation
- Secondary navigation
- Dash board
- Bread crumbs
- Site map (or maps)
- Concierge
- Object titles (names of landmarks, landscape features)
- Contextual help (ask "Where is here?")
- Waypoints
- Beacons
- Scent marking
- Location history
- Landmarks
- Offsite content or remote location indicator
- Search
- Bookmarks
- Personal beacons
- Personal Landmarks
Note: Some of these ideas may have interesting accessibility implications. Waypoints and personal beacons may be contrived to be easily perceivable by all potential users.
Scenarios
In each of the following scenarios, the focus should be how the user knows where she is, how she got there, and where she can go to. These questions should also be addressed with the assumption that the user is employing an AT device or software product.
1. Logging in
- User enters the login (home?) page for the service.
- It is clear that this is a public page, with enterprise-ish content.
- There is a prominent clickpoint inviting her to log in.
- User clicks "login" and is catapulted into the Authentication service, where she is invited to supply her credentials. Important status information for her to understand includes:
- What service she is logging in to
- What credentials are needed
- The security of the credential-entry service/form
- How to cancel out and return to the home page
- User enters credentials and clicks submit.
- Feedback indicates success of submission or failure
- User is dropped into the service
- It is clear that she is now in her own personalized space.
- The institutional banner is diminished, and public content is de-emphasized.
2. Interacting with Weakly-integrated Applications in uPortal
- User logs in to the portal and decides to interact with a application through a portlet window that presents a single clickpoint.
- The user clicks on the clickpoint.
- An application is launched in a new browser window, obscuring the current display. At this point, a number of things are unclear to the user:
- Where did the portal go? Am I still in it?
- The authentication state: What is the "who am I" status for interactions within the window?
- The relationship of the portal framework to the new window: How much management/control is available from the portal?
- Can the session in the new window be terminated by logging out of the portal?
- Are any of the portal-based navigation mechanisms available?
- Can the navigation status be assess using an AT device or software product?
3. Entering and Leaving Portlet Focus Mode
In focus mode, the framework hands over control of (most of) the display to a portlet.
- The user logs in to the portal and activates a clickpoint in a portlet window header. She observes the following:
- Tabs and disappear from the display.
- Portlet windows in columns disappear from the display.
- The display is taken over by a single application.
- Portal navigation is reduced to a "Return to Portal" clickpoint.
- Desiring to go to another tab, the user clicks on "Return to Portal"
- Tabs and other portlet windows are once again displayed.
- The user clicks on a tab to go to the portlets under the other tab.
4. Detached Windows Launched from Portlet
- The user logs in and commences interaction with a specific portlet.
- The user initiates a process that involves the entry of text.
- The portlet creates a new detached window with a rich text editor.
- The user initiates another process involving the entry of text
- Another detached window is created.
- The user navigates to another tab and commences interaction with another portlet.
- The user returns to the first detached window and enters some text.
- The user signals to the portlet that she is finished with her interactions.
- A dialog box appears requesting disposition of the detached windows.
This can play out in all sorts of ways. There are all sorts of ways the user can depart from the interactions. In all cases she should be protected from losing work, or leaving the application in an ambiguous state.
5. Navigating by Tagged Beacons
- The user logs in to the service, intending to visit a portlet she used the week before to perform a Feng Shui analysis of her office space. She can't remember where the portlet is located or its title - it's one of several hundred in her extended layout. But anticipating a revisit, she dropped a blue beacon on it, labeled with a tag "Office Feng Shui".
- She activates the "Show My Beacons" clickpoint.
- A map of her layout space appears (schematic? pictorial? topographic? text list?)
- Beacons appear at various points in the map, with abbreviated titles
- She selects the most likely blue beacon. It displays the tag text "Office Feng Shui"
- She activates (clicks on) the beacon image.
- She is taken layout fragment containing the Feng Shui portlet.
Blue Sky Vision
We are considering a complex and heavily populated space for the user to travel through. She may be using an enterprise portal with hundreds of applications (portlets) to choose from. Her layout may be represented as a tree (much like a folder tree) with multiple layers containing scores of portlet windows. An application may manifest itself through a single portlet window, or multiple cooperating windows. In addition to displaying content in layout-embedded windows, portlets may launch multiple detached windows.
Also to be considered, is that the user may be using a device with limited resolution or display size, and yet may be traversing a complex hierarchy of pages.
Possible Components
Ratings
Ratings indicate: # of Fluid apps affected/frequency & security matrix rating
2. Personal Beacon Icon Set/Enhancement of Favourites
- This is a set of icons - maybe they look like ship beacons or lighthouses or something
- Labeled beacons are equivalent to "tags"
- The user can drop them as they go around the web application during a session.
- A map can show all the beacons and their tags of beacons
- Beacons always display and are remembered from session to session unless the user gets rid of them
- If a user can see a beacon, they can click on it to get to its page. It provides a visual shortcut to a particular page.
- beacons could be dropped on the page the user wants to get to, but they access their beacons on a dashboard, or from a pop-up
- rating - 4/2b
3. Assume Another Identity - Views
- Allows a user to see a web site from another user's view point (an instructor can see their class web site from a student's perspective)
- User can go into and out of this alternative 'reality' whenever they are in Sakai/uPortal
- This may be the assumption of a role that the user is entitled to adopt. E.g. an instructor may be entitled to assume the "student" role when viewing her course.
- This should be contrasted with the "become another user" proposal being considered in the uPortal project (where the system doesn't know you're not that user).
- rating - 4/2a
4. Sakai Home Portal/Dashboard
(based on limited Sakai knowledge
- Replaces "my workspace" which is apparently not that useful
- user can create portlets here that are meaningful to them
- use these portlets to navigate to frequently visited or important sites, (perhaps each class for a student or faculty)
- user can also add links here (store their list of "favourites")
- rating: it could affect all 4, but not sure how that would be implemented technically/1-Sakai, hard to rate for other apps since most other apps already have it
5. Breadcrumb Component
- Breadcrumbs indicate the current position in the hierarchy (not the Little Billy path through the space)
- rating: 4/2b
6. Top Navigation Component
- May be implemented as the tab component, as links, etc.
- rating: 4/1
7. Tab Component
- has two states -- view and edit (which allows you to rename, move, remove the tab)
- uPortal edit mode may also include editing tab content (though this may be a default state--you can always edit)
- probably an implementation of the top nav component
- rating: 4/2b
8. Nested Left Navigation Component
- Layout may be represented as a hierarchy of folders rather than sets of columns under tabs. A folder would contain portlet windows organized in columns, as well as subfolders.
- An outline view of folder names and portlet titles could assist in navigation.
- Folder navigation could be the underlying implementation
- rating: 4/1
9. Folder Navigation
This is a generic component for for traversing such things as file system trees, mail folder hierarchies, and portlet layouts.
- could be used to implement the Nested Left Navigation Component
- could be used to implement navigational view in the File Management Viewer
- rating: 4/1
10. Navigation "map"
- An encoded version of the site structure, or machine-readable map of the space that the system can turn into various types of navigation (e.g. using Breadcrumb, Top Nav, Nested Left Nav, Tab components, Folders, etc.)
- It could also represent the position of multiple "sub-pages" or portlets on an individual page.
- It could display the tagged beacons or scent-marks deposited by the user on previous rambles through the site.
- It could display a path between way-points visited on this or previous excursions through the site.
- future-looking
- rating: 4/1
1. Help I'm lost! Where am I? Icon/Widget
- This is an icon that persists on every page. If the user clicks it, a little div area or pop-up appears showing some type of site map indicating where the user currently is in the page navigation hierarchy. E.g. a "you are here" indicator.
- Colour coding could be used to show the user all the sections they have visited.
- It's some combination of a site map and breadcrumbs that tells the user where they currently are in the site and gives them the option to navigate to other places.
- Imagine you are in a new city and have a map. This is a dot on a map that moves with you, showing your current position relative to the entire space.
- May be a subset, or part of, #10.
- rating - 4/2a
11. Management of detached windows
- See Scenario 4 above.
- What controls do the users see? (submit, print, resize, cancel)
- Not losing any work the user does in detached windows (e.g. entering text) is an essential part of their management.
- Multiple detached windows may be be active, and may be launched from different portlets or tools.
- There are many different ways the user may depart from interaction with the windows. Each has to be handled.
- User should be informed of state of window upon his return (espec. persons for whom visual context isn't helpful or sufficient).
- future-looking
- rating: 4/1
12. Management of entry and exit from focus mode
- portlet takes over the display window
- question: how much of portal window is displayed
- rating: 4/1-uPortal, 2a-others
13. Management of weakly-integrated applications (fire & forget)
- Fire and Forget Manager Component
- Could this be a design pattern?
- Launching an application that appears in its own window
- app doesn't know it's been launched from the portal, and the portal doesn't have any control over it, portal window is usually obscured
- rating: 2-uPortal & Kuali/1
14. "Who am I" display.
- Who Am I Viewer Component
- May not be strictly a navigational component, but may be referenced by 13 and 3.
- rating: 4/2a
Summit Post-it Page
At the Fluid Summit, pain points represented on post-it notes were grouped into problem spaces (such as Feedback), then into (usually very high level) potential components such as the ones below. Each problem area was then rated as to whether it affected 1, 2, or 3/All of the Fluid applications (Sakai, uPortal, Moodle). Each potential component was then rated on the following matrix, which indicated how severe the pain point it helped solve was for users, as well as how frequently the pain point was encountered. It helped us determine how high a priority it was, with 1 being the highest priority and 3 being the lowest.
high severity |
1 |
2a |
low severity |
2b |
3 |
|
high frequency |
low frequency |
Navigation & My Status/Where am I
Multi-window Management
2a/All
- Excessive mode-iness - service forces user to exit a task before it is complete or lose information if the user needs to perform in an unrelated task.
- Overlapping grade workflows of assignments, gradebook, T & Q, separated at rigidly.
Distinguishing Personal vs. Shared or other Categorization (mutable vs. unmutable)
2b/All
- My Workspace - relationship to other sites not clear
- My Stuff vs. Other Stuff (sites, items, collections)
Undo:
1/All
- Undo does not work when editing text in text entry resource window
- Undo (Emergency Exit)
- I've done something I didn't mean to, take me back to the previous state
- Pair: No undo (common action for users to choose functions by mistake)
- Sometimes easy to make a mistake (web Mail) and I just want to be able to go back
- Portal and Portlet level
- Numerous points for users to do something they didn't mean to (maybe not even know what they did).
- Need a way to back out
- Permissions matrix is extra dangerous
- Genera lack of undo
- Spotty and inconsistent if undo is present
- I messed up my customization how do I revert to my previous state?
- How do I revert to the default state?
Search:
1/All
- Google-type search
- component type search - where do I look
- no portal search
Cameo/Synoptic View or More Detail Window (related to Dashboard):
2a/All
- Detail more info but not whole window
- Summary headers of last 10 emails
- Synoptic View
- Sakai aggregated info
- Important thing coming out of a tool (eg., number of new emails)
- Focused
System wide links (high-level bookmarking - on every page)
2b/All
- Home/site map/ preferences
- Site-wide system links
- Poor labels
- Lack of icons
- Generally poor formatting
- Appear/disappear
Titles:
2b/All
- Page titles
- Titles don't change with content
- Announcements vs. Edit announcements
- Accessibility issue with screen readers
- Should fit into breadcrumbs?
Dashboard / What's New / What's Important
1/All
- Pain point - where should I look, where should I start?
- Lack of aggregated content
- What's new tool/utility
- Home tool: (major usability issues, make My Home quick fix for info like iGoogle, maybe a Sakai UX project?)
- Dashboard: View aggregator
- My Workspace shows highlights of all my sites and what's going on in a snapshot
- What's new and what has changed plus a notifier
- Related to home and would be content specific to kind of site/project/course
- Show me what is important and what's new and allow them to change every time both automatically and manually.
Community:
3/All
- Awareness of others in collaborative space
Who I am determines what I see/Personalization/Concierge:
2b/All
- Concierge - give some advice about where I am and what I can do, knowing what you do know about me
- Portal guest page - usually acts and looks like the authenticated view, no actions to signal login page, indicators of customization but no power/permissions to accomplish
- Login does not meet user expectations
- CAS (Central Authentication System) uptake
Leaving System in Unexpected Way/Opening New Window:
1/All
- Fire and Forget Manager - maintain control relationship, portal to application/ make sure relationship is clear to user / manage SSO (single-sign on) & SLO/ reap windows
- Portlets w/a single jumping off point/link are confusing. Why not aggregate links to make better use of space/make it clear it is just a link.
- Don't use work draft saver associated with Wysiwyg type inputs
- Users are sometimes taken to a completely new window without warning, e.g. Help icon links in News/Reader
- Multi-content workflow, minimal content state surrounding banner
- External launch
- No indication of external vs. internal
- No transition or message
- Whole different interface/application
- No return
Inconsistent Navigation:
1/All
- Resources: I keep wanting to click on links to Resources to edit, not download view them. It's disconcerting when a new page opens (e.g., when a link is opened).
- Resources: confusing the way the folders are organized because user has to look in 2 places (breadcrumbs main window) to find their place in the hierarchy).
- Resources: Copy/Move/Remove links are in a completely non-standard place. Why another menu?
- If we want to use Attempts options, it's difficult to indicate all the options related to Attempts because some are in other sections (Moodle).
- Top level navigation: Navigation form changes at various times, for instance going into settings removes tabs and different links become main navigation.
- Navigation and action inconsistencies
- Intra-tool navigation: navigation that takes you to every top level page in a tool, some tools behave like this and some do not. (Action menu/combo button)
- Important to have Navigation tool conventions
- Breadcrumbs: can't use the Back button and users want to navigate to a higher level page and understand where they are in a navigational hierarchy. Difficult to tell where you are in Resources/hierarchy when user has drilled down into a folder.
- It is not immediately clear how to return to the course topics page after entering specialized areas as there are no clear procedures described. (Moodle)
- Edit/Admin tabs (Ajax):
- No indicator of edit capability
- Ajax/js accessibility issues
Saving State (not losing work):
1/All
- Task suspend plug in other tool view then resume task
- Content/task/workflow integrator
- Siloed portlets
- Lack of cross-product workflow/communication
- Support workflow: allow persons to preserve state when accessing other tools.
- Pain point: Oh no! I have to go to another tool... when I get back have I lost work?
- Save work message: users can easily get confused, lost in work in Sakai, choosing Cancel in wizard is example. This confirmation message would ask before losing info.
- Save work reminder message: If going someplace else/doing something different allows me to lose work, then remind me.
- Pain point: when am I leaving page/workflow? Do I lose work? Is it recoverable?
- Save state or not? Between sites?