Spec tables, how they are implemented now and thoughts on making them better


#1

Okay so here are a few thoughts I have had on the spec tables so far.

  1. List view: As is right now only so much text of the spec table shows in one line and then is cut off. Some form of drop down would be useful on a per option basis to allow the user to see all the specs for that option while in list view. While the “compare all specs” does bring up a box with that options specs (along with every other option) it just feels “off” that no matter what “compare all specs” I click on the same exact box pops up. Compare all specs feels like it belong more in compare view.

  2. Option view: Compare all specs feels very out of place here as now the focus of the page is one single option so it would seem appropriate to have the spec view also only focus on that one option and display only that options specs. A drop/slide down for “view this options specs” would be useful or could even just default to showing the full specs as that is kind of the point to viewing a single option, to see all of its information in one place.

  3. Compare view: This view feels to be the most appropriate place to pull up the full list of specs for all options but I do feel it could be more useful as a drop down animation that then shows the full spec list for the three options viewable that then will stay slid open as the options are scrolled through.

Other thoughts for design once built into the site: Now obviously the spec tables are going to be wildly different depending on the question. So it may be useful to have a cache of autofill specs (or drop down boxes) available to users as they are creating a spec for each table. Of course being able to have the community discuss what specs belong in the table will help so if/when the comments are more streamlined a side effect may be that it is helpful to create the appropriate specs for questions.

A unified spec table for all options of a question would also help users be able to add new options and their specs. So for instance a question on Chromebooks could have a singular place to create and edit the spec table for that question that is then used as the outline spec table for all other options in that question. This way allowing users to fill in the correct fields without worrying about creating a full table from scratch for each option they want to add.


#2

" While the “compare all specs” does bring up a box with that options specs (along with every other option) it just feels “off” that no matter what “compare all specs” I click on the same exact box pops up. Compare all specs feels like it belong more in compare view."

“Compare all specs” seems to be the best thing to see after looking at an option’s specs. I agree that it seems out of place though. Do you think that when you click “compare all specs” from an option, that option should be highlighted or something so it’s a bit more option specific?

Option view: Compare all specs feels very out of place here as now the focus of the page is one single option so it would seem appropriate to have the spec view also only focus on that one option and display only that options specs.

Sorry if I misinterpreted this, but aren’t the option’s specs displayed first, and then users have the choice to view a comparison afterwards? It would be cool to be able to toggle specs, but they should be displayed by default. I think new users should see the specs so that they know they exist, but then have the choice to hide them. To expand on this, increased spec interactivity would be a good addition. If the table could be sorted by price or capabilities, comparisons could be done a lot faster.

Right now, compare view is my favorite. It’s really satisfying to see. I don’t agree that compare view is the best place for a full list. Compare shows three options, so it would be appropriate to show the specs for just those options. List view shows every option, so it would be better to show the specs for every option there.

I like the auto complete Idea, it might even work as a restrictive element that would keep users from entering bad info in the table.


#3

One thing that might need better handling is gaps in the spec data. I’ve run into a couple of cases where I just can’t find a particular data point anywhere, and N/A isn’t appropriate. As it stands I’ve been putting a ? in that field, because simply leaving it blank doesn’t remove the field label from list and comparison views. (No stats at all for an item removes the line, but if even one stat is provided, all the column labels show up.)

For the moment this is probably OK, since adding specs is done on the back end and we can just fill in all the ?'s and N/A’s when we enter the data. But once users can add spec data from the front end, there should be better handling of an empty field. I’d recommend either automatically putting a ? there (and it can be changed to N/A if appropriate), or not displaying the field at all except in the full comparison chart.


#4

I suppose that is just not the action that I would personally expect when wanting to view more info on a particular option. To me it would be that options specs not all the options specs, hence why I clicked on the button on that particular option, Though highlighting would definitely not be a bad idea for now.

The options specs are displayed first but is cut off after one line, making it not really that much of an information gain to the user. So yeah if the one line is kept as the default view (in a single options view), then a toggleable drop down that then will display all the specs for that option would be preferable to viewing every options (in that question) specs yet again. And yes I agree with that the specs displayed in full when landing on a single options page would be the better way to display them thus negating the need for the drop down at all, or a pop up box for that matter. Sorting of the specs would also be a great addition as well.

