Model train database

[Martijn Meerts]

For a long time now I've been considering setting up a global, online database for model trains. The general idea is to allow people to log in and keep track of their personal collection, but also to allow non-registered people to browse through the database for info.

There would be 1 main database with all the prototype and general model info in it (length, weight and power of prototype, brand, product number, manual sheets, etc of the models), and then each user can have a personal database where they can add additional info, such as maintenance info, where the model was purchased, price etc..

When a user tries to add a train that's not in the database, he/she will be asked to add a new entry in the database for that train. That way, the database continuously grows when more people start using it. Train info can be updated by the users as well.

Other features would include RSS feeds of personal databases, exporting to xls, csv etc, exporting to JMRI/DecoderPro. In the long run I also want to add iPhone/Android apps, possibly integration with computer control software and things like youtube integration (so you can upload youtube video's via the site directly instead of having to go to youtube first). I also really want to get feedback from users for additional features, and then implement the good ones. Another feature that came up while talking privately about the project, is model info integration with the JNS Wiki, which is of course an option as well. It should also be multi-lingual, and I'll likely add both English and Dutch while developing the site. Considering I'll be programming everything from scratch rather than use some existing system, there should be a lot of flexibility.


I've talked about it with a couple of people on the forum already, and a while ago I tried making a start. However, I initially wanted to build the entire site in Flash (or Flex more specifically), but it quickly got too complicated for users.

This time around, I'm sticking to XHTML, CSS and probably JQuery/JQuery UI (and other JQuery plugins). I've registered a domain for it already, and a VPS as well. I'll be using Ruby on Rails (I want to learn it, and I figured it'd fit nicely with a model train project ;)) for all the non-visual programming. I'm also experimenting with backup solutions using the Amazon S3 service.


The problem though, is that I'm a bit stuck if it comes to creating a simple, elegant, easy to use design. I just seem to have approximately no inspiration at all. And since I really want to involve the users of the site, I figured, why not start asking for ideas now ;) I did come up with a really simple yet (in my opinion rather elegant) logo. I'm also tempted to use mainly light, desaturated colours, bordering on grey for the interface, so that especially the pictures pop out. My logo attempt can be seen at http://www.locowerks.net/, which will also be the main url.


So, anyone (possibly someone with some experience in online collection software) have any good ideas for either features or design? Any help would be greatly appreciated :)


(Of course, once the service goes live, it'll be free to use, and I'll keep it free to use for the foreseeable future. I won't be adding any banners or anything like that either. Should the costs start escalating, I might add one of those paypal donation things, but that's all far in the future ;))

[David]

I assume you have been to spook's encylopedia, but if not it should give you some ideas. It is a commonly used reference for North American N scalers.

http://www.visi.com/~spookshow/loco/

One idea would be to have entries for each prototype/model (a single prototype can have several model entries) like in the above, and then an option for logged in users to click "I own this" (there could also be a seperate screen for mass entry/maintanence of all your own "I own this" entries) along with an optional section to enter comments, attach pictures and assign a rating to several categories - like some of the review/feedback systems. This ownership information (with the option for users to be anonymous, i.e. the stats they add are shown, but there account is not shown) would then be usuable to show aggregate information, such as average rating.

If any of this sounds good I could expand it into a more detailed description.

[Martijn Meerts]

The idea is that each prototype gets an entry, and linked to that prototype will be all available models. Ratings and reviews are of course also a feature that will have to be added ;)

There will also be various ways of adding an item to your collection. 1 being an auto-complete search field, another one being, like you mentioned, an "I own this/add to my collection" option for each model.


It'd be great to hear more detailed ideas though, because I really want to make the thing useful, usable and especially enjoyable by everyone :)

[David]

Some questions to consider are what kind of information people will want to find (why will they visit) and what level of participation you want from the masses.

To go back to the N scale encylopedia, each entry typically has:

• Information about when and how the model came on the market, with comments on availability for older models
• Occasional information on the prototype if it's an odd one
• An "expert" opinion from spookshow on the models detail, construction and performance (this is what most people are coming for)
• A final rating
• An excerpt from ModelRailRoader or some other magazine review

It's then possible to search models by manufacturer, year and prototype among other things.
For us there may be some changes to what we expect, for example:

More technical information about the model: Coupler type, DCC, minimum radius, optional parts, case/packaging
More information about the prototype: Prototypical formations (and which ones the model can form), years in service, operators, lines and paint schemes

Being able to search by many of these parameters would also be useful - for example "Find trains operated by JR Hokkaido". A neat one would be "find trains that operated in 2-4 car formations".
How information gets entered would be another difference.

With spook you have a single "expert", which is also part of the draw for those who are trying to navigate that large variance in quality of American N scale. We could try and preserve some of that by keeping information clearly seperated, i.e. quantitative information like prototype information and model data could be done Wiki style with a single entry, while comments on actual performance, build qualitity and model detail would be left to individual reviews. Some means of identifying good reviews, and good reviewers would be useful to help identify expert reviews (then again there may not be enough reviews to warrent this). Review quality could be measured both with a "was this helpful" and by allowing specific users to be marked as "experts" - this might also give them some kind of moderation power, or be one and the same.

[KenS]

It's an interesting idea, and I like the logo, although to me "locowerks" sounds more like a manufacturer or a detail-parts supplier than a database/open-source site.

