jump to navigation

3 UI Design Books for Your College Class May 7, 2008

Posted by Ryan in : Tech, Reviews, Books, Design, Web Sites, Graphics, interface, Teaching , 1 comment so far

My friend Jake called me a few days ago to tell me he will be teaching a User Interface Design class at Ferris State University in Grand Rapids, MI next Fall. After my congratulations, he asked me to help him pick out a textbook for his students. Here were my suggestions:

Universal Principles of Design - William Lidwell, Kritina Holden, Jill Butler

I loved this book from the moment I picked it up and learned why the iPod makes us happy - it’s the Golden Proportion, or the Golden Rectangle, as some might say. Then, at the bottom of that page, you get “links” to some other design topics you may find helpful when discussing the Golden Proportion, like The Rule of Thirds. Anyone who designs anything, from software to hardware and anything between, needs a copy of this book.

I told Jake to have a copy of this book around for the class to reference, but I wasn’t sure if they all needed one.

Beautiful Evidence - Edward R. Tufte

This is the one book out of these three that I don’t own… yet. I saw this in the book store while searching for a book about Processing, so you can also find it near the graphics books. Information Design is the name of the game, and Mr. Tufte has some of the most beautiful and useful designs you will ever see. He even goes in to how they displayed and photographed some of his sculpture outdoors. Absolutely breathtaking.

This book would be a great resource for a Level II UI Design class, but I think it is perhaps too detailed for beginners.

Design Whys: Designing Web Site Interface Elements - Eric Eaton

I’ve heard a lot of folks tout Don’t Make Me Think as the bible to user-interface design for the web. Honestly, the title and presentation of this book drew me in a little deeper when I was buying it a few years ago.

Since my friend was looking for a book about UI Design, I found this on my shelf and made my final recommendation to use Eric Eaton’s book for his class.

Design Whys starts out by telling you what this Interface Design stuff is all about, and walks you through specifying and planning a project. Then you get an introduction to the common UI elements: links, buttons, form elements; what makes a link clickable, colors, designing for different browsers and devices, why use a link vs. a button, basic typography. The section on Advanced Interface Elements breaks us out of what’s normally possible on the web to cover things that would now be considered AJAX-y forms, applications, metaphorical interfaces, and custom or experimental UI elements, like those created with DHTML, Flash or 3D.

After the first 200 pages of the book, he launches us into a case study of some useful websites (at least as they were in 2003). The sites in the book are no less useful, beautiful, or innaovative than they were 5 years ago, though. It’s interesting to take a look at what folks were doing back then that the world still hasn’t caught up with. We seem to be constantly wanting to homogenize the experience (maybe I’m guilty of that as well). There’s room to be daring on the web, and I don’t mean large fonts, pastels, and rounded corners.

I hope Jake takes my suggestions to heart and picks the best candidate. If you have a UI design book you swear by, or you have a comment or question about one of these books, I’d love to hear it.

Weekend Projects - Lightweight Photo Service May 5, 2008

Posted by Ryan in : Tech, Web Sites, mashups, interface, open source, Web Services, Programming , add a comment

This is a project I’ve been thinking about for a while, and I’d love to do a hack weekend to get this working sometime.

One thing that’s been a problem with us at Petentials (and many other sites running Drupal) is Photo uploading, sharing, embedding, etc. Aaron Winborn created a great tool called Embedded Media Field that abstracts the hosting of photos, videos and audio files for a Drupal installation - what I’m thinking of doing is writing a custom interface for that module that allows a user to upload the files without leaving the page, and then talks to Drupal to tell it to make a new node for the photo, add it to a gallery, or the same for a batch of images - Aaron’s module does quite a bit of this already.

I was wondering if Menalto Gallery (G2) could help us out here, but that’s really meant to be used as its own system - I really just want to create a REST/CRUD interface we can throw on a subdomain to serve up images and thumbnails, while also generating new thumbnails as needed. G2 has lots of these features, but then we’d have to keep the user tables in synch and I’m not sure we need everything they have to offer.

This is not meant to be a flickr or a photobucket, but the replacement for hosting images in-house. It should be insanely transparent to the users - they should not need to register, have any plugins or enter any extra screens.

My thoughts are the following:

The application by itself won’t do anything - you’d need a CMS to integrate it with. My choice is Drupal, of course.

Certainly on the wish list for embedded media field is the ability to integrate this content transparently in the background (see Vox’s media features). Using something like PingVision’s Drupal Markup Engine and a WYSIWIG editor might get us most of the way there. It’s an API that lets you specify custom tags - mostly these can be used to add images, video or blocks inside a node, but there are dozens of uses that have not been invented yet, I’m sure. If the editor can have plugins written (Kupu is the editor of choice for Acquia’s Carbon). I don’t think it should insert raw HTML, but a custom tag so we can abstract the method of storage - just something like [image:13456] or [video:13456] or [audio:13456] or [gallery:13456] at least until HTML5 gives us a standard for implementing this.

One reason why the Embedded Media Field is so great is because if YouTube changes the player, or if they introduce the option to turn off the related videos at the end, or even if you come up with your own .FLV wrapper, like a deep-tagging service, all your calls to videos are made through this tag - it’s an API for HTML code.

If we get an editor that supports this sort of stuff and a module/plugin for major CMSes and platforms, those can all live in one place. Wordpress has support for TinyMCE or the plain-text editor, but it must support others, yes? Another editor that would be high on my list is the YUI Rich Text Editor.

I could probably go on all day, but I think I’ve gotten a decent explanation for this cluster of projects out there.

How to add subtitles to video podcasts March 2, 2008

Posted by Ryan in : Tech, Podcasts, HowTo, Video, mashups, interface, flash, Web Services , 2 comments

At BarCampMiami, one of the folks in my podcast session had a question about creating a multi-lingual podcast. I instantly suggested that photocasting with something like SlideFlickr and including an audio file would be simplest and very shareable. Visuals certainly have the power to transcend the barriers of language (if not culture). Still, she was hoping for a more flexible answer, like subtitling videos.

I had certainly seen Rocketboom and other vlogs include subtitles and have mutli-language support, but I was skeptical about finding a cross-platform tool that could get the job done.

I did some searching and found out Google Video supports subtitles if you’ve already made the file - OK, but how do I make one? Linux has lots of tools available, but I don’t think that will help my friend in this case. Jubler - Cross-platform subtitle editor in Java Then I started finding the web-based subtitle solutions via del.icio.us, and at the bottom of page 3 hit paydirt. There was a compelling cross-platform downloadable tool in Java (cross-platform), but I had trouble getting video playback to work on my mac. I could see the video frames alright, but for moving pictures Jubler was no help. It required MPlayer to work, which I have, but something wasn’t right, so I gave up and went to the web.

Next on my past-tense journey was subtitle.in, the best subtitler of the bunch (I also tried a tool that required use of Google Video and wouldn’t allow YouTubage). I have two complaints about subtitle.in:

Add subtitles to video podcasts

After some playing around, I noticed you could move the start time of the subtitle by half-a-second, but the controls for this were unintuitive at best. Try to see if you understand from this image. Me either. They’re under the list of titles and say “< Prev 0.5 sec" and "Forward 0.5 sec >“. Since I figured out that the “Delete” key removed the currently selected title, this was a logical next step, but I don’t know why we couldn’t just type in the time. My anal self needs that level of granularity.

Time appears to be broken into 100-frames per second? Not sure how that works, but the titles seemed to play back fine.

Tip: Type out all of your titles before you get them in this tool or any other subtitling utility, and make notes about when each phrase starts, with a minute:second attached; this will go much more quickly for you. If you’re like my friend and you want to translate the video into 4 languages (English, Spanish, French, Portuguese), keeping your notes and times straight will be a huge boost in throughput.

Check out a sample video at subtitle.in - as of this writing, I only did 3 screens of subtitles, so don’t go looking for anything past the first blackout.

The Second Click and Lijit Search Wijits February 11, 2008

Posted by Ryan in : Tech, Site News, Blogging, Links, Video, Wikipedia, Trends, Liberatr, statistics, Public Relations, OrlandoScene, interface, Second Click, Web Services, Google , add a comment

If you haven’t noticed the lovely Lijit search wijit on the left sidebar here, please leave your feed reader and come check it out. This is a very interesting concept to me - they’re taking the Google Personalized Search tools and providing a very user-friendly (and statistical) interface to the tool. A mash-up with a business model? Amazing. I’ve also read on their blog that they’re going to start tracking comments on your sites as well and I suppose integrating that with the other statistics and search metrics you’re already getting. Good times.

Also on the Lijit blog, I read about a new coined phrase, or meme, or whatever - The Second Click.

At Lijit we know from watching reader behavior on our publishers’ sites that a huge percentage (33%-50%) of readers come from horizontal search…

We also know that the normal behavior of one of these readers is to read the article that Google referenced and then hit the back button. Reader gone, moment lost, second click wasted.

This is precisely why the Lijit Re-Search feature was added to the Lijit Search Wijit. When you have this feature turned on, Lijit hooks the reader into staying for a third click and beyond. Bottom line, you only get one click to keep to your readers around – do the most you can to mine that opportunity.

The easiest way to see this re-search capability in action is to perform a search. Search for “Second Click” - you should come right back to this article. Also, there’s a fun tag-cloud view of the most popular search terms. This really helps - according to my stats, I’ve had 173 re-searches in the last week, and I the fact that the commonly searched links are right there is responsible.

In the “real world”, the Second Click has been coming up because of an announcement by Google to compete with Wikipedia. In the fallout from this announcement, there was some speculation and dot-connecting going on specifically about “The Fight For The Second Click”.

Wikipedia is clearly dominating Second Click traffic right now. There are also plenty of folks chasing down second click property - social networks, Mahalo, review sites, anything with the word “social” in the description, really. We’ve certainly reached the point to start developing the second click strategy at Petentials. Even my two biggest and most sellable ideas right now are all about the second click, but that’s not how I would have characterized them until I knew about this meme.

It’s not enough to just have the blog anymore - I’ve made a point to actively attract second clicks on sites like OrlandoScene.TV (home page, also on posts) and Orlando Video (also see a post), for example. The “most recent” only really helps if you’re on the 11th or earlier post, but there’s a nice wordpress plugin called related posts I’ve installed all over the place. It requires one line of database massaging, but it’s easy and worth it. I’m not positive of how often it works, but as i have several blogs to track, throwing in some click-tracking would be very much worth it.

(side note) For Lijit, I’ve suggested that instead of most popular searches, they should have options for most recent or recently popular, and I think they’re rolling it out soon. Lijit’s customer relations are amazing. I was personally greeted by Kevin Hawkins, who actually took a few minutes to read my blog and personalise my welcome letter. This was a huge ego boost, especially from a blogger’s perspective. I’m always saying - simply acknowledging someone’s work is the biggest compliment you can pay a media producer.

iPhone Web Clip Favicon Fun! January 28, 2008

Posted by Ryan in : Tech, Links, HowTo, Drupal, Browsers, Trends, Design, Web Sites, interface, Branding, phone, Petentials , 1 comment so far

If you have a web page of any kind - blog, business, social network, whatever - take 3 minutes out of your day and hook this up.

Everyone has a fun little 16×16 favicon to sit in the bookmarks section, links bar, or tabs of their favorite browser (Flock, Songbird and Firefox come to mind). This has been a long-running tradition with webmasters and SEO companies to give you that last bit of branding: the favicon!

Now with mobile devices and desktop apps (rich internet applications, too?) getting into the mix, there is a need for favicons larger than squint. Enter, the apple-touch-icon and associated rel tag, which is even easier to implement than a favicon. No special file formats, no special programs needed. Instead of a screenshot of the web page, you now have a degree of control over a bookmarker’s (webclipper’s? that sounds nice) touchscreen.

All you have to do is name the thing apple-touch-icon.png and throw it in your document root. According to the primary vivid, it should be 57×57px, but that’s actually the rendered size and not likely the size Apple uses internally. If you go to http://apple.com/apple-touch-icon.png, theirs is a nice round 129×129, which is roughly 2 1/4 times larger than 57×57. I figure Apple must know something we don’t, so I’ll play along.

And now, a handy diagram to show you what’s up:

Favicon

Favicon
16×16

Apple Touch Icon

Apple-Touch-Icon
57×57

Apple’s Official Icon

Apple
129×129

Once you get your image loaded, borrow the boss’ iPhone and add the webclip to your home page. There is also a preview screen that lets you know instantly if your icon is working (not pictured).

