

Show HN: A site using zero images – any feedback on the UI? - rosspanda
http://www.tyresum.co.uk/

======
nickloewen
I agree with basically everything that has been said so far. Now, I don't
drive or buy tires, but I do dabble in design, so here are the first things I
see when I start nit-picking:

* The nav text is too small to read comfortably.

* For the nav in the top right: why is it in that spot? It doesn't line up with other content, so it looks out of place.

* TyreSum.beta – my first thought was: 'there is a .beta TLD?' This is confusing.

* The logotype doesn't need an underline when you mouse over it.

* 'We compare so you don't have to' – you have used periods throughout your whole site... but not to end your slogan?

* Why are the buttons shiny? Then, why aren't they shiny when you click on them? Why is the gradient on the properties-of-tyres buttons is different from the submit button's gradient?

* Why do the buttons have squared corners when the container and the submit button have rounded ones? (Or, why do the other things have rounded corners?)

* Why are the buttons all square, when the text takes up less than half of their height? Since they are, why is the text (very tight!) at the top?

* 'Width', 'Profile', and 'Size' look awkwardly narrow centred on the wide rows of buttons. You could make them look chunkier, or move them to the left of the rows, or something. It would also be nice to see more padding between them and the rows above. The padding on the page is not very consistent all-around.

* For example… the padding on the container is awkward. There is a bunch of whitespace on the left and right, and an awkward mismatch of whitespace size on top and bottom.

* The container has a shadow but nothing else does; except for the gradients on the buttons, if you see that as a shadow – in which case this is doubly awkward because the shadows are running in different directions.

* Why is the container 940px wide? Since the contents don't seem to fill it horizontally, it could be narrower. This would be good because it would work better on smaller screens – especially mobile devices.

* On the search page:

* It's a little strange that 'make and cheapest model' contains links, and 'website' doesn't. I couldn't guess where those links were going to take me.

* You have a 'price' column, and then a 'purchase' column, where each button has the price on it. The 'price' column could go. (You have to be able to sort based on the purchase column, then, though.)

* Why are the contents of some columns centred while others are left aligned?

* Why are the website names a different size and font weight, and why are they all in caps?

* As others mentioned, you don't need the back buttons.

* 'Showing…' doesn't line up with anything.

* I don't have a suggestion here per se, but it takes several clicks to get from stating a size to buying a tyre. To me, the information hierarchy was not obvious. After I got past the search page, I was confused each time I saw another link. I couldn't predict where any of those would take me. Eventually I figured it out, but it would be good if I didn't have to.

* Write good, semantic HTML, and validate it. You are using a bunch of deprecated elements (like <center>) where you should be using CSS instead, for example. [http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tyresum.c...](http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tyresum.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)

Hope that helps. Basically, I think their are two main points. The first is
about implementation: you should try to follow coding best practices, like
using semantic HTML and sanitizing your SQL. The second, which relates to
design, is that every aspect of your design should have a 'why.' If someone
asks (or, hopefully, you ask yourself) 'why is this here? why is this this
colour? why is this this size?' etc. you should have a rock-solid answer. If
the user finds themselves wondering those things, it probably means it needs
work; likewise if you don't have an answer.

------
oinksoft
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.

~~~
rosspanda
yep, i need to sort that, thanks

~~~
xr09
For car owners this is a non-issue but we geeks are not that car-savvy. I
tried several combinations before finding a good one.

Maybe a "most searched" sizes could beat this.

~~~
rosspanda
thanks for the feedback, we only have the top 50 tyre sizes in the DB, we are
adding more sunday

------
incision
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.

~~~
kcorbitt
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).

~~~
hamburglar
Don't rely on cursor alone unless you want confused mobile users...

------
andrewljohnson
Instead of letting me search for things that don't exist, use JavaScript to
update the UI when I select from the top rows.

~~~
rosspanda
thanks, i will work on that next

------
scoot
Nice clean UI, but:

You don't offer filtering by (or at least display in the table of) the speed
and load rating - these are critical to legal tyres, and could invalidate
insurance if found to be incorrect.

You don't filter / display EU tyre labelling - not sure what your legal
obligation is, but it would be useful to be able to set a minimum economy /
grip or maximum noise rating, or sort results by those.

You only display brand, not model - most premium brands have several models in
each size, for example Continental EcoContact, PremiumContact, SportContact -
I may only be interested in one of those.

Otherwise, good job!

------
tsm
I got excited--it _looks_ great in ELinks! But doesn't actually work (none of
the buttons are clickable).
[http://i.imgur.com/zH5E2Ib.png](http://i.imgur.com/zH5E2Ib.png)

~~~
groovy2shoes
None of the buttons are clickable for me in Chrome, either.

~~~
rosspanda
that's weird , works fine on my chrome on my mac, i will take a look

------
tezza
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

------
user24
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?

------
phireal
"We compare so you don't have too" should be "We compare so you don't have to"

~~~
wldlyinaccurate
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 probably have a disorder. I should get help.

~~~
sdfjkl
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.

------
codergirl
Would be nice if you could select your vehicle and it'd auto select a likely
size

~~~
rosspanda
thanks for the feedback, i have been looking into how to get a database of
car/tyre sizes.

~~~
shade
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.

------
bereft_orange
2 things:

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).

~~~
rosspanda
sorry about that, I have put a default on the page

------
sdfjkl
Find out whatever the most common tire size is and preselect it. This serves
both to explain how it works (i.e. you have to make 3 selections) and lets
people see what the site does with just one click (instead of 4).

