Design and implementation
5.7 Updated cross-platform MobiSAM client application
Data persistence
Data persistence allows the client application to preserve its settings from one invocation to the next. When storing a preference, a key is specified along with its corresponding value. This value may then be retrieved by using its key. Within the client application, the user’s preferred language, as well as SMS and e-mail alert preferences are saved to persistent storage. If ‘Keep me logged in’ is selected during log in, the necessary session information is also preserved.
5.7 Updated cross-platform MobiSAM client application
This section provides an overview of the modifications made to the cross-platform MobiSAM client application, guided by the results from the usability evaluation (see Chapter 6). First, the updated requirements and specifications are presented (Section 5.7.1). Design changes made to the UI and navigation (Section 5.7.2), as well as visualisation are then detailed (Section 5.7.3).
Modifications discussed in this section were performed during Iteration 3 of the life-cycle model (see Section 3.4.3).
Due to space restrictions, a detailed account of the technical implementation has been provided as an electronic resource. Please refer to electronic Appendix A.4 for more information.
5.7.1 Requirements and specifications
The usability evaluation, presented in Chapter 6, aimed to determine how intuitively participants were able to navigate within the cross-platform client application. In addition, the study invest
igated how effectively different visualisations were able to convey meaning, as well as evaluate the role which chart interactivity played in helping participants better understand poll results.
Feedback from the study identified several shortcomings relating to both the visualisation cap
abilities and usability of the client application (see Section 6.8). These shortcomings lead to an updated set of requirements, which were then clarified and noted, extending the client applica
tion’s original specifications. The following updated requirements were identified:
• shift the focus of the client application away from the answering of polls, to the reporting of specific service delivery issues;
• remove any ambiguous category names;
• remove bar chart visualisations;
• improve affordance to better indicate chart interactivity;
5.7. UPDATED CROSS-PLATFORM MOBISAM CLIENT APPLICATION 84
• allow the user to update their current suburb from within the client application, as well as provide suburb-specific results; and finally,
• prompt the user to save changes before navigating away from the Update profile screen.
While not all feedback and suggestions were included in the updated requirements, all issues raised by participants were considered. Issues that appeared more than once were given particular attention.
5.7.2 User interface and navigation
As the MobiSAM service was initially envisioned as a mobile phone-based polling framework, enabling the monitoring of basic municipal services through the regular answering of service delivery polls, the ‘Take a poll’ menu option seemed fitting. Results from the first usability evaluation, however, revealed that participants were more concerned about being able to report
specific service delivery grievances (see Section 6.8). Consequently, a selection of new screens were designed in order to reflect the client application’s shift in focus. Each new screen, as well as modifications to existing screens arc described next.
For information relating to the technical implementation details of the client application’s UI, please see electronic Appendix A.4.1.
Figure 5.9: Updated cross-platform client application running on all supported platforms (not to scale)
H o m e screen In an attem pt to shift the client application’s focus, the Home, screen menu was modified to include the option ‘Report a problem’, as illustrated in Figure 5.9. Importantly, the updated client application continues to allow the user to respond to service delivery polls via the
‘Take a poll’ menu option. Stylised icons arc now included alongside each menu option, further
5.7. UPDATED CROSS-PLATFORM MOBISAM CLIENT APPLICATION 85 clarifying their purpose. In addition, the ‘Exit’ menu option has been removed and placed as a soft key on the Java ME platform. This action is performed using the hardware back button on Android, BlackBerry OS and Windows Phone, prompting the user to confirm their action. A regular ‘Log out’ button is provided on iOS.
Report category screen Pressing the ‘Report a problem’ menu option navigates the user to the newly designed R e p o rt ca teg ory screen, shown in Figure 5.10a. The four basic services each municipality is tasked to provide are listed here: water, electricity, roads and sanitation.
An additional ‘Other’ menu option is included for unrelated service delivery issues. Similar to the H o m e screen, descriptive icons are included alongside each menu option. In an attempt to help guide the user through the reporting process, it was decided to include context sensitive information in the title of the screen. The R e p o rt ca teg ory screen, for example, shows the text
‘What type of problem is it?’ as opposed to detailing the steps taken: ‘Report a problems Report category’.
Available reports screen After selecting the desired report category, the user is presented with a list of available reports for the chosen category. As illustrated in Figure 5.10b, a blue arrow is included alongside each report. Once again, the screen title contains context sensitive instructional text: ‘What is the problem?’.
Reporting screen Figure 5.10c illustrates the R e p o rtin g screen. The screen’s minimal design is geared towards the reporting of service delivery problems, as opposed to the answering of service delivery polls. The name of the problem currently being reported appears in the title of the screen. For example, if ‘I want to report a water outage’ is selected from the A va ila b le rep o rts screen, this text is shown in the screen title. A text box is provided into which the user may enter the address nearest to the problem being reported, taking the form of a te x t resp on se
poll type (see Section 5.2). This is required so as to inform the municipality about the exact whereabouts of the issue. Two soft keys, ‘Back’ and ‘Send report’ appear when running on the Java ME platform. The back action is accessible via the hardware back button on Android, BlackBerry OS and Windows Phone devices, while ‘Send report’ appears as a regular button.
Both of these actions are represented by regular buttons on the iOS platform.
Report sent screen After sending a report the user is presented with the R e p o rt s e n t screen, shown in Figure 5.10d. As the backend server does not provide a summary of recently received
te x t resp o n se poll responses, no form of visualisation is provided. Instead, the screen simply informs the user that their report has been received and will be attended to within 24 hours.
Selecting ‘Done’ returns the user to the H o m e screen.
86
(a) R eport category screen (b) Available reports for ‘W ater’
(c) Reporting a water outage (d) R eport sen t screen
Figure 5.10: Updated cross-platform client application
5.7. UPDATED CROSS-PLATFORM MOBISAM CLIENT APPLICATION 87 Poll category screen As with the original cross-platform client application, selecting the
‘Take a poll’ menu option allows the user to respond to a variety of service delivery polls. First, the user is presented with the P o ll ca teg o ry screen which displays all available poll categories retrieved from the backend server. While the screen remains virtually unchanged from the original client application, results from the usability evaluation highlighted the importance of providing unambiguous category names (see Section 6.8). In an attempt to remedy potential ambiguities, each category name and category description was renamed via the MobiSAM web-interface. In addition, blue arrows are now included alongside each available category, as shown in Figure 5.11a. The screen title text was also modified and instead of showing a ‘breadcrumb’ trail of the steps performed, now shows the context sensitive text: ‘Select a category’.
Available polls screen After selecting a category, the user is navigated to the A va ila b le p o lls
screen. Modifications made to this screen include the inclusion of arrows alongside each available poll as well as updated screen title text (see Figure 5.11b). Instead of showing a ‘breadcrumb’
trail, context sensitive text takes its place: ‘Select a category’.
Poll response screen Selecting a poll navigates the user to a screen where they are able to respond to the poll. Design modifications made to this screen were cosmetic and included bolding the question text (for example, ‘How is your water pressure today?’) in order to better attract the user’s attention. In addition, the screen title now provides instructional text to the user: ‘Select a response’. Figure 5.11c depicts the updated P o ll resp on se screen.
Results screen Finally, after submitting a poll the user is presented with the R e su lts screen.
As illustrated in Figure 5.lid , the screen contains a numerical table summarising other residents’
responses. In accordance to feedback received from the usability evaluation, the screen now only shows responses from residents within the user’s current suburb, as opposed to Grahamstown- wide results. In addition, minor cosmetic changes were made, including rephrasing of the screen text. A soft key named ‘View chart’ is visible when running on the Java ME platform. This appears as a regular button on the remaining platforms. Pressing ‘View chart’ takes the user to the updated V isu a lisa tio n screen, which will be detailed in Section 5.7.3.
Update profile screen The user is now able to update their current suburb from directly within the client application, as shown in Figure 5.lie. All other options remain unchanged.
5.7.3 Visualisation
A primary objective of the usability evaluation was to determine how effectively different chart visualisations convey poll results to users (see Chapter 6). In particular, whether interactive
(a) Available categories (b) Available polls
(c) Answering a service delivery poll (d) R esults screen
(e) Update profile screen (f) Static pie chart.
Figure 5.11: Updated cross-platform client application
5.7. UPDATED CROSS-PLATFORM MOBISAM CLIENT APPLICATION 89
charts better help users understand poll results. While participant feedback relating to chart interactivity was positive, three-quarters (75%) of participants did not use this functionality (see Section 6.8.4). Upon further examination of the results, this may have been due to the fact that participants were unaware that the charts were interactive. Participants also indicated that instead of providing a blank chart (see Figure 5.8a), which users are required to ‘tap ’ to reveal details, they would prefer basic values to be included on the charts.
Figure 5.12: Updated interactive pie chart
This allows additional details to be revealed by tapping different areas of the chart. As parti
cipants showed a strong preference towards pie charts, bar charts were removed from the client application. As with the initial cross-platform client application, static charts are leveraged by
■ Java ME and BlackBerry platforms, while interactive charts are used by the remaining platforms.
For more information relating to the technical implementation details of the chart visualisations, please refer to electronic Appendix A.4.2.
Static chart design
Figure 5.Ilf shows the newly designed static image chart. Sectors of the pie chart are arranged clockwise in order of magnitude, with the size of each depicted as a percentage. Sectors are coloured differently to the original pie chart, making use of a more vivid colour palette. This was done in an attem pt to further improve the chart’s legibility. The chart now also makes better use of the available display area, allowing it to be viewed in its entirety without scrolling, thus reducing load on the user’s short term memory. In addition, the legend is now positioned alongside the chart when viewed on a handset with a landscape display. While appearing below the chart when viewed on a portrait display.