Apple iPhone Logo

The iPhone even added a nice glossy, buttony finish to the experience. Ahhhhhh…! You’ll also notice the edges of your icon may get trimmed (which caused the boss to make a face). This is, as far as I know, normal. If you don’t want the boss to make a face, center the icon and leave some extra space around. Using the Apple example may be a helpful guide.

Last but not least, you may be wondering: “Why do I have to name my icon something so specific, and why do I have to use the document root?” Looks like you don’t. Again our friends at vjarmy.com tell us that there is a rel-tag we can throw in the header if we want to place the icon elsewhere:

<link rel="apple-touch-icon" href="/path/to/my-cool-icon.png" />

If you don’t want to use a .PNG, you have smelly feet, but if you’re OK with being known as the smelly foot man, by all means, don’t use the best web picture format. I also had to dissuade my boss from experimenting with transparency in the .PNG, because I’m quite afraid of the results. Imagine a person with a naked woman on their iPhone desktop; now imagine your company’s logo displayed distastefully close to (or on top of) an unmentionable portion of said woman’s body - with a transparent background! Yikes. I would feel very sorry for Six Apart on that day…

I find the apple-touch-icon tag to be a scoche proprietary for my taste, but so are iTunes tags in podcast RSS feeds, so I guess we must needs put up with a little bullcrap every now and then.

I also heard someone recently complain about sites that have a default iPhone interface, and I mostly agree. They should put the interface on a subdomain so you can get at the regular functionality of the site, but I believe a truly useful service should be user-friendly through multiple interfaces, and traditional web apps are not always suited to touch screens.

If you have any questions (or if I forgot something) buy all means, let me know.

I am also hoping to make a small and fun Drupal module that encourages you to upload a 129×129 image to use as your site’s official webclip instead of a screenshot, so be on the lookout for that. Would you like to see other iPhone-friendly features integrated, like style sheet includes, javascripts, etc? I’d love to know.

Flock and Facebook Screencast November 21, 2007

Posted by Ryan in : Tech, Podcasts, Music, HowTo, Video, Browsers, Trends, Web Sites, mashups, Facebook, interface, Teaching, Friends , add a comment


The new Flock is out and better than ever, so I’m inspired yet again to screencast about it and show you more about this browser. In this edition we talk about how Flock has integrated your Facebook friends (and Flickr, MySpace, YouTube) right into the sidebar. You can keep the People bar open while you surf the web and make updates to your status, write messages, subscribe to media and share with your friends with just a simple drag-and-drop. This is the version of Flock you’ve been waiting for, trust me.

Download the Screencast (iPhone friendly!)

If you want to see anything else demonstrated, like if you want to teach your boss how to upload YouTube videos, I would be happy to create something custom for you. We do dedications!

Beer Bomb Bus Tour Twitterstream via 30boxes Twapper September 17, 2007

Posted by Ryan in : Tech, Blogging, Orlando, Events, Beer, Reviews, Trends, Web Sites, mashups, Contributors, interface , 1 comment so far

Live Tweets from today’s awesome tour.
Hosted by Mike of Shipyard
Twitters courtesy hailtheale johnrife liberatr
Beer Bomb Bus Tour Twitterstream

Over at m.30boxes.com they’ve got a neat little service called Twapper - “Twitter Mobile for WAP”. I didn’t think much of it until just now when I realized that I only twittered a few times today, but John and Chris wrote several texts. I was even quoted in one of them!

Twapper is so easy you can use it from your cell phone, but it makes a great deal of sense as a web service as well. Think, I wanted to see tweets from just a few users, not all my friends, not just me. No special #tagging or @addressing needed, just a good service. If you want to see more than one stream, just type +bloggingfringe or +johnrife+hailtheale to the end of your URL. I think it has a limit on the number of streams you can combine, but it is ad-hoc groups! Ad-hoc! Buzzword compliant!

Another very useful thing that was omitted from this screenshot (for archival purposes) is a little text box just below the stream that bears the legend “Direct twitter this group only!” That’s a very useful feature, so easy you can operate it from your crappy cellphone browser.

Also, John was inspired to try out some live YouTube as per my suggestion at Friday’s lunch, so check out that link too.

