Habitica: New Edit functions requires more scrolling on smaller screens

[cTheDragons]

General Info

User Id: bc10ec41-4213-4482-bbb8-558e3c3ea8d5
Opera 42.0.2393.85
Windows 10 32-bit
Screen Size: 1368 X 768

Description

With the new edit function I now I have to scroll much more. As

• the text is much bigger and therefore I can't see all my task details without scrolling
• There is no save option at the top of the edit task now. {EDIT by Alys: a save button will be added in https://github.com/HabitRPG/habitica/issues/8316}

I realise you have the defaults for tags and advance options hidden, however 60% of the time I am editing the advance options.

Could we please :

• make the text smaller? and possible use 2 columns. Most website screens are wide. (except on phones) and
• put a save delete option at the top again? {EDIT see https://github.com/HabitRPG/habitica/issues/8316}

Thanks

---

_edit by Alys: This issue is now for discussing whether we should make the text smaller and/or use two columns._

[Alys]

I've decided to break out the save button problem into a separate issue for a quick fix:: add "Save & Close" and "Cancel" buttons to the top of the task edit screen - Issue #8316 · HabitRPG/habitica

I'm marking this issue as suggestion-discussion for consideration of two columns (an interesting idea!!) or a smaller font (which might have its own usability issues, although if it's larger than the standard site font, we could probably shrink it down without problems). For having two columns, we'd want to check that it worked for players using tablets with narrow screens - horizontal scrolling would need to work.

I'm making some minor adjustments to the top post to indicate the change in focus for this issue.

[mandyzhou]

Would it be possible to lessen the padding/vertical space between fields? I feel like there's room to make the layout more compact without sacrificing font size or usability. There's also a double horizontal line that's taking up space between Task Alias and Difficulty -- not sure why that's there.

[Alys]

Additional comments from Gray (3fd1b7e5-7fa1-47d9-8a08-46850da7d387) in the Report a Bug guild:

"I almost always use Habitica in Safari on my iPhone because I find the interface more accessible than the app, but the new task edit view is now causing problems because it is larger than the iPhone screen dimensions and can't be resized even if I try to zoom out. Is there any way we could get the option to use the old editing layout? That had been working really well for me."

[GrayDays]

The aforementioned Gray here - for context, this is what I mean by the edit panel now being larger than the screen dimensions, which may make it clearer why this is such a big problem for me:
http://imgur.com/vZmDvbj
http://imgur.com/zfVzFmW
http://imgur.com/ybu721V

I basically haven't been able to manage my tasks in Safari Habitica at all this week, which has made Habitica very, very hard for me to use – especially because I make great use of task ordering to set up my schedule for the coming day, and reordering tasks is currently glitched in the iPhone app, so I have to switch between the app and Safari multiple times in a row just to create, tag, and order my tasks properly.

       

[GrayDays]

yo is…anything…actually happening with this? this is still a serious problem that is preventing me from using habitica. which is a very bad thing.

[mandyzhou]

Seconding @GrayDays -- I think this is a serious usability issue and an exception to Habitica's largely responsive web design. As at least a temporary fix, would it be possible to add back the previous non-modal interface as an option? Or, maybe, have the non-modal interface kick in for certain window/screen sizes? Hopefully those options wouldn't require too much extra work.

[Alys]

@TheHollidayInn What do you think about the suggestion to add back the previous non-modal interface as an option? Is it realistic?

@ All staff: How about the idea to use two columns in the edit modal? I think that would work nicely for everyone on PC browsers (I'd love it) and might be more usable on wide mobile devices. It might cause problems on small mobile devices if horizontal scrolling can't be done. @GrayDays Do you have an opinion about that? From your screenshots, it looks like you CAN scroll sideways but not up and down.

Making the text smaller might produce its own usability issues for vision impaired people. However the preview of the title could certainly be in a smaller font.

Reducing whitespace should be easy but might not help enough.

I'm increasing this to the important priority since it's an accessibility issue.

[GrayDays]

I can scroll in all directions, but not being able to see the whole width at once is an issue; additionally, I've found that at least in the current version of iOS, anytime the text I'm typing goes past the edge of the screen or I hit return or the up/down arrows to go to the previous or next text field, the view gets slingshotted around wildly for a second before returning to center on where the cursor is. I would really, really prefer if all I had to do to navigate was scroll up and down like before the change. A big reason (out of many) that I've found mobile web Habitica easiest to use all this time is that I can more easily see everything at once than in the app, where each task takes up about double the visual real estate while not showing checklists unless I open them manually. When the interface doesn't simply show me everything without me having to take extra steps to view it, I don't automatically remember what I should be looking for and my life becomes a lot harder.

When formatting layout for phones in particular, adding a horizontal scrolling factor complicates things. Habitica's mobile web layout is all vertical, with the only current horizontal scrolling being required to view additional party members in the header. This is a good thing! When I first started using Habitica on mobile web, I noticed that it was a very neatly-managed way of handling different screen proportions between computers and phones. Keeping everything in vertical columns one screen wide feels natural, even if for longer task lists it means that organising with tags is a necessary convenience. (My Today tag, for instance, includes all my dailies but only some of my habits and to-dos, so whenever I want to be able to scroll quickly to things I HAVE to do it just takes one extra tap.)

Just…all in all, when using mobile web, having the edit function as a popup/overlay adds no functionality whatsoever, but if it resized to fit the screen properly it would at least retain the functionality it had before.

[TheHollidayInn]

@alys I think we can do 2 columns on Dekstop and fix the display for mobile devices. I'll add this to my immediate list if no one gets to it before me.

[Alys]

For anyone interested in this issue, please see the comment I have made on a pull request at https://github.com/HabitRPG/habitica/pull/8456#issuecomment-275535624
Feedback should be written in that pull request, NOT here in this issue because you'll be discussing the pull request specifically.

[GrayDays]

Tested task editing on the site itself and I'm still having the same problems I mentioned here https://github.com/HabitRPG/habitica/pull/8456#issuecomment-276490294

[mandyzhou]

Given @GrayDays's comment, are there any downsides to allowing the modal to shrink further? A few other outstanding pieces of feedback from the pull request:

• There seem to be further opportunities to save on vertical space by removing double horizontal lines and reducing vertical padding (e.g., there's a lot of extra padding under the Repeat Every options).
• The daily modal has the Repeat Every options in both columns. When it's just one column, it looks okay, but now that they're almost side by side, the second one looks more redundant. Since the Daily edit modal has a lot of advanced options, I'd suggest having the Repeat dropdown menu and Repeat Every options on the left column but not the Advanced Options on the right.
• From cTheDragons: maybe we can add an extra line to Extra Notes so it's 4 lines down.
• From GrayDays: if I add checklist items in edit mode and then try to scroll down, it scrolls the background instead of the edit modal until I zoom out again, at which point it scrolls properly.

[Alys]

I've created a new issue for most of those changes: https://github.com/HabitRPG/habitica/issues/8474
"Task edit screen changes: move Dailies repeats out of Advanced Options; enlarge Notes; reduce spacings"

If I've left anything out, please tell me and I'll update it.

@GrayDays For this:
"if I add checklist items in edit mode and then try to scroll down, it scrolls the background instead of the edit modal until I zoom out again, at which point it scrolls properly."
Can you please log a new issue for that, specifying the platform you're on (phone type, phone OS version, browser type, anything else that might be relevant).

[Alys]

In the Report a Bug guild, cTheDragons asked if this issue could be reopened. She writes:

"Hi Amazing Database Guardians and Blacksmiths, may I ask to reopen a ticket on Github that has reverted due to the redesign? The amount of scrolling required to edit a task on my windows tablet is difficult. This is the view without any zooming. As you can see not very workable.
This is the view with my standard zooming of 75%. Still having to scroll!

I realise we are still trying to sort out some missing parts from the redesign, and this is UX issue, but this is a strong one that I thinks still turns people away from Habitca. I have held off till now as their had been bigger gremlins and goblins to fight, but tis the one thing that bugs me from the design that I can't fixed."_

I agree with her point of view. Once when I used a friend's computer with a huge screen, it was lovely to see almost all of the task edit screen at once, but on my laptop I see at best half the task's edit screen without scrolling. Since many Habiticans are students who'll be using laptops in class or relatively cheap small screens at home, and since laptops aren't unusual in the workplace either, can we consider changes to the task edit screen to make it more usable on smaller screens?

[paglias]

cc @Tressley

[veeeeeee]

Downgrading priority temporarily in favor of addressing payments issues and task sorting as a first priority. We have a note to revisit this in Q1 of 2019!

[veeeeeee]

Staff is working on new designs that should alleviate this problem, to be deployed in the next few weeks.