Vysnu » design

Children and Computers

Monday, October 15, 2007

These are a set of informal observations made while watching my little niece Ganga (she’s about 4 years old) draw a picture on the computer.

Kids pick up the basics really fast. Having walked my mom and DP through many a confusing day, I noticed that teaching Ganga is not as slow, but different. For e.g. she didn’t understand that the thing you point and click is called a ‘mouse’, but the motor skills that go with it came very quickly.
She liked to draw and move windows around much more than the online games I found for her. This may be because those games are largely singing and dancing stuff in english, or she might be too young (because frankly I found those games really interesting. Vaibhav and Gauri too when they came here).
The paint application I used is Seashore. It’s a Mac-only minimal port of GIMP. I use it for editing only because it’s much faster than opening up Photoshop or GIMP on a Mac and it gets simple editing done quickly. However, there are three things that I realized a “kid paint” tool must have:
1. A subset of features: a pen, brush, color selection, an eraser, easy undo.
2. Much bigger and lifelike icons. A pen for a pen, a brush for a brush. Avoid a dotted rectangle for selection.
3. Individual colors put up there on the screen instead of a two-step process to click the foreground color, bring up the window, select the color and then close it. She took a long time to get this step right.
4. A quick way to clear the paper (her terminology) and to get a new one. She spent eons rubbing the eraser all over a finished work to get a clear paper and I had to intervene to click File -> New. Menus are beyond her at this point.
Instant gratification. At one point where she clicked on many items in the dock and the mouse cursor turned into a spinwheel (the mac hourglass) and she couldn’t click anymore, she was really irritated.
She was fascinated by the fact that you could click and drag windows everywhere on the screen. Add to it my multi-monitor set up and this made for her second-best computer adventure.
This is what a 3 hour intro to a computer produces:

The whole incident made me really curious about kids & computers. How do you introduce programming for example? Squeak? _why has something called hacketyhack as well. I’ll be keeping an eye on this in the future coz watching kids use computers is really interesting because of the way they instinctively search for new features.

Tags: computers • design • HCI • kids

Comment! | Permalink

DRY CSS

Saturday, August 11, 2007

When I first thought of writing this post, my ideas were more about describing a good CSS organization and using reusable stylesheets. There are two tips in this area that I still recommend:

An element can have multiple classes: It’s a pretty simple idea, but isolate out layout styles and presentation styles. Even fonts and coloring. Make reusable classes as much as possible. A design like this rocks, esp. if it includes a small description of the classes used at the top of the .css file. At any point you feel an urge to create a new class, resist the urge and try to recreate the functionality using already existing ones. Break older classes further if you have to.

For e.g.:

.warn {
  color: red;
}

.top {
  position: absolute;
  top: 5px; }

And this html:

<p class="warn top">You cannot do that, it'll wreck havoc!</p>

… is way better than combining those tasks. Why? Because you can reuse those classes.

Keep your page-specific CSS structured by an ID on the body: Again, a pretty simple idea, the <body> tag can take an ID that can be an indicator of the page name. Use that to create special styles for that page alone.

Example: you want the warning on product pages to appear in blue instead of the usual red, and you want more padding on top:

#product-page .warn {
  color: blue;
}

#product-page .top {
  position: absolute;
  top: 10px; }

with this HTML:

...
<body id="product-page">
...
<p class="warn top">You cannot do that, it'll wreck havoc!</p>
... </body>

The advantage is that you don’t hack the CSS or add more styles. It just works.

I have more CSS organization tips, but the above two have worked wonders in 90% of the projects I’ve been involved in. Let’s move on to using tools to write better CSS.

Use a CSS generator: In the Ruby/Rails world where I mostly live nowadays, there’s an excellent plugin called cssdryer. Using this, the CSS above becomes much cleaner:

#product-page { 
  .warn {
    color: blue;
  }

  .top {
    position: absolute;
    top: 10px;
  } }

… which is lovely. Finally, nested tags! And variables, and all the power of ruby! [There’s also Sass]

If you are not in ruby land, use a CSS pre-processor. This article uses the m4 macro processor to generate DRY CSS.

Now, here’s one more lovely tip. Use a CSS framework. The most appealing one (altho in beta) is blueprint, since it only does a sweet grid system and good typography. Yahoo’s Grids seem bloated.

Tags: agile • css • design • DRY • web

Comments (4) | Permalink

Adobe AIR: Calculator

Sunday, July 8, 2007

If you’ve installed the AIR SDK (and it’s dead easy, just extract and copy it somewhere), you’ve got a lightweight cross-plaform VM to program apps in. Best of all, it works with HTML and Javascript.

In about an hour, I hitched up a calculator application. It’s very easy:

Calculator.xml:


<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/1.0.M4" 
	appId="in.vish.Calculator" 
	version="1.0"> 
	<name>Calculator</name> 
	<title>Calculator Installer</title> 
	<description>Simple Calculator in HTML</description> 
	<copyright></copyright> 
	<rootContent systemChrome="standard" transparent="false" visible="true"> 
		Calculator.html
	</rootContent> </application>

