WIP - Issue #155 - UI re-design #177

barbeau · 2014-09-19T22:24:17Z

Please don't merge - this is a work-in-progress pull request so others can keep track of progress and provide feedback on the UI re-design (#155), including Maps API v2 implementation (#56) and StopInfo project (#103).

I'm updating this top comment with progress as we go.

To try out the UI re-design, please register as an alpha tester!

Known issues:

See bugs under public v2.0.x release milestone

TODO:

See enhancement issues under public v2.0.x release milestone

Feedback is appreciated! Screenshots are below.

@caitbonnar APK to install and test StopInfo is linked above in this PR.

barbeau · 2014-10-01T16:12:31Z

Some good news - I was able to port OBA from ActionBarSherlock to the official Android ActionBarCompat support library, and it seems 2.3 support is still intact, although I currently don't have a 2.3 device handy to test with. I've uploaded a new APK (linked in the original post above), so if you have a 2.3 device and want to test it out, please let me know of the results.

I've also knocked a few of the items off the above list - I'll continue to update it above based on the latest status of this PR and linked APK as I make more progress.

barbeau · 2014-10-03T13:57:11Z

@caitbonnar Have you had a chance to check out the StopInfo button in Puget Sound? Any feedback on this, and general usability of voice-over elements, would be great.

caitbonnar · 2014-10-03T18:22:13Z

@barbeau I haven't had the chance yet -- it's been more difficult than expected to track down an Android device I can use to test, but I found someone to bring one in for me this coming Monday. I also e-mailed a blind Android OBA user for some feedback, and will be talking to him more in depth about general usability issues. As far as I know they are mainly labeling issues.

Sorry for the delay! I should have the feedback for you by the late afternoon on Monday -- is that too long to wait?

barbeau · 2014-10-03T19:23:24Z

@caitbonnar No, Monday's fine! It's just easier to fix issues the sooner I know about them, so while I'm working on specific blocks of code I can be sure to improve them as far as accessibility goes. I'm hoping to have the tabs in place soon as well, which I imagine will be a big improvement for accessibility.

caitbonnar · 2014-10-03T19:31:52Z

@barbeau Good to know. Thanks for working on this! It will be a big help to the BLV Android users. :-)

paulcwatts · 2014-10-05T18:35:26Z

I finally have a chance to look at this branch! Overall it looks pretty great, it's so modern :)

What is the navigation drawer supposed to be used for? I can't find a reference to it in the comps.

One concern: it seems odd to change the overflow menu based on whether or not the stop is selected on the map. I understand this is a combination of the menu on the map and the menu on the (formerly) arrivals screen, but it's very confusing because the context is no longer on the stop, it's not the map. I think moving that information to a separate menu that is accessed from the context of the stop is better.

The "Show On Map" menu item isn't even necessary, since aren't you already seeing it on the map?
Also, I think the "Filter Routes" item will be confusing when you add the nearby routes. It won't be clear that "Filter Routes" applies to the stop, not the map.

barbeau · 2014-10-06T14:37:33Z

@paulcwatts Thanks! :)

I completely agree re: the Action Bar overflow menu issues - I actually haven't touched that yet, its still on the TODO list. The current contents are just a side-effect of moving the ArrivalsListFragment to the sliding panel on the map view without changing anything related to menus. I'll have to do some more thinking about how to split these out so they make sense. I've kept support for the ArrivalsListActivity & ArrivalsListFragment (this is still what you see when you start OBA from a shortcut), so one option is to allow the user to dive into this view and make things like route filter accessible from there.

Here's the mockup for the navigation drawer:

It will hold some of the global menu options in a format close to Google apps (e.g., Maps, Play, Docs, Drive, Sheets). I originally thought that I would add view-specific menu options to the top of the navigation drawer, but I'm not sure how well that will work in practice (as you say, some of these items like "route filter" would be confusing when displayed there).

I plan to frame out the tabs and then nail down all these menu options. Additional feedback/suggestions is definitely welcome.

caitbonnar · 2014-10-06T22:43:24Z

