Include Page | ||||
---|---|---|---|---|
|
See the documentation of the Grouper 2.2 UI, released July 2014
Children Display |
---|
Go to Community Requests Table
...
- Optimize the user experience across all browsers and mobile devices.
- Design an interface intuitive which meets the needs of Basic and Intermediate users and which is intuitive enough such that no formal training is required to use the Grouper UI for common tasks.
- Meet or exceed WCAG 2.0 AA requirements for accessibility.
- Replace the Lite UI and ship v2.2 with the existing Admin UI and the new UI.
Measurable Objectives
- Users with no formal training are able to complete a series of five 5-10 tasks within ten minutes.
- Users rate their experience with Grouper at five or higher on a seven point scale.
- A user using assistive technology is able to perform any and all tasks.
Phases/Process
- Initial research
- Identify pool of existing users
- Test current interface against new/green users?
- Identify pain points with current UI
- Identify most common tasks and pain points
- Identify core functions
- Gather requirements (concurrent with Initial Research)
- Identify existing functionality to be preserved
- Identify new features to be incorporated
- User interviews
- What tasks do users perform most often? Do all users follow the same workflow to perform those tasks?
- What are the pain points in the existing interface? What are the most frustrating tasks?
- What do users wish they could do with the current interface but are unable to?
- Where/when/how do users interact with Grouper?
- How much functionality needs to be supported on small screens?
- What's the true breakdown of expert vs intermediate users?
- How much time, if any, should be spent testing the current interface against new users? existing users?
- User interviews
- Gather requirements (concurrent with Initial Research)
- Identify core functions
- Identify existing functionality to be preserved
- Identify new features requested by the community
- Vote on new features?
- Finalize list of new features and freeze requests
- Low-fidelity wireframes - desktop and mobile
- Initial sketching and low-fi electronic wireframe development
- Initial sketching and low-fi electronic wireframe development
- Test common tasks against wireframes
- Rinse and repeat
- High fidelity wireframes - desktop and mobile
- Develop richer wireframes
- Test common tasks against wireframes
- Report results
- Proof of concept of accessible widgets and write framework code (custom tags, common javascript etc)
- Some of this could be done concurrently with steps outlined above
- autocomplete
- tree control
- popup window
- menu
- layout (frame-like)
- tooltips
- Graphic Design
- Development (iterative)
- Testing
Architecture
- In order to reuse work done in the existing Lite UI, the same architecture will be used: Javascript framework on top of jquery/dhtmlx. There is no custom javascript per function, just server side java ajax which controls the screen via a Javascript layer
- The main screen design will be centered around a tree control on the left pane which will browse the repository, sort of like Windows Explorer or Eclipse or other similar software
- We could have two UI paths in the same UI application: one which is a rich application which might not be accessible, and one which is a very light application which will be accessible and mobile friendly. The first page of the application should be a splash page which is accessible and mobile friendly where the user can set a preference about which UI they want associated with their account or which to use for this session. Browser detection could help here too. The accessible/mobile part could be purely based on Grouper WS-like operations...
- Favorites or recent activity could be associated with the user in the database (e.g. with membership attributes) so that it is easy for the user to setup tasks so they can quickly do their work the next time they use the Grouper UI
Guidelines
Usability
- Reduce number of screens required for actions
- Reduce number of clicks (e.g. feedback should be in a div which appears instead of a popup that requires an OK). Note: the div should have a close button not auto-close.
- Hide complexity by default.
- E.g, hide all of the "internal" attributes (such as ID, ID Path, UUID, etc.). Only show the user-friendly names, paths, and descriptions. The details will only become visible through a special setting. The Lite UI does this now, and I think the entire UI should do this going forward. I'd recommend that each user have a "profile" where they can set this kind of option globally... so that power users can always see the IDs, etc. but "normal" users will never be bothered by them.
- Ensure the user always knows where they are and what they are doing (context and navigation).
Technical
- (see the Developers Guide)
- Testing
Key Tasks for User Testing
- Find a group and add/delete members
- Add a new administrator to an existing group
- Update an existing member's privileges to include ADMIN
- Create a new folder
- Create a new group
- Edit attributes for an existing group
- Add a group as a member of another group
- View the default privileges for a group
- INTERMEDIATE/ADVANCED: Create a composite group
- ADVANCED: Create and edit attributes for an entity
- ADVANCED: Create a role, a permission, actions, and assign permissions
Architecture
- In order to reuse work done in the existing Lite UI, the same architecture will be used: Javascript framework on top of jquery/dhtmlx. There is no custom javascript per function, just server side java ajax which controls the screen via a Javascript layer
- The main screen design will be centered around a tree control on the left pane which will browse the repository, sort of like Windows Explorer or Eclipse or other similar software
- We could have two UI paths in the same UI application: one which is a rich application which might not be accessible, and one which is a very light application which will be accessible and mobile friendly. The first page of the application should be a splash page which is accessible and mobile friendly where the user can set a preference about which UI they want associated with their account or which to use for this session. Browser detection could help here too. The accessible/mobile part could be purely based on Grouper WS-like operations...
- Favorites or recent activity could be associated with the user in the database (e.g. with membership attributes) so that it is easy for the user to setup tasks so they can quickly do their work the next time they use the Grouper UI
Guidelines
Usability (from Initial Research)
- Provide context for where you are and what you are doing, whether it is browsing or editing. Be consistent with navigation elements (especially breadcrumb).
- Question defaults in every step make the user aware of the default settings.
- Provide more data by default and let users filter down from there (better list management).
- Always provide a way out (cancel and back buttons).
- Upon completion of a task, provide confirmation of success.
- Hide/displace expert clutter.
- Use search consistently.
Technical
- Reduce the number of queries for actions
- Reduce the number of queries for actions
- Make sure most of the logic is in the API, not the UI code. Would be nice if the gaps between what is used and the WS are noted
- Have the UI be usable by keyboard without requiring the mouse
- Note, could use accesskey for buttons (probably need to add this to the UI framework)
- Do not keep stuff in session, just cache globally, and use request. The only things in session would be things that can be cached for the user but figured out if needed. e.g. authentication information. The app should be able to be used in a load balanced environment with session clustering. No unserializable stuff in session
- Make sure app works in different tabs in same browser (it wills since no data in session)
- The tree control on the left of the UI prevents the URL from changing with clicks, however, we can put anchor URLs periodically as the user uses the app, so that bookmarks, back, forward, etc still work. This is already somewhat in the UI framework, need to revisit
...
- Overall search screen should allow search for all grouper objects
- Comboboxes should have filters (e.g. for which source)
- Comboboxes should show results with a <space> if there arent too many of them (maybe also if there is invalid text?) See the action permission combobox
- Have recently used objects available
- Have a screen with each type of UI widget it in it for browser testing
- Hide dangerous operations (e.g. delete object) behind menus so they are less likely to be accidentally pressed
- Might need more custom tags to help display objects easier. for instance a subject display custom tag...
- All searches should be case-insensitive (e.g. group searches, attribute searches, group searches in subject results), should search name, display name, and description, alias, etc
- Maybe if there arent too many options in dropdowns, it could be a select instead of combo
- Get query count for each operation and make sure it is minimal :)
...
- Investigate using this: http://embedded-help.net/
- Perhaps could use some youtube movies too...
Requirements
- See UI Requirements
Anchor | ||||
---|---|---|---|---|
|
Community requests
We ask community members to add their recommendations, requirements, or other functional, technical, process, or participation requests for the v2.2. UI to the following table. If you have more to say than fits into a Description cell, please create a child page and put a link to that in the Description cell.
If you see an existing entry that reflects a concern or request that you share, please add your name and/or institution name to the Requester(s) cell.
Sample UIs
These sample UIs may still be in development and were submitted as examples when soliciting community requests. This is not a comprehensive list.
- University of Washington's prototype Groups Service UI. This UI was demonstrated at the Grouper working group session at 2012 SMM in Arlington, VA. It was agreed that this prototype UI has a clean look and is easy to navigate.
- SURFteams UI - Includes examples of handling invitations to join a team (using federated email addresses), creating and deleting teams, adding and deleting members, managing team roles (member, manager, admin), and requesting access.
- Uppsala University
Community requests
We ask community members to add their recommendations, requirements, or other functional, technical, process, or participation requests for the v2.2. UI to the following table. If you have more to say than fits into a Description cell, please create a child page and put a link to that in the Description cell.
If you see an existing entry that reflects a concern or request that you share, please add your name and/or institution name to the Requester(s) cell.
Advanced Tables - Table Plus | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Advanced Tables - Table Plus | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Input-Gathering Process
We'll aim to conduct the input gathering process as follows:
Date(s) | Activity |
---|---|
April 1 - May 31 | Gather community requirements and requests in table above. Weekly reflection on grouper-dev list of new requests and any discussion of them. Counter proposals? Acceptable? Relative priority? Do others want to add their names as Requesters? |
April 23 | I2 SMM Grouper WG F2F |
May 1 | Float initial proposal for technology stack to be used to build v2.2 UI. Post to grouper-dev. |
May 1-14 | Drive discussion on grouper-dev of tech stack, with intent to settle as much of it as possible during this period. |
May 18? | IAM Online focused on Grouper v2.2 UI planning & requirements |
May 15 | Float initial proposal for UX process to grouper-dev |
May 15-31 | Drive discussion on grouper-dev of UX process with intent to settle it during this period. |
June 1-15 | Finalize acceptance status of each request by grouper-dev and assign each to a priority class. |
...