I just spent 5 days in San Jose. One of the managing partners , John and I went to DevLearn08. It’s a conference put on by The eLearning Guild focused on development topics and emerging technology in eLearning.
(more…)

We have been heads down at work. We have 3 interactive exhibits set to go live this month. One at a corporate headquarters that uses Red5 for multiuser sync, motion detection and high definition video and moton graphics on 3 52″ LCDs. One that broadcasts live data streams detailing savings gained from a grey water reclimation system and overlays the infographics on high-definition video on a huge 1080p 120Hz display. The other project is a pair of kiosks set to be installed in Bermuda (no, I don’t get to go there to install ).Once we have some photos/videos of the installs, I’ll try and post them.

Beyond that, we are exiting a first round of usability testing on a great new elearning development application we are building at doctumlearning.com. We used Silverback for our testing. It’s a really really cool tool for Macs that records a screencast and a video feed from the iSight to create a record of the test. Hard to argue with video evidence, after all. The app is coming along strong, feature complete and ready to build some training. We’ve put together a great interface and the Flash based content it outputs is pretty dang nice.

Related to that, I will be attending DevLearn ‘08 next week. You can catch up with my twittering and possibly blogging from there. Tim O’Reilly is giving the keynote. Dan Roam is going to be there speaking, as is Dr. John Medina. Should be really really cool. We’ll be demoing at demofest, showing of the work we did with the International Society of Arboriculture that uses the Doctum platform. Psyched!

There is a one day Adobe elearning summit going on there, too, I’m definitely hitting that one. Are you planning on attending? Let me know! I’m interested in meeting up with other developers out there, so track me down.

If you twitter, be sure to check out the dl08 hashtag on twitter search and the devlearn08 one as well. This blog post here has a list of fellow twitterers headed to devLearn. Check it out.

Prior to working at The Iona Group and spending time freelancing doing flash game development and other assorted web design tomfoolery, I designed websties for Rollingstone, Downbeat, TheSource, Tunes.com and Emusic. It was a great gig. Lots of fun. Fun people, great music, awesome subject matter. Then the dotcom bomb hit. I was laid off along with virtually everyone in my Chicago office. That said, I (was) am a huge music fan. Love the feel of a new set of tracks. Love buying tunes, love downloading them love the feel of a new, well packaged disc when I get one. I have a iTunes library that would span a couple iPod classics. I am a completist. I have all of Nine Inch Nails stuff. Suicidal Tendencies. Pavement. Jon Spencer Blues Explosion. Poster Children. Guided By Voices (I’m not sure if I actually have all of this… does anyone?) TRS-80, Muse, Radiohead. I also love when a new music site launches. Pitchfork, Pandora, Last.fm, all of em. I like music blogs (music for robots ftw) and love to watch videos online.

You get the picture. I love music.
(more…)

Sorry for not posting more recently… I’ve been buried!

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

In my presentation last week at CD2, I mentioned I would provide a list of the resources I recommend using as reference in designing application interfaces. I thought I might get a chance to blog that list this past weekend, but I was a tad busy, designing interfaces for an RIA, naturally. We at Iona have a great app coming soon that uses CakePHP, AJAX, Flex and a whole lot of experience developing superior elearning solutions in order to create a fantastic RIA. That’s pretty much occupying my time right now, but I needed to get this list together.

That said, when I need to sit down in front of my diagramming tool of choice, OmniGraffle, I like to have some references to tap in order to ensure I am making the right choices. I might not use all of these every time, but I certainly do refer to them once and again. I hope you can find a couple of these useful in your work, too.

