The iTunes clutter and users perception

Sometimes companies let technical considerations affect their product strategy in a bad way, allowing “practical” point of view override the “user” point of view. Startups often say “our technology does X, this can be interpreted into several actions, let’s wrap them together to make a bigger offering while keeping small resources and requirements on our side”.
They forget that each product is accepted by users perception under a contextual category, a definition, a purpose. for instance, for me Cyberduck is a ftp client, it’s a utility, it’s used for my professional productive activities. VLC is a video player, it’s for seeing movies, for fun. I see no point in mixing those together into one application, even if the core technology was the same. I said IF. Another point is using terms for ‘normal’ people, correct, understandable, don’t exaggerate. Don’t call your service ‘GPS’ if it only provides numeral coordinates, for me, and probably most users, GPS is something else, it has maps and gives directions, 3D view, etc. your marketing may look more effective but the truth will be revealed eventually and you will never gain my trust again.

Interesting bad example would be iTunes. yes, I love my mac, after 12 years I can’t see my self going back to windows, but still, Apple made some arrogant mistakes in this area, iTunes is one of them. It’s the best music player in the market, I never used the itunes store to buy movies or TV shows, because for me itunes is for music, I would expect to find movies and such in Quicktime, but it didn’t really bother me. Then I got an iPod. syncing music from itunes forced apple to use an interface originally designed for playlists and songs for file system & disk utilities actions, this added a new kind of screen with new set of controls to the ones I already knew in iTunes, which immediately made the entire app a bit more scary.
itunesClutter
And then I got an iPhone, and the AppStore, and then came Ping, and over and over again the whole iTunes experience was stretched to new areas. Why?
Wouldn’t it be easier for us users and you Apple to split this clutter into several existing applications? let iTunes play tunes, let iSync do sync and backup, let Quicktime play movies?

Profyler – profile image creation app

Many people are having troubles resizing and processing pictures into a profile image (say for Facebook?), there are countless free utilities and apps out there (most of them look pretty shitty..), and also several online services, and now there is another one – mine :)

profyler



It’s a flash application that enables you to scale and process an image from your computer, and when you’re happy with it, you can save it to your computer. The application does not communicate with external servers and does not save or send any data anywhere.

As always, it’s a work in progress, I will be adding features and effects as time allows me, but it is fully functional right now. So go a head, give it a shot and create your own profile image, it’s really easy and fast.
Don’t forget to let me know if you liked it!
enjoy :)

This is the public link of this application, in case you want to share it:
http://www.todepoint.com/profyler

* I will be writing some more soon, describing several aspects of making this application, stay tuned.
 

K2 – Cool rich interface yet browsers compatible

I am very happy with the K2 wordpress theme (you’re watching it right now), beside having some pretty amazing browsing enhancements (I did not enable them yet, features like search results that appear as you type your search phrase, timeline view of your posts) it also has a very nice and intuitive sidebar manager, that allows you to write and manage the widgets and snippets in your side bar.
You can edit, rearrange them by dragging – works the same on all browsers! that’s pretty cool.

K2_sidebar_manager

Glossy buttons in pure as3 code


I’ve been playing with the drawing classes, experimenting gradients and blending modes, and so I put together a small (basic) as3 class that generates a glossy button with pure code – no library assets.

You can download the class here.

The class constructor expects only 3 parameters:
@param rad = Width of button
@param darkColor = The color in top area, more dominant
@param lightColor = The color in the bottom area

* you can then place it anywhere, and use method setCaption(cap:String) to place a label on the button, though this is a very basic implementation of text handling, I focused on drawing..

Let me know if you liked it : )

ResizeManager – simple scaling engine for MovieClips

Flash objects (SWF) can fill the entire Html body, and scale along with browser window as you resize it (it’s done by setting width and height attributes to 100% in the embed tags). However unless scaleMode is properly defined as well, the outcome may look surprisingly bad, the flash content may loose proportions and distort, images quality drops and texts loose readability.. oh man.

Only specific contents should be scaled when the stage is resized, the same way apps handles resizing: an app will redistribute its panels without scaling them, will scale panel background but not the buttons and the controls in it. When the entire stage is simply scaled, the interface balance is disturbed.. and we don’t want that.

So I decided to share: ResizeManager (download) is a very simple scaling engine, a single AS2 class that can easily be modified or extended for your needs.
The manger can control scaling and some basic align options of MovieClips you register to it, so you can scale a background MovieClip to cover the entire stage, and keep another MovieClip centered without scaling. It also adds default definitions for the Stage behavior (scaleMode: noScale, stageAlign: TL), though you can change those.
In order to use it, simply import the class and create an instance of the ResizeManager:

