Mock-up for Browsershots 0.3

2006-03-15 05:52:03 | johann | #

I have started designing the user interface for the next version of Browsershots. Now I'd love to get feedback and ideas for it. Please have a look and tell me what you think. Remember that it's only a mock-up with no real functionality so far.

You can either post a comment right here, or send Email, or open a Trac ticket. If you are a web designer, send me a scribble with your ideas! I'm particularly interested in the following points:

• Cross-browser testing of interactive elements.
• How much AJAX is possible without overdoing it?
• Do we need something called corporate identity?
• Round corners and shaded backgrounds, or simple flat boxes?
• Where do I put the language selector drop-down box?
• What issues have I failed to consider so far?

Good, but what are the pictures good for?

posted 2006-03-19 22:05:02 by Robi

Well... ;-) Robi

Nice, but a few suggestions

posted 2006-03-21 02:45:55 by Peter Andrews

I like the new design. It adds functionality without being overwhelming, and the layout is pretty good. I really like having the browser selection right under the entry field.

My one gripe is with the strip of pictures along the top: they expand too far. I'd keep them inside the imaginary layout box so that things look more structured. Also, I'm not sure that dynamically-resizing images is such a good thing to have on the front page, although they're darn cool. The reason is that having something that fun to play with draws the user away from the main point of the page, which is the text-entry box and checkboxes. Maybe you can use zoomable pics on the screenshots page instead? And at any rate, it's pretty neat to have recent screenies on the front page. Gives it a more friendly feel.

Along those lines, maybe you could have an auto-update script feed the pictures using ajax so that they're updated in real time as the user's there. In that case, you could have fun with sliding effects or somesuch to make the transitions work. As for where to put the languages drop-down, I'm thinkin' lower right-hand corner, either next to the xhtml/css links or just below them. Putting it next to the links would make that bottom strip more symmetric, but putting it below would help balance the "sponsored by" logo.

The box shape issue is a much tougher question, but I'd go for simple, flat, squared-off boxes. The reason for this is two-fold. 1, flat is cleaner and generall more professional-looking. 2, flat goes with the screenshot nature of the website and complements the shape/styling of the screenshots themselves.

AJAX...well, it's useful, but keep in mind people with semi-limited bandwidth. Although a dsl user may be able to use the site's functionality without a problem, throw in too much background communication and he/she could end up with a bad experience. In all, I like the new design. :-)

Thoughts

posted 2006-03-22 05:25:18 by Todd Moy

The page thumbnails that run across the top of the page are an interesting feature but a bit distracting. I prefer the simplicity of the original index page. That said, I do like the ability to select the type of browser to test. One other feature that I would like to see the ability to return to browsershots and have links to my latest shots (or queue time for those unprocessed.) Having to search for the specific url often requires me to go back to my site and copy/paste the url in. Not a huge problem but one that would make life easier.

Simplicity

posted 2006-03-23 22:33:32 by Etienne Girardet

I like the idea of options to be seen on the first page. the screen-shots you are showing are interesting (inspiring), but distracting. the simplicity of the actual design should be the guideline for the new design (if neccessary). maybe you could put some space between the most important part (url-form) and the options and than the screenshot (more down). the blue header is giving the page some sort of heaviness which i think isnt neccessary. keep up your good work.

U should start thinking about Distributed Computing

posted 2006-03-24 15:26:59 by Yousif

Hi Johann, I think the new design looks a lot "cooler" than the current one. Anyway, to the current issue , obviously your computers can't handle the increasing load and the queing time is on the increase. Why don't you start promoting Distributed computing. Ask your users to participat, let them generate PNG instead of a single box you're using. Not many will help but some might. You might want to start accepting registrations. A windows client is very easy to make too and if i have the time, i might actually make one (if you haven't started making one already and I would need an account obviously which i don't).

CONGRATULLATIONS

posted 2006-03-25 13:58:50 by 3ARRANO

Very nice!!

defaults

posted 2006-03-31 21:46:35 by thinsoldier

