I normally hack together some working code, then apply a design over the top. That's what happened with our online vector-map editor this evening. I sent over a working demo and asked Steve to pretty it up. And Steve sent back some mock-ups of an interface that looked sort-of-similar to what I'd sent.... only with extra bits added.
And implementing those extra bits looked tricky.
It meant re-writing some bits at least. And changing the way I'd approached others. In short, it looked just a bit too fancy.
We discussed a few ideas over email.
Steve - as usual - insisted that the little tweaks were not major, but were significant. I - as usual - tried to convince him that most of them were unnecessary and it'd all be ok without them.
The first thing was changing the yellow for green. That's not a major problem, just a bit of CSS styling. Except because of the slightly shonky way I'd written the light select routines, some of the red lines had a bit of a yellow/orange ghost around them, if the screen was zoomed to anything other than 100%. Using green instead of yellow for the highlighted line really made this stand out. It gave you eye-ache, just to look at the screen, if you've selected a number of lines in the editor!
So the way the screen updated to show the green line had to be re-written.
The little numbers alongside each line on the map were a nice touch. But they were also a pain to implement too - again, because the previous method of showing a highlighted line was to simply redraw that one line in a different colour (drawing over it a second time in red, before moving to a new line in the editor). This wouldn't work, because the highlight line would draw right through the centre of each numbered circle. Plus Steve insisted that the highlighted line should have it's number highlighted green too.
Another re-write.
The listbox we used to display the co-ordinates was simply a "select" type box, and when the user clicked on a line, we used the selectedIndex to read back the values from the box and populate the properties panel.
Steve's multi-column, multi-coloured approach couldn't be achieved using a listbox, so another section got ripped out and re-written - this time, using a table (yes, a table - we're going old-school here!) and a scrollable div. Some tricky javascript kept track of the index number of each row as it is clicked, to ensure the appropriate line is highlighted on the map.
I haven't quite implemented all of the things Steve suggested in his mock-up (there are still boring radio buttons instead of nice, whizzy flip-switches) but all the tricky stuff is out of the way.
And there's no doubting that adding those apparently unimportant touches has really made a difference. The way a user draws their own map is still pretty much the same as before. Only, somehow, it's a bit easier now. Things just feel a bit more intuitive. What appears on the screen immediately makes sense with what you're trying to create with the editor.
Sometimes Steve's attention to detail can drive me up the wall. He uses precision screwdrivers. I like hammers. But sometimes he calls it absolutely right. Tonight was one of those times.
I was quite pleased with the editor, because it's got some clever code in it.
But I'm really really pleased with it, because it's been well designed. Thanks for that Steve!
No comments:
Post a Comment