import com.adifeiwel.custom_ui.ResizeManager;

var rm = new ResizeManager();

Then, use method registerMC() to register each MovieClip you want to control (including MovieClips nested within MovieClips, make sure parent MC is x:0, y:0), the registerMC method expects the following parameters:
_parentName:MovieClip (the name of the MoviClip)
_widthUpdate:Number (scaling in percentage from Stage.width, 0 for no-scale)
_heightUpdate:Number (scaling in percentage from Stage.height, 0 for no-scale)
_centerUpdate:Boolean (align MovieClip to center of stage)
_middleUpdate:Boolean (vertical-align MovieClip to middle of stage)

for example (see it here):

rm.registerMC(portMC.mainBG, 100, 100, false, false);
// will scale to cover all Stage

rm.registerMC(portMC.middleMC.middleBG, 100, 0, false, false);
// will scale to take 100% of Stage.width

rm.registerMC(portMC.middleMC.middleContentMC, 0, 0, true, false);
// aligned to center

rm.registerMC(portMC.transMC, 0, 0, true, true);
// aligned to center, vertical-align to middle.

rm.registerMC(portMC.vClip, 0, 80, false, false);
// will scale to take 80% of Stage.height

enjoy : )

Update: You can download the example FLA here.

scrollPane background customization – as3

I was trying to customize a scrollPane component (as3) and ran into some difficulties, I wanted to change the background of the panned area. The default background is kinda gray with rounded corners, I wanted it dark and strait corners.

scrollPane default backround

After far too much time searching Adobe’s Livedoc (what a shame, didn’t find the answer there), and reading countless posts, I eventually found the answer via Flash Help Panel.

scrollPane customized backround

Apparently the only way is to change the default skin of the component, to do that you simply prepare a MovieClip to serve as skin and give it linkage name, then set the component instance style to use the skin you prepared, like this:

aSp.setStyle( "upSkin", newSkinClip );

upSkin is the default skin class, and I’m setting it to use the skin I made.

Adobe really should find a way to make those livedoc easier for use and orientation, it takes too long for pages to load, and I keep finding my self clicking in loops..

Sony Bravia has a great 3D interface in flash

Sony Bravia new site (http://bravia.sony.eu/bravia.html) is a great example of 3D navigation system in flash, bringing a new and fresh feel to site navigation, worth the long loading.
sony_bravia_3D_03.jpgsony_bravia_3D_02.jpg
Using keyboard arrows is so easy and intuitive for controlling the 3D menu, it’s a shame the actual sections content is not arranged for keyboard control and requires “traditional” mouse interaction. But it is very cool eventhough.

Window resize – Apple are you sure?

The difference between PC and Mac in term of window resizing (where to drag in order to resize a window) is old and everybody got used to it by now.Basically PC windows have a drag-able border, when you place the cursor over the window border it changes to a resize-cursor and allow you to drag the window border resizing the window, this works the same in all directions, and in corners:
xp_resize.jpg
Macs windows however have one single resize area in the bottom right corner, there is no cursor feedback, if you drag it the window will resize – towards down and/or right only:
osx_resize.jpg
Switchers find it a little annoying but Mac OS X has other features that compensate this – the green button that toggles window size and of-course Expose.And now, suddenly after years of industrial silence, comes Adobe with the new CS3 UI for Mac, that allow you to resize the interface windows (aka ‘palettes’) from the border – XP style..
cs3_resize2.jpg
It’s about time to change this behavior in the Mac Aqua, it is not convenient.At least add a feedback cursor.

I did not read Nielsen’s latest book, not sure I want to.

lemon_450.jpg
Jeff Atwood of Coding Horror extracts from Jacob Nielsen’s latest book Prioritizing Web Usability, it is interesting how flash is still listed as a problem, a “two skulls” problem! this comes out in 2007?I respect Jacob Nielsen very much, though he is a problematic card to use with clients, as it tend to explode in your face.. I rather consider his guidelines as yet another professional reference, a way to evaluate aspects of my work, a severe and rigid one.So many Web UI standards are tied to circumstances that are no longer relevant, not only flash, take the default blue link color for example: today, that most of the rational web sphere has digested the need to differentiate the links from normal text, using colors, sometimes also underline, comes the question – does it have to be blue? are we still in a reality that most users are not familiar with hyper text and its behavior? I think not.As a designer I learned that no pioneering comes from just following rules, you should always have a doubt, never loose the curiosity and exploration. I think that In terms of UI, each time has its own trends, innovations and other factors that change the usage habits and acceptance. Therefore each project should have its own definition of the UI standards that match the usage cases for the target audience in this time.