Hi @barbeau, finally got a chance to play around with the APK on a Nexus 7 tablet. It looks great!

I went over it myself with TalkBack and then had a blind user who is familiar with OBA iOS and is fairly tech savvy go over it as well. She worked on StopInfo with me as well. Anyway, here is our feedback re: StopInfo integration & accessibility feedback:

Visual:

Could you shift the StopInfo button a bit to the right? Screen reader users often move their finger around the screen to locate elements, and it's difficult to select it on its own right now without selecting the stop title. (This is really the only thing related to StopInfo!)

TalkBack/Accessibility feedback:

There are a few issues with the drawer in the map view:
- Tapping on the drawer for the first time starts reading the routes, not the stop name/direction. Stop name should be read first, then the direction, then the routes.
- Raising/lowering the drawer is confusing. You have to figure out that once it starts reading the routes that you have to double tap to get it to raise/lower, and then there is no indication that it has actually done so. When she was swiping through the elements using TalkBack, it read the elements behind the drawer (the "my location button") and a few stops, so she thought it had lowered when it hadn't, and had difficulty selecting things. Labels/hints on the header would be helpful -- "Drawer raised -- double tap to lower" or something like that.
- Lastly, this might be our unfamiliarity with Android showing, but the "Bus options" menu was difficult because finding the back button was at the bottom of the screen which took awhile to navigate to if she accidentally opened the options window. Having a tab that allows you to exit the window without going back would be nice.
Hovering over/tapping on the OneBusAway name in the upper left should also say something about the current view that they are on -- for example, can set the accessibility label for the main screen to "OneBusAway - Home" (or map, whatever you think is apt to call it). This aids a lot with navigability.
From your navigation mockup above, I'm not sure if you were going to put a bookmarks link there as well. Accessing that from anywhere in the app would be great (unless there already is a way, we just didn't find it).
The way it reads arrival times in the table is confusing without contextual information (i.e. seeing the column headers). On OneBusAway we changed this to read more logically as, "Route toward Destination. X minute(s) until arrival/departure at Predicted time - Status." (iOS code & phrasing here)
Really strange, but TalkBack pronounces OneBusAway as "Oh-nay Buse Away" -- pretty hilarious, but I think it should be fixed if possible. Not sure how you'd go about doing that with TalkBack rather than setting the accessibility label to have spaces in between the word whenever it encounters the string without the spaces.
Capitalize directions (i.e. "NE" instead of "Ne"), since it currently sounds like the Knights Who Say Ni! :)

Accessibility enhancements:

Allowing to search by address is really useful for blind users, who can't navigate the map. (I've also heard it requested by sighted Android OBA users.) Also, kudos on the integrated search and stop list by route! We need to do that in iOS. :)
Showing a list of the stops along with the predicted arrival time for the bus you're currently viewing (i.e. under "Show route information" in "Bus Options") would be really useful accessibility-wise as well (might have brought this up in another thread, I can't remember). For stops that aren't announced over the audio system on the bus, this is helpful for letting the rider know when roughly they should expect to be off the bus. My friend reports using it all the time for that on iOS.
One more thing forward to me by a blind Android OBA user is that the saved routes list would delete the bottom-most stop when it got to be pretty full. Because this is the main way that blind users access their stops, it is useful to allow for many entries there. I'm not sure of the exact number he had.

Okay, that seems to be about everything we've found. Not all are needed by release of course, but things to note going forward. I tried to list the issues by priority under each subheading, so you have a sense of what is best to start working on.

Thanks for paying attention to this in the UI re-design -- I know how tough it is to balance so many constraints! I know it looks like a lot of stuff, but overall we thought it was navigable and things weren't too difficult to figure out even given our lack of Android experience.

Let me know if you have any questions or need me to test anything else! (I should have access to the tablet for a couple more days, but can probably ask to use it again if need be.)

barbeau · 2014-10-07T17:49:59Z

@caitbonnar Awesome, thanks for the feedback! I'll go through this in detail and may have more questions at that time (but, you already get a 200 point bonus for a relevant reference to Monty Python :)).

