Patrick Hansen.com

I’m a little late on blogging about the release of Discovery Earth Live. It is an online application built in Flex which allows user to cross reference earth related data and information upon an interactive 3D representation of the Earth.

Click here to visit Discovery Earth Live

I was the lead production designer on the project and at first, was heading up extending the design comps for skinning. After some major design changes, I had to begin redesigning the whole layout. The change came late into the project and it was to reduce the width by 120px. Which may not sound like a lot to everyone, but in the web/software industry, that is huge!

This change did not simply call for “squishing” the app and squeezing the design into a smaller width. Some instances this would work, but not in this case. We had a very unique experience designed, especially with the use of a 3D globe, which could not be simply squished. This would’ve have really made the experience and design crumble.

Instead of doing that, we opted for an overhaul and redesign. I was actually at Adobe MAX in Chicago during the time. IMyself and a couple of the development team members were out there, and we started working on it from the convention center and hotel.

I maintained the theme for the most part, that our Concept designers had already put together and Discovery already approved. Since we did have to reduce quite a bit, I felt that using curved modules on the right and left would not only look unique, but it would serve some functionality with the 3D earth by allowing it to breathe a little more. This gave the application a little more dimension and variation from typical straight edged components and modules (which does not work for every app).

We also had to rework how the navigation would behave and be laid out. Initially, we had a left column browser using a custom tree-like accordion. This worked well before, but not in the new design. We chose to place it at the bottom in a 3 column waterfall navigation. We felt this would allow the user to have a good view of the items and children. This also gave them access to the controls for each layer item.

Some other minor features were the latitude and longitude coordinates. Brad Umbaugh was the primary dev on the earth, and he not only put the earth together with Away 3D, but was able to get those calculations for the lat/long coordinates.

The application still looked pretty tight still. So although the user does require the details and info, the main focus of the application is the Earth. I wanted to give them just that, so we came up with the “space” view, where you can push away all of the other panels, modules and navigation, and just focus on the Earth. It is a mocked up space environment in the background, but it does allow the user to get the feeling that they are viewing the earth in space.

There is also a small Widget you can create and embed into your own personal web page, blog, social network site, etc.

RJ Owen was another developer on the team. He was very helpful in putting all of this together and working closely with design to ensure everything was developed as it was intended. Kevin Skrenes was another big contributor, with development of some of the custom components and working with skinning.

This was a great project and case study for me. One major thing that came out of this was how extensible and agile Flex is for development and design. The application was 3/4 developed based on the original design, and we were able to redesign the interface, experience and add some functionality within 2 weeks! The client was happy and the people seem to enjoy it.

It has won a couple awards since the release.

There are a lot of acronyms and abbreviations out in the technology industry.

Someone recently asked me what are the primary differences between UX, UI, and XD? Well UX and XD are very similar I would say. But wait, what the heck do those mean anyways?

UX is also known as User Experience and XD is known as Experience Design. They usually fall hand in hand, it is more based on one’s desired explanation or title choice. Right now, I’m currently going by User Experience Designer, so you could call me a UXD, but please don’t… Just call me Patrick Hansen.

UI is simply User Interface. This is related to design as well and you could be referring to a UI designer, or the actual UI of an application. You could even be referring to the UI of your car’s dashboard.

So, how do we distinguish between all of this and make any sense of it?

Well, UI is pretty straight forward. It is the actual user interface. Here is WIKI’s definition: “The user interface (or Human Machine Interface) is the aggregate of means by which people—the users—interact with the system—a particular machine, device, computer program or other complex tools.”

here is WIKI”s explanation of user experience: “User experience design is a subset of the field of experience design which pertains to the creation of the architecture and interaction models which impact a user’s perception of a device or system. The scope of the field is directed at affecting “all aspects of the user’s interaction with the product: how it is perceived, learned, and used.”

The latter is a little more abstract and not an exact science. Designing a great user experience requires a very thoughtful approach in not only design, aesthetics and functionality, but also you have to take into account the human emotions. As every human is individual, you can see why this can complicate things. Everyone will not react or behave in the same way, so to gauge experience is slightly difficult. You can however, gather feedback and create from there. Pulling feedback on existing systems for a new iteration is even better. That way you have a foundation to go from, and you can not only aim for what will make a great experience, but you can note what has NOT made a great user experience so far.

One example I provided my friend was a simple Google image search and Pic Lens plugin for Firefox.
Both are user interfaces, that’s obvious. Now the experience of using either one is significantly different. Now, I’m not saying either one is better than the other, as they both have pros and cons in dependent scenarios.

Just a quick demo. Install Pic Lens if you haven’t yet. Don’t worry, it won’t hurt you or your browser, just provide a new feature. You can uninstall it whenever you choose.

Now first, run an image search in Google. You get a list of image results that you can paginate through. It got the job done, the images are displayed clearly including info and meta data about the image. They even link to their sources. Fantastic! Does the job, simple and easy. Great UI.

Now, I’m going to open the search in Pic Lens by clicking on the little grey arrow that appears over images now.