In terms of structure I think you need two main things:
1) a simple method for someone to find "their" model in the database when adding a new train, and
2) a good way to display both a whole roster and details on an individual loco

For (1), a search function that can match on multiple optional fields (i.e., I know it's a two-car DMU with green as one of the colors, what known models match that?).  But a visual index (small thumbnail pictures you can sort by manufacturer, train type, operating company, etc) would also be important.   There are plenty of existing web conventions for how those kinds of things look and work, so I don't think you need anything particularly new or different just because the subject matter is trains.

For (2), I'd want to see a single-train display page that looks like an entry in a train-spotters guide: photo with name above a stats box, followed by perhaps operator info and a free-form text section.  It should be possible to easily link to that page from another site (for those people who don't run their own website but want to link to their collection in a forum signature, for example). But it should also be possible to generate HTML that could be incorporated into someone elses site (maybe with a "data by locowerks" logo with a link to the main site).

Similarly for the "whole roster" version of (2), a list of trains with thumbnails that link to the single-entry page seems like the way to go for me, although you could offer versions of that with greater or lesser levels of detail and even the option to omit the detail page.  As with the single-train page both hosted and external versions could be supported.

[David]

Question:

Is this only for Japanese specific trains, or are you trying to make this for all model trains? (all scales?)

[Martijn Meerts]

Thanks for the input so far, it's good to hear what people want to see in such a project, and how they would solve certain things. It's definitely going to make things easier on me ;)

So, keep all the comments and ideas coming ;)

It's an interesting idea, and I like the logo, although to me "locowerks" sounds more like a manufacturer or a detail-parts supplier than a database/open-source site.

I went with locowerks mainly because it's fairly short and easy to remember (or at least, so I hope). There's also a bit of a link to loco works/loco workshop. I tried coming up with something more database-ish or more catchy, but it all sounded like some bad b-movie title ;)

Question:

Is this only for Japanese specific trains, or are you trying to make this for all model trains? (all scales?)

It's meant for all model trains and all scales, although I expect initially the majority of the content will be Japanese trains.

[cteno4]

Martijn,

Glad to see this is progressing!

I would suggest you might want to think of this in a modular format and then work on a adding a module at a time. that way you get can get the core going asap with as little work as possible then keep adding modules in the future as you hae time. seen too many projects like this get part way and because they are doing too many things it gets gummed up and stalled and then never completed, especially volunteer projects!

i think you have the idea right of having a record of the basic models as being the core here. then these can be grouped by prototype. these could be searched by sets of field criteria or also have a set of static list pages that give a more catalog view for those that just like to parouse that way.

a review module could be added later. while its nice to have an single or very defined set of authorities do the reviewing to try and keep things consistent, but im not sure if you can realistically achieve that. probably best to just do a simple comment reviews by anyone who wants to add their 2 cents to the model, akin to amazon and the like. while you end up getting the range of responses with these at least the user can sort of average things out and see if there are consistent gripes or likes or certain gotchas that are only found by someone doing something like you are and an authority might not find.

another module could be DCC installation, again letting folks post their experiences and tips. same with repairs or couplers, etc.

a photo gallery module would be nice for folks to post picts of each model, could end up with a very nice variety of shots. i find that the more photos HS posts of a model the more likely i am to buy it and i think they know this as they have been posting more detailed shots of cars and sets lately!

prototype info could also be a future module to add. the issue with this one is that it would take a lot of work to gather and validate the content to go here. its really starting to get into a different ballpark of train stuff and away from the basics of the model train data base, but would be nice to grow out eventually, but is something that i think could sink you if you attempt it in the 1.0 version.

i think you have a great and accomplishable goal of the basic list of the japanese model trains available and the basic info on them and then let folks build their own stock lists and then export those out so they could have an inventory list for insurance, their own fiddling, etc! many of us have various versions of this, but it would be a whole lot better to have the simple catalog online to check off what you have and create that basic data set for your inventory than all of us rolling our own all the time! its wonderful to do this with the scotts stamp catalog!

keep us posted, glad to help if i can.

cheers

jeff

[Kumo]

Seems like a good idea!
You should consider, not only the rolling stock, but also the tracks!

You should also check the site www.ravelry.com

It's a knitting datables website and my girlfriend (who knits) showed it to me. As a graphic & web designer, I was really impressed on the power of this website! It's huge, there is Moreau than 200'000 (!!) members and you can really find anything you want!
It could be a good inspiration for you!!

One last thing: forget flash for building such a site, flash sucks! ;-)

[ShinCanadaSen]

Hi Martijn,

This sounds like a great Idea ! I would agree with Cteno4 in that once you have the Big Picture figured out your best bet is to divide it up in to development and Implementation phases so that you are not overwhelmed by the whole thing. I am currently just about to roll out the first phase of a web application for my work developed in ASP.net and MSSQL and if we had not developed into phases I'm pretty sure that we would never complete it.

I also agree with kumo that you should stay away from flash and other propriatary display formats as they may not work on (or work well) on all platforms (especially mobile devices).

Some thing like this would be a great boon to the hobby especialy if there is some prototype info attached to the model info as there is sometimes some difficulty in finding any information, especialy in english.

Also a thought, is this site going to be localized in any languages other than english?

If there is anything I can do to help, I would be interested, even though I am new to Japanese trains and Web Development.

[westfalen]

