Stikis

Today, I’d like to announce the first update to stikis since submitting my PhD thesis (woohoo!). That news probably deserves a blog-post of its own, so straight to the business at hand.

I have tweaked the zoom levels a little. Previously, pages would zoom to 8%, 16%, 32%, 64%, 100%, and 160%. There were a couple of problems with this.

• There were more settings than needed. It only really needs three settings, one for focusing on a single stiki, one for arranging several stikis, and one for getting a big overview.
• It felt slow to zoom out or in, because you needed to zoom through several presets.
• Text was unreadable at 64% or less, so the majority of settings weren’t much use.
• The numbers are a little difficult to remember (unless you’re into powers of two).

So the new zoom levels are (drum-roll please) 20%, 100%, and 200%. They don’t correspond directly to the old zoom scales because I moved the underlying zoom level up a bit. 100% is actually the same as 70% before.

That probably all sounds pretty confusing. Hopefully, most people won’t need to notice or worry about it.

Tonight I’ll push a couple of minor fixes to the current version of the site. I’ll kick the update off at 20:30 CEST and it shouldn’t take more than an hour.

Update: I’ve pushed the updates, but the web-server doesn’t seem to be doing too well. I’ll check back in the morning and if it’s still not working I’ll roll back to the previous version and try again next weekend.

Simple text formatting.

When you edit a stiki, you should now see buttons at the top of the edit pane to make text bold and italic. This works in Firefox, IE7 and IE6. However, unfortunately the tags that these browsers use to make the text bold or italic are different. This means that if you make something bold in Firefox, then open the same page in IE, you won’t be able to un-bold the text. I figure this is an acceptable deficiency for now, given the usefulness of the feature.

Remember z-index.

One of the most glaring omissions on the site has been that when you click on stikis, you can move them over the top of each other, but this doesn’t get saved. So sometimes when you reload a page, you might notice that a stiki which you had put in front jumps back behind. This is now fixed.

Improved IE6 compatibility.

In a previous post, I enthusiastically announced preliminary IE6 support, but this might have been a bit premature, since although you could move, resize, color and edit stikis, you couldn’t actually create new ones. I’ve fixed the problem that prevented this, so now you can create stikis too. I also fixed a bug where resized stikis wouldn’t be re-drawn properly.

Unfortunately, the problem that prevented stikis from being created was in the code that sets up the halo for the new stiki. Since this doesn’t work in IE6, the halos of new stikis will be opaque until you refresh the page, as you can see in the screen-grab above.

Multiple selection.

For a while now, a feature of stikis has been that you can hold down the CTL key, click and drag to draw a square for selecting multiple stikis. Unfortunately this didn’t work very well for Macintosh users, because clicking while pressing the CTL key gets interpreted as a right-click and displays a contextual menu. In a previous update, I changed it to use the ‘Apple’ key instead, but (you guessed it) this broke the windows version.

I’ve now fixed it so the following key combinations work:

The changes to the way zooming works that I wrote about in my last post are now integrated into the live site, so please give zooming a try and let me know what you think.

Also included in this update:

• Now you’re taken back to the last page you were working on, rather than the list of pages.
• A bugfix for IE where in the list of pages, the list was not showing up. D’oh! This should be fixed now.

Also, stikis user dantaeus left a comment on the previous post asking if I have plans for an api for the service. The answer is yes, and to start the ball rolling, I’ve created a discussion page on the stikis help wiki as well as a mailing list. If you’re interested in coding against an api for stikis I’d love to hear your thoughts on what would be useful.

While I was I writing this post, the list of people that are signed up to stikis has gone from being mostly people I know, to mostly people I don’t know. That’s kind of a weird feeling. It’s mainly thanks to myopenid.com, who listed stikis on their directory last week.

Getting people coming to the site from the wild meant that the old sign in page (three bare forms with no explanatory text) was totally inadequate. So after months of embarassment every time I log in to stikis.com, I’ve finally gotten to the task of creating a proper landing page for the site. As usual, the landing page is just a step in the right direction rather than a fait accompli. But I think it has some nice features all the same. Here’s a screenshot.

The main gimmick of the landing page is that it’s got some stikis at the top that describe what the site is. You can click on these, move them, and resize them. Below them, I’ve rearranged the login and sign-up forms into a two-column layout.

It’s obviously a risk putting all that javascript up-front on the landing page. It increases the load time and there’s the risk that an error will render the page unusable. However, if it works, I think it’s a very effective way of communicating not just the features of the site, but also something of the quality of the interaction (and whether it will work on their browser).

