Problem Statement: The user needs a way to change the order or manipulate the position of list elements on the screen. They need to re-order items in a list of similar items, and they do not need to visually preview the new layout before making the change.
- Allow user to drag and drop to reorder element in a list
- Allow numbering to change order of elements in a list - particularly in longer lists
- Clear indication of drop target
- Clear feedback about what element is being reordered
Catalina, Christyand Ashley are the primary personas for Fluid Components. They represent the primary target for the design of Fluid components. Additionally, we have defined secondary personas whose needs are mostly met by fullfilling primary's except for one or two needs specific additional needs.
Fluid Personas are a collection of various types of important users whose needs we need to consider throughout the design process.
3. Users' needs
Contexts of Use: In what contexts might users need a List Reorderer?
Functional Requirements: What use cases does the List Reorderer support?
- Drag and drop lists elements to reorder the list.
- Use the keyboard to move list elements.
- Give user visual and audio cues to discover reordering capability
- Degrade gracefully for those unable to use dynamic drag and drop
- Allow time based material to be reordered
- Use a "drop target to show user where the element will be 'dropped'.
- An avatar should show the user the element while they are dragging.
Scenarios: In context, what are our personas needs for a list reorder?
Primary & Secondary Scenarios: What are the primary and secondary scenarios we are designing for?
5. Evaluating our design with users
User Testing Protocol: Describes how the user testing of the List Reorderer will be carried out
User Testing Results: Describes how the users interacted with the List Reorderer prototype and what improvements can be made
What is the List Reorderer?
The List Reorderer provides fully keyboard-accessible and mouse-based direction manipulation of list elements on-screen. It is intended to work well with screen magnifiers, low screen resolutions, and linear layouts. The List Reorderer is based on the Reorderer