No disrespect to the other browser vendors but I think the majority are mainly concerned with checking IE, firefox, safari, and konqueror. Having all those browsers checked by default will no be good for the queue since a lot of visitors won't have the patience or consideration to un-check the browsers they're not concerned with. For example, I already know what my sites look like in most of the linux, mac, and windows browsers, I'm really only concerned with IE7beta.

But, as on the current live site, when I search I automatically add to the queue on ALL of the browsers when I'm only concerned with 3 or 4. I've got to wait over 60 minutes to see what opera looks like due to the queue! And maybe 15 minutes of that wait is probably my fault since I unknowingly checked 7 sites in all browsers prior to the one I wanted to check only in Opera.

No, because each of the browsers has its own queue

posted 2006-04-01 01:12:27 by Johann

Different browsers can run on different machines, and each screenshot factory machine will process its jobs at its own rate. That's why the queue time for some browsers is significantly shorter than for others. You could think of it as a separate queue for each screenshot factory.

But you're also right because currently 6 of the Linux browsers still share one machine and the throughput is far from satisfactory. Version 0.3 is coming along in small but steady steps, I'm currently making progress on the database backend with privilege management for the distributed factories.

Thanks for your input. I think I shall add some links or buttons for quickly (de)selecting groups of browsers.

Well done!

posted 2006-04-05 12:06:44 by Patric

I really like the new design! As mentioned before I would leave the picture on the top as they are. Everything else is really good!

Amazing

posted 2006-04-06 08:04:05 by Alex

Just wanted to say thank you for Browsershots. It has filled a great hole. RE the new interface IMHO the current one is perfect. Maybe it could do with a browser type select field. Otherwise simple s best. Great work, keep it up :)

Form should follows function

posted 2006-04-06 13:12:18 by Klaus

Hi Johann,

Cross-browser testing of interactive elements?
- Would be fine, of course.

How much AJAX is possible without overdoing it?
- Why not, but please helpful things.

Do we need something called corporate identity?
- Yes, your excellent service should have one, actually you have one with the logo and the minimalistic clear design of your sites. I like it!

Round corners and shaded backgrounds, or simple flat boxes?
- Stay tuned with the simple flat boxes. I think, its for a better communication to the user.

Where do I put the language selector drop-down box?
- Maybe, try it bottom right?

What issues have I failed to consider so far?
- Please again in the new version: red color and the minutes for closed queues, its very helpful.

Keep up your great work!

KISS

posted 2006-04-07 12:26:15 by Tatu

What do I know? Nothing! I'm a fool. So please ignore everything I say...

? Do we need something called corporate identity?
! When asked about this, somebody once said something like: "Pick a font and stick with it".

? Round corners and shaded backgrounds, or simple flat boxes?
! Flat. It's faster. Fast is good. Make it Fast! Fast! Fast!

? Where do I put the language selector drop-down box?
! On top. As early as possible. If not first, then second.

? What issues have I failed to consider so far?
! The screen shots slow down the loading of the page. Could they be moved to a different page? They are cool, but they aren't necessary - unless you use them to illustrate the site's purpose (for example, by showing only one site in different browsers. Then you could also use the Linux, Mac, Windows, etc. titles as descriptions of those screen shots.)

! Enhance the text input box. It's the most important thing and a mere box is too plain. For example, use thick and colorful borders or color inside the box. (Although I'm sure people will get it in any case.)

! For visual balance, put "Sponsored by" on top of the logos. That'll clarify one edge. Then align them right, below the columns "Terminal" and "Mobile", where the page is now empty.

! When you're on the home page, you can't have a link to the home page.

! Write full text for the links. "Blog" isn't enough. Whose blog? Blog about what? What's a "Trac"? What will happen when I click?