Calculator.html:


<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
	<title>Calculator</title> 
	<style>
		body, html { margin: 0; padding: 0; }
		body { background-color: black; color: #888; line-height: 1.5em; 
			font-family: verdana, arial, sans-serif; 
		}
		#wrap { margin: auto; width: 70%; }
		h1 { font-family: Tahoma, Arial, serif; font-size:2em; color: orange; }
		#sum_button { margin-top: 5px; }
	</style>
	<script> 
		init = function() { 
			runtime.trace("init function called"); 
		} 
		calculate = function() {
			runtime.trace("calculate called!");
			value1 = document.getElementById('val1').value;
			value2 = document.getElementById('val2').value;
			sum_value = parseInt(value1) + parseInt(value2);
			if (isNaN(sum_value)) {
				document.getElementById('result').innerHTML = "You didn't enter valid numbers.";
			} else {
				document.getElementById('result').innerHTML = "The sum is " + sum_value + ".";
			}
		}
		resetForm = function() {
			runtime.trace("resetForm called!");
			document.getElementById('sum').reset();
		}
	</script> 
</head> 
<body onload="init()"> 
	<div id="wrap">
		<h1>Calculate a Sum!</h1>
		<form id="sum">
			<label for="val1">Value 1:
				<input type="text" name="val1" id="val1" size="4"/>
			</label>
			<label for="val2">Value 2:
				<input type="text" name="val2" id="val2" size="4"/>
			</label>
			<input type="button" value="Sum!" id="sum_button" onclick="calculate();">
			<input type="button" value="Reset" onclick="resetForm();">
			<p id="result"></p>
		</form>
	</div> 	
</body> </html>

And voila, there you have it: a simple calculator:

There’s also a zip file with the code: calculator.zip and the AIR file for installation (to use that you need the AIR runtime)

Tags: adobe • air • application • chaff • design • development • web

Comments (2) | Permalink

Vysnu Redesign: Plans

Sunday, June 4, 2006

For a while now, I’ve thought about a Vysnu redesign. It’s way overdue. This blue baby of mine had enough zing in it to win a few notable mentions, but it’s past it’s prime: Vysnu needs to be more web-two-oh-y.

To that end, here are a few plans. I’ll try to state only those that are definite at this stage.

Move over to the vish.in domain. It’s shorter, more direct, less clunky.
Do a rebranding of the site. The blog would still be the highlight, but try to write clearer articles, put more thoughts into words, and have a focus: Web development is the current favorite.
~~Move away from the Sig9 host, find a personal one. It’s been a fun trip, but all good things must come to an end.~~
~~A week’s worth of spam comments at Vysnu is around 12,000. (Not a joke). Kill spam without resorting to comment moderation or CAPTCHAs.~~
Serve ads. Intelligent, unobtrusive ones.
~~Upgrade to Wordpress 2.0~~

There is no timeframe for these plans. Life is too cluttered still to venture into a redesign. Suggestions, if not lost in the miasma of comment spam, will speed the process along.

Tags: design • development • vysnu.com

Comments (3) | Permalink

Monthly Program (BayCHI)

Sunday, January 15, 2006

On Microsoft’s redesign of Office 12. I’d seen some screenshots earlier that were really impressive, but it does look a lot like a Mac product now. In fact, so does Vista - the brushed metal look, and the eerily minimalistic feel. The article though, is an excellent read anyways.

Tags: design • HCI

Comments (1) | Permalink

Apple - MacBook Pro

Saturday, January 14, 2006

MacBook Pro, I’m in love!

Tags: design

Comments (1) | Permalink

Rashmi Sinha’s weblog

Friday, November 25, 2005

I should have posted this sooner, but Rashmi Sinha’s weblog is a gem of a find.

Tags: design • HCI

Comments Off | Permalink

User Interfaces: Conformation vs Creativity

Friday, November 25, 2005

Microsoft and Apple are recognized stalwarts in the HCI and design fields. Yet I’ve noticed they take a distinctly different approach when it comes to designing user interfaces. While both have usability guidelines for UI designers (Apple, Microsoft), they seem to have a distinctly different approach to UI design.

(Note: I am no expert on any of these, and neither am I well-versed in the guidelines I mentioned, nor have I ever used a Mac long). The difference is immediately noticeable when you look at their flagship OSs: Windows XP, while being rich and colorful out of the box, manages to come across as increasingly dumbed-down and staid. All applications look and feel exactly the same. The UI guidelines emphasize conformance more than they do solutions to problems. The good thing about this is that the user is constantly reassured, never does he have to learn another user-interface model. Learning curve for familiar applications is almost zero, and even for applications which do complex tasks like say, 3D Studio Max, menus and widgets remain the same.