This sounds like a good idea but I agree with the person who suggested keeping it simple to start with and adding features as it grows.

[Martijn Meerts]

I would suggest you might want to think of this in a modular format and then work on a adding a module at a time. that way you get can get the core going asap with as little work as possible then keep adding modules in the future as you hae time. seen too many projects like this get part way and because they are doing too many things it gets gummed up and stalled and then never completed, especially volunteer projects!

Ruby on Rails is pretty modular in itself. It's all very object oriented and uses MVC. It really looks like a nice language/framework to work with. The core project does need to have various things in place without using modules though, because the glue code between project and module would turn into spaghetti quick ;)

Seems like a good idea!
You should consider, not only the rolling stock, but also the tracks!

You should also check the site www.ravelry.com

It's a knitting datables website and my girlfriend (who knits) showed it to me. As a graphic & web designer, I was really impressed on the power of this website! It's huge, there is Moreau than 200'000 (!!) members and you can really find anything you want!
It could be a good inspiration for you!!

One last thing: forget flash for building such a site, flash sucks! ;-)

The rolling stock is the main thing, but I've also been thinking about adding tracks and things like faller/vollmer/tomytec buildings etc, but that's for the future.

I'll definitely check out that site, sounds like it could be useful to get some inspiration and to see how they've implemented things.

As for Flash, it's possible to create great stuff in Flash if done well. Unfortunately, 99% of the so-called Flash "Developers" haven't a clue about coding and optimizing, so most sites just turn out to be crap. With HTML5 coming up, I do believe Flash has had it's days ;)

This sounds like a great Idea ! I would agree with Cteno4 in that once you have the Big Picture figured out your best bet is to divide it up in to development and Implementation phases so that you are not overwhelmed by the whole thing. I am currently just about to roll out the first phase of a web application for my work developed in ASP.net and MSSQL and if we had not developed into phases I'm pretty sure that we would never complete it.

Some thing like this would be a great boon to the hobby especialy if there is some prototype info attached to the model info as there is sometimes some difficulty in finding any information, especialy in english.

Also a thought, is this site going to be localized in any languages other than english?

If there is anything I can do to help, I would be interested, even though I am new to Japanese trains and Web Development.

I've started several projects which have never been finished simply because I wanted to implement everything right away. The problem is, you end up with tons of code and when you try to debug it, you really don't know where to go anymore. The whole thing also gets too big too fast. So yeah, I'm definitely going to work on the core functionality that's really required (browsing the database, registering and logging in as user, managing your personal database, some admin tools etc.) and continue form there. The idea is really to see what people who use the database want to see added, and then work on implementing that, so eventually, it'll become more and more userfriendly.

The site will also be developed with multi-language in mind. Initially there'll be english only, but while working on it I'll start adding a dutch version as well, to get a system for internationalization in place. From there I can add an admin tool that either creates a list of all text that needs translation, or allow a translator to work directly with the admin tool to translate things.

Also, those new to webdevelopment/webdesign often have fresh views on things, so of course your help would be very welcome. I've been doing webpages for both work and hobby for so long (some 17-18 years I guess) I often just have no idea what's a good idea anymore. I've also hopped from 1 technology to another, never specializing in 1 thing ;)

This sounds like a good idea but I agree with the person who suggested keeping it simple to start with and adding features as it grows.

It's definitely best to start with a basic system. There's no point implementing tons of features that end up never being used because they're either just not interesting, or badly implemented. It's also a long term project, not something I want to finish quick, get online, and then never work on again :)

[Martijn Meerts]

Well, I think I may have a usable design idea in my head, did lots of sketching and quick photoshopping to check various idea, all of which were bad =) It's quite difficult coming up with something that both looks good, is easy to use, and easily expandable once new feature start getting implemented :)

In the meantime, I've started playing around a bit more seriously with the framework and language I'll be using. It's been a long time since I actually had any fun in making a webpage, but this Ruby on Rails stuff is quite refreshing. It'll be a while before I'm comfortable with it, but the framework is really well thought out, and makes it real easy to separate code from design, and make everything modular.


What I've also been thinking of, something to possibly add for the future, is a buy/sell section, possibly using an auction type system. The advantage compared to stuff like ebay and yahoo auctions and the like, is that you have lots of information about the models at your fingertips. It could even be possible to link for sale items directly to a model, so that when you search for DD51 for example, that you get a lit of items for sale right in the detail view. Definitely not something of high priority considering everyones used to other auction sites, but it could be interesting nevertheless.

[CaptOblivious]

Design, as you well know, is not my forte, although I love it. I've got nothing good for you, but why don't you post some of your discarded designs, sans commentary, and see if we as a group vcould collaboratively improve on them?

[Martijn Meerts]

The discarded designs are already gone. I tend to not keep designs I don't like hanging around :)

I'll make some new sketches soon of what I have in mind now, they'll be fairly quick and rough, but should give an idea.


Edit: here's a rough sketch of what I had in mind. The idea is that the menu on the left will remain visible, so it won't scroll along with the rest of the page.

[Martijn Meerts]

Updated the sketch slightly, added some placeholder text to see how it would look. I'm not too happy with it, feels like there's just too much text on-screen...

[CaptOblivious]

I think it feels great: The amount of text makes it appear nice and weighty, but it's not overbearing. Plus, the text-heavy area is well-contained: It doesn't hinder navigation.

