Re-Review - Image Search Engine

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
Glad to be back on the forum.

My site at www.qualityimagesearch.com is now about 10 months old and gets 700-1,000 visits a day - not bad - at least the adverts are paying for the site now!

Now that it seems to be running well and I have a good amount of images in the index, I'm starting to look over the design again and tweaking it.

For feedback, I'm looking for specific points..

1) Does it look professional?
2) Does it work in your browser - if not, please state what your browser is.

Otherwise, more simply, do you like it?
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
First, a couple of issues:
1. When clicking on the image to take to the image page it will automatically download the image, which could frustrate quite a few new users. The expected behaviour would be to display the image full size on that page with a download button that can then be clicked.

2. Having a query already inserted when the page loaded seems a little odd and can turn up some strange results. Really the initial page should be clean and simple and have a single search box without any images displayed.

In terms of design, the torn page effect still seems a dated and the logo tells you nothing about the site. A search engine should give complete prominence to the results and should not be distracting. I'll have a play with some design sketches about what I'm trying to get at and get back to you; of course, you're welcome to ignore it if you don't like it.
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
Well, here's a sketch idea: http://lemon.x10hosting.com/files/x10/lb/
And here is it with a few images straight from your site: http://lemon.x10hosting.com/files/x10/lb/index-searched.html
(Use an up to date browser such as Chrome, as IE will probably choke on some of the newer CSS)

As you might now have noticed, I prefer very minimal designs. I have tried to emphasise both the image search results and the search box, as in your current design they both feel rather sidelined. By using no colour at all in the design allows the images with colour to be the focal point. Implementation of the large preview mouseover is not something I've put in there, but my personal preference would be a floating pane following the mouse that fades in when needed.
The full size preview on another page would have a similar style with the ratings and links etc added at the top where the page numbers are, but again I would switch to a more discrete rating system with monochrome icons. One thing that must be maintained throughout every page is consistency of design.

As I said before though, you're completely welcome to ignore this.

I notice that within your code you have a large preview image for every single image loaded; the more efficient method would be to have one common large image.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
Well, here's a sketch idea: http://lemon.x10hosting.com/files/x10/lb/
And here is it with a few images straight from your site: http://lemon.x10hosting.com/files/x10/lb/index-searched.html
(Use an up to date browser such as Chrome, as IE will probably choke on some of the newer CSS)

I have to admit, I'm with you on minimalism and I do quite like your suggestion. (You're right, IE hates it, but it does degrade reasonably apart from the float on the images). Ihave to admit, I still code using heavy css1 lol so this will be a new concept. I guess it's time now to start embracing css2. Is it wrong to think that anyone with an outdated browser should upgrade???

I do however have two nagging doubts.

1) The design looks beautifully clean; however, it also has a "template" feel to it and follows the same general layout as many wordpress layouts. Perhaps I can make it just a tad different.

2) My second doubt is more to do with feasibility and its something I struggled with in the beginning. You mention a floating pane - which is fine and similar to google's answer, but I don't want to lose the size of the preview as it's one of my USP's. Soo.... where do I put it??? If I follow your design, the large preview would have to be centralised in some way, but the way it's set up currently, when the mouse is over the preview, the link stays live (I'm using pure css) and the large preview persists and blocks the other thumbs. This is why I went for a split screen design. I could probably do this better in JS but unfortunately, my knowledge of JS is extremely limited.


As you might now have noticed, I prefer very minimal designs. I have tried to emphasise both the image search results and the search box, as in your current design they both feel rather sidelined. By using no colour at all in the design allows the images with colour to be the focal point. Implementation of the large preview mouseover is not something I've put in there, but my personal preference would be a floating pane following the mouse that fades in when needed.
The full size preview on another page would have a similar style with the ratings and links etc added at the top where the page numbers are, but again I would switch to a more discrete rating system with monochrome icons. One thing that must be maintained throughout every page is consistency of design.

As I said before though, you're completely welcome to ignore this.

I notice that within your code you have a large preview image for every single image loaded; the more efficient method would be to have one common large image.

I will never ignore your comments as you have been extremely helpful right with the vast majority of questions over the years - thank you again.

I have to admit, I'm struggling to understand your last statement - one single common image. Yes there is a large preview for each image but they only load on mouseover, ensuring a fast load of thumbs. Could you please elaborate?
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
Ihave to admit, I still code using heavy css1 lol so this will be a new concept. I guess it's time now to start embracing css2.
We're on CSS3 now, so support of CSS2 should be assumed to be global and trying to support any user that is using a browser older than that is going to negatively affect your other members by limiting what you can achieve.

