Collapsed card view in delivery plans - user-interface

we are using Azure Devops as a tool to organise our work items. When i open my delivery plans with the items assigned to me i have to scroll down in order to see every item because it does not cut off the name of the items (testing Object for testing the plan). If i have an item with a small time window it tries to fit all the text into the item and the item gets way higher that others and items in a line all scale to the same height as the highest. Colleauges of mine have a much better view were the names of the items will get cut off (testing Obj...) and every single item in the plan has the same height.
I have taken a look at the settings of my account, but i could not find an option to scale them. If i click on the "expand card fields" or "collapse card fields" button it will just show/hide added tags and some board information.
I also do not have the "settings" button next to the "full screen" one.
I would like to collapse the cards down to the minimal height like my colleagues have.

Related

UI guidelines - should a control get focus when changed?

I have a window which shows a table on the left half. On the right half I display properties of the item which is selected in the table. The user can now change these properties.
The properties are represented by different kinds of controls: textFields, sliders, numberSteppers and popUpButtons.
The user can - besides using the mouse - use the tab key to navigate through the UI Elements. When the table has the focus tab will select the first editable item on the right side, then tab walks through the items and after the last item will go to the table again.
When the table has focus and I change the value of a popUpButton or move a sliderthe default behaviour of the API (Apple's Cocoa) is to change the value but keep the focus on the table.
My intuition would tell me that after changing a control element it should have the focus (i.e. become firstResponder). But I checked some of macOS' preference panes and they behave similarly.
In Apple's Human Interface Guidelines I do not find mention of that specific topic.
So my question is:
Is there a guideline or at least best practice an app should follow regarding if a control element like a popUpButton or slidershould get the focus when clicked or edited?

What are some good UX web designs for selecting multiple items and performing an action

I'm working on redesigning a web interface to provide the same functionality it has currently but with easier use via good UX design. Currently, here is what the design looks like:
I'm less worried about the tofu look and feel, that can come later, I want to nail the UX functionality first. The idea here in this tab is the user can select the items via a checkbox and perform the actions in the "I Want To" drop down (which opens different modal dialogs depending on the action). The 3 dot ellipsis on the right of the items in the list allow the user to perform the same actions via another drop down control, with the idea that they use the top drop down to perform the actions on multiple items, the ellipsis three dot menu for one item.
The obnoxious part of this control is that the list could contain hundreds of items, and the check box takes too much precision to check quickly. The user would select which items they would like to perform the actions on sequentially, then have to scroll up to the top of the page to select the action. This could be 5 seconds of scrolling, which I find obnoxious. I want to develop a good UX pattern to provide the same functionality in less clicks, scrolling, and frustration.
My inital idea was to provide a floating action button. The user could then * somehow * (I haven't thought of an idea yet, at minimum at least a bigger check box) select multiple items then pick what they want to do via the floating action button which is always within the bounds of the screen instead of the horrible scroll back to the top (I don't think a "scroll to top" button is a good solution for this either).
So I need some recommendations on a UX pattern or some general suggestions on how to make this process less frustrating for users. I'm a fan of material design right now, but I'm open to any suggestions, material design guides don't seem to have any paradigms for something like this.
I think the UX steps are in a good track: first select them, then set the action.
Instead of it being only a checkbox to click, the whole top part of each line could be clickable to select the item. This would make it much easier for the user, and less frustrating not being able to hit the checkbox.
Fixing the header on top would be usefull for adding a "Select/Unselect all" option and having the actions always available. Adding a searchbox to filter could be as well a good option if you are thinking of long lists. Combining the search box and the "Select all" option should help the user in their tasks.
If that is the most important action to be done in that screen, making the "What to do" button stand out a bit more would be a good idea to differenciate the primary from the secondary options for the user to do.
I see two simple things you can do to make this more usable with very little effort.
Remove the checkbox and make the entire row tappable, highlighting those selected. Each row would essentially become the checkbox's label, and the checkbox itself would be hidden from view.
Fix the header to the top of the browser window when the user scrolls down.

Page by page 'engagement' in Google Analytics

One report I like to use is the 'Engagement' report. I would like to apply this metric on a page by page basis. For example, I want to find out more than the average time on a page, I want to look at spread of times (duration) for specific pages. Can this be achieved in Google Analytics? I have hd a look at secondary dimensions and custom reports but can't see a way to achieve this.
I can't speak for the web framework, but with either the Android or iOS SDKs, you can view the spread of times (duration) or any other histogram by using Events that have a category, action, or label that is a predefined bin. For example, you could name the bins something like "time00001", "time00002", etc and then call something like this in your code:
sendEvent("EngagementReport", "duration", "time00001", 1);
Then,
click on Engagement > Events > Overview.
At the bottom of the page, click on the 'view full report' link under the 'Event label' section.
Click on the bubble icon in the upper-right-hand corner.
Click on the bars icon in the upper-right-hand corner (but slightly lower-left of the bubbles icon)
Order the x-axis alphabetically and you should be able to see the bins "time00001", "time00002", etc sorted in such a way that you can see the histogram of the duration of time on each page.
I'm not sure how to do this in the web analytics, but I'm pretty sure it isn't too difficult. Here's what the result looks like for me:

Ajax-like appearing/disappearing elements in Access 2010 web database project

I'm trying to have a feature to allow users choose two different methods of cost calculation: either they can enter a yearly cost breakdown on a datasheet (2010: $10,000, 2011: $12,000, etc) or they can enter a flat yearly cost multiplied by the number of years they select.
If I were developing another kind of web application, I'd have radio buttons to select two different options. One option would display the datasheet, and the other option would display two text fields to enter values into. However, I understand that you can't have radio buttons in Access 2010 web databases. Also, is it possible to make elements appear and disappear based on a combo box selection?
If not, perhaps I could have two different combo box options: "enter yearly cost breakdown"
or "enter flat yearly cost," which open the correct respective forms as pop-ups.
So, 1) can I have Ajax-like appearing and disappearing elements as triggered by a combo box (or ideally, radio buttons), and 2) if not, can anyone think of another clever way of doing it?
Sure, you get a nice effect by using a tab control. You can place controls and even a sub form on that tab control.
So, you build a screen like this:
Then, simple set the visible property of the second tab = No. This will hide the tab (don't change this until you built the page since it will hide it! (use property sheet to hide/un-hide during development).
Now, add some code to the after update event of the list box. Like this:
In the above, I have named the tabs PYear and PFlat.
The result is this (this is a animated gif I inserted):
Of course, you really probably could just dump the whole "list box" selection, and use a screen like this with the tabs (tabs are good UI, and users tend to grasp them quick):
So, you can hide a "set" of controls, and it really far less work and hassle then writing a bunch of JaveScript anyway. As noted, the "set" of controls you drop into each of the tabs can be sub forms, and also that of continues forms. So, the "hiding" as a set does work well in this case. I did have some format issues and found that I had to "start out" with the 2nd tab dispaled first (the first one being hidden). As noted, the listbox selecting is nice, but one could likly just go with using tabs in the first place.

UI icon - should it be A-Z or Z-A when the current list is sorted in ascending order?

I have a "sort by alphabet" icon in the application bar. If the list of items is currently listing:
1
a
b
Then should the icon show what the listing is currently sorted by (A-Z) or what it WILL be sorted by if you press the button (Z-A)?
The only example I can find on the phone is setting the volume to ring or vibrate (If it is set to ring, it shows a bell) but would like more examples / confirmation from people here.
If it's clear how the list is currently sorted by looking at it then I'd recommend displaying what the list will be changed to by pressing the button.
If the list can be sorted in any ways other than just ascending or descending alphabetical order you will probably need a button for setting each of the sort orders.
If it's not clear how the list is sorted by looking at it then this indicator should be separate.
Overall I'd question the value of having this sorting functionality. If you have a long list I'd use the LongListSelector from the Toolkit and then always have it sorted A-Z. This will simplify your UI (by not requiring a button to change the sort order) and will require less code.
If the button is closely associated visually with the list, like a column header is with a column in a grid, then I would say you could show what the current state is just like headers in columns of grids tend to do that offer this capability.
In this case, whichever way you do it, I would say the user would adapt fairly quickly by looking at the list to see how it works. There will be some who initially expect one way, and some the other I expect. Arguably there isn't a correct way to do it. It's a good idea to look at what other apps on the platform are doing, but there may not really be much to go on just yet.
The visual cue in this case is the tight visual association of the list and the button, suggesting to me that that button reflects the lists current state and that you can press to change it.
If however you had some form of a label that the button was associated visually to, then that button's text could provide the necessary context and your decision could be driven by that. For example your label could read "change sort to" or it could read "current sort is". This probably offers the most clarity, alleviating unsure users of the need to press the button a couple of times to learn how it works, but comes at the expense of valuable screen real estate.
If you walk into a hotel and your room number is 301, you want to go to the 3rd floor.
So you step inside the elevator and press the '3rd floor' button.
Therefore I think buttons should always show possible options, not the current state (i.e. ground floor).
So I think the button should show 'Z-A'.

Resources