Skip to main content

How To Click It Like You Mean It

Yes, this is a screenshot of a screenshot. Stick with me, but I really do has a point to this! I have to admit, publicly, that I clicked the button. The one in the screenshot. The one that isn't a button, just a PNG image. I should be glad it wasn't a pop-up!


I realized my mistake at the moment I was clicking on it, but it happened to fast to stop. I had to sit and think for a moment. Why did I do that? It drove me to write this pretty immediately and do a couple mock ups for solutions. I never want to let my users loose information or control over it. That is, we don't want them to OK a message away and neglect to actually read it and we don't want them to click "send" before they're really, really ready to confess their never ending love to Glenn Beck.

Those are two distinct safety nets. Information the user missing for being click-happy and actual actions within the application they might have wanted to avoid. Any reversible actions, like closing a dialog box or deleting something (if a copy is kept around for safety) should be given easy undo options. Even closing an entire window, if made easy, should be something you can undo.

Of course, you can't undo sending an email or formatting a USB drive. You can undo an archive and compress operation that replacing the original files, by extracting them (even if the extraction is bound to an undo button), but if the undo is sufficiently expensive, give me the chance to avoid it in the first place, please. Make to pause and think about what I'm doing first.

Of course, a lot of us are doing web apps today, so it gives us some limitations. It also means, if you want to be friendly to your users, you probably shouldn't use default dialog boxes at all. Now, we might look at wrapping some. An alert_with_undo() javascript function, anyone?

Comments

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operat...

Announcing Feet, a Python Runner

I've been working on a problem that's bugged me for about as long as I've used Python and I want to announce my stab at a solution, finally! I've been working on the problem of "How do i get this little thing I made to my friend so they can try it out?" Python is great. Python is especially a great language to get started in, when you don't know a lot about software development, and probably don't even know a lot about computers in general. Yes, Python has a lot of options for tackling some of these distribution problems for games and apps. Py2EXE was an early option, PyInstaller is very popular now, and PyOxide is an interesting recent entry. These can be great options, but they didn't fit the kind of use case and experience that made sense to me. I'd never really been about to put my finger on it, until earlier this year: Python needs LÖVE . LÖVE, also known as "Love 2D", is a game engine that makes it super easy to build ...

Using a React Context as a Dispatch Replacement

React Contexts are the pretty little bows of the React world. Here's a really quick example of the kind of messy code you can cleanup by using contexts, without dragging in a larger dependency like Redux or even Flux. Starting backwards with a diff showing lines of code I was able to remove: All the properties I was able to remove were just pass-through. The Carousel component didn't care about any of them, but it had to pass through these callbacks so the multiple TaskList components inside the carousel could invoke actions. They were removed from the Component class itself, too, since it no longer needed to pass them through. Where did they all go? My ActionContext removed all the need for these passthroughs by providing a single simple helper method, action(), that components rendered under it can access.   I really enjoy the pattern of passing a single callback through a context and removing what used to be lots of callback properties. Of course, I cou...