11 ms·
Show HN: A site using zero images – any feedback on the UI?
- rosspanda 13y agops. data is almost clean just a few bits to sort out. so please ignore any duped data etc.
- aualin 13y agoAdd cursor: pointer or similar to the boxes where you select size, etc.
- rosspanda 13y agop.s. 205/45 17 is a good test tyre size
- bernarpa 13y agoBeing 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 13y agoIt 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.
- minimaxir 13y agoI'd recommend against using the Default Bootstrap CSS (tm) if you're trying for a unique UI approach.
- codergirl 13y agoWould be nice if you could select your vehicle and it'd auto select a likely size
- rosspanda 13y agothanks for the feedback, i have been looking into how to get a database of car/tyre sizes.
- eddmc 13y agoCar 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.
- shade 13y agoFor 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.
- eddmc 13y agoThis 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.
- tezza 13y ago1. 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
- noir_lord 13y agoIf 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 13y agoWhat 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 13y agoWith the amount of possibilities this has, all the options could be included in the page load, making the filtering (almost) instantaneous.
- brudgers 13y agoI fucking hate slow loading pages. It's why I browse from my desktop with NoScript.
- infogulch 13y agoIf 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 13y agoSame thing in safari
- clintonhalpin 13y agoIn 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.
- bereft_orange 13y ago2 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 13y agosorry about that, I have put a default on the page
- imdsm 13y agoFound an image: http://www.tyresum.co.uk/corporate.php http://www.tyresum.co.uk/corporate.php
- rosspanda 13y ago:-) forgot about that one
- lewispollard 13y agoNot really UI feedback but "clicking on the box's below" box's should be boxes
- incision 13y ago1.) 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 13y agore: 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 13y agoDon't rely on cursor alone unless you want confused mobile users...
- rodolphoarruda 13y ago> 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.
- brudgers 13y agoBrowsed 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 13y agothanks for that :-)
- phireal 13y ago"We compare so you don't have too" should be "We compare so you don't have to"
- wldlyinaccurate 13y agoI'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 13y agoI 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.
- rosspanda 13y agogood spot, now fixed
- oinksoft 13y agoIt 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 13y agoyep, i need to sort that, thanks
- andrewljohnson 13y agoInstead of letting me search for things that don't exist, use JavaScript to update the UI when I select from the top rows.
- rosspanda 13y agothanks, i will work on that next
- tlongren 13y agoGood job. Haven't we been doing this for a few years with CSS3? I have anyway.
- assaflavie 13y agoWhat this then? http://www.tyresum.co.uk/images/graph.png http://www.tyresum.co.uk/images/graph.png :)
- WayneDB 13y agoOff 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.
- tsm 13y agoI 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 13y agoNone of the buttons are clickable for me in Chrome, either.
- rosspanda 13y agothat's weird , works fine on my chrome on my mac, i will take a look
- techplex 13y agotyre Whats that?
- rosspanda 13y agolol, try tiresum.com
- nrabins 13y agoIt 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.
- jabiko 13y ago#) 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 ;-)
- user24 13y agoI 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?
- grrrando 13y agoAesthetics are a big part of UI, and the default Booststrap aesthetic works only with some supplemented creativity.
- sdfjkl 13y agoFind 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 13y agoAlso, 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 13y ago+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.
- nickloewen 13y agoI 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.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 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.
- scoot 13y agoNice 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!
- jeremyt 13y agoTwo 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?
- dokem 13y agoWait. 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 13y ago"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.
- rosspanda 13y agoits a UK site, so is spelt correctly, if we do a usa one we will use the tiresum domain
- dokem 13y agoI have shown my ignorance. apologies.
- xr09 13y agoMaybe I'm a freak but putting a js in a css folder feels weird. <script src="/css/tyrejs.js" type="text/javascript"></script>
- acturbo 13y agoi 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.
- maximilianburke 13y agoAs an autocrosser it would be great to have some bigger tire sizes (275, 285, 295, 305, 315, 335) to choose from.
- smoyer 13y agoHow 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 13y agogood idea, i think we will add that, cheers
- mark-ruwt 13y agoI'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.
- ss64 13y agoIt would be nice if the buttons actually looked like tyres, you could also make them wider/thinner to reflect the different sizes.