Archive for the ‘ User Experience ’ Category

Tips on connecting blogs to Facebook

I just finished connecting my blog and few other pages on my site to Facebook, to enjoy some sharing goodness of the social community, as well as Facebook’s ‘insight’ statistics – why not enjoy what is given for free right?

I had some setbacks and strugles along the way, thought it might save you some time (and wasted ‘Likes’ too) to write few tips down. It will not be a full tutorial, instead I will focus on some oddities on the Facebook side:

First tip will be: Do not implement until you REALLY understand what your options are and what exactly you want to do. Facebook offers two main options for adding a ‘Like’ button to your page/site/blog, one is IFRAME, second is XFBML. The iframe option is as simple as adding a line in your html source, and will get you going in seconds. The xfbml is based on their Javascript SDK, and sports the Facebook ‘insight’ statistics via open graph, but requires few preliminary steps which are kinda tricky as the documentation is fairly sparse. Obviously we would prefer the xfbml option.

In order to use xfbml you will need an AppID, which require you to set up an application, to do that you will have to add the Developer application to your Facebook Profile.

Then, you have to activate you developer account – you have to give you cell number, after which you will receive a code via sms to submit.

Then you can create an application in Facebook here.
* This page has a strange behavior, you will define your application name, pass a captcha and receive an Error page:
“Sorry, an error has occurred.
We’re working on getting this fixed as soon as we can.”

Creating Facebook application error
But if you look at the column on the right in the developers page, you will see that the application was actually created:
Facebook applications list (Facebook, are you serious about that? is this some kind of a test?) I ended up creating about 10 applications, read countless forums threads until I found it by mistake!

After that you can start implementing, follow the instruction here which are pretty simple.

Since I thought Facebook application creation service is down, I started with the iframe version, obviously a mistake as all the ‘Likes’ I got were dumped once I connected the xfbml. damn.

Good luck and may the force be with you..

The ultimate video player – as3

There are many video players in flash out there, lots of them are open too, I’ve found few tutorials out there giving everything you need to know to code a video player. few of them work really nice and heavily distributed (JW Player), others have cool UI, few considered proper integration of keyboard control, most of them don’t. yet none of them has it all. none of the player I saw had the right touch.

So I decided to take the challenge and make a code only (no library assets), lightweight video player, with elegant UI that works as you would expect it to, with keyboard control (starting with play/pause, forward/backwards jumps, the fundamentals, the musts). also fullscreen mode and moving between the screen modes by double clicking a la VLC (which is my favorite video player on the Mac), and of-course buffering.

At the moment the features are:
• Keyboard control: play/pause (space bar); jump backwards/forward (left/right);
• Volume control affecting the volume while pressing and moving cursor;
• Fullscreen-normal by double-clicking the video or dedicated button;
• Single click on the video toggles play/pause;
• Display of position and total duration;
• Clickable progress bar, a click will jump video to position.
• Control bar will hide when mouse leaves stage.
• File size is 20.8k (!!)

Credits:
The architecture was inspired by Mr.doob’s player, but I replaced his video controller with the excellent FLVPlayer by Martin Legris, and added my own touch and flavor :)

Suggestions are more than welcome, tell me what you think!

Update: I was working on improving the player behavior across platforms and browsers, discovering that events behavior is different on IE from the ret of the browsers. Surprising ha? MouseEvent.MOUSE_OUT added to the stage is not firing on IE, you have to add Event.MOUSE_LEAVE, it still works for the rest of the browsers. This actually solved several oddities on IE, people are still using it? really?!

Update 2: I added spinning loading animation when video is buffering, and moved the duration text to be next to the position text, I guess it is easier for the eye this way.

The Year of the Flash

So much was written of the new flash player (version 10, code named “Astro”) and what it may do to the industry, it is indeed technologically inspiring, but from a freelance point of view (business wise) this even looks better.

Looking back to when I started working with flash (about ten years ago) and now, I can see a huge change in the weight of flash in projects out there.
Today, both the platform and the clients have matured, Flex has made a huge impact on technological companies perception of flash as the focus is shifting towards User Experience (anyone said RIA?) and OS compatibility and consistency, and the role flash plays in those is non comparable.

Up until recently I had to explain what I do, when refusing to take so many projects that were not related to my skills.. I guess because flash animators, designers, and coders were all considered the same in term of wages and availability.
Now, companies are looking for flash experts that can make charts like Google’s financial charts, and this is clearly a specialist job, since most of these companies don’t have the know-how in house, they call guys like me : )

The good news is that each improvement in flash adds to the appeal we have, and the demand for advanced flash programers is absolutely amazing.

I think this will be a great year.

Flash, a dominant video platform

The last Adobe Flash Player update, (Aug 21, codenamed “Moviestar”) integrates H.264 video and High Efficiency AAC audio codecs, as well as multi core support and full screen mode with hardware scaling.So flash will soon deliver HD quality videos, good news : )Flash is probably the best video platform today, as it combines the customizable interactivity of flash scripting and advanced streaming and playing abilities.The recently updated YouTube player is a great example, developing the video playing experience by improving the most difficult part – selecting the video out of the endless inventory without too much effort by the viewer. In the new player when the video you watched is over, relevant videos are offered, very aesthetically and in the same location, without visiting the flickr website or even leaving the page. nice.YouTube new player interface:youtube_interface.jpg

Porting app to Mac – mash native services

