UI fields descriptions missing - In-App help

[anarcat]

The android app doesn't display the help text for the various fields it shows to the user. this can be pretty confusing to someone who never used syncthing!

i am not sure how this is usually fixed in android, but this is definitely a significant usability issue.

coming from https://forum.syncthing.net/t/first-time-user-usability-review/6974/3, where i was asked to create this bug report.

[Nutomic]

Thanks.

@veniosg I don't really see a way to do this in the current layout of FolderFragment/DeviceFragment. I think we should switch back to PreferenceFragment for those, with title/summary, and a dialog for editing (but I wanna keep the icons, they're nice). What do you think about this?

[veniosg]

The design is purposely missing the labels as they would clutter the interface a lot by adding what I viewed as unnecessary/duplicate information - essentially replicating how the Calendar app behaves.

I can see where @anarcat is coming from though. A generally accepted solution for this problem in form input on Android is wrapping the EditText fields in a TextInputLayout and letting the system handle showing the labels when the hint is not visible anymore.

You can see how this looks here: https://www.youtube.com/watch?v=7Y8JHuze07w

P.S. I switched the implementation to normal views as it gives flexibility on the UI implementation and visuals. Going back to preferences would only strip away the option of customising the interface as we please. The way it's currently structured allows us to replicate the visuals of preferences if we wish but to be honest I see this as the poorest option both as what the end result will look like and considering the effort required.

[anarcat]

Yeah so, I understand the need for simplicity here, and it looks great! But for the Addresses field (well, the one with the "chain" logo - heck, I had to look it up in the desktop GUI :), it is really not obvious what's going on. Maybe like in the GUI this should be collapsed by default? See https://github.com/syncthing/syncthing/pull/2830

Most of the other fields are fairly self-explanatory... but help never hurts!

[Nutomic]

@veniosg That looks pretty nice! But I'm not sure if it works in our case, because we'll need 1 - 2 sentences of description per field. And I'm not sure about the argument against preferences, because that's exactly what those fragments are. And I think preferences can also be costumized in a very similar way. That said, I'm lazy and would prefer to not rewrite everything :D

@anarcat Collapsing would make sense if we were running out of space, but I don't think that's currently an issue. Even if it's collapsed, we should have a description there.

[veniosg]

@Nutomic I read descriptions as "labels", I probably misunderstood what @anarcat suggested. Given the lack of space, we could adapt the web approach. I'd suggest adding a "help/question mark" option on the actionbar for the editor pages and launch an activity or a dialog that has sections explaining each option. Basically header = icon & label and section text = long description as seen on the web. I really hope I'm explaining the idea clearly. Should be fairly straightforward from a user point of view, easy to implement, and doesn't depart from the visual language/style at all. Heck, I could even do that during the weekend. BTW agreed on the laziness point, preferences are customizable but not to the same extend or as easily as normal views :)

[Nutomic]

I'm not sure I understand what you mean. You want to add a new Activity/Fragment only with descriptions for all the settings? That sounds like no one would bother to read it.

And I don't know what you mean with "header = icon & label and section text = long description as seen on the web". Maybe you can do a mockup?

[veniosg]

Yeah thought I would need to :/ Will do on Saturday or tomorrow if I get the time.

On Fri, Mar 18, 2016 at 12:05 AM Felix Ableitner notifications@github.com wrote:

I'm not sure I understand what you mean. You want to add a new Activity/Fragment only with descriptions for all the settings? That sounds like no one would bother to read it.

And I don't know what you mean with "header = icon & label and section text = long description as seen on the web". Maybe you can do a mockup?

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/syncthing/syncthing-android/issues/585#issuecomment-198138976

[Nutomic]

Yeah no hurry, I probably won't have time to implement this very soon.

[ian-kelling]

Just want to chime in, first time using syncthing, I add device, I see a text field which says "dynamic" with a completely unfamiliar icon next to it. There is no way I could figure this out without googling. Further down, a boolean toggle for "introducer", same story. This is a tool for getting things done, not an art project, and it's got horrible usability. A paragraph of text which is not "pretty" is 100x better than being completely cryptic.

[Nutomic]

@ian-kelling I think the assumption we had is that most people are also using Syncthing on the desktop, and know the settings already. But that's obviously wrong, and we have to improve this.

@veniosg Any update on your mockup? ;)

[ian-kelling]