~~~
sdfjkl
Also, while "no images" may be special on HN, users don't give a shit. Images
used right are enormously useful. In this case, I'd add exactly three,
symbolizing width, profile and size. Also, separate the three selections a bit
more from each other, and perhaps even add a stylized tire to the top/logo to
make it immediately clear what the site is about.

~~~
dave5104
+1 for your comment. I don't see why "no images" is special anywhere. I think
images would help out a lot here, as you mentioned, especially since I've
never bought a tire before and have no idea what I'd be looking for.

Images, just like any other UI paradigm, have their appropriate and
inappropriate uses. Producing a UI with no images, and shining the spotlight
on that fact, is just the same as saying "Look at this UI with no buttons!",
which is silly if buttons might be appropriate, just as images could be
appropriate in this case.

------
noir_lord
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.

~~~
brudgers
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.

~~~
mynameisme
With the amount of possibilities this has, all the options could be included
in the page load, making the filtering (almost) instantaneous.

~~~
brudgers
I fucking hate slow loading pages. It's why I browse from my desktop with
NoScript.

------
jabiko
#) It seems like you're not sanitizing the input parameters before using them
to construct a SQL query. You should propably fix 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 ;-)

~~~
rosspanda
thanks jabiko, thats now top priority to fix

~~~
qw
You should also clean the search parameters:

Example: [http://alturl.com/6a7vw](http://alturl.com/6a7vw)

~~~
rosspanda
thanks qw, i'm on it, only had 10 hours to do the whole site so missed some
stuff, thanks for the feedback.

------
jeremyt
Two things that I saw:

* If there are instructions, that's usually a red flag to me that I've done something poorly in the UI design. I agree with one of the previous commenters that you should do a make/model search instead.

* I'm not quite sure what to do with the filter field on the results page. It's just a blank text field. Does it filter by keyword?

------
infogulch
If you click a button and drag the mouse it starts a rectangular selection
that can select multiple buttons on the same row. (Chrome, Win 7)

~~~
hammock
Same thing in safari

------
mark-ruwt
I'd guess that very few people know the size of their tires offhand, so their
first experience will be experimentation.

Add a list of the "Most Popular" 5 tires sizes so that these first-time users
can still use the site and understand what it does. Then when they actually
need to shop, hopefully they'll give you another go.

------
clintonhalpin
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.

------
minimaxir
I'd recommend against using the Default Bootstrap CSS (tm) if you're trying
for a unique UI approach.

------
lewispollard
Not really UI feedback but "clicking on the box's below" box's should be boxes

~~~
tlongren
Should he call them squares instead?

~~~
nrabins
I think he was referring to the pluralization of box.

~~~
rosspanda
thanks now fixed

------
smoyer
How about putting the number of available listings in parenthesis below each
button number (width, profile and size). Instead of just enabling/disabling
the buttons when a selection is made, update the count of available items.

~~~
rosspanda
good idea, i think we will add that, cheers

------
nrabins
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.

------
aualin
Add cursor: pointer or similar to the boxes where you select size, etc.

------
brudgers
Browsed with Windows Phone 7.8

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.

~~~
rosspanda
thanks for that :-)

------
xr09
Maybe I'm a freak but putting a js in a css folder feels weird.

<script src="/css/tyrejs.js" type="text/javascript"></script>

~~~
acturbo
i use /libs and put js, css and less files there. After years of /css and /js
folders, i find /libs to be much easier to work with.

------
assaflavie
What this then?
[http://www.tyresum.co.uk/images/graph.png](http://www.tyresum.co.uk/images/graph.png)
:)

~~~
5h
and
[http://www.tyresum.co.uk/images/sort_asc.png](http://www.tyresum.co.uk/images/sort_asc.png)

~~~
vadvi
[http://www.tyresum.co.uk/images/sort_both.png](http://www.tyresum.co.uk/images/sort_both.png)

------
imdsm
Found an image:
[http://www.tyresum.co.uk/corporate.php](http://www.tyresum.co.uk/corporate.php)

~~~
rosspanda
:-) forgot about that one

------
ss64
It would be nice if the buttons actually looked like tyres, you could also
make them wider/thinner to reflect the different sizes.

------
grrrando
Aesthetics are a big part of UI, and the default Booststrap aesthetic works
only with some supplemented creativity.

------
maximilianburke
As an autocrosser it would be great to have some bigger tire sizes (275, 285,
295, 305, 315, 335) to choose from.

------
rosspanda
ps. data is almost clean just a few bits to sort out. so please ignore any
duped data etc.

------
tlongren
Good job. Haven't we been doing this for a few years with CSS3? I have anyway.

------
rosspanda
p.s. 205/45 17 is a good test tyre size

~~~
bernarpa
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.

~~~
to3m
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](http://www.blackcircles.com/tyres).

------
techplex
tyre Whats that?

~~~
rosspanda
lol, try tiresum.com

------
WayneDB
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.

------
dokem
Wait. You own tiersum.com and still decided to call tires 'tyres'? Why don't
you, ya know, spell the word correctly?

When I visited your page, between the horrid spelling and lack of images, I
had no clue what the hell your site was supposed to do.

~~~
scrumper
"Tyre" is British English for the black rubber cylinders that wrap around a
car's wheels.

Also, physician, heal thyself: you've spelled 'tire' as 'tier' in your first
sentence.