! Home, Trac & Blog seem like new locations whereas Sign Out seems like an action effecting the whole site (But what settings, sign out from where? The prototype's not working so I can't tell.) These locations and actions are in the same group (gray) but the function seems different. (Of course, the users will get it. I'm just trying to think of an ideal solution.)

And now, forget what I wrote. I speak of things I don't understand. I couldn't do my work without your site. Thank you.

Time

posted 2006-04-07 12:47:58 by Tatu

One more thing... The length of the queue should be shown next to the check box. There could be a number that shows the time in minutes, in red if the queue is long and green if it's short.

Simpel und übersichtlich...

posted 2006-04-21 12:53:32 by Jakob Montrasio

...genau so muss es sein! Vor allem, dass man gleich alle Browser sieht, ist extrem sinnvoll.

Degradable?

posted 2006-04-21 12:56:11 by Gordon Brander

Make sure that those fancy expanding shots degrade gracefully. Also, I would agree with andrew peters, they do expand too far.

switch perspective

posted 2006-04-21 13:06:04 by Gerd Brunzema

Firstly I'd like to say that this site is a great great thing! Wonderful!

About the new design I would like to add the thought, that it looks like an (successful) attempt to show what is possible (e.g. page thumbnails). But that is a typical developer perspective.

The typical user perspective is different: The user has a single dimensional Problem ("my site looks wrong on browser xy"), wants to check and solve it. All the features (blog, wiki, faq etc.) are completely irrelevant to him. Irrelevant unless he has problems, handling the browsershots.org interface.

Imho you should stick to the google-like layout and offer nothing but the core function plus a "help"-link, a "more"-link and thats it. Show the things, a typical user has in mind at a certain point AT THAT POINT and a possibility so get help. Everything else is distracting/confusing. The people, who want to participate and contribute will find the "more"-link, I sure.

Be clean pure fast and simple, is what I was taught. Haven't found a better guideline yet.
"Kill your darlings" as W. Faulkner said.

greetings
Gerd Brunzema

Comment

posted 2006-05-20 17:44:05 by Ferdi Meijerink

First of all I need to compliment you on the BrowserShots project. It is a really great initiative. And it works amazingly well. I have a few remarks about the new design though:

First of all. The zooming screenshots seem very useless to me. Both the zoomed-in and zoomed-out variant show very little information. Actually I don't get the whole point of looking at other people's screenshots. For me they are merely a display of BrowserShots's features. Furthermore, they zoom over the input-bar and the submit buttons.

The second remark I have is about the options on the homepage. I guess there's an implicit message saying that you can deselect the browsers that are not important to you, whereas I think ALL browsers are (equally) important. Making people able to deselect the text browsers for example makes people less aware of the fact that there's more to life than Internet Explorer. Though on the other hand, showing the options on the homepage does point out there is a vast variety of browsers. Keeping them all selected by default is a requirement.

Another thing is the lack of the inputclear() function that clears the input bar on-mouse-over. Also there's no Help/Option link. But I guess those are just some minor mistakes.

Also, I would like to comment on Todd Moy's feature request. I think it would be really nice to have a submit-history (e.g. by storing the submitted urls in a cookie) page that shows the screenshots/quetime for your queries. The homepage could be used to display a notice when there are *new* finished jobs.

One last thing. I think it would be great to be able to register for a ShotFactory account without the need for human interference. Users who submit bogus screenshots can be blocked using user feedback. I think you would get more users this way and this will shrink the queue.

Additionally, you could implement a reward system (e.g. higher priority in the queue) for users who run a ShotFactory.

That's all I got. Good luck on your project!

sizes

posted 2006-06-07 00:02:50 by Federman

First, I love the project. Well done.

Second, I like to test my websites with at least two screen sizes at the same time (I'm not sure if it creates two queues or one for the server).

Third, the new page stretches to sides and buttom. It creates too much noise as the eye jumps from one end to the other and cannot catch it all at once.

Screen resolutions

posted 2006-06-16 18:17:17 by Martin Cleaver

I particularly like the fact that it will give shots of different resolutions, and the new meaningful, predictable url is a good thing too.

Outbound email notifications of when the site is ready to browse would be useful.

Thanks for this service.