Tag Info

New answers tagged

0

In order to show data is related in the same table there is a 3 step process. Put the data next to the related elements (you did) Show some classification of which data fields are related (you did) Tell the user why its related! Because it may not be obvious See my design. You could alternate colors between the related fields and maybe when they hover ...


5

Your current approach is heading in the right direction. When your users use this data regularly, they will already know the relationship between the groups. Switching background color is one way of creating contrast between groups. Other ways would be to use line separators and white space. One thing you can have do to make it more obvious is by ...


4

Use grouping horizontal lines and eliminate the verticals one. Horizontal lines helps to lead the eye along the line, while vertical lines become a barrier along the eye path:


0

I’ve never seen a solution like this. Facebook Paper allows for chat bubbles to be tossed around the window (if I remember correctly), but I haven’t seen any exploration in roughing productivity, which is what I would call this type of feature. I’m not sure there is a valid use-case for this as the organized person has a pretty specific idea where they want ...


0

For accessibility, I can't understand your question. You can manage programmatically the appear/disappear of elements and using ARIA, role and html attributes you can do exactly what you want. Anyway: - about hiding elements, the elements should be hidden using position:absolute; in order to keep them available only for AT. If you want to hide them to AT ...


1

"The app is to display large numbers of defects a site contractor might log while working on a building project." Given this information, think about the workflow of who is using it. What are his/hers immediate goals? I am going to make an assumption that the person using this primarily wants to see a list of issues associated with each project. So give ...


0

Your data set is huge to be displayed(250 rows). And the type of data, that is, one wrod or one letter with and without link, suggests that your users will be more interested to sort the data at a click. Or filter. There can be couple of ways I feel, the UX can be improved. Use of dashboard view can be great, where you present the charts and detailed table ...


2

Why grids Tabular data arrangement is a raw dump that expects the viewer to carry the full burden of analysis and interpretation. This makes sense when the software can’t be expected to anticipate how the user may choose to evaluate the information. Tables are good when: All data columns are of equal or unknown importance. Horizontal space is not ...


1

I think you are already on the right track with your design. A tip I would add is to have the left pane shelve out when needed, but hide it when a user is scrolling the table. To answer your question: I would go with the table over the list. Lists have always seemed horrible for tabular data to me. Sorting them on the different data dimensions almost ...


14

1. Headers serve a different purpose from content This seems like an obvious statement, but it animates the reason why table headers are emphasized (title case, bold, colored, underlined, etc). While the user ultimately needs to read the content of a table, the headers provide users with: A crucial entry point into the table (i.e. the starting point for ...


16

Headers are essentially metadata and you need some way to indicate that they are separate from your content, but related to it. I would recommend against lowercase and normal weight text as it will make that row visually similar to the rest of the content. Title case is the most common, though you might be able to use small caps or uppercase headers. ...


0

Here is my result that follows your suggestions: The top overview: just some font size and color adjustment. The second layer: Changed background color, font color is darker than in first layer. Added a box shadow to the selected row in first layer and a gradient in the second layer. Also the highlight color is darker. The third layer: Same changes as ...


0

Talking about rotational approach. No intention to comment on creativity. I liked it. It looks different. However I do feel it is somewhat over engineering. This approach works for number columns. For non number column, you would need a separate set of icons. More maintenance would be involved in this approach. In addition, as already pointed out by a ...


4

In my experience this is one of those places where shadow works great to show deeper layers. A slightly different font weight/color treatment would help as well.


1

I agree that it's an odd implementation. I would do the following: Always leave the edit box enabled and have it show the current value. If the user wants to override the value, they just have to click in the edit box and type. Change the Use Default checkbox to a Reset button. Clicking the button would set the value in the edit box to the default. ...


0

Your comment on the infrequency of interaction is important here. The screen looks very cluttered to me and the visual relationship between the left half and the right half is not very intuitive. Given the complexity of the two panels and the infrequency of use, I would suggest one of: Place the edit panel on a new page. Pop up a lightbox style modal ...


0

I just did the same as nightning when I had to bring a table (only 6 columns) into a 320 px version for mobile users. My first move was to delete all the columns that had information the user wouldn't actually need. It was just given, because... well, because obviously. So there are only 4 columns left. It flips to column again for tablet users and above, ...


5

maybe is out of scope, but scanning a table to detect patrons is not very user-friendly. If resources are available, i would go with an horizontal stacked chart: It offers a better perspective of the percentage of time on each status, and is more easy to scan for out-of-patterns days.


1

Actually, there's two questions in here, one regarding the master-detail navigation, the other regarding accordion vs. tabs. Master-detail can be realized on one screen, like here, or with a two-step navigation from the list to a complete screen of details. For me, the decision between these two relies on the following: How many detail is needed to ...


0

You should really see if you can compress down your feature set. Some companies seem to love having a huge feature matrix, but this can make things confusing (see "the paradox of choice"). Don't be set on the idea of checkboxes, either. That works well for a feature that is completely unavailable in lower tiers, but many things are offered at different ...


2

I think this is a design question where the overall content and intent of the design needs to be assessed and understood first. By content I am referring to the actual differences between the plans (or tiers) that you are going to display. There would be very little point in showing the information in a table if all three tiers offered very similar ...


1

Tables are soooo 90s (they are about to turn 30) HTML tables were proposed in 1993 and took off around 1996. During this time, few considered accessibility and even less predicted responsive design. UX was never considered in the process. This case isn't unique, there are many other HTML standards that nowadays look ludicrous - selects and radio groups all ...


2

It is interesting to me that the problem with large multi-column tables is not being solved by creating better content and information architecture, because regardless of how responsive or accessible the table is the information is still going to be unusable to the reader if there is simply too much information. The question of how to fit a large amount of ...


5

Hmmm take a look at this: https://github.com/filamentgroup/tablesaw As width is reduced, the table converts over into a listing. You do lose the ability to do row comparisons, but it does ensure data remains accessible for small screen sizes.


2

Place the error next to the field Tables often have many elements, so the easiest way to communicate an error in the table is to place the error message right next to the offending element, so that it's very clear to the user where in the table she should focus. For example:


1

With error messages it's all about association. I don't have the experience with implementing it with tables, but I don't see why you can't apply the rules for forms to tables. For forms, it's best practice to show the error message directly below, above or next to the input field that contains the error. Assisting the error message with a red color (or ...


0

JIRA uses the '3h 15m' style notation which works for me. Oh the other hand, I used a timesheet system in which time was entered in 15 minute blocks. I found having to enter times as a decimal values like 3.25 was non-intutive way of expressing a duration of 3h 15m. On the example given, couple of things are not clear: What is the granularity? Minutes?, ...


3

ISO 8601 Duration As mentioned in the answer by Crissov, the ISO 8601 standard defines a textual representation of a span of time in this format: PnYnMnDTnHnMnS, called Durations. In this format, the P marks the beginning. The T separates the days portion from the time (fractional day) portion, and is omitted for whole days. Examples: P1D = One whole ...


0

It seems to me that confusion occurs because there are 2 low-order places with both methods. You could take all the data to fixed 3 decimal places (or 1 decimal place) of an hour, using a decimal point, and rounded before display. Remember to keep the data accurate by doing the maths in integer minutes internally, so minor floating-point errors can't occur ...


0

One other solution could be to show the seconds as well. Since seconds will be changing quickly it will be clear that the times are continually changing. I don't recommend this solution but from the perspective of clarity, it works.


16

You can also show the minutes with a smaller font. On stopwatches, this is done for the seconds or milliseconds. download bmml source – Wireframes created with Balsamiq Mockups



Top 50 recent answers are included