That said, what I think is missing is some kind of breadcrumb system so that users can navigate at more fine-grained levels than the present menu options present. Perhaps a nested hierarchy of menus, laid out like the ones you have, but with each level in the hierarchy a new column to the right of the level above it? Does that even make sense? Perhaps I should draw it out later…

[Mudkip Orange]

This is pretty sweet.

[Martijn Meerts]

I think it feels great: The amount of text makes it appear nice and weighty, but it's not overbearing. Plus, the text-heavy area is well-contained: It doesn't hinder navigation.

That said, what I think is missing is some kind of breadcrumb system so that users can navigate at more fine-grained levels than the present menu options present. Perhaps a nested hierarchy of menus, laid out like the ones you have, but with each level in the hierarchy a new column to the right of the level above it? Does that even make sense? Perhaps I should draw it out later…

There are supposed to be submenu's, I have some ideas how to implement them, just haven't sketched them out yet. (I'm thinking the info text could fade out, and the submenu with a slightly darker background color could slide in, something along those lines.) Obviously there's a submenu when you've logged in with links to your collection/smart lists/preference/whatever else needs to be there. Also, the "explore" option (needs a fitting name I guess) will get a submenu with things like rolling stock, accessories, spare parts (?) etc.

A traditional breadcrumb bar could be added on top of the "info sheet" as well.

[cteno4]

Martijn,

great start, clean and nice. you can always come back and change the frame if you have your fields and data structure worked out well to begin with. i usually find with this sort of thing i work better getting something that is ok for the look and feel side and stressing more about getting the field/data structure right the first time. then once i have things working and playing with data in the interface i can then refine the nav, controls, and graphics to synch up then. unfortunately i dont have the talent to do great graphics in general and less so to do good graphics really fast! other graphic cohorts usually come in then and clean up my mess!

really feeling nice.

now that i have the ipad im really starting to think about doing a fast db for my stuff with bento to make due for now. i have crap for an inventory and would be screwed if the house burned down! i really need to at least take 20 minutes and take a bunch of digital pictures and put them off site. also end up spending time all the time seeing if i have this or that when it pops up cheap on ebay!

keep it going! great work!

cheers

jeff

[Martijn Meerts]

Martijn,

great start, clean and nice. you can always come back and change the frame if you have your fields and data structure worked out well to begin with. i usually find with this sort of thing i work better getting something that is ok for the look and feel side and stressing more about getting the field/data structure right the first time. then once i have things working and playing with data in the interface i can then refine the nav, controls, and graphics to synch up then. unfortunately i dont have the talent to do great graphics in general and less so to do good graphics really fast! other graphic cohorts usually come in then and clean up my mess!

really feeling nice.

now that i have the ipad im really starting to think about doing a fast db for my stuff with bento to make due for now. i have crap for an inventory and would be screwed if the house burned down! i really need to at least take 20 minutes and take a bunch of digital pictures and put them off site. also end up spending time all the time seeing if i have this or that when it pops up cheap on ebay!

keep it going! great work!

cheers

jeff

Yeah, one of the things I'm really stressing with this project, is to keep the UI code as much separated from the rest as possible, to make it as easy as possible to change the UI without having to rewrite half the back-end. Another advantage is that multiple UI's will be possible (in the long run ;))

I really do need some sort of reasonable looking UI to work with though, otherwise I tend to loose interest in a project rather quick. It's the designer bit in me that refuses to work with standard "programmer design" :)


I haven't tried Bento for the iPad yet, but for the iPhone I didn't like it much. The UI is non-standard and slow, and inputting stuff takes you through too many steps. I went the way of buying Numbers for the iPad and adding my trains there for now. I don't have any pictures in the spreadsheet though, mainly because I don't have any pictures of most trains :)

One thing I'd like to do for locowerks right form the start, is to add the ability to import various file formats (probably just csv and xml at first, since most programs can export to that), so that people who already have a database or spreadsheet can just upload a file and get all their data into locowerks. From there they can link up their models to prototypes and get the full functionality.

[KenS]

In terms of your sketch, one thing the might make the text less "weighty", would  be to put the description below the specs and model list, as it's probably going to be a bigger chunk of text.  You could also consider making the three parts "click to show" fields.  With just the photo and a one or two sentence summary and a couple of icons or whatever as placeholders for the others, the page appearance would be simpler.

[Martijn Meerts]

A bit more fiddling done... Added some slight gradients in the menu, also added a slight drop shadow on the main menu item text. Added a first sketch of a submenu idea (really needs some adjusting ;)). Added a breadcrumb bar at the top (needs to be adjusted, right now it's a 100% copy of the bar used in Transmit =))

Also changed the text around. The new idea is to show the basic description of the train, and then a tab bar to switch between the various screens. Below the tabbed content could be a footer bar. I'm considering using small icons for the menu options and tabs, but I'm really not sure. It might clutter things up too much. Although, the home icon in the breadcrumbs bar looks quite nice =)

Overall, I think it's an improvement. The large image, being the main focus, makes it easy for people to quickly recognize the train. And with the description being immediately available, people should be able to figure out whether the train is interesting enough to click through the tabs.

Not entirely sure about the colors. While I really like the grey and red, I've been using it for JR-Chiisai as well....

[KenS]