* As requested in OneBusAway#177 (comment)

barbeau · 2014-10-07T20:06:20Z

@caitbonnar re: shifting the StopInfo button - I just bumped it a bit more to the right, and updated the linked APK above and this PR with the commit. Could you please check it out and let me know if this is enough space? If not, no worries, its easy to increase (or decrease).

Here's a visual reference for the new placement:

caitbonnar · 2014-10-07T21:13:32Z

@barbeau Maybe another 5px over to the right, if you can? (See below.) Also, does the placement of the button change with the length of the stop name, or is it static? Thanks a bunch!

* In header, per OneBusAway#177 (comment)

barbeau · 2014-10-07T21:51:27Z

No problem - done! Placement will change with length of stop name. It will get pushed to the right until it hits the vertical separator, and at that point the text will be truncated and end with "...". Here's an example of both, with the new padding:

It would be good if you could test with one of the long truncated stop names to ensure there is enough space there as well.

caitbonnar · 2014-10-08T00:22:41Z

@barbeau Yes, it is much better, even with the longer stop name. Thanks!

barbeau · 2014-10-09T18:27:44Z

As a general FYI for posterity sake - I'm using Android Assett Studio and clip art there to generate new icons.

barbeau · 2014-10-09T20:01:06Z

@caitbonnar re: pronunciation of OneBusAway (which I found funny as well - "Its French") - apparently you can't influence the pronunciation of the app name from the developer perspective (see this SO issue, which a Google employee commented on). However, via another contact I was able to get a bug filed internally at Google with the accessibility team to fix the pronunciation of "OneBusAway" in general in the TalkBack TTS engine. So, hopefully we should see that fixed at some point in the future (no ETA known).

caitbonnar · 2014-10-09T21:31:19Z

@barbeau All right, good to know! Hopefully they can get it fixed, haha.

bbodenmiller · 2014-10-10T06:53:11Z

In regards to button location, wouldn't BLV users prefer for the button to be in a fixed location?

caitbonnar · 2014-10-10T15:59:42Z

@bbodenmiller Yes, generally. I asked a few people about this after it came out for iPhone.

To them, if it is only shifting by a couple cm, it doesn't make much difference. They also generally tend select the containing element (i.e. the header of the stop details box) and swipe through the elements after that. In that case, it doesn't make a difference on horizontal placement (since there's nothing in between the stop name text and the button) or how much space is in between. But I will make sure.

* As requested in OneBusAway#177 (comment)

* In header, per OneBusAway#177 (comment)

* As requested in OneBusAway#177 (comment)

* In header, per OneBusAway#177 (comment)

IMHO this better reflects the real-time nature of the view

…st vehicle location update time * Add lastLocationUpdateTime to TripStatus objects used to deserialize OBA REST API response * Add tests for the timestamps and status.getLastKnownLocation()

* Hide the alert icon when in stop edit mode * Re-initialize visibility when changing stop focus to avoid blinking and temporary view of white icon

* and show the header when showing the MapFragment

…s stop code * Also includes routes and stop direction * This could potentially be replaced by the Stop Info page for regions that provide Stop Info, if Stop Info adds the stop code, routes, and direction info. See OneBusAway#103 (comment).

…ng star for single stop * Only add exclusion when unstarring if star all stops is in effect

* Also keeps the past behavior of immediately dismissing the popup and allowing the other views to handle touch events * As suggested in OneBusAway#155 (comment)

Fix OneBusAway#327 successfully star route for all stops after removing star for a single stop

…nizations

…ayout-v11 folder

…und to layout-v11 folder" This reverts commit 99e00d9.

…selectableItemBackground"

…und"

…rect user there to install Google Maps

* This includes hiding the ability to sort routes on Gingerbread, so Style B can't be accessed.

* Identified by Lint in Android Studio via "Menu -> Analyze -> Run Inspection by Name -> Unused resources" * Many drawables are left over from v1.x and holo theme * Strings are leftover from initial implementations of features that were pulled or re-designed, or left over from v1

barbeau · 2015-11-10T19:57:00Z

Alright everyone, we're closing in fast on a v2.0 release with the new UI. So, I'm going to bring this long, winding WIP PR to a close :).