Scott Stevenson of Thecacao has a great point differentiating cross platform applications and native mac applications, another basic difference in the user experience between ported apps and native Mac apps is that Mac native applications enjoy core services such as Dictionary-Thesaurus, Speller, etc.. I rely on those services, and the consistency in keyboard shortcuts they bring to my working environment.For example take a look at Photoshop CS3 beta for Mac – it has a built in speller, the interface is primitive and not really attractive compared to the advanced docked palettes (see cap), surely less intuitive than the OS native speller.
adobe_speller.jpg
confusing interface – what was checked? is that correct?
adobe_dictionary.jpg
primitive interface – so many buttons, the default button is not aplying the change!
mac_dictionary.jpg
the good familiar mac dictionary – even look nice..
Skype provides the native mac Speller and Dictionary services, Firefox (and Camino) has no speller nor dictionary :(
Applications well ported to Mac should respect user habits, unless they really upgrade or improve the native OS service – they should not confuse the user by not providing those services or providing poor alternatives, for me it is not that different than the ability to copy & paste from one app to another.

Windows on Mac – getting closer!

I installed the latest Parallels build (3186) few days ago, and forgot about it, I said before I rarely need “de vindoz”, but today I had to check CSS consistency for a project I work on, and since there still are few windows users out there, I wanted to check IE and FireFox on Windows – hey, Parallels!I remember when I just got my Mac, I couldn’t wait to show-off the cube transition effect between OS, but when I had to actually work with the two OS, it was too slow and I quickly removed the effect.Now Parallels has a mode called ‘Coherence’, allows you to launch and run Windows applications directly from your Mac desktop, it hides the Windows desktop, and adds the Windows start bar. The application windows blend with mac windows. the behavior in the Z order is not natural, all Windows applications are grouped as one for the Mac OS (reasonable though), it is very comfortable.For the simple task of proofing Html rendering it was the fastest method I ever used, I could actually work fast – the only problem was the different shortcuts, the command vs. control issue.Command-Tab shows Windows Apps (see cap) as well as the Dock (weird! what are all those icons doing there?), even Expose works reasonably.
parallels_command_tab.jpg
However, the Windows rudeness is somehow “infecting” my pure Mac environment, when the XP screen-saver kicks-in, it covers the Mac desktop. When I quit Windows its desktop suddenly appears blocking the Mac desktop all through the logout process, then Parallels window demonstrates all transitions allowed – slide-out-slide-in-flip-flap-shrink-splas-stada.. it’s like Mac OS is so happy to get rid of this “thing” it celebrates the ram released.

Apollo this is earth, do you read?

Eric Dolecki wrote an inspiring post about “what Apollo might bring“, I must admit I share his excitement, I witnessed Flash evolve from a graphics and animation oriented application into a global standard RIA platform, empowering new approaches to User Interface, and changing the web application experience.

Apollo is a cross-OS runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

Apollo will probably do the same to desktop applications, enrich our desktop apps experience – applications will talk to each other, be updated without user involvement, be more personalized, and best of all – platform independent.In addition to that, imagine the impact open source projects such as Red5 will have on the way we communicate – as the costs of server applications to “talk” to (or through?) are dramatically diminished.I am definitely optimistic.

Joost Mac beta released – perhaps too early?

joost_small.jpgJoost (up until recently code named ‘The Venice Project’ ) has released it’s Mac beta (only Intel Macs at the moment) – this is good news for us Mac users.The general feeling is pretty much same as with Windows, performance is good, video quality has improved.The interface has slightly evolved since my last review, but small details are somehow still neglected, mainly fonts inconsistencies and text placement issues. But the issue I am more disturbed about is the remote control readiness – better say Not Ready.Apple Intel computers ships with Apple Remote and are the only platform that actually justifies the full-screened interface, allowing a real lean backwards experience, controlling your Mac with one hand from across the room.Joost does not support the Apple Remote, furthermore the interface is simply not ready for a remote control, as it is still relying on a point & click control (a mouse), and many details in the interface are too small for using from a distance.I believe Joost will eventually be remote controlled, but at the moment the users are getting used to a certain UI logic, and it will be harder to change the entire interaction habits in a future stage, leading me to think that since Joost is “a new way to watch TV”, maybe the beta program was released a bit too early?

The technological edge myth

cat.jpg

Dealing with ideas and startups, we get to talk with entrepreneurs, VCs and BizDev guys, very often we are asked what is the technological edge in the idea? what will differentiate it from imitations and prevent competitors from copying the idea? hmm, how about nothing?

In todays reality, what makes a product hot often has nothing to do with pioneering technology, what was Flickr’s technological edge? what was YouTube’s? yes, yes, I know, both these examples have deep technological aspects in their solution/product/service, but Flickr really did not invent something new in terms of technology, neither did YouTube. for each example I can name a better reason for succeeding other than a technological edge, mainly Timing, face it, many of those web2.0 companies are really implementing OLD ideas, in a better circumstances, as today the users are more willing to accept & participate in “advanced” concepts.

So what is the importance of a technological edge in the chances of a new idea to succeed ?

Since It is simply not necessary today to have huge development departments in order to make applications people want, it is time to omit the technology from the phrase – the edge may be the user experience in your product (e.g. iPod), integrating well with other services (mashup), or being open for enhancements from third party players (open API), and more important – successfully integrating these in your business plans & objectives.

I value the user experience the most because this is what counts for users at the end, I use Flickr, Skype, de.icio.us, because it is easy and convenient, not because they use this platform and not another, and this counts for success – how many users are actually using it, and what impact it has on our life.