There’s also something about playing with those little blurbs that helps cut through the cheesiness of them. If I were to read “Space for your ideas” on a website I’d think “gimme a break” but when you start playing around with them hopefully you can kind of see what that cheesy marketing speak is trying to say.

Another change which is fairly minor is the addition of a footer with the following request; “Please tell me how to make stikis better.” I’m really hoping I’ll get some feedback from users as a result of this and I think it’s important to let people see who I am and understand that the site is a one-person project.

Quite a big update to the user interface yesterday, which changes the way the interface works a bit. There are four new features:

Zoom

You could zoom the page in the previous version of the site, but only using the buttons at the top of the page, (below).

Those buttons are still there, but now you can also zoom using the scrollwheel of your mouse. It’s similar to the way zooming is done in map sites (eg. Google maps) so hopefully at least some users will be familiar with it. The way it works is when your mouse is over the page, you scroll up or down and the page zooms in and out on that spot. A target will appear to show where you are zooming to. The image below shows the target on a page that is in the process of zooming.

I’ve also added some constraints on how far you can zoom. Previously, you could just keep zooming further and further out or in, which was kind of pointess and lead to people not knowing where they were any more. Now you can zoom out to 8% and in to 160%, as the following two images show.

Hijacking the scrollwheel is not something I’d do lightly. However, I feel there are valid reasons for doing so in this case. First, there’s an established use of this in map software which some users will be familiar with. Second, the previous method of zooming by clicking buttons was tedious and didn’t give you controll over where you zoomed in on. Third, the traditional use of a scrollwheel in a webpage is to scroll down the lines of a vertical document. In this case, the document stretches in both vertical and horizontal dimensions, and moving horizontally required the user to use the scrollbar, or use the scroll-pan (is that what it’s called?) function. Neither of these were very satisfying.

There are still some improvements I’d like to make to the scroll-zooming. A big one is letting you zoom more by scrolling more. At the moment you have to scroll, then zoom a bit, then scroll again, then zoom some more. It frustrating to zoom more than two steps.

Pan

Okay, so I hijacked the scrollwheel. Even though there were some good reasons for that, I needed to give people another way to move around the page. The solution I’ve added in this release is to allow panning by clicking and dragging on the background of the page. Like the scroll-zoom feature, this is in common use on map sites and it’s also well established in graphics programs (such as photoshop) and the Adobe reader software.

After poking around a bit, I found that the CSS3 proposal includes cursors ‘grab’ and ‘grabbing’ (below) which are a nice fit with the established use. The idea is that you use the ‘grab’ cursor to indicate that something can be moved, and then the ‘grabbing’ cursor to indicate that the user ‘has a hold’ of it and can move it around.

Fortunately, Firefox (one of my target browsers) supports these cursors through the -moz-grab and -moz-grabbing declarations. Unfortunately, IE7 (my other target browser) does not. Fortunately, it’s possible to specify a custom image to use at the cursor using the following markup.

#target {cursor: url(/path/to/grab.cur), default;}
#target:active {cursor: url(/path/to/grabbing.cur), default;}

When the target element is active, the cursor should be changed from ‘grab’ to ‘grabbing’. This works for me on Firefox, but I couldn’t get it to work in IE7, so in that browser, the user only ever sees the grab cursor.

Another point to mention with this is that the files need to be in *.cur format. From what I can gather, this is similar to the *.ico format which is used for icons. I used a freeware program to turn the example gifs on the Mozilla website into the cur format.

Select

It’s been possible to select multiple stikis for a while now by holding down the control key and clicking on them. This worked fine if you only needed to select two or three stikis, but it was very tedious for large numbers of stikis. For a long time, I’ve had plans to implement a select box function, similar to what’s used in graphics programs.

The usage is fairly straight-forward, you hold down the control key and click and drag with the mouse to draw a select box. Any stikis that overlap with the box will be added to the selection.

Chuck

With the ‘chuck’ function you can select a stiki (or stikis) press Control+Shift and an arrow key and the stiki will be swooshed off to the edge of the page in the direction you specified.

This function grew out of my experience of using the stikis as reminders of things I need to do. I found it convenient to move the stiki off the side of the page once I had completed the task, but it was a pain to have to zoom out and move it to the edge using the mouse. I just wanted a quick way to ‘chuck’ it. And so another keyboard shortcut was born.

Summing up

My aim with stikis is to have an experience where you can move around and zoom in and out without feeling like it’s a chore. If you want to get an overview, you should be able to skip right out and see the big picture. If you want to narrow in on a single thought that should be easy too. The interface still isn’t at the level I want it to be, but I think these additions are a step in the right direction. If you’ve used the previous version, I’d love to hear your reactions to the changes. If you’re a new user, let me know what you think.