That looks good.  The tabbed data is a nice solution to the "clutter" problem, and I like the colors.  The white/gray in particular makes me think "book", which is a good motif for a database like this. The red could be any dark color (blue and green), I don't see a lot to chose from there (i.e., one color seems much the same as another to me), but then I'm not a graphic designer.

[Martijn Meerts]

The general feeling I was trying to achieve was that of an info brochure/pamphlet type of thing. I guess it worked partially considering you see it as a book =)

[KenS]

I'm probably a bit biased to think in terms of books. When I think of a train database, I think of the old Kalmbach Diesel Spotter's Guides that used to be published for North American trains:

http://www.amazon.com/Contemporary-Diesel-Spotters-Railroad-Reference/dp/0890242577

They're long out of print, but that was my primary reference in the days before the Internet.

[Martijn Meerts]

I have a couple of train books as well, but I hardly ever open them (one of the reasons would be that there's almost no Japanese trains in them ;))


Anyway, made some more changes. Made a new mockup of the the "available models" tab, added thumbnails and more space, needs some more changes though (bigger thumbnails? short description?) Also added a mockup of the related items tab, with a drop down to pick form various relations (type, depot, company, year, colors, etc. etc.. Need to make a list of useful relations =)). Like the models tab, it might need bigger thumbnails. There's also the "prototype specifications" tab, but that one definitely needs some photoshop loving =)

Also slightly updated the breadcrumbs bar, as well as removed the little triangle that indicated which menu item was active. Not sure it should be there, even though I did quite like the look of it.

[Martijn Meerts]

Made a quick XHTML version of the main site. It's all very temporary just to see if things work without resorting to a billion different browser hacks. Works fine in Safari and Firefox on the Mac, and it seems it works fine on IE8 as well.

Now to add more detailed stuff =)

http://www.jr-chiisai.net/_div/traindb/site/

[CaptOblivious]

TThe The menu sidebar moves left and right, which means it jumps in front of the conent of the window is too narrow, as on my Android phone. Otherwise appears to render correctly (and it should: android uses safari's rendering engine)

[Martijn Meerts]

it's not mobile friendly, there'll be a completely different UI for mobiles =)

And while Android does use Webkit, they've done a lot with it.. iPhone Webkit renders different from Android Webkit, which renders different again from desktop Webkit (which themselves render differently from 1 browser to another ....)

That said, it does seem to work as intended on the iPhone..

[CaptOblivious]

Same problem on my small monitor at work. It's not a function of the phone, but rather of a small screen size, and having the menu pinned to the upper-left-hand corner of the viewing window. If the window is narrow enough to require scrolling to see all the content, the menu ends up on top of the content as you scroll to the right…any way to pin it just to the top, but have it scroll horizontally with the other content?

[Martijn Meerts]

Ah, I see the problem now...

I don't think it's an easy fix, however, this version of the design is meant for the newer browsers which often go hand in hand with higher resolution screens. This version will get css3 animations and the like. I've actually been considering making this version a bit wider even, because it looks a bit silly on a 1920x1200 screen right now :)

I'm probably going to eventually make a simplified version for older browsers and lower resolutions.

[Martijn Meerts]

http://www.jr-chiisai.net/_div/traindb/site/

Added/updated a bunch of stuff, can't even remember what exactly since the previous preview =) I made certain bits and pieces clickable, the tabs have gotten some content to get an idea of how it could look. I added dropdowns to gallery and related tab, especially the one on the related tab is fairly custom. Also added some flags for language selection. (Language selection is mainly done by subdomain, but with a flag you can always quickly switch.)

I've tested it in Safari, Firefox, Camino and Chrome on OS X, haven't tested in any browser on Windows yet, so it might actually look terrible =)

In the background, I'm designing the database now, and figuring out how internationalization and localization work in Rails. I've pretty much got that figured out though.

[Martijn Meerts]

http://www.jr-chiisai.net/_div/traindb/site/

Been a while since I last worked on it, had some other stuff to learn for work first (I really need to stop prioritizing work before other things during my spare time ;)), but I've made some changes to the design again.

I changed the menu so that it's no longer pinned, and will actually scroll along with the content. This fixes the problem Cap mentioned about the content being moved underneath the menu on smaller screens. Of course, the menu will now scroll vertically, meaning it won't remain visible at all times. I might look into some javascript to pin it vertically should I decided I want it to be pinned at all.

I also made the entire main content a bit wider. With widescreen screens quickly becoming the standard I figured it made sense to use more screen real estate. The minimum screen width required to view without horizontal scrollbars is now 1280 pixels.

Lastly, I darkened the background on the content window. After seeing the design again after a few weeks of not working on it, the one thing that jumped at me was that the background was too light.


Other than that, I've been trying to design the perfect database and haven't actually started coding yet. By now, I'm pretty certain even database design guru's aren't going to be able to design the perfect database for Locowerks, considering not all features and details are decided on yet. So, I really should just start with a basic database, and add stuff when needed, which is exactly what I'm planning on doing soon-ish ;)

[cteno4]

Martijn,

hey looking nice! this ultimately could be a really really great resource for the hobby community!

on the 1280 pix you might want to trim that down a little. in the last year there has been a lot of feedback from laptop users that websites have crept too wide in the last year or so and caused them to have to do too much horiz scrolling, which is the worst to do in the UI for most folks. just a thought. your left nav links are thing that dont look like they may needed all the time for fast access so could move up top perhaps and explanations be in roll overs (they are also things that the users will know very soon and pretty self explanatory)