Flock Blogging with Photos September 14, 2007

Posted by Ryan in : Tech, Blogging, Podcasts, HowTo, Events, Video, Browsers, Fringe, MySpace, Liberatr, Web Sites, photos, interface, Teaching , 1 comment so far

Part II, Electric Boogaloo!

This screencast demonstrates how to use Flickr photosharing and the Flock browser to add photos to a WordPress blog (or any blog or web page, really). Flock makes it dead-simple to upload, tag, and post photos. You can probably download the browser, sign up for Flickr and post photos to you blog faster than you can watch this video (about 7 minutes). Let me know what you think or if there are any tough spots.

Download the Screencast (in stunning 480×320 optimized for iPhone!)

There was a time when I was thinking of doing lots of screencasts and trying to build a whole site around it. Mike G of CFPHP and I were talking about something along these lines today - he’s the reason why you have an iPod-sized ‘cast. If you want to see anything else demonstrated, like if you want to teach your boss how to subscribe to RSS feeds, I would be happy to oblige. I am just sort of doing these as they come up until we come up with some cirricula.

Forget Flex, Go OpenLaszlo August 24, 2007

Posted by Ryan in : Links, Video, Wikipedia, Reviews, Browsers, Trends, Standards, interface, OpenLaszlo, flash , 3 comments

Note: Mike G. from Central Florida PHP is giving a talk about Flex this Saturday at DeVry @ Millenia.

A good friend of mine, Jake, recently visited Orlando raving about Adobe’s Flex, and how it was going to make Flash development for people who think in HTML and Object-Oriented programming much simpler and faster. I went looking into Flex and discovered OpenLaszlo. Laszlo used to be a Flash-only framework, but it can now publish DHTML just as easily, and with a few added bonuses you don’t get with Flash, like including an iFrame.

After watching the OpenLaszlo 4 Programming Tutorial Screencast, I’m convinced that Laszlo is more capable than Flex, and there is less proprietary code to learn since you use Javascript instead of Actionscript. It’s all ECMA, XML and xPath, so I guess at some point it becomes 6 vs. a half dozen, but I will mention one small caveat: iPhone compatible. Oh yes, I’ve seen the first iPhone app in Laszlo, and it’s pretty and touch-screen happy. (I think it goes without saying that if it works on iPhone, it can work with all major browsers)

Am I raving? I’m not allowed to rave, because I haven’t tried both systems, but from where I’m sitting this is another situation where an equal amount of training and no expensive development tools are going to get your job done in the same amount of time, and end up being more flexible, easily extended and powerful. You can convince any boss of that if you’ve got all the information.

Under the hood from Wikipedia:

Laszlo applications can be deployed as traditional Java servlets, which are compiled and returned to the browser dynamically. This method requires that the web server be running the OpenLaszlo server.

Alternatively, Laszlo applications can be compiled from LZX into a binary SWF file, and loaded statically into an existing web page. This method is known as SOLO deployment. Applications deployed in the manner lack some functionality of servlet-contained files, such as the ability to consume SOAP web services and XML remote procedure calls.

Hear that? Static! One score for Flex is the ability to run as a desktop app (using AIR/Apollo), but that requires a download, and that’s a no-no on the internet.

Do you know Pandora uses Laszlo? That’s a pretty app, and yes it runs in Flash, but I bet it doesn’t have to. The Behr ColorSmart app is pretty nice too, and no hand-keyframed Flash? Love it. Wikipedia says Yahoo!, Earthlink and the Internet Archive are known to use Laszlo as well. I like those websites too.

Last but not least, it’s open source! Published under IBM’s Common Public License, which is a less-lawsuit inspiring type of GPL. Flex is supposed to be published under the Mozilla licensing, but that version is still in beta. Laszlo has been open source for 3 years now. Eat it, Adobe. I’m not giving you guys another penny.

I’ll be very proud to integrate some Laszlo apps into Petentials, which is built entirely on open source software - Drupal, PHP, MySQL, Apache and Linux.

Why the iPhone makes us happy July 17, 2007

Posted by Ryan in : Tech, Podcasts, Video, Trends, Design, podtech, interface , add a comment

This is the kind of thing I think one would study if they attended FIEA. Video by Robert Scoble of PodTech