1. Designing Interfaces - Jennifer Tidwell: A newer book and one that many may not have in their library yet. This book is currently in use in my Mashups and RIAs class, and I can’t recommend it strongly enough. It is a virtual library of great UI analysis. Pretty much every modern UI pattern in play today is dissected and explained when and why it works. A must have.
2. The Visual Display of Quantitative Information -  Edward Tufte: Not really UI focused, but a necessary academic resource for all UI designers to have read. It’s no nonsense approach to data display and intolerance for bad design will not steer you wrong. A bit heady at times, this beautifully printed book is one you can open and read a little bit at a time and keep for years. The information in here is not going out of style anytime soon. I really got a lot out of reading each of the Tufte books, but this is his hallmark title, IMHO.
3. Information Dashboard Design: The Effective Visual Communication of Data - Stephen Few: Lots of pictures and a short book. This title is all about explaining quick and easy data display. Charts, graphs, widgets, etc. Not heavy on interactions, but a good resource for effective infographics.
4. Design of Everday Things - Donald Norman: This book should have you appreciating the nuances in the design of products you use all of the time. Hopefully some of that thought process will rub off on you when create the GUI you’re about to slave on.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition -Stephen Krug: I’m sure most of you have read this. It’s a very common sense approach to basic ideas behind web usability and may be one of the best known books on the subject. For those of you who haven’t picked it up yet, please do so. It may seem sort of obivious to many advanced designers out there, so if you are very experienced with topics like user testing, etc, you can probably skip this one.
6. The Art and Science of CSS -by Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, David Johnson : A simple book, no doubt, but this one has some real nuggets of CSS genius in it in regards to styling tables and form widgets. Some nice subtle effects get pulled off in here, so this one is shared with my students very often. Dates, lists, calendars, all kinds of things that can be really really boring screen elements get a bit of polish here. Nice touches all around.
7. Getting Real - 37 Signals: Not really about graphical user interface design at all, but it should definitely help you make some hard choices in your application’s functional design. Think simple, release early, release often. Build half a product, not a half ass product. On and on. Indespensable.
8. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies) - Jeff Johnson: This is a tome. Well over 500 pages. This teaches by illustrating major gaffes in UI design. It’s not an overly entertaining book, it’s not meant to be a graphic novel but rather a text book. Many of the apps detailed in here are showing there age, but I believe there is now an updated “2.0″ of this book. I haven’t reviewed that version, though.
9. Human Interface Guidelines - Various: Be it Apple, Sun, IBM, Microsoft or Adobe… all of your favorite dev/design centers have great topics for making informed UI design choices for your audiences. Don’t overlook them just because they are obvious. They get updated often and are pretty much always worth spinning through when starting a new project.
10. Creating Visual Experiences with Flex 3.0 (Developer’s Library) - Juan Sanchez & Andy McIntosh: Not technically available in stores yet, but a great great resource for understanding the powerful design tools in Adobe Flex. I was granted an early copy for review and it was a very satisfying read. RIA design with Flex is as much an art as it is a science, so dig in here. This book is really well laid out and has tons of great images.

So, there you have… some guides I find useful… Of course, I am always looking for new books and sites to add to my collection, so, let me know, what books are you using to help you with app UI design?

Much has been written about the recent announcement of Google and Adobe working together to make Flash content indexed and searchable. Much written, with no real concrete answers. Lots of tests (A very good one done by Peter Elst), a contest held by Ryan Stewart (Flexmagically Searchable, FTW!), and some well formed opinions from SurviveStyle and YourSeoPlan. John Dowdell has also tackled the topic via comments on several sites as well as a post on his site.

While the idea of having rich media crawlable by a juggernaut like Google is indeed exciting, I’m not holding my breath waiting for the results to materialize. With SWFObject and the other myriad Javascript embed methods, the use of XML and AMF to retrieve dynamic data and all the other things that are going on in a modern Flash/Flex RIA, a panacea seems near impossible to imagine after over a decade of less than stellar results in this area.

It sounds a tad overdramatic, and I know this. But let’s just reflect for a moment on how it’s come to this. It’s a matter of purpose and function of the media you are creating. When designing an experience site or CMS powered brouchureware site you obviously are not making the same sorts of design decisions you might be making in a state/screen based RIA. They are just two completely different beasts. These two basic groups of sites (yes, I’m oversimplifying) – Experience/Brouchware sites and RIA havem completely different needs. Because of this, the tools and techniques you use to build them are most likely going to be different. Standard sites are built for searchability and accessiblity by the widest range of users, because making sure the sites are found is of paramount importance! RIAs often have a narrower audience and are built to replace a desktop app or minimize clicks over a basic web application… making the tasks at hand as easy as possible is the key here.

