Image Reorderer Design Overview

1. Problem

Problem Statement:

Competitive Analysis: Comparison of Drag and Drop Implementations

2. Users

Lightbox Personas were created to specifically understand the needs of users who may be managing a large number of images in an image gallery.

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 would the user need to reorder images? What activities do they undertake in these contexts?

Functional Requirements: What use cases does the Image Reorderer component support?

Primary & Secondary Scenarios: In context, what are the primary and secondary user needs are we meeting?

4. Solution

Wireframes: What does the Image Reorderer look like and how does it behave?

• Lightbox Wireframes (Design Iteration)
• Lightbox Interesting Moments
• Lightbox Design Mockup

Storyboards: How, when, and where would the user use an Image Reorderer?

Drag and Drop - List Ordering Design Pattern: Design advice for reordering items in a list.

Accessibility Considerations:

• Lightbox Keyboard Interactions
• Screen Reader results with and without title attribute
• Markup for Optimal Screen Reader Experience

5. Image Reorderer User Testing

Image Reorderer User Testing: Summary of all user testing performed on the Image Reorderer component.

User Testing Protocol: Describes how the user testing of the Image Reorderer will be carried out.

• Image Reorderer User Testing - Round 1 Protocol

User Testing Results: Describes how the users interacted with the Image Reorderer prototype and what improvements can be made.

• Image Reorderer User Testing - Round 1 Results

6. Preparing for Implementation

Storycards: Decomposes the Image Reorderer into small implementable chunks.

fluid:Functional Specification: Development specification containing interaction details such as "interesting moments."