ushahidi 3.0 design mockups
TRANSCRIPT
Visual design mockups
Ushahidi 3.0 visual design frameworkOct. 12, 2012
DRAFT
About this document
This document provides a high-level, high-fidelity description of the user interface design for the next major version of the Ushahidi platform on the web, as seen on small-screen devices.
Contained in this document are a set of annotated visual design mockups that illustrate how the software should be organized and behave.
This document should be used to continue to detail and implement the design solution for the next major version of the platform.
Design elements
Design elements
1 3
4
The ‘Menu’ button is a global, persistent trigger that reveals a deployment’s top-level menu items.
A deployment can be customized to display any color or image as its background. If an image is used (as in this example), a blur filter is applied.
The ‘Share’ button is contextual trigger that reveals sharing and export options for the content currently in view.
The ‘slider’ is a user interface pattern for offering users a trigger to reveal more detail and functionality related to the content currently in view.
1
2
3
2
4
Design elements
1 8
The first of the items displayed in the off-canvas menu is a button to “Submit report,” making it accessible from anywhere in the deployment.
Menu items set on the grey background represent public content, starting with “Views,” where users can visualize the data that lives in a deployment.
The “Sets” menu item links to user-created subsets of the data (using search queries).
The remaining menu items are examples of administrator-created pages that can leverage plugins to display articles or specific media.
Menu items on the white background represent administrative-related and support-related content, starting with users’ “Workspace,” where registered users can manage the deployment’s content.
The “Tools” menu item links administrators to system settings.
Logged in users can access their account settings from the off-canvas menu.
The off-canvas menu can be closed by either selecting the ‘Menu’ button or swiping the primary content area right-to-left, back into view.
1
2
3
4
23
4
567
5
6
7
8
Design elements
1 2
The off-canvas ‘Share’ view can be closed by either selecting the ‘Share’ button or swiping the primary content area left-to-right, back into view.
The first of the items displayed in the off-canvas view is a button save the current view (in this case, a map) as an image.
The second group of items are related to sharing the current content on external services, like Twitter and Facebook.
If appropriate for the current content, the ‘Share’ view will offer the URL for its real-time RSS feed.
If appropriate for the current content, the ‘Share’ view will offer embeddable HTML for visitors to include the content in their website.
1
2
3
4
3
4
5
5
Views
Map view
1
Users can select different visualizations using the ‘Views’ tabs. In view by default are map, list, trends and heat map. Additional views are accessible by either swiping the tabs horizontally or selecting the arrow button.
The content area below shows the selected visualization; map, in this case.
Users can reveal search options to help narrow the reports in view by either swiping up or selecting the ‘Search’ slider.
1
2
3 2
3
Map view with category-based search
2
Users can reveal and hide search options for the current view by selecting or swiping vertically on the ‘slider’ tab.
At any time within the ‘Search slider,’ users can apply a keyword-based search to the view.
More advanced search tools are available in three tabs, offering category-, date- and Set-based searches. In this example, category-based search is visible.
The deployment’s categories are displayed in a grid and, upon selecting a category, reveals its color for reference in the view behind.
1
2
33
4
1
4
List view
When in ‘List’ view, reports are summarized with either their photo, publish settings or comment total. Reports that are not published publicly are marked with the ‘locked’ icon.
Reports that include a photo are summarized with a square thumbnail image.
Reports with comments are marked with a comments icon along with the total number of comments.
1
2
3 1
2
3
List view with date-based search
Users can apply a date-based search by designating the start and end date for the search query parameters. By selecting an input, a calendar picker is revealed.
1
1
Report detail (public view)
As its visible to the public, a report’s detailed, full-screen view includes all of its primary content, along with a ‘Settings slider’ to expose data the administrator chooses.
1
1
Report detail (private view)
As its visible to users with permission, a report’s detailed, full-screen view includes added functionality within the ‘Settings slider.’ The user can perform tasks like flag, publish and delete.
1
1
Edit report (private view)
After revealing the report’s ‘Settings slider,’ three tabbed views are available: Private, history and edit.
If the report has multiple ‘Stages’ associated with it, they’re revealed above its standard fields with an indication of which stage the user is managing at the moment.
1
2 12
Submit report
Submit report form
1
At any point in the authoring process, a user can submit their work at the top-right of the screen.
If location data is associated with the report type (as in this example), a ‘Location slider’ is available to display the estimated location and offer a trigger to expose tools for better specifying the location.
1
2
2
Submit report location form
1
Upon revealing the ‘Location slider,’ the user can simply find the desired location using keyword-based search, which re-orients the map below.
The map displays the user’s current location, their keyword search results or the location they’ve selected from the list below. The user can manually move the pin wherever they like on the map using their finger or mouse cursor.
Upon selecting a location from the list below, the map places the pin at the appropriate location on the map.
1
2
2
33
Sets
Set list
1
Headings help group sets (e.g. My sets, All sets), and provide a trigger to ‘Create’ a new set, where appropriate.
Set summaries include its title, description and icons to indicate the total number of reports included, the default view applied to them and its privacy settings. Red report totals indicate that new reports have been added to the set.
1
2
2
Set detail
The set’s title is paired with a link to its parent page for navigation and sense of place.
The set’s default view is selected, while all of the deployment’s alternative views are still accessible.
Metadata and settings configuration are accessible via the ‘Settings slider.’
1
2 1
2
3
3
Set detail: Configuration
The first (and publicly visible) view within a set’s ‘Settings slider’ is its configuration, which summarizes the search parameters applied to it. The remaining tabbed views -- privacy and edit -- are accessible with permission.
1
1
Set detail: Privacy
Set owners can toggle the set’s privacy. When set to ‘private,’ the user can designate which users can access the set.
People with access to the set are represented by their avatar.
1
2
1
2
Set detail: Edit
The set’s title, description and search parameters are all editable via the ‘Edit’ tab within the ‘Settings slider.’
1
1
Workspace
Workspace
2
Within the “Workspace” section of a deployment, a ‘Stats’ trigger appears at the top-right of the screen, providing access to high-level data about activity on the deployment.
Users’ “Workspace” includes a home screen with buttons that lead them to each of its seven sub-categories.
11
2
Workspace stats
1
With the off-canvas ‘Stats’ view revealed, users can see select data about the total number of reports, comments and users on the deployment.
Deployments that use checklists for its users to complete include the user’s progress in the ‘Stats’ off-canvas view.
1
2
2
Workspace dashboard
Every view within a user’s “Workspace” includes its page title paired with a link to its parent for navigation and sense of place.
Summaries of activity on the deployment include an icon to indicate the type of activity (e.g. comment, task, publish, new report, new user).
1
21
2
Workspace: All reports
When listing reports, users can user the ‘Edit’ button to toggle the view into ‘Edit mode,’ which would allow them edit multiple reports in one view.
Reports are summarized just as they are in the public ‘List’ view. Users can perform per-report actions by selecting the report to display the report’s detailed, full-screen view.
1
2
2
1
Workspace: All reports (edit mode)
Toggling the view into ‘Edit mode’ reveals a toolbar and checkboxes to the left of each report.
The toolbar includes triggers to flag, publish or manage duplicates among the selected reports
1
22
1
Workspace: Manage duplicate reports
Selecting a toolbar’s ‘Duplicates’ trigger displays a modal view for managing the selected reports. The button at the top collects the reports within the designated “primary report” and closes the view.
Any of the listed reports can be marked as the primary report, or removed from the list.
1
21
2
Tools
Tools
1
Like “Workspace,” users’ “Tools” includes a home screen with buttons that lead them to each of its seven sub-categories.
1
Tools: Reports & entities
Report and entity types are listed with the total number of reports (or entities) created using them. A ‘lock’ icon is used to indicate types that are disabled.
Users can create a new type at the bottom of each list.
1
2
2
1
Tools: Report type detail
After selecting a report or entity type, users see a summary of its fields and actions.
Users can create a new field at the bottom of the list of fields.
1
2
2
1
Tools: Report type field
After selecting a report or entity type’s field, users see a summary of its field type and related options.
1
1
Tools: Report type field (add)
After choosing to add a field to an existing report or entity type, users first select its field type. The selected field type will populate the view with the related options.
1
1
Tools: New report type (Step 1)
The step-by-step modal wizard provides a button to advance at the top-right of each view.
Users can select from a handful of built-in report templates, which include a summary of the field types included.
Users can optionally create a report type from scratch, requiring them to create all of its fields.
1
22
1
33
Tools: New report type (Step 2)
The second step in the step-by-step modal wizard asks the user to determine how they’d like new reports of this type to be processed.
1
1