A few things from the original mockup/concept didn't make the v2.0 cut, so I've pulled some of the items out into their own issues for future work/release, including:

Thanks to everyone for their time and feedback!! I really appreciate it, and I think it improved the UI overhaul tremendously. If I missed anything or you have more feedback, please feel free to comment here, on one of the remaining issues, or open a new issue.

All UI redesign work is currently in the develop branch, so I'll be merging this into the master branch in the very near future. There are some conflicts resulting from some intermediate/hotfix releases, so I won't be merging this PR directly via Github. I'll merge manually instead. However, this PR will contain all the commits for the UI redesign, if anyone wants to revisit it at some point.

Closed via work in develop branch, to be merged into master shortly.

paulcwatts · 2015-11-10T20:15:01Z

Congrats! This is a huge leap forward!

barbeau · 2015-11-10T20:21:59Z

@paulcwatts Thanks! And thanks to all your work over the years that made this app possible. It was quality work - there are still huge chunks of Paul-code in v2.0 of the app :).

caitbonnar · 2015-11-11T11:21:20Z

Wonderful! Congrats and job well done!

On Tuesday, November 10, 2015, Sean Barbeau notifications@github.com
wrote:

@paulcwatts https://github.com/paulcwatts Thanks! And thanks to all
your work over the years that made this app possible. It was quality work -
there are still huge chunks of Paul-code in v2.0 of the app :).

—
Reply to this email directly or view it on GitHub
#177 (comment)
.

This was referenced Sep 19, 2014

Upgrade to Android Maps API v2 #56

Closed

UI re-design #155

Closed

Add support for StopInfo project to help blind riders to better locate bus stops #103

Closed

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Oct 7, 2014

Increase spacing between stop name and stopInfo button in header

157cde9

* As requested in OneBusAway#177 (comment)

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Oct 7, 2014

Increase distance between stop name and stopInfo button a bit more

8153d96

* In header, per OneBusAway#177 (comment)

barbeau mentioned this pull request Oct 27, 2014

Change beta testing group structure #190

Closed

barbeau force-pushed the issue155-UIredesign branch from e114a0a to ef80dbd Compare November 12, 2014 22:56

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Nov 12, 2014

Increase spacing between stop name and stopInfo button in header

37b9164

* As requested in OneBusAway#177 (comment)

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Nov 12, 2014

Increase distance between stop name and stopInfo button a bit more

ff8cb2e

* In header, per OneBusAway#177 (comment)

barbeau force-pushed the issue155-UIredesign branch from ef80dbd to fb40eaf Compare November 14, 2014 21:45

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Nov 14, 2014

Increase spacing between stop name and stopInfo button in header

39d970e

* As requested in OneBusAway#177 (comment)

barbeau added a commit to CUTR-at-USF/onebusaway-android that referenced this pull request Nov 14, 2014

Increase distance between stop name and stopInfo button a bit more

0d51876

* In header, per OneBusAway#177 (comment)

barbeau and others added 23 commits October 27, 2015 18:23

Add source SVG files for vehicle marker icons

99e3380

Change "trip details" to "trip status"

65a3f0c

IMHO this better reflects the real-time nature of the view

Fix OneBusAway#343 - Use lastLocationUpdateTime when available for la…

a5f3ffb

…st vehicle location update time * Add lastLocationUpdateTime to TripStatus objects used to deserialize OBA REST API response * Add tests for the timestamps and status.getLastKnownLocation()

Fix OneBusAway#345 - Add padding to top of map in Route mode

eff6896

Fix OneBusAway#344 - Fix alert icon visibility in sliding panel header

8ae1604

* Hide the alert icon when in stop edit mode * Re-initialize visibility when changing stop focus to avoid blinking and temporary view of white icon

Fix OneBusAway#334 - Hide the route header when hiding the MapFragment

d86fb7f

* and show the header when showing the MapFragment

Fix whitespace formatting