I just meant out of all of the current implementations that compare view felt the most appropriate to have the pop up box of all specs. Ideally though I agree with your statement, the three specs should be listed (for just the view-able options) that will then change as the options are scrolled through. A way to see all specs for the three view-able options would be nice. Whether that is done by default view being a full view of the specs or a drop down that will display all specs (for the three view-able options) once clicked on.

I do suppose list view is debatable on whether all specs should be the preferred action, personally it is just not my expected action and feels redundant as the same box pops up no matter what options “Compare All Specs” hyperlink is clicked.

I think this sounds good, default ? with optional N/A when appropriate. I was actually wondering what to do in this particular situation personally but have only completed one sheet so far and there were no blanks in it. I am definitely going to run with this when I do have to deal with a blank.


#5

Agree with Matt’s points 1, 2 & 3. It would also be more readable, the pop-up is somewhat difficult to navigate.

I still think there should be a link to comparison view in option level. It’s essentially what the pop-up does anyway and in there it would make more sense.

In option view I disagree with Taylor, I think it should be collapsed by default. Most people don’t care much for a wall of specs. It’s a power-user feature.

Order by specs would be cool though.

Agree with comments system for spec sheet for consistency’s sake and because it nicely puts discussions in the appropriate places, but I think we should first address current engagement issues with the comment’s systems before taking that on.

A major concern of mine is the contribution flow. Ideally, adding to spec tables should be done the same way as adding pros/cons, but that requires a rethink of how p/c’s are added currently.

I think the duplicate content issues will be fixed with the product db and its autofill. So I’m not sure if it’s worth making a stopgap solution. I agree though that duplicate content is becoming more and more of an issue as a reasonable chunk of time is spent on copying and pasting existing content and that it will be more of an issue once a front-end solution for spec tables is live.

I’ll add things here I’ve mentioned before so that everything about spec tables can be overviewed in one place:

Markdown support would be nice. (Could even circumvent wanting groups)

Some special characters don’t show right.

Quotation marks and commas break it.


#6

Option level UX/UI idea: Show relevant spec data next to pro/con.

Great display

Z3 Compact has a bright, color accurate display with deep blacks and great contrast.

  • Display: 4.6" 1280x720 IPS LCD
  • Luminance: 0.37cd/m2 - 482.58cd/m2
  • sRGB color gamut: 96.7%
  • Contrast: 1280:1

sources

This way I don’t have to look at data in two places to get a complete picture.


#7

Oh that’s interesting. Might be tricky to build a simple UX to link the data, but would certainly be useful.


#8

Another thought on the spec tables is that when a list is long (for the full screen spec table view/popup), as it scrolls down the top row descriptions are not visible anymore. They need to stay static while the chart remains scroll-able so that the chart is easier to read as it is scrolled.


#9

Opening spec table from the option view could highlight the appropriate option to help navigate. Opening it in compare view, could highlight the appropriate 3 options.

And support for newlines.


#10

Display specs can include the following data points: size, resolution, ppi, panel-type, luminance, color reproduction, accuracy,contrast. And probably more.

There are two ways to go about it. Have a single column for “display” or have a column for each data point.

Having a single column is more readable, but relies on a user choosing what data points to enter and thus potentially creating an incomplete comparison.

The more I think about it, the more I’m convinced that there should be an ability to group items so that we can ask for each data point individually.


#11

Just thought I’d mention SocialCompare as a source of inspiration:

http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries


#12

I was talking with @thekodols in the http://www.slant.co/topics/794/viewpoints/3/history and I made the suggestion for specs comparison for filters to include or exclude options from the list based on the value of features. i.e. only “Free” options, and exclude those where feature X is available (i.e. an anti feature). I had in mind something a bit like the Excel filters; a popup list on the feature where each possibility can be included, excluded, or don’t care. Or a plain search field for free form text.

I had some other thoughts, and maybe someone will think they have merit/worth. The link from dandv is very good, although it misses a few things I thought of:

  1. Categorize/Group items. i.e. Company, license, and prices would be in General; a Features group, an Advanced feature group, and so on. (the dandv link sort of has these, but they are treated as regular rows)
  2. The categories/groups should be collapsible to prevent visual overload.
  3. Annotations, but I’m not sure if the manner of the dandv link is best, or having them hidden, with a popup on hover, a bit like the filled triangle corner in Excel.

