Latest revision as of 13:03, 11 December 2015

Improving usability in Tracker Capture app

The task is to modify the current Tracker Capture app to enable view of previous data when entering new data.

To approach this, we will add a new column in the data entry table where users input new data points. We will also allow for the possibility to chose which entry they want to look at when registering new data. If we have any extra time, we will look at smaller adjustments in the interface that can improve the general usability of the application.

Team members

• Kristin Brænden (kribrae)
• Simon Oliver Ommundsen (simonoo)
• Ole Kristian Rosvold (olekros)

Repository

https://github.com/simonoliver1/dhis2-tracker

Requirements

We will add functionality to view previously recorded data while entering new data. This will require us to make changes to the current HTML-files, adding new columns to the data entry table. As it might be relevant to view data entered from different events than the previous one, we will set the previous event as default, but allow the users to chose which event they want displayed - e.g. through a drop-down menu.

Architecture and technology

As this is an existing app, we will build on the existing technology stack currently used in the Tracker App.

This includes working towards the DHIS2 API, and creating the necessary models and controllers in order to let users view previous data entries.

• HTML5
• JavaScript
  • Angular
  • Ajax
  • JSON
• CSS3
  • Bootstrap

Milestones

• Milestone 1: 8th November
  • Document features and architecture on Wiki
  • Show understanding of DHIS2 web apps
• Milestone 2: 22th November
  • First bare-bone version - static HTML
  • Uploadable as DHIS2 web app
• Milestone 3: 4th December
  • Finished, if applicable also with mobile app.
• Final delivery: 11th December
• Presentation: mid December

To do

• Set up
  • Download and install DHIS2 for local development
  • Create GitHub-repository
  • Create Trello board for collaboration
  • Get to know the source code
• Design user interface
  • Wireframe UI
• Programming
  • Query the API for the previous event's data
  • Extract all events from the same stage in the program
  • Map the data to the corresponding label
  • Edit HTML file to display the new data
  • Make corresponding style changes
• Nice to have
  • Create drop-down menu for choosing which event you want to see
  • Identify potential UI-changes to improve usability

Report and to do

Thursday 5th November

• Discussed the requirements
• Wireframed UI
• Downloaded software

Thursday 19th November

• Created static HTML-page

Wednesday 25th November

• Made the app uploadable
• Created API-call to get previous data
• Updated form to display previous data

Wedenesday 3th December

• Implemented functionality to choose event from a dropdown list

Wireframes

Alternative 1:

Show data from previous measurement within the input field itself

Alternative 2:

Show data from previous measurement in the previous column and add a drop-down field to let users choose measurement to compare

Screenshots

No previous event:

The user is currently viewing a data entry that only has one registered measurement. No drop-down menu or field is shown, as this is not an option

Previous event:

When a user clicks at en event, the data from the previous measurement is displayed next to the input-fields, to increase visibility and make comparisons easy

Select event:

The user can choose any registered event to compare with the data entry. The newly selected data is displayed without page reload