This will open the search up in pic lens full screen. It is 3D environment, where you can keep moving towards the right to pull in more images. No pagination, but use of scrolling. It immerses you into a full image library wall in a simulated 3D space.

Now again, I’m not saying this is better for all cases, but the experience is quite different from the conventional image search and listed results. The user will decide how great of an experience it is, although I would say in most cases, the Pic Lens route provides a more exciting and unique way to search through images.

You can even relate this to automobiles. You can get to point A to point B in virtually any car, let’s say an economy car like a Chevy Cobalt.

If you had the choice to go to point A to point B in a Bentley, would you do it?

You may not see a need for it, for some practical reasons, gas, or personal feelings on luxury. But, I do not think you can argue that the experience would be dramatically different and possibly even better than the economy car. Again, both are experiences and both have similar UI’s such as a dashboard, steering wheel, etc., and both have user experiences.

Which one has a better focus on the user and reaching into their emotions to provide a great user experience? I’ll leave that up to you, but I can say that both do provide and complete the functionality request, in this case transport the user. All I have to say is I’d much rather sit on leather, have a smooth ride, and enjoy a great sound system, rather than just sitting on cloth, and have a bumpy ride with road noise and interference blending with my music.

Remind you of any contrasting OS’s?

We (EffectiveUI), just did some minor tweaks on Discovery Earth Live, both design-wise and performance enhancing.

Click here to view previous post about Earth Live

Click here to visit Discovery Earth Live

The development team upgraded the 3D library to a Away 3D 2.0. This should speed up performance on the 3D globe (earth) and more so, when there are complex layers on it such as video.

I helped out with some small aesthetic tweaks, styles and colors. Juan Sanchez helped out with providing a Degrafa based ScrollBar track that features a repeating grid-like pattern, which was part of the original design, but not possible with the graphical skinning technique we originally used.

Another great piece from Fairey, reflecting the current political scene of America and the influence of politics in art.

Let’s hope there will be some progress!

I just saw The Roots and Erika Badu at The Filmore in Denver. It was an amazing show. First let me apologize for the poor quality of these photos, but they were taken

The Roots killed it with the presence of a very lively and energetic band. Owne Biddle,bassist, laid down some heavy lines, Kamal Gray threw down on the ol’ keys, and the TUBA PLAYER Damon “Tuba Gooding Jr.” was bumping! He was actually pretty mobile with that heavyweight brass instrument. I believe there was a percussionist, but couldn’t see him from my position relative to the stage.

The guitarist KILLED it! Captain Kirk Douglas was amazing and as they all put on great solos, but the guitarist definitely stood out. He practically put on a mini show, with emotional riffs and synchronized lyricism and acapella to his licks.

Black Thought of course brought the lyricism and livliness to the stage. His energy was on point and rhymes were loud and clear. Nice sound Filmore!

I can’t leave out QuestLove on drums. He seems so natural on the drums, like it was involuntary, and just another breath for him.

Erika Badu then came on, with a very theatrical intro and set. Not only was her voice beautiful, her band amazing, but she had a beat pad and laptop set up (Macbook Pro ), and she was conducting and playing tracks form that, and then between songs, throwing down some improv beats. Not just simple beats, but some very impressive beat patterns and combinations.

The Axiotron™ Modbook™ has been out for awhile. I just became aware of its existence. It seems like a pretty awesome modification on Apple’s MacBook.

I’m not sure if I would take full advantage of the tablet features yet, and as some fellow coworkers mentioned, the heat generated form the MacBook, could make it difficult for on the go tablet usage. Scenarios such as standing and writing (digital clipboard) could be difficult with the heat issues. Maybe just get a pen and paper for that type of situation.

As for normal usage, the tablet feature seems like it can be beneficial, especially for designers or artists who love to use Wacom tablets. Not only can you use a stylus and tablet, but it is directly on the monitor, so you can see and be positioned exactly where you are drawing! Similar to Wacom’s Cintiq’s which go for around $2000 range.

The Modbooks currently run $2,279.00 and $2,479.00 depending on your model choice. The more expensive is a 2.4GHz Intel Core Duo, 2GB RAM, 160GB Hard Drive and Dual Layer Super Drive vs. the slightly slower 2.1GHz, 1GB RAM, 120GB Hard Drive and Standard Super Drive. Not a bad price for those upgrades.

These prices are about $1100 more than a standard MacBook, but taking into consideration the price of a Cintiq, the Modbook definitely comes out on top.

Here are the tablet related custom features:
- AnyView™ 13.3″ Wide Screen
- ForceGlass™ Screen & Camera Cover
- WACOM Penabled® Digitizer
- 512 Levels of Pressure Sensitivity
- Axiotron Digitizer Pen
- WAAS enabled GPS Built-In

I haven’t had the opportunity to play with one of these yet, but I would love to try it out. It may be the next thing on my wishlist, and could knock the MacBook Pro 15″ off.

Find out more here: http://eshop.macsales.com/shop/ModBook