the tabs have a nice feel and the main screen width looks good to hold the tab data. any long blocks of text should keep the text width to average of 12-15 words per line. this is a good reading length for extended reading. if you go wider it slows folks reading slows down and shorter looses on comprehension. sorry worked on cdrom encyclopedia projects where we had to do a whole lot of testing and research on stuff like this!

its really coming out nice! thanks for all the hard work on this, it aint easy to put your arms around a beast like this, sounds easy till you jump into it! your logic of doing the core first is very wise, every large db project i have been around that tired to tackle the world in the first rev got really bogged down and became monsters that sucked way more time and money than they should have (and i felt like shooting myself in most of the design meetings!). those that went at the core things that were just the main things that were needed most of the time and did those well got done pretty quickly. it was also amazing how many of the other wish items fell by the way side once the core was done -- folks realized they really did not need them or the time to get information structured into those items would have been huge. also, a number of very unique and unpredicted needs popped up that were really great for the workflow and were easily then added to the interface or as additional modules for use by only the subset that needed those features (and thus not confusing or getting in the way of those that didnt need them).

great work!

cheers

jeff

[Martijn Meerts]

The reason I went with the menu on the side instead of at the top, is because most, if not all, menu items will have submenu's. Of course, that would also be possible with the menu up top, but you usually end up doing some strange javascript drow down menu, which I'm trying to avoid. Screen resolution statistics show (in January 2010) that people having 1280x1024 or higher are now in the majority, which is mainly due to most laptops now sitting at 1280x800 or more. Of course, there will always be people on 1024x768, or even 800x600, but at some point it just becomes too problematic, or visually less appealing to optimize a site for 1024. Also, there comes a time where you just should really look forward, rather than try to be compatible with everyone and everything ;)

What I'll be doing, is making 3 templates for the site. The first one is the one I'm working on now, which will include some css3 animations (not to worry, they'll only be slight animation to make the UI look a bit more smooth :)) and javascript (in the form of ajax, jquery, jqeury ui etc.), so I'm fairly comfortable with the 1280 minimum.

The second template will be a slightly cut down version, something like you suggested with the menu moved to the top, and then the generally design kept the same, so using the full width for the content panel. This version will also stick with older technologies and not use any fancy stuff.

The third template will be a mobile design. This might actually turn into more than 1 additional template, 1 for iPhone, 1 for iPad, 1 for android, 1 for windows mobile 7, and of course blackberry and palm devices handle things differently again (mobile web is kinda like regular web was 10 years ago when everyone and their dog built their own browsers ;)) This web version has very low priority though ;)

The good thing about Ruby on Rails is that it keeps back-end code separated very nicely from visual code, so it's easy enough to make additional templates.


The bit about the 12-15 words per line is interesting, it's really something I wouldn't even have thought about researching. Something worth looking at. Easy fix would be to increase the font size a little, maybe add some more letter spacing as well. I'll also have to try different fonts, some read easier than others. Right now I'm using Tahoma for the description texts, and it cascades back to Helvetica, Verdana, Arial and finally the standard sans serif. One thing that's nice about css3, is that you can use non-standard fonts, and the browser will automatically download them so the page looks as the designer meant it to look. So, searching for a font that's optimal for on-screen reading could be a good idea. I've also made the text background just slightly off-white, and the text itself a very dark grey, makes reading easier on the eyes as well.


The plan now (while still fine tuning the design) is to start with a database table for prototypes, and add all the required code to browse the prototypes. That allows me to have a system where I can start testing the UI, and work on things like decent searching and filtering features etc. After that I'll add the tables for the models, and then start hooking up some models to the prototypes, and fix and optimize whatever issues result from that. After that the next bit will be added (spare parts list, related image/video's, etc.) I should be able to concentrate on small chunks when working like that.

[cteno4]

yes its that statistic that the 1280 is now in the majority which has driven the move to really wide pages, but its getting blowback from a good chunk of the community and its one of those things that if you piss off a group then you may really loose them with a trade off of just making something a little better for others that would probably not be pissed off if you didnt do it. always the trade off.

the other issue with wider designs is that if forces many interfaces to have to have 3 and some times 4 columns of stuff and it can get really visually busy and distracting. marketing types like this as they think it looks like there is a lot of stuff going on, but with the users it usually just gets very distracting to the eye and its harder to hilight what is really important!

also remember that the window eats some space up horiz and folks usually dont run maximized until forced to. many like having space to move to things behind the main window.

its always a juggle.

on the text, dont widen the spacing, that just gets harder to read. most auto kerns/spacing are pretty good and done to maximize the reading as well. you can just reduce the text widths of large blocks of text easily in your sub screens. readability is something that is always overlooked and its only getting worse these days as folks are more distracted and if the reading gets hard they just move on. if you want them to stay make it as easy as possible to read. stick to the standard fonts as most of them are very readable and designed for screen reading (like verdana and arial). helvetica doesnt work well as a system font as its tight and really requires some finer resolution. good for when you need to squeeze something in, but not good for large reading blocks.