I can think of 4 basic column types:

  1. The exclusive option from user created list (i.e. Toolkit: KDE, Qt, Unknown, etc.)
  2. Special case of 1 for features choosing from Yes (strong green :heavy_check_mark:), No (strong red ✗), Unknown (pale grey ?), Available (pale blue ✚) for addons/plugins etc. (i.e. Transparent backdrop for terminal programs)
  3. The multiple option from user created list (i.e. a laptop that can be configured with 1920x1080, or 2560x1400, from a user defined list of all the standard res’.
  4. Freeform text

#13

Hey Stephen, nice to see you on Meta. :smile:

filters to include or exclude options from the list based on the value of features. i.e. only “Free” options

We definitely want the ability to show you only the options that are relevant to you. Filtering has one specific downside that’s, imho, really important to note. Say you filter by “free” and recommend something - that changes the order of all options, not just within the “free” context. I think preserving the order based on context is really important.

One idea would be to have a separate question for each context. It would also limit noise (pros/cons that are not relevant to that context would not be included). It just needs a navigation method that’s as intuitive as filtering and the ability to easily cross-populate relevant information.

Categorize/Group items

Something like this?

The idea has evolved somewhat since then to potentially include relevant spec info along with pros/cons.

Annotations

What kind of annotation would you like to see? I can imagine explaining features in the spec sheet, or did you have something else in mind?

4 basic column types

Added to ideas :slight_smile:


#14

Thanks!

Not sure I really follow your downside. Maybe I haven’t got my head around all the terminology used.
A (singular) Question has (plural) Options.
Each Option has (plural) Pros/Cons that can be unique to a particular Option.
Each Option also has (plural) Specifications that are common across (plural) Options.
Each Specification can have (single/plural) Choices? (the four column types mentioned)

The filter idea is to include/exclude Options based on Specification Choices. I was thinking about this for the Compare all specs popup pane. So I’m not really getting why order would be a problem here. Indeed in that popup view it would be nice to see ordering be user selectable. (i.e. order by ascending price, then by ascending file size, for a contrived example)

Perhaps you are thinking of filters applied to the Questions themselves, and that’s why I’m getting confused?

The separate question for each context sounds horribly noisy on its own. Wouldn’t you end up with hundreds of minor variations of each Question?

Again I had the Spec info popup in mind when thinking of this, and having the rows categorized, and being able to collapse them out of view. Assuming I could click on Editor and collapse that section, then sure that’s the general idea, but again, it’s more about the specs where you could potentially have hundreds of rows (i.e. a comparison of art programs) although I can also see the value in the categorization of the Pros/Cons in your link too.

Think of a spec (feature), but it was only added in a recent version. i.e. Terminator recently got some fixes to run under Wayland. So the spec “Runs under Wayland” would be a green tick mark for Terminator, but a small annotation marker would present a popup if hovering over that cell. In there the text would say “2.0+”, so people understand that 1.0 will not work on Wayland. Other options (i.e. Guake which uses gtk2) won’t run under Wayland, so would have the red cross. Of course they could add their own annotation that it will be in the next release.

It could also be used for explaining a feature, by hovering over the column header.

Cool! :slight_smile:

Slightly off topic question: Terminator suddenly jumped to the top of the “best Terminal” question mainly because Pantheon dropped two places despite having more recommends than any other option. Was that a new adjustment due to brigading by the elementaryOS people that I read about on some other posts? If it was just below Terminator I might have put it down to my Karma somehow boosting Terminator.


#15

You got the terminology right. :slight_smile: Let me try an example.

Let’s assume there are 2 questions:

  1. “What is the best option?”
  2. “What is the best option with feature X?”

Now let’s assume that option A is objectively the best option for question 1 and everyone votes accordingly, but because option A lacks feature X, option B is objectively the best option for question 2 and everyone votes accordingly.

(Real world examples would be something like Terminator is the best terminal emulator, but not the best terminal emulator with quake-style dropdown, Acrobat is the best PDF editor, but not the best free PDF editor.)

If options could be filtered by specs, you would land on question 1, reduce the option list down to what you’re looking for and vote based on the remaining option list.

If enough people vote in the context of the second question, the top option in question 1 is wrong.

Slightly off topic question: Terminator suddenly jumped to the top of the “best Terminal” question mainly because Pantheon dropped two places despite having more recommends than any other option.

We just released a new ranking algorithm. There should be a blogpost with more details soon.


#16

The aforementioned blogpost: