Archive for the GUI Category

The GUI Godfather

Posted by Scott

You’re looking at the Xerox Star which “represented the most complete implementation of the ‘Desktop Metaphor’ of any system until the advent of mature Desktop graphical interfaces later on the Mac and PC/Unix/Linux in the 1990s” [source:digibarn] Digibarn has posted up several Polaroids from 1981 depicting the various facets of the Star 8010’s interface (a few of which are shown below). I don’t know what’s more amazing: how ahead of it’s time this GUI was, or how little the OS interface has changed in the past 28 years. This was nearly three decades ago and we’re still clicking folder icons and using archaic pointing devices. Where’s my Minority Report interface!? My wrist hurts.


Check out all the rest of the hi-res Polaroids here.

Ted: BumpTop

Posted by Scott

I remember seeing the BumpTop desktop concept making the rounds a while back but today I came across a bit more interesting version. In it, BumpTop creator Anand Agarawala walks us through the interface and it’s various features during his presentation at the 2007 TED conference. The concept is obviously in it’s early stages and while this demonstration seems to highlight some of the more frivolous features of the interface, I think a lot of the ideas could be very useful in a future OS. My favorite part is when he dares to insult the sacred cow of OS X, pointing out that it’s essentially a more “lick-able” version of the “same old crap we’ve had for years” (i.e. Windows). You gotta love the audience reactions. Video Link

Note: Since this video is now almost 2 years old, a multi-touch interface is notably absent from his presentation. In the time since the original video Agarawala has updated and has a nice multi-touch BumpTop demonstration here.

New Year / New Blog

Posted by Scott

The ISO50 blog is now approaching it’s second birthday and with the new year I thought now would be a good time to rethink the layout and functionality of the interface. The blog runs on the superb WordPress platform (highly recommended) so it’s extremely flexible and I want to take better advantage of that flexibility. When I first designed and built the blog I admittedly had no clue what I was doing. At the time I wasn’t really an avid blog reader so I didn’t really understand the finer points of a well thought out blog design. Thankfully, WordPress supports themes so I snagged the classic Kubrick theme (now K2) and hacked it into the form you see here. I learned a lot during the process and during the following year or so of working with the blog so I feel better equipped now to give it another shot. But as anyone in web design knows, it’s very difficult to be objective about your own interfaces and to understand the difficulties end users may have with your design.

So I wanted to ask you, the readers, what you would do to improve the blog. Is there anything about the interface or the layout that’s confusing, cumbersome, or just plain broken? Are there any features that you feel are missing or would be a good addition? I am in the early stages of the redesign, I have some mock-ups and wireframes going and a development install running here locally, so now would be a great time for suggestions. I look forward to reading any ideas or suggestions you might have in the comments

Update: Based on Michael J.’s comments I have added to this post in the comments.

iPhone GUI PSD

Posted by Scott

I started out my career in graphic design as an interface architect so I’ve always had a soft spot for GUI’s and user interaction theory. I happened across this post at Teehan+Lax about the GUI for the iPhone. They’ve posted a PSD with most of the assets from the iPhone interface, all in freely-scalable shape layer and PS effect formats. Technically it’s been posted to provide an easy way to create iPhone mock ups but I think it’s a great reference for anyone trying to learn how to create interface graphics in Photoshop (for web or otherwise). Reverse engineering PSDs like this is a great exercise in working with scalable graphics in Photoshop. You can download the PSD from the Teehan+Lax site.