List Reorderer Design Overview

1. Problem

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. 

Design Goals:

• 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

2. Users

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?

4. Solution

Storyboards: The stories and wireframes of how our personas might use the List Reorder
List Reorderer Storyboard - Make Important Announcements Viewable

Wireframes: Visual representation of the component in all its states.

Design Pattern:

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

6. Preparing for Implementation

Storycards: Decomposes List Reorderer into small implementable chunks

List Reorderer Storycards

List Reorderer Storycards in Announcements Context 

Functional Specification: The details not expressed in storyboards and wireframes -- or as detailed as we get in agile development