1) The design looks beautifully clean; however, it also has a "template" feel to it and follows the same general layout as many wordpress layouts. Perhaps I can make it just a tad different.

You're completely free to use and change whatever you want and however you want or just take snippets. What I've given here is a blank slate and once you start putting in your own logo, title etc it'll start to be very much more custom.

2) My second doubt is more to do with feasibility and its something I struggled with in the beginning. You mention a floating pane - which is fine and similar to google's answer, but I don't want to lose the size of the preview as it's one of my USP's. Soo.... where do I put it??? If I follow your design, the large preview would have to be centralised in some way, but the way it's set up currently, when the mouse is over the preview, the link stays live (I'm using pure css) and the large preview persists and blocks the other thumbs. This is why I went for a split screen design. I could probably do this better in JS but unfortunately, my knowledge of JS is extremely limited.

That's where I imagined the hard work would be, as you will want a solution that is both intuitive and functional. Another option would be to segment the main results when you mouseover, perhaps even with a nice animation support for new browsers. What I mean here is that as the mouse goes over the results compress left and the preview appears. This would be similar in concept to what you have currently, but the preview is integrated into the flow of the page.
The JS would be trivial and if need be I could probably put an example together sometime later this week. For now I'll just show you a static example of what it could look like once the mouse is over, so this doesn't have any of the actual loading logic: http://lemon.x10hosting.com/files/x10/lb/index-mouseover.html

I have to admit, I'm struggling to understand your last statement - one single common image. Yes there is a large preview for each image but they only load on mouseover, ensuring a fast load of thumbs. Could you please elaborate?

What I man here is have one single common <img> tag that any mouseover will load into. So rather than send the user an <img> tag 100's of times just in case they mouseover, you assign the mouseover to set the common image rather than it's own image. So rather than:
Code:
document.bigpreview30237.src='http://images2.layoutsparks.com/1/132764/cold-ice-winter-blue.jpg'
You would do:
Code:
document.commonPreview.src='http://images2.layoutsparks.com/1/132764/cold-ice-winter-blue.jpg'
Or have a wrapper function
Code:
setPreview('http://images2.layoutsparks.com/1/132764/cold-ice-winter-blue.jpg')
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
I'm working on it now - I'll keep you informed as it gets near to doing something with the js
 

baladesinsolites57

New Member
Messages
5
Reaction score
0
Points
0
lokks professional just that the menu looks like google ads ... ? it is a bit disturning . the rest if good . works good on my browser ( firefox 3.6.13 )
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
OK - this has proven to be a whole load of fun - not!

I've attempted some sort of JS, but my skills are just not up to scratch.

I have however looked at the design and am working on a page at http://www.qualityimagesearch.com/test.php

The structure is virtually identical to the previous (with a few tweaks) but cleaned up a lot. Forget about the logo - that's easily sorted.

Couple of things..

1) Although copied from your css and source, I have a bug in my input text field - being too tall and noth matching the submit.. weird. Is it something to do with text size?? can't be - both specified at 10pt - can't figure that out at all.

2) the thumbnail div has an interesting bug in Firefox - leaving the equivalent of a (approx) 4px pad at the base - are you getting this too? Chrome is fine.

3) The menu system is next - this now sticks out like a sore thumb.

4) Not sure if it needs radius corners on the contentbox - overkill?

5) I got rid of the "addthis" widget - it wasn't getting me very far anyways.

6) Yes the background is #efefef as opposed to white - I felt the preview box stood out more?

Thoughts?
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
Sorry for the double post but I have done quite a bit of work to this...

Logo change
complete css overhaul
new menu

A few cross-browser issues - especially with IE

IE8
qisIE8.jpg


Firefox
qisFF.jpg


Chrome
qisChrome.jpg


I could do with just a few comments before I go live and run this through the rest of the site.

http://www.qualityimagesearch.com/test.php


Thanks
 
Last edited:

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
The design:
1. Add some css for your links, as currently the browser is just sticking them in as purple and blue.
2. The image results still look squashed up. Ideally they should have at least 50% of the width of the page See this: http://lemon.x10hosting.com/files/tinygrab/5ce5386be6afd1cf10f0c7f79651ef8c.png
3. The drop shadows are all a tad too dark, they should be a subtle hint of 3D rather than a full blown shadow.

