Unified UI about briefcase HOT 21 CLOSED

@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

from briefcase.

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.

from briefcase.

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.

from briefcase.

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

from briefcase.

@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

from briefcase.

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?

from briefcase.

@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.

from briefcase.

@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..

from briefcase.

@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?

from briefcase.

@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?

from briefcase.

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.

from briefcase.

@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?

from briefcase.

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.

from briefcase.

@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.

from briefcase.

@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

from briefcase.

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.

from briefcase.

@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.

from briefcase.

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

from briefcase.

@rclakmal thanks will have a look

from briefcase.

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

from briefcase.

Agreed that it's no longer relevant.

from briefcase.