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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


Ushahidi

9Map with Categories


Submit Report

Login or Register

AboutViews

Accident Map Help


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


Ushahidi

10Public View


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


Ushahidi

11Map with Sets and Popup


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


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


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

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


Ushahidi

12List with Search


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


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


Ushahidi

13List with Search - Description-Only Reports

6

37


"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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


Ushahidi

16Report Details - Public View


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


Views

Update


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




Not published

Publish now

3


Ushahidi

17Report Details - Edit Completed Stage


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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.


Ushahidi

18Report Details - Edit New Stage

AboutViews Sets

Accident MapViews

3

15


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


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


Link

History Edit Public



Drunk Driver Kills Tree (The Monitor)

Private

5Comments Add



1

The report detail view is reorganised to !ow as a single column.1

21Mobile - Report Details

Submit Report


Submit Report

Jared Diamond


Accident MapTools

HelpHelp


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


Ushahidi

23Submit Report - Show Form


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


Ham hock kielbasa incididunt qui voluptate spare ribs flank pastrami do. Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola.

1


Ushahidi

24Submit Report - Deep Link

Sets Tab


Submit Report

Jared Diamond


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


Ushahidi

26Set List


Submit Report

Jared Diamond


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


5


Category 6

Published


5


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


Ushahidi

27Set Details


Submit Report

Jared Diamond


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.


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


Ushahidi

28Edit Set

Plugin Tab


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

About

The Team

Latest reportsThe Accident Map Project

Links



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





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


Submit Report

Jared Diamond


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.


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



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


Submit Report

Jared Diamond


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


Ushahidi

34Workspace - Dashboard


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace

CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard


Category 3

Published


5


Category 3

Translation



Category 6

Published


2


Category 5

Published

Next stage: None

Steve Burchovsky is editingNext stage: Translation

Next stage: None

Next stage: Approval

Search within 'All Reports' Advanced search


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


Ushahidi

35Workspace - Unpublished


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



Category 3

Published


5


Category 3

Translation



Category 6

Published


2


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


Ushahidi

36Workspace - Flagged


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace


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


5


Category 3

Translation



Category 6

Published


2


Category 5

Published

Duplicate Manager

Make primary

Mark 4 reports as duplicates

Close

Remove from list

Primary Report

1

3

2


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


"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


Submit Report

Jared Diamond


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


Ushahidi

40Tools - Reports

New Report Type Wizard


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Tools

Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions


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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Tools

Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions


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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



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.



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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



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



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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



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.



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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



Ushahidi

TitleMediaDescriptionLocationSubmitterIPAdd field

Email Administrators

Add action


Stage 2: Verification

Stage 3: Publishing

Add stage

Permissions


CancelSave



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


Submit Report

Jared Diamond


Accident MapTools

HelpHelp

Workspace



Ushahidi

CategoryReliabilityNotesAdd field


Stage 2: Review & Approval

Stage 3: Publishing

Add stage

Permissions & responsibility


CancelSave

Add action

Permissions & responsibility



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

Ushahdi 3.0 Design Framework

Technology

Transcript of Ushahdi 3.0 Design Framework