Show HN: A site using zero images – any feedback on the UI? | Hacker News Reader

Show HN: A site using zero images – any feedback on the UI?

tyresum.co.uk

40 pointsrosspanda77 comments

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

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.

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.

yep, i need to sort that, thanks

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.

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

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

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

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

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

thanks, i will work on that next

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!

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

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

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

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

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?

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

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.

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.

good spot, now fixed

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

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

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.

This is the first thing I thought about too.

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

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

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

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.

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

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.

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

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

#) 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 ;-)

thanks jabiko, thats now top priority to fix

You should also clean the search parameters:

Example: http://alturl.com/6a7vw

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

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?

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)

Same thing in safari

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.

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.

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

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

Should he call them squares instead?

I think he was referring to the pluralization of box.

thanks now fixed

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.

good idea, i think we will add that, cheers

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.

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

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.

thanks for that :-)

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

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.

What this then? http://www.tyresum.co.uk/images/graph.png :)

and http://www.tyresum.co.uk/images/sort_asc.png

http://www.tyresum.co.uk/images/sort_both.png

Found an image: http://www.tyresum.co.uk/corporate.php

:-) forgot about that one

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

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

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

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

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

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

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.

tyre Whats that?

lol, try tiresum.com

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.

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.

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

its a UK site, so is spelt correctly, if we do a usa one we will use the tiresum domain

I have shown my ignorance. apologies.

Reply on news.ycombinator.com