SIDEBAR
»
S
I
D
E
B
A
R
«
The Origin Of The iChat UI
March 18th, 2008 by jens

I had lost this historical document for a long time, but finally found it the other day on an old backup CD. It’s the original 1997 sketch I made of a chat user interface based on speech balloons.

Balloon Chat UI Sketch (21 April 1997)

Drawn in ClarisWorks, April 21, 1997. This was based on my experiences with MUDs and IRC, having a really hard time keeping track of many-way chats. I think the only IM app available then was ICQ, which I hadn’t heard of. (IIRC, AIM came out later that year, at least for non-AOL users.) This also predates Microsoft Comic Chat, which used speech balloons too, although in a very different UI: theirs was for novelty, mine was for usability.

Novel features that made it into iChat:

  • The speech balloons, of course, after being beautifully Aqua-fied by Steve Lemay.
  • Per-speaker colorization.
  • Aligning your messages to the other side from everyone else’s; in iChat this was improved a lot by also changing the alignment of the text, and pushing in the outer margins of the balloons to make their alignment more obvious.
  • Showing in-progress messages (the dotted balloon at the bottom). This became the “thought-bubble” marker in iChat. Back then I really wanted to show the partial message text, updated every second or two; but most users found it annoying to have other people seeing every typo they made, and it really conflicted with AIM’s rate-limiting, so it was turned off.
  • Custom user pictures (though these were just sketched in as ovals in the drawing.)

One idea here that wasn’t used in iChat was connecting a speaker’s consecutive speech balloons together with “pipes”. I thought this helped make it easier to identify the flow of the conversation, but it was a pain to implement (I tried doing it in Java once) and I didn’t even try to add it to the NSTextView-based balloons in iChat.

I’m not sure why I put the userpics in the margin but not next to the speech balloons. Maybe I thought there wouldn’t be room, or that it would look weird to see the userpic repeated multiple times.


13 Responses  
  • OwlBoy writes:
    March 18th, 200811:43 AMat

    Wow drawn in Claris Works? That’s awesome hehehehe.

  • Jeff LaMarche writes:
    March 18th, 200811:44 AMat

    This is an awesome little bit of history, thanks for sharing!

  • Matt writes:
    March 18th, 200811:51 AMat

    I for one don’t like having the user icon repeated with every message.

  • drew olanoff writes:
    March 18th, 200811:55 AMat

    wow that is awesome! once i used ichat for the first time, i couldnt use another AIM client. its that good.

  • Elliott Harris writes:
    March 18th, 200811:56 AMat

    A fascinating look Jens, thanks. I have to say, at first the pipes looked really confusing, but after looking at it a bit longer, they make so much sense. I always loved the text being sent every few seconds over a Bonjour chat, even if it can get people in trouble sometimes. Another interesting thing that I like is the “range” of the chat. That is, the time that it started through now, which is pretty neat. Any chance you have mockups of the buddylist or single user chat? I’d really like to see them. :)

  • jmissig (LJ) writes:
    March 18th, 200812:43 PMat

    It amuses me that the text is underlined instead of bold or italic. Underlines are so rare these days except for links!

  • As origens da interface do iChat writes:
    March 18th, 20082:26 PMat

    […] O mock-up acima é de Jens Alfke, que teve a idéia de fazer um chat com uma interface onde balões (speech balloons) iriam representar as falas das pessoas. Na época, o único programa de mensagem instantânea existente era o ICQ, mas que ele nunca tinha usado. […]

  • Magnetbox - links for 2008-03-19 writes:
    March 18th, 20086:19 PMat

    […] The Origin Of The iChat UI (tags: chat design history) […]

  • BM5k writes:
    March 18th, 20088:15 PMat

    I love seeing stuff like this. How it was made/how it works is always interesting.

  • » links for 2008-03-20 copyblokking.com writes:
    March 19th, 20085:37 PMat

    […] The Origin Of The iChat UI — Thought Palace (tags: design history inspiration instantmessaging interface mac osx Apple UI chat) […]

  • http://www.adamwride.com writes:
    March 21st, 200812:38 PMat

    Love to see how fantastic ideas are drawn up, evolve, and are refined. Thank you!

    (gives me hope that our app will look as good as iChat one day)

  • User Experience and Interaction Design » Original iChat User Inteface Sketch writes:
    March 22nd, 200811:30 AMat

    […] The original 1997 sketch drawn in ClarisWorks of a chat user interface based on speech balloons by Jens Alfke, former Apple employee. […]

  • Pleasure and Pain — Links from 3/22/2008 to 3/25/2008 writes:
    March 24th, 200810:01 PMat

    […] The Origin Of The iChat UIDrawn in ClarisWorks, the old school Mac app I miss the most […]


»  Substance:WordPress   »  Style:Ahren Ahimsa