@Nutomic, yes. The natural path I went down for my first use was to install on my desktop, install on my phone, then do add device on my phone, use the qr code scanner to get the id of my desktop, then be presented with these fields I did not understand.

[veniosg]

@Nutomic Oops, I was busy and it completely slipped my mind! I will try to do it during the weekend, if I don't manage though I will still let you know :-)

[veniosg]

Here's the idea I was trying to describe. The thinking behind this is that there is just not enough space on the screen to always show the text on the main fragment, and adding buttons to expand/show individual help panels will clutter the interface and end up hindering usability. I am making the assumption that a user confused by the options will know to press the question mark.

[Nutomic]

Did you write those texts yourself? They're quite long compared to those in the web gui.

Anyway, I'm still not really convinced that this is better than a normal settings screen from a UX perspective. Sure, it looks much nicer, but there aren't even titles for each setting, and you have to open a seperate dialog to find the summaries.

[veniosg]

I copied the text from the Web UI, I'd assume it looks longer because there's more wrapping as the screen is narrower. I still think this strikes a good balance between good looking and usable, as to be honest not many would want to use a UI that doesn't look good; but again, this is just my take :-) As for the titles missing, I think this is a different issue and is easier to remedy from a visual and implementation standpoint - it will make the screen a bit more busy but that may be a worthy tradeoff.

If you do decide to switch to a settings screen look and feel, I'd strongly suggest that we do it by only changing the UI/layout files and keep the code agnostic of anything Preferences related as this would only take away from our ability to modify both the visuals and the behaviour of the editor screens and will also make the editors look much blanter.

@anarchat what would your take on this be?

On Sun, 17 Apr 2016, 9:27 p.m. Felix Ableitner, notifications@github.com wrote:

Did you write those texts yourself? They're quite long compared to those in the web gui.

Anyway, I'm still not really convinced that this is better than a normal settings screen from a UX perspective. Sure, it looks much nicer, but there aren't even titles for each setting, and you have to open a seperate dialog to find the summaries.

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/syncthing/syncthing-android/issues/585#issuecomment-211108498

[Nutomic]

Ah right, I checked the wrong texts actually.

If you can find a way to include the settings titles, it would probably be fine. But feedback (especially from new users) would be really useful here.

[ian-kelling]

@Nutomic, what do you mean by titles? Every field has a label / title / some word describing it, which seems perfectly fine to me. As a new user I think veniosg's pics look excellent.

[Nutomic]

But the titles are only visible if the fields are empty. I'm not sure if that's enough.

[wweich]

I think @veniosg is planning to implement the labels like it is done in the video he linked in comment#3: https://www.youtube.com/watch?v=7Y8JHuze07w

[veniosg]

I forgot about that option as it was shot down on grounds that the descriptions are what mattered, but that does seem like a good in-between solution (using this to show titles and also keeping a help dialog for the descriptions) :)

[Nutomic]

Yeah, that sounds good to me :)

[Catfriend1]

@veniosg What is the status on this from your side? Maybe you could point me to your branch if you haven't time to complete it yourself and need help on this?

[veniosg]

Hey Catfriend, it's been a while but I don't think I ever started this, feel free to work on it! From what I've seen so far all you would need to do is wrap the existing edittexts with this https://developer.android.com/reference/android/support/design/widget/TextInputLayout. Hope this helps!

[Catfriend1]

Hmm would it be okay for the first step to show the question mark and link to Syncthing docs.

[veniosg]

Oh I forgot about the help dialog. It most likely was a simple DialogFragment with setView called on the dialog builder, passing it a scrollview, containing a linearlayout, itself containing textviews (one for title with a drawableLeft and one for description). I could check on another hard drive just in case but I'll only have access to it in a week. Given how simple this would be to recreate maybe it's worth just going ahead with it :)

P.S. I believe the text appearances used where AppCompat.Subhead and AppCompat.Body1 respectively.

[Catfriend1]

Given the additional maintenance having help texts live within the app beside the public documentation, I'd suggest for a start to link to the most accurate fitting page with information on docs.syncthing.net

[Catfriend1]

@veniosg Can you please upload your work to your github if it's still available on your hard drive?

[veniosg]

Just had another look but I couldn't find any workspace with Syncthing on any drive. Must have been wiped since I did this :/

[Catfriend1]

@veniosg Ok, thanks for checking.