Unified UI

[yanokwa]

ODK Briefcase is a Java application for fetching and pushing forms and their contents. It helps make data from millions of ODK campaigns portable. On first launch, Briefcase currently displays a screen with a description of the program and its functionality. One part of this project will involve rethinking how a user gets to know how Briefcase works and sets up a Briefcase storage directory.

Additionally, Briefcase is separated into four utilities:

• the main one which is used to push, pull and export form instances
• a preference clearer for the main utility
• a character set converter for CSVs
• a blank form uploader

Currently, only the main utility is packaged for release so the other ones are not accessible by non-developers. Having a single application will make the secondary functionality usable by a broader range of users. The UX challenge here will be making the functionality clear to users and logically connecting it together.

Bonus: Add the ability to convert forms from XLSForm to XForms, probably by using pyxform (Python).

[techfreakworm]

Hello,
I have an idea for improving UX for a clear understanding of the functionalities.
Idea is to have translucent JFrames in Oval or Circular shapes just above the function/title/any other attribute of which demo is to be given.
Example of transparent JFrame.
A guided demo will be there, information of which would be provided with translucent windows.
Should I prepare a UI Mock using Image editing tools or using JAVA API?

[yanokwa]

@techfreakworm The most important thing is the improving the user experience from first launch and through the pull/push/export workflow. Start by using the app first, then sketch out low fidelity mockups, and post those for feedback.

[rclakmal]

@yanokwa
I came up with this intro step mockups to introduce briefcase and functionality to new users.
ODKBriefCase UX.pdf

Let me know your feedback. In the mockups, there would be "image not found" containers. My idea is we can place some gif/video to guide users on how to use the functionality.

Something like this..

[yanokwa]

@rclakmal For an application this straight-forward, I'm not sure a first run tutorial is needed. If you were to re-work the entire user experience, how would you restructure it to make it more intuitive without requiring a first run tutorial?

[rclakmal]

@yanokwa Thanks. I understand your argument.

At this point, I have couple of questions before moving forward...
Do you have any comments in the past from actual users about the user experience of push/pull/export windows? And the target user group for briefcase, are they supposed to be familiar with the concept of push/pull/export? Also, how many active users do we have for this desktop app? any demography data about the users?

[yanokwa]

Do you have any comments in the past from actual users about the user experience of push/pull/export windows?

None. My guess, and it really is a guess, that most people pull from Aggregate/Collect and export.

And the target user group for briefcase, are they supposed to be familiar with the concept of push/pull/export?

I would guess that current users are familiar. New users, I don't know. I'm guessing they know export. Many of our users are not technically sophisticated, so the application does need to be simple.

Also, how many active users do we have for this desktop app? any demography data about the users?

Unknown. According to the ODK website there have been 34,000 downloads. It might be good to add some analytics. Perhaps you can file an issue.

[Giannis13T]

Hello,
The idea I came up with to help users better understand the functionalities of the application is a "Help" JButton. When the user clicks on the button it will prompt a new window showing imformation (using HTML) about pull/push/export as well as general information about what briefcase is.
Also, we could show a small information message when the user hovers over an item to indicate what the item is used for.
Please let me know what you think of my idea.

[yanokwa]

@Giannis13T For an application this straight-forward, I'm not sure a help button is needed. If you were to re-work the entire user experience, how would you restructure it to make it more intuitive?

[yanokwa]

He's an ideal to get the discussion moving. I wonder if we can simplify the abstraction even farther. So why not UX that's built more like an FTP/client. So you have a list of forms on the server on one side, and the list of forms on the other side. If you select server side forms, you can then download them. If you select local forms you can export or push.

This is a screenshot from an FTP client. Hopefully it helps get the idea across.

[Giannis13T]

I will agree that this is a lot simpler and better to help the user get familiar with briefcase. If the pattern in the image you posted is used, I would also suggest that we use a text area below the lists to show the details of the pull/push/export procedure, so as not to include the "details" button next to every form.

[rclakmal]

With addition to the discussion at slack, also posting the couple of mockups I came up for further feedback and discussion from other students and project members..

Option with action buttons and checkboxes.

Option with drag & drop for push/pull and a "right click menu" for other options

[yanokwa]

@rclakmal I like the first one because being able to select multiple forms at once is important, but we should have right-clicking on individual forms like the second one.

ODK Briefcase also has the ability to pull data from an SD card (which is local). Can you try mocking that up using this two-pane system as well?

I agree with @Giannis13T that we'll need some sort of place in the UI that prints out details.

[rclakmal]

@yanokwa and all,
I believe we could keep the form source selection somewhat similar to the existing UI. On top of the two-pane system, you have a connection panel, which always contains a drop-down box as the first UI element with all the input sources (aggregator, mounted sd card) as choices. The second line of UI elements will dynamically change as per the drop down selection.

With Aggregator

With Mounted SD card

[rclakmal]

As for the details, why don't we simply provide a details action button and then create a popup dialog. This will allow the user to check out details for multiple forms in a single go.

[rclakmal]

@yanokwa and @lognaturel
Could you pls explain a little bit about the use cases of 3 sub-functionalities?

• Preference clearer for the main utility (I guess this to clear the briefcase storage location? )
• Character set converter for CSVs -
• Blank form uploader

[icemc]

@yanokwa it will be great to know the exact functionality of the other utilities. As @rclakmal requested, since it will help the developer know where to place them in the UI design.

[rclakmal]

@icemc In the #briefcase-code slack channel, there are some information about these 3 sub utilities provided by @yanokwa and @lognaturel. Have a look :-)

[icemc]

@rclakmal thanks will have a look

[lognaturel]

@rclakmal @icemc Good question. Just so we also have it here for future reference:

• No one seems to remember why the preference clearer was made a separate thing. It seems it could easily be a "reset all" button in settings. This won't even make much sense until there are more settings to clear.
• See this thread for information about the character set converter
• See this page for information about the form uploader

[ggalmazor]

I don't know if this issue is still relevant, since it was to support a gsoc'17 candidacy.

[yanokwa]

Agreed that it's no longer relevant.