You can kind of see where this is going… I very rarely would recommend using a rich media tool to build an average B2C or B2B site that doesn’t need rich media functionality. Rolling your companies marketing message up in a binary blob that requires a plugin, or burying it in a heap of JavaScript seems like commercial suicide. Poor indexing, potentially poorer performance in comparison with Plain Old HTML, incompatibility with plugin versions, market penetration, the mobile users, etc, etc… For this reason, unless you are a major player in your industry who has little need for keyword density simply because of your domain name and real world brandname recognition (think Nike, Apple, Disney, etc), you should think twice about using a tool like Flash or Silverlight to build your public website. If you get a site from me, and you fall into the average company size and profile, you are probably going to get a site designed with standards in mind. Something that degrades gracefully, something that uses semantic markup. You get the idea. Flash might be sprinkled throughout for visualizations or other enhancements, but the bulk of the site is going to be pretty much straightforward best practices based design.

On the other hand, often an RIA doesn’t necessarily require indexing at all. Indexing interior views of a mail app or information dashboard doesn’t seem logical. Strange question arise when you think about this, too.. security, landing pages, transitions, breadcrumbs, etc. For cases where an RIA does need to be indexed, maybe a SWFAddress method of enabling deep linking might be adequate to serve as signposts. For Flash based experience sites, a Google sitemap and some very clever use of WebServices feeding SWFObject/SWFaddress enabled Flash and AJAX may also work for you (Check out the recently relaunched BobDylan.com, built by some friends of mine to see the results of this. A nod to Brian and Steve on that one. Great work indeed.)

In conclusion, I’m optimistic but not overly so for the future of indexed rich media. Without a very detailed spec and best practices documentation, tests like Peter’s and contests like Ryan’s are going to be about the extent of success in this arena for the immediate time frame. Reading the comments at Peter’s post kinda confirms this for me. Lots of confusion and lack of knowledge about how this all interfaces with typical search engine directives like robots.txt etc… It’s all a very new area, so I’m thinking things will become more apparent soon.

This seems like a recurring topic for me. The lament of the modern Flash Designer/Developer. The quandary is a deep one with no easy answer. Has Adobe’s near completion of Macromedia’s vision for Flash as a modern, powerful virtual machine robust enough for application development left the designer in the dust? Where is the missing wrench in the Flash designer’s toolbox?

(more…)

Build, steal, buy, or borrow… These would be the four basic ways you can make your applications a reality, pretty much regardless of the language you develop in. Flash and Flex development is no different in this regard.

Building will get you what you want, provided you have the skills to do it, but could take a load of time. Time obviously equals money. Stealing source code is of course unethical and I would never endorse it, for the obvious immediate moral implications. But furthermore, it is simply not a commercial option when developing work for clients due to long term legal issues. Buying code or components is often a great way to rapidly make progress that would otherwise take a long time to build. Borrowing code or the closest parallel I could think of, using open or free libraries, components, frameworks or APIs, is often the smartest thing to do when building an application of scale or one that requires a short timeline to deployment. (more…)

The elephant in the room for all RIA development teams is the lack of a proper process/workflow to go from idea to sketch/wireframe to prototype/alpha. We all know it. How do you start? In a tool like Visio or OmniGraffle, doing wireframes? In Photoshop doing straight up mockups? In HTML/CSS building prototypes? Building a rough in Flex or VisualStudio right away? All of these tools or steps have advantages and pitfalls. Let’s tackle a few of them here.

