Ushahdi 3.0 Design Framework
-
Upload
ushahidi -
Category
Technology
-
view
1.619 -
download
1
description
Transcript of Ushahdi 3.0 Design Framework
Design Framework
Ushahidi 3.0 Design Framework ProjectDesigned by Small Surfaces for Ushahidi6 August 2012
This document provides a high level description of the user interface design the next major version of the Ushahidi platform.
Contained in this document are a set of annotated wireframes that illustrate the way in which the software should be organised and behave.
This document should be used by the Ushahidi team to continue to detail the design solution for the next major version of the platform.
Note: the icons used in this document are placeholder only, and are not intended to be used as the !nal visual assets.
2About This Document
3
8
22
25
29
33
39
41
44
50
Overview
Views Tab
Submit Report
Sets Tab
Plugin Tab
Workspace Tab
Tools Tab
New Report Type Wizard
Report Designer
Plugins & Themes
3Table of Contents
Overview
Map List
User Account
Views
Report Details
Sets
About
Workspace
Tools
Submit Report
Help
Tools
See following page for details
Illustrated in this document
Partially illustrated in this document
Not illustrated in this document
5Application Map - Overview
Illustrated in this document
Partially illustrated in this document
Not illustrated in this document
Export & Share
Advanced Search
Set Details
Create / Modify Set
Views
Sets
About
Workspace Dashboard
Filtered Report Lists
Comments
Checklists
Users & GroupsTools
Permissions
Reports & Entities
Appearance
Categories
Plugins
Settings
Duplicate Manager
6Application Map - Details
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Show:Categories | Stages
3
15
The Views tab is where users can visualise, understand and interpret the data that lives in a deployment.
1
The Sets tab is where users can create unique groupings of subsets of the data based on search queries. For example, a set could contain reports that contain a particular keyword associated with a particular location.
2
The About tab is an example of a tab that has been created by a plugin. In this case, the plugin has created a tab that can be used for written articles or the display of speci!c media.
3
The Workspace tab is where registered users can manage all the content that moves through a deployment on a day-to-day basis. The Workspace is where users manage reports, comments and keep track of their progress against checklists.
4
The Tools tab is where the system is con!gured and managed by those with administrative permissions.
5
1 2 3 4 5
6 7
Logged in users have access to their pro!le (password and other account details) through the link of their name. When the user places the mouse over this link, a menu is shown allowing users to either view their account pro!le or log out.
The user pro!le should allow users to specify which tab should be displayed by default upon login.
6
If the user clicks on the Map List icon, they are shown a list of all the maps available through this deployment. The user can also access account settings and overall deployment con!guration through the Map List (not illustrated).
7
http://somedeployment.com/accidentmap/
Ushahidi
7Design Elements
Views Tab
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Show:Categories | Stages
3
15
1
2
4
3
Users can select di!erent visualisations. Shown here are: map, list, timeline, heat map and media views. Views can be added by installing a plugin. Views can be removed (if they are a plugin) or disabled (if they are part of the core), so only relevant visualisations are available. Visualisations can also be made available only to users who have logged in to the system (i.e. hidden from the public)
1
Depending on the visualisation selected by the user, the appropriate visualisation is shown.2
The user can "lter the data that is shown on the visualisation using either Categories, Sets or Search queries.
3
Users can "lter the data shown in the visualisation. In this case, the user can select either individual categories to show on the map, or multiple categories (using the checkboxes on the right). The "lter persists as the user switches between visualisations.
4
5
The user can toggle the Categories view to show either Categories or a list of the di!erent Stages (to view report by progression through a work#ow).
5
http://somedeployment.com/accidentmap/
Ushahidi
9Map with Categories
CROWDMAP Maps & Plans
Submit Report
Login or Register
AboutViews
Accident Map Help
Categories Sets Search
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
3
15
1
3
Tabs may be placed in any order by system administrators. The visibility of tabs may be con!gured based on the permissions of the user. The example shown here illustrates how the Sets tab is hidden from members of the public.
1
Permissions may also be set for the di"erent views: in the example shown here, members of the public have access to only the map and list views.
2
A single report on the map is represented as a dot and coloured according to its primary category.3
Multiple reports of the same category are shown as a larger dot with a number.4
2
4
5
Reports that are associated with a region are shown as a dot, but when the user places their mouse cursor over the dot, the entire region is highlighted. In the example shown here, the reports associated with the region are from multiple categories, and so are shown in grey.
5
Category 5A
Category 5B
6
6If a category has sub-categories, the user can expand the list to show available sub-categories. Sub-categories are shown in the same colour as the parent category.
6
http://somedeployment.com/accidentmap/
Ushahidi
10Public View
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Type to find Set
Set 1
Set 2
Set 3
Set 12
Set 8
Set 4
Set 5
Set 6
Set 7
Show all
My Sets
All Sets
ListExport & Share
Hide unpublished
Last 24 hours | All
Man hits tree after skidding off road
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa..."
Category 3Today, 12:20 PM
5
Details
4
1 2
5
3
When the user places their mouse cursor over the toolbar, the di!erent visualisations are highlighted, and tooltips are shown as appropriate.
1
When the user places their mouse cursor over the toolbar, labels for the icons on the right-hand side are shown.
Export & Share allows users to either export the data shown in the current view & with the current "lter. This could include: CSV export, Embedding a map in a 3rd party web site, RSS feed, Downloading an image of the map. The options for exporting and sharing depend on the chosen visualisation.
Hide Unpublished allows logged in users to remove data from the visualisation that has not yet been published (shown as items with the lock icon on the illustration here).
The "nal "lter allows the user to "lter reports by recency (illustrated in more detail later).
2
If the user clicks on an individual dot on the map a pop-up is shown. For further discussion of map pop-ups, see later in document.
3
Both sets that have been identi"ed as 'Featured' by an administrator, and those which have been #agged by the user are shown at the top of the All Sets list.
5
If the user selects the Sets "lter, a list of both the sets that have been created by the user (My Sets) and all sets in the system (All Sets) is shown. For further discussion of Sets, see the section of this document dedicated to this feature.
4
http://somedeployment.com/accidentmap/
Ushahidi
11Map with Sets and Popup
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Bacon ipsum dolor sit amet ullamco"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Published
Rob EndersToday, 12:20 PM
5
All
Keyword
Category
Stage
Date
Location
Advanced search
All
Nakawa
Within 1 kms
Search
Clear search
AllMan hits tree after skidding off road"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob EndersToday, 12:20 PM
5
72 hours1 week1 month3 months
Export & Share
Hide unpublished
Last 24 hours All
Drumstick veniam, pork deserunt "Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 6
Published
Rob EndersToday, 12:20 PM
5
Ham hock kielbasa"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 5
Published
Rob EndersToday, 12:20 PM
5
Includes 2 duplicates
6
34
1
5
For logged in users, an indication is shown next to reports as to whether the report is published (and visible to the public) or not.
1
The user can !lter results to limit results to a time range in relation to the current time (in addition to any !lter applied using the standard !lters on the right-hand side). This range should automatically adapt based on report volume over time periods.
2
When the user places the pointer over an item in the list, the item is highlighted, and additional information and tools are shown (on right-hand side).
3
If the user has permission, they can edit or "ag the report. Additionally, the user can export or share the report.
4
If the user is logged in, and the report is broken into stages (see later sections on report design for details about this), the current stage is displayed.
5
The user can invoke an advanced search, if needed. While not illustrated here, the advanced search should function in a manner similar to the way the Edit Set screen behaves.
6
2
http://somedeployment.com/accidentmap/
Ushahidi
12List with Search
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Last 24 hours All
Today, 12:20 PM"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Published
Rob Enders
5
All
Keyword
Category
Stage
Date
Location
Advanced search
All
Nakawa
Within 1 kms
Search
Clear search
AllToday, 10:37 AM"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Translation
Rob Enders
5
Export & Share
Hide unpublished
Last 24 hours All
Yesterday, 4:55 PM"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Published
Rob Enders
5
Yesterday, 12:20 PM"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
5
Includes 2 duplicates
1
If the report form is simply a single textual description, the list should be shown in this way. The title is replaced by a timestamp.
If the user is collecting media only (e.g. photos), then the List view is not optimised for this kind of content. Users in this scenario would disable the List view, and use the Media view (the last icon on the toolbar illustrated here) instead.
1
Published
Rob Enders
When the user enters a query in the search box, all !elds that the user has permission to view should be searched (e.g. title, description, category, sets, submitter).
2
2
http://somedeployment.com/accidentmap/
Ushahidi
13List with Search - Description-Only Reports
6
37
Man hits tree after skidding off road
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham..."
Category 3Today, 12:20 PM
5
Details
6 reports
Bacon ipsum dolor sit amet ullamco Drumstick veniam, pork deserunt Ham hock kielbasaExercitation fugiat aliquip consequat
Single ReportSeveral Reports - Single Category
Man hits tree after skidding off road 5
Details
Single Report - Image
Today, 12:20 PM
Details2 more reports
Category 4
37 reports
Bacon ipsum dolor sit amet ullamco Drumstick veniam, pork deserunt Ham hock kielbasaExercitation fugiat aliquip consequat
Details34 more reports
Multiple categories
Several Reports - Multiple Categories
1
2
4
5
6
A toolbar is shown with functions that are available to the current user based on their permissions. Shown here are editing, !agging and sharing tools.
1
The header includes an indication of the number of comments on the report (if commenting is enabled), and the publishing status of the report (if the user is a logged in user).
2
If the report contains images, a thumbnail should be shown.3
If the report contains an image or video only, a large thumbnail should be shown.4
If the map datapoint refers to several reports of the same category, the number of reports and the category is shown long with the most recent reports from the category.
5
If the map datapoint refers to multiple reports from di"erent categories, the pop-up indicates this.
6
3
14Popup Variations - Standard Reports
Today, 12:20 PM
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do"
5
Details
Single Report - Description Only
Today, 12:20 PM 5
Details
Single Report - Image Only
1
2
If the report contains only a description, the header should display a timestamp, and the body only the content of the description.
1
If the report contains only a media item, the header should display a timestamp, and the body only a thumbnail of the media.
2
15Popup Variations - Single Content Type Reports
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
ViewsMan hits tree after skidding off road
Related
Link
Close
History Edit Public
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do.
Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola salami tongue ribeye incididunt. Do short ribs dolore, irure in prosciutto cow beef ribs brisket.
Sets
Category 3Stage 2
Rob Enders
Today, 12:20 PM
5Comments
Visible to public
5 3
Turducken fatback qui ut culpaCapicola dolore chicken ground round Lusmod consequat duis incididunt estFrankfurter ex drumstick Consectetur non tempor labore dolor
Add
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad. Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip filet mignon sint. Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger.
Drunk Driver Kills Tree (The Monitor)
Private
1 2 3 4
5
The Public tab shows how the report is represented to users who are not logged in. If reports are not visible to the public, this tab is not displayed.
If the user is not logged in, none of the tabs shown here are displayed (i.e. only the Public view is shown).
It is possible to reach this screen directly using a URL for the report (e.g. some deployment.com/accidentmap/r/43924
1
The Private tab shows all the report metadata (including both information published publicly, and information that is hidden from the public) in read only form.
2
The History tab shows a reverse chronological history of changes to the report, including information about who made what changes.
3
The Edit tab allows users to modify any aspect of the report they have permission to change.4
Users can explore other similar content, either reports that are related (generated computationally), or sets that this report is a member of.
5
http://somedeployment.com/accidentmap/
Ushahidi
16Report Details - Public View
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
Views
Update
Man hits tree after skidding off road
Close
In Edit mode, the user can step through each of the report stages.1
If a stage has been completed, the information is displayed in read-only format. If the user has permission, the information can be updated. This change will be recorded in the report History.
2
The publishing status of the report is displayed along with a button that allows the user to publish the report immediately. The button is disabled until all the mandatory report !elds in all the report stages are completed.
3
History Edit Public Private
Initial Report
Verification
1
2
Title
Description
Location Nakawa
Man hits tree after skidding off road
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do.
Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola salami tongue ribeye incididunt. Do short ribs dolore, irure in prosciutto cow beef ribs brisket.
Not published
Publish now
3
http://somedeployment.com/accidentmap/
Ushahidi
17Report Details - Edit Completed Stage
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
ViewsMan hits tree after skidding off road
Close
The user can enter data for incomplete portions of the report, where they have permission1
Once the user has made any necessary changes, work can be saved by pressing the Save button.2
History Edit Public Private
The police confirmed the accident details. Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
1
2
Notes
Reliability 80%
Called police
Called reporter
Not published
Verification
Initial Report
Save
Publish now
Verification Team is responsible for this stage of the report.
http://somedeployment.com/accidentmap/
Ushahidi
18Report Details - Edit New Stage
AboutViews Sets
Accident MapViews
3
15
Categories Sets Search
1
2
When displayed on a mobile device, the header adapts to show only limited tabs, the user login information if moved to a tab (see next screen) and the help link and submit report button are made smaller.
1
The !lters in the View tab are shown below the visualisation, docked to the bottom of the browser viewport.
2
19Mobile - View Map
AboutViews Sets
Accident MapViews
Categories Sets Search
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Featured1
When the user taps on any of the !lter icons, the !lters appear as an overlay placed on top of the visualisation.
1
20Mobile - Choose Visualisation Filter
AboutViews Sets
Accident MapViews
Man hits tree after skidding off road
Link
History Edit Public
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do.
Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola salami tongue ribeye incididunt. Do short ribs dolore, irure in prosciutto cow beef ribs brisket.
Drunk Driver Kills Tree (The Monitor)
Private
5Comments Add
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad. Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip filet mignon sint. Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger.
1
The report detail view is reorganised to !ow as a single column.1
21Mobile - Report Details
Submit Report
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Categories Sets Search
ViewsSubmit Report
Title Tree hits man
Description
Location
The tree was chasing
text FInd
Show advanced map tools
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola.
Cancel
SubmitPreview2
1
Contextual help is shown along-side the report submission form to help reporters provide more accurate or appropriate information.
1
Users can optionally preview a report before submitting it.2
http://somedeployment.com/accidentmap/
Ushahidi
23Submit Report - Show Form
CROWDMAP Maps & Plans
Go to Site >Jared DiamondAccident Map HelpHelp
Submit Report
SubmitPreview
If users come directly to the Submit Report form from a third party referring site or application, the user is shown a modi!ed version of the page.
The header is limited to showing only the map name and user tools, and a link to the main site.
In this situation, the form is not shown in an overlay.
1
Title Tree hits man
Description
Location
The tree was chasing
text FInd
Show advanced map tools
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola.
1
http://somedeployment.com/accidentmap/
Ushahidi
24Submit Report - Deep Link
Sets Tab
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Sets
All Sets
Set 1 Set 2 Set 3
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa.
Mollit laboris sunt, fugiat nisi officia sirloin kielbasa aliqua brisket consequat nulla cillum cow.
Shankle t-bone non strip steak.
Type to find Set
Minim excepteur prosciutto, turkey qui filet mignon pig.
Jerky bacon in, exercitation biltong consectetur pork loin hamburger deserunt leberkas corned beef.
Pig qui t-bone, aliquip ball tip swine ea tenderloin ut laborum.
5 new reports
47 2713
8 new reports
Set 12 Set 8 Set 4
122 1468
12 new reports
My Sets Create Set
FEATURED
If the user has created any Sets, those sets are displayed !rst. If the user has not created any Sets yet, some information about the purpose of sets should be displayed.
1
Sets that have been created by other users are displayed.2
Administrators can select sets to be 'Featured'. These sets are displayed !rst in the All Sets list.3
Users can choose to "ag individual Sets so they can easily return to them later. These Sets are shown after the Featured Sets.
4
The user can choose to display the Set in the Views tab. 5
Additional information about the Set is shown, including the number of reports and its visibility to the public.
6
1
2
54 6
3
http://somedeployment.com/accidentmap/
Ushahidi
26Set List
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Sets
Export & Share
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa.
Category 1 or Category 4Containing keyword "fast"Within 5km of Nakawa
Jared Diamond
Updated today, 12:20 PM
Private to you + 3 others
27 reports5 new reports
Set 3 View Edit
Man hits tree after skidding off road"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob EndersToday, 12:20 PM
5
Drumstick veniam, pork deserunt "Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 6
Published
Rob EndersToday, 12:20 PM
5
Ham hock kielbasa"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 5
Published
5
Me + Administrators
Hide unpublished
5
2
1
3
In the Set Details view, the user is shown a summary description of the Set and the search parameters that are used to create the Set.
1
Reports contained in the Set are listed in reverse chronological order. The user can paginate through the list of reports, but cannot perform any other search or !ltering actions on the data in this view. The user can view the details of the report (shown in the standard report overlay).
2
The View button allows the user to display the currently selected Set in the Views tab.3
If the user has administrator permissions, the user can make a set featured, which ensures that it is promoted in the list of All Sets for all users (see prior illustration).
4
Make Featured4
If the user places the mouse pointer over any permissions indication, more details are shown in an overlay.
5
http://somedeployment.com/accidentmap/
Ushahidi
27Set Details
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Edit Set 3
Save
Location Nakawa, Kampala, UgandaWithin 5 kms of
Cancel
and
Keyword FastAny field Contains
Add
Add location
Verify location
Time
Category Any
Stage Any
Reliability Greater than Moderate
/ /Between / /
Group Any
Name
Description
Set 3
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa.Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
1
2
The user can provide a name and description for a Set, and then de!ne the search parameters for the Set as appropriate.
1
Inline help is shown, as appropriate.2
3
By default, only the Name, Description and Keyword !elds are enabled. All other !elds are dimmed.
If the user places the mouse cursor over any dimmed !eld, the !eld is highlighted and enabled. If the user sets a criterion for the !eld, the !eld remains enabled and highlighted.
3
http://somedeployment.com/accidentmap/
Ushahidi
28Edit Set
Plugin Tab
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
About
The Team
Latest reportsThe Accident Map Project
Links
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad. Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip filet mignon sint. Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger.
More >
Capicola dolore chicken ground round esse anim
Consectetur non tempor labore dolor, nostrud qui kielbasa ball tip jowl short loin dolore.
Non incididunt ut, sint in in quis mollit shoulder est ham turkey do.
Turducken fatback qui ut culpa.
Lusmod consequat duis incididunt est frankfurter
Turducken fatback qui ut culpa.
Turducken fatback qui ut culpa.
Turducken fatback qui ut culpa.
Turducken fatback qui ut culpa.
1
The About tab is an example of a plugin-based tab. In this case, the plugin is designed to show summary or static information (so could be used to show general information about the deployment, for example).
There are several kinds of content blocks available, that can be enabled and customised by the user. The content blocks could include: written content, photographs, lists of recent reports, lists of links, a report submission form, or a small version of the map.
The user con!gures the behaviour and content of the tab in the Tools section.
1http://somedeployment.com/accidentmap/
Ushahidi
30Multiple Content Blocks
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
About
The Accident Map ProjectBacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad. Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip filet mignon sint. Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger.
Ea pastrami spare ribs non sed aute anim. Ex adipisicing irure ribeye laboris.
Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger. Ea pastrami spare ribs non sed aute anim. Ex adipisicing irure ribeye laboris. Elit mollit hamburger, voluptate pastrami exercitation ea dolore duis spare ribs ribeye ut commodo. Do chuck eu pork non turkey, ea esse ullamco aliqua nulla tongue officia ut.
1
This illustration shows how a longer article could appear within the About tab.1http://somedeployment.com/accidentmap/
Ushahidi
31Details of Individual Content Block
AboutViews Sets
Accident MapAbout
The Team
The Accident Map Project
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad. Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip filet mignon sint. Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille eu hamburger.
More >
Latest reportsCapicola dolore chicken ground round esse anim
Consectetur non tempor labore dolor, nostrud qui kielbasa ball tip jowl short loin dolore.
1
This screen illustrates how a longer article would be re!owed for display on a mobile device.1
32Mobile - Multiple Content Blocks
Workspace Tab
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboardDashboard
30%
Next: How mapping will help your project.
Recent Activity Statistics
Checklists
"Turducken fatback qui ut culpa."Anonymous Today 4:20 AM
"Capicola dolore chicken ground…"Gerald Durrell Yesterday 5:56 PM
Updated
New Comment
"Lusmod consequat duis incididunt est frankfurter"Jared Diamond July 13, 4:45 PM
Published
"Lusmod consequat duis incididunt est frankfurter"Anonymous July 12, 12:53 AM
New Report
487 ReportsReceived
88 CommentsPosted
New user registrationBart Engels July 11, 4:20 AM
"Capicola dolore chicken ground…"Gerald Durrell July 10, 5:56 PM
Updated
"Lusmod consequat duis incididunt est frankfurter"Jared Diamond July 10, 4:45 PM
Published
17 RegisteredUsers
8
9
The Workspace tab is dedicated to managing the user contributed content in a deployment (i.e. reports and comments). The Dashboard shows a summary overview of the status of the deployment.
1
The All Reports view lists every report in the system.2
The Report Type and Stage view allows the user to choose which kind of report they would like to see, or within each of those, reports of which stage they would like to view. See subsequent pages for more detail.
3
The Worklist view is visible only if there are reports that have people assigned as responsible for di!erent stages (see Advanced Report Designer for more details). All the reports for which the current user has been identi"ed as responsible for are listed in this view.
4
Any reports the user has Flagged anywhere in the system is shown in the Flagged view.5
The Comments view lists all comments in the system and allows the user to moderate comments as appropriate.
6
The user can access checklists for setting goals and checking progress.7
1 2 3 4 5 6 7
Recent Activity shows everything that has been happening in the deployment in reverse chronological order.
8
The user's progress with respect to their goals set in Checklists is shown to encourage continued work on checklists and goals.
9
http://somedeployment.com/accidentmap/
Ushahidi
34Workspace - Dashboard
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
Bacon ipsum dolor sit amet ullamco"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Published
Rob EndersToday, 12:20 PM
5
Man hits tree after skidding off road"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob EndersToday, 12:20 PM
Drumstick veniam, pork deserunt "Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 6
Published
Rob EndersToday, 12:20 PM
2
Ham hock kielbasa"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 5
Published
Next stage: None
Steve Burchovsky is editingNext stage: Translation
Next stage: None
Next stage: Approval
Search within 'All Reports' Advanced search
Includes 2 duplicates
3
2
6
4
If the deployment is using only simple reports (no work!ow, only submit & publish), the worklist is not shown.
If the user does not have permission to moderate comments or manage the checklist, these items are not displayed.
1
If another user is currently editing a report, this is shown. The user cannot edit a report while another person is also editing the same report.
3
If the reports have multiple stages (as speci"ed in the Advanced Report Editor), then the next stage is displayed.
4
Select All
Accident Reports - Awaiting Review... FlaggedAll ReportsDashboard All Reports1If a report has been marked as having duplicates, this is indicated in the list.2
The tools available here are: Edit, Flag, Export & Share, Delete and Mark as Duplicate. If the user clicks Mark as Duplicate, the report is added to the Duplicate Manager list.
5
5
When the user enters a query in the search box, all "elds that the user has permission to view should be searched (e.g. title, description, category, sets, submitter).
If the user selects Advanced Search, a screen similar to the Set Editor screen should be displayed to allow the user to construct a complex search query.
6
Duplicate Manager 3
http://somedeployment.com/accidentmap/
Ushahidi
35Workspace - Unpublished
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
Bacon ipsum dolor sit amet ullamco"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Published
Rob EndersToday, 12:20 PM
5
Man hits tree after skidding off road"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob EndersToday, 12:20 PM
Drumstick veniam, pork deserunt "Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 6
Published
Rob EndersToday, 12:20 PM
2
Ham hock kielbasa"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 5
Published
Next stage: None
Steve Burchovsky is editingNext stage: Translation
Next stage: None
Next stage: Approval
Flagged
Un-flag Publish Delete Duplicates
Accident ReportsAwaiting Review & PublishingPublished
Hospital Status ReportsAwaiting VerificationAwaiting Review & PublishingPublished
3
2
1
Users can select multiple reports in the Workspace views. Once multiple reports have been selected the toolbar at the bottom of the screen shows bulk actions that can be carried out on the reports.
1
In this menu, users can see each report type that has been created for the deployment, and each of the stages that the reports have. Users can choose to view just a particular kind of report, or a particular kind of report at a particular stage.
2
When the user has selected multiple items using the checkboxes, the toolbar at the bottom of the screen changes to show bulk actions that can be carried out on the reports. If the user selects Duplicates, the selected reports are added to the Duplicate Manager.
3
Duplicate Manager 3
http://somedeployment.com/accidentmap/
Ushahidi
36Workspace - Flagged
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
Any reports that the user has added to the Duplicate manager are listed here.1
The user can mark all the listed reports as duplicates. The !rst item in the list will be made the primary report for the purposes of display.
2
The user can mark the report as primary (in which case the primary report moves to the second position in the list).
3Bacon ipsum dolor sit amet ullamco"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Published
Rob EndersToday, 12:20 PM
5
Man hits tree after skidding off road"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob EndersToday, 12:20 PM
Drumstick veniam, pork deserunt "Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 6
Published
Rob EndersToday, 12:20 PM
2
Ham hock kielbasa"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 5
Published
Duplicate Manager
Make primary
Mark 4 reports as duplicates
Close
Remove from list
Primary Report
1
3
2
http://somedeployment.com/accidentmap/
Ushahidi
37Workspace - Duplicate Manager
ToolsWorkspace
Accident Map
ProfileWorkspace
Worklist
Bacon ipsum dolor sit amet ullamco
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Published
Rob Enders
Today, 12:20 PM 5
Man hits tree after skidding off road
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do..."
Category 3
Translation
Rob Enders
Today, 12:20 PM
Next stage: None
Steve Burchovsky is editing
Next stage: Translation
Search within 'Worklist' Advanced
The user can scroll the available tabs. In this illustration, the second set of tabs is shown. Note that the user pro!le is now a tab rather than a text link as shown in the desktop design.
1
When shown on mobile, the di"erent views are made available through a drop down list.2
1
2
38Mobile - Worklist
Tools Tab
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions Reports & Entities
Report Types
Basic Report Accident Report New Report Type
Entity Types
Hospitals
Hospital Status
New Entity
Disabled
Active
12Entities
Active Active
0Reports
187Reports
45Reports
8
1 2 3 4 5 6 7
9
The Tools tab is for deployment administrators to manage the con!guration of their deployment. The Users & Groups section is used to manage the people with permission to log in to the deployment.
1
The Permissions section is used to manage the level of access that di"erent groups have within the deployment. This is focused on the di"erent tabs and views that people have access to (e.g. that members of the public cannot see the Sets tab). Permission management for individual reports is achieved through the Report Designer.
2
The Reports & Entities section shows the di"erent kinds of reports that can be submitted through the deployment, and what kinds of entities exist in the system (e.g. for collecting sensor data).
3
The Appearance section is used for managing components such as themes or the organisation of the tabs.
4
The Categoies section is used to manage the categories that exist in the deployment.5
The Plugins section is used to install and enable plugins. Additionally, any con!guration of plugins should be handled through this section.
6
The Settings section is used to handle basic system con!guration (e.g. URL, site name).7
The user can create multiple di"erent report types. Each report type is a form template.8
The user can create multiple di"erent entity types. Entities are used when multiple reports need to be associated with a static entity within the system (e.g. gathering sensor data). Each entity has its own set of metadata (e.g. Hospital name, Hospital Address), and must be associated with a speci!c form which contributes additional metadata to the entity (e.g. the Hospital Status form, which could include the number of available beds).
9
http://somedeployment.com/accidentmap/
Ushahidi
40Tools - Reports
New Report Type Wizard
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions
http://somedeployment.com/accidentmap/
Ushahidi
Choose report type
Basic Report Photo Checkin
TitleDescriptionLocationCategory
PhotoDescription
News Gathering
TitleDescriptionLinksCategoryReliability
Bacon ipsum
TitleDescriptionLocation
Blank Report
Design your own report from scratch.
Cancel
Next
1
2
When users create a new report type, a wizard is displayed. The !rst step of the wizard o"ers the users di"erent built-in report templates. This set of 5-10 templates should address the needs of the majority of users without customisation.
1
Users can choose to create a blank report. If the user chooses this option, the wizard completes in the next step, and the user can then use the Report Designer to modify the report.
2
42New Report Type Wizard - Choose Template
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions
http://somedeployment.com/accidentmap/
Ushahidi
Submitting and reviewing reports Cancel
Next
Who is allowed to submit this kind of report?
Only registered users
Anyone
How should it be published?
The report should be published immediately
The report should be reviewed and approved before publishing by
Should people be notified when a report is submitted?
Yes
No
All registered users
Back
Administrator
1
If the user chooses a report template, a series of screens are shown that ask the user basic things about how the report should be handled. This will alleviate the need for the majority of users to make use of the Report Designer. Only one screen from this !ow is illustrated here.
1
43New Report Type Wizard - Choose Settings
Report Designer
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
http://somedeployment.com/accidentmap/
Ushahidi
Accident Report
CancelSave
Location
Add field
Switch to Advanced Report Designer
Kampala, Uganda VerifyDefault location
LocationField title
Field type LocationTitle
Description
Notifications
Approvals
Category
PreviewDesign
Provide a clear and complete description of the accident, including the kind and number of vehicles involved.
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
1
4
2
3
The Report Designer is used to create and modify report forms. The Report Designer can only be used on non-smartphone devices (larger-screen devices such as laptops or tablet computers).
The Simple Report Designer is used for creating reports that have only one or two stages (one stage would be for immediate publication on submission, two stage would be for moderation before publication). Additionally, the Simple Report Designer supports only simple noti!cations and approvals rules.
The user is presented with a list of !elds that can be re-ordered (by drag and drop) and con!gured.
1
The !eld that is selected for editing is highlighted.2
The characteristics of the !eld can modi!ed. The user can specify many characteristics of the !eld, including who is able to edit the !eld (either members of the public upon submission, or administrators of the deployment). Any more complex permissions management requires the Advanced Report Designer.
3
The user can preview a form to ensure the design is working during the design and editing process.4
Basics
Help
Advanced
Visible to Public
Field ID DESCRIPTION
Editable by Public
Mandatory field
45Simple Report Designer - Modify Field
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
http://somedeployment.com/accidentmap/
Ushahidi
Location
Add field
Long text
Photo or VideoPhoto
Video
Short text
Number
List of options Yes / No
Link
Introduction
Date & timeReliability
Accident Report
Switch to Advanced Report Designer
Title
Description
Notifications
Approvals
Category
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
PreviewDesign
CancelSave
1
When the user chooses to add a !eld, a palette of !eld choices are shown.1
The user can click on any !eld type to add it to the form (in which case it is added to the end of list of !elds), or drag and drop it into the sequence of form !elds.
2
The user can con!gure who will be noti!ed when the form is submitted.3
The user can specify the approval rules for the form. With the Simple Report Designer, the only kind of approval possible is Administrator approval. For more complex approvals (using speci!c groups of users, for example), the Advanced Report Designer must be used.
4
3
4
2
46Simple Report Designer - Add Field
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
http://somedeployment.com/accidentmap/
Ushahidi
TitleMedia
Email AdministratorsAdd action
Stage 1: Initial Report
Stage 2: Verification
Stage 3: Publishing
Field name
Add stage
Permissions
PreviewDesignAccident Report
Description
LocationSubmitterIPAdd field
CancelSave
Visible to
Description
Field type Text field
Max. characters 50
Public
Field ID DESCRIPTION
Mandatory field
Editable by Public
Help Provide a clear and complete description of the accident, including the kind and number of vehicles involved.
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
Basics
Cannot switch to Basic Report Designer
1
The Advanced Report Designer allows the user to create forms that have multiple stages, have varied permissions for each stage, and complex actions that are carried out at the end of each stage.
Stages are used to build work!ows within the platform. For example, if a report needs to be veri"ed before publication, a Veri"cation stage could be added.
Permissions can also be assigned to each stage, so particular people have access to modifying only particular aspects of reports.
Additionally, it is possible to nominate individuals or groups as responsible for a particular stage, in which case relevant reports will appear on their Worklist (in the Workspace).
1
2
Some "elds are not published to the public. Fields that are private to the logged-in users only are di#erentiated using an icon.
2
Advanced
Mandatory field
47Advanced Report Designer - Modify Field
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
http://somedeployment.com/accidentmap/
Ushahidi
TitleMediaDescriptionLocationSubmitterIPAdd field
Email Administrators
Add action
Stage 1: Initial Report
Stage 2: Verification
Stage 3: Publishing
Add stage
Permissions
PreviewDesignAccident Report
CancelSave
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
Containing
What to do
To
Name
Send email
Email Administrators
Report
Administrators
Action
1
At the end of each stage, multiple actions can be carried out automatically. This could include email noti!cation, sending data to third party systems through standard web APIS, sending messages to Twitter, etc. This could be extended through plugins.
1
48Advanced Report Designer - Modify Action
CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident MapTools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
http://somedeployment.com/accidentmap/
Ushahidi
CategoryReliabilityNotesAdd field
Stage 1: Initial Report
Stage 2: Review & Approval
Stage 3: Publishing
Add stage
Permissions & responsibility
PreviewDesignAccident Report
CancelSave
Add action
Permissions & responsibility
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat.
Add
Administrators can edit this stage
Choose user or group
Responsible for this stage (will appear on worklist)
Andrew Murray can edit this stage
Responsible for this stage (will appear on worklist)
1
3
2
For each stage of a report it is possible to de!ne permissions (who can modify this stage of the report) and responsibility (who is in charge of taking the report through this stage). Those who are responsible for the stage will have the reports at this stage show on their Worklist in the Workspace.
1
The user can add users or groups to this of those with permissions and responsibility for the stage.2
Users or groups can be removed from the permissions and responsibility list. There must be at least one person or group in the list.
3
49Advanced Report Designer - Modify Permissions & Assignment
Plugins & Themes
Plugins
Users can install plugins to Ushahidi. The plugins allow the users to modify the appearance and behaviour of the system.
Users should be able to install plugins that achieve the following e!ects:
Add new view to the Views tabAdd new tabCon"gure permissions for views and tabsAdd custom settings UI for both views and tabsAdd new kinds of data types to Report DesignerAdd new kinds of actions to Report DesignerAllow report data to be published to third party applications and services
Further discussion and investigation is required to fully de!ne the capabilities granted to plugins.
Themes
Users can install custom themes. The themes allow the users to modify the appearance of the system.
Users should be able to install themes that allow them to change a subset of the site CSS achieving the following e!ects:
Change colour scheme of header area (including both colours and any image assets)Change colour scheme of body area (in fairly limited ways)Change logo
Themes should allow for users to create 'single tab themes' that do not show any of the tabs to members of the public (thus showing a simpli"ed header area to non-logged-in users.
Further discussion and investigation is required to fully de!ne the capabilities granted to themes.
51Discussion
Gabriel White, August [email protected]
www.smallsurfaces.com