The icon:
1. The arrow on the new icon is a little...well...odd.
2. The radius of the outer shape corners do not match with the distance from the inner vertex, meaning the overall effect is that the shape looks a bit bulbous.

As I don't have IE, I can't tell you immediately why the search box is behaving like that, but the likely solution is a missing default value that IE is applying to the text box.

Before you go live, ensure you have all the vendor prefixes and the official versions for all new CSS rules. e.g border radius should have:
Code:
-webkit-border-radius: -px;
-webkit-border-radius: -px;
-o-border-radius: -px;
border-radius: -px;
Similar things apply for the shadows and for the gradients. If you are tired of typing all that out by hand, take a look at less.js which will do it all for you.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
OK

CSS on page numbers - done

Depth of shadows - agreed - tuned down to just 0.3. I've also reduced the size and lightened the border to suit - much better :D

Arrow on icon - redesigned, although I'm still not sure I like it.

Radius vs vertex distance - agreed and re-done.

My only hesitation is the degree of space alocated to the results. I specifically did it this way to maximise the 4:3 nature of most images in the large preview pane (see example below). This is a feature I particularly like and don't have a problem scrolling down through the results. That said, I understand what you're saying and am open to furhter comment on this.

screennew.jpg


I had an idea for the index 'clean' page. This page showed can be a results page and just create a new index page with a simple description and search box - centralised without results.

I hope I'm getting there :s
 
Last edited:

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
Shadows: perfect
Icon: better
Page numbers: fine
Link colours: still need sorting - blue and purple.

Just had a thought: let the user decide how wide they want the results to be by using a flexible model. i.e Have a drag grab in between the two columns where the user can click-fold and slide it left or right to their hearts content. It's not the easiest thing to do and requires JS, but would be pretty cool.

Other than that, looking great and a fresh change from the current homepage.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
Many thanks for your continued support.

Link colours have been amended.

Absolutely love the idea of the drag column width - I'll investigate.

Rich
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
There are a few JS libraries that a designed specifically for that, there are others that make it easier or you could implement it completely raw. Personally, I prefer to do it all from raw JS, but a library would suffice just as well in this case, probably better if you don't know JS too well.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
There are a few JS libraries that a designed specifically for that, there are others that make it easier or you could implement it completely raw. Personally, I prefer to do it all from raw JS, but a library would suffice just as well in this case, probably better if you don't know JS too well.

I've found something I might be able to use - with a bit of customisation.

http://www.qualityimagesearch.com/test/dragresize.php

Just need to figure how to cutomise now lol.
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
If you get stuck or need any help, let me know and I'll take a look later this week.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
Yah - this has become really complex whe it probably doesn't need to.

I can get the left div to stretch nicely, but the right col doesn't default to full width when using inline-block. I've also tried using width: 100% but witdth but it fills the entire background.

In addition, I can't get the floating span for the big preview to fillow the same pattern.

As you said... tricky.

Every time I think I'm getting closer, I try it in Chrome or IE and get a completely different effect.

That said, my pages per visit has gone up a lot, although weirdly, my bounce rate has also gone up... :S

I've done another logo, but still not sure and working on another one.

Rich
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
That overall theme of that logo is really good, needs a couple of tweaks but otherwise I think you may finally have it. For what it's worth, I went through four or five logo revisions before I settled on one I liked.

I see you've made a new image view page too, however it is still force downloading the image rather than just displaying full size, which may be why users are leaving prematurely. Also, you'll want to sort out the word wrap in the 'View website' button, as for some urls it overflows; I believe there is a CSS property that fixes precisely this.

Another little UI quirk: do you keep a reference to the size of the images in the database? If so, you could preset the images size in the page source so that they aren't little squares whilst the images are still downloading, that then reflow every time a single image loads.

As for the resizing, do you have a live copy I can look at? Perhaps I'll be able to shed some light on the issues.

That said, my pages per visit has gone up a lot, although weirdly, my bounce rate has also gone up... :S

Never underestimate the power of good design; if you are willing to put the work in to create something beautiful then they will keep coming back for more. As I noted above, the bounce rate increase could be due to the forced download, although the bounce rate is not necessarily always a good metric to use.
 

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
That overall theme of that logo is really good, needs a couple of tweaks but otherwise I think you may finally have it. For what it's worth, I went through four or five logo revisions before I settled on one I liked.