ah didnt realize there would be subs under the left menu. yes the java or css pull downs are a mess to deal with. they really really piss off a sub population as well that hates things popping up when they roll over them. also in some permutations they can be really hard to use and its a total moving target to maintain them well in the whole host of browsers up there. this has driven a few good web developers out of the field as trying to keep bells and whistles like this functioning in all platforms/browsers all the time ends up being very costly and clients want it, but wont pay for it! really a mess. could the sub stuff for the left hand items just come up in the main content area instead? they seem like stuff that is more independent of the content stuff and items you wont need up on the screen all the time, just once and a while and while doing those you will be focused on those things and not the content. that left hand column is in the #1 eyeball spot so anything there should be stuff you want folks to really focus on. to me its the content you really need to focus on or perhaps a cascading nav tree of the trains, but admin, tools, language, and log in are items you only do once a session at most then dont deal with again.

tell me to shut up if you want on this stuff. i just do this all the time in my work and also usually end up being the producer so end up worrying about all these little things that everyone else on the team knows, but doesnt always pay attention to till it bites us in the ass later.

cool to roll out a tab at a time. you will probably find one major bug early on that once you figure out the work around it will make all the others go smoother! worse when you have to fix or re-engineer in a number of modules!

cheers

jeff

[Martijn Meerts]

First of all, the comments are very welcome. I could build it like I think would be the best, but it's probably going to end up being more difficult to use for others, because I do tend to move more towards little unnecessary design bits rather than stick to pure easy of use :)


Right now, the main content area is 800 pixels wide. The entire width with menu and the margins both left and right is about 1170 pixels wide. I like the main content area to be big, because it's all about the content. I increased it by 200 pixels from the previous version, because I felt it wasn't big enough, especially the tabs felt a bit too cramped. However, it might be a bit too wide now with regards to the whole 15 words per sentence. Increasing the font size just a little bit seems to help there though.

With regards to the subitems, the idea was the following:

Login/register - Several user stats and quick links to personal collections, possibly smart collections etc.

Explore - quick links to explore prototypes, models, decoders, buildings, track, and whatever else will be added down the road.

Tools - Links to little tools like CV bit calculator, LED resistor calculator, maybe something like analyze an image and find items with similar colors etc. Eventually maybe also links to any programs/apps.

Admin - Quick links to admin tools.

Obviously, all of those could easily be moved into the main content window instead of using submenu's for them. A user would need a pretty extensive homepage, so the submenu for login/register would probably not be necessary.

Explore could be done in a similar fashion as how you set up a smart playlist in iTunes, or how you edit rules in Mail (a predicate editor as Apple calls them.) Before a user enters search/filter options you could display a few random items somehow, or maybe the latest xx added/updated items.

Tools could also easily be moved into the content with, either using tabs to quickly switch between various tools, or some sort of teaser image for each tool.

Admin is really only visible to admins, or actually not visible at all usually. There'll probably be an admin.locowerks.net with a separate admin user login, or at least some additional security. I'm also considering of doing a totally different interface for the admin part.

The language flags could also be removed, and use something like nl.locowerks.net for Dutch, uk.locowerks.net for British, us.locowerks.net for US English, etc. As an extra, a language option could be set in the user preferences.


I'm gonna have to check if I can get it to look decent with the main menu up top, always difficult to do something that doesn't look like a complete rip-off from the billion other sites =)

[cteno4]

Right now, the main content area is 800 pixels wide. The entire width with menu and the margins both left and right is about 1170 pixels wide. I like the main content area to be big, because it's all about the content. I increased it by 200 pixels from the previous version, because I felt it wasn't big enough, especially the tabs felt a bit too cramped. However, it might be a bit too wide now with regards to the whole 15 words per sentence. Increasing the font size just a little bit seems to help there though.

yeah the best with normal sized fonts for general reading is at somewhere in the 600-700 pix wide range. this generally works well with a 200 pix nav column to come out a decent width for most web/cd things. also ends up wide enough to fit in a decent sized photo if you want to wrap text around the photo w/o the photo being too small or the text not get into a tiny 3 word per line column next to the photo...

its been interesting as mobile is forcing the other extreme and old newspaper design is slowly coming back as that traditionally had to work with tight columns of text! actually effects kerning and writing and editing as well to work in those short word lines.

cheers

jeff

[brill27mcb]

I keep my webpages at 700 pixels wide. The advantage is that it prints out looking the same as it does on-screen.  -- Rich K.

[Martijn Meerts]

I keep my webpages at 700 pixels wide. The advantage is that it prints out looking the same as it does on-screen.  -- Rich K.

That's actually a very good point. There's a fair chance people will want to print out pages fothe database, so it'd be nice that the page looks good when printed. Of course, there's also the printer friendly version thing, which might be something I'll want to add at some point.

[Kumo]

I keep my webpages at 700 pixels wide. The advantage is that it prints out looking the same as it does on-screen.  -- Rich K.

I would never want to make a webpage with consideration for those who print them.
It's like making a brochure or a leaflet thinking about the guy who will xerox it or fax it. In 2011 we don't need to print webpages. At worst, just make a print stylesheet.
No offense.

1280 is wide, but when you look at it closely, you'll see that the content area is only 1100px wide, people with wider screen will see the rest of the page and people with screens up to 1100px won't have any problems to see it.
Maybe you could cut the 1000px away for being comfortable with 1024px screens, but on my point of view, that's not a problem. :-)

For the blocked menu, maybe you can make it scroll until it touches the top of the page end then it's fixed, so it still has a nice look on the landing page but you also have the menu accessible from everywhere. You can probably do that with simple JS or even CSS min-height/max-height properties.
An example here: http://2009.maxvoltar.com/articles/
When you scroll down, the logo appears from under the top bar and it's always on the right.