aa92fa2

Auto whitespace formatting from gradle script

5c2db72

Fix OneBusAway#327 successfully star route for all stops after removi…

3abb5c4

…ng star for single stop * Only add exclusion when unstarring if star all stops is in effect

Dismiss status popup when tapping on ETA and the popup is showing

4119bef

* Also keeps the past behavior of immediately dismissing the popup and allowing the other views to handle touch events * As suggested in OneBusAway#155 (comment)

Merge pull request OneBusAway#347 from bendu/starring-fix327

8bf0ade

Fix OneBusAway#327 successfully star route for all stops after removing star for a single stop

Shorten credit line so it doesn't spill to next line

7ebf693

Add York Region Transit to contributors, generalize sentence for orga…

6cd2cbc

…nizations

Fix OneBusAway#341 - Move ?android:attr/selectableItemBackground to l…

99e00d9

…ayout-v11 folder

Revert "Fix OneBusAway#341 - Move ?android:attr/selectableItemBackgro…

668c233

…und to layout-v11 folder" This reverts commit 99e00d9.

Fix OneBusAway#341 - Change to proper support library attribute for "…

0c99b08

…selectableItemBackground"

Change to proper support library attribute for "selectableItemBackgro…

d028777

…und"

Fix OneBusAway#351 - Check that Play Store exists before trying to di…

115fab7

…rect user there to install Google Maps

Bump Play Services to 8.3

77804b8

Fix OneBusAway#350 - Always use Arrival Info Style A on Gingerbread

8d1807c

* This includes hiding the ability to sort routes on Gingerbread, so Style B can't be accessed.

Add space between # and stop_code

4ead5bf

barbeau mentioned this pull request Nov 10, 2015

Accessibility feedback on UI redesign implementation #355

Closed

barbeau closed this Nov 10, 2015

barbeau deleted the issue155-UIredesign branch May 2, 2016 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP - Issue #155 - UI re-design #177

WIP - Issue #155 - UI re-design #177

barbeau commented Sep 19, 2014

barbeau commented Oct 1, 2014

barbeau commented Oct 3, 2014

caitbonnar commented Oct 3, 2014

barbeau commented Oct 3, 2014

caitbonnar commented Oct 3, 2014

paulcwatts commented Oct 5, 2014

barbeau commented Oct 6, 2014

caitbonnar commented Oct 6, 2014

barbeau commented Oct 7, 2014

barbeau commented Oct 7, 2014

caitbonnar commented Oct 7, 2014

barbeau commented Oct 7, 2014

caitbonnar commented Oct 8, 2014

barbeau commented Oct 9, 2014

barbeau commented Oct 9, 2014

caitbonnar commented Oct 9, 2014

bbodenmiller commented Oct 10, 2014

caitbonnar commented Oct 10, 2014

barbeau commented Nov 10, 2015

paulcwatts commented Nov 10, 2015

barbeau commented Nov 10, 2015

caitbonnar commented Nov 11, 2015

WIP - Issue #155 - UI re-design #177

WIP - Issue #155 - UI re-design #177

Conversation

barbeau commented Sep 19, 2014

barbeau commented Oct 1, 2014

barbeau commented Oct 3, 2014

caitbonnar commented Oct 3, 2014

barbeau commented Oct 3, 2014

caitbonnar commented Oct 3, 2014

paulcwatts commented Oct 5, 2014

barbeau commented Oct 6, 2014

caitbonnar commented Oct 6, 2014

barbeau commented Oct 7, 2014

barbeau commented Oct 7, 2014

caitbonnar commented Oct 7, 2014

barbeau commented Oct 7, 2014

caitbonnar commented Oct 8, 2014

barbeau commented Oct 9, 2014

barbeau commented Oct 9, 2014

caitbonnar commented Oct 9, 2014

bbodenmiller commented Oct 10, 2014

caitbonnar commented Oct 10, 2014

barbeau commented Nov 10, 2015

paulcwatts commented Nov 10, 2015

barbeau commented Nov 10, 2015

caitbonnar commented Nov 11, 2015