Being one of those that have no clue about tyres' sizes, I found the 205/45 17 combination after a few tries. It would be nice if the "tyres size choosing page" would retain your choices, after you get a "Size not found, please try again" or a "Please select Width, Profile and Size".
In the results page you may want to hide the table header's sorting buttons from the "Purchase column" and call the "back" button something like "New search" (this last point is quite debatable of course).
About the UI, it looks good overall (caveat: I have a bias toward non-distracting UIs). I don't really see the need for images.
It would probably be helpful to have a little section telling you how to figure out what size tyres you have. You'd probably need an image, though. See, e.g., http://www.blackcircles.com/tyres.
Car make / model - there's only a finite set of these. Take a look at the categories on Autotrader or something similar.
Tire Sizes - ask your local mechanic how they would find this out? There's probably a catalogue they would use.
For the US market, there's at least one company that provides this data. Unfortunately, I can't remember the name, sorry. :(
I do know it exists, though. I used to work for a major American tire manufacturer and maintained a couple of versions of their tire selector application. They would send over a huge file (I think a spreadsheet) with a combination of every year/make/model/trim and its associated OEM tire sizes. I think we also sent over a list of our tires (models and sizes) and they would include that in the db for us. I believe it was left to us to import and normalize it, which was kind of a pain in its own right.
I have no idea what size the tires on my car are. But I do know the make, model (and year) of my car. I'd rather enter these details into the size, and the site could tell me what tyre size is recommended, and as part of that do a search for the prices.
1. As mentioned, you need a pointer hover for the buttons. Otherwise I had to guess they were buttons.
.
2. 'Size not found, please try again'
This not found message is small and displays in the wrong place. When you click the calculate/search button, your gaze is down at the bottom, and the error appears at the top of the page, out of sight.
Perhaps animate the color of the button, during search going purple say, then when the result is in ( none: red, some: green )
.
3. Please number the search parameters. You need all 3 to have values. Make them bigger too, they get lost.
.
4. 'We compare so you don't have to'... I'd put that as 'Save time comparing tyre prices with our simple wizard'
.
5. Include a working example with some actual results as a link. Chose a common car. Ford Fiesta 2009 165 x 30 x 13 ==> 40 comparisons
If I select Width then Profile at that point you can calculate (ajax callback for example) which sizes are available for that combination and grey out the ones I cant pick.
At that point you could get rid of Find Best Price for Tyres completely (as the system would know there are results at that point and display them for me) (or keep it just in case).
EDIT: You could also grey out the Find Best Price for Tyres until at least one selection is made since people may want to look for 205mm in 1 or more sizes.
What I found refreshing about the site was that it did not make me wait while it determined what to do next.
As a user, once I have gone to the trouble of looking up my tyre size and entering two of the three parameters, having the site go non-interactive while options are filtered is not helpful, it is annoyingly bad design.
It is bad because instead of being done with my task in another second or two, I am given the new task of interpreting the changed state.
In particular with this site, the presentation and options are such that the filtering is useless. It there were 100 wheel diameters, then filtering might have some justification. But as a user, I want the path that gets me to the results as quickly as possible in real time.
In terms of UI things are looking good, I'd love to see some more custom style's as opposed to just bootstrap styles. I think the biggest complaint is the lack of padding. If you would add a bit more it might make things feel a bit better. ie. "width" "profile" and "size" headers on front page.
1. Care to post a default so it's possible to explore? Couldn't figure out a working combination.
2. When you hit an error, would be helpful if you kept the previous selection prefilled (either via AJAX request or passing along the previous selection in the URL).
1.) UI is confusing. Not immediately clear what's a button.
2.) Not UI feedback, but the data seems pretty sparse. Getting not found on relatively common sizes.
3.) I'd wager the average person has no idea about width, profile and size. You really need a way to search by make/model/year for something like this or at least a quick guide on how to read the sidewall to get the information.
4.) I'd be more interested in the type of tire (all-season, snow, sport) than the make or source website at the second step.
5.) Tires are probably not the best thing to sell via a minimally visual site. There's a reason sites like tirerack have gone to the trouble to provide tools to simulate what tire/wheel combos will look like on a specific make/model/year/color of car.
People care about what their vehicles look like, right down to the tires.
re: 1.)
Among other things, a good practice for indicating something is clickable is to set the cursor: pointer css property.
Also, it'd be nice if the text were centered vertically. Since your "li"s are all a fixed height you can do this easily without relying on table hacks or css3 by simply setting the padding-top to 20px and adjusting height accordingly. (Box-align will eventually support this, but you still can't count on people having compatible browsers so for a simple layout like this one padding should do just fine).
> 1.) UI is confusing. Not immediately clear what's a button.
Interesting. I found it very clear/easy. I read this text as soon as the page loaded: "Please enter your tyre dimensions by clicking on the boxes below. e.g 205/45 17"; so I just clicked the boxes according to my own car tire's dimensions.
I found it intuitive and easy to use. The interface reflects the the data domain it represents rather than glomming the data onto a generic shopping solution.
I'm not a spelling/grammar nazi or anything, but seeing mistakes like this really puts me off things. Like, to the point where I have to close the tab because it annoys me so much.
I don't think you do. Spelling mistakes on front pages tell me that someone didn't pay the kind of attention to their work that I would like them to. If their site is trying to sell me something, I conclude that their product is probably made with similar lack of attention, and that is what puts me off.
It's a bit like going into a restaurant and seeing the waiter not wash their hands after using the bathroom.
It would be pretty neat if you could figure out ahead of time which combinations were possible, disabling buttons for impossible combinations and reserving the "Size not found, please try again" message for weird exceptions where your index is out of date.
Off Topic: The word is "grateful" (although greatful is a common misspelling). I was just thinking about this because I've been listening to a lot of Grateful Dead and I was wondering which was the correct spelling. Turns out they spelled it right.
It looks like you can multi-select (through ctrl-clicking or click-dragging), but it doesn't appear that that has any influence over the results. It seems to only choose one item from each row to search over.
I know nothing about tires (and had forgotten that we spell it tyre here in the UK), but I do know that a lot of people mix imperial and decimal measurements. Do you account for that, is it not an issue with tires, or should you add in a either a unit of measurement or the ability to enter measurements in multiple units?
77 comments
[ 0.21 ms ] story [ 148 ms ] threadIn the results page you may want to hide the table header's sorting buttons from the "Purchase column" and call the "back" button something like "New search" (this last point is quite debatable of course).
About the UI, it looks good overall (caveat: I have a bias toward non-distracting UIs). I don't really see the need for images.
I do know it exists, though. I used to work for a major American tire manufacturer and maintained a couple of versions of their tire selector application. They would send over a huge file (I think a spreadsheet) with a combination of every year/make/model/trim and its associated OEM tire sizes. I think we also sent over a list of our tires (models and sizes) and they would include that in the db for us. I believe it was left to us to import and normalize it, which was kind of a pain in its own right.
I have no idea what size the tires on my car are. But I do know the make, model (and year) of my car. I'd rather enter these details into the size, and the site could tell me what tyre size is recommended, and as part of that do a search for the prices.
.
2. 'Size not found, please try again'
This not found message is small and displays in the wrong place. When you click the calculate/search button, your gaze is down at the bottom, and the error appears at the top of the page, out of sight.
Perhaps animate the color of the button, during search going purple say, then when the result is in ( none: red, some: green )
.
3. Please number the search parameters. You need all 3 to have values. Make them bigger too, they get lost.
.
4. 'We compare so you don't have to'... I'd put that as 'Save time comparing tyre prices with our simple wizard'
.
5. Include a working example with some actual results as a link. Chose a common car. Ford Fiesta 2009 165 x 30 x 13 ==> 40 comparisons
At that point you could get rid of Find Best Price for Tyres completely (as the system would know there are results at that point and display them for me) (or keep it just in case).
EDIT: You could also grey out the Find Best Price for Tyres until at least one selection is made since people may want to look for 205mm in 1 or more sizes.
As a user, once I have gone to the trouble of looking up my tyre size and entering two of the three parameters, having the site go non-interactive while options are filtered is not helpful, it is annoyingly bad design.
It is bad because instead of being done with my task in another second or two, I am given the new task of interpreting the changed state.
In particular with this site, the presentation and options are such that the filtering is useless. It there were 100 wheel diameters, then filtering might have some justification. But as a user, I want the path that gets me to the results as quickly as possible in real time.
1. Care to post a default so it's possible to explore? Couldn't figure out a working combination. 2. When you hit an error, would be helpful if you kept the previous selection prefilled (either via AJAX request or passing along the previous selection in the URL).
2.) Not UI feedback, but the data seems pretty sparse. Getting not found on relatively common sizes.
3.) I'd wager the average person has no idea about width, profile and size. You really need a way to search by make/model/year for something like this or at least a quick guide on how to read the sidewall to get the information.
4.) I'd be more interested in the type of tire (all-season, snow, sport) than the make or source website at the second step.
5.) Tires are probably not the best thing to sell via a minimally visual site. There's a reason sites like tirerack have gone to the trouble to provide tools to simulate what tire/wheel combos will look like on a specific make/model/year/color of car.
People care about what their vehicles look like, right down to the tires.
Also, it'd be nice if the text were centered vertically. Since your "li"s are all a fixed height you can do this easily without relying on table hacks or css3 by simply setting the padding-top to 20px and adjusting height accordingly. (Box-align will eventually support this, but you still can't count on people having compatible browsers so for a simple layout like this one padding should do just fine).
Interesting. I found it very clear/easy. I read this text as soon as the page loaded: "Please enter your tyre dimensions by clicking on the boxes below. e.g 205/45 17"; so I just clicked the boxes according to my own car tire's dimensions.
I found it intuitive and easy to use. The interface reflects the the data domain it represents rather than glomming the data onto a generic shopping solution.
I probably have a disorder. I should get help.
It's a bit like going into a restaurant and seeing the waiter not wash their hands after using the bathroom.
Maybe a "most searched" sizes could beat this.
#) You shouldn't output the SQL error messages to the user.
#) The purchase column shouldn't have a sort icon if it isn't sortable.
#) IMHO the back button doesn't add any value since it just duplicates browser functionality.
Another little nitpick: The sort icon on the page is a image ;-)
Example: http://alturl.com/6a7vw