Contrast with the Apple Mac OSX: the guidelines seem to serve as very broad directions to the UI developer. Individual applications are left free to come up with their user interfaces. Anyone who looked at a Mac though and contrasted it with an XP interface will be blown away first by the sheer aesthetics of the computer: it’s beautiful, and pleasing, and that certainly doesn’t hurt a user reward model. The important fact I’d like to stress though is that rather than conformance, creativity seems to have been given veto.

Is a learning curve for applications bad? Leave aside computers for a moment. Just imagine an average human being going through his life. He learns to manipulate electronics from as simple as a watch to as complex as well.. a computer ;-), but since we left that aside.. a cellphone. Every one of these devices, from a book, to your toilet flush, to a TV remote to anything has a distinct and different user interface. And we seem to grasp everything either intuitively or with a small learning curve. Every time I encounter a new tap design (and once, I had to push one button and twist it to get the thing going) I learn a new user-interface. While examples such as these might be an argument in favor of conformance, it does demonstrate the versatality of humans when it comes to exploring and understanding novel user interfaces. But, excellently designed user-interfaces - like say the Apple Ipod - is intuitively usable once the learning curve is done. It’s almost like riding a bicycle in some cases: you never forget. It’s a testament perhaps that the most loved music player for Windows ignores UI conformance completely.

How does all of this help my Mom who forgets how to browse every now and then just because I rearranged the order of icons on my desktop? Is non-conformance to any UI model the answer? Hardly. The balance struck by Microsoft (or at least, illustrated by their applications) seems to be incorrect however. Word doesn’t need such a confusing plethora of icons when it advertises itself as a word processor (They seem to have learnt that).

More intelligent and well-versed people than me have thought about this for long. (As an aside, when has that stopped me? :-D) But I’d always be a designer leaning a bit towards the creative end of the spectrum. If only because if ever I learn to design well (and perhaps break the UI model in the process) I can be quite sure my users will understand it, and love the UI for it.

Tags: design • HCI

Comments (2) | Permalink

Slash Me Less

Monday, July 4, 2005

Which of the below looks nicer?

vysnu.com/me

or:

vysnu.com/me/

The second one? I agree. It looks much more “balanced”.

In a normal static directory layout of a webserver however, these two are not equivalent. /me would refer to a file and /me/ would refer to a directory. In the case that it is indeed a directory, when a webserver encounters a /me, it would recognize that a directory is being refered to, and automatic error correction would make it return the desired result (i.e., the DirectoryIndex of /me/). In such static webmodels, /me/ involves another step, and since this is webserver costly, it’s frowned upon.

Consider a newer (and perhaps more common) scenario now when neither does /me refer to a file nor does /me/ refer to a directory. These are mapped to a request handler that serves assembled output depending on the url context. Wordpress, the software that powers this weblog works in this manner. In such an instance, why does it prefer /me/ (as in like this) over /me? If it’s just the aesthetic element, then I can find a counterweight.

/me is one slash less. When you say it out loud to a web-newbie, or when you advertize it in any medium that is not the web, it becomes much more coherent. The extra purposeless slash at the end becomes ludicrous somehow. What do you think?

Tags: design • web

Comments (1) | Permalink

Source Code Order

Wednesday, June 8, 2005

One of the good things about CSS design is that it’s free-form. You can have div elements all over the place to structure content, and with intelligent absolute/float positioning, get them to order themselves logically on screen. An oft-forgotten advantage though about CSS design is that styling with it doesn’t (or shouldn’t) affect the semantic layout of the page. Or: rendering with/without CSS shouldn’t affect the readability of the page.

Stress test this by working with a browser like Lynx/Links, but if you’ve got Opera, the user stylesheet feature can also be set to emulate a text browser. In the absence of tables, text browsers don’t have any sort of positioning at all: your content is rendered exactly as ordered in the source. Which makes source code order important.

Who’d want to go over your sidebar before getting to the content? Go through those myriad links just to get at the real beef? Make it easier by having a “skip navigation” link as done on many sites, or better, have the sidebar load after your real content. If you’re good enough with CSS, it shouldn’t matter an iota with your layout.

The current source code order that I prefer the most is:

The header: Title, the <h1> tag.
Minimal navigation: the main pages of the site, and/or a spotlight link.
The content.
Sidebar navigation.
The footer.

As an added guideline, avoid repeated links on your site which merely serve decorational purposes. It’s a pain to read through in text browser mode.

You’ll notice that Vysnu follows these directives admirably. Except for the guideline above. You’ll have to wait till I get over em date boxes. Interestingly enough, Sig9 doesn’t. We’ll get to that on the next redesign, promise

Tags: design • vysnu.com • web

Comment! | Permalink

Google Web Accelerator is mucking up some pages.

Monday, May 9, 2005

Google Web Accelerator is mucking up some web pages: The moral of the story though is to properly read the spec. Use GET requests only for simple retrieval actions (idempotent ones), not for deleting messages or other such requests. Use POST for that. Google seems to be following the spec. Very interesting set of comments follow that article.

Tags: design • development • web

Comment! | Permalink