Improved responsive design for My Account interfaces
| Affects | Status | Importance | Assigned to | Milestone | |
|---|---|---|---|---|---|
| Evergreen |
Won't Fix
|
Wishlist
|
Unassigned | ||
Bug Description
Despite making some improvements to the responsive design My Account interfaces in bug 1614807, I think it would be worthwhile to reconsider how we handle these screens.
Currently, when the Items Out, Check Out History and holds screen load on a small, mobile device, the table is flipped so that header cells are along the side of the table. See the attached screenshot.
The new layout achieves the goal to avoid horizontal scrolling. However, it suffers from some other design issues:
- Each specific title appears to be in its own table. It requires a lot of scrolling to review the titles in a specific list.
- The select checkbox seems to float above each title. It's unclear to the user why the checkbox is there, particularly once they have scrolled far enough to remove the actions menu from the display. It also is unclear which checkbox belongs to which title.
Other areas of My Account handle tables differently, some of which bring another set of issues.
- In the Fines and Payments section of the Account Summary, the table headers are removed. In some cases, the data speaks for itself. But the user may not know what each of the dates is for in the Fines area and what the email/print options in Payments are for.
- The My Lists area removes the column with the Action dropdown menu, making it impossible for mobile users to place a hold on a batch of titles. The data also falls off the screen for the permanent lists.
Whatever solution we use should be considered for each of these tables so that the user has a consistent experience.
The article at https:/
Most have a jQuery dependency - my favorites being TableSaw and RWD-Table-Patterns. They remove certain columns from the display once it reaches a certain size, and the user has an opportunity to display columns important to them.
The pure CSS examples all use methods similar to our own approach.
Other potential options:
- Keep the Items Out, Checkout History, Holds display as they are, remove the checkboxes, and add individual actions for each title. For example, each title on the Item Out screen would have a "Renew" link that would renew the material for the user. This approach would remove the ability to perform actions on a batch of titles.
- Display only the fields that we think are necessary so that the table will fit within a small screen without further adjustment. The disadvantage here is that the user would lose the ability to see some fields that are viewable on a larger screen.
I'm also open to other ideas. I'm hoping we can set a direction before the hack-a-way so that I can work on this project at the event.
See also the IRC discussion at http://
| Kathy Lussier (klussier) wrote | #1 |
| Terran McCanna (tmccanna) wrote | #2 |
| Changed in evergreen: | |
| milestone: | none → 3.next |
| Terran McCanna (tmccanna) wrote | #3 |
| Terran McCanna (tmccanna) wrote | #4 |
| Changed in evergreen: | |
| status: | New → Won't Fix |
| Changed in evergreen: | |
| milestone: | 3.next → none |
I agree that it is worth re-visiting the overall approach to all of the My Account screens. Until we are able to do so, I've submitted some changes to resolve the My List problems under a separate bug:
https:/