Hmmm - my wife hates it and I thought it was OK - she seemed to think it looked like a naked baby - bit disturbing!

I see you've made a new image view page too, however it is still force downloading the image rather than just displaying full size, which may be why users are leaving prematurely.
Now here I'm puzzled. Yes I have re-done the css to match, but when you say 'force downloading', isn't the page you click on meant to download the image? Just to clarify, I don't (can't) store every full-size image due to bandwidth/memory limits, so all these are shown through an iframe link to the original. The iframe is just to re-size to a comfortable all-image view for some browsers (not chrome or IE). I could use the GD library to re-create a smaller image, but this too is going to eat into my bandwidth. My only other option is to display the thumb again, although this would personally annoy me as a user.

Also, you'll want to sort out the word wrap in the 'View website' button, as for some urls it overflows; I believe there is a CSS property that fixes precisely this.

I tried the obvious overflow:hidden method with little success (in chrome but works in FF), but have managed to integrate the php wordwrap() reasonably.

Another little UI quirk: do you keep a reference to the size of the images in the database? If so, you could preset the images size in the page source so that they aren't little squares whilst the images are still downloading, that then reflow every time a single image loads.

Another interesting point. I would love to store the filesize, but haven't yet successfully managed it. The filesize() function doesn't access external files and seems to be a bit buggy. Without opening the file and reading content bytes, I'm not sure how to go about this. The crawler is already pretty slow and I don't realy want to slow it down further.

I've googled till my fingers bleed but still no concise answer. I'll post on the programming help in addition to this.

As for the resizing, do you have a live copy I can look at? Perhaps I'll be able to shed some light on the issues.

The test file I'm working on is on a stick that's at work - I'll bring it in a upload it.

Never underestimate the power of good design; if you are willing to put the work in to create something beautiful then they will keep coming back for more. As I noted above, the bounce rate increase could be due to the forced download, although the bounce rate is not necessarily always a good metric to use.

I'm certainly willing to put in the effort, as you might have gathered. I'm obviously not a professional web designer but effort pays!

I've also noticed the number of recent images increasing (uses a time threshold as a cut off), so users so obviously prefer the UI.

Interesting to note that not many others are commenting. I guess it's gonna be a design by me and you!
 
Last edited:

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
Now here I'm puzzled. Yes I have re-done the css to match, but when you say 'force downloading', isn't the page you click on meant to download the image? Just to clarify, I don't (can't) store every full-size image due to bandwidth/memory limits, so all these are shown through an iframe link to the original. The iframe is just to re-size to a comfortable all-image view for some browsers (not chrome or IE). I could use the GD library to re-create a smaller image, but this too is going to eat into my bandwidth. My only other option is to display the thumb again, although this would personally annoy me as a user.

What I mean here is that when I click on any image in the search results and it goes to that page, it doesn't display the image in the browser window but rather just starts a download that puts it in a folder on my computer. The expected behaviour would be to have an <img> tag on that page with it's src set to the url of the full size image, so the user can see the image in full within the browser window. I'm going to suggest that the use of an iframe to try to display an image is what's causing this force-download in some browsers and moving to an <img> tag that has preset dimensions will probably be the resolution. If I'm still being a bit cryptic, let me know and I'll make an example to show you.

I tried the obvious overflow:hidden method with little success (in chrome but works in FF), but have managed to integrate the php wordwrap() reasonably.

CSS has this built in, so you can avoid having the server do this: http://www.webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap/

Another interesting point. I would love to store the filesize, but haven't yet successfully managed it. The filesize() function doesn't access external files and seems to be a bit buggy. Without opening the file and reading content bytes, I'm not sure how to go about this. The crawler is already pretty slow and I don't realy want to slow it down further.

What I meant here was the dimensions of the image, i.e 1024 x 768. So if you know the size of the thumbnail you are going to send, then preset the size of each of the <img> tags so that they are the correct dimensions so that they do not resize once the image loads. i.e you are currently sending an <img> tag that looks like so:

Code:
<img src="thumbs/178077.jpg" alt="flower in a bubble   "/>

Whereas if you know the image dimensions you could send them like so:

Code:
<img src="thumbs/178077.jpg" width='1280' height='800' alt="flower in a bubble   "/> //Check this syntax though, it may not be correct
 
Last edited:
Top