My little design advice: some rollover on the buttons (both on the sidebar and top-breadcrumb) would really make the navigation pop-out and the whole design slicker.
The user must feel a reaction when he hovers and clicks the links.

I really like you design, I hade quite a same idea for... a train related blog.
Maybe you'll hear about it some day! :-)

[Martijn Meerts]

Kumo, the Maxvoltar site has the same issue as I had with the menu. It used to be fixed so it stay on-screen at all times. However, if you scaled down the browser window far enough to get horizontal scrollbars, and then scroll to the right, the entire content will move underneath the menu. The Maxvoltar site does exactly the same if you scale it down enough. Of course, the whole minimum screen size comes into play here again, and the whole discussion coming with that.

As for rollovers and small animations, they will be added at some point, but I didn't want to spend any time on that before I'm certain I want to continue with a certain design.


What I've done, is make a couple of mockups to quickly compare without having to do any coding. While I was at it, I also changed the width of the main content bit to 700 pixels. Not because of the print thing, but because of the words per line thing ;)


Mockup 1:
Original side-menu design in a browser window that's maximized to about 1024x768.

Mockup 2:
Original side-menu design in a browser window that's maximized to about 1280x1024.

Mockup 3:
New top-menu design in a browser window that's maximized to about 1024x768.

Mockup 4:
New top-menu design in a browser window that's maximized to about 1280x1024


Mockup 1, while doable, just doesn't look right. Mockup 2 on the other hand looks pretty good to me.
Mockup 3 and 4 don't really show much of a difference, except that 4 obviously has more darkness surrounding the content.

Right now, I'm leaning towards using the side-menu design for the all-out version, and the top-menu design for the somewhat more old browser compatible version. A bit more work perhaps, but it shouldn't be too bad as long as I keep it in my from the get-go.

[Martijn Meerts]

Quick update on this. I've started the actual programming of the site, starting with listing prototypes. I'm also already adding easy to figure out links and general user-friendlyness. For example: locowerks.net/list/country/japan will list trains by country, with the country being Japan. locowerks.net/list/country/us would of course list all trains for the US. In a similar would, locowerks.net/list/region/hokkaido would list Hokkaido trains, locowerks.net/list/operator/jr-east would list all JR-East trains etc.

I'm also keeping multi-language in mind, there's already a system in place for interface texts, and I'm looking at some possibilities for article translations. I do think I need to set some limitations here, with the main thing being that an item has to exist in an english version first, before translations can be added (english being the main fall-back language). I also think the permalinks (so, locowerks.net/prototype/series-800-shinkansen instead of locowerks.net/prototype?id=5253) should be english only, and not have a different permalink for each language.

Once I get those things in place, I'm gonna look at user login, and the ability for users to submit new prototypes and upload images etc. Still plenty work ahead, but it's quite fun working with Ruby on Rails, especially since I tend to be "on Rails" myself while working on it ... (I usually work on it in the train while traveling to and from work ;))


Hopefully the place I'm hosting the VPS at is going to offer some new turnkey linux images, so I can upgrade to Rails 3 on the VPS without having to install from source. Once they do, I can put up my dev version on the VPS, and you can start going through a working (albeit unfinished) version.

[keitaro]

How is this going for you?

Wouldn't mind jumping in the beta and adding some of my locos details for assembly / unassembly

And feedback

[Martijn Meerts]

I'm still trying to work out some back-end and database design decisions and trying to figure out what kinda data needs to go in the database, and which parts of that data need to be translatable.

I mainly work on it on the train to and from work, but recently it's been getting more crowded on the train, which means using a 17" Macbook Pro is difficult without putting the thing on the lap of the person sitting opposite myself :) I'm looking at getting a 13" Macbook Air next week in the US though.

Also, since I'm working on this by myself, some decisions take a while. I have my own view on how things should look, but that's not necessarily the best way. So I try to look at each problem from multiple angles and try to figure out how which direction to go.


It's still being worked on though, but I'm taking it a bit slow and easy so I have something that people actually want to use, rather than some system that's too complicated for the average user.

[keitaro]

Fair enough keep us updated on any progress

[Martijn Meerts]

I will.. I'll be in the US the upcoming week, visiting some people of the forum, and the JRM layout at the cherry blossom festival. I'll likely discuss the database with 1 or more of them during my time there to get more views on the whole project.

It might be I'm thinking too big, and that the database doesn't need much of the details I think it should need, or at least, it might not need the details in the first version. It's a bit difficult to explain things without seeing how the site currently works, but I can't put it online yet. I'm still waiting for my host to make some new VM's available for the VPS I'm hosting there. The current VM makes it too difficult to install the requirements for Ruby on Rails 3, the new VM however comes pretty much pre-installed with everything.


The project is definitely not dead, it just needs a couple of fresh eyes looking at it :)

[Kumo]

Hey, I thought about you when I saw this site: http://trainspo.com/

An add was displayed to my on my facebook page, they know me! ;-)

[Martijn Meerts]

Hey, I thought about you when I saw this site: http://trainspo.com/

An add was displayed to my on my facebook page, they know me! ;-)

That's definitely something I can look at at least :) It looks like they're all about the prototype, whereas my main focus is the models :)