StupidApp

In love with a hippo

2007-07-29T01:24:00.001+03:00

I love reading and listening to Kathy Sierra, her blog and talks can teach anyone amazing stuff about user interface design and product-making in general. One important question that Kathy often asks is: What products are you passionate about?

I'm passionate about filehippo.com, it's a wonderful wonderful site, providing speedy almost-1-click downloading of all the apps one needs on a windows machine (firewall, anti-spyware, winamp, acrobat, open-office, firefox, opera, etc.)

Everything is organized in a non-nonsense interface, the Search on the top right works like a charm if you want to quickly find something, and the logo is insanely great.

Great work.

Passionate about websites? Applications? online Radio?
Write a comment and tell me about it. (I'm curious)

The forgotten art of the landing page

2007-07-21T16:59:00.000+03:00

I was reading some article on an Israeli content site and noticed an ad for a well-known israeli artschool called "Camera Obscura". I usually don't click on such flashy banner ads - but sometimes I do, wondering what the following page looks like.

It took me a few minutes to realize that I have no idea how I got the image above - it looks like some basic install of DotNetNuke (a web content management system), and it has a mini-form inside that asks the user for details such as name, email, etc.

The surprising thing is - this form appears to be real - it's not a bug - the people at Camera Obscura, or the agency that sold them the flash ad - sent all users clicking on the banner to this irrelevant looking page with the mini-mini form inside that's titled (loose translation): "Schedule a meeting / Request more information".

My bet is, only a tiny fraction of the users actually went on and entered the requested information. Most of them probably wondered what this weird pop-up page is and closed it right away.

It should be common knowledge by now, that animated flashy banner are not enough by themselves - they can be impressive and stuff, but if they direct users to a weird-looking page that has nothing to do with the look & feel of the original banner and context - they accomplish nothing.

The ad agency also abused its responsibility - it sold an online ad that achieves almost nothing - it only confuses users and leaves little or no impact.

For more on landing pages try seth godin's post on the subject.

Wii hacking

2007-07-19T00:48:00.000+03:00

I just saw this video again in a post on n.e.r.d.

It's really great to see such lovely applications of hacking - the Wii remote connected to some usb thingie I presume and into a macbookpro and used as an input device for a sound/live video app using the Mac's internal iSight camera.

Great, inspiring stuff.

I Love Adium

2007-07-11T02:15:00.000+03:00

I love Adium, I really do. such simplicity in an IM clone, and it works just perfect with all my msn buddies. Files get transferred pretty fast, they actually get transferred which is good. Buddy-icons are shown, everything just works.

It has a marvelous sound and Icon scheme, great themes out-of-the-box, absolutely lovable.

I've been meaning to write a post about that for quite some time now - I'm really passionate about using Adium. It's really IM reborn for me.

So there.

The interface of a cheeseburger

2007-07-01T02:21:00.000+03:00

A nice post on the iA blog titled The interface of a cheeseburger".

(I could write a lengthy link description, but that would spoil the fun of clicking a huge cheeseburger link image and waiting to see what opens up.)

Hikikomori: or why I'm scared of leaving my room with my PC

2007-06-19T12:06:00.000+03:00

There are some problem solving workflows that only come to mind when I encounter a problem that I haven't seen in a while. One example is the windows safemode -> change resolution -> restart in normal mode -> choose resolution again workflow that I often performed when moving a PC around between 2 different monitors.

But there's a catch, this workflow only works with windows versions before Windows 2000. If you're up-to-date, you'll have to think ahead before moving your PC between 2 different monitors.

I often move my PC at work between work rooms, and each room has some monitors already in place, but every time I do that, I suddenly remember that my relatively high resolution: (1280x1024 at 100 mhz on a 21" CRT monitor) just wont work on some new LCDs we got here.

One would expect that moving my PC between 2 monitors should be easy. Plug & Play and start working. But in fact, it's nothing but easy: It's impossible!

The old workflow of moving the PC to a new monitor, booting in Safe Mode and re-setting the screen resolution just doesn't work in Windows 2000 and up. When the user restarts back in Normal Mode, the old monitor resolution is selected again and my monitor refuses to display at 100 mhz once more - which makes the machine completly unusable!

I really tried everything I could think of to solve this problem without finding another 21" CRT just to lower my screen resolution - I even used Safe Mode to disable the display adapter device in the Device Manager, only to find out that when I start it back in Normal Mode after restart, The screen goes black again and resolution comes back to normal.

After giving up on all sorts of hacky workarounds, I ended up looking for another 21" CRT in the new work room, and finally found one only to use it for booting into Normal Mode and setting my resolution to 1024x768, making sure it's low enough for the new monitor.

Plug & Play is long considered dead in many areas such as Printer installation (more on that some other time), but is some ease of use, on such basic devices, really so much to ask?

Mark Corelan

2007-04-23T19:23:00.000+03:00

Mark Corelan is a graphic designer who specializes in on-screen UI design for film and television. Sadly there are no actual screenshots in his website but there's a fun show-reel to watch.

Great stuff. (I also mentioned him in shmentura.)

Interesting technology stories

2007-04-12T02:45:00.000+03:00

Low end mac is a long running mac website that features a serious of articles called Orchad. Orchad tells the stories behind many world-known technology projects and companies, mostly apple-related.

The articles are extremely well written and I can get carried a way and read a few of them instead of going back to work on my design work.

Great stuff.

I really enjoyed:
The NeXT Years
The Amiga Story
How Jean Louis Gassée Changed the Mac's Direction

G'RAFFE

2007-02-20T03:36:00.000+02:00

The people over at G'RAFFE have an insanely cool flash-based navigation on their site.
I usually really hate flash sites when it comes to online-portfolios, but the mouse hover sound effects are heart warming. :)

I especially like frieda (amazingly funny, kissy?), and this typographic clip.

Prototyprally

2007-02-18T02:41:00.000+02:00

Prototyprally is an experimental flash games blog. It mainly includes quick prototypes of flash games. Interesting stuff.

Interface experiments, EmoChat

2007-02-13T19:19:00.000+02:00

Great flash experiments over at Typorganism, I especially like the EmoType Chat which includes several animation effects according to special emotion icons use: ";) ;( ;0"...

Quick links

2007-01-29T04:09:00.000+02:00

Thing have been fairly quite here, mainly because of the heavy workload of the semester. It'll be over real soon so stay tuned for some user interface rants as usual.

In the mean time, some quick links:

Over at subtraction.com, Khoi Vinh talks about a surprisingly nice feature in Apple's address book application.

Rich Ziade, of basement.org writes about Framing Software: communicating specific workflows by actually turning features off. And it's especially interesting that someone is talking about taking features off of 37signals' applications.

Inspiring tactile interfaces

2007-01-21T08:17:00.000+02:00

Demos of tactile interfaces are always very inspiring. They often present stuff like futuristic new input methods and some creative software that goes along.

Stuff like Jeff Han's demonstration at TED or the TactaPad really makes you drool over your browser. But I think that even smaller input method innovations are inspiring as well. When I heard about 3DConnexions' devices for the first time I was really excited. I even thought about the possibilities of trying to build something similar with a 2nd trackball mouse connected to my PC.

I think my general point is that even slight innovations in existing input methods can seed the creations of new applications. Even more moderate stuff as the MacBook Pro's multitouch touch pad (1 finger for pointing the cursor, 2 fingers for scrolling) can enable, for example, 3 fingers 3d panning (in ZBrush perhaps?), etc.

Great flash sites

2007-01-08T20:59:00.000+02:00

Mathieu Badimon creates some great flash websites.

These include some vector manipulation games at the 'lab' and some great windowish interface at communicationresponsable

[via computerlove]

The horrors of functionality restrictions

2006-12-17T14:28:00.000+02:00

About a year ago, my girlfriend bought an Epson CX3500 printer. It caused many problems almost from day one: The ink would ran out too quickly, less expensive re-fill ink wouldn't work right, the expensive ink wouldn't work well as well and so forth.

One particularly annoying behavior was the printer's refusal to print grayscale / black & white documents when it's color cartridges are empty.

Each time I hear about this problem I just go nuts. It makes me want to throw the printer out to the street and buy another one. It's just completely incomprehensible to me that the developers/designers at Epson thought this can be considered as a reasonable behavior.

The printer's entire goal in life is to print documents. It's not an online ink shopping website. It's not an ink commercial. It should never refuse to print my documents unless it absolutely can't. It should have no problem printing b/w documents if it has Black ink.

I have an HP psc at home. I really disliked hp printers before but this one has just been great to me. This hp also has a similar problem, but it's less of a pain: it refuses to print anything if one of the cartridges is missing, but it will print a b/w document even if the color cartridge is empty.

Someone at Epson thought it's reasonable to ask users to buy color printer cartridges to print black and white documents. That someone is obviously wrong. Products should empower users, not restrict them.

Inspiring design films

2006-12-16T21:18:00.000+02:00

One of our teachers at typography class recommended Hillman Curtis' website. It features many inspiring interviews with top graphic designers: Milton Glaser, Paula Scher, Sagmeister, etc.

Great fun.

lineto

2006-12-12T16:04:00.000+02:00

The folks at lineto sell fonts.

They have a nice site up with great navigation - based on the 3-pane file navigation of the iPod / Apple Finder.

Take a close look at grandma

2006-12-02T15:50:00.000+02:00

Richard has a great post on basement.org titled "technical ignorance is bliss" - he talks about the difficulties non-technical people often have with computers and software and how those difficulties can benefit us (developers, designers) as spectators.

Inquisitor is genius

2006-11-24T01:28:00.000+02:00

Inquisitor 3 is a great search plugin for Safari (apple's web browser). It implements Spotlight-like functionality for Safari. (just type something in the search box and get immediate highlighted results, autocompletion suggestions, etc).

This application is an immediate Bonzai. The developer just completely nailed it. It works amazingly fast, it's dead easy (since the user is only required to use the search box the same way he is already used to) and it works just great.

I just wish I could have that on Firefox on my mac, and actually, on Firefox everywhere.

The interface is the system

2006-11-15T11:47:00.000+02:00

Dan wrote an interesting post on the adaptivepath blog: "The interface is the system". Users perceive the entire system through it's interface and are unable to differentiate one from the other. They are unaware of the system's internals and details - they only see what they interact with...

Back to basics: bloatware vs. keeping things simple

2006-11-12T08:34:00.000+02:00

I remember the first time I tried to download Easy CD. I was in a distant computer with broadband far from my house and wanted to burn some mp3s I downloaded quickly. I had a cd burner but no burning software.

I quickly found out that Easy CD was a 100mb or so download, and I could not be more surprised. A CD burning application that comes in the size of an iso image? Are they insane? Why should the burning application take 100 off my hard drive? (and this was 4 years ago.)

In a recent visit to Nero & Roxio websites I found out the situation today is much worse. Nero requires 288MB of 'permanent' disk space and Roxio's Toast requires 300MB of disk space.

Roxio and Nero forgot how to keep things simple. A burning application should just be able to burn cds and dvds. It shouldn't be the 1-stop-home-media-editor. It doesn't need a wave editor, and a photo organizer.

Disco is a new (very hyped) burning application. It is what one might call a trendy-eyecandy-ish burning application. But other than being really pretty, it has one important feature - it's an insanely small, 700 KB download! It's a small, minimal, simple application that helps me get things done and doesn't take too much space.

Why is that so special nowadays?

Flatlab

2006-11-06T22:44:00.000+02:00

Flatlab is a home for some weird graphic artwork: icons, pixel graphics and my main intrest: expressive GUI mockups.

Flatlab was formely known as CubeLab in the BeOS community, where several cubelab inspired themes exist.

Old machine gone, new Macbook arrives

2006-11-06T01:17:00.000+02:00

It's hard to describe how frustrated I felt when my PC completely crashed last Wednesday. I think the PC just went nuts and became jealous because it learned about me getting a new mac laptop.

Computer crushes such as these are a nice opportunity to fire up the old BeOS partitions I have installed, or boot into the QNX live cd. They're always a joy because they boot in virtually no time and let me do stuff I need quickly.

Another crash time surprise was an old AMD K6-2 I had lying around in my room for the last 3 years or so. Since I wasn't sure what's going on with my PC, I had to remove every bit of hardware and use my old k6-2 in the meantime. It's always surprising to see a machine that I ditched for being too slow suddenly run winxp and Illustrator fairly well.

Legacy / rarely used systems can be very useful at times. It's a shame that I only boot into BeOS to save my files from various disasters, but I'm having a blast each time I do it.

Interaction Desing Inspiration

2006-10-27T11:48:00.000+02:00

Two blog links for interaction design inspiration:

1. no ideas but in things:

2. History of the Button:

Wet Floor Interfaces and user confusion

2006-10-25T11:53:00.000+02:00

Nero is a well known CD/DVD burning application. It allows users to create various CD/DVD formats fairly easily.

I've noticed an annoyance in Nero almost instantly when I started using it: It's burning dialog has the Stop button highlighted (focused) by default.

When a user clicks the Burn button in Nero, the dialog above opens and the burning process is started. But Nero makes it far too easy for the user to cancel the process by mistake.

This is what one might call a Wet Floor Interface, it invites user errors when it actually intents to create a clean one-task interface. The burning process is Nero's epicentre but it's interface makes it too easy for users to accidentally slip on the floor and break something.

User interface design is often about making the right thing easy and the wrong thing hard. Interfaces like Nero's burning dialog are not too hard, but someone should go over them with a towel and wipe the water off the floor.

Goldmine: no fat clips!

2006-10-18T02:15:00.000+02:00

no fat clips is a wonderful, wonderful blog. It contains daily direct-download links to music videos, short movies, motion graphics and other kinds of visual entertainment.

My favourites: psyopp Anthem, Best of August 2006, The Tale of How, Elephants Dream (the open source 3d movie).

How to score on a date with your users (or: Setting realistic expectations)

2006-10-14T02:26:00.000+02:00

Some episodes of MADtv included a returning sketch called Lowered Expectations. The sketch featured weird candidates appearing in a video dating service for those who have 'low expectations'. In a similar way, developers often need to lower their expectations in order to enable successful user/software interactions.

Application developers often expect their users to perform unrealistic tasks. They require users to recall many details, click miniature links with their mice or precisely type long URLs:

In order to define a blog's timezone in Blogger, a user must scroll through a huge list which is sorted by the [UTC+X] offset values. Each item in the list includes the UTC offset of the timezone, continent name and a major city in the area.

Blogger is setting unrealistic expectations. It actually expects the user to know his UTC offset in order to find his location on the list. After a 3-4 minutes of scrolling back and forth, I remembered Israel is either UTC+2 or UTC+3. But defining my blog timezone should not take 4 minutes.

Realistic expectations take user abilities into consideration. It's reasonable to assume that the user can define his location with no problem, but it's completely unreasonable to assume that he knows his UTC offset value.

So how do you score on a date with your users? You make it dead-easy for them to achieve their goals and make it hard for them to get confused and make mistakes.

Weekend Visuals: Design and Illustration

2006-10-14T00:22:00.000+02:00

Some quick links for the weekend:

Tim Gough has a unique illustration style and strong color work.

dqbooks is an interesting collaborative design project.

Sven Kils is an insanely great graphic designer.

Shmentura is online

2006-10-11T22:22:00.001+02:00

Shmentura:
A new group blog about design and bakery reviews, ran by me and some fellow graphic design students at Shenkar.

Some of the posts will be written in Hebrew, some in English. Lots of visual for everyone.

url: http://shmentura.blogspot.com

Stressed out message boxes and design alternatives

2006-10-10T01:11:00.000+02:00

A while ago I was using blogger's spell checking feature (the old version in blogger's pre-beta). During spellcheck, blogger found an error in my spelling and displayed a list of suggestions. I wasn't very happy with the suggestions so I entered my own text in the 'replace with' box and hit Enter.

Blogger then displayed the message box above, telling me that I chose to replace the erroneous text with my own input that was 'NOT VALIDATED' and recommended that I run spell check again.

Aside from being way too stressful, this message text is also way too long. users don't read message boxes. In fact, users dont read.

Sometimes a developer/designer realizes that a message might not be very clear to the user and decides he/she has to do something about that, but usually, decorating the text with ALL CAPS or adding more text just doesn't cut it. Message copy has to be simple and get out of the way quickly. Sometimes, using other design elements (such as a dialog that suggests, "run spellcheck again?") can help solve such issues instead of just wrestling with more text & effects.

If you're interested, Humanized has an interesting article about silly message boxes and some alternative solutions.

MSN Video "Simplicity": Install 3 applications and we'll let you right in

2006-10-08T03:52:00.000+02:00

It's no secret that online Microsoft websites often have problem with non IE browsers. But I was really surprised to see MSN Video Israel demanding so much from me when I first entered the site to watch a flick.

The Israeli MSN Video version requires the user to: (free translation from Hebrew) "verify" that his computer "complies with the requirements" and then click the "activate MSN Video link. The problem is, in my opinion, that if the user actually installs those applications, he'll be forced to reboot his computer and won't be able to click this link. Not to mention the fact that the video he originally came to see will be forgotten, surely it's URL will be lost.

MSN Video in English has a different screen, but I'm not sure which is worse. This version suggest 3 simple steps. If this is Microsoft's idea for simplicity, someone clearly has a problem. The site even goes further by suggesting a tour! they're trying to convince me it just might be worth it to download and install this stuff.

The whole point of services like YouTube is leveraging software users already have installed and making it dead-easy to share media on the web. MSN Video clearly demands too much from new users.

This is clearly not the way to compete in the online video space.

Wrong indication and scaring users off

2006-10-06T02:18:00.000+02:00

When a new user visits bloggerforum, he sees an image similar to the one above. bloggerforum makes an exceptional effor to inform the user what he can and cannot do. It seems, however, that the user can hardly do anything.

One can assume that the bloggerforum people dont want to scare people off deliberately. The problem is that they're displaying unfiltered information. Someone thought that it's really important to tell the user exactly what he can and cannot do, instead of just placing a reply button for the thread and asking the user to sign up (or sign in) on the next page.

The register to post links are the most important ones on the entire page. They're the door for the most important interaction any user can have with a forum system - post in the forum. These links are not well placed and unlike some other links on the page (previous post, next post, etc.) have no images next to them.

Good design is often about creating clear hierarchy. Communicating to the user visually what is important and what isn't. bloggerforum clearly needs a hierarchy make over.

Quick links round 6: Logo / Identity design

2006-10-04T02:29:00.000+02:00

Some great logo / identity design links:

first of all, the great logopond, the flickr of logos. (the logopond resource page contains interesting articles and links).

A massive, one-page logo design portfolio: misipile.

the great logolog blog covers logo design. lots and lots of brilliant logos and articles there. (one of my favourites is: sit).

logolog's author, Denis Radenkovic designs great logos - see the logo portfolio.

identityworks - "goal: to promote management understanding of identity as a leadership tool" (great resource).

LeaLea's the art of self branding (3 part guide).

The Logos of Web 2.0 from the fontfeed blog. reviews web2.0 logos and typography.

The Little Mermaid's syntax colors - creating a themed palette

2006-10-03T02:36:00.000+02:00

Graphic design students often learn that color palettes can be extracted from any visual source. Photographs, Illustrations and any visual reference can be used to sample colors. We will use this technique here to create a visually-compelling and coherent syntax-highlighting color palette.

A few days ago, after I wrote about syntax color palettes, a friend reminded me that we used to have a syntax-color palette at work that I always referred to as being the little mermaid palette. I will try to recreate that palette in this tutorial.

During the tutorial, we'll extract a color pallete from a source image using Illustrator and then use Visual Studio 2003 to create a syntax highlighting pallete that matches the one we extracted. Let's get started.

Step 1: find a source image on the net and place it inside an illustrator document. draw a few matching rectangles and place them next to each other.

Step 2: Choose the rectangles one by one and use the eyedropper tool to pick up colors from the source image. Try to create a pallete that represents the primary colors of the source image.

Step 3: Open Illustrator's Color palette (Window Menu->Color) and set its color mode to RGB.

Step 4: The Color palette displays colors of the selected shape. We will use this window in the next steps to copy the RGB values of our colors into Visual Studio.

Step 5: After we've created a palette in Illustrator, we're ready to start applying this palette to actual code syntax in Visual Studio. Open Visual Studio and place the Illustrator and Studio windows next to each other (see image above). This placement will make it easier for us to copy the color values to Visual Studio. As a first step, we'll choose the text font. I use Tahoma Bold for all my syntax palettes.

Step 6: In order to apply the palette to the syntax colors in Visual Studio, we have to select each syntax element and assign the RGB values from the palette rectangles. We will start with the Text element because it determines the background of the entire palette. The Text colors are kind-of hard to get right, and you might need a few attempts to get those to work. When you think you can move on, start setting colors for the Identifier, Keyword and Comment elements. then click Ok. after settings those basic elements you could probably see if your palette is heading in a good direction. Continue on to define the Strings, Numbers, XML Doc & Tags and Collapsible Text.

Step 7: This is a screen-capture of the palette I created after quite a lot of playing around. I was trying to preserve the feel of the illustration, although I did not use the exact color proportion. The result is a coherent syntax coloring palette that would be very hard to accomplish without a visual reference.

Visual Studio 2003 does not have a palette export feature, but you can use regedit to export the FontsAndColors group to back up your syntax palette.

My Little Mermaid palette is available for download: here.

Update: a massive emacs syntax highlighting gallery: Link

Songbird is exciting

2006-09-30T10:48:00.000+03:00

Songbird is an open source iTunes type media player (from Mozilla) with an internal browser that extract media files from web pages and allows the user to easily download and listen to music all around the web. It's a surprisingly small download (10Mb) and has a nice user work flow.

The default feather (skin) is too dark in my opinion, mostly has problem with the Menu styling, but that's an early pre release and will probably improve with time.

And of course, it works well with the radio station that took me through the last graphic design semester - kink fm.

Howto: create vector application mockups using Visio & Illustrator

2006-09-29T03:44:00.000+03:00

Visio 2003 is a great tool for creating mockups of Windows XP user interfaces. It features a complete stencil that includes many common windows control that were re-drawn as Visio vector shapes.

However, by itself, Visio isn't always sufficient for creating an entire, detailed application mockup. such mockups often require graphics that are hard to produce on Visio alone.

This quick tutorial will show you how to create a detailed vector mockup using both Visio and Adobe Illustrator.

When you first start Visio, the Choose Drawing Type screen appears. choose the Windows XP User Interface drawing type from the Software catagory.

Design your application form using the common controls and shapes found in the stencils on the left. Drag a form first, followed by some buttons and panels. Note: most controls have options that can be set using the context menu.

Goto File->Save As and save your file as a SVG file. SVG stands for "Standard Vector Graphics". it's a file format used by many vector graphics applications to exchange drawings. We will open this file with illustrator for further editing. Copying and Pasting the contents of your mockup from Visio to Illustrator might seem quicker, but it doesn't produce well-organized results. (it seems to create redundant, inaccurate shapes.)

Open the .SVG file with Adobe Illustrator and edit it further. add some special graphics that could not be done in Visio. (here, I added a 3d pie chart and some quick toolbar icons). When initially opened, the file's content might be over-grouped, select your mockup form and hit Ctrl+Shift+G (Ungroup shortcut) until the mockup is completely un-groupped so you can work with it. You can also add another layer above the mockup and lock the layer holding the mockup for easier editing.

When you're done working on the mockup in Illustrator and ready to use it in another vector file (a Campaign Poster, in my case), make sure the Scale Strokes and Effects option is checked. (this option can be found in the Transform window - open it from Window->Transform.) when turned on, this option tells Illustrator to scale the line strokes and effects applied to each shape. It then allows the scaling of our mockup into any size, without damaging and line work or quality.

Finally, place the finished mockup into your desired vector drawing, scale it (proportionally - holding Shift) into the desired size. In the screenshot above I've used my mockup in an A3 sized poster.

Great work. We've just created a resolution independent mockup of our imaginary app. We can now make versions of it for our website, posters and T shirts.

Quick links round 5 - Comics

2006-09-27T01:21:00.000+03:00

Some quick (but great) comics related links:

check out ojingogo, you'll fall in love.

keaner.net makes touching, emotional comics. (and if someone needs a direct link, there.)

boltcity.com - Kazu Kibuishi's great illustration/comics blog, featuring full strips of the great copper, as well as a great step-by-step making-of guide.

Ok/Cancel - Kevin Cheng and Tom Chi's comics strips about user interface design and the tech industry.

flight comics - home blog of the flight comics group books

the creatures in my head - one creature each day.

Quick links round 4 - graphic design

2006-09-25T17:33:00.000+03:00

First of all, the great designer's mixtape, filled with fun music and sorted by designer

Amazing amazing imagery from gneborg.net, especially this stuff.

Lots and lots of work from SerialCut, all in one page.

I really love the work of jp33, containig several one page porfolios.

A massive portfolio from superstar Joshua Davis

Great illustrations from CouscousKid.

Media drives happiness - designing inspiring online platforms

2006-09-23T02:22:00.000+03:00

For some time now, my grandmother is having problems with her eyesight. During this time, she's having problem reading and enjoys German audio books very much. She can use them to re-cap on childhood books she had forgotten, or on large classics she didn't find the time to read.

A few months ago, my dad asked me if I could find some mp3s of piyutim (Jewish prayers) from Turkish synagogues in Israel recorded at Yom Kipur. He said that my grandfather (from my father's Turkish side) loves hearing prayers on tape and perhaps I "could find some on the Internet".

At first, I told my father's there's no way I could find such extremely specific content online. German audio books were reasonably popular, but Hebrew mp3 recordings of Jewish prayers taken at Turkish synagogues? that's completely nuts.

I told him that finding audio book versions of popular geeky-stuff is very easy. stuff like Tolkien's LOTR is all over the place, but what he was asking was just too much for conventional media availability on the net.

A few months later I read in Haaretz about a site called piyut. It took me a few minutes to realize what it was all about, but when I followed the link to the site I found a categorized list of recordings. I was quickly able to download about 140mb of recordings and burn them for grandpa.

My grandpa was thrilled. He keeps talking about the 2 audio-cds I burnt for him and listens to them again and again.

The fact I could actually find these exact recordings (Turkish, from Yom Kipur, no less) on the net is astounding. It was simply incredible. Sometimes web/software platforms enable great things. This is clearly the case here.

Certain types of media can touch our lives. They can drive happiness. Certain software/online platforms can make this possible. piyut made my grandpa happier. He's not even aware of the files' origin, but they excite him nonetheless.

Designers and developers can create platforms that truly excite people. These platforms deserve to be acknowledged so we can analyze their success and be inspired.

What platforms do you find inspiring?

The Programmer's inner Designer: syntax color tweaking

2006-09-22T07:03:00.000+03:00

Ever since I started writing code, I've always found great interest in Syntax Coloring. At the same time, however, I found it a bit weird that I enjoy tweaking and re-tweaking my syntax highlighting colors so much.

I was very happy to see a few recent posts over at coding horror about syntax coloring and programming font choices and immediately felt the need to share my own thoughts about syntax color palettes.

During my work with .net in the last 4 years, I've slowly tweaked my color scheme to the screenshot above. It uses the font Tahoma Bold even though its not a fixed-width font. At it's brightest days, there were 4 of us using it. We once shouted the RGB values of the entire palette across the workspace to a person sitting in a distant cubicle. (that was before we realized we can export the palette from the registry...)

I always wanted to have a small slider in the IDE's toolbar that would allow the user to slide all the hue values of the syntax colors so the user would be able to create a new color palette for each file, or just play around. Since the original palette is usually already color-balanced, shifting the entire palette around the hue axis should not break much of that balance, and it would create fun results. (see the screenshot above)

I think this coloring customization is appealing to people in the same way that desktop wallpaper and ring tones appeal to others. Customization of apps one uses every day is just fun. When you spend a few minutes thinking about it, it's a lot like your clothing choices. People are actually trying to communicate something about themselves using their ring-tone choices. People are communicating something about themselves with their clothing & wallpaper choices.

What are we saying about ourselves through our syntax color scheme choices?

Quick links round 3

2006-09-20T02:37:00.000+03:00

Dan Russell (also from creating passionate users) writes about user responses and learning from design failures - user quote:

“..the most white male fascist tool I’ve ever had the misfortune to use…”

Typeworkshop: home of some experimental typography workshops - students create letters with snow, 100s of books and plain pen and paper.

Artlebdev: huge russian design studio site, lots of great graphic design, identity systems, etc. (and home of the much talked about optimus keyboard).

Conclave: a wacky typography russian studio site. great use of flash and generally creepy.

Leveraging user familiarity to increase usability

2006-09-20T01:59:00.000+03:00

Visual Studio.net has a nice back & forward feature. This feature allows the user to jump through recently visited locations in his code files. The problem with this feature is that it's practically hidden from the user.

The back & forward buttons are almost-randomly placed within the crowded toolbar, and they also have non-familiar icons. I often hover the toolbar back and forth with the mouse cursor until I'm able to find the back button with my eyes.

In web browsers, from which this metaphor is borrowed, the back & forward buttons are by far the most important ones on screen. They are placed in the far left of the toolbar making them easy to hit with the mouse and they are the perceived as one of the cornerstones of navigation on the web.

The Visual Studio Team did a great job with borrowing the back & forward metaphor from web browsers to the code-editor world, but they could go further by leveraging users' familiarity with the placement and visual-styling of these buttons to make this feature more noticable - and as a result, make code navigation easier.

Quick link round 2

2006-09-17T00:53:00.000+03:00

Candy, a wonderful full-length 500-pages design magazine, great, wonderful visuals and inspiration. (downloadable PDFs from the site).

Vectorika magazine, PDF based graphic design magazine, great eye candy.

How to be creative, a PDF manifesto by Hugh MacLeod. (he also responsible for the very well known business card-illustration based blog gapingvoid.com)

Scribbler - a generative illustration app, draw a little drawing and see scribbler manipulate it with lines, colors and such.

Typedrawing - draw with typography, great flash-based app for text based drawing.

Life, Death & Visual Indication

2006-09-16T22:54:00.000+03:00

This is a story of a life, death and worrying sick due to a wrong visual indication.

Some time ago, my grandmother went through heart surgery. During the surgery, me and my family were sitting in the waiting room and watching the surgery board. The surgery board lists patients' initials and their current status. It has only 6 lines and multiple 'pages' that rotate every 20 seconds or so.

The patient status can be one of 3 values:

in surgery
in recovery (still inside the surgery room, but surgery is done and patient is recovering.)
transferred back to department (which means recovery is done and patient is transferred back to his department for further treatment.)

In addition to the board indication, when an operation is finished, a doctor comes out of the surgery room and talks to the relatives about the results of the surgery.

Normally, a patient goes from being in surgery to being in recovery and then being transferred back to department. some time after that, the patient's name is removed from the board.

When we arrived to the waiting room, we saw my grandma's initials on the board and the status said "in surgery". 40 minutes later however, the name was suddenly removed from the board.

When I suddenly noticed the name was removed (3 pages flipped by and she wasn't there), I thought it's probably just a mis-update or an update lag. I figured the silly software that updates the board from remote probably removes the name and then re-adds it later with the new status, but I waited about 5 mins and the name didn't return to the list.

I then told my parents that the name was removed and they slowly started to freak out.

It started to look really bad, we waited a few more minutes and then rang the intercom outside the surgery room. It took a few minutes for a nurse to come out and during those minutes my brother and mother already started crying.

When the nurse came back she told us the surgery was successful & grandma had already been transferred back to her department.

At that point I started to be really upset. The stupid indication on the board made my family worry that grandma's surgery had failed, and it was only due to a mis-feed of data.

We finally realised that the doctor came out of the surgery room early and didn't find us, then someone forgot to update the board leaving the status 'in surgery'. When someone finally noticed the status was wrong, he simply removed the line from the board.

This is a case of a visual indication gone terribly wrong. But it can also demonstrate the way in which people interact with computer applications. The person in-charge of updating the board forgot to update it initially - which made the displayed status irrelevant, only to later remove the entire row and render the status terribly terribly wrong.

A few questions come to mind:

should the application allow the user to delete the patient's entry when it's in status in surgery?
Within the surgery staff, who should be responsible for updating patient's status?
Is there a way to avoid such errors in the future?
Was the problem inevitable or perhaps an interface change could prevent it?

Quick link roundup

2006-09-16T15:25:00.000+03:00

A few quick links:

*Goldmine* A full-length presentation podcast (mp3) starring Kathy Sierra from Creating Passionate Users in the SXSW06 convention. Kathy talks about helping users kick ass, making them happy, helping users train and improve, make users feel better about themselves as a result...

A new blog for amazing illustrator Ashley Wood. (got the link from Maya.)

Ideas on Ideas - a blog about design, design writing and thinking (also, it has great layout).

Coding Horror - software development horror, ".Net and human factors".

The Lure of the Single Click - peterme from the adaptivepath blog talks about single click interfaces.

Full length movie: Pollinate

2006-09-13T13:26:00.000+03:00

Motion graphics studio Belief released a great movie called Pollinate (.mov for download).

The movie talks about design inpiration, process, idea recycling, synthesis and design thinking. It's 45 min long and very engaging.

A must see for any Designer / Student.

What Am I?

2006-09-11T19:32:00.000+03:00

Elyse Sanchez writes about the many changing job descriptions of an Interaction Designer / User Experience Designer / etc. and the need to create a power-point presentation just to explain what you do all day.

I frequently wonder about this myself as I work as a .net developer and interaction designer within our project at work and studying graphic design (soon to be interaction design) while I'm at it...

Anyhow, it's an interesting read...

Choosing the right paradigm: complex dialogs and control choice

2006-09-10T00:32:00.000+03:00

At work, we make extensive use of Steema TeeChart. TeeChart is a gui component that can render great looking 2d and 3d charts for a variety of applications. We're also exposing its TeeChart Editor in our own gui design applications so users can custom the look and behaviour of such charts.

However, the Steema Editor makes customization extremely difficult because it uses a monstrous amount of Tab pages. in the screenshot above, the user has navigated through 5 (!) levels of tabs in order to get to his desired setting. These tabs are structured - every line has a selected tab that holds all tabs within the next line. At work, both users and developers repeatedly fail at customizing such charts because they just can't remember where the desired settings are. (there are many options, and the navigation through them are very confusing).

The main problem here is that structured information is badly displayed. The tab pages are confusing and although they are supposedly structured, they do a very bad job at visualizing the customization categories TeeChart offers.

A better example of structured settings display can be seen in Eclipse's Preferences dialog. The customization categories are structured in a similar way but they are visualized using a tree-view. Tree views provide straightforward display of structured information and allow easier navigation.

Eclipse goes further by adding hyperlinks within the actual settings view, together with a conventional set of back & forward buttons - which users are very familiar with from the web-browser world. (although they are mis-placed in a non-conventional spot within the actual dialog and look a bit too-different from the common back/forward buttons.)

This goes to show that choosing the proper visualization for even complex data can have a tremendous effect on whether users are able to percieve the information and make good use of the tool.

For further reading (and some good laughs) on Tabbed Dialogs - check The Interface Hall of Shame - Tabbed Dialogs.

Like this article? please Digg it.

Companion blog in hebrew

2006-09-09T00:03:00.000+03:00

I've finished most of the work on stupid-app Hebrew.

Before opening this blog, I was a lot about whether it should be in English or Hebrew. As an Israeli web user, I know that I'm most comfortable reading online materials in Hebrew, but I wanted to write for a more diversecrowd. After thinking about some other alternatives, I decided to maintain 2 blogs: one in English and one in Hebrew.

Most posts will be translated into both languages and will include a link to the translated post on the other blog. This is indicated by these buttons:

- read this post in Hebrew

and

- read this post in English

I hope all this makes it easier for everybody to read through the blog and have fun.
As usual, All comments are welcome.

Malware and terrible user interface design

2006-09-07T04:01:00.000+03:00

One of the funniest malware I ever encountered was a Message Box that popped up whenever my brother's PC would start up into windows and say "poker?" (in small case). I always found it incredibly funny, especially because of the small case.

Some malware are based on impersonation, it counts on the user to mis-recognize the displayed screen and think it is generated by a legitimate application. Some malware, however, do this very badly, which creates funny results. (red labels are impossible in regular Windows MessageBoxes, so are links.)

The interesting question (design-wise) is: how bad can they get before normal users figure it out?

Few Hues, Many Values

2006-09-07T02:16:00.000+03:00

I ran across this excellent excerpt from O'Reilly's Designing Interfaces book about graphic styling of controls and complete GUIs.

It describes an important design decision of a color pallete for your GUI, which is later translated to a full graphic implementation by using the chosen hues with value variations. This can lead to a more coherent design that has only a few chosen hues, and avoids a confusing "rainbow" look.

Communicating the wrong message: Security applications should not look like cheesy media players!

2006-09-02T17:29:00.000+03:00

A while ago, I read the excellent "The iPod and the Bathtub" (great pdf version) article published by frog-design. The article discusses products and the message their design communicates.

When it comes to communicating a message with user-interface design, some applications do a great job, while others clearly communicate the wrong message:

Avast Personal Anti Virus looks like a media player, and it's also skinnable. It's obvious that avast did this deliberately, but in my opinion, when you try to create a broad user range to a home security product such as an antivirus, such strong resemblance to a home stereo or media player application isn't good. This interface design communicates: "I'm a fun application!", "Scanning my computer for viruses is just like playing music", "I can do that all day!"

Lavasoft Ad-Aware is a great application, I use it frequently to remove spyware, but ever since I first saw it, it always reminded me of Bouli (hebrew). The interface looks like a snowman. And again, this application is trying to say: "You can rely on me" and "I will protect you against those evil mal-ware" and it's not trying to say "oh I'm so cute and fluffy, let's cuddle".

Communicating a message with user interface design is especially hard when you're designing a desktop application. in the web, conventions are loose and many variations work well. In desktop applications however, there are many user-interface guidelines to follow, and variation is somewhat limited. The real challenge is to succeed in communicating the right message, while not breaking out from the platform conventions all together.

במפלגת העבודה כל יום הוא יום המהפך

2006-09-01T18:05:00.000+03:00

עדכניות אתרים ברשת הישראלית היא דבר שאנחנו לרוב סלחנים לגביו - באתר הארץ כתבות לעיתים קרובות ערוכות בחלקן בשעות הקטנות של הלילה, או מכילות שברי פסקאות ומידע לא מעודכנן מעט.

באתר מפלגת העבודה לעומת זאת, שהתגאתה בקמפיין אינטרנט מתקדם יחסית, איש לא נגע כמעט מאז מערכת הבחירות. בראש הדף מתנוססת אינדיקציה מרגשת על יום המהפך (במהלך מערכת הבחירות היה שם שעון שספר את הימים עד למהפך). היה ניתן לצפות לפחות, שלאחר (שלצערי) לא היה מהפך, מישהו יעדכן את הקטעים שנוגעים ממש לקמפיין מתוזמן ויסיר אותם מהעמוד, או לפחות ידאג לגרום לו להראות עדכני ומחובר למציאות.

קמפיין אינטרנטי מושקע צריך להמשיך גם לאחר הבחירות, ניתן לתרגם לפחות את חלק מהטראפיק שנוצר לכיוון האתר בתקופת הבחירות לעשות משהו אחר באתר, כמעט כל דבר אחר - אבל מצבים מהסוג הזה מעידים בעיקר על הזנחה של האתר, והיוזר (זה שממש השקיע ונכנס לאתר מפלגת העבודה, ועוד אחרי הבחירות!) יוצא בדר"כ מאוכזב.

Resized screenshots are evil!

2006-09-01T07:03:00.000+03:00

Screenshots were created to be taken and displayed in Actual Size. However, many serious software houses continue to display resized versions of their screenshots.

Screenshots should never be resized. they should be display in full detail for everyone to see, allowing users and random website traffic to look at the details and "feel" the application up close.

In the 2 screencaptures in this post you can see the websites of apple and textmate display miniature versions of their screenshots - and they both communicate very little. This is especially a shame since they work very hard on usability and graphic design...

A few things that can help when trying to produce proper screenshots:

Before taking the screenshot, change to a low resolution (e.g 800x600) - and place windows accordingly.

Never ever save screenshots in JPG format. JPG's compression creates dirt around very contrast graphic - which results in a messy image.

If you must take the screenshot at a high resolution - Crop it, but plan the crop according to the screenshot purpose.

Win3.1 dialog comes back from the dead!

2006-08-30T23:12:00.000+03:00

Just in case you missed the old Win3.1 style dialogs, you can bring back those sweet memories in a few simple clicks. (right now, on Windows XP!)

Go to the Fonts folder and click on File->Install New Font.
Always a nice surprise. (and obviously, not very usable when trying to browse through your harddrive for those fonts..)

SecretNoisyWebPages

2006-08-29T02:08:00.000+03:00

I'm using either Opera, Firefox or Safari (at school) to surf the web. After some time online, I usually have 5-15 open tabs on my browser. at this time, a seriously annoying problem often occures:

One of the web-pages seems to be playing sound - But I have no idea which one!

Usually, when this happens, I begin obsessively going through all the open tabs and search for the page that is most likely making the noise (myspace pages, wierd full-screen flash sites, etc).

This is clearly the case of user frustration. I have a few tabs open, and let's say I want to make the noise stop asap, I now have to close each noise candidate - but in many cases I find out that I had closed the wrong page, or worse, I get 2 pages playing some music at the same time.

This brings several questions to mind:

Can (and should?) my browser indicate that a tab-page is causing soundplay?
Can I have a mute button on my browser (I would certainly like one)
Do people that create noisy web pages never use a tabbed-browser to surf to their own pages?

One last note on the subject is that Opera's (genious) Undo feature allows me to do trial and error on closing tabs to find out just the right one. If I accidently choose the wrong tab to close and still head sound playing, I Ctrl+Z it back and try the next one.