OmniGraffle and Visio are great because they are fast and don’t necessarily tie you to a specific technology. They can offer a lot of flexibility in styles, too, through the use of downloadable templates and stencils. I visit GraffleTopia.com regularly to see what’s new for my tool of choice, OmniGraffle. The wireframe shapes tend to be vague enough that clients, with a little coaching, won’t get too hung up on the details, color, typography, etc. You can just focus on functional areas and UI design patterns. However, these tools do have a significant disadvantage in that they don’t produce any assets you will be able to actually use in your finished product. No graphics can be prepped out of them for use in your UI. No markup can be backwards engineered out of them to help you with your app’s layout or views. The widgets in your layout are for looking only, not touching. These documents are not typically interactive when viewed onscreen. One thing that’s great about them though, is that they tend to print very well, so if paper prototyping is part of your desired process, you’re covered here. I typically count on a wireframe process step taking a handful of hours per screen before all approvals and required buy-in for the wireframe is acheived. On a big project, this can be well worth it. On a small project you might just be burning too many hours.

Jumping straight from cocktail napkin to Photoshop/Illustrator mockup is a path taken by some, and if it works for you, great. I have found it not so successful for me in the past, so we have all but abandoned this sort of workflow. Perhaps this will change once Adobe releases Thermo, making porting from design to MXML a more fluid/roundtrip type of experience. This would cut down on what I see as wasted hours on the “Photoshop Mockup Death Spiral” – pushing pixels in a round of revisions after a round of revisions. Reading Getting Real pretty much cured me of this. See the following:

Writing the app right away in HTML/CSS may be an option for you. If you have strength in the two technologies and can employ a JS framework like JQuery you may just be able to crank out something pretty quickly that looks good. However, you are indeed showing your hand, if you will. You have chosen a delivery technology. You have delivered what could be seen by the client as something close to being done. You may be limiting yourself to common UI design patterns as dictated by what’s available in HTML/CSS. All that said, you have produced something that can be used by the back end developer or integrator to produce something real. You are a bit further down that road. That said, not many small teams may have a person with the skills to produce something using standards that looks good, plays well with your middleware and doesn’t take weeks to produce. 37signals wrote about this workflow last week, but I’m not sure many houses can execute at this level.

That leads us to building a prototype in a dedicated IDE. Since I like the Flash platform, and our company is pretty comfortable developing in it, this means Flex Builder for me. The component based approach and rapid results make this almost like a living wireframe. I have had pitch meetings where, a day or two before the meeting, I’m put on the spot to mock something up. This would have caused an aneurysm for me a couple years ago as a I stressed over putting together a Photoshop mockup, but now, with MXML and the CSS support, with just a tiny bit of research, I can whip together a theme that emulates the company’s branding and covers all the needed bases for displaying a hypothetical user flow. Click-through mockups are indeed a reality. When put into a more relaxed or planned process, you can actually use states and transitions to begin the XD during the earliest stages of a design. This has some drawbacks. Ted Patrick mentions it in his post, Managing UI Development Expectations with Flex .By giving a client such a polished refined UI so early in the process you are again, tipping your hand to the client. You don’t want to give up all of your goodies too early, now do you? He offers a pretty nice “plain” skin for use in your projects to help turn down the gloss. Additionally, if you start down this path, obviously, you have committed yourself to producing a Flash platform deliverable, so it may not work for everyone.

It’s obvious there is a hole here. Microsoft’s Expression Blend attempts to fill it, and it’s a valiant attempt for a new product. Google is investigating this space for the AppEngine. Adobe has a tool coming out that everyone is anxious to get their hands on, Thermo. Lots of people are writing about this perceived lack of toolset or process in RIA/Site development. A List Apart blogged it this week, focusing on the production of HTML/CSS. I highly recommend reading the comments section there. Some great tools and suggestions to check out. Delores Joya Moore blogged it. She mentions how she is currently employing Flex as a tool to produce UI prototypes that eventually end up being used as the views for a properly architectured RIA. Not a bad thing to try out, IMHO.

How about you? How is your team overcoming this hurdle right now? Any tools, plugins or processes that are working for you? I’m interested in learning more from other design/development teams about this topic.

Many tech pundits and non developers are all a-Twitter over the article over at RoughlyDrafted. It’s understandable. At a 10,000 foot view, it’s another player in the RIA marketplace. Cool! However, let’s not all start high five-ing ourselves just yet. A pundit’s view is not shard by clients and developers. Of course, when a company like Apple, Adobe or Microsoft puts its’ weight behind a technology or development platform, it’s worthwhile investigating. (more…)