The Intermission

I just finished my first thorough usage of Scrybe, which is a new approach to online calendar tools.

It’s interesting. Strange… but interesting.

If you haven’t already seen it already, I recommend starting with this introductory video they put on YouTube. If you’re like me, it will pique your interest, and then raise some questions. I’ll try to answer some of those questions.

[youtube 1u3ekzwnYxw The Scrybe demo video]

What kind of technology is that? AJAX?
About 70% of my initial fascination with Scrybe came from my hope that it was built with AJAX, or some other basically-open technology. But in reality, it’s just Flash. Yes, it’s one big Flash application. And, honestly, that bores me a little bit. To be fair, it’s an extremely well designed and coded Flash application. It feels good to use — smooth animations, short loading times, modern UI conventions. It’s also database-driven, so I’m not quite so worried about my data being locked up inside a proprietary application. But it also has all the limitations that come with a Flash website.

Will it import my existing calendar?
Scrybe imports from two formats: iCalendar and CSV. The good news is that iCalendar covers almost all your bases. If you use Outlook, Google Calendar, Groupwise, or Apple’s iCal, then you’re in luck. All of those, and many others, can export to iCalendar format. For my test, I imported my Google Calendar which has next to nothing on it. All my events came through just fine, but I wasn’t able to test meeting invitations.

The interface looks great on that demo. Is it really that good?
Demos never tell the whole story. In a video, the demo guy always knows right where to click and most features are already set up to make a good show. My experience, however, was still pretty good. Their UI claim to fame is this “keeping things in context” approach. So when you move from the year view to the month view, the UI zooms in to that month. And when you click a day, that day expands within the month view. And when you click on an hour within a day, you zoom in to the details of that day. It’s nice eye candy, but I’m not sure how much benefit it adds. I use Outlook all the time at work, and I never really felt a loss of context. Sure, Outlook doesn’t zoom and pan like Scrybe does, but it’s still pretty clear what’s going on. I consider this more of an eye candy effect than a useful UI change. But it may help some people to understand their calendars better.

There’s also a few scattered artifacts of bad or incomplete design in their UI. Take a look at this screen shot:

What do you suppose that little carrot in the bottom right corner does? Any guesses? No?
Clicking it reveals a drop-down list of miscellaneous extra functionality. Probably a bunch of features they decided they want, but didn’t know where to put.

Honestly, the calendar UI is quite good and innovative — a tough combination to achieve. The ThoughtPad feature, on the other hand, was not as impressive. More on that later.

How does the Offline Access feature work?
I’m not totally sure. My guess that Scrybe keeps a copy of your data on a server somewhere, and then regularly converts the database content into CSV format (or something similar), and then saves that in your browser cache. Maybe it puts all your calendar data into a cookie. I could do some tests to find out if anyone is really curious. At any rate, the feature works exactly as advertised, and it’s pretty cool. Well, except for in Safari. I couldn’t find a “Work Offline” function in Safari, so when I tried to log in without a connection, it just tried endlessly to access their server.

Thought Pad looks awesome in the demo. What’s your problem with it?
Scrybe treats the Thought Pad almost like an entirely different application, which is probably good. But the Thought Pad UI is very strange. When you click into the Thought Pad tool, you’re presented with a sort of inline tutorial, with arrows pointing to the various parts of the UI and explaining what they are. All UI designers know that kind of thing is almost always a tacit recognition that the design doesn’t make sense. In this case, it’s definitely true.

The inline tutorial helped me add a neat little link (they call it the “Scrybe Bookmarklet”) that, supposedly, lets you paste web content into your Thought Pad. You’re supposed to add this link to the bookmarks bar in your browser. When you select some text in a web page, you then click on the “bookmarklet”, and somehow the content gets into your Thought Pad. Sounds pretty neat, but it definitely didn’t work for me. I tried it in Safari and Firefox, and it didn’t work in either. Probably a known bug in the beta.

In my attempts to use the Thought Pad, I wasn’t able to create anything as rich and pretty looking at the Thought Pad in the demo. When you edit a note in the Thought Pad, you have some basic text editing tools, and some tools for inserting links, pictures, and videos. Only the text editing tools worked when I tried it.

The Thought Pad uses a unique paradigm for creating and categorizing the notes you create. I really didn’t like it or understand it at first, but I finally figured it out. It makes sense, but I just have to ask “why?”. What does this gain over a traditional create/categorize approach? It seems like a steep learning curve for no particular reason.

I wish I used Google Notebook to know how it compares.

How do the printed calendars look?
I printed my calendar in a couple of the formats available. The feature works as advertised, and it’s exactly as cool as having a printout of your calendar sounds like it would be. Of course, those people who would rather sync their calendar to their PDA will be grossly unsatisfied.

Any final thoughts?
It’s neat, but I don’t foresee it becoming broadly popular. Maybe that’s because, as a limited beta, it’s missing all the social networking features it needs. Why can’t I share my calendar with my wife? Why can’t I publish my calendar on my web site?

It’s also missing some critical functions to compete with Outlook in the business user market. I don’t know of any way for a Flash application to sync with a PDA, but then again I don’t know too much about Adobe Flex or Adobe Air or the other new advances coming soon.

But for right now, here’s the market for regular Scrybe users: very web-savvy, probably young, interested in keeping a calendar, and no PDA or iPod that they want to keep their calendar on. My gut says that’s a small market. But for those of you who are in it, be sure to check out Scrybe!

Recently, I realized that I have been neglecting to use a number of invitations to private beta sites, including:

Hulu - A joint venture between NBC and FOX to stream TV episodes online

BAAGZ - A unique combination of social networking and semantic search

Sandy - An electronic personal assistant that understands emails you send to her and sends you reminders (among other things)

Scrybe - An extremely Web 2.0 approach to calendars, but with unique features like the ability to view your calendar while offline or print a pocket calendar

So I’m making a point to try these sites and write reviews here. Today, I’m reviewing Hulu…

Initially, I’m pretty impressed with Hulu. It seems like a solid user experience paired with a nice technology for streaming video. It’s also nice to have a somewhat wide variety of videos at one site (unlike the NBC, FOX, ABC, and other video streaming sites, which are generally limited to a single network).

First, let’s examine the user experience.
You can browse videos through three methods:

• Most popular
• Divided by network/studio
• Alphabetical listing

This seems like a pretty reasonable set of options to me.

Once you select a show, you’ll see an array of large thumbnails with episode name, number, and length. Once you choose an episode, there’s a few seconds of buffering, then a 5 second ad, and then the episode begins.

The default video size is reasonable. The video controls are visible briefly, and then they hide on the sides. When you mouse over the video, you’ll see video controls on the bottom, and a variety of other controls on the left and right. You can’t scrub through the video, but you do have pretty fine control over where you jump to, and there’s only a moment of buffering before the video starts again. (For reference, I have a relatively slow broadband connection. Your mileage may vary.)

The controls on the left include Share, Embed, Details, and Feedback. Of these, Share and Embed are definitely the most interesting. Share lets you send a link to the video to a friend. But before you send the email, you can drag a couple of sliders to create a custom snippet. When your friend clicks through the email to watch the video, they’ll start out at the beginning of the snippet you created (though the whole episode will be available).

Similarly, you can embed an whole or part episode using custom snippets. I’ve embedded a video snippet below. Notice how, after the snippet plays, you can watch any or all of the episode.

Important Note: The quality of these embedded videos is much worse than the quality when you watch directly on Hulu. Too bad, because it makes them look lame.

The tools on the right side include Full Screen, Pop Out, Lower Lights, and Rate.
Full Screen provides a truly full screen experience, meaning the video extends outside your browser window to take up the entire screen.
Pop Out puts the video in a new window (although you’re limited to a small video size in that window).
Lower Lights puts a semi-transparent gray overlay over the rest of the web page, giving the appearance that it has been dimmed. (This could be much better if it was more like the Divx feature that more literally dims the screen around your video, and which is not limited to the browser window.)
Rate allows you to give the video a rating between 1 and 5 stars.

Beneath the video, and beneath the other episode thumbnails, and then beneath the related video thumbnails, they have tucked away user reviews. This is just a standard place for users to rant about what they like or don’t like. It’s sort of an expected feature for video sites, even though I feel like it ads very little value.

I did notice a couple of problems that indicate to me why it’s still in beta:

• The site is pretty good about picking up a video where you left off. Meaning, if you’re half way through Video 1, and you decide to click on a different video, but then go back to Video 1, it will pick up right where you left off. Unfortunately, it doesn’t work under certain circumstances.
• The custom video snippet feature I mentioned earlier is a little buggy. If you create multiple snippets from the same video, it doesn’t always update the <embed> code with the correct time codes.
• There’s a bit of a usability problem with the video navigation. When the video progress bar is minimized, it spans the entire width of the video, but when it’s fully visible, it only takes up about half the width of the video. So if you’re trying to navigate to a spot in the video when the bar is minimized, but then move your mouse one pixel too high, suddenly your mouse is on the mute button instead of the progress bar. It’s tough to explain, but it gets annoying quickly.

Overall, though, I definitely recommend that you sign up for the beta. It strikes me as much more well conceived than either NBC’s or FOX’s TV streaming sites. For sure, Hulu plays to a different audience than iTunes. If you like to own your TV episodes, this won’t help you. But if you’re just looking for a good streaming experience, Hulu is worth looking at.

(more…)

I mentioned Adobe Thermo in an earlier post, but I recently found some more information that I thought was worth sharing. Peter Elst was able to snag a video of the Thermo demo at Adobe MAX in Chicago earlier this month. It’s just as awesome as you would hope!

If, as a designer, you’ve ever looked at a mockup you created and said to yourself, “I wish there was an easy way to make this just work” then Adobe Thermo is for you. After seeing how you wire together the parts of a mockup, it looks to be about as easy as you can make it. Well, it’s as easy as I can imagine it, which I think is saying something.

As Edna Mode from The Incredibles would say, “Words are useless, darling! Gobble gobble gobble gobble! There’s too much of it, darling, too much!”

[youtube ELM7rPiQyQY]

So I recommend you just watch the demo here. Be forewarned, the picture is really grainy. But if you’re interested in the next generation of rich internet applications, it’s a must see!

My only lingering question is about the fact that Thermo builds Flex applications, and I’m not sure how I feel about Flex. First, it’s an essentially proprietary format, like a Flash application. Even though Adobe has gone to great lengths to make Flex open-ish (e.g. announcing plans to make the Flex SDK open source), I would still prefer to build something that doesn’t require a special plugin. That’s strike one. Second, I’m not sure how accessible Flex applications are. Right now, the Flash plugin isn’t very friendly with screen readers and other assistive technology. That’s a potential strike two.

But, on the other hand, even if both of those turn out to be real problems, Thermo would still be a useful tool for communicating designs internally and to clients. Also, Flex is tied to another Adobe technology called Air, which promises to make Flex web applications into desktop applications that can run on Mac and Windows. So even if I can’t feel good about building Flex applications for the Web, it might still be a good option for desktop applications.

Bottom line: Keep an eye on this technology. I’m hoping it turns out to be great.

I have a habit on this blog of complaining about something, and then quickly finding out that problem has already been solved (perfect example). Well, I say that’s good! Go on, World, give me less to complain about!

In this case, I recently complained about the state of rich prototyping tools, but then today I heard about new beta software from Adobe called Thermo. I’m fully expecting to love Thermo. Adobe’s article on it is extremely short winded, but it sounds very promising. In essence, it lets you draw a user interface (which I love doing in OmniGraffle and Visio) and then wire it up to act like a real website, without writing code. But the code it generates for you is actually usable! A developer can take the UI you’ve mocked up and turn it into a working Flex website.

If Thermo works as I understand it, then it solves all my major complaints about prototyping tools. I still get to draw my UIs, plus I can add interactivity without fiddling with code, plus I can turn my prototype into a working solution.

Of course, I’ll reserve final judgment for when I get to use it. For example, I’m guessing the rich interactions I have to choose from will be somewhat limited, especially at first. I could see Thermo providing a drag-and-drop interaction, but maybe not something more exotic, like an AJAX window resizing interaction. Version 1 will probably still require some hand coding to get just what you want. Nonetheless, I’m excited! Adobe, I’m ready to be a beta tester!

For a little more information, I also found an article at MacWorld magazine.

Apple is already well known for it’s original Macintosh Human Interface Guidelines (HIG), which have been deprecated by the new Apple Human Interface Guidelines, tailored for Mac OS X.

Now, Apple has introduced a HIG for the iPhone. The document is primarily about making web applications that look good and work well on the iPhone. I skimmed through it, and I don’t see too much that’s ground breaking. Basically, if you’re an iPhone web designer with much design sense, the HIG will save you a few hours of trial and error. Still, it’s cool that Apple is providing one. It suggests they’re taking iPhone development seriously at a time when they’re clearly cracking down on unapproved 3rd party iPhone applications.

One interesting thing that jumped out at me in the iPhone HIG is this picture of a “Multiple select element”.

I haven’t used the iPhone much, but I’m interpreting this to be something like a drop-down list, but with the ability to select multiple options in the list. If this convention is something we can apply to normal, non-iPhone web pages, then it would be a huge space saver in some instances. Can anyone who has used this widget before comment on its usefulness?

The multiple select element is described in the iPhone HIG here:
iPhone HIG > Metrics, Layout Guidelines, and Tips > Be Aware of Default Control Styles

As a side note, for those interested in iPhone development, you should check out the Interactive Gestures Pattern Library, (the brainchild of Dan Saffer). It’s a wiki designed to collect touch interface design patterns, such as those used in the iPhone. The goal is to create a set of touch interface best practices, so as touch interfaces take off, all our future devices work similarly.

I’ve been thinking about picking up some additional skills, specifically around rich prototyping. So I’ve done a little reading, and I have a short list of options for creating Web 2.0 interactions in prototypes. Fair warning up front… I have only questions about these tools, no answers. If you have answers, please share!

First, there’s a new resource called Protoscript that claims it can help me easily add AJAX interactions to my websites. It looks fairly promising, but my immediate question is: why is this only for prototyping? If I’m adding rich interactions to my website, why can’t I go live using the same scripts?

From what I can tell, Protoscript isn’t substantially different from script.aculo.us, except script.aculo.us looks to be better documented.

But my feeling is that, in terms of time commitment, diving into all those javascripts is only one step down from learning Ruby on Rails.

I’ll confess to something up front… I can code, but I don’t like to. There’s nothing worse, for me, than trying to express an interaction I want, but being unable to because I can’t get some dumb script to work. That’s like asking a graphic designer to figure out how to get CSS floats to work at the same time as he’s coming up with a design concept. You don’t want to be struggling with a language that has its own quirks while you’re still working out the ideas in your head. So I know that the instant I have trouble getting a technology to work, I’ll go back to my trusty old copy of Visio, or OmniGraffle, or a paper and pencil.

This leads me to a product from Adobe called the Spry framework. Like Protoscript and script.aculo.us, it’s a javascript library that you can plug into existing web pages. However, it sounds like Adobe has gone to great lengths to simplify the process. They claim that using Spry is akin to using HTML, so you shouldn’t have to learn a lot of new tags. This sounds promising, but I’m still expecting something better. I’m expecting deep integration with Dreamweaver, so I can just click a few buttons and set a few options to add rich interactions to my web pages. When Adobe builds that, I’ll be on board.

In the mean time, I’ll probably stick with low fidelity methods of showing rich interactions (e.g. sketches, verbal descriptions, and a little hand waving). I wish I could find a link to a PDF I read recently. I’m almost positive the article was from Adaptive Path, and specifically from Jesse James Garrett. The document describes three non-rich methods for expressing rich interactions. My favorite of the three methods was just a sequence of static wireframes. So, for example, if you’re showing drag-and-drop behavior, you would have three frames — one for the object being grabbed, one to show it being dragged, and one to show the object dropped. I can wireframe that up in a minute, rather than taking an hour to fiddle with scripts.

But, admittedly, non-rich prototypes of rich applications fall a little flat when it comes time to demo. Which is why I’m still on the lookout for a tool that will fit my needs. If Adobe doesn’t rush to fill this need with Dreamweaver, I’m sure Microsoft will with Expression Web. (Hint, hint, Adobe!)

A friend who recently read my post about the Nokia iPhone knockoff referred me to another blog where Gong Szeto explains why he likes knockoffs. Gong is talking primarily about the fashion industry, but most of his points could apply to any industry. Basically, he argues that copying is good for innovation because it forces designers to keep innovating. Also, he says it encourages what I will call “deep innovation” — inventing new fabrics, new distribution methods, new categories of clothing.

I can’t disagree with much of what Gong says, but I still disagree with his ultimate conclusion. Although its true that copy cats force established companies to keep innovating, it still feels very wrong to think that the company who spends millions of dollars in R&D for a new product can ultimately lose to a company who just clones that innovation. Of course the copy cat can sell their product for less… they didn’t have to do any of the hard thinking! And by buying from the copy cat, you’re rewarding their laziness.

Think of it this way… you either believe that companies who innovate should be rewarded with success, or you believe that companies who innovate should ultimately be killed by those who are good at copying. Personally, I’m willing to pay a little more to reward a company for innovating, and to encourage them to keep going. Though I’m willing to admit that probably puts me in the minority.

I don’t have the knowledge to do a thorough history lesson on this subject, but I know that people have made basically this same complaint against Microsoft for years. Microsoft finds something successful (e.g. graphical user interfaces, desktop publishing tools, web browsers) and creates a cheap copy. The cheap copy undercuts their competition and forces them out of the market. Then that market stagnates.

Although it sounds good and Darwinian to say that the true innovators will always survive, that’s not really true if they can’t make money from their innovations. But I will agree with Gong that I don’t care for those protracted copyright battles. Companies shouldn’t need the government to protect their intellectual property. Consumers should just buy goods from the companies they want to support.

Did you see this article on Engadget about an upcoming Nokia phone that is shockingly similar to the iPhone? It’s accompanied by this quote from Anssi Vanjoki, Nokia’s Executive VP & General Manager of Multimedia: “If there is something good in the world then we copy with pride.”

I could almost believe that this whole story, and the crummy demo video, are fakes designed to embarrass Nokia. In my mind, this lowers the otherwise respectable Nokia to the same level as Chinese counterfeiters who have already released the miniOne, a rip-off of the iPhone. That last article includes an especially interesting story about Samsung, who tracked down a Chinese group who was counterfeiting their products. Samsung was ultimately impressed enough by their operation that they offered them jobs. The counterfeiters turned them down. That says something about the money to be made in counterfeits and the low risk of serious reprisals from the Chinese government.

In other news, I’m looking forward to the upcoming Apple media event, which will likely include the introduction of new iPods.